optimize node render size

public/icons/Debug.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M370 378c28.89 23.52 46 46.07 46 86M142 378c-28.89 23.52-46 46.06-46 86M384 208c28.89-23.52 32-56.07 32-96M128 206c-28.89-23.52-32-54.06-32-94M464 288.13h-80M128 288.13H48M256 192v256" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path d="M256 448h0c-70.4 0-128-57.6-128-128v-96.07c0-65.07 57.6-96 128-96h0c70.4 0 128 25.6 128 96V320c0 70.4-57.6 128-128 128z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path d="M179.43 143.52a49.08 49.08 0 01-3.43-15.73A80 80 0 01255.79 48h.42A80 80 0 01336 127.79a41.91 41.91 0 01-3.12 14.3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg"><path d="M511.988 288.9c-.478 17.43-15.217 31.1-32.653 31.1H424v16c0 21.864-4.882 42.584-13.6 61.145l60.228 60.228c12.496 12.497 12.496 32.758 0 45.255-12.498 12.497-32.759 12.496-45.256 0l-54.736-54.736C345.886 467.965 314.351 480 280 480V236c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v244c-34.351 0-65.886-12.035-90.636-32.108l-54.736 54.736c-12.498 12.497-32.759 12.496-45.256 0-12.496-12.497-12.496-32.758 0-45.255l60.228-60.228C92.882 378.584 88 357.864 88 336v-16H32.666C15.23 320 .491 306.33.013 288.9-.484 270.816 14.028 256 32 256h56v-58.745l-46.628-46.628c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0L141.255 160h229.489l54.627-54.627c12.498-12.497 32.758-12.497 45.256 0 12.496 12.497 12.496 32.758 0 45.255L424 197.255V256h56c17.972 0 32.484 14.816 31.988 32.9zM257 0c-61.856 0-112 50.144-112 112h224C369 50.144 318.856 0 257 0z"></path></svg>

src/components/editor.tsx

@@ -730,7 +730,7 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
         direction: "LR",
         getHGap: () => 60,
         getWidth: (d: TreeGraphData) => {
-          return 150;
+          return 160;
         },
         getHeight: (d: TreeGraphData) => {
           if (d.size) {
@@ -1145,10 +1145,10 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
       if (data.parent) {
         recursiveFun(data.parent);
       }
-    }
+    };
     recursiveFun(id);
     updateGrahp();
-  }
+  };
 
   return (
     <div

src/components/inspector.tsx

@@ -326,7 +326,9 @@ const NodeInspector: FC = () => {
                     valuePropName={type === "boolean" ? "checked" : undefined}
                     rules={[{ required, message: t("node.fileRequired", { field: v.desc }) }]}
                   >
-                    {type === "string" && <Input disabled={disabled} onBlur={form.submit} />}
+                    {type === "string" && (
+                      <TextArea autoSize disabled={disabled} onBlur={form.submit} />
+                    )}
                     {type === "int" && (
                       <InputNumber disabled={disabled} onBlur={form.submit} precision={0} />
                     )}

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": {
+          "main-box-selected": {
-            stroke: "yellow",
+            fillOpacity: 0.2,
-            lineWidth: SELECTED_LINE_WIDTH,
-          },
-          "name-bg-selected": {
-            fill: "yellow",
           },
         },
         hover: {
-          stroke: "white",
+          "main-box-selected": {
-          lineWidth: 3,
+            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,
+          height: 25,
-          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],
         },
@@ -195,22 +193,37 @@ G6.registerNode(
       addShape("image", {
         attrs: {
           x: 5,
-          y: 2,
+          y: 4,
-          height: 14,
+          height: 16,
-          width: 14,
+          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,
+            x: 200,
-            y: 2,
+            y: 4,
-            height: 14,
+            height: 16,
-            width: 14,
+            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),
+            x: 200 - (cfg.debug ? 18 : 0),
-            y: 2,
+            y: 4,
-            height: 14,
+            height: 16,
-            width: 14,
+            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",

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;
     }