update code
parent
31207a7fa5
commit
abc1a392b1
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
]
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue