fix editing variable no not use group

src/components/editor.tsx

@@ -21,21 +21,13 @@ import {
   EditTree,
   useWorkspace,
 } from "../contexts/workspace-context";
-import {
-  ImportDef,
-  isExprType,
-  NodeModel,
-  TreeGraphData,
-  TreeModel,
-  VarDef,
-  VERSION,
-} from "../misc/b3type";
+import { ImportDef, isExprType, NodeModel, TreeGraphData, TreeModel, VarDef } from "../misc/b3type";
 import * as b3util from "../misc/b3util";
 import { message } from "../misc/hooks";
 import i18n from "../misc/i18n";
 import { Hotkey, isMacos, useKeyDown } from "../misc/keys";
 import Path from "../misc/path";
-import { mergeClassNames, readJson } from "../misc/util";
+import { mergeClassNames, readJson, writeTree } from "../misc/util";
 import "./register-node";
 import { calcTreeDataSize } from "./register-node";
 
@@ -829,17 +821,7 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
     editor.autoId = b3util.refreshTreeDataId(editor.root, editor.data.firstid);
     editor.data.root = b3util.createFileData(editor.root);
     editor.modifiedTime = Date.now();
-    fs.writeFileSync(
-      path,
-      JSON.stringify(
-        {
-          ...editor.data,
-          version: VERSION,
-        },
-        null,
-        2
-      )
-    );
+    writeTree(path, editor.data);
     workspace.updateFileMeta(editor);
     editor.unsave = false;
     editor.graph.changeData(editor.root);

src/components/inspector.tsx

@@ -60,18 +60,17 @@ interface VarDefItem extends VarDef {
 }
 
 interface VarDefItemProps {
-  id: number;
+  name: number;
   disabled?: boolean;
   value?: VarDefItem;
   onChange?: (vardef: VarDefItem) => void;
-  onRemove?: (index: number | number[]) => void;
+  onRemove?: (name: number | number[]) => void;
 }
 
-const VarDefItem: FC<VarDefItemProps> = ({ id, value, onChange, onRemove, disabled }) => {
+const VarDefItem: FC<VarDefItemProps> = ({ name, onChange, onRemove, disabled, ...props }) => {
   const { t } = useTranslation();
   const form = useFormInstance();
-  const [name, setName] = useState(value?.name ?? "");
-  const [desc, setDesc] = useState(value?.desc ?? "");
+  const [value, setValue] = useState<VarDefItem>(props.value ?? { name: "", desc: "" });
   const { editing } = useWorkspace(
     useShallow((state) => ({
       editing: state.editing,
@@ -79,7 +78,7 @@ const VarDefItem: FC<VarDefItemProps> = ({ id, value, onChange, onRemove, disabl
   );
 
   const onSubmit = () => {
-    onChange?.({ name, desc });
+    onChange?.(value);
     form.submit();
   };
 
@@ -108,24 +107,24 @@ const VarDefItem: FC<VarDefItemProps> = ({ id, value, onChange, onRemove, disabl
         </div>
         <Input
           disabled={disabled}
-          value={name}
+          value={value.name}
           placeholder={t("tree.vars.name")}
           onBlur={onSubmit}
-          onChange={(e) => setName(e.target.value)}
+          onChange={(e) => setValue({ ...value, name: e.target.value })}
         />
         <Input
           disabled={disabled}
-          value={desc}
+          value={value.desc}
           placeholder={t("tree.vars.desc")}
           onBlur={onSubmit}
-          onChange={(e) => setDesc(e.target.value)}
+          onChange={(e) => setValue({ ...value, desc: e.target.value })}
         />
       </Space.Compact>
       {!disabled && (
         <MinusCircleOutlined
           style={{ marginBottom: "6px" }}
           onClick={() => {
-            onRemove?.(id);
+            onRemove?.(name);
             form.submit();
           }}
         />
@@ -257,7 +256,9 @@ const TreeInspector: FC = () => {
       desc: values.desc,
       export: values.export,
       firstid: Number(values.firstid),
-      group: Array.from(new Set((values.group as GroupDef[]).map((v) => (v.value ? v.name : ""))))
+      group: Array.from(
+        new Set(((values.group ?? []) as GroupDef[]).map((v) => (v.value ? v.name : "")))
+      )
         .filter((v) => v)
         .sort((a, b) => a.localeCompare(b)),
       declvar: (values.declvar as VarDef[])
@@ -369,7 +370,7 @@ const TreeInspector: FC = () => {
                         },
                       ]}
                     >
-                      <VarDefItem id={item.name} onRemove={remove} />
+                      <VarDefItem name={item.name} onRemove={remove} />
                     </Form.Item>
                   ))}
                   <Form.Item
@@ -405,7 +406,7 @@ const TreeInspector: FC = () => {
                   <div style={{ display: "flex", flexDirection: "column", rowGap: 0 }}>
                     {fields.map((item) => (
                       <Form.Item key={item.key} name={item.name} style={{ marginBottom: 2 }}>
-                        <VarDefItem id={item.name} disabled={true} />
+                        <VarDefItem name={item.name} disabled={true} />
                       </Form.Item>
                     ))}
                   </div>
@@ -456,7 +457,7 @@ const TreeInspector: FC = () => {
                           <div style={{ display: "flex", flexDirection: "column", rowGap: 0 }}>
                             {vars.map((v) => (
                               <Form.Item key={v.key} name={v.name} style={{ marginBottom: 2 }}>
-                                <VarDefItem id={v.name} disabled={true} />
+                                <VarDefItem name={v.name} disabled={true} />
                               </Form.Item>
                             ))}
                           </div>

src/misc/util.ts

@@ -7,16 +7,30 @@ export const readJson = (path: string) => {
 };
 
 export const readTree = (path: string) => {
-  const str = fs.readFileSync(path, "utf-8");
-  const data = JSON.parse(str) as TreeModel;
+  const data = readJson(path);
   data.version = data.version ?? VERSION;
   data.firstid = data.firstid ?? 1;
   data.group = data.group || [];
   data.import = data.import || [];
   data.declvar = data.declvar || [];
+  data.root = data.root || {};
   return data;
 };
 
+export const writeTree = (path: string, data: TreeModel) => {
+  writeJson(path, {
+    version: VERSION,
+    name: data.name,
+    desc: data.desc,
+    firstid: data.firstid,
+    export: data.export,
+    group: data.group,
+    import: data.import,
+    declvar: data.declvar,
+    root: data.root,
+  });
+};
+
 export const writeJson = (path: string, data: unknown) => {
   const str = JSON.stringify(data, undefined, 2);
   fs.writeFileSync(path, str, "utf-8");