fix editor search focus layout error

src/components/editor.tsx

@@ -44,7 +44,6 @@ interface FilterOption {
   filterFocus: boolean;
   filterType: "content" | "id";
   placeholder: string;
-  isFocused: boolean;
 }
 
 const createTreeData = (node: NodeModel, parent?: string) => {
@@ -227,7 +226,6 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
     filterFocus: true,
     filterType: "content",
     placeholder: "",
-    isFocused: false,
   });
 
   const onSearchChange = (option: FilterOption) => {
@@ -710,10 +708,6 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
   };
 
   const createNode = () => {
-    if (filterOption.isFocused) {
-      return;
-    }
-
     if (!editor.selectedId) {
       message.warning(t("node.noNodeSelected"));
       return;
@@ -1391,8 +1385,6 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
                   index: 0,
                 })
               }
-              onFocus={() => setFilterOption({ ...filterOption, isFocused: true })}
-              onBlur={() => setFilterOption({ ...filterOption, isFocused: false })}
               onKeyDownCapture={handleKeyDown}
               suffix={
                 <Flex gap="2px" style={{ alignItems: "center" }}>
@@ -1421,12 +1413,12 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
                       filterOption.filterFocus && "b3-editor-filter-selected"
                     )}
                     icon={<RiFocus3Line />}
-                    onClick={() =>
+                    onClick={() => {
                       onSearchChange({
                         ...filterOption,
                         filterFocus: !filterOption.filterFocus,
-                      })
-                    }
+                      });
+                    }}
                   />
                 </Flex>
               }
@@ -1471,7 +1463,6 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
                   filterStr: "",
                   filterType: "content",
                   placeholder: "",
-                  isFocused: false,
                 });
                 keysRef.current?.focus();
               }}

src/components/inspector.tsx

