Elgato_dark/idraw
1
0
Fork 0
mirror of https://github.com/idrawjs/idraw synced 2026-05-24 10:08:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: update @idraw/renderer private prototype to symbol key

Browse source
This commit is contained in:
chenshenhai 2021-11-12 00:04:04 +08:00
parent 598fb138e6
commit 265c901b34
2 changed files with 71 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
packages/renderer/src/index.ts
View file

@ -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];
}

14
packages/renderer/src/names.ts Normal file
View file

@ -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
}