refactor: rewrite core's renderer

packages/core/src/index.ts

@@ -1,6 +1,6 @@
 import { TypeData, TypePoint, TypeHelperWrapperDotDirection, TypeConfig, TypeConfigStrict } from '@idraw/types';
 import Board from '@idraw/board';
-import Renderer from './lib/renderer';
+import { Renderer } from './lib/renderer';
 import { Element } from './lib/element';
 import { Helper } from './lib/helper';
 import { mergeConfig } from './lib/config';

packages/core/src/lib/painter.ts

@@ -1,10 +0,0 @@
-import { TypeData } from '@idraw/types';
-
-export class Painter {
-
-  // private _dataList: TypeData[] = [];
-
-  draw(data: TypeData): void {
-
-  }
-}

packages/core/src/lib/renderer.ts

@@ -1,21 +1,67 @@
-import { TypeContext, TypeData, TypeHelperConfig } from '@idraw/types';
-import { drawContext } from './draw';
-import Board from '@idraw/board';
- 
-export default class Renderer {
+// import { TypeData, TypeHelperConfig, } from '@idraw/types';
+// import util from '@idraw/util';
+// import Board from '@idraw/board';
+// import { drawContext } from './draw';
 
-  private _board: Board;
-  private _ctx: TypeContext;
-  private _data: TypeData = { elements: [] };
+// const { requestAnimationFrame } = window;
+// const { deepClone } = util.data;
+
+// type QueueItem = { data: TypeData, helper: TypeHelperConfig };
+// enum DrawStatus {
+//   FREE = 'free',
+//   DRAWING = 'drawing',
+// }
+
+// export class Renderer {
+
+//   private _queue: QueueItem[] = [];
+//   private _board: Board;
+//   private _status: DrawStatus = DrawStatus.FREE; 
+
+//   constructor(board: Board) {
+//     this._board = board;
+//   }
+
+//   render(data: TypeData, helper: TypeHelperConfig): void {
+//     const _data: QueueItem = deepClone({ data, helper }) as QueueItem;
+//     this._queue.push(_data);
+//     if (this._status === DrawStatus.FREE) {
+//       this._status = DrawStatus.DRAWING;
+//       this._drawFrame();
+//     }
+//   }
+
+//   private _drawFrame() {
+//     requestAnimationFrame(() => {
+//       const item: QueueItem | undefined = this._queue.shift();
+//       if (item) {
+//         drawContext(this._board.getContext(), item.data, item.helper);
+//         this._board.draw();
+//         this._drawFrame();
+//       } else {
+//         this._status = DrawStatus.FREE
+//       }
+//     })
+//   }
+// }
+
+
+
+
+import { TypeData, TypeHelperConfig, } from '@idraw/types';
+import Board from '@idraw/board';
+import { drawContext } from './draw';
+
+export class Renderer {
+
+  private _board: Board;  
 
   constructor(board: Board) {
     this._board = board;
-    this._ctx = this._board.getContext();
   }
 
-  render(data: TypeData, config: TypeHelperConfig): void {
-    this._data = data;
-    drawContext(this._ctx, this._data, config);
+  render(data: TypeData, helper: TypeHelperConfig): void {
+    drawContext(this._board.getContext(), data, helper);
     this._board.draw();
   }
 }

packages/util/src/index.ts

@@ -3,6 +3,7 @@ import { delay, compose, throttle } from './lib/time';
 import { downloadImageFromCanvas } from './lib/file';
 import { toColorHexStr, toColorHexNum, isColorStr } from './lib/color';
 import { createUUID } from './lib/uuid';
+import { deepClone } from './lib/data';
 import istype from './lib/istype';
 
 export default {
@@ -26,4 +27,7 @@ export default {
     createUUID
   },
   istype,
+  data: {
+    deepClone,
+  }
 };

packages/util/src/lib/data.ts

@@ -1,7 +1,27 @@
-// import {  } from './'
 
-export function clone (data: any): any {
-  if (Object.prototype.toString.call(data)) 
-  // TODO
-  return JSON.parse(JSON.stringify(data));
+export function deepClone(target: any): any {
+  function _clone(t: any) {
+    const type = is(t);
+    if (['Null', 'Number', 'String', 'Undefined'].indexOf(type) >= 0) {
+      return t;
+    } else if (type === 'Array') {
+      const arr: any[] = [];
+      t.forEach((item: any) => {
+        arr.push(_clone(item));
+      });
+      return arr;
+    } else if (type === 'Object') {
+      const obj: {[key: string]: any} = {};
+      const keys = Object.keys(t);
+      keys.forEach((key) => {
+        obj[key] = _clone(t[key]);
+      });
+      return obj;
+    }
+  }
+  return _clone(target);
+}
+
+function is(data: any): string {
+  return Object.prototype.toString.call(data).replace(/[\]|\[]{1,1}/ig, '').split(' ')[1];
 }