new style layout

public/icons/Action.svg

@@ -1 +1 @@
-<svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg"><path d="M5.0333 14.8284L6.44751 16.2426L10.6902 12L6.44751 7.75733L5.0333 9.17155L7.86172 12L5.0333 14.8284Z" fill="currentColor"></path><path d="M15 14H11V16H15V14Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M2 2C0.895431 2 0 2.89543 0 4V20C0 21.1046 0.89543 22 2 22H22C23.1046 22 24 21.1046 24 20V4C24 2.89543 23.1046 2 22 2H2ZM22 4H2L2 20H22V4Z" fill="currentColor"></path></svg>
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-width="2" d="M1,23 L4,20 L1,23 Z M20,4 L23,1 L20,4 Z M9,11 L12,8 L9,11 Z M13,15 L16,12 L13,15 Z M10,5 L19,14 L20,13 C22,11 24.0533047,8.00000006 20,4 C15.9466953,-5.91784286e-08 13,2 11,4 L10,5 Z M4,11 L5,10 L14,19 L13,20 C11.0000005,22 7.9999999,24.0873857 4,20 C9.84858655e-08,15.9126143 2,13 4,11 Z"></path></svg>

public/icons/Condition.svg

@@ -1 +1 @@
-<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-width="2" d="M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M12,15 L12,14 C12,13 12,12.5 13,12 C14,11.5 15,11 15,9.5 C15,8.5 14,7 12,7 C10,7 9,8.26413718 9,10 M12,16 L12,18"></path></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="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"></path></svg>

public/icons/Decorator.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1603437255749" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1527" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 0l448 256v512l-448 256-448-256V256l448-256z m0 98.24l-362.88 207.36v412.8L512 925.76l362.88-207.36v-412.8L512 98.24z m224 200.448l64.64 37.312v74.688L736 448l-30.784-17.792-155.968 78.08v185.216l27.392 15.808v74.688L512 821.312l-64.64-37.312v-74.688l27.392-15.808V508.352L318.72 430.208 288 448l-64.64-37.312V336l64.64-37.312 64.64 37.312v27.712L512 443.52l159.36-79.872V336l64.64-37.312z" fill="#000000" p-id="1528"></path></svg>
+<svg stroke="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" style="width:12px;height:12px" color="#fff"><path d="M2.273 9.53a2.273 2.273 0 100-4.546 2.273 2.273 0 000 4.547zm9.467-4.984a2.273 2.273 0 100-4.546 2.273 2.273 0 000 4.546M7.4 13.108a5.54 5.54 0 01-3.775-2.88 3.27 3.27 0 01-1.944.24 7.4 7.4 0 005.328 4.465c.53.113 1.072.169 1.614.166a3.25 3.25 0 01-.666-1.9 6 6 0 01-.557-.091m3.828 2.285a2.273 2.273 0 100-4.546 2.273 2.273 0 000 4.546m3.163-3.108a7.44 7.44 0 00.373-8.726 3.3 3.3 0 01-1.278 1.498 5.57 5.57 0 01-.183 5.535 3.26 3.26 0 011.088 1.693M2.098 3.998a3.3 3.3 0 011.897.486 5.54 5.54 0 014.464-2.388c.037-.67.277-1.313.69-1.843a7.47 7.47 0 00-7.051 3.745" stroke="none"/></svg>

sample/vars/declare-core.json

