diff --git a/nezha-fronted/package.json b/nezha-fronted/package.json index 8f561dba5..100cc176d 100644 --- a/nezha-fronted/package.json +++ b/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", diff --git a/nezha-fronted/src/components/common/project/L5/services/canvas.js b/nezha-fronted/src/components/common/project/L5/services/canvas.js index 3b8a79792..233a23319 100644 --- a/nezha-fronted/src/components/common/project/L5/services/canvas.js +++ b/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({ diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue index 674f084a7..e286fb4db 100644 --- a/nezha-fronted/src/components/common/project/topologyL5.vue +++ b/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