reimplement the editor use lastest antd and other libs, feature of this commit:
1. file manger 2. highlight for click input or output 3. selector of subtress 4. autocomplete for input or output
This commit is contained in:
codetypes committed
1 parent
91da6f0071
commit
2e5c08b2ad
84 files changed
+14250
-11038
No files matched your search
@@ -0,0 +1,412 @@
|
||||
import { useWorkspace } from "@/contexts/workspace-context";
|
||||
import { toBreakWord } from "@/misc/b3util";
|
||||
import i18n from "@/misc/i18n";
|
||||
import G6 from "@antv/g6";
|
||||
|
||||
const NODE_COLORS: any = {
|
||||
["Composite"]: "rgb(91,237,32)",
|
||||
["Decorator"]: "rgb(218,167,16)",
|
||||
["Condition"]: "rgb(228,20,139)",
|
||||
["Action"]: "rgb(91,143,249)",
|
||||
["Other"]: "rgb(112,112,112)",
|
||||
["Error"]: "rgb(255,0,0)",
|
||||
};
|
||||
|
||||
const SELECTED_LINE_WIDTH = 4;
|
||||
|
||||
G6.registerNode(
|
||||
"TreeNode",
|
||||
{
|
||||
options: {
|
||||
type: "rect",
|
||||
anchorPoints: [
|
||||
[0, 0.5],
|
||||
[1, 0.5],
|
||||
],
|
||||
labelCfg: {
|
||||
style: {
|
||||
fill: "blue",
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
style: {
|
||||
fill: "white",
|
||||
},
|
||||
stateStyles: {
|
||||
selected: {
|
||||
"main-box": {
|
||||
stroke: "yellow",
|
||||
lineWidth: SELECTED_LINE_WIDTH,
|
||||
},
|
||||
"name-bg-selected": {
|
||||
fill: "yellow",
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
stroke: "white",
|
||||
lineWidth: 3,
|
||||
},
|
||||
dragSrc: {
|
||||
fill: "gray",
|
||||
},
|
||||
dragRight: {
|
||||
"drag-right": {
|
||||
fillOpacity: 1,
|
||||
strokeOpacity: 1,
|
||||
},
|
||||
},
|
||||
dragUp: {
|
||||
"drag-up": {
|
||||
fillOpacity: 1,
|
||||
strokeOpacity: 1,
|
||||
},
|
||||
},
|
||||
dragDown: {
|
||||
"drag-down": {
|
||||
fillOpacity: 1,
|
||||
strokeOpacity: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
draw(cfg, group) {
|
||||
const workspace = useWorkspace.getState();
|
||||
const nodeDef = workspace.getNodeDef(cfg.name as string);
|
||||
let classify = nodeDef.type || "Other";
|
||||
let color = nodeDef.color || NODE_COLORS[classify] || NODE_COLORS["Other"];
|
||||
if (
|
||||
!workspace.hasNodeDef(cfg.name as string) ||
|
||||
(cfg.path && (!cfg.children || (cfg.children as []).length == 0))
|
||||
) {
|
||||
classify = "Error";
|
||||
color = NODE_COLORS[classify];
|
||||
}
|
||||
const size = cfg.size ? (cfg.size as number[]) : [150, 40];
|
||||
const w = size[0];
|
||||
const h = size[1];
|
||||
const r = 4;
|
||||
|
||||
type ShapeCfg = Parameters<typeof group.addShape>[1];
|
||||
const addShape = (type: string, shapeCfg: ShapeCfg, clickEnabled: boolean = false) => {
|
||||
shapeCfg.draggable = clickEnabled;
|
||||
shapeCfg.capture = clickEnabled;
|
||||
return group.addShape(type, shapeCfg);
|
||||
};
|
||||
|
||||
const shape = addShape(
|
||||
"rect",
|
||||
{
|
||||
attrs: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: w,
|
||||
height: h,
|
||||
stroke: color,
|
||||
lineWidth: 2,
|
||||
fill: "white",
|
||||
radius: r,
|
||||
},
|
||||
name: "main-box",
|
||||
draggable: true,
|
||||
},
|
||||
true
|
||||
);
|
||||
|
||||
// is subtree
|
||||
if (cfg.path && cfg.id !== "1") {
|
||||
addShape("rect", {
|
||||
attrs: {
|
||||
x: -10,
|
||||
y: -10,
|
||||
width: w + 20,
|
||||
height: h + 20,
|
||||
stroke: "white",
|
||||
lineWidth: 2.5,
|
||||
lineDash: [5, 5],
|
||||
radius: [r, r, r, r],
|
||||
},
|
||||
name: "subtree",
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
|
||||
// name bg
|
||||
addShape("rect", {
|
||||
attrs: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: w,
|
||||
height: 20,
|
||||
fill: color,
|
||||
radius: [r, r, 0, 0],
|
||||
},
|
||||
name: "name-bg-selected",
|
||||
draggable: true,
|
||||
});
|
||||
addShape("rect", {
|
||||
attrs: {
|
||||
x: SELECTED_LINE_WIDTH / 2,
|
||||
y: SELECTED_LINE_WIDTH / 2,
|
||||
width: w - 4,
|
||||
height: 20 - SELECTED_LINE_WIDTH / 2,
|
||||
fill: color,
|
||||
radius: [r, r, 0, 0],
|
||||
},
|
||||
name: "name-bg",
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
// id text
|
||||
addShape("text", {
|
||||
attrs: {
|
||||
textBaseline: "top",
|
||||
x: -3,
|
||||
y: h / 2 - 8,
|
||||
fontSize: 20,
|
||||
lineHeight: 20,
|
||||
text: cfg.id,
|
||||
textAlign: "right",
|
||||
fill: "white",
|
||||
stroke: "black",
|
||||
lineWidth: 2,
|
||||
},
|
||||
name: "id-text",
|
||||
});
|
||||
|
||||
// icon
|
||||
const img = `./icons/${classify}.svg`;
|
||||
addShape("image", {
|
||||
attrs: {
|
||||
x: 5,
|
||||
y: 2,
|
||||
height: 14,
|
||||
width: 14,
|
||||
img,
|
||||
},
|
||||
name: "node-icon",
|
||||
});
|
||||
|
||||
// debug
|
||||
if (cfg.debug) {
|
||||
addShape("image", {
|
||||
attrs: {
|
||||
x: 182,
|
||||
y: 2,
|
||||
height: 14,
|
||||
width: 14,
|
||||
img: `./icons/Debug.svg`,
|
||||
},
|
||||
name: "node-icon",
|
||||
});
|
||||
}
|
||||
|
||||
// name text
|
||||
addShape("text", {
|
||||
attrs: {
|
||||
textBaseline: "top",
|
||||
x: 22,
|
||||
y: 3,
|
||||
fontWeight: 800,
|
||||
lineHeight: 20,
|
||||
text: cfg.name,
|
||||
fill: "black",
|
||||
},
|
||||
name: "name-text",
|
||||
});
|
||||
|
||||
const x = 5;
|
||||
let y = 24;
|
||||
// desc text
|
||||
const desc = cfg.desc || nodeDef.desc;
|
||||
if (desc) {
|
||||
addShape("text", {
|
||||
attrs: {
|
||||
textBaseline: "top",
|
||||
x,
|
||||
y,
|
||||
lineHeight: 20,
|
||||
fontWeight: 800,
|
||||
text: `${i18n.t("regnode.mark")}${desc}`,
|
||||
fill: "black",
|
||||
},
|
||||
name: "desc-text",
|
||||
});
|
||||
}
|
||||
|
||||
const args: any = cfg.args;
|
||||
if (nodeDef.args && args && Object.keys(args).length > 0) {
|
||||
const { str, line } = toBreakWord(`${i18n.t("regnode.args")}${JSON.stringify(args)}`, 34);
|
||||
addShape("text", {
|
||||
attrs: {
|
||||
textBaseline: "top",
|
||||
x,
|
||||
y: y + 20,
|
||||
w,
|
||||
lineHeight: 20,
|
||||
text: str,
|
||||
fill: "black",
|
||||
},
|
||||
name: "args-text",
|
||||
});
|
||||
y += 20 * line;
|
||||
}
|
||||
|
||||
const input: [] = cfg.input ? (cfg.input as []) : [];
|
||||
if (nodeDef.input && input.length > 0) {
|
||||
const { str, line } = toBreakWord(`${i18n.t("regnode.input")}${JSON.stringify(input)}`, 35);
|
||||
if (cfg.highlightInput) {
|
||||
addShape("rect", {
|
||||
attrs: {
|
||||
x: x - 2,
|
||||
y: y + 17,
|
||||
width: w - 6,
|
||||
height: 18,
|
||||
fill: "#0d1117",
|
||||
radius: [r, r, r, r],
|
||||
},
|
||||
name: "input-text-bg",
|
||||
});
|
||||
}
|
||||
addShape(
|
||||
"text",
|
||||
{
|
||||
attrs: {
|
||||
textBaseline: "top",
|
||||
x,
|
||||
y: y + 20,
|
||||
lineHeight: 20,
|
||||
text: str,
|
||||
fill: cfg.highlightInput ? "white" : "black",
|
||||
fontWeight: cfg.highlightInput ? "bolder" : undefined,
|
||||
},
|
||||
name: "input-text",
|
||||
},
|
||||
true
|
||||
);
|
||||
y += 20 * line;
|
||||
}
|
||||
|
||||
const output: [] = cfg.output ? (cfg.output as []) : [];
|
||||
if (nodeDef.output && output.length > 0) {
|
||||
const { str, line } = toBreakWord(
|
||||
`${i18n.t("regnode.output")}${JSON.stringify(output)}`,
|
||||
35
|
||||
);
|
||||
if (cfg.highlightOutput) {
|
||||
addShape("rect", {
|
||||
attrs: {
|
||||
x: x - 2,
|
||||
y: y + 17,
|
||||
width: w - 6,
|
||||
height: 18,
|
||||
fill: "#0d1117",
|
||||
radius: [r, r, r, r],
|
||||
},
|
||||
name: "output-text-bg",
|
||||
});
|
||||
}
|
||||
addShape(
|
||||
"text",
|
||||
{
|
||||
attrs: {
|
||||
textBaseline: "top",
|
||||
x,
|
||||
y: y + 20,
|
||||
lineHeight: 20,
|
||||
text: str,
|
||||
fill: cfg.highlightOutput ? "white" : "black",
|
||||
fontWeight: cfg.highlightOutput ? "bolder" : undefined,
|
||||
},
|
||||
name: "output-text",
|
||||
},
|
||||
true
|
||||
);
|
||||
y += 20 * line;
|
||||
}
|
||||
|
||||
if (cfg.path) {
|
||||
addShape("text", {
|
||||
attrs: {
|
||||
textBaseline: "top",
|
||||
x,
|
||||
y: y + 20,
|
||||
lineHeight: 20,
|
||||
text: `${i18n.t("regnode.subtree")}${cfg.path}`,
|
||||
fill: "black",
|
||||
},
|
||||
name: "subtree-text",
|
||||
});
|
||||
y += 20;
|
||||
}
|
||||
|
||||
addShape("rect", {
|
||||
name: "drag-up",
|
||||
attrs: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: w,
|
||||
height: h / 2,
|
||||
lineWidth: 2,
|
||||
stroke: "#1668dc",
|
||||
strokeOpacity: 0,
|
||||
fill: "#1668dc",
|
||||
fillOpacity: 0,
|
||||
radius: [r, r, 0, 0],
|
||||
},
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
addShape("rect", {
|
||||
name: "drag-down",
|
||||
attrs: {
|
||||
x: 0,
|
||||
y: h / 2,
|
||||
width: w,
|
||||
height: h / 2,
|
||||
lineWidth: 2,
|
||||
stroke: "#1668dc",
|
||||
strokeOpacity: 0,
|
||||
fill: "#1668dc",
|
||||
fillOpacity: 0,
|
||||
radius: [0, 0, r, r],
|
||||
},
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
addShape("rect", {
|
||||
name: "drag-right",
|
||||
attrs: {
|
||||
x: w / 2,
|
||||
y: 0,
|
||||
width: w / 2,
|
||||
height: h,
|
||||
lineWidth: 2,
|
||||
stroke: "#1668dc",
|
||||
strokeOpacity: 0,
|
||||
fill: "#1668dc",
|
||||
fillOpacity: 0,
|
||||
radius: [0, r, r, 0],
|
||||
},
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
if (Array.isArray(cfg.children) && cfg.children.length > 0) {
|
||||
addShape("marker", {
|
||||
attrs: {
|
||||
x: w,
|
||||
y: h / 2,
|
||||
r: 6,
|
||||
symbol: G6.Marker.collapse,
|
||||
stroke: "#666",
|
||||
lineWidth: 1,
|
||||
fill: "#fff",
|
||||
},
|
||||
name: "collapse-icon",
|
||||
});
|
||||
}
|
||||
|
||||
return shape;
|
||||
},
|
||||
},
|
||||
"single-node"
|
||||
);
|
||||
Reference in new issue
Block a user