sxyanzhu
/
AIManage
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update code

main
haha 2024-07-10 23:54:24 +08:00
parent 31207a7fa5
commit abc1a392b1
3 changed files with 152 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/flow/FlowLink.js
View File

@ -1,6 +1,9 @@
import { PolylineEdge, PolylineEdgeModel } from "@logicflow/core"; import { PolylineEdge, PolylineEdgeModel } from "@logicflow/core";
class FlowLinkModel extends PolylineEdgeModel { class FlowLinkModel extends PolylineEdgeModel {
initEdgeData(data) {
super.initEdgeData(data);
}
getEdgeStyle() { getEdgeStyle() {
const style = super.getEdgeStyle(); const style = super.getEdgeStyle();
style.strokeWidth = 1; style.strokeWidth = 1;
@ -10,14 +13,21 @@ class FlowLinkModel extends PolylineEdgeModel {
setAttributes() { setAttributes() {
this.isAnimation = true; this.isAnimation = true;
} }
getEdgeAnimationStyle() { 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(); const style = super.getEdgeAnimationStyle();
style.strokeDasharray = "5 5"; style.strokeDasharray = "5 5";
style.stroke=colors[tmps.indexOf(this)];
style.animationDuration = "60s"; style.animationDuration = "60s";
return style; return style;
} }
} }
class FlowLink extends PolylineEdge {} class FlowLink extends PolylineEdge {
}
export default { export default {
type: "ai-link", type: "ai-link",

199
src/components/flow/nodes/BaseNode.js
View File

@ -1,6 +1,14 @@
import { RectNode, RectNodeModel, h } from "@logicflow/core"; import { RectNode, RectNodeModel, h } from "@logicflow/core";
import { getBytesLength } from "../util"; 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 { class RedNodeModel extends RectNodeModel {
/** /**
* 初始化 * 初始化
@ -8,14 +16,14 @@ class RedNodeModel extends RectNodeModel {
initNodeData(data) { initNodeData(data) {
super.initNodeData(data); super.initNodeData(data);
this.width = 200; this.width = 200;
this.height = 36; this.height = 60;
this.radius = 5; this.radius = 5;
this.text.x = this.x + 10; this.text.x = this.x + 10;
this.defaultFill = data.fill || "rgb(253, 208, 162)"; this.defaultFill = data.fill || "rgb(253, 208, 162)";
const startOnlyAsTarget={ const startOnlyAsTarget = {
message:"开始结点只能连接结束节点", message: "开始结点只能连接结束节点",
validate: (sourceNode, targetNode, sourceAnchor, targetAnchor) => { validate: (sourceNode, targetNode, sourceAnchor, targetAnchor) => {
return sourceAnchor.type !== targetAnchor.type; return sourceAnchor.type !== targetAnchor.type;
}, },
}; };
@ -51,23 +59,31 @@ class RedNodeModel extends RectNodeModel {
* 重写定义锚点 * 重写定义锚点
*/ */
getDefaultAnchor() { getDefaultAnchor() {
const { x, y, id, width, height } = this; const { x, y, id, width, height } = this;
const anchors = [
{ const node = this.properties?.data?.parameters;
x: x, let inputs = makeX(node?.inputs || []).map((d, idx) => {
return {
x: x + d,
y: y - height / 2, y: y - height / 2,
id: `${id}_right`, id: `${idx + 1}_right`,
type: "start", type: "start",
idx: idx + 1,
className: "anchors-start", className: "anchors-start",
}, };
{ });
x: x, let outputs = makeX(node?.outputs || []).map((d, idx) => {
return {
x: x + d,
y: y + height / 2, y: y + height / 2,
id: `${id}_left`, id: `${idx + 1}_left`,
idx: idx + 1,
type: "end", type: "end",
className: "anchors-end", className: "anchors-end",
}, };
]; });
const anchors = [...inputs, ...outputs];
return anchors; return anchors;
} }
/** /**
@ -89,54 +105,117 @@ class RedNode extends RectNode {
* 重写锚点新增 * 重写锚点新增
*/ */
getAnchorShape(anchorData) { getAnchorShape(anchorData) {
const { x, y, type, className } = anchorData; const { x, y, type, className, idx } = anchorData;
if(type=="start"){ if (type == "start") {
return h("svg",{ return h(
viewBox:"0 0 1139 1024" , "svg",
width:20, {
height:20, width: 20,
x: x - 8, height: 20,
y: y - 16, x: x - 10,
}, y: y - 0,
h("path",{ },
fill:"#0bdd0b", h("circle", {
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" r: 10,
}), cx: 10,
) cy: 10,
/* fill: "#0bdd0b",
return h( "circle", { }),
cx: x - 0, h(
cy: y - 5, "text",
r:6, {
className: "custom-anchor " + className, x: 10,
title:'开始' y: 16,
}); */ style: "text-anchor:middle;fill:#000;font-size:16px;",
},
"i" + idx
)
);
} }
/* return h(
return h( "rect", { "svg",
x: x - 5, {
y: y - 5, width: 20,
width: 10, height: 20,
height: 10, x: x - 10,
className: "custom-anchor " + className, y: y - 20,
title:'结束' },
});*/ h("circle", {
return h("svg",{ r: 10,
viewBox:"0 0 1139 1024" , cx: 10,
width:24, cy: 10,
height:24, fill: "#ffb01f",
x: x - 10, }),
y: y - 8, h(
}, "text",
h("path",{ {
fill:"#ffb01f", x: 10,
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" y: 16,
}), style: "text-anchor:middle;fill:#000;font-size:16px;",
) },
"o" + idx
)
);
} }
getShape() { getShape() {
const { text, x, y, width, height, radius } = this.props.model; const { text, x, y, width, height, radius } = this.props.model;
const style = this.props.model.getNodeStyle(); 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( return h(
"g", "g",
{ {
@ -152,6 +231,8 @@ class RedNode extends RectNode {
rx: radius, rx: radius,
ry: radius, ry: radius,
}), }),
...inputs,
...outputs,
] ]
); );
} }

8
src/views/connection/nodePanel.vue
View File

@ -111,13 +111,7 @@ const initData = () => {
let tmps = (d.data?.data?.operator_list || []).map(it => { let tmps = (d.data?.data?.operator_list || []).map(it => {
it.show = true; it.show = true;
it.text = it.operator_name; it.text = it.operator_name;
it.id = it.operator_id 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={};
return it; return it;
}); });
info.all=tmps; info.all=tmps;