refactor: seperate helper render-ctx from origin ctx

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);
   }
 

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

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) {

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');

packages/renderer/examples/features/main.html

@@ -11,7 +11,7 @@
       <canvas id="canvas"></canvas>
     </div>
 
-    <!-- <script src="./../../dist/index.global.js"></script> -->
+    <script src="./../../../util/dist/index.global.js"></script>
     <script src="./../../dist/index.global.min.js"></script>
     <script type="module" src="./lib/main.js"></script>
   </body>

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]();