support node disabled

public/icons/Disabled.svg

@@ -0,0 +1 @@
+<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 d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12Zm16.333-4.167a.825.825 0 0 0-1.166-1.166l-9.5 9.5a.825.825 0 0 0 1.166 1.166Z"></path></svg>

public/locales/en.json

@@ -79,6 +79,7 @@
   "node.args": "Const arguments",
   "node.codePlaceholder": "a.b * 3 > 2",
   "node.debug": "Debug",
+  "node.disabled": "Disabled",
   "node.deleteRootNodeDenied": "Unable to delete the root node",
   "node.editSubtreeDenied": "Unable to edit the subtree node",
   "node.desc": "Node desc",

public/locales/zh.json

@@ -79,6 +79,7 @@
   "node.args": "常量参数",
   "node.codePlaceholder": "a.b * 3 > 2",
   "node.debug": "调试",
+  "node.disabled": "禁用",
   "node.deleteRootNodeDenied": "不能删除根节点",
   "node.editSubtreeDenied": "不能编辑子树节点",
   "node.desc": "节点说明",

src/components/inspector.tsx

@@ -84,6 +84,7 @@ const NodeInspector: FC = () => {
     form.setFieldValue("type", def.type);
     form.setFieldValue("desc", data.desc);
     form.setFieldValue("debug", data.debug);
+    form.setFieldValue("disabled", data.disabled);
     form.setFieldValue("path", data.path);
     def.args?.forEach((v) => {
       form.setFieldValue(`args.${v.name}`, data.args?.[v.name]);
@@ -153,6 +154,7 @@ const NodeInspector: FC = () => {
     data.id = editingNode.data.id;
     data.name = values.name;
     data.debug = values.debug || undefined;
+    data.disabled = values.disabled || undefined;
     data.desc = values.desc || undefined;
     data.path = values.path || undefined;
 
@@ -189,6 +191,7 @@ const NodeInspector: FC = () => {
           name: workspace.nodeDefs.get(newname)?.name ?? newname,
           desc: editingNode.data.desc,
           debug: editingNode.data.debug,
+          disabled: editingNode.data.disabled,
         },
         editable: editingNode.editable,
       });
@@ -256,6 +259,9 @@ const NodeInspector: FC = () => {
           <Form.Item label={t("node.debug")} name="debug" valuePropName="checked">
             <Switch disabled={disabled && !editingNode.data.path} onChange={form.submit} />
           </Form.Item>
+          <Form.Item label={t("node.disabled")} name="disabled" valuePropName="checked">
+            <Switch disabled={disabled && !editingNode.data.path} onChange={form.submit} />
+          </Form.Item>
           <Form.Item label={t("node.subtree")} name="path">
             <AutoComplete
               disabled={disabled && !editingNode.data.path}

src/components/register-node.ts

@@ -213,7 +213,20 @@ G6.registerNode(
             width: 14,
             img: `./icons/Debug.svg`,
           },
-          name: "node-icon",
+          name: "node-debug-icon",
+        });
+      }
+
+      if (cfg.disabled) {
+        addShape("image", {
+          attrs: {
+            x: 182 - (cfg.debug ? 14 : 0),
+            y: 2,
+            height: 14,
+            width: 14,
+            img: `./icons/Disabled.svg`,
+          },
+          name: "node-disabled-icon",
         });
       }
 

src/misc/b3type.ts

@@ -36,6 +36,7 @@ export interface NodeModel {
   output?: string[];
   children?: NodeModel[];
   debug?: boolean;
+  disabled?: boolean;
   path?: string;
 }
 
@@ -54,6 +55,7 @@ export interface TreeGraphData extends G6TreeGraphData {
   children?: TreeGraphData[];
   def: NodeDef;
   debug?: boolean;
+  disabled?: boolean;
   parent?: string;
   path?: string;
   lastModified?: number;

src/misc/b3util.ts

@@ -35,7 +35,8 @@ export const isNodeEqual = (node1: NodeModel, node2: NodeModel) => {
     node1.name === node2.name &&
     node1.desc === node2.desc &&
     node1.path === node2.path &&
-    node1.debug === node2.debug
+    node1.debug === node2.debug &&
+    node1.disabled === node2.disabled
   ) {
     const def = useWorkspace.getState().getNodeDef(node1.name);
 
@@ -142,6 +143,7 @@ export const checkNodeData = (data: NodeModel | null | undefined) => {
 export const copyFromNode = (data: TreeGraphData, node: NodeModel) => {
   data.name = node.name;
   data.debug = node.debug;
+  data.disabled = node.disabled;
   data.desc = node.desc;
   data.path = node.path;
   data.args = node.args;
@@ -158,6 +160,7 @@ export const createNode = (data: TreeGraphData, includeChildren: boolean = true)
     desc: data.desc,
     path: data.path,
     debug: data.debug,
+    disabled: data.disabled,
   };
   if (data.input) {
     node.input = [];
@@ -280,6 +283,7 @@ export const createTreeData = (node: NodeModel, parent?: string) => {
     input: node.input,
     output: node.output,
     debug: node.debug,
+    disabled: node.disabled,
     def: workspace.getNodeDef(node.name),
     parent: parent,
   };
@@ -310,6 +314,7 @@ export const createTreeData = (node: NodeModel, parent?: string) => {
       treeData.lastModified = fs.statSync(subtreePath).mtimeMs;
       treeData.path = node.path;
       treeData.debug = node.debug;
+      treeData.disabled = node.disabled;
       treeData.parent = parent;
       treeData.id = node.id.toFixed();
       treeData.size = calcTreeDataSize(treeData);
@@ -346,6 +351,7 @@ export const createFileData = (data: TreeGraphData, includeSubtree?: boolean) =>
     input: data.input || undefined,
     output: data.output || undefined,
     debug: data.debug || undefined,
+    disabled: data.disabled || undefined,
     path: data.path || undefined,
   };
   if (data.children?.length && (includeSubtree || !isSubtreeRoot(data))) {