From ed95dc2f734a52aba1e06776f779fc6bace72afc Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Mon, 9 Aug 2021 22:41:02 +0800 Subject: [PATCH 1/4] feat: add event screenClickELement --- packages/core/examples/features/lib/main.js | 3 +++ packages/core/src/index.ts | 29 ++++++++++++++++++--- packages/core/src/lib/core-event.ts | 3 ++- packages/core/src/names.ts | 3 ++- 4 files changed, 33 insertions(+), 5 deletions(-) diff --git a/packages/core/examples/features/lib/main.js b/packages/core/examples/features/lib/main.js index 2b45cff..1a81dd2 100644 --- a/packages/core/examples/features/lib/main.js +++ b/packages/core/examples/features/lib/main.js @@ -47,6 +47,9 @@ core.on('changeScreen', (data) => { core.on('screenSelectElement', (data) => { console.log('screenSelectElement: ', data); }); +core.on('screenClickElement', (data) => { + console.log('screenClickElement: ', data); +}) core.on('mouseOverElement', (data) => { console.log('mouseOverElement: ', data); }); diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 63ef502..6b82830 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -18,7 +18,7 @@ import { TempData } from './lib/temp'; import { _board, _data, _opts, _config, _renderer, _element, _helper, _hasInited, _mode, _tempData, _prevPoint, _draw, - _selectedDotDirection, _coreEvent, _mapper, _initEvent, _handlePoint, + _selectedDotDirection, _coreEvent, _mapper, _initEvent, _handlePoint, _handleClick, _handleMoveStart, _handleMove, _handleMoveEnd, _handleHover, _dragElements, _transfromElement, _emitChangeScreen, _emitChangeData, _onlyRender, _cursorStatus, } from './names'; @@ -257,6 +257,8 @@ class Core { } this[_board].on('hover', time.throttle(this[_handleHover].bind(this), 32)); + + this[_board].on('point', time.throttle(this[_handleClick].bind(this), 16)); if (this[_onlyRender] === true) { return; } @@ -266,6 +268,17 @@ class Core { this[_board].on('moveEnd', this[_handleMoveEnd].bind(this)); } + private [_handleClick](point: TypePoint): void { + const [index, uuid] = this[_element].isPointInElement(point, this[_data]); + if (index >= 0 && uuid) { + this[_coreEvent].trigger( + 'screenClickElement', + { index, uuid, element: deepClone(this[_data].elements?.[index])} + ); + } + this[_draw](); + } + private [_handlePoint](point: TypePoint): void { if (!this[_mapper].isEffectivePoint(point)) { return; @@ -399,8 +412,18 @@ class Core { const index: number | null = this[_helper].getElementIndexByUUID(elementUUID); if (index !== null && index >= 0) { const elem = this[_data].elements[index]; + if (this[_tempData].get('hoverUUID') !== elem.uuid) { + const preIndex = this[_helper].getElementIndexByUUID(this[_tempData].get('hoverUUID') || ''); + if (preIndex !== null && this[_data].elements[preIndex]) { + this[_coreEvent].trigger('mouseLeaveElement', { + uuid: this[_tempData].get('hoverUUID'), + index: preIndex, + element: this[_data].elements[preIndex] + }); + } + } if (elem) { - this[_coreEvent].trigger('mouseOverElement', { index, uuid: elem.uuid, element: elem, }); + this[_coreEvent].trigger('mouseOverElement', { uuid: elem.uuid, index, element: elem, }); this[_tempData].set('hoverUUID', elem.uuid); isMouseOverElement = true; } @@ -410,7 +433,7 @@ class Core { if (isMouseOverElement !== true && this[_tempData].get('hoverUUID') !== null) { const uuid = this[_tempData].get('hoverUUID'); const index: number | null = this[_helper].getElementIndexByUUID(uuid || ''); - this[_coreEvent].trigger('mouseLeaveElement', { uuid, index }) + if (index !== null) this[_coreEvent].trigger('mouseLeaveElement', { uuid, index, element: this[_data].elements[index] }) this[_tempData].set('hoverUUID', null); } } diff --git a/packages/core/src/lib/core-event.ts b/packages/core/src/lib/core-event.ts index d220406..e365a23 100644 --- a/packages/core/src/lib/core-event.ts +++ b/packages/core/src/lib/core-event.ts @@ -14,7 +14,8 @@ export type TypeCoreEventSelectBaseArg = { export type TypeCoreEventArgMap = { 'error': any; 'mouseOverElement': TypeCoreEventSelectBaseArg & { element: TypeElement } - 'mouseLeaveElement': TypeCoreEventSelectBaseArg; + 'mouseLeaveElement': TypeCoreEventSelectBaseArg & { element: TypeElement } + 'screenClickElement': TypeCoreEventSelectBaseArg & { element: TypeElement } 'screenSelectElement': TypeCoreEventSelectBaseArg & { element: TypeElement } 'screenMoveElementStart': TypeCoreEventSelectBaseArg & TypePoint, 'screenMoveElementEnd': TypeCoreEventSelectBaseArg & TypePoint, diff --git a/packages/core/src/names.ts b/packages/core/src/names.ts index c103371..ca75501 100644 --- a/packages/core/src/names.ts +++ b/packages/core/src/names.ts @@ -14,6 +14,7 @@ const _selectedDotDirection = Symbol('_selectedDotDirection'); const _coreEvent = Symbol('_coreEvent'); const _mapper = Symbol('_mapper'); const _initEvent = Symbol('_initEvent'); +const _handleClick = Symbol('_handleClick'); const _handlePoint = Symbol('_handlePoint'); const _handleMoveStart = Symbol('_handleMoveStart'); const _handleMove = Symbol('_handleMove'); @@ -29,7 +30,7 @@ const _cursorStatus = Symbol('_cursorStatus'); export { _board, _data, _opts, _config, _renderer, _element, _helper, _hasInited, _mode, _tempData, _prevPoint, _draw, - _selectedDotDirection, _coreEvent, _mapper, _initEvent, _handlePoint, + _selectedDotDirection, _coreEvent, _mapper, _initEvent, _handlePoint, _handleClick, _handleMoveStart, _handleMove, _handleMoveEnd, _handleHover, _dragElements, _transfromElement, _emitChangeScreen, _emitChangeData, _onlyRender, _cursorStatus, }; \ No newline at end of file From 8d6fee41b94cfb072cd9aa90b10b6d8f97f19917 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Mon, 9 Aug 2021 22:45:30 +0800 Subject: [PATCH 2/4] v0.1.3 --- lerna.json | 2 +- packages/board/package.json | 6 +++--- packages/core/package.json | 8 ++++---- packages/idraw/package.json | 6 +++--- packages/types/package.json | 2 +- packages/util/package.json | 2 +- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/lerna.json b/lerna.json index 97587f8..c46a11d 100644 --- a/lerna.json +++ b/lerna.json @@ -6,5 +6,5 @@ "packages/core", "packages/idraw" ], - "version": "0.1.2" + "version": "0.1.3" } diff --git a/packages/board/package.json b/packages/board/package.json index 18f673b..20593c2 100644 --- a/packages/board/package.json +++ b/packages/board/package.json @@ -1,6 +1,6 @@ { "name": "@idraw/board", - "version": "0.1.2", + "version": "0.1.3", "description": "", "main": "dist/index.cjs.js", "module": "dist/index.es.js", @@ -23,10 +23,10 @@ "author": "chenshenhai", "license": "MIT", "devDependencies": { - "@idraw/types": "^0.1.2" + "@idraw/types": "^0.1.3" }, "dependencies": { - "@idraw/util": "^0.1.2" + "@idraw/util": "^0.1.3" }, "publishConfig": { "access": "public" diff --git a/packages/core/package.json b/packages/core/package.json index 56f3f17..b17388a 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@idraw/core", - "version": "0.1.2", + "version": "0.1.3", "description": "", "main": "dist/index.cjs.js", "module": "dist/index.es.js", @@ -23,11 +23,11 @@ "author": "chenshenhai", "license": "MIT", "devDependencies": { - "@idraw/types": "^0.1.2" + "@idraw/types": "^0.1.3" }, "dependencies": { - "@idraw/board": "^0.1.2", - "@idraw/util": "^0.1.2" + "@idraw/board": "^0.1.3", + "@idraw/util": "^0.1.3" }, "publishConfig": { "access": "public" diff --git a/packages/idraw/package.json b/packages/idraw/package.json index d8be21d..d065a96 100644 --- a/packages/idraw/package.json +++ b/packages/idraw/package.json @@ -1,6 +1,6 @@ { "name": "idraw", - "version": "0.1.2", + "version": "0.1.3", "description": "", "main": "dist/index.cjs.js", "module": "dist/index.es.js", @@ -23,10 +23,10 @@ "author": "chenshenhai", "license": "MIT", "devDependencies": { - "@idraw/types": "^0.1.2" + "@idraw/types": "^0.1.3" }, "dependencies": { - "@idraw/core": "^0.1.2" + "@idraw/core": "^0.1.3" }, "publishConfig": { "access": "public" diff --git a/packages/types/package.json b/packages/types/package.json index 79f33ba..7cee6ac 100644 --- a/packages/types/package.json +++ b/packages/types/package.json @@ -1,6 +1,6 @@ { "name": "@idraw/types", - "version": "0.1.2", + "version": "0.1.3", "description": "", "main": "src/index.ts", "types": "src/index.ts", diff --git a/packages/util/package.json b/packages/util/package.json index 3adedcf..c475053 100644 --- a/packages/util/package.json +++ b/packages/util/package.json @@ -1,6 +1,6 @@ { "name": "@idraw/util", - "version": "0.1.2", + "version": "0.1.3", "description": "", "main": "dist/index.cjs.js", "module": "dist/index.es.js", From da61e4cf73a85adc85cbf389136935654b113ef1 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Wed, 11 Aug 2021 22:31:43 +0800 Subject: [PATCH 3/4] fix: select-element mode at pointEnd --- packages/core/examples/features/lib/main.js | 71 +++++++++++---------- packages/core/src/index.ts | 6 +- 2 files changed, 43 insertions(+), 34 deletions(-) diff --git a/packages/core/examples/features/lib/main.js b/packages/core/examples/features/lib/main.js index 1a81dd2..9708064 100644 --- a/packages/core/examples/features/lib/main.js +++ b/packages/core/examples/features/lib/main.js @@ -18,7 +18,7 @@ const core = new Core(mount, { contextWidth: 600, contextHeight: 400, devicePixelRatio: 4, - onlyRender: true, + // onlyRender: true, }, { scrollWrapper: { use: true, @@ -35,38 +35,7 @@ const core = new Core(mount, { }); -core.on('error', (data) => { - console.log('error: ', data); -}); -core.on('changeData', (data) => { - console.log('changeData: ', data); -}); -core.on('changeScreen', (data) => { - console.log('changeScreen: ', data); -}); -core.on('screenSelectElement', (data) => { - console.log('screenSelectElement: ', data); -}); -core.on('screenClickElement', (data) => { - console.log('screenClickElement: ', data); -}) -core.on('mouseOverElement', (data) => { - console.log('mouseOverElement: ', data); -}); -core.on('mouseLeaveElement', (data) => { - console.log('mouseLeaveElement: ', data); -}); - -core.on('screenMoveElementStart', (data) => { - console.log('screenMoveElementStart: ', data); -}); -core.on('screenMoveElementEnd', (data) => { - console.log('screenMoveElementEnd: ', data); -}); -core.on('screenChangeElement', (data) => { - console.log('screenChangeElement: ', data); -}); - +// initEvent(); core.setData(data); @@ -74,3 +43,39 @@ doScale(core, defaultConf.scale); doScroll(core, defaultConf); doElemens(core); + + +function initEvent() { + core.on('error', (data) => { + console.log('error: ', data); + }); + core.on('changeData', (data) => { + console.log('changeData: ', data); + }); + core.on('changeScreen', (data) => { + console.log('changeScreen: ', data); + }); + core.on('screenSelectElement', (data) => { + console.log('screenSelectElement: ', data); + }); + core.on('screenClickElement', (data) => { + console.log('screenClickElement: ', data); + }) + core.on('mouseOverElement', (data) => { + console.log('mouseOverElement: ', data); + }); + core.on('mouseLeaveElement', (data) => { + console.log('mouseLeaveElement: ', data); + }); + + core.on('screenMoveElementStart', (data) => { + console.log('screenMoveElementStart: ', data); + }); + core.on('screenMoveElementEnd', (data) => { + console.log('screenMoveElementEnd: ', data); + }); + core.on('screenChangeElement', (data) => { + console.log('screenChangeElement: ', data); + }); + +} \ No newline at end of file diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 6b82830..e39dd0b 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -394,7 +394,11 @@ class Core { this[_helper].clearSelectedArea(); this[_draw](); } - this[_tempData].set('selectedUUID', null); + + if (this[_mode] !== Mode.SELECT_ELEMENT) { + this[_tempData].set('selectedUUID', null); + } + this[_prevPoint] = null; this[_cursorStatus] = CursorStatus.NULL; this[_mode] = Mode.NULL; From 376920a93f1b989d7beae68c6f26a79612961187 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Wed, 11 Aug 2021 22:44:14 +0800 Subject: [PATCH 4/4] v0.1.4 --- lerna.json | 2 +- packages/board/package.json | 6 +++--- packages/core/package.json | 8 ++++---- packages/idraw/package.json | 6 +++--- packages/types/package.json | 2 +- packages/util/package.json | 2 +- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/lerna.json b/lerna.json index c46a11d..49a8581 100644 --- a/lerna.json +++ b/lerna.json @@ -6,5 +6,5 @@ "packages/core", "packages/idraw" ], - "version": "0.1.3" + "version": "0.1.4" } diff --git a/packages/board/package.json b/packages/board/package.json index 20593c2..4c5bb03 100644 --- a/packages/board/package.json +++ b/packages/board/package.json @@ -1,6 +1,6 @@ { "name": "@idraw/board", - "version": "0.1.3", + "version": "0.1.4", "description": "", "main": "dist/index.cjs.js", "module": "dist/index.es.js", @@ -23,10 +23,10 @@ "author": "chenshenhai", "license": "MIT", "devDependencies": { - "@idraw/types": "^0.1.3" + "@idraw/types": "^0.1.4" }, "dependencies": { - "@idraw/util": "^0.1.3" + "@idraw/util": "^0.1.4" }, "publishConfig": { "access": "public" diff --git a/packages/core/package.json b/packages/core/package.json index b17388a..23cff76 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@idraw/core", - "version": "0.1.3", + "version": "0.1.4", "description": "", "main": "dist/index.cjs.js", "module": "dist/index.es.js", @@ -23,11 +23,11 @@ "author": "chenshenhai", "license": "MIT", "devDependencies": { - "@idraw/types": "^0.1.3" + "@idraw/types": "^0.1.4" }, "dependencies": { - "@idraw/board": "^0.1.3", - "@idraw/util": "^0.1.3" + "@idraw/board": "^0.1.4", + "@idraw/util": "^0.1.4" }, "publishConfig": { "access": "public" diff --git a/packages/idraw/package.json b/packages/idraw/package.json index d065a96..a7578c5 100644 --- a/packages/idraw/package.json +++ b/packages/idraw/package.json @@ -1,6 +1,6 @@ { "name": "idraw", - "version": "0.1.3", + "version": "0.1.4", "description": "", "main": "dist/index.cjs.js", "module": "dist/index.es.js", @@ -23,10 +23,10 @@ "author": "chenshenhai", "license": "MIT", "devDependencies": { - "@idraw/types": "^0.1.3" + "@idraw/types": "^0.1.4" }, "dependencies": { - "@idraw/core": "^0.1.3" + "@idraw/core": "^0.1.4" }, "publishConfig": { "access": "public" diff --git a/packages/types/package.json b/packages/types/package.json index 7cee6ac..3d8863a 100644 --- a/packages/types/package.json +++ b/packages/types/package.json @@ -1,6 +1,6 @@ { "name": "@idraw/types", - "version": "0.1.3", + "version": "0.1.4", "description": "", "main": "src/index.ts", "types": "src/index.ts", diff --git a/packages/util/package.json b/packages/util/package.json index c475053..4adf45d 100644 --- a/packages/util/package.json +++ b/packages/util/package.json @@ -1,6 +1,6 @@ { "name": "@idraw/util", - "version": "0.1.3", + "version": "0.1.4", "description": "", "main": "dist/index.cjs.js", "module": "dist/index.es.js",