feat: @idraw/board add doubleClick event

packages/board/examples/features/lib/event.js

@@ -37,4 +37,8 @@ export function initEvent(board) {
   board.on('hover', (p) => {
     // console.log('hover', p);
   })
+
+  board.on('doubleClick', (p) => {
+    console.log('doubleClick', p);
+  })
 }

packages/board/src/index.ts

@@ -8,6 +8,7 @@ import Context from './lib/context';
 import { TypeBoardEventArgMap } from './lib/event';
 import { Scroller } from './lib/scroller';
 import { Screen } from './lib/screen';
+// import { TempData } from './lib/watcher-temp';
 import {
   _canvas, _displayCanvas, _mount, _opts, _hasRendered, _ctx, _displayCtx,
   _originCtx, _watcher, _render, _parsePrivateOptions, _scroller,
@@ -67,21 +68,6 @@ class Board {
     return this[_ctx];
   }
 
-  // createContext(canvas: HTMLCanvasElement) {
-  //   const opts = this[_opts];
-  //   canvas.width = opts.contextWidth * opts.devicePixelRatio;
-  //   canvas.height = opts.contextHeight * opts.devicePixelRatio;
-  //   return new Context(canvas.getContext('2d') as CanvasRenderingContext2D, this[_opts]);
-  // }
-
-  // createCanvas() {
-  //   const opts = this[_opts];
-  //   const canvas = document.createElement('canvas');
-  //   canvas.width = opts.contextWidth * opts.devicePixelRatio;
-  //   canvas.height = opts.contextHeight * opts.devicePixelRatio;
-  //   return canvas;
-  // }
-
   scale(scaleRatio: number): TypeScreenContext {
     if (scaleRatio > 0) {
       this[_ctx].setTransform({ scale: scaleRatio });
@@ -252,6 +238,8 @@ class Board {
         }
         scrollType = null;
       }, 16));
+
+      // this.on('doubleClick', (p: TypePoint) => {})
     }
   }
 
@@ -294,6 +282,7 @@ class Board {
     }
   }
 
+
 }
 
 export default Board;

packages/board/src/lib/event.ts

@@ -1,6 +1,7 @@
 import { TypePoint } from '@idraw/types';
 
 export interface TypeBoardEventArgMap {
+  'doubleClick': TypePoint;
   'hover': TypePoint;
   'point': TypePoint;
   'move': TypePoint;

packages/board/src/lib/temp.ts

@@ -0,0 +1,27 @@
+type TempDataDesc = {}
+
+
+export class TempData {
+
+  private _temp: TempDataDesc
+
+  constructor() {
+    this._temp = {
+      prevClickPoint: null
+    }
+  }
+
+  set<T extends keyof TempDataDesc >(name: T, value:  TempDataDesc[T]) {
+    this._temp[name] = value;
+  }
+
+  get<T extends keyof TempDataDesc >(name: T): TempDataDesc[T] {
+    return this._temp[name];
+  }
+
+  clear() {
+    this._temp = {
+      prevClickPoint: null,
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+import { TypePoint } from '@idraw/types'
+
+type TempDataDesc = {
+  prevClickPoint: TypePoint & { t: number } | null,
+}
+
+
+export class TempData {
+
+  private _temp: TempDataDesc
+
+  constructor() {
+    this._temp = {
+      prevClickPoint: null
+    }
+  }
+
+  set<T extends keyof TempDataDesc >(name: T, value:  TempDataDesc[T]) {
+    this._temp[name] = value;
+  }
+
+  get<T extends keyof TempDataDesc >(name: T): TempDataDesc[T] {
+    return this._temp[name];
+  }
+
+  clear() {
+    this._temp = {
+      prevClickPoint: null,
+    }
+  }
+}

packages/board/src/lib/watcher.ts

@@ -1,6 +1,6 @@
 import { TypePoint } from '@idraw/types';
 import { BoardEvent, TypeBoardEventArgMap } from './event';
-
+import { TempData } from './watcher-temp';
 
 export class Watcher {
 
@@ -10,6 +10,7 @@ export class Watcher {
   // private _onMoveStart?: TypeWatchCallback;
   // private _onMoveEnd?: TypeWatchCallback;
   private _event: BoardEvent;
+  private _temp: TempData = new TempData;
 
   constructor(canvas: HTMLCanvasElement) {
     this._canvas = canvas;
@@ -33,6 +34,7 @@ export class Watcher {
     canvas.addEventListener('mousemove', this._listenMove.bind(this), true);
     canvas.addEventListener('mouseup', this._listenMoveEnd.bind(this), true);
     canvas.addEventListener('mouseleave', this._listenMoveEnd.bind(this), true);
+    canvas.addEventListener('click', this._listenClick.bind(this), true);
     canvas.addEventListener('wheel', this._listenWheel.bind(this), true);
 
     canvas.addEventListener('touchstart', this._listenMoveStart.bind(this), true);
@@ -97,6 +99,23 @@ export class Watcher {
     }
   }
 
+  _listenClick(e: MouseEvent|TouchEvent) {
+    e.preventDefault();
+    const maxLimitTime = 300;
+    const p = this._getPosition(e);
+    const t = Date.now();
+    if (this._isVaildPoint(p)) {
+      const preClickPoint = this._temp.get('prevClickPoint');
+      if (preClickPoint && t - preClickPoint.t <= maxLimitTime) {
+        if (this._event.has('doubleClick')) {
+          this._event.trigger('doubleClick', { x: p.x, y: p.y });
+        }
+      } else {
+        this._temp.set('prevClickPoint', {x: p.x, y: p.y, t, })
+      }
+    }
+  }
+
   _getPosition(e: MouseEvent|TouchEvent): TypePoint {
     const canvas = this._canvas;
     let x = 0;

packages/board/src/names.ts

@@ -14,12 +14,14 @@ const _initEvent = Symbol('_initEvent');
 const _doScrollX = Symbol('_doScrollX');
 const _doScrollY = Symbol('_doScrollY');
 const _doMoveScroll = Symbol('_doMoveScroll');
+// const _doDoubleClick = Symbol('_doDoubleClick');
 const _resetContext = Symbol('_resetContext');
 const _screen = Symbol('_screen');
+const _tempData = Symbol('_tempData');
 
 export {
   _canvas, _displayCanvas, _mount, _opts, _hasRendered, _ctx, _displayCtx,
   _originCtx, _watcher, _render, _parsePrivateOptions, _scroller,
   _initEvent, _doScrollX, _doScrollY, _doMoveScroll, _resetContext,
-  _screen,
+  _screen, _tempData,
 };