refactor: refactor watcher event type

packages/board/src/lib/event.ts

@@ -1,15 +1,27 @@
 import { TypePoint } from '@idraw/types';
 
+interface TypeBoardEventBaseData {
+  currentPoint: TypePoint,
+}
+
+interface TypeBoardEventData extends TypeBoardEventBaseData {
+  startPoint: TypePoint | null,
+}
+
+interface TypeBoardWheelEventData {
+  current: number,
+}
+
 export interface TypeBoardEventArgMap {
-  'doubleClick': TypePoint;
-  'hover': TypePoint;
-  'leave': void;
-  'point': TypePoint;
-  'move': TypePoint;
-  'moveStart': TypePoint;
-  'moveEnd': TypePoint;
-  'wheelX': number;
-  'wheelY': number;
+  'doubleClick': TypeBoardEventBaseData;
+  'hover': TypeBoardEventBaseData;
+  'leave': TypeBoardEventBaseData;
+  'point': TypeBoardEventBaseData;
+  'move': TypeBoardEventData;
+  'moveStart': TypeBoardEventData;
+  'moveEnd': TypeBoardEventData;
+  'wheelX': TypeBoardWheelEventData;
+  'wheelY': TypeBoardWheelEventData;
 }
 
 export interface TypeBoardEvent {

packages/board/src/lib/watcher-temp.ts

@@ -1,7 +1,9 @@
-import { TypePoint } from '@idraw/types'
+import { TypePoint } from '@idraw/types';
+import { deepClone } from '@idraw/util';
 
 type TempDataDesc = {
-  prevClickPoint: TypePoint & { t: number } | null,
+  moveStartPoint: TypePoint & { t?: number } | null,
+  prevClickPoint: TypePoint & { t?: number } | null,
   isHoverCanvas: boolean;
   isDragCanvas: boolean;
   statusMap: {
@@ -14,6 +16,7 @@ type TempDataDesc = {
 
 function createTempData() {
   return {
+    moveStartPoint: null,
     prevClickPoint: null,
     isHoverCanvas: false,
     isDragCanvas: false,
@@ -38,7 +41,10 @@ export class TempData {
     this._temp[name] = value;
   }
 
-  get<T extends keyof TempDataDesc >(name: T): TempDataDesc[T] {
+  get<T extends keyof TempDataDesc >(name: T, opts?: { clone: boolean }): TempDataDesc[T] {
+    if (opts?.clone === true) {
+      return deepClone(this._temp[name]);
+    }
     return this._temp[name];
   }
 

packages/board/src/lib/watcher.ts

@@ -48,7 +48,7 @@ export class Watcher {
     const p = this._getPosition(e);
     if (this._isVaildPoint(p)) {
       if (this._event.has('hover')) {
-        this._event.trigger('hover', p);
+        this._event.trigger('hover', { currentPoint: p });
       }
     }
     this._isMoving = true;
@@ -57,7 +57,8 @@ export class Watcher {
   _listenLeave(e: MouseEvent|TouchEvent): void {
     e.preventDefault();
     if (this._event.has('leave')) {
-      this._event.trigger('leave', undefined);
+      const p = this._getPosition(e);
+      this._event.trigger('leave', { currentPoint: p });
     }
   }
 
@@ -65,11 +66,15 @@ export class Watcher {
     e.preventDefault();
     const p = this._getPosition(e);
     if (this._isVaildPoint(p)) {
+      this._temp.set('moveStartPoint', p);
       if (this._event.has('point')) {
-        this._event.trigger('point', p);
+        this._event.trigger('point', { currentPoint: p });
       }
       if (this._event.has('moveStart')) {
-        this._event.trigger('moveStart', p);
+        this._event.trigger('moveStart', {
+          startPoint: this._temp.get('moveStartPoint', { clone: true }),
+          currentPoint: p,
+        });
       }
     }
     this._isMoving = true;
@@ -81,7 +86,10 @@ export class Watcher {
     if (this._event.has('move') && this._isMoving === true) {
       const p = this._getPosition(e);
       if (this._isVaildPoint(p)) {
-        this._event.trigger('move', p);
+        this._event.trigger('move', {
+          startPoint: this._temp.get('moveStartPoint', { clone: true }),
+          currentPoint: p,
+        });
       }
     }
   }
@@ -91,19 +99,23 @@ export class Watcher {
     if (this._event.has('moveEnd')) {
       const p = this._getPosition(e);
       if (this._isVaildPoint(p)) {
-        this._event.trigger('moveEnd', p);
+        this._event.trigger('moveEnd', {
+          startPoint: this._temp.get('moveStartPoint', { clone: true }),
+          currentPoint: p,
+        });
       }
     }
     this._isMoving = false;
+    this._temp.set('moveStartPoint', null);
   }
 
   _listenWheel(e: WheelEvent) {
     e.preventDefault();
     if (this._event.has('wheelX') && (e.deltaX > 0 || e.deltaX < 0)) {
-      this._event.trigger('wheelX', e.deltaX);
+      this._event.trigger('wheelX', { current: e.deltaX });
     }
     if (this._event.has('wheelY') && (e.deltaY > 0 || e.deltaY < 0)) {
-      this._event.trigger('wheelY', e.deltaY);
+      this._event.trigger('wheelY', { current: e.deltaY });
     }
   }
 
@@ -115,12 +127,12 @@ export class Watcher {
     if (this._isVaildPoint(p)) {
       const preClickPoint = this._temp.get('prevClickPoint');
       if (
-        preClickPoint && (t - preClickPoint.t <= maxLimitTime)
+        preClickPoint &&  preClickPoint.t && (t - preClickPoint.t <= maxLimitTime)
         && Math.abs(preClickPoint.x - p.x) <= 5
         && Math.abs(preClickPoint.y - p.y) <= 5
       ) {
         if (this._event.has('doubleClick')) {
-          this._event.trigger('doubleClick', { x: p.x, y: p.y });
+          this._event.trigger('doubleClick', { currentPoint: { x: p.x, y: p.y } });
         }
       } else {
         this._temp.set('prevClickPoint', {x: p.x, y: p.y, t, })

packages/core/dev/data.js

@@ -58,6 +58,24 @@ const data = {
   ],
 };
 
+
+const data2 = {
+  bgColor: "#00000015",
+  elements: [
+    {
+      name: "rect-001",
+      x: 100,
+      y: 80,
+      w: 160,
+      h: 80,
+      angle: 30,
+      type: "image",
+      desc: {
+        src: './images/computer.png',
+      },
+    },
+  ],
+};
 export function getData() {
-  return data;
+  return data2;
 }

packages/core/dev/main.js

@@ -1,13 +1,11 @@
 import { Core } from './../src/index';
 import { getData } from './data.js';
 
-console.log('Core =', Core)
-
 var opts = {
-  width: 300,
-  height: 200,
-  contextWidth: 300,
-  contextHeight: 200,
+  width: 600,
+  height: 300,
+  contextWidth: 400,
+  contextHeight: 240,
   devicePixelRatio: 4,
 }
 // var config = {
@@ -21,8 +19,8 @@ const data = getData();
 const core = new Core(
   mount,
   Object.assign({}, opts, {
-    contextWidth: 500,
-    contextHeight: 400,
+    // contextWidth: 800,
+    // contextHeight: 600,
   }),
   {
     scrollWrapper: {
@@ -31,3 +29,5 @@ const core = new Core(
   }
 );
 core.setData(data);
+const currentData = core.getData();
+core.selectElement(currentData.elements[0].uuid)

packages/core/src/mixins/element.ts

@@ -10,7 +10,6 @@ import { diffElementResourceChange } from './../lib/diff';
 import { Core } from './../index';
 import { Mode } from './../constant/static';
 
- 
 
 export function getSelectedElements(core: Core): TypeElement<keyof TypeElemDesc>[] {
   const elems: TypeElement<keyof TypeElemDesc>[] = [];