@@ -1,10 +1,11 @@
 {
+  "version": "1.8.0",
   "name": "declare-core",
   "desc": "",
   "firstid": 1,
   "export": true,
-  "import": [],
   "group": [],
+  "import": [],
   "declvar": [
     {
       "name": "context",
@@ -17,6 +18,12 @@
   ],
   "root": {
     "id": 1,
-    "name": "Sequence"
+    "name": "Wait",
+    "args": {
+      "time": 1
+    },
+    "input": [
+      "version"
+    ]
   }
 }

src/components/editor.tsx

@@ -943,9 +943,13 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
       layout: {
         type: "compactBox",
         direction: "LR",
-        getHGap: () => 60,
+        getHGap: () => 30,
         getWidth: (d: TreeGraphData) => {
-          return 160;
+          if (d.size) {
+            return d.size[0];
+          } else {
+            return 200;
+          }
         },
         getHeight: (d: TreeGraphData) => {
           if (d.size) {

src/components/register-node.ts

@@ -4,11 +4,11 @@ import { useWorkspace } from "../contexts/workspace-context";
 import { TreeGraphData, getNodeType, isExprType } from "../misc/b3type";
 import { checkTreeData, nodeDefs, parseExpr, usingGroups, usingVars } from "../misc/b3util";
 import i18n from "../misc/i18n";
-import { isMacos } from "../misc/keys";
 
 let ctx: CanvasRenderingContext2D | null = null;
 let defaultFontSize = "";
 const textWidthMap = new Map<string, number>();
+const textLines: Record<string, string[]> = {};
 
 const calcTextWith = (text: string, fontSize?: string) => {
   fontSize = fontSize ?? defaultFontSize;
@@ -30,45 +30,68 @@ const calcTextWith = (text: string, fontSize?: string) => {
       css ||= getComputedStyle(b3Workspace);
       ctx = ctx || document.createElement("canvas").getContext("2d")!;
       ctx.font = `${fontSize} ${css.fontFamily}`;
+      ctx.wordSpacing = "0px";
+      ctx.letterSpacing = "-0.5px";
       const metrics = ctx.measureText(text);
       width = metrics.width;
-      width = width - (isMacos ? 1.6 : 0.8);
+      // width = width - (isMacos ? 1.6 : 0.8);
+      // width *= isMacos ? 0.88 : 0.95;
       textWidthMap.set(key, width);
     }
   }
   return width ?? 13;
 };
 
-const cutWordTo = (str: string, maxWidth: number, fontSize?: string) => {
+const calcTextLines = (str: string, maxWidth: number, fontSize?: string) => {
-  let i = 0;
+  const key = `${str}-${maxWidth}-${fontSize}`;
-  for (; i < str.length; i++) {
+  let lines = textLines[key];
-    maxWidth -= calcTextWith(str.charAt(i), fontSize);
+  if (!lines) {
-    if (maxWidth < 0) {
+    lines = [];
-      i--;
+    textLines[key] = lines;
-      break;
+    while (str.length > 0) {
+      let left = 0;
+      let right = str.length;
+      let mid = 0;
+      let width = 0;
+
+      while (left < right) {
+        mid = Math.floor((left + right + 1) / 2);
+        const substr = str.substring(0, mid);
+        width = calcTextWith(substr, fontSize);
+
+        if (width <= maxWidth) {
+          left = mid;
+        } else {
+          right = mid - 1;
+        }
+      }
+
+      if (left > 0) {
+        lines.push(str.substring(0, left));
+        str = str.substring(left);
+      } else {
+        // Handle case where even single character exceeds maxWidth
+        lines.push(str.substring(0, 1));
+        str = str.substring(1);
+      }
     }
   }
-  return str.slice(0, i) + (i < str.length - 1 ? "..." : "");
+  return lines;
+};
+
+const cutWordTo = (str: string, maxWidth: number, fontSize?: string) => {
+  const lines = calcTextLines(str, maxWidth, fontSize);
+  if (lines.length > 1) {
+    return lines[0].slice(0, -1) + "...";
+  }
+  return lines[0];
 };
 
 const toBreakWord = (str: string, maxWidth: number, fontSize?: string) => {
-  const chars: string[] = [];
+  const lines = calcTextLines(str, maxWidth, fontSize);
-  let line = str.length > 0 ? 1 : 0;
-  let width = maxWidth;
-  for (let i = 0; i < str.length; i++) {
-    width -= calcTextWith(str.charAt(i), fontSize);
-    if (width > 0) {
-      chars.push(str.charAt(i));
-    } else {
-      width = maxWidth;
-      line++;
-      chars.push("\n");
-      i--;
-    }
-  }
   return {
-    str: chars.join(""),
+    str: lines.join("\n"),
-    line,
+    line: lines.length,
   };
 };
 
@@ -120,7 +143,7 @@ export const calcTreeDataSize = (data: TreeGraphData) => {
   updateHeight(data.args);
   updateHeight(data.input);
   updateHeight(data.output);
-  return [220, height];
+  return [260, height];
 };
 
 const NODE_COLORS = {
@@ -193,7 +216,7 @@ G6.registerNode(
         classify = "Error";
         color = NODE_COLORS[classify];
       }
-      const size = data.size ? data.size : [150, 40];
+      const size = data.size ? data.size : [200, 40];
       const w = size[0];
       const h = size[1];
       const r = 4;
@@ -248,6 +271,18 @@ G6.registerNode(
         true
       );
 
+      // name line
+      addShape("path", {
+        attrs: {
+          path: [
+            ["M", 46, 23],
+            ["L", w - 40, 23],
+          ],
+          stroke: "#666",
+          lineWidth: 1,
+        },
+      });
+
       // is subtree
       if (data.path && data.id !== "1") {
         addShape("rect", {
@@ -271,10 +306,10 @@ G6.registerNode(
         attrs: {
           x: 0,
           y: 0,
-          width: w,
+          width: 40,
-          height: 25,
+          height: h,
           fill: color,
-          radius: [r, r, 0, 0],
+          radius: [r, 0, 0, r],
         },
         name: "name-bg",
         draggable: true,
@@ -304,9 +339,9 @@ G6.registerNode(
       addShape("image", {
         attrs: {
           x: 5,
-          y: 3,
+          y: h / 2 - 16,
-          height: 18,
+          height: 30,
-          width: 18,
+          width: 30,
           img,
         },
         name: "node-icon",
@@ -316,10 +351,10 @@ G6.registerNode(
       const status = ((data.status ?? 0) & 0b111).toString(2).padStart(3, "0");
       addShape("image", {
         attrs: {
-          x: 204,
+          x: w - 18,
           y: 3,
-          height: 18,
+          height: 20,
-          width: 18,
+          width: 20,
           img: `./icons/status${status}.svg`,
         },
         name: "status-icon",
@@ -329,12 +364,12 @@ G6.registerNode(
       addShape("text", {
         attrs: {
           textBaseline: "top",
-          x: 26,
+          x: 46,
           y: 5,
-          fontWeight: 800,
+          fontWeight: 900,
           text: data.name,
           fill: textColor,
-          fontSize: 13,
+          fontSize: 14,
         },
         name: "name-text",
       });
@@ -343,7 +378,7 @@ G6.registerNode(
       if (data.debug) {
         addShape("image", {
           attrs: {
-            x: 192,
+            x: w - 30,
             y: 4,
             height: 16,
             width: 16,
@@ -356,7 +391,7 @@ G6.registerNode(
       if (data.disabled) {
         addShape("image", {
           attrs: {
-            x: 200 - (data.debug ? 25 : 8),
+            x: w - 30 - (data.debug ? 18 : 0),
             y: 4,
             height: 16,
             width: 16,
@@ -366,13 +401,13 @@ G6.registerNode(
         });
       }
 
-      const x = 6;
+      const x = 46;
       let y = 32;
       // desc text
       let desc = (data.desc || nodeDef.desc) as string;
       if (desc || desc === "") {
         desc = i18n.t("regnode.mark") + desc;
-        desc = cutWordTo(desc, w - 15);
+        desc = cutWordTo(desc, w - 40 - 15);
         addShape("text", {
           attrs: {
             textBaseline: "top",
@@ -395,7 +430,7 @@ G6.registerNode(
             attrs: {
               x: x - 2,
               y: y + 17,
-              width: w - 6,
+              width: w - 40 - 6,
               height: 18,
               fill: "#0d1117",
               radius: [r, r, r, r],
@@ -430,7 +465,7 @@ G6.registerNode(
             attrs: {
               x: x - 2,
               y: y + 17,
-              width: w - 6,
+              width: w - 40 - 6,
               height: 18,
               fill: "#0d1117",
               radius: [r, r, r, r],
@@ -468,7 +503,7 @@ G6.registerNode(
             attrs: {
               x: x - 2,
               y: y + 17,
-              width: w - 6,
+              width: w - 40 - 6,
               height: 18,
               fill: "#0d1117",
               radius: [r, r, r, r],
@@ -497,7 +532,7 @@ G6.registerNode(
 
       if (data.path) {
         let path = (i18n.t("regnode.subtree") + data.path) as string;
-        path = cutWordTo(path, w - 15);
+        path = cutWordTo(path, w - 40 - 15);
         addShape("text", {
           attrs: {
             textBaseline: "top",
@@ -578,6 +613,19 @@ G6.registerNode(
         });
       }
 
+      // restore stroke color and lineWidth
+      // after lose focus, the main box stroke and color is not the node color
+      addShape("path", {
+        attrs: {
+          path: [
+            ["M", 0, 0],
+            ["L", 0, 0],
+          ],
+          stroke: color,
+          lineWidth: 2,
+        },
+      });
+
       return shape;
     },
   },

src/contexts/workspace-context.ts

@@ -515,6 +515,7 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
     }
     set({ editing: editor, editingNode: null, editingTree: null });
     if (editor) {
+      workspace.refresh(editor.path);
       if (!editor.editNode) {
         workspace.onEditingTree(editor);
       } else if (typeof editor.editNode === "object") {