test: update e2e testing for @idraw/board

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

@@ -39,6 +39,6 @@ export function initEvent(board) {
   })
 
   board.on('doubleClick', (p) => {
-    console.log('doubleClick', p);
+    console.log('on("doubleClick")', p);
   })
 }

packages/board/examples/test/event.html

@@ -109,7 +109,7 @@
 
     <script type="module">
       import event from './../../../../scripts/browser/event.js';
-      (function() {
+      (async function() {
         const Board = window.iDrawBoard; 
         const mount1 = document.querySelector('#mount-1');
         const mount2 = document.querySelector('#mount-2');
@@ -122,6 +122,9 @@
           mount2.appendChild(div);
         }
 
+        const handleDoubleClick = (e) => {
+          renderText(`doubleClick: x=${e.x}, y=${e.y}`);
+        }
         const handleHover = (e) => {
           renderText(`hover: x=${e.x}, y=${e.y}`);
         }
@@ -151,11 +154,27 @@
         board.on('moveEnd', handleMoveEnd);
         board.on('wheelX', handleWheelX);
         board.on('wheelY', handleWheelY);
+        board.on('doubleClick', handleDoubleClick)
 
         drawBoard(board)
         board.draw();
 
-        function triggerEvent(clientX, clientY) {
+        function delay(time) {
+          return new Promise((resolve) => {
+            resolve()
+          }, time)
+        }
+
+        async function triggerEvent(clientX, clientY) {
+          event.click({
+            x: clientX,
+            y: clientY,
+          });
+          await delay(10);
+          event.click({
+            x: clientX,
+            y: clientY,
+          });
           event.mouseMove({
             x: clientX,
             y: clientY,
@@ -178,21 +197,21 @@
           });
         }
 
-        setTimeout(() => {
-          triggerEvent(120, 100);
-          setTimeout(() => {
-            board.off('hover', handleHover);
-            board.off('point', handlePoint);
-            board.off('move', handleMove);
-            board.off('moveStart', handleMoveStart);
-            board.off('moveEnd', handleMoveEnd);
-            board.off('wheelX', handleWheelX);
-            board.off('wheelY', handleWheelY);
-            triggerEvent(100, 80)
-          }, 100);
-        }, 100);
-      })()
-
+        await delay(20);
+        triggerEvent(120, 100);
+        await delay(20);
+        
+        board.off('doubleClick', handleDoubleClick);
+        board.off('hover', handleHover);
+        board.off('point', handlePoint);
+        board.off('move', handleMove);
+        board.off('moveStart', handleMoveStart);
+        board.off('moveEnd', handleMoveEnd);
+        board.off('wheelX', handleWheelX);
+        board.off('wheelY', handleWheelY);
+        await delay(1000);
+        triggerEvent(100, 80)
+      })();
     </script>
   </body>
 </html>

packages/board/src/lib/watcher.ts

@@ -101,12 +101,16 @@ export class Watcher {
 
   _listenClick(e: MouseEvent|TouchEvent) {
     e.preventDefault();
-    const maxLimitTime = 300;
+    const maxLimitTime = 500;
     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 (
+        preClickPoint && (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 });
         }

scripts/browser/event.js

@@ -1,3 +1,15 @@
+function click(opts){
+  const { x,y } = opts;
+  const event = new MouseEvent('click', {
+    screenX: x,
+    screenY: y,
+    clientX: x,
+    clientY: y,
+  });
+  const elem = document.elementFromPoint(x,y);
+  elem.dispatchEvent(event);
+}
+
 function mouseDown(opts){
   const { x,y } = opts;
   const event = new MouseEvent('mousedown', {
@@ -74,6 +86,7 @@ function wheelY(y, opts = { clientX: 0, clientY: 0 }){
 
 
 export default {
+  click,
   mouseDown,
   mouseUp,
   mouseMove,