From 195028b62c279b2726014f19853f492cb2893154 Mon Sep 17 00:00:00 2001 From: codetypes Date: Thu, 20 Mar 2025 23:19:42 +0800 Subject: [PATCH] show node group in inspector --- public/locales/en.json | 1 + public/locales/zh.json | 1 + sample/vars/test-vars.json | 7 +- src/components/editor.tsx | 3 + src/components/explorer.tsx | 2 +- src/components/inspector.tsx | 132 ++++++++++++++++++++--------------- src/misc/b3util.ts | 1 + 7 files changed, 87 insertions(+), 60 deletions(-) diff --git a/public/locales/en.json b/public/locales/en.json index 8527cfd..d561be5 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -102,6 +102,7 @@ "node.desc": "Node desc", "node.disabled": "Disabled", "node.editSubtreeDenied": "Unable to edit the subtree node", + "node.group": "Node group", "node.id": "Node id", "node.inputVariable": "Input variables", "node.invalidChildren": "Invalid number of children", diff --git a/public/locales/zh.json b/public/locales/zh.json index 8f8c130..fb57a13 100644 --- a/public/locales/zh.json +++ b/public/locales/zh.json @@ -102,6 +102,7 @@ "node.desc": "节点说明", "node.disabled": "禁用", "node.editSubtreeDenied": "不能编辑子树节点", + "node.group": "节点分组", "node.id": "节点标识", "node.invalidChildren": "子节点数量不合法", "node.inputVariable": "输入变量", diff --git a/sample/vars/test-vars.json b/sample/vars/test-vars.json index bc0dc91..23e3405 100644 --- a/sample/vars/test-vars.json +++ b/sample/vars/test-vars.json @@ -1,10 +1,12 @@ { + "version": "1.8.0", "name": "test-vars", "desc": "", "firstid": 1, "export": true, "group": [ - "Client" + "Client", + "Server" ], "import": [ "vars/declare-core.json", @@ -95,6 +97,5 @@ ] } ] - }, - "version": "1.8.0" + } } \ No newline at end of file diff --git a/src/components/editor.tsx b/src/components/editor.tsx index e6d4f53..6d6e5c0 100644 --- a/src/components/editor.tsx +++ b/src/components/editor.tsx @@ -578,11 +578,14 @@ export const Editor: FC = ({ onUpdate: updateState, data: editor, . refreshHighlight(editor.root); } if (names.length === 0 && editor.searchingText) { + const matrix = editor.graphMatrix; onSearchChange({ ...filterOption, filterType: "content", filterStr: editor.searchingText, }); + editor.graphMatrix = matrix; + restoreViewport(); } }; diff --git a/src/components/explorer.tsx b/src/components/explorer.tsx index a14b84a..3954d90 100644 --- a/src/components/explorer.tsx +++ b/src/components/explorer.tsx @@ -325,7 +325,7 @@ export const Explorer: FC = () => { }; workspace.nodeDefs.forEach((nodeDef) => { (nodeDef.group || [""]).forEach((g, idx) => { - const typeGroup = !g ? nodeDef.type : nodeDef.type.replace(/\(([\w|]+)\)/, `(${g})`); + const typeGroup = !g ? nodeDef.type : `${nodeDef.type} (${g})`; let catalog = data.children?.find((nt) => nt.title === typeGroup); if (!catalog) { const type = getNodeType(nodeDef); diff --git a/src/components/inspector.tsx b/src/components/inspector.tsx index 6d975de..861d554 100644 --- a/src/components/inspector.tsx +++ b/src/components/inspector.tsx @@ -28,7 +28,6 @@ import { useDebounceCallback } from "usehooks-ts"; import { useShallow } from "zustand/react/shallow"; import { EditNode, EditTree, useWorkspace } from "../contexts/workspace-context"; import { - GroupDef, ImportDef, isBoolType, isEnumType, @@ -61,22 +60,22 @@ interface OptionType extends DefaultOptionType { value: string; } -interface VarDefItem extends VarDef { +interface VarItem extends VarDef { count?: number; } -interface VarDefItemProps { +interface VarItemProps { name: number; disabled?: boolean; - value?: VarDefItem; - onChange?: (vardef: VarDefItem) => void; + value?: VarItem; + onChange?: (vardef: VarItem) => void; onRemove?: (name: number | number[]) => void; } -const VarDefItem: FC = ({ name, onChange, onRemove, disabled, ...props }) => { +const VarDefItem: FC = ({ name, onChange, onRemove, disabled, ...props }) => { const { t } = useTranslation(); const form = useFormInstance(); - const [value, setValue] = useState(props.value ?? { name: "", desc: "" }); + const [value, setValue] = useState(props.value ?? { name: "", desc: "" }); const { editing } = useWorkspace( useShallow((state) => ({ editing: state.editing, @@ -140,6 +139,49 @@ const VarDefItem: FC = ({ name, onChange, onRemove, disabled, . ); }; +interface GroupDefItemProps { + disabled?: boolean; + value?: string[]; + onChange?: (value: string[]) => void; +} + +const GroupDefItem: FC = ({ disabled, onChange, ...props }) => { + const [value, setValue] = useState(props.value ?? []); + const form = useFormInstance(); + const workspace = useWorkspace( + useShallow((state) => ({ + groupDefs: state.groupDefs, + })) + ); + return ( + + {workspace.groupDefs.map((g) => ( + { + const arr = e.target.checked ? [...value, g] : value.filter((v) => v !== g); + setValue(arr); + onChange?.(arr); + form.submit(); + }} + > + {g} + + ))} + + ); +}; + const TreeInspector: FC = () => { const workspace = useWorkspace( useShallow((state) => ({ @@ -157,14 +199,6 @@ const TreeInspector: FC = () => { const { t } = useTranslation(); const [form] = Form.useForm(); - // group defs - const groupDefs: GroupDef[] = useMemo(() => { - return workspace.groupDefs.map((v) => ({ - name: v, - value: workspace.editingTree.group.includes(v), - })); - }, [workspace.groupDefs, workspace.editingTree]); - // using count const usingCount: Record = useMemo(() => { const count: Record = {}; @@ -228,7 +262,7 @@ const TreeInspector: FC = () => { form.setFieldValue("desc", workspace.editingTree.desc); form.setFieldValue("export", workspace.editingTree.export !== false); form.setFieldValue("firstid", workspace.editingTree.firstid); - form.setFieldValue("group", groupDefs); + form.setFieldValue("group", workspace.editingTree.group); form.setFieldValue( "declvar", workspace.editingTree.declvar.map((v) => ({ @@ -259,7 +293,7 @@ const TreeInspector: FC = () => { })), })) ); - }, [workspace.editingTree, groupDefs, usingCount]); + }, [workspace.editingTree, usingCount]); // eslint-disable-next-line @typescript-eslint/no-explicit-any const finish = (values: any) => { @@ -268,11 +302,7 @@ 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 : ""))) - ) - .filter((v) => v) - .sort((a, b) => a.localeCompare(b)), + group: ((values.group ?? []) as string[]).filter((g) => g).sort((a, b) => a.localeCompare(b)), declvar: (values.declvar as VarDef[]) .filter((v) => v && v.name) .map((v) => ({ @@ -319,38 +349,14 @@ const TreeInspector: FC = () => { form.submit()} /> - {groupDefs.length > 0 && ( + {workspace.groupDefs.length > 0 && ( <>

{t("tree.group")}

 - - {(items) => ( - - {items - .filter((v) => groupDefs[v.name]) - .map((item, idx) => ( - - {groupDefs[idx].name} - - ))} - - )} - + + + )} <> @@ -368,7 +374,7 @@ const TreeInspector: FC = () => { style={{ marginBottom: 2 }} rules={[ { - validator(_, value: VarDefItem) { + validator(_, value: VarItem) { if (!value.name || !/^[_\w]+\w*$/.test(value.name)) { return Promise.reject(new Error(t("tree.vars.invalidName"))); } @@ -426,7 +432,7 @@ const TreeInspector: FC = () => { { const NodeInspector: FC = () => { const workspace = useWorkspace( useShallow((state) => ({ + allFiles: state.allFiles, editing: state.editing, editingNode: state.editingNode!, - nodeDefs: state.nodeDefs, - allFiles: state.allFiles, fileTree: state.fileTree, - relative: state.relative, + groupDefs: state.groupDefs, + nodeDefs: state.nodeDefs, onEditingNode: state.onEditingNode, + relative: state.relative, })) ); @@ -577,6 +584,7 @@ const NodeInspector: FC = () => { form.setFieldValue("debug", data.debug); form.setFieldValue("disabled", data.disabled); form.setFieldValue("path", data.path); + form.setFieldValue("group", def.group); if (def.children === undefined || def.children === -1) { form.setFieldValue("children", t("node.children.unlimited")); } else { @@ -843,6 +851,11 @@ const NodeInspector: FC = () => { > + {workspace.groupDefs.length > 0 && def.group?.length && ( + + + + )} { const workspace = useWorkspace( useShallow((state) => ({ editingNodeDef: state.editingNodeDef!, + groupDefs: state.groupDefs, })) ); const { t } = useTranslation(); @@ -1474,6 +1488,7 @@ const NodeDefInspector: FC = () => { form.setFieldValue("type", def.type); form.setFieldValue("desc", def.desc); form.setFieldValue("doc", def.doc); + form.setFieldValue("group", def.group); if (def.children === undefined || def.children === -1) { form.setFieldValue("children", t("node.children.unlimited")); } else { @@ -1510,6 +1525,11 @@ const NodeDefInspector: FC = () => { + {workspace.groupDefs.length > 0 && def.group?.length && ( + + + + )} diff --git a/src/misc/b3util.ts b/src/misc/b3util.ts index 2c011dc..6b42abf 100644 --- a/src/misc/b3util.ts +++ b/src/misc/b3util.ts @@ -54,6 +54,7 @@ export const initWorkdir = (path: string, handler: typeof alertError) => { const group = v.type.match(/\(([\w|]+)\)/)?.[1]; if (group) { + v.type = v.type.match(/^\w+/)![0] as NodeDef["type"]; v.group = group.split("|"); v.group.forEach((g) => groups.add(g)); }