feat: add leave event for @idraw/board

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('leave', (p) => {
+    console.log('leave ===', p);
+  });
 }

packages/board/examples/test/event.html

@@ -143,6 +143,10 @@
         const handleWheelY = (moveY) => {
           renderText(`wheelY: moveY=${moveY}`);
         }
+        const handleLeave = (e) => {
+          console.log('leave ==', e);
+          renderText(`leave: x=${e.x}, y=${e.y}`);
+        }
 
         board.on('hover', handleHover);
         board.on('point', handlePoint);
@@ -151,6 +155,7 @@
         board.on('moveEnd', handleMoveEnd);
         board.on('wheelX', handleWheelX);
         board.on('wheelY', handleWheelY);
+        board.on('leave', handleLeave);
 
         drawBoard(board)
         board.draw();
@@ -176,6 +181,12 @@
             clientX: clientX,
             clientY: clientY,
           });
+
+          // leave
+          event.mouseLeave({
+            x: 301,
+            y: 221,
+          });
         }
 
         setTimeout(() => {
@@ -188,9 +199,11 @@
             board.off('moveEnd', handleMoveEnd);
             board.off('wheelX', handleWheelX);
             board.off('wheelY', handleWheelY);
+            board.off('leave', handleLeave);
             triggerEvent(100, 80)
           }, 100);
         }, 100);
+
       })()
 
     </script>

packages/board/src/lib/event.ts

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

packages/board/src/lib/watcher.ts

@@ -33,6 +33,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('mouseleave', this._listenMoveLeave.bind(this), true);
     canvas.addEventListener('wheel', this._listenWheel.bind(this), true);
 
     canvas.addEventListener('touchstart', this._listenMoveStart.bind(this), true);
@@ -87,6 +88,15 @@ export class Watcher {
     this._isMoving = false;
   }
 
+  _listenMoveLeave(e: MouseEvent|TouchEvent): void {
+    e.preventDefault();
+    if (this._event.has('leave')) {
+      const p = this._getPosition(e);
+      this._event.trigger('leave', p);
+    }
+    this._isMoving = false;
+  }
+
   _listenWheel(e: WheelEvent) {
     e.preventDefault();
     if (this._event.has('wheelX') && (e.deltaX > 0 || e.deltaX < 0)) {

scripts/browser/event.js

@@ -23,6 +23,18 @@ function mouseMove(opts){
   elem.dispatchEvent(event);
 }
 
+function mouseLeave(opts){
+  const { x,y } = opts;
+  const event = new MouseEvent('mouseleave', {
+    screenX: x,
+    screenY: y,
+    clientX: x,
+    clientY: y,
+  });
+  const elem = document.elementFromPoint(x,y);
+  elem.dispatchEvent(event);
+}
+
 
 // function mouseOver(opts){
 //   const { x,y } = opts;
@@ -77,7 +89,7 @@ export default {
   mouseDown,
   mouseUp,
   mouseMove,
-  // mouseOver,
+  mouseLeave,
   wheelX,
   wheelY,
 }