fix：补充注释的监听事件以及 diagram组件修改

2022-07-14 11:31:03 +08:00
parent 73b71d578f
commit 5061a0dd37
6 changed files with 50 additions and 94 deletions
--- 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) {
--- 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
--- 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)
          }
        }
      }
--- 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)
--- 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>
--- 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