feat: add helper

packages/core/src/index.ts

@@ -25,7 +25,7 @@ class Core {
   private _hasInited: boolean = false; 
   private _mode: Mode = Mode.NULL;
 
-  private _selectedIndex: number = -1;
+  private _selectedUUID: string | null = null;
   private _prevPoint: TypePoint | null = null;
 
   constructor(mount: HTMLDivElement, opts: Options) {
@@ -63,7 +63,7 @@ class Core {
   }
 
   setData(data: TypeData) {
-    return this._data = data;
+    return this._data = this._element.initData(data);
   }
 
   private _initEvent() {
@@ -77,9 +77,10 @@ class Core {
   }
 
   private _handlePoint(point: TypePoint) {
-    this._selectedIndex = this._element.isPointInElement(point, this._data);
-    if (this._selectedIndex >= 0) {
+    const [index, uuid] = this._element.isPointInElement(point, this._data);
+    if (index >= 0) {
       this._mode = Mode.SELECT_ELEMENT;
+      this._selectedUUID = uuid
     }
   }
 
@@ -89,22 +90,24 @@ class Core {
 
   private _handleMove(point: TypePoint) {
     if (this._mode === Mode.SELECT_ELEMENT) {
-      this._dragElement(this._selectedIndex, point, this._prevPoint);
+      if (this._selectedUUID) {
+        this._dragElement(this._selectedUUID, point, this._prevPoint);
+      }
     }
     this._prevPoint = point;
     this.draw();
   }
 
   private _handleMoveEnd(point: TypePoint) {
-    this._selectedIndex = -1;
+    this._selectedUUID = null;
     this._prevPoint = null;
   }
 
-  private _dragElement(selectedIndex: number, point: TypePoint, prevPoint: TypePoint|null) {
+  private _dragElement(uuid: string, point: TypePoint, prevPoint: TypePoint|null) {
     if (!prevPoint) {
       return;
     }
-    this._element.dragElement(this._data, selectedIndex, point, prevPoint, this._board.getContext().getTransform().scale);
+    this._element.dragElement(this._data, uuid, point, prevPoint, this._board.getContext().getTransform().scale);
     this.draw();
     prevPoint = point;
   }

packages/core/src/lib/element.ts

@@ -1,4 +1,7 @@
 import { TypeContext, TypePoint, TypeData } from '@idraw/types';
+import util from './../util';
+
+const { createUUID } = util.uuid;
 
 export class Element {
   private _ctx: TypeContext;
@@ -7,9 +10,19 @@ export class Element {
     this._ctx = ctx;
   }
 
-  isPointInElement(p: TypePoint, data: TypeData) {
+  initData (data: TypeData) {
+    data.elements.forEach((elem) => {
+      if (!(elem.uuid && typeof elem.uuid === 'string')) {
+        elem.uuid = createUUID();
+      }
+    });
+    return data;
+  }
+
+  isPointInElement(p: TypePoint, data: TypeData): [number, string | null] {
     const ctx = this._ctx;
     let idx = -1;
+    let uuid = null
     for (let i = data.elements.length - 1; i >= 0; i--) {
       const ele = data.elements[i];
       ctx.beginPath();
@@ -20,13 +33,15 @@ export class Element {
       ctx.closePath();
       if (ctx.isPointInPath(p.x, p.y)) {
         idx = i;
+        uuid = ele.uuid;
         break;
       }
     }
-    return idx;
+    return [idx, uuid];
   }
 
-  dragElement(data: TypeData, index: number, point: TypePoint, prevPoint: TypePoint, scale: number) {
+  dragElement(data: TypeData, uuid: string, point: TypePoint, prevPoint: TypePoint, scale: number) {
+    const index = this.getElementIndex(data, uuid);
     if (data.elements[index]) {
       const moveX = point.x - prevPoint.x;
       const moveY = point.y - prevPoint.y;
@@ -35,10 +50,15 @@ export class Element {
     }
   }
 
-  createTransformWrapper(data: TypeData, index: number) {
-    if (!data.elements[index]) {
-      return;
+  getElementIndex(data: TypeData, uuid: string) {
+    let idx = -1;
+    for (let i = 0; i < data.elements.length; i++) {
+      if (data.elements[i].uuid === uuid) {
+        idx = i;
+        break;
+      }
     }
-    
+    return idx;
   }
+  
 }

packages/core/src/lib/helper.ts

@@ -0,0 +1,22 @@
+import {
+  TypeData,
+  TypeHelper,
+  TypeHelperConfig,
+  TypeHelperCreateOpts,
+  TypeElemDesc
+} from '@idraw/types';
+
+export class Helper implements TypeHelper {
+
+  constructor() {}
+
+  createConfig<T extends keyof TypeElemDesc>(
+    data: TypeData,
+    opts: TypeHelperCreateOpts ): TypeHelperConfig<T> {
+    const config = {
+      elementMap: {}
+    }
+    
+    return config
+  } 
+}

packages/core/src/util/index.ts

@@ -2,6 +2,7 @@ import { loadImage } from './loader';
 import { delay, compose, throttle } from './time';
 import { downloadImageFromCanvas } from './file';
 import { toColorHexStr, toColorHexNum, isColorStr } from './color';
+import { createUUID } from './uuid';
 
 export default {
   time: {
@@ -19,5 +20,8 @@ export default {
     toColorHexStr,
     toColorHexNum,
     isColorStr,
+  },
+  uuid: {
+    createUUID
   }
 }

packages/core/src/util/uuid.ts

@@ -0,0 +1,6 @@
+export function createUUID(): string {
+  function str4() {
+    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+  }
+  return `${str4()}${str4()}-${str4()}-${str4()}-${str4()}-${str4()}${str4()}${str4()}`;
+}

packages/types/src/index.ts

@@ -1,4 +1,5 @@
 export * from './lib/data';
 export * from './lib/board';
 export * from './lib/paint';
-export * from './lib/element';
+export * from './lib/element';
+export * from './lib/helper';

packages/types/src/lib/element.ts

@@ -1,7 +1,7 @@
 import { TypePaintData } from './paint';
 
 type TypeElement<T extends keyof TypeElemDesc> = {
-  uuid?: string;
+  uuid: string;
   x: number;
   y: number;
   w: number;

packages/types/src/lib/helper.ts

@@ -0,0 +1,25 @@
+import { TypeData } from './data';
+import { TypeElement, TypeElemDesc } from './element';
+
+// type test = {[uuid string]: TypeElement}
+
+type TypeHelperConfig<T extends keyof TypeElemDesc> = {
+  elementMap: {[key: string]: TypeElement<T>}
+}
+
+type TypeHelperCreateOpts = {
+  selectedIndex: number
+}
+
+interface TypeHelper {
+  createConfig<T extends keyof TypeElemDesc>(
+    data: TypeData,
+    opts: TypeHelperCreateOpts
+  ): TypeHelperConfig<T>;
+}
+
+export {
+  TypeHelper,
+  TypeHelperConfig,
+  TypeHelperCreateOpts,
+}