feat: add cancelElement and cancelElementByIndex

packages/core/src/index.ts

@@ -36,7 +36,7 @@ import {
   _tempData,
   _draw,
   _coreEvent,
-  _mapper,
+  // _mapper,
   _emitChangeScreen,
   _emitChangeData,
   _engine
@@ -45,9 +45,11 @@ import {
   getSelectedElements,
   updateElement,
   selectElementByIndex,
+  selectElement,
+  cancelElementByIndex,
+  cancelElement,
   getElement,
   getElementByIndex,
-  selectElement,
   moveUpElement,
   moveDownElement,
   addElement,
@@ -112,10 +114,10 @@ export default class Core {
       drawElementListWrappers(helperCtx, helperConfig);
       this[_board].draw();
     };
-    this[_renderer].on('drawFrame', (e) => {
+    this[_renderer].on('drawFrame', () => {
       drawFrame();
     });
-    this[_renderer].on('drawFrameComplete', (e) => {
+    this[_renderer].on('drawFrameComplete', () => {
       drawFrame();
     });
     this[_element] = new Element(this[_board].getContext());
@@ -163,12 +165,20 @@ export default class Core {
     return getElementByIndex(this, index);
   }
 
-  selectElementByIndex(index: number, opts?: { useMode?: boolean }): void {
-    return selectElementByIndex(this, index, opts);
+  selectElementByIndex(index: number): void {
+    return selectElementByIndex(this, index);
   }
 
-  selectElement(uuid: string, opts?: { useMode?: boolean }): void {
-    return selectElement(this, uuid, opts);
+  selectElement(uuid: string): void {
+    return selectElement(this, uuid);
+  }
+
+  cancelElementByIndex(index: number, opts?: { useMode?: boolean }): void {
+    return cancelElementByIndex(this, index, opts);
+  }
+
+  cancelElement(uuid: string, opts?: { useMode?: boolean }): void {
+    return cancelElement(this, uuid, opts);
   }
 
   moveUpElement(uuid: string): void {

packages/core/src/mixins/element.ts

@@ -1,19 +1,6 @@
 import { TypeElement, TypeElemDesc, TypeElementBase } from '@idraw/types';
 import { deepClone, createUUID } from '@idraw/util';
-import {
-  _board,
-  _data,
-  _opts,
-  _config,
-  _renderer,
-  _element,
-  _engine,
-  _tempData,
-  _draw,
-  _coreEvent,
-  _emitChangeScreen,
-  _emitChangeData
-} from './../names';
+import { _data, _element, _engine, _draw, _emitChangeData } from './../names';
 import { diffElementResourceChange } from './../lib/diff';
 import Core from './../index';
 import { Mode } from './../constant/static';
@@ -83,18 +70,10 @@ export function updateElement(
   core[_draw]({ resourceChangeUUIDs });
 }
 
-export function selectElementByIndex(
-  core: Core,
-  index: number,
-  opts?: { useMode?: boolean }
-): void {
+export function selectElementByIndex(core: Core, index: number): void {
   if (core[_data].elements[index]) {
     const uuid = core[_data].elements[index].uuid;
-    if (opts?.useMode === true) {
-      core[_engine].temp.set('mode', Mode.SELECT_ELEMENT);
-    } else {
-      core[_engine].temp.set('mode', Mode.NULL);
-    }
+    core[_engine].temp.set('mode', Mode.NULL);
     if (typeof uuid === 'string') {
       core[_engine].temp.set('selectedUUID', uuid);
       core[_engine].temp.set('selectedUUIDList', []);
@@ -103,14 +82,34 @@ export function selectElementByIndex(
   }
 }
 
-export function selectElement(
+export function selectElement(core: Core, uuid: string): void {
+  const index = core[_engine].helper.getElementIndexByUUID(uuid);
+  if (typeof index === 'number' && index >= 0) {
+    core.selectElementByIndex(index);
+  }
+}
+
+export function cancelElementByIndex(core: Core, index: number): void {
+  if (core[_data].elements[index]) {
+    const uuid = core[_data].elements[index].uuid;
+    const selectedUUID = core[_engine].temp.get('selectedUUID');
+    if (typeof uuid === 'string' && uuid === selectedUUID) {
+      core[_engine].temp.set('mode', Mode.NULL);
+      core[_engine].temp.set('selectedUUID', null);
+      core[_engine].temp.set('selectedUUIDList', []);
+    }
+    core[_draw]();
+  }
+}
+
+export function cancelElement(
   core: Core,
   uuid: string,
   opts?: { useMode?: boolean }
 ): void {
   const index = core[_engine].helper.getElementIndexByUUID(uuid);
   if (typeof index === 'number' && index >= 0) {
-    core.selectElementByIndex(index, opts);
+    core.cancelElementByIndex(index, opts);
   }
 }
 

packages/idraw/dev/main.ts

@@ -32,10 +32,19 @@ const idraw = new iDraw(
 );
 idraw.setData(data);
 
+const parseData = idraw.getData();
+
 idraw.on('changeData', (d) => {
   console.log('changeData ======', d);
 });
 
+idraw.selectElementByIndex(1);
+
+setTimeout(() => {
+  // idraw.cancelElementByIndex(1);
+  // idraw.cancelElement(parseData.elements[1].uuid);
+}, 2000);
+
 const btn = document.querySelector('#btn') as HTMLButtonElement;
 btn.addEventListener('click', () => {
   idraw