chore: update core example

packages/core/example/css/index.css

@@ -3,6 +3,8 @@ html, body {
   padding: 0;
   width: 100%;
   height: 100%;
+  font-size: 12px;
+  color: #333333;
 }
 
 #mount canvas {
@@ -49,4 +51,42 @@ html, body {
 .transform input {
   width: 100px;
   margin-right: 12px;
+}
+
+.elem-item {
+  height: 32px;
+  width: 200px;
+  border: 1px solid #999999;
+  border-bottom: none;
+  line-height: 30px;
+  color: #666;
+  font-size: 14px;
+}
+
+.elem-item:last-child {
+  border-bottom: 1px solid #999999;
+}
+
+.elem-item-name {
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+.elem-item-btn {
+  float: right;
+  font-size: 12px;
+  height: 24px;
+  width: 40px;
+  border-radius: 12px;
+  border: 1px solid #cccccc;
+  text-align: center;
+  line-height: 24px;
+  margin-top: 2px;
+  margin-right: 6px;
+  cursor: pointer;
+}
+
+.elem-item-btn:hover {
+  color: #4183c4;
+  border-color: #4183c4;
 }

packages/core/example/lib/data.js

@@ -3,6 +3,7 @@ const data = {
   bgColor: '#ffffff',
   elements: [
     {
+      name: 'rect-001',
       x: 10,
       y: 10,
       w: 200,
@@ -13,6 +14,7 @@ const data = {
       }
     },
     {
+      name: 'rect-002',
       x: 80,
       y: 80,
       w: 200,
@@ -23,6 +25,7 @@ const data = {
       }
     },
     {
+      name: 'rect-003',
       x: 160,
       y: 160,
       w: 200,
@@ -33,6 +36,7 @@ const data = {
       }
     },
     {
+      name: 'rect-004',
       x: 400 - 10,
       y: 300 - 10,
       w: 200,

packages/core/example/lib/element.js

@@ -0,0 +1,55 @@
+
+const dom = document.querySelector('#elem-list');
+
+let hasInited = false;
+
+export function doElemens(core) {
+  if (hasInited === true)  return;
+  renderElemens(core);
+  listenElements(core);
+}
+
+function renderElemens(core) {
+  const data = core.getData();
+  const elems = data.elements;
+  const items = elems.map((ele) => {
+    return `
+    <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>
+    </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', () => {
+      const uuid = el.getAttribute('data-elem-name');
+      core.selectElement(uuid);
+    }, false);
+  });
+
+  upBtns.forEach((el) => {
+    el.addEventListener('click', () => {
+      const uuid = el.getAttribute('data-elem-btn-up');
+      core.moveUpElement(uuid);
+      renderElemens(core);
+    }, false);
+  });
+
+  downBtns.forEach((el) => {
+    el.addEventListener('click', () => {
+      const uuid = el.getAttribute('data-elem-btn-down');
+      core.moveDownElement(uuid);
+      renderElemens(core);
+    }, false);
+  })
+}
+

packages/core/example/main.js

@@ -1,6 +1,7 @@
 import data from './lib/data.js';
 import { doScale } from './lib/scale.js';
 import { doScroll } from './lib/scroll.js';
+import { doElemens } from './lib/element.js';
 
 const { Core } = window.iDraw;
 
@@ -24,4 +25,5 @@ const core = new Core(mount, {
 core.setData(data);
 doScale(core, defaultConf.scale);
 doScroll(core, defaultConf);
+doElemens(core);
 

packages/types/src/lib/element.ts

@@ -1,6 +1,7 @@
 import { TypePaintData } from './paint';
 
 type TypeElement<T extends keyof TypeElemDesc> = {
+  name?: string;
   uuid: string;
   x: number;
   y: number;