From abc1a392b1a59049f36f5a1dbd64126f406fa80f Mon Sep 17 00:00:00 2001 From: haha Date: Wed, 10 Jul 2024 23:54:24 +0800 Subject: [PATCH] update code --- src/components/flow/FlowLink.js | 12 +- src/components/flow/nodes/BaseNode.js | 199 ++++++++++++++++++-------- src/views/connection/nodePanel.vue | 8 +- 3 files changed, 152 insertions(+), 67 deletions(-) diff --git a/src/components/flow/FlowLink.js b/src/components/flow/FlowLink.js index b6918aa..f197663 100644 --- a/src/components/flow/FlowLink.js +++ b/src/components/flow/FlowLink.js @@ -1,6 +1,9 @@ import { PolylineEdge, PolylineEdgeModel } from "@logicflow/core"; class FlowLinkModel extends PolylineEdgeModel { + initEdgeData(data) { + super.initEdgeData(data); + } getEdgeStyle() { const style = super.getEdgeStyle(); style.strokeWidth = 1; @@ -10,14 +13,21 @@ class FlowLinkModel extends PolylineEdgeModel { setAttributes() { this.isAnimation = true; } + getEdgeAnimationStyle() { + let tmps=this.graphModel.edges.filter(d=>d.targetNodeId==this.sourceNodeId||d.sourceNodeId==this.sourceNodeId); + const colors=["#d34836","#0f9d58","#ff7f0e","#2ec2b3","#24799e","#7fba00","#4A148C","#1E88E5","#827717","#4E342E"] ; + const style = super.getEdgeAnimationStyle(); style.strokeDasharray = "5 5"; + style.stroke=colors[tmps.indexOf(this)]; style.animationDuration = "60s"; return style; } } -class FlowLink extends PolylineEdge {} +class FlowLink extends PolylineEdge { + +} export default { type: "ai-link", diff --git a/src/components/flow/nodes/BaseNode.js b/src/components/flow/nodes/BaseNode.js index f50a5a6..c6f04e8 100644 --- a/src/components/flow/nodes/BaseNode.js +++ b/src/components/flow/nodes/BaseNode.js @@ -1,6 +1,14 @@ import { RectNode, RectNodeModel, h } from "@logicflow/core"; import { getBytesLength } from "../util"; - +const makeX = (arr) => { + const len = arr.length; + let i = len % 2 == 0 ? (len / 2) * -1 : ((len - 1) / 2) * -1; + let res = []; + for (let j = i; j <= i * -1; j++) { + res.push(30 * j); + } + return res; +}; class RedNodeModel extends RectNodeModel { /** * 初始化 @@ -8,14 +16,14 @@ class RedNodeModel extends RectNodeModel { initNodeData(data) { super.initNodeData(data); this.width = 200; - this.height = 36; + this.height = 60; this.radius = 5; this.text.x = this.x + 10; this.defaultFill = data.fill || "rgb(253, 208, 162)"; - const startOnlyAsTarget={ - message:"开始结点只能连接结束节点", - validate: (sourceNode, targetNode, sourceAnchor, targetAnchor) => { + const startOnlyAsTarget = { + message: "开始结点只能连接结束节点", + validate: (sourceNode, targetNode, sourceAnchor, targetAnchor) => { return sourceAnchor.type !== targetAnchor.type; }, }; @@ -51,23 +59,31 @@ class RedNodeModel extends RectNodeModel { * 重写定义锚点 */ getDefaultAnchor() { - const { x, y, id, width, height } = this; - const anchors = [ - { - x: x, + const { x, y, id, width, height } = this; + + const node = this.properties?.data?.parameters; + let inputs = makeX(node?.inputs || []).map((d, idx) => { + return { + x: x + d, y: y - height / 2, - id: `${id}_right`, + id: `${idx + 1}_right`, type: "start", + idx: idx + 1, className: "anchors-start", - }, - { - x: x, + }; + }); + let outputs = makeX(node?.outputs || []).map((d, idx) => { + return { + x: x + d, y: y + height / 2, - id: `${id}_left`, + id: `${idx + 1}_left`, + idx: idx + 1, type: "end", className: "anchors-end", - }, - ]; + }; + }); + + const anchors = [...inputs, ...outputs]; return anchors; } /** @@ -89,54 +105,117 @@ class RedNode extends RectNode { * 重写锚点新增 */ getAnchorShape(anchorData) { - const { x, y, type, className } = anchorData; - if(type=="start"){ - return h("svg",{ - viewBox:"0 0 1139 1024" , - width:20, - height:20, - x: x - 8, - y: y - 16, - }, - h("path",{ - fill:"#0bdd0b", - d:"M0 512.007221a511.992418 511.992418 0 1 1 511.631351 511.992418A512.353484 512.353484 0 0 1 0 512.007221z m730.437702 120.235173c0-97.126911-62.464519-131.06717-146.593034-161.75783l-66.797318-25.996794c-53.437855-20.941862-87.378114-38.273058-87.378114-77.629316 0-45.133323 36.106659-70.046917 93.155179-70.046917a227.471949 227.471949 0 0 1 139.732769 54.521054l57.04852-72.213317a298.963132 298.963132 0 0 0-196.059156-72.213317c-121.318373 0-206.530087 63.547719-206.530086 164.285296 0 84.128514 67.880518 128.900771 144.426634 157.425031l67.880518 27.079994c49.105056 18.775462 86.294914 36.106659 86.294914 84.489581s-36.106659 74.379717-100.737578 74.379717a269.355672 269.355672 0 0 1-173.673027-70.046918L285.242602 722.50904a344.096456 344.096456 0 0 0 225.305549 81.962115c136.844236-0.361067 219.88955-74.740783 219.889551-172.228761z" - }), - ) - /* - return h( "circle", { - cx: x - 0, - cy: y - 5, - r:6, - className: "custom-anchor " + className, - title:'开始' - }); */ + const { x, y, type, className, idx } = anchorData; + if (type == "start") { + return h( + "svg", + { + width: 20, + height: 20, + x: x - 10, + y: y - 0, + }, + h("circle", { + r: 10, + cx: 10, + cy: 10, + fill: "#0bdd0b", + }), + h( + "text", + { + x: 10, + y: 16, + style: "text-anchor:middle;fill:#000;font-size:16px;", + }, + "i" + idx + ) + ); } - /* - return h( "rect", { - x: x - 5, - y: y - 5, - width: 10, - height: 10, - className: "custom-anchor " + className, - title:'结束' - });*/ - return h("svg",{ - viewBox:"0 0 1139 1024" , - width:24, - height:24, - x: x - 10, - y: y - 8, - }, - h("path",{ - fill:"#ffb01f", - d:"M810.667 128H213.333C166.187 128 128 166.187 128 213.333v597.334C128 857.813 166.187 896 213.333 896h597.334C857.813 896 896 857.813 896 810.667V213.333C896 166.187 857.813 128 810.667 128zM640 384H469.333v85.333H640v85.334H469.333V640H640v85.333H384V298.667h256V384z" - }), - ) + return h( + "svg", + { + width: 20, + height: 20, + x: x - 10, + y: y - 20, + }, + h("circle", { + r: 10, + cx: 10, + cy: 10, + fill: "#ffb01f", + }), + h( + "text", + { + x: 10, + y: 16, + style: "text-anchor:middle;fill:#000;font-size:16px;", + }, + "o" + idx + ) + ); } + getShape() { const { text, x, y, width, height, radius } = this.props.model; const style = this.props.model.getNodeStyle(); + const node = this.props.model.properties?.data?.parameters; + console.log("+++", x, y, width, height); + let inputs = makeX(node?.inputs || []).map((d, idx) => + h( + "svg", + { + width: 20, + height: 20, + x: x + d - 10, + y: y - height / 2 - 0, + }, + h("circle", { + r: 10, + cx: 10, + cy: 10, + fill: "#0bdd0b", + }), + h( + "text", + { + x: 10, + y: 16, + style: "text-anchor:middle;fill:#000;font-size:16px;", + }, + "i" + (idx + 1) + ) + ) + ); + let outputs = makeX(node?.outputs || []).map((d, idx) => + h( + "svg", + { + width: 20, + height: 20, + x: x + d - 10, + y: y + height / 2 - 20, + }, + h("circle", { + r: 10, + cx: 10, + cy: 10, + fill: "#ffb01f", + }), + h( + "text", + { + x: 10, + y: 16, + style: "text-anchor:middle;fill:#000;font-size:16px;", + }, + "o" + (idx + 1) + ) + ) + ); + return h( "g", { @@ -152,6 +231,8 @@ class RedNode extends RectNode { rx: radius, ry: radius, }), + ...inputs, + ...outputs, ] ); } diff --git a/src/views/connection/nodePanel.vue b/src/views/connection/nodePanel.vue index 5eaae16..1ce19a1 100644 --- a/src/views/connection/nodePanel.vue +++ b/src/views/connection/nodePanel.vue @@ -111,13 +111,7 @@ const initData = () => { let tmps = (d.data?.data?.operator_list || []).map(it => { it.show = true; it.text = it.operator_name; - it.id = it.operator_id - it.inputParams={ - a:10,b:20,c:30,d:40,e:50, - a2:10,b2:20,c2:30,d2:40,e2:50, - }; - it.outputParams={}; - it.processParams={}; + it.id = it.operator_id return it; }); info.all=tmps;