mac/behavior3editor
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

search node def in title bar

Browse Source
This commit is contained in:
codetypes committed 2024-08-03 00:12:22 +08:00
1 parent 27bf5b98cc
commit d582fadf6a
5 files changed
+86 -30
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/explorer.tsx
+40 -13
View File
@@ -35,6 +35,7 @@ type MenuEvent =
export type NodeTreeType = {
title: string;
path: string;
def?: NodeDef;
icon?: React.ReactNode;
isLeaf?: boolean;
@@ -72,7 +73,7 @@ const findParent = (node: FileTreeType, parent?: FileTreeType): FileTreeType | u
}
};
const resolveKeys = (path: string, node: FileTreeType, keys: React.Key[]) => {
const resolveKeys = (path: string, node: FileTreeType | NodeTreeType, keys: React.Key[]) => {
if (node.path === path) {
return true;
}
@@ -274,6 +275,7 @@ export const Explorer: FC = () => {
const workspace = {
close: useWorkspace((state) => state.close),
editing: useWorkspace((state) => state.editing),
editingNodeDef: useWorkspace((state) => state.editingNodeDef),
editors: useWorkspace((state) => state.editors),
fileTree: useWorkspace((state) => state.fileTree),
nodeDefs: useWorkspace((state) => state.nodeDefs),
@@ -290,6 +292,10 @@ export const Explorer: FC = () => {
const [newName, setNewName] = useState<string | null>(null);
const [contextMenu, setContextMenu] = useState<ItemType[]>([]);
const rootNodedefName = "nodeTree.root";
const [selectedNodedefKeys, setSelectedNodedefKeys] = useState<string[]>([]);
const [expandedNodedefKeys, setExpandedNodedefKeys] = useState<React.Key[]>([rootNodedefName]);
if (workspace.fileTree) {
workspace.fileTree.icon = (
<Flex justify="center" align="center" style={{ height: "100%" }}>
@@ -301,6 +307,7 @@ export const Explorer: FC = () => {
const nodeTree = useMemo(() => {
const data: NodeTreeType = {
title: t("nodeDefinition"),
path: rootNodedefName,
icon: (
<Flex justify="center" align="center" style={{ height: "100%" }}>
<PiTreeStructureFill size={19} />
@@ -318,6 +325,7 @@ export const Explorer: FC = () => {
const type = getNodeType(nodeDef);
catalog = {
title: nodeDef.type,
path: `nodeTree.catalog.${nodeDef.type}`,
children: [],
icon: (
<Flex justify="center" align="center" style={{ height: "100%" }}>
@@ -335,17 +343,14 @@ export const Explorer: FC = () => {
title: `${nodeDef.name}(${nodeDef.desc})`,
isLeaf: true,
def: nodeDef,
path: `${nodeDef.name}`,
icon: nodeDef.icon ? (
<Flex justify="center" align="center" style={{ height: "100%" }}>
<img
className="b3-node-icon"
key={catalog.title}
style={{ width: "13px", height: "13px", color: "white" }}
src={
process.env.VITE_DEV_SERVER_URL && isMacos
? `${Path.basename(workspace.workdir)}/${nodeDef.icon}`
: `${workspace.workdir}/${nodeDef.icon}`
}
src={`file:///${workspace.workdir}/${nodeDef.icon}`}
/>
</Flex>
) : (
@@ -362,6 +367,7 @@ export const Explorer: FC = () => {
return data;
}, [t, workspace.nodeDefs]);
// expand the selected tree
useEffect(() => {
if (workspace.editing) {
const keys: React.Key[] = [];
@@ -376,6 +382,21 @@ export const Explorer: FC = () => {
}
}, [workspace.editing]);
// expand the selected node def
useEffect(() => {
if (workspace.editingNodeDef) {
const keys: React.Key[] = [];
resolveKeys(workspace.editingNodeDef.data.name, nodeTree, keys);
for (const k of expandedNodedefKeys) {
if (keys.indexOf(k) === -1) {
keys.push(k);
}
}
setExpandedNodedefKeys(keys);
setSelectedNodedefKeys([workspace.editingNodeDef.data.name]);
}
}, [t, workspace.editingNodeDef]);
const keysRef = useHotkeys<HTMLDivElement>(
[
Hotkey.F2,
@@ -763,6 +784,8 @@ export const Explorer: FC = () => {
tabIndex={-1}
treeData={workspace.fileTree ? [workspace.fileTree] : []}
fieldNames={{ key: "path" }}
expandedKeys={expandedKeys}
selectedKeys={selectedKeys}
onExpand={(keys) => {
setExpandedKeys(keys);
}}
@@ -840,7 +863,6 @@ export const Explorer: FC = () => {
onDragStart={(e) => {
e.event.dataTransfer.setData("explore-file", e.node.path);
}}
defaultExpandedKeys={[workspace.fileTree.path]}
draggable={
newName !== null
? false
@@ -852,17 +874,19 @@ export const Explorer: FC = () => {
},
}
}
expandedKeys={expandedKeys}
switcherIcon={<DownOutlined />}
selectedKeys={selectedKeys}
/>
</div>
</Dropdown>
<DirectoryTree
tabIndex={-1}
fieldNames={{ key: "title" }}
treeData={nodeTree ? [nodeTree] : []}
defaultExpandedKeys={[nodeTree.title]}
fieldNames={{ key: "path" }}
treeData={[nodeTree]}
expandedKeys={expandedNodedefKeys}
selectedKeys={selectedNodedefKeys}
onExpand={(keys) => {
setExpandedNodedefKeys(keys);
}}
draggable={{ icon: false, nodeDraggable: (node) => !!node.isLeaf }}
titleRender={(node) => (
<div style={{ flex: 1, width: 0, minWidth: 0 }}>
@@ -879,11 +903,14 @@ export const Explorer: FC = () => {
)}
onSelect={(_, info) => {
const node = info.node;
if (node && node.isLeaf) {
if (node) {
if (node.isLeaf) {
workspace.onEditingNodeDef({
data: node.def!,
});
}
setSelectedNodedefKeys([node.path]);
}
}}
onDragStart={(e) => {
e.event.dataTransfer.setData("explore-node", e.node.def?.name ?? "");
src/components/inspector.tsx
+7 -6
View File
@@ -2,6 +2,7 @@ import { EditNode, EditTree, useWorkspace } from "@/contexts/workspace-context";
import { NodeArg, NodeModel, TreeGraphData } from "@/misc/b3type";
import { checkOneof } from "@/misc/b3util";
import { Hotkey, isMacos } from "@/misc/keys";
import { mergeClassNames } from "@/misc/util";
import { EditOutlined } from "@ant-design/icons";
import {
AutoComplete,
@@ -57,8 +58,8 @@ const TreeInspector: FC = () => {
<span style={{ fontSize: "18px", fontWeight: "600" }}>{t("tree.overview")}</span>
</div>
<div
className={isMacos ? undefined : "b3-overflow"}
style={{ overflow: "auto", height: "100%", padding: "24px" }}
className={mergeClassNames("b3-inspector-content", isMacos ? "" : "b3-overflow")}
style={{ overflow: "auto", height: "100%" }}
>
<Form form={form} labelCol={{ span: 8 }} onFinish={finish}>
<Form.Item name="name" label={t("tree.name")}>
@@ -263,8 +264,8 @@ const NodeInspector: FC = () => {
<span style={{ fontSize: "18px", fontWeight: "600" }}>{def.desc}</span>
</div>
<div
className={isMacos ? undefined : "b3-overflow"}
style={{ overflow: "auto", height: "100%", padding: "24px" }}
className={mergeClassNames("b3-inspector-content", isMacos ? "" : "b3-overflow")}
style={{ overflow: "auto", height: "100%" }}
>
<Form
form={form}
@@ -549,8 +550,8 @@ const NodeDefInspector: FC = () => {
<span style={{ fontSize: "18px", fontWeight: "600" }}>{t("nodeDefinition")}</span>
</div>
<div
className={isMacos ? undefined : "b3-overflow"}
style={{ overflow: "auto", height: "100%", padding: "24px" }}
className={mergeClassNames("b3-inspector-content", isMacos ? "" : "b3-overflow")}
style={{ overflow: "auto", height: "100%" }}
>
<Form
form={form}
src/components/register-node.ts
+1 -3
View File
@@ -177,9 +177,7 @@ G6.registerNode(
// icon
const img = nodeDef.icon
? process.env.VITE_DEV_SERVER_URL && isMacos
? `${Path.basename(workspace.workdir)}/${nodeDef.icon}`
: `${workspace.workdir}/${nodeDef.icon}`
? `file:///${workspace.workdir}/${nodeDef.icon}`
: `./icons/${classify}.svg`;
addShape("image", {
attrs: {
src/components/titlebar.tsx
+33 -7
View File
@@ -5,19 +5,23 @@ import { SearchOutlined } from "@ant-design/icons";
import { Button, Flex, LayoutProps, Select } from "antd";
import React, { FC, useMemo } from "react";
import { Menu } from "./menu";
import { NodeDef } from "@/misc/b3type";
interface OptionType {
label: string | React.ReactNode;
value: string;
path: string;
path?: string;
nodeDef?: NodeDef;
}
export const TitleBar: FC<LayoutProps> = () => {
const workspace = {
allFiles: useWorkspace((state) => state.allFiles),
fileTree: useWorkspace((state) => state.fileTree),
nodeDefs: useWorkspace((state) => state.nodeDefs),
isShowingSearch: useWorkspace((state) => state.isShowingSearch),
onShowingSearch: useWorkspace((state) => state.onShowingSearch),
onEditingNodeDef: useWorkspace((state) => state.onEditingNodeDef),
open: useWorkspace((state) => state.open),
name: useWorkspace((state) => state.path),
relative: useWorkspace((state) => state.relative),
@@ -41,7 +45,23 @@ export const TitleBar: FC<LayoutProps> = () => {
path: file.path,
});
});
options.sort((a, b) => a.path.localeCompare(b.path));
workspace.nodeDefs.forEach((def) => {
const value = def.name;
const desc = def.desc ?? "";
options.push({
label: (
<div>
{value}
<span> </span>
<span style={{ color: "gray", fontSize: "12px" }}>
{value} {desc}
</span>
</div>
),
value: `${value.toLocaleLowerCase()} ${desc.toLocaleLowerCase()}`,
nodeDef: def,
});
});
return options;
}, [workspace.allFiles, workspace.fileTree]);
return (
@@ -103,17 +123,23 @@ export const TitleBar: FC<LayoutProps> = () => {
onChange={(_, option) => {
if (!(option instanceof Array)) {
workspace.onShowingSearch(false);
if (option.path) {
workspace.open(option.path);
} else if (option.nodeDef) {
workspace.onEditingNodeDef({
data: option.nodeDef,
});
}
}
}}
filterOption={(input, option) =>
(option?.value ?? "").includes(input.toLocaleLowerCase())
}
filterSort={(optionA, optionB) =>
(optionA?.value ?? "")
.toLowerCase()
.localeCompare((optionB?.value ?? "").toLowerCase())
}
// filterSort={(optionA, optionB) =>
// (optionA?.value ?? "")
// .toLowerCase()
// .localeCompare((optionB?.value ?? "").toLowerCase())
// }
options={searchOptions}
/>
)}
src/index.scss
+5 -1
View File
@@ -107,8 +107,12 @@ body {
width: 12px !important;
}
.b3-inspector-content {
padding: 20px;
}
.b3-inspector .ant-form-item {
margin-bottom: 16px;
margin-bottom: 10px;
}
.b3-inspector .ant-form-item-label {