feat: implement core move up/down element

package.json

@@ -38,7 +38,6 @@
     "rollup-plugin-typescript2": "^0.30.0",
     "serve-handler": "^6.1.3",
     "ts-node": "^9.1.1",
-    "tslib": "^2.2.0",
     "typescript": "^4.2.3"
   }
 }

packages/core/example/css/index.css

@@ -86,6 +86,10 @@ html, body {
   cursor: pointer;
 }
 
+.btn-hidden {
+  visibility: hidden;
+}
+
 .elem-item-btn:hover {
   color: #4183c4;
   border-color: #4183c4;

packages/core/example/lib/element.js

@@ -12,44 +12,40 @@ export function doElemens(core) {
 function renderElemens(core) {
   const data = core.getData();
   const elems = data.elements;
-  const items = elems.map((ele) => {
-    return `
+  const items = [];
+  for (let i = elems.length - 1; i >= 0; i --) {
+    const ele = elems[i];
+    items.push(`
     <div class="elem-item">
       <span class="elem-item-name" data-elem-name="${ele.uuid || ''}">${ele.name || 'Unnamed'}</span>
-      <span class="elem-item-btn" data-elem-btn-up="${ele.uuid || ''}">Up</span>
-      <span class="elem-item-btn" data-elem-btn-up="${ele.uuid || ''}">Down</span>
+      <span class="elem-item-btn ${i === elems.length - 1 ? 'btn-hidden' : ''}" data-elem-btn-up="${ele.uuid || ''}">Up</span>
+      <span class="elem-item-btn ${i === 0 ? 'btn-hidden' : ''} " data-elem-btn-down="${ele.uuid || ''}">Down</span>
     </div>
-    `;
-  });
+    `);
+  }
   dom.innerHTML = items.join('');
 }
 
 function listenElements(core) {
-  const names = dom.querySelectorAll('[data-elem-name]');  
-  const upBtns = dom.querySelectorAll('[data-elem-btn-up]');
-  const downBtns = dom.querySelectorAll('[data-elem-btn-down]');
 
-  names.forEach((el) => {
-    el.addEventListener('click', () => {
+  dom.addEventListener('click', (e) => {
+    if (!e.path[0]) {
+      return;
+    }
+    const el = e.path[0];
+    if (el.hasAttribute('data-elem-name')) {
       const uuid = el.getAttribute('data-elem-name');
-      core.selectElement(uuid);
-    }, false);
-  });
-
-  upBtns.forEach((el) => {
-    el.addEventListener('click', () => {
+      core.selectElementByUUID(uuid);
+    } else if (el.hasAttribute('data-elem-btn-up')) {
       const uuid = el.getAttribute('data-elem-btn-up');
       core.moveUpElement(uuid);
       renderElemens(core);
-    }, false);
-  });
-
-  downBtns.forEach((el) => {
-    el.addEventListener('click', () => {
+    } else if (el.hasAttribute('data-elem-btn-down')) {
       const uuid = el.getAttribute('data-elem-btn-down');
       core.moveDownElement(uuid);
       renderElemens(core);
-    }, false);
-  })
+    }
+  }, true);
+
 }
 

packages/core/src/index.ts

@@ -68,10 +68,40 @@ class Core {
     this[_renderer].render(this[_data], this[_helper].getConfig());
   }
 
-  // TODO
   selectElement(index: number) {
-    // TODO
-    console.log('index');
+    if (this[_data].elements[index]) {
+      const uuid = this[_data].elements[index].uuid;
+      this[_mode] = Mode.SELECT_ELEMENT;
+      this[_selectedUUID] = uuid;
+      this.draw();
+    }
+  }
+
+  selectElementByUUID(uuid: string) {
+    const index = this[_helper].getElementIndexByUUID(uuid);
+    if (typeof index === 'number' && index >= 0) {
+      this.selectElement(index);
+    }
+  }
+
+  moveUpElement(uuid: string) {
+    const index = this[_helper].getElementIndexByUUID(uuid);
+    if (typeof index === 'number' && index >= 0 && index < this[_data].elements.length - 1) {
+      const temp = this[_data].elements[index];
+      this[_data].elements[index] = this[_data].elements[index + 1];
+      this[_data].elements[index + 1] = temp;
+    }
+    this.draw();
+  }
+
+  moveDownElement(uuid: string) {
+    const index = this[_helper].getElementIndexByUUID(uuid);
+    if (typeof index === 'number' && index > 0 && index < this[_data].elements.length) {
+      const temp = this[_data].elements[index];
+      this[_data].elements[index] = this[_data].elements[index - 1];
+      this[_data].elements[index - 1] = temp;
+    }
+    this.draw();
   }
 
   scale(ratio: number) {
@@ -111,12 +141,8 @@ class Core {
       this[_selectedDotDirection] = direction;
       this[_selectedUUID] = uuid;
     } else {
-      const [index, uuid] = this[_element].isPointInElement(point, this[_data]);
-      if (index >= 0) {
-        this[_mode] = Mode.SELECT_ELEMENT;
-        this[_selectedUUID] = uuid;
-        this.draw();
-      }
+      const [index] = this[_element].isPointInElement(point, this[_data]);
+      this.selectElement(index);
     }
   }
 

packages/core/src/lib/helper.ts

@@ -16,7 +16,6 @@ export class Helper implements TypeHelper {
   private _helperConfig: TypeHelperConfig;
   private _coreConfig: TypeConfigStrict;
   private _ctx: TypeContext;
-  // private _helperConfig: TypeConfig;
 
   constructor(ctx: TypeContext, config: TypeConfigStrict) {
     this._ctx = ctx;
@@ -38,6 +37,14 @@ export class Helper implements TypeHelper {
     return JSON.parse(JSON.stringify(this._helperConfig));
   }
 
+  getElementIndexByUUID(uuid: string): number | null {
+    const index = this._helperConfig.elementIndexMap[uuid];
+    if (index >= 0) {
+      return index
+    }
+    return null;
+  }
+
   isPointInElementWrapperDot(p: TypePoint): [string | null | undefined, TypeHelperWrapperDotDirection | null] {
     const ctx = this._ctx;
     const uuid = this._helperConfig?.selectedElementWrapper?.uuid;