diff --git a/packages/board/src/lib/event.ts b/packages/board/src/lib/event.ts index b61bb5c..db43b0f 100644 --- a/packages/board/src/lib/event.ts +++ b/packages/board/src/lib/event.ts @@ -1,15 +1,27 @@ import { TypePoint } from '@idraw/types'; +interface TypeBoardEventBaseData { + currentPoint: TypePoint, +} + +interface TypeBoardEventData extends TypeBoardEventBaseData { + startPoint: TypePoint | null, +} + +interface TypeBoardWheelEventData { + current: number, +} + export interface TypeBoardEventArgMap { - 'doubleClick': TypePoint; - 'hover': TypePoint; - 'leave': void; - 'point': TypePoint; - 'move': TypePoint; - 'moveStart': TypePoint; - 'moveEnd': TypePoint; - 'wheelX': number; - 'wheelY': number; + 'doubleClick': TypeBoardEventBaseData; + 'hover': TypeBoardEventBaseData; + 'leave': TypeBoardEventBaseData; + 'point': TypeBoardEventBaseData; + 'move': TypeBoardEventData; + 'moveStart': TypeBoardEventData; + 'moveEnd': TypeBoardEventData; + 'wheelX': TypeBoardWheelEventData; + 'wheelY': TypeBoardWheelEventData; } export interface TypeBoardEvent { diff --git a/packages/board/src/lib/watcher-temp.ts b/packages/board/src/lib/watcher-temp.ts index de442ad..247cc3c 100644 --- a/packages/board/src/lib/watcher-temp.ts +++ b/packages/board/src/lib/watcher-temp.ts @@ -1,7 +1,9 @@ -import { TypePoint } from '@idraw/types' +import { TypePoint } from '@idraw/types'; +import { deepClone } from '@idraw/util'; type TempDataDesc = { - prevClickPoint: TypePoint & { t: number } | null, + moveStartPoint: TypePoint & { t?: number } | null, + prevClickPoint: TypePoint & { t?: number } | null, isHoverCanvas: boolean; isDragCanvas: boolean; statusMap: { @@ -14,6 +16,7 @@ type TempDataDesc = { function createTempData() { return { + moveStartPoint: null, prevClickPoint: null, isHoverCanvas: false, isDragCanvas: false, @@ -38,7 +41,10 @@ export class TempData { this._temp[name] = value; } - get(name: T): TempDataDesc[T] { + get(name: T, opts?: { clone: boolean }): TempDataDesc[T] { + if (opts?.clone === true) { + return deepClone(this._temp[name]); + } return this._temp[name]; } diff --git a/packages/board/src/lib/watcher.ts b/packages/board/src/lib/watcher.ts index 03e8753..e4693d6 100644 --- a/packages/board/src/lib/watcher.ts +++ b/packages/board/src/lib/watcher.ts @@ -48,7 +48,7 @@ export class Watcher { const p = this._getPosition(e); if (this._isVaildPoint(p)) { if (this._event.has('hover')) { - this._event.trigger('hover', p); + this._event.trigger('hover', { currentPoint: p }); } } this._isMoving = true; @@ -57,7 +57,8 @@ export class Watcher { _listenLeave(e: MouseEvent|TouchEvent): void { e.preventDefault(); if (this._event.has('leave')) { - this._event.trigger('leave', undefined); + const p = this._getPosition(e); + this._event.trigger('leave', { currentPoint: p }); } } @@ -65,11 +66,15 @@ export class Watcher { e.preventDefault(); const p = this._getPosition(e); if (this._isVaildPoint(p)) { + this._temp.set('moveStartPoint', p); if (this._event.has('point')) { - this._event.trigger('point', p); + this._event.trigger('point', { currentPoint: p }); } if (this._event.has('moveStart')) { - this._event.trigger('moveStart', p); + this._event.trigger('moveStart', { + startPoint: this._temp.get('moveStartPoint', { clone: true }), + currentPoint: p, + }); } } this._isMoving = true; @@ -81,7 +86,10 @@ export class Watcher { if (this._event.has('move') && this._isMoving === true) { const p = this._getPosition(e); if (this._isVaildPoint(p)) { - this._event.trigger('move', p); + this._event.trigger('move', { + startPoint: this._temp.get('moveStartPoint', { clone: true }), + currentPoint: p, + }); } } } @@ -91,19 +99,23 @@ export class Watcher { if (this._event.has('moveEnd')) { const p = this._getPosition(e); if (this._isVaildPoint(p)) { - this._event.trigger('moveEnd', p); + this._event.trigger('moveEnd', { + startPoint: this._temp.get('moveStartPoint', { clone: true }), + currentPoint: p, + }); } } this._isMoving = false; + this._temp.set('moveStartPoint', null); } _listenWheel(e: WheelEvent) { e.preventDefault(); if (this._event.has('wheelX') && (e.deltaX > 0 || e.deltaX < 0)) { - this._event.trigger('wheelX', e.deltaX); + this._event.trigger('wheelX', { current: e.deltaX }); } if (this._event.has('wheelY') && (e.deltaY > 0 || e.deltaY < 0)) { - this._event.trigger('wheelY', e.deltaY); + this._event.trigger('wheelY', { current: e.deltaY }); } } @@ -115,12 +127,12 @@ export class Watcher { if (this._isVaildPoint(p)) { const preClickPoint = this._temp.get('prevClickPoint'); if ( - preClickPoint && (t - preClickPoint.t <= maxLimitTime) + preClickPoint && preClickPoint.t && (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 }); + this._event.trigger('doubleClick', { currentPoint: { x: p.x, y: p.y } }); } } else { this._temp.set('prevClickPoint', {x: p.x, y: p.y, t, }) diff --git a/packages/core/dev/data.js b/packages/core/dev/data.js index 0e8c7bd..f1d2964 100644 --- a/packages/core/dev/data.js +++ b/packages/core/dev/data.js @@ -58,6 +58,24 @@ const data = { ], }; + +const data2 = { + bgColor: "#00000015", + elements: [ + { + name: "rect-001", + x: 100, + y: 80, + w: 160, + h: 80, + angle: 30, + type: "image", + desc: { + src: './images/computer.png', + }, + }, + ], +}; export function getData() { - return data; + return data2; } diff --git a/packages/core/dev/main.js b/packages/core/dev/main.js index 63f991c..c2285fc 100644 --- a/packages/core/dev/main.js +++ b/packages/core/dev/main.js @@ -1,13 +1,11 @@ import { Core } from './../src/index'; import { getData } from './data.js'; -console.log('Core =', Core) - var opts = { - width: 300, - height: 200, - contextWidth: 300, - contextHeight: 200, + width: 600, + height: 300, + contextWidth: 400, + contextHeight: 240, devicePixelRatio: 4, } // var config = { @@ -21,8 +19,8 @@ const data = getData(); const core = new Core( mount, Object.assign({}, opts, { - contextWidth: 500, - contextHeight: 400, + // contextWidth: 800, + // contextHeight: 600, }), { scrollWrapper: { @@ -31,3 +29,5 @@ const core = new Core( } ); core.setData(data); +const currentData = core.getData(); +core.selectElement(currentData.elements[0].uuid) diff --git a/packages/core/src/mixins/element.ts b/packages/core/src/mixins/element.ts index 33e995d..6442568 100644 --- a/packages/core/src/mixins/element.ts +++ b/packages/core/src/mixins/element.ts @@ -10,7 +10,6 @@ import { diffElementResourceChange } from './../lib/diff'; import { Core } from './../index'; import { Mode } from './../constant/static'; - export function getSelectedElements(core: Core): TypeElement[] { const elems: TypeElement[] = [];