From e683f702b83b7f213c4a5d7ba33a9a2452e73599 Mon Sep 17 00:00:00 2001 From: zhangyu Date: Mon, 22 Mar 2021 17:53:54 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=E5=8D=87?= =?UTF-8?q?=E7=BA=A7topo=E7=BB=84=E4=BB=B6=E5=90=8E=20=E8=8A=82=E7=82=B9?= =?UTF-8?q?=E5=8A=A8=E7=94=BB=E4=B8=8D=E7=94=9F=E6=95=88=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nezha-fronted/package.json | 2 +- .../common/project/L5/services/canvas.js | 41 +++++++++++++++++++ .../components/common/project/topologyL5.vue | 12 ++++-- 3 files changed, 51 insertions(+), 4 deletions(-) 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