refactor: add Context render to @idraw/renderer

packages/core/package.json

@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@idraw/board": "^0.2.0-alpha.20",
+    "@idraw/renderer": "^0.2.0-alpha.20",
     "@idraw/util": "^0.2.0-alpha.20"
   },
   "publishConfig": {

packages/core/src/plugins/helper.ts

@@ -0,0 +1,7 @@
+import { InterfacePlugin } from '@idraw/types';
+
+export class HelperPlugin implements InterfacePlugin {
+  constructor() {
+    // TODO
+  }
+}

packages/renderer/examples/features/lib/main.js

@@ -1,11 +1,11 @@
 import { getData } from './data/index.js';
+import util from './../../../node_modules/@idraw/util/dist/index.es.js'
  
+const Context = util.Context;
 const Renderer = window.iDrawRenderer;
 const data = getData();
 const canvas = document.querySelector('#canvas');
-
-
-const renderer = new Renderer({
+const opts = {
   width: 600,
   height: 400,
   contextWidth: 600,
@@ -13,7 +13,9 @@ const renderer = new Renderer({
   devicePixelRatio: 1,
   // devicePixelRatio: 2,
   // onlyRender: true,
-});
+}
+
+const renderer = new Renderer(opts);
 
 renderer.on('load', (e) => {
   console.log('load =', e)
@@ -29,11 +31,23 @@ renderer.on('drawFrameComplete', (e) => {
   console.log('drawFrameComplete =', e)
 })
 
-renderer.render(canvas, data)
-renderer.render(canvas, { elements: data.elements.splice(1, 2) }, { forceUpdate: false })
+// renderer.render(canvas, data)
+// renderer.render(canvas, { elements: data.elements.splice(1, 2) }, { forceUpdate: false })
+// console.log(renderer.getContext())
+
+
+canvas.width = opts.width * opts.devicePixelRatio;
+canvas.height = opts.height * opts.devicePixelRatio;
+const ctx = new Context(canvas.getContext('2d'), {
+  width: 600,
+  height: 400,
+  contextWidth: 600,
+  contextHeight: 400,
+  devicePixelRatio: 1,
+  // devicePixelRatio: 2,
+  // onlyRender: true,
+})
+renderer.render(ctx, data);
+renderer.render(ctx, { elements: data.elements.splice(1, 2) }, { forceUpdate: false })
 
-console.log(renderer.getContext())
 
-// setTimeout(() => {
-  // renderer.render(canvas, { elements: data.elements.splice(1, 2) }, { forceUpdate: false })
-// }, 2000);

packages/renderer/src/index.ts

@@ -37,9 +37,9 @@ export default class Renderer extends RendererEvent {
   private [_ctx]: TypeContext | null = null;
   private [_status]: DrawStatus = DrawStatus.NULL; 
   private [_loader]: Loader;
-  private [_opts]: Options;
+  private [_opts]?: Options;
 
-  constructor(opts: Options) {
+  constructor(opts?: Options) {
     super();
     this[_opts] = opts;
     this[_loader] = new Loader({
@@ -57,7 +57,7 @@ export default class Renderer extends RendererEvent {
     });
   }
 
-  render(canvas: HTMLCanvasElement, originData: TypeData, opts?: {
+  render(target: HTMLCanvasElement | TypeContext, originData: TypeData, opts?: {
     // forceUpdate?: boolean,
     changeResourceUUIDs?: string[]
   }): void { 
@@ -79,17 +79,22 @@ export default class Renderer extends RendererEvent {
     }
 
     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, {
-        width,
-        height,
-        contextWidth: contextWidth || width,
-        contextHeight: contextHeight || height,
-        devicePixelRatio
-      })
+      if (target instanceof Context) {
+        this[_ctx] = target as TypeContext;
+      } else 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;
+        canvas.height = height * devicePixelRatio;
+        const ctx2d = canvas.getContext('2d') as CanvasRenderingContext2D;
+        this[_ctx] = new Context(ctx2d, {
+          width,
+          height,
+          contextWidth: contextWidth || width,
+          contextHeight: contextHeight || height,
+          devicePixelRatio
+        })
+      }
     }
     
     if ([DrawStatus.FREEZE].includes(this[_status])) {

packages/types/src/lib/plugin.ts

@@ -4,7 +4,7 @@ import { TypeContext } from './context';
 import { TypePoint, TypePointCursor } from './board';
 
 
-export interface TypePlugin {
+export interface InterfacePlugin {
   onHover?: (detail: {
     point: TypePoint,
     selectedElement: TypeElement<keyof TypeElemDesc> | null,