From 970e5cd619dca8d8ce687c6e8c67c22400edbfd0 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Sun, 22 Aug 2021 15:21:37 +0800 Subject: [PATCH] feat: @idraw/board add doubleClick event --- packages/board/examples/features/lib/event.js | 4 +++ packages/board/src/index.ts | 19 +++--------- packages/board/src/lib/event.ts | 1 + packages/board/src/lib/temp.ts | 27 ++++++++++++++++ packages/board/src/lib/watcher-temp.ts | 31 +++++++++++++++++++ packages/board/src/lib/watcher.ts | 21 ++++++++++++- packages/board/src/names.ts | 4 ++- 7 files changed, 90 insertions(+), 17 deletions(-) create mode 100644 packages/board/src/lib/temp.ts create mode 100644 packages/board/src/lib/watcher-temp.ts diff --git a/packages/board/examples/features/lib/event.js b/packages/board/examples/features/lib/event.js index 9c83cf1..506cf60 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('doubleClick', (p) => { + console.log('doubleClick', p); + }) } \ No newline at end of file diff --git a/packages/board/src/index.ts b/packages/board/src/index.ts index 08f5874..6d21a0a 100644 --- a/packages/board/src/index.ts +++ b/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; diff --git a/packages/board/src/lib/event.ts b/packages/board/src/lib/event.ts index 38646e3..de2f3dd 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 { + 'doubleClick': TypePoint; 'hover': TypePoint; 'point': TypePoint; 'move': TypePoint; diff --git a/packages/board/src/lib/temp.ts b/packages/board/src/lib/temp.ts new file mode 100644 index 0000000..13a2a95 --- /dev/null +++ b/packages/board/src/lib/temp.ts @@ -0,0 +1,27 @@ +type TempDataDesc = {} + + +export class TempData { + + private _temp: TempDataDesc + + constructor() { + this._temp = { + prevClickPoint: null + } + } + + set(name: T, value: TempDataDesc[T]) { + this._temp[name] = value; + } + + get(name: T): TempDataDesc[T] { + return this._temp[name]; + } + + clear() { + this._temp = { + prevClickPoint: null, + } + } +} \ No newline at end of file diff --git a/packages/board/src/lib/watcher-temp.ts b/packages/board/src/lib/watcher-temp.ts new file mode 100644 index 0000000..53d4201 --- /dev/null +++ b/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(name: T, value: TempDataDesc[T]) { + this._temp[name] = value; + } + + get(name: T): TempDataDesc[T] { + return this._temp[name]; + } + + clear() { + this._temp = { + prevClickPoint: null, + } + } +} \ No newline at end of file diff --git a/packages/board/src/lib/watcher.ts b/packages/board/src/lib/watcher.ts index 74e3042..211e9f7 100644 --- a/packages/board/src/lib/watcher.ts +++ b/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; diff --git a/packages/board/src/names.ts b/packages/board/src/names.ts index 4bc9562..5892854 100644 --- a/packages/board/src/names.ts +++ b/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, }; \ No newline at end of file