From 5061a0dd37431637dd66ea178478b9855c57707e Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Thu, 14 Jul 2022 11:31:03 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=20=E8=A1=A5=E5=85=85=E6=B3=A8?=
 =?UTF-8?q?=E9=87=8A=E7=9A=84=E7=9B=91=E5=90=AC=E4=BA=8B=E4=BB=B6=20?=
 =?UTF-8?q?=E4=BB=A5=E5=8F=8A=20diagram=E7=BB=84=E4=BB=B6=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/@topology/core/src/activeLayer.js  |   2 +-
 .../common/@topology/core/src/core.js         |  33 +++---
 .../common/@topology/core/src/divLayer.js     |   2 +-
 .../common/@topology/core/src/renderLayer.js  |   3 +-
 .../common/ChartDiagram/diagram.vue           | 101 +++++-------------
 .../components/common/project/topologyL5.vue  |   3 +-
 6 files changed, 50 insertions(+), 94 deletions(-)

diff --git a/nezha-fronted/src/components/common/@topology/core/src/activeLayer.js b/nezha-fronted/src/components/common/@topology/core/src/activeLayer.js
index bbb273789..f78094229 100644
--- a/nezha-fronted/src/components/common/@topology/core/src/activeLayer.js
+++ b/nezha-fronted/src/components/common/@topology/core/src/activeLayer.js
@@ -43,7 +43,7 @@ const ActiveLayer = /** @class */ (function (_super) {
     _this.dockWatchers = []
     _this.rotating = false
     Store.set(_this.generateStoreKey('LT:ActiveLayer'), _this)
-    // return _this
+    return _this
   }
   ActiveLayer.prototype.calcControlPoints = function () {
     if (this.pens.length === 1 && this.pens[0] instanceof Node) {
diff --git a/nezha-fronted/src/components/common/@topology/core/src/core.js b/nezha-fronted/src/components/common/@topology/core/src/core.js
index e3dd36826..317fc41c1 100644
--- a/nezha-fronted/src/components/common/@topology/core/src/core.js
+++ b/nezha-fronted/src/components/common/@topology/core/src/core.js
@@ -820,17 +820,17 @@ const Topology = /** @class */ (function () {
     Store.set(this.generateStoreKey('LT:fontColor'), this.options.fontColor || '#222222')
     this.setupDom(parent)
     this.setupSubscribe()
-    // this.setupMouseEvent()
+    this.setupMouseEvent()
     // Wait for parent dom load
-    // setTimeout(function () {
-    //   _this.canvasPos = _this.divLayer.canvas.getBoundingClientRect()
-    // }, 500)
-    // setTimeout(function () {
-    //   _this.canvasPos = _this.divLayer.canvas.getBoundingClientRect()
-    // }, 1000)
-    // this.cache()
+    setTimeout(function () {
+      _this.canvasPos = _this.divLayer.canvas.getBoundingClientRect()
+    }, 500)
+    setTimeout(function () {
+      _this.canvasPos = _this.divLayer.canvas.getBoundingClientRect()
+    }, 1000)
+    this.cache()
     window.topology = this
-    // this.dispatch('loaded')
+    this.dispatch('loaded')
   }
   Object.defineProperty(Topology.prototype, 'ramCaches', {
     // 内存中的 caches 数量
@@ -2959,12 +2959,6 @@ const Topology = /** @class */ (function () {
     this.subcribeAnimateMoved.unsubscribe()
     this.subcribeMediaEnd.unsubscribe()
     this.subcribeEmit.unsubscribe()
-    this.animateLayer.destroy()
-    this.divLayer.destroy()
-    this.canvas.destroy()
-    this.activeLayer.destroy()
-    this.hoverLayer.destroy()
-    this.offscreen.destroy()
     // document.body.removeChild(this.tipMarkdown)
     window.removeEventListener('resize', this.winResize)
     this.parentElem.removeEventListener('scroll', this.onScroll)
@@ -2975,9 +2969,15 @@ const Topology = /** @class */ (function () {
         document.removeEventListener('keydown', this.onkeydown)
         break
       case KeydownType.Canvas:
-        this.divLayer.canvas.removeEventListener('keydown', this.onkeydown)
+        this.divLayer.canvas && this.divLayer.canvas.removeEventListener('keydown', this.onkeydown)
         break
     }
+    this.animateLayer.destroy()
+    this.divLayer.destroy()
+    this.canvas.destroy()
+    this.activeLayer.destroy()
+    this.hoverLayer.destroy()
+    this.offscreen.destroy()
     this.closeSocket()
     this.closeMqtt()
     if (this.socketFn) {
@@ -2987,6 +2987,7 @@ const Topology = /** @class */ (function () {
     this.cache = null
     this.data = null
     console.log(this.options)
+    this.options.on = null
     window.topology = null
     this.activeLayer = null
     this.hoverLayer = null
diff --git a/nezha-fronted/src/components/common/@topology/core/src/divLayer.js b/nezha-fronted/src/components/common/@topology/core/src/divLayer.js
index 1f4b52e02..71ce29648 100644
--- a/nezha-fronted/src/components/common/@topology/core/src/divLayer.js
+++ b/nezha-fronted/src/components/common/@topology/core/src/divLayer.js
@@ -82,7 +82,7 @@ const DivLayer = /** @class */ (function (_super) {
             _this.setElemPosition(node, _this.gifs[node.id])
           } else {
             _this.addGif(node)
-            _this.setElemPosition(node, node.id)
+            _this.setElemPosition(node, node.img)
           }
         }
       }
diff --git a/nezha-fronted/src/components/common/@topology/core/src/renderLayer.js b/nezha-fronted/src/components/common/@topology/core/src/renderLayer.js
index 0f22af1b7..d78cb84df 100644
--- a/nezha-fronted/src/components/common/@topology/core/src/renderLayer.js
+++ b/nezha-fronted/src/components/common/@topology/core/src/renderLayer.js
@@ -24,7 +24,7 @@ const RenderLayer = /** @class */ (function (_super) {
     _this.options = options
     _this.render = function () {
       if (_this.data && _this.data.bkImage && !_this.bkImg) {
-        _this.loadBkImg(_this)
+        _this.loadBkImg(_this.render)
         return
       }
       if (!_this.width || !_this.height || !_this.offscreen) {
@@ -46,6 +46,7 @@ const RenderLayer = /** @class */ (function (_super) {
         _this.rule()
       }
       ctx.drawImage(_this.offscreen, 0, 0, _this.width, _this.height)
+      return _this
     }
     _this.offscreen = Store.get(_this.generateStoreKey('LT:offscreen'))
     _this.parentElem.appendChild(_this.canvas)
diff --git a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
index ece24ddfd..1c9c483ef 100644
--- a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
+++ b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
@@ -312,7 +312,8 @@
 </template>
 
 <script>
-import { Topology, registerNode } from '@topology/core'
+import { Topology, registerNode } from '@/components/common/@topology/core/index.js'
+import { Store as le5leStore } from 'le5le-store'
 import imgDefault from '@/components/common/project/L5/services/img'
 import {
   Tools,
@@ -327,7 +328,7 @@ import {
   myCubec,
   myCubeAnchors
 } from '../project/L5/services/canvas.js'
-import { getTopology, getTopologyImg, setTopology, setTopologyImg } from '../js/common'
+import { getTopology, setTopology, dealImg, topologyImg } from '../js/common'
 import CanvasProps from '../project/L5/CanvasProps'
 import topologyTopTool from '../project/L5/topologyTopTool'
 import popDataMain from '../project/popData/Main'
@@ -1592,7 +1593,7 @@ export default {
           this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
           this.uploadPicShow = false
           this.$get('monitor/project/topo/icon', { id: res.data.id }).then(iconInfo => {
-            this.dealImg(`monitor/project/topo/icon/${res.data.id}/1`).then((data, header) => {
+            dealImg(`monitor/project/topo/icon/${res.data.id}/1`).then((data, header) => {
               const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
               this.iconArray.push({
                 ...iconInfo.data.list[0],
@@ -1744,27 +1745,13 @@ export default {
           res.data.list.forEach((item, index) => {
             item.imageName = item.name
             delete item.name
-            const nowImage = getTopologyImg(item.id) ? JSON.parse(getTopologyImg(item.id)) : ''
-            if (nowImage && nowImage.data) {
-              console.log(nowImage)
-              promiseArr.push(nowImage)
-            } else {
-              promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.id}/1`))
-            }
+            promiseArr.push(topologyImg['img' + item.id] || dealImg(`monitor/project/topo/icon/${item.id}/1`, item.id))
             imgArr.push({ ...item })
           })
           Promise.all(promiseArr).then((res2, header) => {
             this.iconArray = [...res.data.list]
             this.iconArray.forEach((item, index) => {
               item.image = res2[index].data
-              const nowImage = getTopologyImg(item.id) ? JSON.parse(getTopologyImg(item.id)) : ''
-              if (!nowImage || (nowImage && !nowImage.data)) {
-                setTopologyImg(item.id, JSON.stringify({
-                  data: res2[index].data,
-                  width: res2[index].width,
-                  height: res2[index].height
-                }))
-              }
               const group = this.tools.find(tool => tool.group === item.unit)
               if (group) {
                 group.children.push({
@@ -1815,12 +1802,7 @@ export default {
           }
           imgidList.forEach((item, index) => {
             if (item.data.imageId && imageAllId.data.list.find(image => item.data.imageId === image.id)) {
-              const nowImage = getTopologyImg(item.data.imageId) ? JSON.parse(getTopologyImg(item.data.imageId)) : ''
-              if (nowImage && nowImage.data) {
-                promiseArr.push(nowImage)
-              } else {
-                promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}/1`))
-              }
+              promiseArr.push(topologyImg['img' + item.data.imageId] || dealImg(`monitor/project/topo/icon/${item.data.imageId}/1`, item.data.imageId))
             } else if (item.data.imageId) {
               promiseArr.push(imgDefault)
             } else {
@@ -1836,14 +1818,6 @@ export default {
             this.iconArray.forEach((item, index) => {
               if (item.id) {
                 item.image = res2[index].data
-                const nowImage = getTopologyImg(item.id) ? JSON.parse(getTopologyImg(item.id)) : ''
-                if (!nowImage || (nowImage && !nowImage.image)) {
-                  setTopologyImg(item.id, JSON.stringify({
-                    data: res2[index].data,
-                    width: res2[index].width,
-                    height: res2[index].height
-                  }))
-                }
               }
             })
             this.imgInit = true
@@ -1853,46 +1827,6 @@ export default {
       }
     },
 
-    dealImg (url) {
-      // 处理后端传过来的图片流乱码问题
-      if (url) {
-        return new Promise((resolve, reject) => {
-          this.$axios
-            .get(url)
-            .then((res) => {
-              const imageInfo = {
-                data: ('data:image/jpeg;base64,' + res.data),
-                // width: res.headers.width === -1 ? 100 : (res.headers.width > 900 ? 900 : res.headers.width),
-                // height: res.headers.height === -1 ? 100 : (res.headers.height > 900 ? 900 : res.headers.height)
-                width: (res.headers.width === -1 || res.headers.width === 0) ? 100 : Number(res.headers.width),
-                height: (res.headers.height === -1 || res.headers.height === 0) ? 100 : Number(res.headers.height)
-              }
-              if (imageInfo.width > 900 || imageInfo.height > 900) {
-                if (imageInfo.height > imageInfo.width) {
-                  imageInfo.width = imageInfo.width * 900 / imageInfo.height
-                  imageInfo.height = 900
-                } else if (imageInfo.height < imageInfo.width) {
-                  imageInfo.height = imageInfo.height * 900 / imageInfo.width
-                  imageInfo.width = 900
-                } else {
-                  imageInfo.height = 900
-                  imageInfo.width = 900
-                }
-              }
-              return imageInfo
-            })
-            .then(data => {
-              resolve(data)
-              // changeImage(data,(img)=>{
-              //   resolve(img)
-              // })
-            })
-            .catch(err => {
-            })
-        })
-      }
-    },
-
     delPen (obj) { // 删除元素
       getTopology(this.topologyIndex).delete(obj)
       this.props = {
@@ -2249,16 +2183,35 @@ export default {
       }
     }
   },
-  destroyed () {
+  beforeDestroy () {
+    if (this.timer) {
+      clearInterval(this.timer)
+      this.timer = null
+    }
+    if (this.timer4) {
+      clearInterval(this.timer4)
+      this.timer4 = null
+    }
     if (getTopology(this.topologyIndex)) {
       getTopology(this.topologyIndex).destroy()
+      const StoreData = le5leStore.get()
+      Object.keys(StoreData).forEach(key => {
+        const id = key.split('-')[0]
+        if (getTopology(this.topologyIndex).id == id) {
+          le5leStore.set(key, null)
+          delete StoreData[key]
+        }
+      })
+      Object.keys(getTopology(this.topologyIndex)).forEach(key => {
+        getTopology(this.topologyIndex)[key] = null
+      })
       setTopology(this.topologyIndex, null)
     }
     if (document.getElementById('topology-canvas' + this.topologyIndexF)) {
       document.getElementById('topology-canvas' + this.topologyIndexF).removeEventListener('mousemove', this.canvasMove)
     }
     window.removeEventListener('resize', this.winResize)
-    window.removeEventListener('resize', this.contextmenuNone)
+    window.removeEventListener('click', this.contextmenuNone)
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index 4558d056c..0777ec4ad 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -354,6 +354,7 @@ import {
   myCubeAnchors
 } from './L5/services/canvas.js'
 import { getTopology, setTopology, dealImg, topologyImg } from '../js/common'
+
 import CanvasProps from './L5/CanvasProps'
 import topologyTopTool from './L5//topologyTopTool'
 import CanvasContextMenu from './L5/CanvasContextMenu'
@@ -782,7 +783,7 @@ export default {
           return
         }
         if (!getTopology(this.topologyIndex)) {
-          let canvas = new Topology('topology-canvas' + this.topologyIndexF)
+          let canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
           // canvas.open(data)
           setTopology(this.topologyIndex, canvas)
           canvas = null