diff --git a/lerna.json b/lerna.json index 97587f8..49a8581 100644 --- a/lerna.json +++ b/lerna.json @@ -6,5 +6,5 @@ "packages/core", "packages/idraw" ], - "version": "0.1.2" + "version": "0.1.4" } diff --git a/packages/board/package.json b/packages/board/package.json index 18f673b..4c5bb03 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.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.2" + "@idraw/types": "^0.1.4" }, "dependencies": { - "@idraw/util": "^0.1.2" + "@idraw/util": "^0.1.4" }, "publishConfig": { "access": "public" diff --git a/packages/core/examples/features/lib/main.js b/packages/core/examples/features/lib/main.js index 2b45cff..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,35 +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('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); @@ -71,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/package.json b/packages/core/package.json index 56f3f17..23cff76 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.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.2" + "@idraw/types": "^0.1.4" }, "dependencies": { - "@idraw/board": "^0.1.2", - "@idraw/util": "^0.1.2" + "@idraw/board": "^0.1.4", + "@idraw/util": "^0.1.4" }, "publishConfig": { "access": "public" diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 63ef502..e39dd0b 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; @@ -381,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; @@ -399,8 +416,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 +437,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 diff --git a/packages/idraw/package.json b/packages/idraw/package.json index d8be21d..a7578c5 100644 --- a/packages/idraw/package.json +++ b/packages/idraw/package.json @@ -1,6 +1,6 @@ { "name": "idraw", - "version": "0.1.2", + "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.2" + "@idraw/types": "^0.1.4" }, "dependencies": { - "@idraw/core": "^0.1.2" + "@idraw/core": "^0.1.4" }, "publishConfig": { "access": "public" diff --git a/packages/types/package.json b/packages/types/package.json index 79f33ba..3d8863a 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.4", "description": "", "main": "src/index.ts", "types": "src/index.ts", diff --git a/packages/util/package.json b/packages/util/package.json index 3adedcf..4adf45d 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.4", "description": "", "main": "dist/index.cjs.js", "module": "dist/index.es.js",