From 748fb0f0f9e03bc1c27ccf021b5e2cff1dada6b6 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Sun, 25 Jul 2021 19:37:01 +0800 Subject: [PATCH] refactor: reset idraw.draw() and idraw.initData api --- docs/todo/core.md | 5 +- packages/core/__tests__/index.test.ts | 3 +- packages/core/__tests__/lib/point.test.ts | 1 - packages/core/__tests__/move.test.ts | 6 +-- packages/core/examples/features/lib/main.js | 1 - packages/core/examples/features/lib/scale.js | 3 +- packages/core/examples/features/lib/scroll.js | 8 +--- packages/core/examples/test/image.html | 3 +- packages/core/examples/test/only-render.html | 4 +- packages/core/examples/test/rect.html | 3 +- packages/core/examples/test/reset-size.html | 3 +- packages/core/examples/test/scale-001.html | 3 +- packages/core/examples/test/scale-002.html | 3 +- packages/core/examples/test/scale-003.html | 3 +- packages/core/examples/test/scroll.html | 3 +- packages/core/examples/test/svg.html | 3 +- packages/core/examples/test/text.html | 3 +- .../examples/test/update-element-later.html | 4 +- .../core/examples/test/update-element.html | 3 +- packages/core/src/index.ts | 46 ++++++++----------- packages/core/src/names.ts | 4 +- packages/idraw/__tests__/index.test.ts | 6 +-- packages/idraw/examples/lib/main.js | 5 +- packages/idraw/examples/lib/scale.js | 2 - packages/idraw/examples/lib/scroll.js | 4 -- packages/idraw/src/index.ts | 2 - 26 files changed, 47 insertions(+), 87 deletions(-) diff --git a/docs/todo/core.md b/docs/todo/core.md index 197d5c2..5cf720b 100644 --- a/docs/todo/core.md +++ b/docs/todo/core.md @@ -1,8 +1,7 @@ # @idraw/core -* [] make idraw.draw() private -* [] remove idraw.initData() -* [] make idraw.pointScreenToContext() and idraw.pointContextToScreen() private +* [x] make idraw.draw() private +* [x] remove idraw.initData() * Support Element's render * Circle * [] Render content diff --git a/packages/core/__tests__/index.test.ts b/packages/core/__tests__/index.test.ts index 03fbbe4..d8bb18f 100644 --- a/packages/core/__tests__/index.test.ts +++ b/packages/core/__tests__/index.test.ts @@ -25,8 +25,7 @@ describe("@idraw/core", () => { const mount = document.querySelector('#mount') as HTMLDivElement; const core = new Core(mount, opts); const data = getData(); - core.initData(data); - core.draw(); + core.setData(data); requestAnimationFrameMock.triggerNextAnimationFrame(); diff --git a/packages/core/__tests__/lib/point.test.ts b/packages/core/__tests__/lib/point.test.ts index 5436e85..7909632 100644 --- a/packages/core/__tests__/lib/point.test.ts +++ b/packages/core/__tests__/lib/point.test.ts @@ -24,7 +24,6 @@ describe('@idraw/core', () => { idraw.scale(transform.scale); idraw.scrollX(transform.scrollX); idraw.scrollY(transform.scrollY); - idraw.draw(); const p1 = {x: 400, y: 300}; const p2 = {x: 300, y: 200}; diff --git a/packages/core/__tests__/move.test.ts b/packages/core/__tests__/move.test.ts index fa6e853..7e6556c 100644 --- a/packages/core/__tests__/move.test.ts +++ b/packages/core/__tests__/move.test.ts @@ -32,8 +32,7 @@ describe("@idraw/core", () => { const mount = document.querySelector('#mount') as HTMLDivElement; const idraw = new IDraw(mount, opts); const data = getData(); - idraw.initData(data); - idraw.draw(); + idraw.setData(data); idraw.moveUpElement('image-003'); requestAnimationFrameMock.triggerNextAnimationFrame(); @@ -63,8 +62,7 @@ describe("@idraw/core", () => { const mount = document.querySelector('#mount') as HTMLDivElement; const idraw = new IDraw(mount, opts); const data = getData(); - idraw.initData(data); - idraw.draw(); + idraw.setData(data); idraw.moveDownElement('image-003'); requestAnimationFrameMock.triggerNextAnimationFrame(); diff --git a/packages/core/examples/features/lib/main.js b/packages/core/examples/features/lib/main.js index dfb3d6f..8f4cca5 100644 --- a/packages/core/examples/features/lib/main.js +++ b/packages/core/examples/features/lib/main.js @@ -50,7 +50,6 @@ core.on('screenChangeElement', (data) => { core.setData(data); -core.draw(); doScale(core, defaultConf.scale); doScroll(core, defaultConf); diff --git a/packages/core/examples/features/lib/scale.js b/packages/core/examples/features/lib/scale.js index e780af6..b41354b 100644 --- a/packages/core/examples/features/lib/scale.js +++ b/packages/core/examples/features/lib/scale.js @@ -7,13 +7,12 @@ export function doScale(core, scale) { if (scale > 0) { input.value = scale; core.scale(scale); - core.draw(); } input.addEventListener('change', () => { const val = input.value * 1; + console.log('scale ===', val); if (val > 0) { core.scale(val); - core.draw(); } }); hasInited = true; diff --git a/packages/core/examples/features/lib/scroll.js b/packages/core/examples/features/lib/scroll.js index 7e240af..eb86d0a 100644 --- a/packages/core/examples/features/lib/scroll.js +++ b/packages/core/examples/features/lib/scroll.js @@ -9,27 +9,23 @@ export function doScroll(core, conf = {}) { if (conf.scrollX >= 0) { inputX.value = conf.scrollX; core.scrollX(conf.scrollX); - core.draw(); } if (conf.scrollY >= 0) { inputY.value = conf.scrollY; core.scrollY(conf.scrollY); - core.draw(); } inputX.addEventListener('change', () => { const val = inputX.value * 1; - if (val >= 0) { + if (val >= 0 || val < 0) { core.scrollX(val); - core.draw(); } }); inputY.addEventListener('change', () => { const val = inputY.value * 1; - if (val >= 0) { + if (val >= 0 || val < 0) { core.scrollY(val); - core.draw(); } }); hasInited = true; diff --git a/packages/core/examples/test/image.html b/packages/core/examples/test/image.html index c4a64a3..9d653e7 100644 --- a/packages/core/examples/test/image.html +++ b/packages/core/examples/test/image.html @@ -33,8 +33,7 @@ contextHeight: 400, devicePixelRatio: 4 }); - core.initData(data); - core.draw(); + core.setData(data); \ No newline at end of file diff --git a/packages/core/examples/test/only-render.html b/packages/core/examples/test/only-render.html index 8565166..b1072c0 100644 --- a/packages/core/examples/test/only-render.html +++ b/packages/core/examples/test/only-render.html @@ -38,13 +38,11 @@ devicePixelRatio: 4, onlyRender: true, }); - core.initData(data); - core.draw(); + core.setData(data); setTimeout(() => { data.elements[0].desc.src = `./../images/phone.png?v=${Date.now()}`; core.updateElement(data.elements[0]); - core.draw(); console.log('update ok!'); }, 2000); diff --git a/packages/core/examples/test/rect.html b/packages/core/examples/test/rect.html index 0732bf1..0e10b1f 100644 --- a/packages/core/examples/test/rect.html +++ b/packages/core/examples/test/rect.html @@ -33,8 +33,7 @@ contextHeight: 400, devicePixelRatio: 4 }); - core.initData(data); - core.draw(); + core.setData(data); \ No newline at end of file diff --git a/packages/core/examples/test/reset-size.html b/packages/core/examples/test/reset-size.html index b6f5323..0e487d4 100644 --- a/packages/core/examples/test/reset-size.html +++ b/packages/core/examples/test/reset-size.html @@ -38,7 +38,7 @@ use: true, } }); - core.initData(data); + core.setData(data); core.addElement({ name: 'text-001', x: 790, @@ -57,7 +57,6 @@ } }) core.scale(1); - core.draw(); core.resetSize({ width: 300, diff --git a/packages/core/examples/test/scale-001.html b/packages/core/examples/test/scale-001.html index 602b009..f4e1798 100644 --- a/packages/core/examples/test/scale-001.html +++ b/packages/core/examples/test/scale-001.html @@ -34,10 +34,9 @@ contextHeight: 900, devicePixelRatio: 4 }); - core.initData(data); + core.setData(data); const result = core.scale(0.5); console.log('scale: ', result); - core.draw(); \ No newline at end of file diff --git a/packages/core/examples/test/scale-002.html b/packages/core/examples/test/scale-002.html index 0a6534d..91d64ea 100644 --- a/packages/core/examples/test/scale-002.html +++ b/packages/core/examples/test/scale-002.html @@ -34,12 +34,11 @@ contextHeight: 600, devicePixelRatio: 4 }); - core.initData(data); + core.setData(data); core.scrollX(-600); core.scrollY(-400); const result = core.scale(0.5); console.log('scale: ', result); - core.draw(); \ No newline at end of file diff --git a/packages/core/examples/test/scale-003.html b/packages/core/examples/test/scale-003.html index b0e9e90..780cdd9 100644 --- a/packages/core/examples/test/scale-003.html +++ b/packages/core/examples/test/scale-003.html @@ -33,12 +33,11 @@ contextHeight: 600, devicePixelRatio: 4 }); - core.initData(data); + core.setData(data); core.scrollX(400); core.scrollY(400); const result = core.scale(0.8); console.log('scale: ', result); - core.draw(); \ No newline at end of file diff --git a/packages/core/examples/test/scroll.html b/packages/core/examples/test/scroll.html index 18a636a..09960f3 100644 --- a/packages/core/examples/test/scroll.html +++ b/packages/core/examples/test/scroll.html @@ -39,10 +39,9 @@ lineWidth: 20, } }); - core.initData(data); + core.setData(data); const result = core.scale(1); console.log('scale: ', result); - core.draw(); \ No newline at end of file diff --git a/packages/core/examples/test/svg.html b/packages/core/examples/test/svg.html index 070e865..8f1f229 100644 --- a/packages/core/examples/test/svg.html +++ b/packages/core/examples/test/svg.html @@ -33,8 +33,7 @@ contextHeight: 400, devicePixelRatio: 4 }); - core.initData(data); - core.draw(); + core.setData(data); \ No newline at end of file diff --git a/packages/core/examples/test/text.html b/packages/core/examples/test/text.html index a9be1a9..16f5365 100644 --- a/packages/core/examples/test/text.html +++ b/packages/core/examples/test/text.html @@ -33,8 +33,7 @@ contextHeight: 400, devicePixelRatio: 4 }); - core.initData(data); - core.draw(); + core.setData(data); \ No newline at end of file diff --git a/packages/core/examples/test/update-element-later.html b/packages/core/examples/test/update-element-later.html index 2075524..7b1978c 100644 --- a/packages/core/examples/test/update-element-later.html +++ b/packages/core/examples/test/update-element-later.html @@ -37,13 +37,11 @@ contextHeight: 400, devicePixelRatio: 4 }); - core.initData(data); - core.draw(); + core.setData(data); setTimeout(() => { data.elements[0].desc.src = `./../images/phone.png?v=${Date.now()}`; core.updateElement(data.elements[0]); - core.draw(); console.log('update ok!'); }, 2000); diff --git a/packages/core/examples/test/update-element.html b/packages/core/examples/test/update-element.html index db509f9..7e34d2d 100644 --- a/packages/core/examples/test/update-element.html +++ b/packages/core/examples/test/update-element.html @@ -37,8 +37,7 @@ contextHeight: 400, devicePixelRatio: 4 }); - core.initData(data); - core.draw(); + core.setData(data); data.elements[0].desc.src = `./../images/phone.png?v=${Date.now()}`; core.updateElement(data.elements[0]); diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 35e259e..839d395 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -16,7 +16,7 @@ import is, { TypeIs } from './lib/is'; import check, { TypeCheck } from './lib/check'; import { _board, _data, _opts, _config, _renderer, _element, _helper, _hasInited, - _hasInitedData, _mode, _selectedUUID, _selectedUUIDList, _prevPoint, + _mode, _selectedUUID, _selectedUUIDList, _prevPoint, _draw, _selectedDotDirection, _coreEvent, _mapper, _initEvent, _handlePoint, _handleMoveStart, _handleMove, _handleMoveEnd, _handleHover, _dragElements, _transfromElement, _emitChangeScreen, _emitChangeData, _onlyRender, _cursorStatus, @@ -38,7 +38,6 @@ class Core { private [_helper]: Helper; private [_mapper]: Mapper; private [_hasInited] = false; - private [_hasInitedData] = false; private [_mode]: Mode = Mode.NULL; private [_coreEvent]: CoreEvent = new CoreEvent(); private [_selectedUUID]: string | null = null; @@ -77,7 +76,7 @@ class Core { this[_hasInited] = true; } - draw(): void { + [_draw](): void { const transfrom = this[_board].getTransform(); this[_helper].updateConfig(this[_data], { width: this[_opts].width, @@ -96,7 +95,7 @@ class Core { resetSize(opts: TypeBoardSizeOptions) { this[_opts] = { ...this[_opts], ...opts }; this[_board].resetSize(opts); - this.draw(); + this[_draw](); } selectElementByIndex(index: number, opts?: { useMode?: boolean }): void { @@ -110,7 +109,7 @@ class Core { } this[_selectedUUID] = uuid; this[_selectedUUIDList] = []; - this.draw(); + this[_draw](); } } @@ -131,7 +130,7 @@ class Core { this[_data].elements[index + 1] = temp; } this[_emitChangeData](); - this.draw(); + this[_draw](); } moveUpElement(uuid: string): void { @@ -143,23 +142,26 @@ class Core { this[_data].elements[index - 1] = temp; } this[_emitChangeData](); - this.draw(); + this[_draw](); } scale(ratio: number): TypeScreenContext { const screen = this[_board].scale(ratio); + this[_draw](); this[_emitChangeScreen](); return screen; } scrollX(x: number): TypeScreenContext { const screen = this[_board].scrollX(x); + this[_draw](); this[_emitChangeScreen](); return screen; } scrollY(y: number): TypeScreenContext { const screen = this[_board].scrollY(y); + this[_draw](); this[_emitChangeScreen](); return screen; } @@ -168,20 +170,12 @@ class Core { return deepClone(this[_data]); } - initData(data: any | TypeData): void { - if (this[_hasInitedData] === true) { - return; - } - this.setData(data, { triggerChangeEvent: true }); - this[_hasInitedData] = true; - } - setData(data: any | TypeData, opts?: { triggerChangeEvent: boolean }): void { this[_data] = this[_element].initData(deepClone(parseData(data))); if (opts && opts.triggerChangeEvent === true) { this[_emitChangeData](); } - this.draw(); + this[_draw](); } updateElement(elem: TypeElement) { @@ -195,7 +189,7 @@ class Core { } } this[_emitChangeData](); - this.draw(); + this[_draw](); } addElement(elem: TypeElement): string | null { @@ -204,7 +198,7 @@ class Core { _elem.uuid = createUUID(); this[_data].elements.unshift(_elem); this[_emitChangeData](); - this.draw(); + this[_draw](); return _elem.uuid; } @@ -214,7 +208,7 @@ class Core { if (index >= 0) { this[_data].elements.splice(index, 1); this[_emitChangeData](); - this.draw(); + this[_draw](); } } @@ -295,7 +289,7 @@ class Core { } } - this.draw(); + this[_draw](); } private [_handleMoveStart](point: TypePoint): void { @@ -321,12 +315,12 @@ class Core { private [_handleMove](point: TypePoint): void { if (this[_mode] === Mode.SELECT_ELEMENT_LIST) { this[_dragElements](this[_selectedUUIDList], point, this[_prevPoint]); - this.draw(); + this[_draw](); this[_cursorStatus] = CursorStatus.DRAGGING; } else if (typeof this[_selectedUUID] === 'string') { if (this[_mode] === Mode.SELECT_ELEMENT) { this[_dragElements]([this[_selectedUUID] as string], point, this[_prevPoint]); - this.draw(); + this[_draw](); this[_cursorStatus] = CursorStatus.DRAGGING; } else if (this[_mode] === Mode.SELECT_ELEMENT_WRAPPER_DOT && this[_selectedDotDirection]) { this[_transfromElement](this[_selectedUUID] as string, point, this[_prevPoint], this[_selectedDotDirection] as TypeHelperWrapperDotDirection); @@ -334,7 +328,7 @@ class Core { } } else if (this[_mode] === Mode.SELECT_AREA) { this[_helper].changeSelectArea(point); - this.draw(); + this[_draw](); } this[_prevPoint] = point; } @@ -373,7 +367,7 @@ class Core { this[_mode] = Mode.NULL; } this[_helper].clearSelectedArea(); - this.draw(); + this[_draw](); } this[_selectedUUID] = null; this[_prevPoint] = null; @@ -402,7 +396,7 @@ class Core { this[_element].dragElement(this[_data], uuid, point, prevPoint, this[_board].getContext().getTransform().scale); } }); - this.draw(); + this[_draw](); } private [_transfromElement]( @@ -416,7 +410,7 @@ class Core { return null; } const result = this[_element].transformElement(this[_data], uuid, point, prevPoint, this[_board].getContext().getTransform().scale, direction); - this.draw(); + this[_draw](); return result; } diff --git a/packages/core/src/names.ts b/packages/core/src/names.ts index 58ca0d3..bfff74f 100644 --- a/packages/core/src/names.ts +++ b/packages/core/src/names.ts @@ -6,11 +6,11 @@ const _renderer = Symbol('_renderer'); const _element = Symbol('_element'); const _helper = Symbol('_helper'); const _hasInited = Symbol('_hasInited'); -const _hasInitedData = Symbol('_hasInitedData'); const _mode = Symbol('_mode'); const _selectedUUID = Symbol('_selectedUUID'); const _selectedUUIDList = Symbol('_selectedUUIDList'); const _prevPoint = Symbol('_prevPoint'); +const _draw = Symbol('_draw'); const _selectedDotDirection = Symbol('_selectedDotDirection'); const _coreEvent = Symbol('_coreEvent'); const _mapper = Symbol('_mapper'); @@ -29,7 +29,7 @@ const _cursorStatus = Symbol('_cursorStatus'); export { _board, _data, _opts, _config, _renderer, _element, _helper, _hasInited, - _hasInitedData, _mode, _selectedUUID, _selectedUUIDList, _prevPoint, + _mode, _selectedUUID, _selectedUUIDList, _prevPoint, _draw, _selectedDotDirection, _coreEvent, _mapper, _initEvent, _handlePoint, _handleMoveStart, _handleMove, _handleMoveEnd, _handleHover, _dragElements, _transfromElement, _emitChangeScreen, _emitChangeData, _onlyRender, _cursorStatus, diff --git a/packages/idraw/__tests__/index.test.ts b/packages/idraw/__tests__/index.test.ts index 6cec08c..616be2b 100644 --- a/packages/idraw/__tests__/index.test.ts +++ b/packages/idraw/__tests__/index.test.ts @@ -32,8 +32,7 @@ describe("idraw", () => { const mount = document.querySelector('#mount') as HTMLDivElement; const idraw = new IDraw(mount, opts); const data = getData(); - idraw.initData(data); - idraw.draw(); + idraw.setData(data, { triggerChangeEvent: true }); requestAnimationFrameMock.triggerNextAnimationFrame(); @@ -62,8 +61,7 @@ describe("idraw", () => { const mount = document.querySelector('#mount') as HTMLDivElement; const idraw = new IDraw(mount, opts); const data = getData(); - idraw.initData(data); - idraw.draw(); + idraw.setData(data, { triggerChangeEvent: true }); idraw.moveDownElement('svg-004'); idraw.moveDownElement('image-003'); await delay(10); diff --git a/packages/idraw/examples/lib/main.js b/packages/idraw/examples/lib/main.js index 60b37d8..5bddbe1 100644 --- a/packages/idraw/examples/lib/main.js +++ b/packages/idraw/examples/lib/main.js @@ -44,8 +44,9 @@ idraw.on('screenChangeElement', (data) => { }); -idraw.initData(data); -idraw.draw(); +idraw.setData(data, { + triggerChangeEvent: true, +}); doAction(idraw); doScale(idraw, defaultConf.scale); diff --git a/packages/idraw/examples/lib/scale.js b/packages/idraw/examples/lib/scale.js index 00313ed..10aeede 100644 --- a/packages/idraw/examples/lib/scale.js +++ b/packages/idraw/examples/lib/scale.js @@ -8,14 +8,12 @@ export function doScale(idraw, scale) { input.value = scale; const screen = idraw.scale(scale); console.log('scale: screen = ', screen); - idraw.draw(); } input.addEventListener('change', () => { const val = input.value * 1; if (val > 0) { const screen = idraw.scale(val); console.log('scale: screen = ', screen); - idraw.draw(); } }); hasInited = true; diff --git a/packages/idraw/examples/lib/scroll.js b/packages/idraw/examples/lib/scroll.js index afcc10a..be79ebc 100644 --- a/packages/idraw/examples/lib/scroll.js +++ b/packages/idraw/examples/lib/scroll.js @@ -10,13 +10,11 @@ export function doScroll(idraw, conf = {}) { inputX.value = conf.scrollX; const screen = idraw.scrollX(conf.scrollX); console.log('scale: scrollX = ', screen); - idraw.draw(); } if (conf.scrollY >= 0) { inputY.value = conf.scrollY; idraw.scrollY(conf.scrollY); - idraw.draw(); } inputX.addEventListener('change', () => { @@ -24,7 +22,6 @@ export function doScroll(idraw, conf = {}) { if (val >= 0) { const screen = idraw.scrollX(val); console.log('scale: scrollX = ', screen); - idraw.draw(); } }); inputY.addEventListener('change', () => { @@ -32,7 +29,6 @@ export function doScroll(idraw, conf = {}) { if (val >= 0) { const screen = idraw.scrollY(val); console.log('scale: scrollY = ', screen); - idraw.draw(); } }); hasInited = true; diff --git a/packages/idraw/src/index.ts b/packages/idraw/src/index.ts index 2ba8fbc..09cff4d 100644 --- a/packages/idraw/src/index.ts +++ b/packages/idraw/src/index.ts @@ -48,7 +48,6 @@ class IDraw extends Core { const record = this[_doRecords][this[_doRecords].length - 1]; if (record?.data) { this.setData(record.data); - this.draw(); } return { doRecordCount: this[_doRecords].length, @@ -69,7 +68,6 @@ class IDraw extends Core { const record = this[_unDoRecords].pop(); if (record?.data) { this.setData(record.data); - this.draw(); } return { undoRecordCount: this[_unDoRecords].length,