refactor: reprocess the element order

docs/todo/core.md

@@ -1,5 +1,7 @@
 # @idraw/core
 
+* [] BUG: Type error about keyof TypeElemDesc
+* [] BUG: Type error about TypeElement'uuid
 * [] Element default data
 * [] Support gradient color
 * [] Listen keyboard action

packages/core/examples/features/lib/element.js

@@ -14,13 +14,13 @@ function renderElemens(core) {
   const data = core.getData();
   const elems = data.elements;
   const items = [];
-  for (let i = 0; i < elems.length; i ++) {
+  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 ${i === 0 ? 'btn-hidden' : ''}" data-elem-btn-up="${ele.uuid || ''}">Up</span>
-      <span class="elem-item-btn ${i === elems.length - 1 ? 'btn-hidden' : ''}" data-elem-btn-down="${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>
       <span class="elem-item-btn" data-elem-btn-lock="${ele.uuid || ''}">Lock</span>
     </div>
     `);

packages/core/src/index.ts

@@ -107,8 +107,10 @@ class Core {
       } else {
         this[_mode] = Mode.NULL;
       }
-      this[_selectedUUID] = uuid;
-      this[_selectedUUIDList] = [];
+      if (typeof uuid === 'string') {
+        this[_selectedUUID] = uuid;
+        this[_selectedUUIDList] = [];
+      }
       this[_draw]();
     }
   }
@@ -121,7 +123,7 @@ class Core {
     }
   }
 
-  moveDownElement(uuid: string): void {
+  moveUpElement(uuid: string): void {
     if (this[_onlyRender] === true) return;
     const index = this[_helper].getElementIndexByUUID(uuid);
     if (typeof index === 'number' && index >= 0 && index < this[_data].elements.length - 1) {
@@ -133,7 +135,7 @@ class Core {
     this[_draw]();
   }
 
-  moveUpElement(uuid: string): void {
+  moveDownElement(uuid: string): void {
     if (this[_onlyRender] === true) return;
     const index = this[_helper].getElementIndexByUUID(uuid);
     if (typeof index === 'number' && index > 0 && index < this[_data].elements.length) {

packages/core/src/lib/draw/index.ts

@@ -37,7 +37,7 @@ export function drawContext(
   if (!(data.elements.length > 0)) {
     return;
   }
-  for (let i = data.elements.length - 1; i >= 0; i--) {
+  for (let i = 0; i < data.elements.length; i++) {
     const elem = data.elements[i];
     switch (elem.type) {
       case 'rect': {

packages/types/src/lib/element.ts

@@ -10,7 +10,7 @@ type TypeElementAttrs = {
 
 type TypeElement<T extends keyof TypeElemDesc> = TypeElementAttrs & {
   name?: string;
-  uuid: string;
+  uuid?: string;
   type: T;
   lock?: boolean;
   desc: TypeElemDesc[T];
@@ -23,12 +23,12 @@ type TypeElemBoxDesc = {
 }
 
 type TypeElemDesc = {
-  text: TypeElemDescText,
-  rect: TypeElemDescRect,
-  circle: TypeElemDescCircle,
-  image: TypeElemDescImage,
-  svg: TypeElemDescSVG,
-  html: TypeElemDescHTML,
+  'text': TypeElemDescText,
+  'rect': TypeElemDescRect,
+  'circle': TypeElemDescCircle,
+  'image': TypeElemDescImage,
+  'svg': TypeElemDescSVG,
+  'html': TypeElemDescHTML,
   // paint: TypeElemDescPaint,
 }