fix：修改节点动画 编辑节点晃动的问题

nezha-fronted/package.json

@@ -17,7 +17,7 @@
     "@topology/activity-diagram": "^0.3.0",
     "@topology/chart-diagram": "^0.3.0",
     "@topology/class-diagram": "^0.3.0",
-    "@topology/core": "^0.5.0",
+    "@topology/core": "^0.3.2",
     "@topology/flow-diagram": "^0.3.0",
     "@topology/layout": "^0.3.0",
     "@topology/sequence-diagram": "^0.3.0",

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

@@ -315,11 +315,6 @@ export function onChangeAnimate (node, animateType, fillStyle, strokeStyle) {
   const state = Node.cloneState(node)
   switch (animateType) {
     case 'upDown':
-      node.animateFrames.push({
-        duration: 0,
-        linear: true,
-        state: Node.cloneState(state)
-      })
       state.rect.y -= 10
       state.rect.ey -= 10
       node.animateFrames.push({
@@ -339,11 +334,6 @@ export function onChangeAnimate (node, animateType, fillStyle, strokeStyle) {
       })
       break
     case 'leftRight':
-      node.animateFrames.push({
-        duration: 0,
-        linear: true,
-        state: Node.cloneState(state)
-      })
       state.rect.x -= 10
       state.rect.ex -= 10
       node.animateFrames.push({
@@ -379,11 +369,6 @@ export function onChangeAnimate (node, animateType, fillStyle, strokeStyle) {
       })
       break
     case 'heart':
-      node.animateFrames.push({
-        duration: 0,
-        linear: true,
-        state: Node.cloneState(state)
-      })
       state.rect.x -= 5
       state.rect.ex += 5
       state.rect.y -= 5
@@ -402,11 +387,6 @@ export function onChangeAnimate (node, animateType, fillStyle, strokeStyle) {
       })
       break
     case 'success':
-      node.animateFrames.push({
-        duration: 0,
-        linear: true,
-        state: Node.cloneState(state)
-      })
       state.strokeStyle = strokeStyle || '#237804'
       node.animateFrames.push({
         duration: 100,
@@ -438,11 +418,6 @@ export function onChangeAnimate (node, animateType, fillStyle, strokeStyle) {
       })
       break
     case 'warning':
-      node.animateFrames.push({
-        duration: 0,
-        linear: true,
-        state: Node.cloneState(state)
-      })
       state.strokeStyle = strokeStyle || '#fa8c16'
       state.fillStyle = fillStyle || '#fa8c16'
       state.lineWidth = 5
@@ -472,11 +447,6 @@ export function onChangeAnimate (node, animateType, fillStyle, strokeStyle) {
       })
       break
     case 'error':
-      node.animateFrames.push({
-        duration: 0,
-        linear: true,
-        state: Node.cloneState(state)
-      })
       state.strokeStyle = strokeStyle || '#cf1322'
       state.fillStyle = fillStyle || '#cf132222'
       state.lineWidth = 5
@@ -506,11 +476,6 @@ export function onChangeAnimate (node, animateType, fillStyle, strokeStyle) {
       })
       break
     case 'show':
-      node.animateFrames.push({
-        duration: 0,
-        linear: true,
-        state: Node.cloneState(state)
-      })
       state.strokeStyle = strokeStyle || '#fa541c'
       state.rotate = -5
       node.animateFrames.push({
@@ -532,11 +497,6 @@ export function onChangeAnimate (node, animateType, fillStyle, strokeStyle) {
       })
       break
     case 'fade':
-      node.animateFrames.push({
-        duration: 0,
-        linear: true,
-        state: Node.cloneState(state)
-      })
       state.strokeStyle = strokeStyle || '#fa541c'
       state.globalAlpha = 0.3
       node.animateFrames.push({

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

@@ -414,7 +414,7 @@ registerNode('myCube', myCubec, myCubeAnchors, null, null)
 const canvasOptions = {
   rotateCursor: '/img/rotate.cur',
   translateKey: 'None',
-  disableEmptyLine: true,
+  disableEmptyLine: false,
   autoExpandDistance: 0,
   minScale: 0.01
 }
@@ -579,6 +579,10 @@ export default {
       immediate: true,
       handler (n) {
         if (n.id) {
+          if (getTopology(this.topologyIndex)) {
+            getTopology(this.topologyIndex).destroy()
+            setTopology(this.topologyIndex, null)
+          }
           if (!this.objChange) {
             this.editTopologyFlag = false
             this.topologyLoading = true
@@ -718,9 +722,9 @@ export default {
             setTimeout(() => {
               getTopology(this.topologyIndex).data.pens.forEach(item => {
                 if (item.animatePlay) {
-                  item.initAnimate()
+                  item.stopAnimate()
                   setTimeout(() => {
-                    item.animate('', new Date())
+                    item.startAnimate()
                   })
                 }
               }, 100)
@@ -1743,12 +1747,7 @@ export default {
         getTopology(this.topologyIndex).lock(0)
         getTopology(this.topologyIndex).data.pens.forEach((item, index) => { // 停止动画 以及赋值默认data
           if (item.animatePlay) {
-            console.log(123213123)
             item.stopAnimate()
-            setTimeout(() => {
-              item.restore(item)
-              item.initAnimate()
-            })
           }
           if (!item.data.expressArr.length) {
             item.data.expressArr = ['']
@@ -1780,7 +1779,6 @@ export default {
             item.fontColor = '#000000'
           }
         })
-        getTopology(this.topologyIndex).render();
         const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
         this.toolShow.attrCord = [domRect.width - 350, 0]
         this.toolShow.height = domRect.height