From c831a19d6c82d4d3f4f894a2e0d71277dab2f022 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Fri, 19 Nov 2021 00:56:07 +0800 Subject: [PATCH] refactor: seperate helper render-ctx from origin ctx --- packages/board/src/index.ts | 4 +-- packages/board/src/lib/temp.ts | 4 +-- packages/core/src/index.ts | 28 ++++++++++++++++--- .../renderer/examples/features/lib/main.js | 6 ++-- packages/renderer/examples/features/main.html | 2 +- packages/renderer/src/index.ts | 10 +++++-- 6 files changed, 40 insertions(+), 14 deletions(-) diff --git a/packages/board/src/index.ts b/packages/board/src/index.ts index 8c18bcf..cc5ceb5 100644 --- a/packages/board/src/index.ts +++ b/packages/board/src/index.ts @@ -1,6 +1,6 @@ import { TypeScreenPosition, TypeScreenSize, TypeScreenContext, TypePoint, TypePointCursor, - TypeBoardOptions, TypeBoardSizeOptions, TypePlugin, TypeContext, + TypeBoardOptions, TypeBoardSizeOptions, InterfacePlugin, TypeContext, } from '@idraw/types'; import util from '@idraw/util'; import { ScreenWatcher } from './lib/screen-watcher'; @@ -159,7 +159,7 @@ class Board { return { position, size }; } - addPlugin(plugin: TypePlugin) { + addPlugin(plugin: InterfacePlugin) { this[_tempData].get('plugins').push(plugin); } diff --git a/packages/board/src/lib/temp.ts b/packages/board/src/lib/temp.ts index d22900d..7347cbd 100644 --- a/packages/board/src/lib/temp.ts +++ b/packages/board/src/lib/temp.ts @@ -1,10 +1,10 @@ -import { TypePlugin, TypeBoardOptions, TypeContext } from '@idraw/types'; +import { InterfacePlugin, TypeBoardOptions, TypeContext } from '@idraw/types'; import util from '@idraw/util'; const Context = util.Context; type TempDataDesc = { - plugins: TypePlugin[], + plugins: InterfacePlugin[], ctx: TypeContext, } diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 9e8bc2a..b0876a6 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -5,10 +5,11 @@ import { } from '@idraw/types'; import Board from '@idraw/board'; import util from '@idraw/util'; +import Renderer from '@idraw/renderer'; import is, { TypeIs } from './lib/is'; import check, { TypeCheck } from './lib/check'; import { - Renderer, Element, Helper, Mapper, mergeConfig, CoreEvent, + Element, Helper, Mapper, mergeConfig, CoreEvent, TypeCoreEventArgMap, parseData, TempData, diffElementResourceChangeList, } from './lib'; import { @@ -20,6 +21,7 @@ import { getSelectedElements, updateElement, selectElementByIndex, getElement, g insertElementBefore, insertElementBeforeIndex, insertElementAfter, insertElementAfterIndex, } from './mixins/element'; import { initEvent } from './mixins/event'; +import { drawElementWrapper, drawAreaWrapper, drawElementListWrappers } from './lib/draw/wrapper' const { deepClone } = util.data; class Core { @@ -51,7 +53,24 @@ class Core { lineWidth: config?.scrollWrapper?.lineWidth || 12, } }); - this[_renderer] = new Renderer(this[_board]); + this[_renderer] = new Renderer(); + const drawFrame = () => { + const helperCtx = this[_board].getHelperContext(); + const helperConfig = this[_helper].getConfig(); + this[_board].clear(); + const { contextWidth, contextHeight, devicePixelRatio } = this[_opts]; + helperCtx.clearRect(0, 0, contextWidth * devicePixelRatio, contextHeight * devicePixelRatio) + drawElementWrapper(helperCtx, helperConfig); + drawAreaWrapper(helperCtx, helperConfig); + drawElementListWrappers(helperCtx, helperConfig); + this[_board].draw(); + } + this[_renderer].on('drawFrame', (e) => { + drawFrame(); + }) + this[_renderer].on('drawFrameComplete', (e) => { + drawFrame(); + }) this[_element] = new Element(this[_board].getContext()); this[_helper] = new Helper(this[_board], this[_config]); this[_mapper] = new Mapper({ @@ -79,8 +98,9 @@ class Core { scrollX: transfrom.scrollX, scrollY: transfrom.scrollY, }); - this[_renderer].thaw(); - this[_renderer].render(this[_data], this[_helper].getConfig(), opts?.resourceChangeUUIDs || []); + this[_renderer].render(this[_board].getContext(), this[_data], { + changeResourceUUIDs: opts?.resourceChangeUUIDs || [] + }); } getElement(uuid: string) { diff --git a/packages/renderer/examples/features/lib/main.js b/packages/renderer/examples/features/lib/main.js index 4b3b627..c8c3583 100644 --- a/packages/renderer/examples/features/lib/main.js +++ b/packages/renderer/examples/features/lib/main.js @@ -1,7 +1,9 @@ import { getData } from './data/index.js'; -import util from './../../../node_modules/@idraw/util/dist/index.es.js' +// import util from './../../../node_modules/@idraw/util/dist/index.es.js' +// import util from './../../../../util/dist/index.es.js' -const Context = util.Context; +// const Context = util.Context; +const Context = iDrawUtil.Context; const Renderer = window.iDrawRenderer; const data = getData(); const canvas = document.querySelector('#canvas'); diff --git a/packages/renderer/examples/features/main.html b/packages/renderer/examples/features/main.html index bb0cd2b..98df4ba 100644 --- a/packages/renderer/examples/features/main.html +++ b/packages/renderer/examples/features/main.html @@ -11,7 +11,7 @@ - + diff --git a/packages/renderer/src/index.ts b/packages/renderer/src/index.ts index b7b4929..077e4b0 100644 --- a/packages/renderer/src/index.ts +++ b/packages/renderer/src/index.ts @@ -79,9 +79,8 @@ export default class Renderer extends RendererEvent { } if (!this[_ctx]) { - if (target instanceof Context) { - this[_ctx] = target as TypeContext; - } else if (this[_opts] && Object.prototype.toString.call(target) === '[object HTMLCanvasElement]') { + // TODO + if (this[_opts] && Object.prototype.toString.call(target) === '[object HTMLCanvasElement]') { const { width, height, contextWidth, contextHeight, devicePixelRatio } = this[_opts] as Options; const canvas = target as HTMLCanvasElement; canvas.width = width * devicePixelRatio; @@ -94,6 +93,9 @@ export default class Renderer extends RendererEvent { contextHeight: contextHeight || height, devicePixelRatio }) + } else if (target) { + // TODO + this[_ctx] = target as TypeContext; } } @@ -144,10 +146,12 @@ export default class Renderer extends RendererEvent { if (item && ctx) { drawContext(ctx, item.data, this[_loader]); // this._board.draw(); + // this.trigger('drawFrame', { t: Date.now() }) } } else if (item && ctx) { drawContext(ctx, item.data, this[_loader]); // this._board.draw(); + // this.trigger('drawFrame', { t: Date.now() }) this[_retainQueueOneItem](); if (!isLastFrame) { this[_drawFrame]();