refactor: reset idraw.draw() and idraw.initData api

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

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();
   

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};

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();

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);

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;

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;

packages/core/examples/test/image.html

@@ -33,8 +33,7 @@
           contextHeight: 400,
           devicePixelRatio: 4
         });
-      core.initData(data);
-      core.draw();
+      core.setData(data);
     </script>
   </body>
 </html>

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);
     </script>

packages/core/examples/test/rect.html

@@ -33,8 +33,7 @@
           contextHeight: 400,
           devicePixelRatio: 4
         });
-      core.initData(data);
-      core.draw();
+      core.setData(data);
     </script>
   </body>
 </html>

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,

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();
     </script>
   </body>
 </html>

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();
     </script>
   </body>
 </html>

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();
     </script>
   </body>
 </html>

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();
     </script>
   </body>
 </html>

packages/core/examples/test/svg.html

@@ -33,8 +33,7 @@
           contextHeight: 400,
           devicePixelRatio: 4
         });
-      core.initData(data);
-      core.draw();
+      core.setData(data);
     </script>
   </body>
 </html>

packages/core/examples/test/text.html

@@ -33,8 +33,7 @@
           contextHeight: 400,
           devicePixelRatio: 4
         });
-      core.initData(data);
-      core.draw();
+      core.setData(data);
     </script>
   </body>
 </html>

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);
     </script>

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]);

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<keyof TypeElemDesc>) {
@@ -195,7 +189,7 @@ class Core {
       }
     }
     this[_emitChangeData]();
-    this.draw();
+    this[_draw]();
   }
 
   addElement(elem: TypeElement<keyof TypeElemDesc>): 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;
   }
 

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,

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);

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);

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;

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;

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,