fix：修改升级topo组件后 节点动画不生效的问题

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.4.17",
+    "@topology/core": "^0.5.0",
     "@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

@@ -305,6 +305,7 @@ export function myCubeAnchors (node) { // 立方体锚点
 /* 自定义立方体 */
 
 export function onChangeAnimate (node, animateType, fillStyle, strokeStyle) {
+  console.log(node)
   node.animateType = animateType
   if (node.animateType === 'custom') {
     return
@@ -314,6 +315,11 @@ 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({
@@ -333,6 +339,11 @@ 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({
@@ -368,6 +379,11 @@ 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
@@ -386,6 +402,11 @@ 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,
@@ -417,6 +438,11 @@ 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
@@ -446,6 +472,11 @@ 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
@@ -475,6 +506,11 @@ 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({
@@ -496,6 +532,11 @@ 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: false,
+  disableEmptyLine: true,
   autoExpandDistance: 0,
   minScale: 0.01
 }
@@ -718,9 +718,9 @@ export default {
             setTimeout(() => {
               getTopology(this.topologyIndex).data.pens.forEach(item => {
                 if (item.animatePlay) {
-                  item.stopAnimate()
+                  item.initAnimate()
                   setTimeout(() => {
-                    item.startAnimate()
+                    item.animate('', new Date())
                   })
                 }
               }, 100)
@@ -1743,7 +1743,12 @@ 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 = ['']
@@ -1775,6 +1780,7 @@ 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