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

Merge pull request #22 from GeorgeShiZZZ/master

Browse Source 
add ctrl/command + g to jump node by id
This commit is contained in:
huangjx authored and GitHub committed 2024-04-30 14:34:45 +08:00
2 parents 7878e58ab5 d32c457990
commit cbefc60750
6 files changed
+148 -77
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/locales/en.json
+1
View File
@@ -19,6 +19,7 @@
"hide": "Hide Behavior3",
"hideOthers": "Hide Others",
"insertNode": "Insert Node",
"jumpNode": "Jump Node",
"language": "Language",
"moveToTrash": "Move to Trash",
"newFile": "New File...",
public/locales/zh.json
+1
View File
@@ -19,6 +19,7 @@
"hide": "隐藏 Behavior3",
"hideOthers": "隐藏其它",
"insertNode": "插入节点",
"jumpNode": "跳转节点",
"language": "语言",
"moveToTrash": "移至回收站",
"newFile": "新建行为树...",
src/components/editor.tsx
+120 -59
View File
@@ -15,10 +15,10 @@ import { ArrowDownOutlined, ArrowUpOutlined, CloseOutlined } from "@ant-design/i
import G6, { G6GraphEvent, Item, TreeGraph } from "@antv/g6";
import { dialog } from "@electron/remote";
import { useSize } from "ahooks";
import { Button, Dropdown, Flex, FlexProps, Input, MenuProps } from "antd";
import { Button, Dropdown, Flex, FlexProps, Input, InputRef, MenuProps } from "antd";
import { clipboard } from "electron";
import * as fs from "fs";
import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
import React, { FC, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { FiDelete } from "react-icons/fi";
import { IoMdReturnLeft } from "react-icons/io";
@@ -40,6 +40,8 @@ interface FilterOption {
filterStr: string;
filterCase: boolean;
filterFocus: boolean;
filterType: string;
placeholder: string;
}
const createMenu = () => {
@@ -131,6 +133,7 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
workdir: useWorkspace((state) => state.workdir),
};
const searchIptRef = useRef<InputRef>(null);
const graphRef = useRef(null);
const sizeRef = useRef(null);
const editorSize = useSize(sizeRef);
@@ -144,6 +147,8 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
filterStr: "",
filterCase: false,
filterFocus: false,
filterType: "",
placeholder: ""
});
const onSearchChange = (option: FilterOption) => {
@@ -231,32 +236,38 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
node.highlightGray = option.filterFocus;
if (option.filterStr) {
let found = false;
if (includeString(node.name, option) || includeString(node.desc || node.def.desc, option)) {
found = true;
} else if (node.input) {
for (const str of node.input) {
if (includeString(str, option)) {
found = true;
break;
}
if (option.filterType === "nodeId") {
if (option.filterStr === node.id) {
found = true
}
} else if (node.args) {
for (const str in node.args) {
if (includeString(str, option)) {
found = true;
break;
}
}
} else if (node.output) {
for (const str of node.output) {
if (includeString(str, option)) {
found = true;
break;
}
}
} else if (node.path) {
if (includeString(node.path, option)) {
} else {
if (includeString(node.name, option) || includeString(node.desc || node.def.desc, option)) {
found = true;
} else if (node.input) {
for (const str of node.input) {
if (includeString(str, option)) {
found = true;
break;
}
}
} else if (node.args) {
for (const str in node.args) {
if (includeString(str, option)) {
found = true;
break;
}
}
} else if (node.output) {
for (const str of node.output) {
if (includeString(str, option)) {
found = true;
break;
}
}
} else if (node.path) {
if (includeString(node.path, option)) {
found = true;
}
}
}
if (found) {
@@ -1008,7 +1019,11 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
break;
}
case "searchNode": {
setShowingSearch(true);
searchByType("");
break;
}
case "jumpNode": {
searchByType("nodeId");
break;
}
case "editSubtree": {
@@ -1075,6 +1090,42 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
}
};
const searchByType = (type: string) => {
let placeholder = ""
const filterType = type
// todo multiple parameter format judgment
switch (type) {
case "nodeId":
placeholder = t("jumpNode")
break
default:
placeholder = t("searchNode")
break
}
if (!showingSearch) {
setFilterOption({ ...filterOption, placeholder, filterType })
setShowingSearch(true)
return
}
if (filterOption.filterType === type) return searchIptRef.current?.focus()
setShowingSearch(false)
setTimeout(() => {
setShowingSearch(true)
setFilterOption({ ...filterOption, placeholder, filterType })
searchIptRef.current?.focus()
}, 50)
}
const handleKeyDown = (e: KeyboardEvent) => {
if (e.code === Hotkey.Enter) {
nextResult()
} else if ((e.ctrlKey || e.metaKey) && e.code === "KeyF") {
searchByType("")
} else if ((e.ctrlKey || e.metaKey) && e.code === "KeyG") {
searchByType("nodeId")
}
}
return (
<div
{...props}
@@ -1104,6 +1155,8 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
}}
>
<Input
ref={searchIptRef}
placeholder={ filterOption.placeholder }
autoFocus
size="small"
style={{
@@ -1119,24 +1172,26 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
index: 0,
})
}
onKeyDown={(e) => e.code === Hotkey.Enter && nextResult()}
onKeyDown={ handleKeyDown }
suffix={
<Flex gap="2px" style={{ alignItems: "center" }}>
<Button
type="text"
size="small"
className={mergeClassNames(
"b3-editor-button-filter",
filterOption.filterCase && "b3-editor-button-filter-selected"
)}
icon={<VscCaseSensitive style={{ width: "18px", height: "18px" }} />}
onClick={() =>
onSearchChange({
...filterOption,
filterCase: !filterOption.filterCase,
})
}
/>
{filterOption.filterType !== "nodeId" && (
<Button
type="text"
size="small"
className={mergeClassNames(
"b3-editor-button-filter",
filterOption.filterCase && "b3-editor-button-filter-selected"
)}
icon={<VscCaseSensitive style={{ width: "18px", height: "18px" }} />}
onClick={() =>
onSearchChange({
...filterOption,
filterCase: !filterOption.filterCase,
})
}
/>
)}
<Button
type="text"
size="small"
@@ -1160,22 +1215,26 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
? `${filterOption.index + 1}/${filterOption.results.length}`
: ""}
</div>
<Button
icon={<ArrowDownOutlined />}
type="text"
size="small"
style={{ width: "30px" }}
disabled={filterOption.results.length == 0}
onClick={nextResult}
/>
<Button
icon={<ArrowUpOutlined />}
type="text"
size="small"
style={{ width: "30px" }}
disabled={filterOption.results.length == 0}
onClick={prevResult}
/>
{filterOption.filterType !== "nodeId" && (
<Button
icon={<ArrowDownOutlined />}
type="text"
size="small"
style={{ width: "30px" }}
disabled={filterOption.results.length == 0}
onClick={nextResult}
/>
)}
{filterOption.filterType !== "nodeId" && (
<Button
icon={<ArrowUpOutlined />}
type="text"
size="small"
style={{ width: "30px" }}
disabled={filterOption.results.length == 0}
onClick={prevResult}
/>
)}
<Button
icon={<CloseOutlined />}
type="text"
@@ -1189,6 +1248,8 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
filterCase: false,
filterFocus: false,
filterStr: "",
filterType: "",
placeholder: ""
});
keysRef.current?.focus();
}}
src/components/workspace.tsx
+5 -1
View File
@@ -44,7 +44,7 @@ export const Workspace: FC = () => {
const { width = 0, height = 0 } = useWindowSize();
const keysRef = useHotkeys<HTMLDivElement>(
[Hotkey.Save, Hotkey.CloseEditor, Hotkey.SearchTree, Hotkey.Build, Hotkey.SearchNode],
[Hotkey.Save, Hotkey.CloseEditor, Hotkey.SearchTree, Hotkey.Build, Hotkey.SearchNode, Hotkey.JumpNode],
(event) => {
if (isHotkeyPressed(Hotkey.Save)) {
event.preventDefault();
@@ -67,6 +67,9 @@ export const Workspace: FC = () => {
} else if (isHotkeyPressed(Hotkey.SearchNode)) {
event.preventDefault();
workspace.editing?.dispatch("searchNode");
} else if (isHotkeyPressed(Hotkey.JumpNode)) {
event.preventDefault()
workspace.editing?.dispatch("jumpNode")
}
}
);
@@ -338,6 +341,7 @@ export const Workspace: FC = () => {
{ label: t("searchFile"), hotkeys: isMacos ? "⌘ P" : "Ctrl + P" },
{ label: t("build"), hotkeys: isMacos ? "⌘ B" : "Ctrl + B" },
{ label: t("searchNode"), hotkeys: isMacos ? "⌘ F" : "Ctrl + F" },
{ label: t("jumpNode"), hotkeys: isMacos ? "⌘ G" : "Ctrl + G" },
{ label: t("insertNode"), hotkeys: "Enter" },
{ label: t("deleteNode"), hotkeys: "Backspace" },
].map((v) => (
src/contexts/workspace-context.ts
+19 -16
View File
@@ -16,6 +16,7 @@ let buildDir: string | undefined;
interface BatchScript {
processTree?(tree: TreeModel): TreeModel;
processNode?(node: NodeModel, tree: TreeModel): NodeModel;
}
@@ -26,6 +27,7 @@ export type EditEvent =
| "replace"
| "delete"
| "insert"
| "jumpNode"
| "undo"
| "redo"
| "reload"
@@ -143,13 +145,13 @@ export type WorkspaceStore = {
};
const loadFileTree = (workdir: string, filename: string) => {
const fullpath = fs.realpathSync(`${workdir}/${filename}`);
const fullpath = fs.realpathSync(`${ workdir }/${ filename }`);
if (!fs.existsSync(fullpath)) {
return;
}
const stat = fs.statSync(fullpath);
if (!(stat.isDirectory() || fullpath.endsWith(".json"))) {
if (!( stat.isDirectory() || fullpath.endsWith(".json") )) {
return;
}
@@ -162,13 +164,13 @@ const loadFileTree = (workdir: string, filename: string) => {
data.children = [];
const files = fs.readdirSync(data.path);
files.forEach((v) => {
const child = loadFileTree(workdir, `${filename}/${v}`);
const child = loadFileTree(workdir, `${ filename }/${ v }`);
if (child) {
data.children?.push(child);
}
});
data.children.sort((a, b) => {
if ((a.children && b.children) || (!a.children && !b.children)) {
if (( a.children && b.children ) || ( !a.children && !b.children )) {
return a.title.localeCompare(b.title);
} else {
return a.children ? -1 : 1;
@@ -186,7 +188,7 @@ const saveFile = (editor?: EditorStore) => {
}
};
export const useWorkspace = create<WorkspaceStore>((set, get) => ({
export const useWorkspace = create<WorkspaceStore>((set, get) => ( {
allFiles: [],
fileTree: undefined,
editors: [],
@@ -208,15 +210,15 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
if (!fs.existsSync(path)) {
useSetting.getState().removeRecent(path);
}
message.error(`load workspace error: ${path}`);
message.error(`load workspace error: ${ path }`);
}
}
},
createProject: () => {
const path = dialog.showSaveDialogSync({
properties: ["showOverwriteConfirmation", "createDirectory"],
filters: [{ name: "Behavior3 Workspace", extensions: ["b3-workspace"] }],
properties: [ "showOverwriteConfirmation", "createDirectory" ],
filters: [ { name: "Behavior3 Workspace", extensions: [ "b3-workspace" ] } ],
});
if (path) {
const workspace = get();
@@ -232,7 +234,7 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
const win = BrowserWindow.getFocusedWindow();
if (win) {
const path = dialog.showOpenDialogSync(win, {
filters: [{ name: "workspace", extensions: ["b3-workspace"] }],
filters: [ { name: "workspace", extensions: [ "b3-workspace" ] } ],
});
if (path?.length) {
ipcRenderer.invoke("open-win", path[0]);
@@ -246,7 +248,7 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
if (workspace.path)
if (!buildDir) {
buildDir = dialog.showOpenDialogSync({
properties: ["openDirectory", "createDirectory"],
properties: [ "openDirectory", "createDirectory" ],
})?.[0];
}
if (buildDir) {
@@ -279,9 +281,9 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
batchProject: () => {
const workspace = get();
const scriptPath = dialog.showOpenDialogSync({
properties: ["openFile"],
properties: [ "openFile" ],
defaultPath: workspace.workdir,
filters: [{ name: "Javascript", extensions: ["js"] }],
filters: [ { name: "Javascript", extensions: [ "js" ] } ],
})?.[0];
if (scriptPath) {
try {
@@ -327,7 +329,7 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
workspace.edit(editor.path);
} catch (error) {
console.error(error);
message.error(`invalid file: ${path}`);
message.error(`invalid file: ${ path }`);
}
} else if (workspace.editing !== editor) {
workspace.edit(editor.path);
@@ -387,7 +389,8 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
saveFile(workspace.editing);
},
saveAs: () => {},
saveAs: () => {
},
saveAll: () => {
const workspace = get();
@@ -442,7 +445,7 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
loadNodeDefs: () => {
const workspace = get();
const nodeDefData = readJson(`${workspace.workdir}/node-config.b3-setting`) as NodeDef[];
const nodeDefData = readJson(`${ workspace.workdir }/node-config.b3-setting`) as NodeDef[];
const nodeDefs: Map<string, NodeDef> = new Map();
for (const v of nodeDefData) {
nodeDefs.set(v.name, v);
@@ -476,4 +479,4 @@ export const useWorkspace = create<WorkspaceStore>((set, get) => ({
const workspace = get();
return workspace.nodeDefs.has(name);
},
}));
} ));
src/misc/keys.ts
+2 -1
View File
@@ -33,7 +33,7 @@ export function useHotkeys<T extends HTMLElement>(
keys: Keys,
callback: HotkeyCallback,
options?: OptionsOrDependencyArray,
dependencies?: OptionsOrDependencyArray
dependencies?: OptionsOrDependencyArray,
): MutableRefObject<RefType<T>> {
if (keys instanceof Array) {
keys = keys.filter((v) => !!v);
@@ -52,6 +52,7 @@ export const Hotkey = {
Escape: Key.Escape,
F2: Key.F2,
Insert: Key.Insert,
JumpNode: hotkey("ctrl+g"),
MacDelete: isMacos ? hotkey("ctrl+backspace") : "",
Paste: hotkey("ctrl+v"),
Redo: isMacos ? hotkey("shift+ctrl+z") : hotkey("ctrl+y"),