fix：处理自定义图形 ，图片与文字，显示位置相关的问题

nezha-fronted/src/components/common/project/L5/CanvasProps.vue

@@ -1424,7 +1424,7 @@ export default {
     // 'topologyData.data':{
     //   handler(n){
     //     setTimeout(()=>{
-    //       let dataOption=getTopology(this.index).data;
+    //       let dataOption=getTopology(this.index).data();
     //       Object.keys(this.topologyData.data).forEach((key)=>{
     //         dataOption[key]=this.topologyData.data[key];
     //       });
@@ -1472,7 +1472,7 @@ export default {
     }
   },
   created () {
-    const dataOption = this.index == -2 ? getTopology(-1).data : getTopology(this.index).data
+    const dataOption = this.index == -2 ? getTopology(-1).data : getTopology(this.index).data()
     if (!dataOption.data) {
       dataOption.data = {}
     }
@@ -1686,7 +1686,7 @@ export default {
     },
     changeTopologyOpt (val, key, isColor) {
       //
-      // getTopology(this.index).data[key]=val;
+      // getTopology(this.index).data()[key]=val;
       // getTopology(this.index).render();
       if (isColor) {
         this.topologyData.data[key] = this.colorRGBtoHex(val)
@@ -1695,9 +1695,9 @@ export default {
       }
       Object.keys(this.topologyData.data).forEach((key1) => {
         if (key1 === 'projectInfo' || key1 === 'alertInfo' || key1 === 'fontSize' || key1 === 'align' || key1 === 'fontColor' || key1 === 'opacity') {
-          getTopology(this.index).data.data[key1] = this.topologyData.data[key1]
+          getTopology(this.index).data().data[key1] = this.topologyData.data[key1]
         } else {
-          getTopology(this.index).data[key1] = this.topologyData.data[key1]
+          getTopology(this.index).data()[key1] = this.topologyData.data[key1]
         }
       })
       getTopology(this.index).render()

nezha-fronted/src/components/common/project/L5/services/canvas.js

@@ -240,8 +240,20 @@ export function rectangleImg (ctx, pen) {
   }
   // 必须判空再填充
   (pen.fillStyle || pen.bkType) && ctx.fill()
-  pen.iconHeight = pen.height - 30
-  console.log(pen)
+  console.log(pen, pen.calculative.worldIconRect)
+  pen.calculative.worldIconRect = {
+    height: pen.height - 10 - 20,
+    rotate: 0,
+    width: pen.width - 10,
+    x: pen.x + 5,
+    y: pen.y + 5
+  }
+  pen.calculative.worldTextRect = {
+    height: 20,
+    width: pen.width - 10,
+    x: pen.x + 5,
+    y: pen.y + pen.height - 5 - 20
+  }
   // pen.iconRect = new Rect(pen.x + pen.paddingLeft, pen.y + pen.paddingTop, pen.width - (pen.paddingLeft + pen.paddingRight), pen.height - 20 - (pen.paddingTop + pen.paddingBottom))
   // pen.fullIconRect = { width: 80, height: 90, center: { x: 972, y: 456 }, ex: 1012, ey: 496 }
   ctx.stroke()
@@ -253,7 +265,7 @@ export function rectangleImgAnchors (pen) {
     id: '0',
     penId: pen.id,
     x: pen.x,
-    y: pen.y + pen.height / 4
+    y: pen.y + pen.height / 2
   })
   anchors.push({
     id: '1',
@@ -273,6 +285,12 @@ export function rectangleImgAnchors (pen) {
     x: pen.x + pen.width / 2,
     y: pen.y + pen.height
   })
+  anchors.push({
+    id: '4',
+    penId: pen.id,
+    x: pen.x,
+    y: pen.y + pen.height / 8
+  })
   return anchors
   // pen.anchors.push(new Point(pen.x, pen.y + pen.height / 2, Direction.Left))
   // pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y, Direction.Up))
@@ -369,34 +387,9 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
       connectedLines: pen.connectedLines || [],
       image: pen.image
     }
-    console.log(pen.connectedLines)
   } else {
-    const anchors = [s16(), s16()]
     const width = pen.from.x - pen.to.x
     const height = pen.from.y - pen.to.y
-    // if (pen.from) {
-    //   console.log('from')
-    //   const find = allPen.find(item => item.id == pen.from.id)
-    //   if (!find.connectedLines) {
-    //     find.connectedLines = []
-    //   }
-    //   find.connectedLines.push({
-    //     anchor: pen.from.anchorIndex,
-    //     lineAnchor: pen.id + '-0',
-    //     lineId: pen.id
-    //   })
-    // }
-    // if (pen.to) {
-    //   const find = allPen.find(item => item.id == pen.to.id)
-    //   if (!find.connectedLines) {
-    //     find.connectedLines = []
-    //   }
-    //   find.connectedLines.push({
-    //     anchor: pen.to.anchorIndex,
-    //     lineAnchor: pen.id + '-1',
-    //     lineId: pen.id
-    //   })
-    // }
     obj = {
       id: pen.id,
       tags: [

nezha-fronted/src/components/common/project/topologyL5.vue

@@ -728,7 +728,7 @@ export default {
         getTopology(this.topologyIndex).open(data)
         // getTopology(this.topologyIndex).lock(1)
         this.objChange = false
-        let flag = false
+        const flag = false
         const position = {
           x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
           y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
@@ -736,7 +736,7 @@ export default {
         this.oldScale = getTopology(this.topologyIndex).data().scale
         getTopology(this.topologyIndex).data().pens.forEach(item => {
           if (flag) {
-            return
+
           }
           // if (item.ex > position.x || item.ey > position.y) {
           //   if (this.fromOverView) {
@@ -826,7 +826,7 @@ export default {
         getTopology(this.topologyIndex).register(sequencePens())
         getTopology(this.topologyIndex).registerCanvasDraw(sequencePensbyCtx())
         getTopology(this.topologyIndex).registerCanvasDraw(formPens())
-        getTopology(this.topologyIndex).registerCanvasDraw({ rectangleImg })
+        getTopology(this.topologyIndex).registerCanvasDraw({ rectangleImg: rectangleImg })
         getTopology(this.topologyIndex).registerAnchors({ rectangleImg: rectangleImgAnchors })
         this.getModule()// 获取module
         resolve()
@@ -840,7 +840,7 @@ export default {
         }
         this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => {
           console.log(JSON.stringify(res.data.topo))
-          
+          res.data.topo.oldData = 1
           if (!res.data) {
             return
           }
@@ -1152,6 +1152,7 @@ export default {
       let arr = []
       this.offsetX = getTopology(this.topologyIndex).data().x
       this.offsetY = getTopology(this.topologyIndex).data().y
+      console.log(this.offsetX, this.offsetY)
       arr = getTopology(this.topologyIndex).data().pens.filter(item => {
         if (!item.data) {
           item.data = {
@@ -1169,8 +1170,8 @@ export default {
       // 打开动画 是否更新顶部图标
       this.nodesArr = arr.map(item => {
         return {
-          x:item.x,
-          y:item.y,
+          x: item.x,
+          y: item.y,
           width: item.width,
           data: item.data
         }
@@ -1250,17 +1251,16 @@ export default {
         this.dragFlag = true
         clearTimeout(timer)
       }, 100)
-      event.dataTransfer.setData('Text', JSON.stringify({ ...node.data, data: { imageId: node.data.imageId } }))
+      console.log(node)
+      event.dataTransfer.setData('Text', JSON.stringify({ ...node.data, ...node.data.rect, data: { imageId: node.data.imageId } }))
     },
     dragFlagChange (node) {
-      getTopology(this.topologyIndex).addNode(
+      getTopology(this.topologyIndex).addPen(
         {
           ...node.data,
-          rect: {
-            ...node.data.rect,
-            x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth / 2 - 50,
-            y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight / 2 - 50
-          },
+          ...node.data.rect,
+          x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth / 2 - 50,
+          y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight / 2 - 50,
           data: { imageId: node.data.imageId }
         })
       const timer = setTimeout(() => {