NEZ-2034 fix：优化 缩放相关 导致的位置不正确的问题

nezha-fronted/src/components/common/nezhaColor.vue

@@ -100,11 +100,11 @@ export default {
     if (!this.isTopo) {
       this.keyName = this.valueArr[0].name
       this.colors = this.valueArr[0].value || randomcolor() + 'FF'
+      this.$emit('colorChange', this.colors, this.keyName)
     } else {
       this.keyName = this.valueArr[0].name
       this.colors = this.valueArr[0].value
     }
-    this.$emit('colorChange', this.colors, this.keyName)
   },
   methods: {
     updateValue (color) {

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

@@ -1448,7 +1448,6 @@ export default {
     },
     'selection.pen.data': {
       handler (n, o) {
-        // this.loading = false
         if (this.selection.pen && JSON.stringify(this.selection.pen.type) && (JSON.stringify(n) !== JSON.stringify(o)) && o) {
           this.$emit('change', this.selection.pen)
         }

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

@@ -5,23 +5,23 @@ export const Tools = [
   {
     group: 'General',
     children: [
-      {
+      // {
-        name: 'rectangle',
+      //   name: 'rectangle',
-        icon: 'icon-cube',
+      //   icon: 'icon-cube',
-        data: {
+      //   data: {
-          rect: {
+      //     rect: {
-            width: 100,
+      //       width: 100,
-            height: 100
+      //       height: 100
-          },
+      //     },
-          is3D: true,
+      //     is3D: true,
-          z: 20,
+      //     z: 20,
-          zRotate: 15,
+      //     zRotate: 15,
-          name: 'myCube',
+      //     name: 'myCube',
-          iconFamily: 'topology',
+      //     iconFamily: 'topology',
-          iconColor: '#777',
+      //     iconColor: '#777',
-          iconSize: 30
+      //     iconSize: 30
-        }
+      //   }
-      },
+      // },
       {
         name: 'rectangle',
         icon: 'icon-rect',
@@ -142,19 +142,18 @@ export const imageTemp = {
   icon: 'icon-image',
   data: {
     type: 0,
-    rect: {
+    x: 922,
-      x: 922,
+    y: 406,
-      y: 406,
+    width: 100,
-      width: 100,
+    height: 100,
-      height: 100
-    },
     imageRatio: false,
     lineWidth: 0,
     rotate: 0,
     offsetRotate: 0,
     globalAlpha: 1,
-    dash: 0,
+    lineDash: [],
-    strokeStyle: '#000000',
+    color: '#000000',
+    background: '#ffffff00',
     animatePos: 0,
     name: 'rectangleImg',
     lineDashOffset: 0,
@@ -200,8 +199,9 @@ export const imageTemp2 = {
     rotate: 0,
     offsetRotate: 0,
     globalAlpha: 1,
-    dash: 0,
+    lineDash: [],
-    strokeStyle: '#000000',
+    color: '#000000',
+    background: '#ffffff00',
     animatePos: 0,
     name: 'rectangleImg2',
     lineDashOffset: 0,
@@ -261,7 +261,6 @@ export function rectangleImg (ctx, pen) {
 }
 export function rectangleImgAnchors (pen) {
   const anchors = []
-  // console.log(pen)
   anchors.push({
     id: '0',
     penId: pen.id,
@@ -304,6 +303,8 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
     obj = {
       id: pen.id,
       data: pen.data,
+      keepDecimal: 2,
+      scale: 1,
       valueMapping: pen.valueMapping,
       tags: [
 
@@ -396,10 +397,12 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
     const height = pen.from.y - pen.to.y
     obj = {
       id: pen.id,
+      keepDecimal: 2,
       tags: [
 
       ],
       name: 'line',
+      scale: 1,
       lineName: pen.name,
       type: pen.type,
       autoPolyline: true,

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

@@ -98,7 +98,7 @@ export default {
     }
   },
   mounted () {
-    const dataOption = getTopology(this.index).data
+    const dataOption = getTopology(this.index).store.data
     Object.keys(this.option).forEach(key => {
       if (key === 'scale') {
         this.scaleNum = (JSON.stringify(dataOption[key]) ? parseInt(dataOption[key] * 100) : this.scaleNum)
@@ -112,7 +112,6 @@ export default {
       // getTopology(this.index).data[key] = this.option[key]
       const obj = {}
       obj[key] = this.option[key]
-      console.log(obj)
       if (key === 'grid') {
         getTopology(this.index).setGrid(obj)
       } else {
@@ -144,7 +143,7 @@ export default {
     },
     scale (val) {
       this.scaleNum = val
-      getTopology(this.index).scaleTo(val / 100)
+      getTopology(this.index).scale(val / 100)
     },
     del () {
       const delObj = this.selection.pen ? [this.selection.pen] : this.selection.pens

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

@@ -1197,359 +1197,6 @@ export default {
         clearTimeout(timer)
       }, 100)
     },
-
-    onMessage (event, data, e) {
-      // console.log('onMessage', event, data)
-      // console.log(getTopology(this.topologyIndex))
-      this.notModuleIDArr = []
-      // this.toolShow.attr = false
-      // this.toolShow.topTool = false
-      // this.$nextTick(() => {
-      //   this.toolShow.attr = true
-      //   this.toolShow.topTool = true
-      // })
-      if (data) {
-        this.notModuleIDArr.forEach(item => {
-          if (item.id === data.id) {
-            item.rect = data.rect
-          }
-        })
-      }
-      if (!Array.isArray(data) && data) { // 判断不是数组 提前个data配置好节点属性
-        if (data.type === 0 && !data.data.moduleId) {
-          if (!data.fillStyle) {
-            data.fillStyle = '#FFFFFF00'
-          }
-          data.data = {
-            moduleId: '',
-            moduleName: '',
-            show: false,
-            error: false,
-            animatePlay: false,
-            fillStyle: data.fillStyle || '#ffffff',
-            strokeStyle: data.strokeStyle || '#ffffff',
-            gradientColor: '#bae7ff',
-            gradientType: 0,
-            lineWidth: this.nodeDefaultWidth(data.name),
-            iconToolState: true,
-            // chart 配置项
-            valueMapping: [{
-              color: {
-                line: '#000000',
-                fill: '#ffffff',
-                text: '#000000'
-              },
-              value: 'base',
-              animateType: 'base',
-              level: 0,
-              base: true
-            }],
-            valueMappingSort: 'asc',
-            expressArr: [''],
-            expressAllArr: [''],
-            legends: [''],
-            legendsAll: [''],
-            tooltipShow: true,
-            valueMappingShow: true,
-            panelName: 'topologyName',
-            unit: 2,
-            type: 'line',
-            displayChart: true,
-            aggregation: 'last',
-            title: '',
-            url: '',
-            ...data.data
-          }
-        } else if (data.type == 1 && !data.data) {
-          // 连线是否自动计算锚点
-          // data.manualCps=true;
-          data.animateColor = '#FA901C'
-          data.toArrowColor = '#000000'
-          data.data = {
-            animatePlay: false,
-            strokeStyle: data.strokeStyle,
-            animateColor: data.animateColor,
-            arrowColor: '#000000',
-            fromArrowColor: '#000000',
-            toArrowColor: '#000000',
-            lineWidth: 1,
-            // chart 配置项
-            valueMapping: [{
-              color: {
-                line: '#000000',
-                fill: '#ffffff',
-                text: '#000000'
-              },
-              value: 'base',
-              animateType: 'base',
-              level: 0,
-              base: true
-            }],
-            valueMappingSort: 'asc', /* desc */
-            expressArr: [''],
-            expressAllArr: [''],
-            legends: [''],
-            legendsAll: [''],
-            tooltipShow: true,
-            valueMappingShow: true,
-            panelName: 'topologyName',
-            unit: 2,
-            type: 'line',
-            displayChart: true,
-            aggregation: 'last',
-            title: '',
-            moduleName: '',
-            url: ''
-          }
-        }
-        if (data.type === 0 || data.type === 1) {
-          data.lineWidth = data.data.lineWidth
-        }
-      }
-
-      switch (event) {
-        case 'moveInNode':
-        case 'moveInLine':
-          if (this.timer3) {
-            clearTimeout(this.timer3)
-            this.timer3 = null
-          }
-          this.chartData = { ...data.data, ...this.chartGetData.find(item => item.id === data.id) }
-          this.tooltipPosition.show = false
-          const timer = setTimeout(() => {
-            this.tooltipPosition.show = true
-            let ePosition = window.ePosition
-            let boxWidth = document.getElementsByClassName('page')[0].offsetWidth
-            let boxHeight = document.getElementsByClassName('page')[0].offsetHeight
-            this.tooltipPosition.left = ePosition.layerX + 20
-            this.tooltipPosition.top = ePosition.layerY
-            this.$nextTick(() => {
-              if (this.$refs.topoTooltip) {
-                if ((boxWidth / 2) > ePosition.layerX) {
-                  this.tooltipPosition.left = ePosition.layerX + 20
-                } else {
-                  this.tooltipPosition.left = ePosition.layerX - 20 - this.$refs.topoTooltip.offsetWidth
-                }
-                if (boxHeight > (ePosition.layerY + this.$refs.topoTooltip.offsetHeight)) {
-                  this.tooltipPosition.top = ePosition.layerY
-                } else {
-                  this.tooltipPosition.top = ePosition.layerY - this.$refs.topoTooltip.offsetHeight
-                }
-              }
-              ePosition = null
-              boxWidth = null
-              boxHeight = null
-            })
-            clearTimeout(timer)
-          }, 100)
-          break
-        case 'moveOutNode':
-        case 'moveOutLine':
-          // this.tooltipPosition.show=false;
-          // return
-          if (!this.timer3) {
-            this.timer3 = setTimeout(() => {
-              this.tooltipPosition.show = false
-              this.timer3 = null
-            }, 50)
-          } else {
-            clearTimeout(this.timer3)
-            this.timer3 = setTimeout(() => {
-              this.tooltipPosition.show = false
-              this.timer3 = null
-            }, 50)
-          }
-          break
-      }
-      // 右侧输入框编辑状态时点击编辑区域其他元素，onMessage执行后才执行onUpdateProps方法，通过setTimeout让onUpdateProps先执行
-      const timer = setTimeout(() => {
-        switch (event) {
-          case 'node':
-          case 'addNode':
-            this.modulesDiff(data)
-            if (data.data.expressArr.length === 0 && event !== 'node') {
-              data.data.expressArr.push('')
-              data.data.legends.push('')
-            }
-            if (data.data.expressAllArr.length === 0 && event !== 'node') {
-              data.data.expressAllArr.push('')
-              data.data.legendsAll.push('')
-            }
-            this.props = {
-              node: data,
-              line: null,
-              multi: false,
-              expand: this.props.expand,
-              nodes: null,
-              locked: data.locked,
-              pen: data,
-              pens: null
-            }
-            this.$nextTick(() => {
-              if (this.$refs.CanvasProps) {
-                if (this.penId !== data.id) {
-                  this.$refs.CanvasProps.tab = '1'
-                }
-                this.penId = data.id
-              }
-            })
-            this.$refs.CanvasProps && (this.$refs.CanvasProps.loading = true)
-            break
-          case 'line':
-          case 'addLine':
-            this.props = {
-              node: null,
-              line: data,
-              multi: false,
-              nodes: null,
-              locked: data.locked,
-              pen: data,
-              pens: null
-            }
-            this.$nextTick(() => {
-              if (this.$refs.CanvasProps) {
-                if (this.penId !== data.id) {
-                  this.$refs.CanvasProps.tab = '1'
-                }
-                this.penId = data.id
-              }
-            })
-            this.$refs.CanvasProps && (this.$refs.CanvasProps.loading = true)
-            break
-          case 'multi':
-            this.props = {
-              node: null,
-              line: null,
-              multi: true,
-              nodes: data.length > 1 ? data : null,
-              locked: this.getLocked({ nodes: data }),
-              pen: null,
-              pens: data.length > 1 ? data : null
-            }
-            break
-          case 'space':
-            this.penId = undefined
-            this.props = {
-              node: null,
-              line: null,
-              multi: false,
-              nodes: null,
-              locked: false,
-              pen: null,
-              pens: null
-            }
-            break
-          case 'moveOut':
-            break
-          case 'moveNodes':
-          case 'resizeNodes':
-            if (data.length > 1) {
-              this.props = {
-                node: null,
-                line: null,
-                multi: true,
-                nodes: data,
-                locked: this.getLocked({ nodes: data }),
-                pen: null,
-                pens: null
-              }
-            } else {
-              this.props = {
-                node: data[0],
-                line: null,
-                multi: false,
-                nodes: null,
-                locked: false,
-                pen: data[0],
-                pens: null
-              }
-            }
-            break
-          case 'resize': {
-            let dom = document.getElementById('topology-canvas' + this.topologyIndexF)
-            let domRect = dom ? dom.getBoundingClientRect() : {}
-            if (getTopology(this.topologyIndex)) {
-              getTopology(this.topologyIndex).canvasPos = domRect
-            }
-            dom = null
-            domRect = null
-            break
-          }
-          case 'scale': {
-            if (this.$refs.topTool) {
-              this.$refs.topTool.scaleNum = parseInt(data * 100)
-            }
-            let dom = document.getElementById('topology-canvas' + this.topologyIndexF)
-            let domRect = dom ? dom.getBoundingClientRect() : {}
-            if (getTopology(this.topologyIndex)) {
-              getTopology(this.topologyIndex).canvasPos = domRect
-            }
-            dom = null
-            domRect = null
-            break
-          }
-          case 'locked': {
-            this.props = {
-              node: null,
-              line: null,
-              multi: false,
-              nodes: null,
-              locked: false,
-              pen: null,
-              pens: null
-            }
-            break
-          }
-          case 'delete': {
-            this.props = {
-              node: null,
-              line: null,
-              multi: false,
-              nodes: null,
-              locked: false,
-              pen: null,
-              pens: null
-            }
-            break
-          }
-        }
-        switch (event) {
-          case 'node':
-          case 'line':
-          case 'space':
-          case 'scale':
-          case 'translate':
-            this.moduleId = ''
-            this.showNodeTools('')
-            this.popDataShowUpdate('', false)
-            if (!this.editTopologyFlag) {
-              getTopology(this.topologyIndex)
-            }
-            break
-        }
-        switch (event) {
-          case 'space':
-          case 'scale':
-          case 'translate':
-            this.getNodesArr()
-            // if(!this.timer2){
-            //   this.timer2=setTimeout(()=>{
-            //     this.getNodesArr();
-            //     this.timer2=null
-            //   },300)
-            // }else{
-            //   clearTimeout(this.timer2);
-            //   this.timer2=setTimeout(()=>{
-            //     this.getNodesArr();
-            //     this.timer2=null
-            //   },300)
-            // }
-            break
-        }
-        clearTimeout(timer)
-      }, 0)
-    },
-
     getLocked (data) {
       let locked = true
       if (data.nodes && data.nodes.length) {
@@ -2260,7 +1907,7 @@ export default {
       this.uploadPicShow = true
     },
     zoomMap (num) {
-      getTopology(this.topologyIndex).scaleTo(getTopology(this.topologyIndex).data.scale + num)
+      getTopology(this.topologyIndex).scale(getTopology(this.topologyIndex).data.scale + num)
     },
     penToBottom () {
       getTopology(this.topologyIndex).bottom()

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

@@ -365,7 +365,7 @@ import {
   // myIconRect,
   // myTextRect,
   onChangeAnimate,
-  onChangeAnimateLine,
+  onChangeAnimateLine
   // myCubec,
   // myCubeAnchors
 } from './L5/services/canvas.js'
@@ -682,7 +682,7 @@ export default {
         return new Promise((resolve, reject) => {
           Promise.all(arr).then((res) => {
             this.chartGetData[index].res = JSON.parse(JSON.stringify(this.computeData(res, pen.data.aggregation, pen)))
-            this.setAnimation(pen, this.chartGetData[index].res, data.oldData)
+            this.setAnimation(pen, this.chartGetData[index].res, !data.newData)
             resolve()
           })
         })
@@ -713,7 +713,6 @@ export default {
         if (!getTopology(this.topologyIndex)) {
           return
         }
-        console.log(data)
         getTopology(this.topologyIndex).open(data)
         getTopology(this.topologyIndex).lock(1)
         this.objChange = false
@@ -730,12 +729,17 @@ export default {
           if (item.x + item.width > position.x || item.y + item.height > position.y) {
             if (this.fromOverView) {
               getTopology(this.topologyIndex).fitView(20)
+              getTopology(this.topologyIndex).centerView()
+            } else {
+              getTopology(this.topologyIndex).centerView()
             }
             flag = true
           }
         })
         if (!flag) {
-          getTopology(this.topologyIndex).centerView()
+          setTimeout(() => {
+            getTopology(this.topologyIndex).centerView()
+          })
         }
         getTopology(this.topologyIndex).resize()
         this.penToolTipScale = getTopology(this.topologyIndex).data().scale
@@ -793,7 +797,6 @@ export default {
           return
         }
         data = this.$loadsh.cloneDeep(data)
-        console.log(Option)
         const canvasOptions = {
           rotateCursor: '/static/roteCursor.cur',
           disableEmptyLine: true,
@@ -814,23 +817,22 @@ export default {
           // getTopology(this.topologyIndex).open(data)
         }
         this.topologyLoading = false
-        // getTopology(this.topologyIndex).register(flowPens())
+        getTopology(this.topologyIndex).register(flowPens())
-        // getTopology(this.topologyIndex).register(activityDiagram())
+        getTopology(this.topologyIndex).register(activityDiagram())
-        // getTopology(this.topologyIndex).register(classPens())
+        getTopology(this.topologyIndex).register(classPens())
-        // getTopology(this.topologyIndex).register(sequencePens())
+        getTopology(this.topologyIndex).register(sequencePens())
-        // getTopology(this.topologyIndex).registerCanvasDraw(sequencePensbyCtx())
+        getTopology(this.topologyIndex).registerCanvasDraw(sequencePensbyCtx())
-        // getTopology(this.topologyIndex).registerCanvasDraw(formPens())
+        getTopology(this.topologyIndex).registerCanvasDraw(formPens())
         getTopology(this.topologyIndex).registerCanvasDraw({ rectangleImg: rectangleImg })
-        // getTopology(this.topologyIndex).registerAnchors({ rectangleImg: rectangleImgAnchors })
+        getTopology(this.topologyIndex).registerAnchors({ rectangleImg: rectangleImgAnchors })
         getTopology(this.topologyIndex).on('translate', this.topTranslate) // 平移·
         getTopology(this.topologyIndex).on('active', this.pensActive) // 选中·
-        getTopology(this.topologyIndex).on('scale', () => {}) // 缩放·
+        getTopology(this.topologyIndex).on('scale', this.topoScale) // 缩放·
         getTopology(this.topologyIndex).on('translatePens', () => {}) // 移动画笔结束·
         getTopology(this.topologyIndex).on('translatingPens', () => {}) // 移动画笔进行中·
         getTopology(this.topologyIndex).on('add', this.appPen) // 添加新画笔·
         getTopology(this.topologyIndex).on('click', this.topoClick) // click画笔·
         getTopology(this.topologyIndex).store.options.autoAnchor = true
-        // getTopology(this.topologyIndex).on('contextmenu', this.onContextMenu) // 添加新画笔·
         this.getModule()// 获取module
         resolve()
       })
@@ -842,11 +844,9 @@ export default {
           resolve(this.topoPrevDataS)
         }
         this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => {
-          console.log(JSON.stringify(res.data.topo))
           if (!res.data) {
             return
           }
-          res.data.topo && (res.data.topo.oldData = 0)
           let data = JSON.parse(JSON.stringify(res.data.topo))
           if (!res.data.topo || !res.data.topo.pens.length) {
             this.showNoData = true
@@ -934,16 +934,14 @@ export default {
                   item.data.state.alert = false
                 }
               })
-              if (res.data.topo.oldData == 1) {
+              if (!res.data.topo.newData) {
                 data.pens = this.$loadsh.orderBy(data.pens, 'type', 'desc') // 先处理线 再处理点 因为新版本 将连线开始结束放在的 点上控制
-                console.log(data.pens[0])
                 data.pens = data.pens.map(item => {
                   if (item.type === 0) {
                     item = disposeTopoOldData(item, data.pens)
                   } else {
                     // promiseArr.push({ type: 1 })
                     if (item.from) {
-                      console.log('from')
                       const find = data.pens.find(item1 => item1.id == item.from.id)
                       if (!find.connectedLines) {
                         find.connectedLines = []
@@ -955,7 +953,6 @@ export default {
                       })
                     }
                     if (item.to) {
-                      console.log('from')
                       const find = data.pens.find(item1 => item1.id == item.to.id)
                       if (!find.connectedLines) {
                         find.connectedLines = []
@@ -972,7 +969,6 @@ export default {
                 })
                 data.pens = this.$loadsh.orderBy(data.pens, 'type', 'asc')
               }
-              console.log(data.pens)
               if (!data.data) {
                 this.projectInfoShow = true
                 this.projectAlertShow = true
@@ -1007,7 +1003,6 @@ export default {
                   }
                 })
                 this.saveData = JSON.parse(JSON.stringify(data))
-                console.log(JSON.stringify(data))
                 resolve(data)
                 clearInterval(this.timer4)
                 this.timer4 = null
@@ -1161,7 +1156,6 @@ 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 = {
@@ -1260,7 +1254,6 @@ export default {
         this.dragFlag = true
         clearTimeout(timer)
       }, 100)
-      console.log(node)
       event.dataTransfer.setData('Text', JSON.stringify({ ...node.data, ...node.data.rect, data: { imageId: node.data.imageId } }))
     },
     dragFlagChange (node) {
@@ -1556,9 +1549,7 @@ export default {
             break
           }
           case 'scale': {
-            if (this.$refs.topTool) {
+
-              this.$refs.topTool.scaleNum = parseInt(data * 100)
-            }
             let dom = document.getElementById('topology-canvas' + this.topologyIndexF)
             let domRect = dom ? dom.getBoundingClientRect() : {}
             if (getTopology(this.topologyIndex)) {
@@ -1652,8 +1643,7 @@ export default {
       return locked
     },
 
-    onUpdateProps (node) {
+    onUpdateProps (node) { // 更新pen
-      console.log(node)
       getTopology(this.topologyIndex).setValue(node)
     },
 
@@ -2026,14 +2016,8 @@ export default {
           }
           getTopology(this.topologyIndex)._setValue(item)
         })
-        getTopology(this.topologyIndex).caches = {
+        getTopology(this.topologyIndex).render(true)
-          index: 0,
+        getTopology(this.topologyIndex).centerView()
-          list: [JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data()))]
-        }
-        getTopology(this.topologyIndex).render()
-        const dom = document.getElementById('topology-canvas' + this.topologyIndexF)
-        const domRect = dom ? dom.getBoundingClientRect() : {}
-        getTopology(this.topologyIndex).canvasPos = domRect
         clearTimeout(timer)
       })
     },
@@ -2067,7 +2051,7 @@ export default {
       this.editTopologyFlag = true
       this.showNoData = false
       const topologyData = getTopology(this.topologyIndex).data()
-      topologyData.oldData = 0
+      topologyData.newData = 1
       let flag = true
       const arr = []
       this.notModuleIDArr = []
@@ -2341,7 +2325,7 @@ export default {
       this.uploadPicShow = true
     },
     zoomMap (num) {
-      getTopology(this.topologyIndex).scaleTo(getTopology(this.topologyIndex).data().scale + num)
+      getTopology(this.topologyIndex).scale(getTopology(this.topologyIndex).data().scale + num)
     },
     penToBottom () {
       getTopology(this.topologyIndex).bottom()

nezha-fronted/src/components/common/project/topologyMixin.js

@@ -6,6 +6,7 @@ export default {
   },
   methods: {
     appPen (pen) {
+      this.modulesDiff()
       const data = pen[0]
       if (data.type === 0 && !data.data.moduleId) {
         data.background = '#FFFFFF00'
@@ -105,29 +106,41 @@ export default {
       }
     },
     pensActive (pens) {
-      console.log(pens)
+      this.props = {
-      if (!pens.length) return
+        node: null,
-      if (pens.length == 1) {
+        line: null,
-        this.props = {
+        multi: false,
-          line: null,
+        expand: null,
-          multi: false,
+        nodes: null,
-          expand: this.props.expand,
+        locked: null,
-          nodes: null,
+        pen: null,
-          locked: pens[0].locked,
+        pens: null
-          pen: pens[0],
-          pens: pens
-        }
-      } else {
-        this.props = {
-          line: null,
-          multi: false,
-          expand: this.props.expand,
-          nodes: null,
-          locked: false,
-          pen: null,
-          pens: pens
-        }
       }
+      if (!pens.length) return
+      this.$nextTick(() => {
+        if (pens.length == 1) {
+          this.modulesDiff(pens[0])
+          this.props = {
+            line: null,
+            multi: false,
+            expand: this.props.expand,
+            nodes: null,
+            locked: pens[0].locked,
+            pen: pens[0],
+            pens: pens
+          }
+        } else {
+          this.props = {
+            line: null,
+            multi: false,
+            expand: this.props.expand,
+            nodes: null,
+            locked: false,
+            pen: null,
+            pens: pens
+          }
+        }
+      })
       return pens
     },
     topTranslate () {
@@ -139,6 +152,19 @@ export default {
       }
       this.getNodesArr()
     },
+    topoScale (num) {
+      this.moduleId = ''
+      getTopology(this.topologyIndex).centerView()
+      this.showNodeTools('')
+      this.popDataShowUpdate('', false)
+      if (!this.editTopologyFlag) {
+        getTopology(this.topologyIndex)
+      }
+      if (this.$refs.topTool) {
+        this.$refs.topTool.scaleNum = parseInt(num * 100)
+      }
+      this.getNodesArr()
+    },
     topoClick (pointAndPen) {
       this.showNodeTools('')
       if (!pointAndPen.pen) {
@@ -153,7 +179,6 @@ export default {
           pens: null
         }
       }
-      console.log(pointAndPen, 'click')
     },
     toCenter () {
       if (getTopology(this.topologyIndex)) {