fix: bug

README.md

@@ -1,3 +1,3 @@
 # Dragon Totem
 
-H5 图像编排工具
+H5 图形编排工具

example/index.html

@@ -50,6 +50,7 @@ <h1>dragon-totem.js demo</h1>
         <button onclick="onClickLineHightSmaller()">行高 -0.1</button>
         <button onclick="onClickWidthBigger()">宽度 +2px</button>
         <button onclick="onClickWidthSmaller()">宽度 -2px</button>
+        <button onclick="onClickDestroy()">销毁</button>
       </div>
     </div>
     <link rel="stylesheet" href="../dist/umd/dragon-totem.css" />
@@ -132,6 +133,10 @@ <h1>dragon-totem.js demo</h1>
           width: f + 'px',
         })
       }
+
+      function onClickDestroy() {
+        graf.destory()
+      }
     </script>
   </body>
 </html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dragon-totem",
-  "version": "0.0.19",
+  "version": "0.0.24",
   "description": "H5图形编排工具",
   "main": "dist/node/index.js",
   "types": "dist/node/index.d.ts",

src/core/component/text-field.ts

@@ -68,7 +68,7 @@ export default class TextField {
 
     // 外层容器DOM对象
     const container = dragonTotem.container
-    this.container = container
+    this.container = container as any
 
     // 当前组件DOM对象
     this.document = document.createElement(tag)
@@ -129,7 +129,7 @@ export default class TextField {
   initMenu() {
     // 添加菜单
     let ul = document.createElement('ul')
-    ul.id = 'dragon-totem__menu'
+    ul.id = 'dragon-totem__menu_' + this.config.id
     ul.className = 'dragon-totem__menu'
     let li = document.createElement('li')
     let a = document.createElement('a')
@@ -166,6 +166,12 @@ export default class TextField {
       e.stopImmediatePropagation()
     }
 
+    span.oninput = (v) => {
+      // 监听输入改变 config里面的数据
+      const text = (v.target as any).innerText
+      this.config.text = text
+    }
+
     element.ondblclick = (e) => {
       this.stop()
       span.contentEditable = 'true'
@@ -279,6 +285,7 @@ export default class TextField {
    * @param sent 设置div在容器中可以被拖动的区域
    */
   onMoveOutBoundary(obj: HTMLElement, sent: Coordinate) {
+    const that = this
     let dmW = document.documentElement.clientWidth || document.body.clientWidth
     let dmH =
       document.documentElement.clientHeight || document.body.clientHeight
@@ -315,6 +322,8 @@ export default class TextField {
 
         obj.style.left = slideLeft + 'px'
         obj.style.top = slideTop + 'px'
+        that.config.x = slideLeft * that.dragonTotem.widthScale
+        that.config.y = slideTop * that.dragonTotem.heightScale
       }
       document.onmouseup = function () {
         document.onmousemove = null
@@ -360,6 +369,13 @@ export default class TextField {
    * 销毁
    */
   public destory() {
-    this.document.remove()
+    this.document.remove();
+    this.menu.remove();
+    setTimeout(() => {
+      (this.document as any) = null;
+      (this.menu as any) = null
+    }, 0);
+    (this.tag as any) = null;
+    (this.config as any) = null;
   }
 }

src/core/dragon-totem.ts

@@ -8,7 +8,7 @@ import { TextFieldConfig } from './interfaces/index';
  */
 export class DragonTotem {
   // 容器
-  container: HTMLElement;
+  container: HTMLElement | null;
   // 容器高度
   containerHeight = 0;
   // 容器高度/真实图片高度
@@ -18,11 +18,11 @@ export class DragonTotem {
   // 容器宽度/真实图片宽度
   widthScale = 0;
   // 内部元素管理
-  elementUiList: Array<{ id: number, componet: any }> = [];
+  elementUiList: Array<{ id: number, component: TextField }> = [];
   // 监听器
   listener = {}
   // 事件对象
-  event = new Events()
+  event: Events = new Events()
 
   constructor(id: string | HTMLElement, width = 0, height = 0) {
     let dom = null
@@ -94,7 +94,7 @@ export class DragonTotem {
 
     // 初始化li组件
     let id = that.elementUiList.length + 1
-    let componet = new TextField(that, 'li', {
+    let component = new TextField(that, 'li', {
       id,
       text,
       x,
@@ -112,15 +112,36 @@ export class DragonTotem {
       }),
     })
     // 渲染
-    componet.render()
-    that.elementUiList.push({ id, componet })
+    component.render()
+    that.elementUiList.push({ id, component })
   }
 
   /**
    * 监听
    * @param {*} name 事件
    */
   public on(name: string, fn: Function) {
-    this.event.on(name, fn)
+    if (this.event) {
+      this.event.on(name, fn)
+    }
+  }
+
+  /**
+   * 销毁
+   */
+  public destory() {
+    this.elementUiList.forEach(item => {
+      item.component.destory()
+    })
+    this.container?.setAttribute('class', '')
+    this.containerHeight = 0;
+    this.containerWidth = 0;
+    (this.event as any) = null
+    this.widthScale = 0;
+    this.listener = {}
+    setTimeout(() => {
+      this.container = null;
+      this.elementUiList = [];
+    }, 0);
   }
 }