add filter icons

public/locales/en.json

@@ -42,6 +42,7 @@
   "saveAs": "Save As...",
   "saveAsSubtree": "Save As Subtree",
   "searchFile": "Search File",
+  "searchNode": "Search Node",
   "services": "Services",
   "start": "Start",
   "undo": "Undo",

public/locales/zh.json

@@ -42,6 +42,7 @@
   "saveAs": "另存为...",
   "saveAsSubtree": "另存为子树",
   "searchFile": "搜索文件",
+  "searchNode": "搜索节点",
   "services": "服务",
   "start": "开始",
   "undo": "撤销",

src/components/editor.tsx

@@ -21,6 +21,9 @@ import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from "re
 import { useTranslation } from "react-i18next";
 import { FiDelete } from "react-icons/fi";
 import { IoMdReturnLeft } from "react-icons/io";
+import { PiCubeFocus } from "react-icons/pi";
+import { RiFocus3Fill, RiFocus3Line } from "react-icons/ri";
+import { VscCaseSensitive } from "react-icons/vsc";
 import { mergeRefs } from "react-merge-refs";
 import { useDebounceCallback } from "usehooks-ts";
 import "./register-node";
@@ -1002,69 +1005,96 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
         <Flex
           style={{
             position: "absolute",
-            marginTop: "10px",
+            width: "100%",
-            marginLeft: "10px",
+            justifyContent: "end",
-            backgroundColor: "#161b22",
+            paddingRight: "10px",
-            padding: "4px 10px 4px 10px",
+            paddingTop: "10px",
-            borderRadius: "4px",
-            borderLeft: "4px solid #f78166",
-            boxShadow: "0 0 8px 2px #0000005c",
-            alignItems: "center",
           }}
         >
-          <Input
+          <Flex
-            autoFocus
+            style={{
-            allowClear
+              backgroundColor: "#161b22",
-            size="small"
+              padding: "4px 10px 4px 10px",
-            style={{ borderRadius: "2px" }}
+              borderRadius: "4px",
-            onChange={(e) => onSearchChange(e.currentTarget.value)}
+              borderLeft: "3px solid #f78166",
-          />
+              boxShadow: "0 0 8px 2px #0000005c",
-          <div style={{ padding: "0 10px 0 5px" }}>
+              alignItems: "center",
-            {results.length ? `${resultIndex + 1}/${results.length}` : ""}
+            }}
-          </div>
+          >
-          <Button
+            <Input
-            icon={<ArrowDownOutlined />}
+              autoFocus
-            type="text"
+              size="small"
-            size="small"
+              style={{
-            style={{ width: "30px" }}
+                borderRadius: "2px",
-            disabled={results.length == 0}
+                paddingTop: "1px",
-            onClick={() => {
+                paddingBottom: "1px",
-              if (results.length > 0) {
+                paddingRight: "2px",
-                const idx = (resultIndex + 1) % results.length;
+              }}
-                setResultIndex(idx);
+              onChange={(e) => onSearchChange(e.currentTarget.value)}
-                editor.graph.focusItem(results[idx]);
+              suffix={
-                selectNode(results[idx]);
+                <Flex style={{ alignItems: "center" }}>
+                  <Button
+                    type="text"
+                    size="small"
+                    style={{ width: "20px", height: "20px" }}
+                    icon={<VscCaseSensitive style={{ width: "18px", height: "18px" }} />}
+                  />
+                  <Button
+                    type="text"
+                    size="small"
+                    style={{ width: "20px", height: "20px" }}
+                    icon={<RiFocus3Line />}
+                  />
+                </Flex>
               }
-            }}
+            />
-          />
+            <div style={{ padding: "0 10px 0 5px", minWidth: "40px" }}>
-          <Button
+              {results.length ? `${resultIndex + 1}/${results.length}` : ""}
-            icon={<ArrowUpOutlined />}
+            </div>
-            type="text"
+            <Button
-            size="small"
+              icon={<ArrowDownOutlined />}
-            style={{ width: "30px" }}
+              type="text"
-            disabled={results.length == 0}
+              size="small"
-            onClick={() => {
+              style={{ width: "30px" }}
-              if (results.length > 0) {
+              disabled={results.length == 0}
-                const idx = (resultIndex + results.length - 1) % results.length;
+              onClick={() => {
-                setResultIndex(idx);
+                if (results.length > 0) {
-                console.log(idx, results[idx]);
+                  const idx = (resultIndex + 1) % results.length;
-                editor.graph.focusItem(results[idx]);
+                  setResultIndex(idx);
-                selectNode(results[idx]);
+                  editor.graph.focusItem(results[idx]);
-              }
+                  selectNode(results[idx]);
-            }}
+                }
-          />
+              }}
-          <Button
+            />
-            icon={<CloseOutlined />}
+            <Button
-            type="text"
+              icon={<ArrowUpOutlined />}
-            size="small"
+              type="text"
-            style={{ width: "30px" }}
+              size="small"
-            onClick={() => {
+              style={{ width: "30px" }}
-              setShowingSearch(false);
+              disabled={results.length == 0}
-              setResults([]);
+              onClick={() => {
-              setResultIndex(0);
+                if (results.length > 0) {
-              keysRef.current?.focus();
+                  const idx = (resultIndex + results.length - 1) % results.length;
-            }}
+                  setResultIndex(idx);
-          />
+                  console.log(idx, results[idx]);
+                  editor.graph.focusItem(results[idx]);
+                  selectNode(results[idx]);
+                }
+              }}
+            />
+            <Button
+              icon={<CloseOutlined />}
+              type="text"
+              size="small"
+              style={{ width: "30px" }}
+              onClick={() => {
+                setShowingSearch(false);
+                setResults([]);
+                setResultIndex(0);
+                keysRef.current?.focus();
+              }}
+            />
+          </Flex>
         </Flex>
       )}
 

src/components/workspace.tsx

@@ -7,9 +7,9 @@ import { app } from "@electron/remote";
 import { Button, Flex, Layout, Space, Tabs, Tag, Tooltip } from "antd";
 import { FC, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { BiAddToQueue } from "react-icons/bi";
 import { FaExclamationTriangle, FaRegFolderOpen } from "react-icons/fa";
 import { PiTreeStructureFill } from "react-icons/pi";
+import { VscNewFolder, VscRepo } from "react-icons/vsc";
 import useForceUpdate from "use-force-update";
 import { useWindowSize } from "usehooks-ts";
 import { Editor } from "./editor";
@@ -275,7 +275,7 @@ export const Workspace: FC = () => {
                     }}
                     onClick={() => workspace.createProject()}
                   >
-                    <BiAddToQueue size="20px" />
+                    <VscNewFolder size="20px" />
                     {t("createProject")}
                   </Flex>
                   <Flex
@@ -289,7 +289,7 @@ export const Workspace: FC = () => {
                     }}
                     onClick={() => workspace.openProject()}
                   >
-                    <FaRegFolderOpen size="19px" />
+                    <VscRepo size="19px" />
                     {t("openProject")}
                   </Flex>
                 </Flex>
@@ -337,6 +337,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("insertNode"), hotkeys: "Enter" },
                   { label: t("deleteNode"), hotkeys: "Backspace" },
                 ].map((v) => (