From 265c901b345a870d804b60776b3fcdd649291863 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Fri, 12 Nov 2021 00:04:04 +0800 Subject: [PATCH] refactor: update @idraw/renderer private prototype to symbol key --- packages/renderer/src/index.ts | 110 +++++++++++++++++---------------- packages/renderer/src/names.ts | 14 +++++ 2 files changed, 71 insertions(+), 53 deletions(-) create mode 100644 packages/renderer/src/names.ts diff --git a/packages/renderer/src/index.ts b/packages/renderer/src/index.ts index b2cb77e..6edf1f8 100644 --- a/packages/renderer/src/index.ts +++ b/packages/renderer/src/index.ts @@ -3,6 +3,10 @@ import util from '@idraw/util'; import { drawContext } from './lib/draw'; import Loader from './lib/loader'; import { RendererEvent } from './lib/renderer-event'; +import { + _queue, _ctx, _status, _loader, _opts, _freeze, + _drawFrame, _retainQueueOneItem +} from './names'; const { Context } = util; const { requestAnimationFrame } = window; @@ -28,49 +32,41 @@ type Options = { export default class Renderer extends RendererEvent { - private _queue: QueueItem[] = []; - private _ctx: TypeContext | null = null; - private _status: DrawStatus = DrawStatus.NULL; - private _loader: Loader; - private _opts: Options; + private [_queue]: QueueItem[] = []; + private [_ctx]: TypeContext | null = null; + private [_status]: DrawStatus = DrawStatus.NULL; + private [_loader]: Loader; + private [_opts]: Options; constructor(opts: Options) { super(); - this._opts = opts; - this._loader = new Loader({ + this[_opts] = opts; + this[_loader] = new Loader({ maxParallelNum: 6 }); - this._loader.on('load', (res) => { - this._drawFrame(); + this[_loader].on('load', (res) => { + this[_drawFrame](); // console.log('Load: ', res); }); - this._loader.on('error', (res) => { + this[_loader].on('error', (res) => { console.log('Loader Error: ', res); }); - this._loader.on('complete', (res) => { + this[_loader].on('complete', (res) => { // console.log('complete: ', res); }); } - freeze() { - this._status = DrawStatus.FREEZE; - } - - thaw() { - this._status = DrawStatus.FREE; - } - render(canvas: HTMLCanvasElement, originData: TypeData, opts?: { // forceUpdate?: boolean, changeResourceUUIDs?: string[] }): void { - // if ([DrawStatus.STOP, DrawStatus.FREEZE].includes(this._status)) { + // if ([DrawStatus.STOP, DrawStatus.FREEZE].includes(this[_status])) { // return; // } - // this._status = DrawStatus.FREE; + // this[_status] = DrawStatus.FREE; const { changeResourceUUIDs = []} = opts || {}; - this._status = DrawStatus.FREE; + this[_status] = DrawStatus.FREE; const data = deepClone(originData); if (Array.isArray(data.elements)) { @@ -81,12 +77,12 @@ export default class Renderer extends RendererEvent { }); } - if (!this._ctx) { - const { width, height, contextWidth, contextHeight, devicePixelRatio } = this._opts; + if (!this[_ctx]) { + const { width, height, contextWidth, contextHeight, devicePixelRatio } = this[_opts]; canvas.width = width * devicePixelRatio; canvas.height = height * devicePixelRatio; const ctx2d = canvas.getContext('2d') as CanvasRenderingContext2D; - this._ctx = new Context(ctx2d, { + this[_ctx] = new Context(ctx2d, { width, height, contextWidth: contextWidth || width, @@ -95,69 +91,77 @@ export default class Renderer extends RendererEvent { }) } - if ([DrawStatus.FREEZE].includes(this._status)) { + if ([DrawStatus.FREEZE].includes(this[_status])) { return; } const _data: QueueItem = deepClone({ data, }) as QueueItem; - this._queue.push(_data); - // if (this._status !== DrawStatus.DRAWING) { - // this._status = DrawStatus.DRAWING; - // this._drawFrame(); + this[_queue].push(_data); + // if (this[_status] !== DrawStatus.DRAWING) { + // this[_status] = DrawStatus.DRAWING; + // this[_drawFrame](); // } - this._drawFrame(); - this._loader.load(data, changeResourceUUIDs || []); + this[_drawFrame](); + this[_loader].load(data, changeResourceUUIDs || []); } - private _drawFrame() { - if (this._status === DrawStatus.FREEZE) { + private [_freeze]() { + this[_status] = DrawStatus.FREEZE; + } + + // private _thaw() { + // this[_status] = DrawStatus.FREE; + // } + + private [_drawFrame]() { + if (this[_status] === DrawStatus.FREEZE) { return; } requestAnimationFrame(() => { - if (this._status === DrawStatus.FREEZE) { + if (this[_status] === DrawStatus.FREEZE) { return; } - const ctx = this._ctx; + const ctx = this[_ctx]; - let item: QueueItem | undefined = this._queue[0]; + let item: QueueItem | undefined = this[_queue][0]; let isLastFrame = false; - if (this._queue.length > 1) { - item = this._queue.shift(); + if (this[_queue].length > 1) { + item = this[_queue].shift(); } else { isLastFrame = true; } - if (this._loader.isComplete() !== true) { - this._drawFrame(); + if (this[_loader].isComplete() !== true) { + this[_drawFrame](); if (item && ctx) { - drawContext(ctx, item.data, this._loader); + drawContext(ctx, item.data, this[_loader]); // this._board.draw(); } } else if (item && ctx) { - drawContext(ctx, item.data, this._loader); + drawContext(ctx, item.data, this[_loader]); // this._board.draw(); - this._retainQueueOneItem(); + this[_retainQueueOneItem](); if (!isLastFrame) { - this._drawFrame(); + this[_drawFrame](); } else { - this._status = DrawStatus.FREE; + this[_status] = DrawStatus.FREE; } } else { - this._status = DrawStatus.FREE; + this[_status] = DrawStatus.FREE; } this.trigger('drawFrame', undefined) - if (this._loader.isComplete() === true && this._queue.length === 1 && this._status === DrawStatus.FREE) { + if (this[_loader].isComplete() === true && this[_queue].length === 1 && this[_status] === DrawStatus.FREE) { this.trigger('drawFrameComplete', undefined); - this.freeze(); + this[_freeze](); } }); } - private _retainQueueOneItem() { - if (this._queue.length <= 1) { + private [_retainQueueOneItem]() { + if (this[_queue].length <= 1) { return; } - const lastOne = deepClone(this._queue[this._queue.length - 1]); - this._queue = [lastOne]; + const lastOne = deepClone(this[_queue][this[_queue].length - 1]); + this[_queue] = [lastOne]; } diff --git a/packages/renderer/src/names.ts b/packages/renderer/src/names.ts new file mode 100644 index 0000000..f288d93 --- /dev/null +++ b/packages/renderer/src/names.ts @@ -0,0 +1,14 @@ +const _queue = Symbol('_queue'); +const _ctx = Symbol('_ctx'); +const _status = Symbol('_status'); +const _loader = Symbol('_loader'); +const _opts = Symbol('_opts'); +const _freeze = Symbol('_freeze'); +const _drawFrame = Symbol('_drawFrame'); +const _retainQueueOneItem = Symbol('_retainQueueOneItem'); + +export { + _queue, _ctx, _status, _loader, _opts, _freeze, + _drawFrame, _retainQueueOneItem +} +