✨ 实现节点搜索并一项一项切换视角

Author: Littlefean

src/core/controller/Controller.tsx

@@ -178,6 +178,10 @@ export namespace Controller {
         StageManager.nodes.filter((node) => node.isSelected),
       );
     }
+    // 检测按下 ctrl + F 搜索
+    if (event.ctrlKey && key === "f") {
+      
+    }
   }
 
   function keyup(event: KeyboardEvent) {

src/core/stage/Stage.tsx

@@ -70,6 +70,14 @@ export namespace Stage {
    */
   export let keyOnlyVirtualNewLocation = Vector.getZero();
 
+  /**
+   * 搜索结果
+   */
+  export let searchResultNodes: Node[] = [];
+  /**
+   * 搜索结果的索引
+   */
+  export let currentSearchResultIndex = 0;
   /**
    * 逻辑总入口
    */

src/pages/index.tsx

@@ -8,7 +8,8 @@ import { StageManager } from "../core/stage/stageManager/StageManager";
 import React from "react";
 import Toolbar from "./_toolbar";
 import { Settings } from "../core/Settings";
-import { invoke } from "@tauri-apps/api/core";
+import { cn } from "../utils/cn";
+import { Camera } from "../core/stage/Camera";
 
 export default function Home() {
   const canvasRef: React.RefObject<HTMLCanvasElement> = useRef(null);
@@ -17,6 +18,24 @@ export default function Home() {
   const dialog = useDialog();
   const [cursorName, setCursorName] = React.useState("default");
 
+  const [isSearchingShow, setIsSearchingShow] = React.useState(false);
+
+  const [currentSearchResultIndex, setCurrentSearchResultIndex] =
+    React.useState(0);
+
+  useEffect(() => {
+    if (Stage.searchResultNodes.length == 0) {
+      setCurrentSearchResultIndex(-1);
+    } else {
+      setCurrentSearchResultIndex(Stage.currentSearchResultIndex);
+    }
+  }, [Stage.currentSearchResultIndex]);
+
+  const [searchResultCount, setSearchResultCount] = React.useState(0);
+  useEffect(() => {
+    setSearchResultCount(Stage.searchResultNodes.length);
+  }, [Stage.searchResultNodes]);
+
   useEffect(() => {
     const handleResize = () => {
       if (canvasElement) {
@@ -29,6 +48,41 @@ export default function Home() {
     const handleBlur = () => {
       focus = false;
     };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // event.preventDefault();
+      if (Controller.pressingKeySet.has("control") && event.key === "f") {
+        Controller.pressingKeySet.clear();
+        // setIsSearching(true);
+        const searchString = prompt("请输入要搜索的节点名称");
+        if (searchString) {
+          // 开始搜索
+          Stage.searchResultNodes = [];
+          for (const node of StageManager.nodes) {
+            if (node.text.includes(searchString)) {
+              Stage.searchResultNodes.push(node);
+            }
+          }
+          Stage.currentSearchResultIndex = 0;
+          if (Stage.searchResultNodes.length > 0) {
+            setIsSearchingShow(true);
+            setCurrentSearchResultIndex(0);
+            // 选择第一个搜索结果节点
+            const currentNode =
+              Stage.searchResultNodes[Stage.currentSearchResultIndex];
+            currentNode.isSelected = true;
+            // 摄像机对准现在的节点
+            Camera.location = currentNode.rectangle.center.clone();
+          } else {
+            dialog.show({
+              title: "提示",
+              type: "info",
+              content: "没有找到匹配的节点",
+            });
+          }
+        }
+      }
+      // setSearchString(searchString + event.key)
+    };
 
     const canvasElement = canvasRef.current;
     let focus = true;
@@ -49,6 +103,7 @@ export default function Home() {
     window.addEventListener("resize", handleResize);
     window.addEventListener("focus", handleFocus);
     window.addEventListener("blur", handleBlur);
+    window.addEventListener("keydown", handleKeyDown);
 
     Settings.get("windowBackgroundAlpha").then((value) => {
       Renderer.backgroundAlpha = value;
@@ -86,11 +141,70 @@ export default function Home() {
   return (
     <>
       <Toolbar />
+      {isSearchingShow && (
+        <div
+          className={cn(
+            "fixed right-32 top-32 z-10 flex transform items-center rounded p-4 ring",
+            isSearchingShow,
+          )}
+        >
+          <span>
+            {currentSearchResultIndex + 1}/{searchResultCount}
+          </span>
+          <button
+            className="m-2 rounded-md bg-gray-500 text-white"
+            onClick={() => {
+              if (Stage.currentSearchResultIndex > 0) {
+                Stage.currentSearchResultIndex--;
+              }
+              // 取消选择所有节点
+              for (const node of StageManager.nodes) {
+                node.isSelected = false;
+              }
+              // 选择当前搜索结果节点
+              const currentNode =
+                Stage.searchResultNodes[Stage.currentSearchResultIndex];
+              currentNode.isSelected = true;
+              // 摄像机对准现在的节点
+              Camera.location = currentNode.rectangle.center.clone();
+            }}
+          >
+            Previous
+          </button>
+          <button
+            className="m-2 rounded-md bg-gray-500 text-white"
+            onClick={() => {
+              if (Stage.currentSearchResultIndex < searchResultCount - 1) {
+                Stage.currentSearchResultIndex++;
+              }
+              // 取消选择所有节点
+              for (const node of StageManager.nodes) {
+                node.isSelected = false;
+              }
+              // 选择当前搜索结果节点
+              const currentNode =
+                Stage.searchResultNodes[Stage.currentSearchResultIndex];
+              currentNode.isSelected = true;
+              // 摄像机对准现在的节点
+              Camera.location = currentNode.rectangle.center.clone();
+            }}
+          >
+            Next
+          </button>
+          <button
+            className="m-2 rounded-md bg-gray-500 text-white"
+            onClick={() => {
+              setIsSearchingShow(false);
+            }}
+          >
+            关闭
+          </button>
+        </div>
+      )}
       <span
         className="fixed bottom-0 left-0 cursor-pointer ring"
         onClick={() => {
           window.location.reload();
-          invoke<string>("save_json_by_path");
         }}
       >
         FPS={fps.toFixed()}