= ({ onUpdate: updateState, data: editor, .
if (data.parent) {
recursiveFun(data.parent);
}
- }
+ };
recursiveFun(id);
updateGrahp();
- }
+ };
return (
{
valuePropName={type === "boolean" ? "checked" : undefined}
rules={[{ required, message: t("node.fileRequired", { field: v.desc }) }]}
>
- {type === "string" && }
+ {type === "string" && (
+
+ )}
{type === "int" && (
)}
diff --git a/src/components/register-node.ts b/src/components/register-node.ts
index e6dc334..541f91d 100644
--- a/src/components/register-node.ts
+++ b/src/components/register-node.ts
@@ -15,8 +15,6 @@ const NODE_COLORS: any = {
["Error"]: "#ff0000",
};
-const SELECTED_LINE_WIDTH = 4;
-
G6.registerNode(
"TreeNode",
{
@@ -37,17 +35,14 @@ G6.registerNode(
},
stateStyles: {
selected: {
- "main-box": {
- stroke: "yellow",
- lineWidth: SELECTED_LINE_WIDTH,
- },
- "name-bg-selected": {
- fill: "yellow",
+ "main-box-selected": {
+ fillOpacity: 0.2,
},
},
hover: {
- stroke: "white",
- lineWidth: 3,
+ "main-box-selected": {
+ fillOpacity: 0.1,
+ },
},
dragSrc: {
fill: "gray",
@@ -103,9 +98,24 @@ G6.registerNode(
const addShape = (type: string, shapeCfg: ShapeCfg, clickEnabled: boolean = false) => {
shapeCfg.draggable = clickEnabled;
shapeCfg.capture = clickEnabled;
+ // shapeCfg.attrs.fontFamily = "Menlo, Monaco, 'Courier New', monospace";
return group.addShape(type, shapeCfg);
};
+ addShape("rect", {
+ attrs: {
+ x: -15,
+ y: -15,
+ width: w + 30,
+ height: h + 30,
+ fill: "#fff",
+ fillOpacity: 0,
+ radius: r + 4,
+ },
+ name: "main-box-selected",
+ draggable: true,
+ });
+
const shape = addShape(
"rect",
{
@@ -133,9 +143,9 @@ G6.registerNode(
y: -10,
width: w + 20,
height: h + 20,
- stroke: "white",
+ stroke: "#a5b1be",
lineWidth: 2.5,
- lineDash: [5, 5],
+ lineDash: [6, 6],
radius: [r, r, r, r],
},
name: "subtree",
@@ -149,19 +159,7 @@ G6.registerNode(
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,
+ height: 25,
fill: color,
radius: [r, r, 0, 0],
},
@@ -195,22 +193,37 @@ G6.registerNode(
addShape("image", {
attrs: {
x: 5,
- y: 2,
- height: 14,
- width: 14,
+ y: 4,
+ height: 16,
+ width: 16,
img,
},
name: "node-icon",
});
+ // name text
+ addShape("text", {
+ attrs: {
+ textBaseline: "top",
+ x: 25,
+ y: 5,
+ fontWeight: 800,
+ lineHeight: 20,
+ text: cfg.name,
+ fill: textColor,
+ fontSize: 14,
+ },
+ name: "name-text",
+ });
+
// debug
if (cfg.debug) {
addShape("image", {
attrs: {
- x: 182,
- y: 2,
- height: 14,
- width: 14,
+ x: 200,
+ y: 4,
+ height: 16,
+ width: 16,
img: `./icons/Debug.svg`,
},
name: "node-debug-icon",
@@ -220,37 +233,23 @@ G6.registerNode(
if (cfg.disabled) {
addShape("image", {
attrs: {
- x: 182 - (cfg.debug ? 14 : 0),
- y: 2,
- height: 14,
- width: 14,
+ x: 200 - (cfg.debug ? 18 : 0),
+ y: 4,
+ height: 16,
+ width: 16,
img: `./icons/Disabled.svg`,
},
name: "node-disabled-icon",
});
}
- // name text
- addShape("text", {
- attrs: {
- textBaseline: "top",
- x: 22,
- y: 3,
- fontWeight: 800,
- lineHeight: 20,
- text: cfg.name,
- fill: textColor,
- },
- name: "name-text",
- });
-
const x = 6;
- let y = 24;
+ let y = 32;
// desc text
let desc = (cfg.desc || nodeDef.desc) as string;
if (desc) {
desc = i18n.t("regnode.mark") + desc;
- desc = cutWordTo(desc, 31);
+ desc = cutWordTo(desc, 33);
addShape("text", {
attrs: {
textBaseline: "top",
@@ -267,7 +266,7 @@ G6.registerNode(
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);
+ const { str, line } = toBreakWord(`${i18n.t("regnode.args")}${JSON.stringify(args)}`, 37);
addShape("text", {
attrs: {
textBaseline: "top",
@@ -358,7 +357,7 @@ G6.registerNode(
if (cfg.path) {
let path = (i18n.t("regnode.subtree") + cfg.path) as string;
- path = cutWordTo(path, 33);
+ path = cutWordTo(path, 35);
addShape("text", {
attrs: {
textBaseline: "top",
diff --git a/src/misc/b3util.ts b/src/misc/b3util.ts
index e84668b..662258f 100644
--- a/src/misc/b3util.ts
+++ b/src/misc/b3util.ts
@@ -207,7 +207,7 @@ export const refreshTreeDataId = (data: TreeGraphData, id?: number) => {
};
export const calcTreeDataSize = (data: TreeGraphData) => {
- let height = 40 + 2;
+ let height = 50 + 2;
const updateHeight = (obj: any) => {
if (Array.isArray(obj) || (obj && Object.keys(obj).length > 0)) {
const { str, line } = toBreakWord(`参数:${JSON.stringify(obj)}`, 35);
@@ -220,7 +220,7 @@ export const calcTreeDataSize = (data: TreeGraphData) => {
updateHeight(data.args);
updateHeight(data.input);
updateHeight(data.output);
- return [200, height];
+ return [220, height];
};
export const checkTreeData = (data: TreeGraphData) => {
@@ -378,13 +378,17 @@ const isAsciiChar = (c: number) => {
return (c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f);
};
+const isUppercase = (c: number) => {
+ return c >= 0x0041 && c <= 0x005a;
+};
+
export const toBreakWord = (str: string, maxlen: number) => {
const chars: string[] = [];
let line = 1;
let len = 0;
for (let i = 0; i < str.length; i++) {
const c = str.charCodeAt(i);
- len += isAsciiChar(c) ? 1 : 2;
+ len += isAsciiChar(c) ? (isUppercase(c) ? 1.5 : 1) : 2;
chars.push(String.fromCharCode(c));
if (len >= maxlen && i < str.length - 1) {
len = 0;
@@ -402,7 +406,7 @@ export const cutWordTo = (str: string, maxlen: number) => {
let i = 0;
for (; i < str.length; i++) {
const c = str.charCodeAt(i);
- maxlen -= isAsciiChar(c) ? 1 : 2;
+ maxlen -= isAsciiChar(c) ? (isUppercase(c) ? 1.5 : 1) : 2;
if (maxlen <= 0) {
break;
}