@@ -50,7 +50,6 @@ import {
   isNodeArgOptional,
   isValidVariableName,
   isVariadic,
-  loadVarDef,
   parseExpr,
   usingGroups,
   usingVars,
@@ -259,7 +258,6 @@ const TreeInspector: FC = () => {
 
   // set form values
   useEffect(() => {
-    loadVarDef(workspace.editingTree.import);
     form.resetFields();
     form.setFieldValue("name", workspace.editingTree.name);
     form.setFieldValue("desc", workspace.editingTree.desc);
@@ -624,7 +622,10 @@ const NodeInspector: FC = () => {
     form.setFieldValue("debug", data.debug);
     form.setFieldValue("disabled", data.disabled);
     form.setFieldValue("path", data.path);
-    form.setFieldValue("group", def.group);
+    form.setFieldValue(
+      "group",
+      def.group?.map((g) => ({ label: g, value: g }))
+    );
     if (def.children === undefined || def.children === -1) {
       form.setFieldValue("children", t("node.children.unlimited"));
     } else {
@@ -872,12 +873,13 @@ const NodeInspector: FC = () => {
           labelCol={{ span: "auto" }}
           onFinish={finish}
         >
-          <Form.Item name="id" label={t("node.id")}>
+          <Form.Item name="type" label={t("node.type")}>
             <Input disabled={true} />
           </Form.Item>
+          {workspace.groupDefs.length > 0 && def.group?.length && (
             <Form.Item
-            name="type"
-            label={t("node.type")}
+              name="group"
+              label={t("node.group")}
               rules={[
                 {
                   validator() {
@@ -891,11 +893,12 @@ const NodeInspector: FC = () => {
                 },
               ]}
             >
-            <Input disabled={true} />
-          </Form.Item>
-          {workspace.groupDefs.length > 0 && def.group?.length && (
-            <Form.Item name="group" label={t("node.group")}>
-              <GroupDefItem disabled={true} />
+              <Select
+                style={{ fontSize: "13px" }}
+                mode="multiple"
+                suffixIcon={null}
+                disabled={true}
+              />
             </Form.Item>
           )}
           <Form.Item

src/components/workspace.tsx

@@ -445,6 +445,7 @@ export const Workspace: FC = () => {
                     showSaveDialog(editor);
                   } else {
                     workspace.close(path);
+                    keysRef.current?.focus();
                   }
                 }
               }}

src/contexts/workspace-context.ts

@@ -176,7 +176,7 @@ export type WorkspaceStore = {
   close: (path: string) => void;
   find: (path: string) => EditorStore | undefined;
   relative: (path: string) => string;
-  refresh: (path: string) => void;
+  refresh: (path: string) => boolean;
 
   save: () => void;
   saveAs: () => void;
@@ -592,9 +592,9 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
     const workspace = get();
     const editor = workspace.editors.find((v) => v.path === path);
     if (!editor) {
-      return;
+      return false;
     }
-    b3util.refreshDeclare(editor.root, editor.data.group, editor.declare);
+    return b3util.refreshDeclare(editor.root, editor.data.group, editor.declare);
   },
 
   save: () => {

src/index.scss

@@ -124,6 +124,10 @@ body {
   text-align: end;
 }
 
+.b3-inspector .ant-form-item-explain {
+  word-wrap: break-word;
+}
+
 .b3-inspector-vars-item .ant-input-group-addon {
   padding-left: 8px;
   padding-right: 8px;

src/misc/b3util.ts

@@ -859,7 +859,7 @@ export const isTreeFile = (path: string) => {
   return path.toLocaleLowerCase().endsWith(".json");
 };
 
-export const loadVarDef = (list: ImportDef[]) => {
+const loadVarDef = (list: ImportDef[], arr: Array<VarDef>) => {
   for (const entry of list) {
     if (!files[entry.path]) {
       console.warn(`file not found:${workdir}/${entry.path}`);
@@ -905,7 +905,7 @@ export const loadVarDef = (list: ImportDef[]) => {
           load(v);
           depends.add(v);
         });
-        console.log(`load var: ${path}`);
+        console.debug(`load var: ${path}`);
       } catch (e) {
         alertError(`parsing error: ${path}`);
       }
@@ -921,9 +921,7 @@ export const loadVarDef = (list: ImportDef[]) => {
       modified: entry.modified,
     };
   }
-  const all: Set<VarDef> = new Set();
-  list.forEach((entry) => entry.vars.forEach((v) => all.add(v)));
-  return Array.from(all);
+  list.forEach((entry) => arr.push(...entry.vars));
 };
 
 const collectSubtree = (data: TreeGraphData | NodeModel, list: string[] = []) => {
@@ -941,18 +939,44 @@ export const refreshDeclare = (
   group: string[],
   declare: FileVarDecl
 ) => {
-  const vars: Set<VarDef> = new Set(declare.declvar.slice());
+  const filter: Record<string, boolean> = {};
+  const vars: Array<VarDef> = new (class extends Array {
+    push(...items: VarDef[]): number {
+      for (const v of items) {
+        if (filter[v.name]) {
+          continue;
+        }
+        filter[v.name] = true;
+        super.push(v);
+      }
+      return this.length;
+    }
+  })();
+  vars.push(...declare.declvar);
   parsingStack.length = 0;
   declare.subtree = collectSubtree(root).map((v) => ({
     path: v,
     vars: [],
     depends: [],
   }));
-  loadVarDef(declare.import).forEach((v) => vars.add(v));
-  loadVarDef(declare.subtree).forEach((v) => {
-    vars.add(v);
-  });
+  loadVarDef(declare.import, vars);
+  loadVarDef(declare.subtree, vars);
+
+  let changed = false;
+  const lastGroup = Array.from(Object.keys(usingGroups)).sort();
+  group.sort();
+  if (lastGroup.length !== group.length || lastGroup.some((v, i) => v !== group[i])) {
+    changed = true;
+    console.debug("refresh group:", lastGroup, group);
     updateUsingGroups(group);
-  updateUsingVars(Array.from(vars));
-  console.debug("refresh declare", group, vars);
+  }
+
+  const lastVars = Array.from(Object.keys(usingVars ?? {})).sort();
+  vars.sort((a, b) => a.name.localeCompare(b.name));
+  if (lastVars.length !== vars.length || lastVars.some((v, i) => v !== vars[i].name)) {
+    changed = true;
+    console.debug("refresh vars:", lastVars, vars);
+    updateUsingVars(vars);
+  }
+  return changed;
 };