diff --git a/packages/board/examples/features/lib/event.js b/packages/board/examples/features/lib/event.js index 9c83cf1..335d079 100644 --- a/packages/board/examples/features/lib/event.js +++ b/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); + }); } \ No newline at end of file diff --git a/packages/board/examples/test/event.html b/packages/board/examples/test/event.html index 9153202..2b9e5d7 100644 --- a/packages/board/examples/test/event.html +++ b/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); + })() diff --git a/packages/board/src/lib/event.ts b/packages/board/src/lib/event.ts index 38646e3..066e370 100644 --- a/packages/board/src/lib/event.ts +++ b/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; diff --git a/packages/board/src/lib/watcher.ts b/packages/board/src/lib/watcher.ts index 74e3042..e44610c 100644 --- a/packages/board/src/lib/watcher.ts +++ b/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)) { diff --git a/scripts/browser/event.js b/scripts/browser/event.js index 6b72e9f..b247dcc 100644 --- a/scripts/browser/event.js +++ b/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, } \ No newline at end of file