🚸 完善搜索节点面板

Author: Littlefean

app/src/components/popup.tsx

@@ -4,14 +4,15 @@ import { MouseLocation } from "../core/service/controlService/MouseLocation";
 import { cn } from "../utils/cn";
 import once from "lodash/once";
 import Box from "./Box";
+import { CircleX } from "lucide-react";
 
 export namespace Popup {
   /**
-   * 弹出一个弹窗
+   * 弹出一个弹窗，这个弹窗面板不能是 fixed 布局
    * @param children
    * @returns
    */
-  export function show(children: React.ReactNode): Promise<void> {
+  export function show(children: React.ReactNode, closeWhenClickOutside: boolean = true): Promise<void> {
     return new Promise((resolve) => {
       // 启动一个新的React实例
       const container = document.createElement("div");
@@ -21,6 +22,7 @@ export namespace Popup {
         <Component
           x={MouseLocation.x}
           y={MouseLocation.y}
+          closeWhenClickOutside={closeWhenClickOutside}
           onClose={() => {
             resolve();
             setTimeout(
@@ -52,11 +54,13 @@ export namespace Popup {
     y,
     onClose,
     children,
+    closeWhenClickOutside,
   }: {
     x: number;
     y: number;
     onClose: () => void;
     children: React.ReactNode;
+    closeWhenClickOutside: boolean;
   }) {
     const [adjustedX, setAdjustedX] = React.useState(0);
     const [adjustedY, setAdjustedY] = React.useState(0);
@@ -69,7 +73,6 @@ export namespace Popup {
       if (ref.current) {
         // 调整弹窗位置，确保不会超出屏幕边界
         const { width, height } = ref.current.getBoundingClientRect();
-        console.log(width, height);
         setAdjustedX(x);
         setAdjustedY(y);
         if (x + width > window.innerWidth) {
@@ -94,8 +97,10 @@ export namespace Popup {
       // 监听在外面点击事件
       const handleClickOutside = (event: MouseEvent) => {
         if (ref.current && !ref.current.contains(event.target as Node)) {
-          setShow(false);
-          onClose();
+          if (closeWhenClickOutside) {
+            setShow(false);
+            onClose();
+          }
         }
       };
       document.addEventListener("mousedown", handleClickOutside);
@@ -112,6 +117,7 @@ export namespace Popup {
         className={cn("border-icon-button-border fixed z-[102] opacity-0", {
           "opacity-100": show,
           "opacity-0 transition-none": adjusting,
+          // absolute: closeWhenClickOutside,
         })}
         style={{
           left: adjustedX,
@@ -120,6 +126,17 @@ export namespace Popup {
         }}
       >
         {children}
+        {!closeWhenClickOutside && (
+          <span
+            onClick={() => {
+              setShow(false);
+              onClose();
+            }}
+            className="bg-panel-bg text-panel-text border-panel-details-text absolute -right-4 -top-4 cursor-pointer rounded-full p-1 text-sm hover:scale-105"
+          >
+            <CircleX className="cursor-pointer" />
+          </span>
+        )}
       </Box>
     );
   }

app/src/main.tsx

@@ -427,7 +427,7 @@ async function registerKeyBinds() {
       shift: false,
     })
   ).down(() => {
-    Popup.show(<ColorPanel />);
+    Popup.show(<ColorPanel />, true);
   });
   (
     await KeyBinds.create("switchDebugShow", "F3", {
@@ -475,7 +475,7 @@ async function registerKeyBinds() {
       shift: false,
     })
   ).down(() => {
-    Popup.show(<SearchingNodePanel />);
+    Popup.show(<SearchingNodePanel />, false);
   });
   (
     await KeyBinds.create("openTextNodeByContentExternal", "e", {

app/src/pages/_app_menu.tsx

@@ -23,6 +23,7 @@ import {
   RefreshCcw,
   Save,
   Scaling,
+  Search,
   Settings as SettingsIcon,
   SquareDashedKanbanIcon,
   SquareDashedMousePointer,
@@ -53,6 +54,9 @@ import { TextNode } from "../core/stage/stageObject/entity/TextNode";
 import { PathString } from "../utils/pathString";
 import { HelpService } from "../core/service/helpService/helpService";
 import { StageHistoryManager } from "../core/stage/stageManager/StageHistoryManager";
+import { SoundService } from "../core/service/feedbackService/SoundService";
+import SearchingNodePanel from "./_popup_panel/_searching_node_panel";
+import { Popup } from "../components/popup";
 
 export default function AppMenu({ className = "", open = false }: { className?: string; open: boolean }) {
   const navigate = useNavigate();
@@ -467,18 +471,14 @@ export default function AppMenu({ className = "", open = false }: { className?:
         >
           撤销
         </Col>
-        {/* <Col
-          icon={<Undo />}
+        <Col
+          icon={<Search />}
           onClick={() => {
-            const userInput = window.prompt("请输入搜索内容：");
-            if (!userInput) {
-              return;
-            }
-            Stage.contentSearchEngine.startSearch(userInput);
+            Popup.show(<SearchingNodePanel />, false);
           }}
         >
           查找
-        </Col> */}
+        </Col>
       </Row>
       <Row icon={<MoreHorizontal />} title={t("more.title")}>
         <Col icon={<SettingsIcon />} onClick={() => navigate("/settings/visual")}>
@@ -651,6 +651,12 @@ function Col({
     <div
       className="hover:bg-appmenu-hover-bg hover:outline-appmenu-hover-bg text-appmenu-item-text flex w-max cursor-pointer items-center gap-1 rounded-lg outline-0 outline-white/0 transition-all hover:outline-8 active:scale-90"
       onClick={onClick}
+      onMouseDown={() => {
+        SoundService.play.mouseClickButton();
+      }}
+      onMouseEnter={() => {
+        SoundService.play.mouseEnterButton();
+      }}
     >
       {icon}
       {children}

app/src/pages/_popup_panel/_color_panel.tsx

@@ -114,7 +114,7 @@ export default function ColorPanel() {
         ></input>
         <Button
           onClick={() => {
-            Popup.show(<ColorManagerPanel />);
+            Popup.show(<ColorManagerPanel />, true);
           }}
         >
           打开颜色管理

app/src/pages/_popup_panel/_searching_node_panel.tsx

@@ -49,7 +49,7 @@ export default function SearchingNodePanel() {
   // endregion
 
   return (
-    <Box className="bg-panel-bg border-panel-details-text fixed right-0 m-1 flex transform flex-col p-4">
+    <Box className="bg-panel-bg border-panel-details-text m-1 flex transform flex-col p-4">
       <div className="flex items-center justify-between">
         <Input
           placeholder="请输入要搜索的内容"

app/src/pages/_toolbar.tsx

@@ -95,7 +95,7 @@ export default function Toolbar({ className = "" }: { className?: string }) {
       <ToolbarItem
         description="通过文本生成节点"
         icon={<ClipboardPaste />}
-        handleFunction={() => Popup.show(<GenerateNodePanel />)}
+        handleFunction={() => Popup.show(<GenerateNodePanel />, true)}
       />
       {isHaveSelectedEdge && (
         <ToolbarItem
@@ -111,14 +111,14 @@ export default function Toolbar({ className = "" }: { className?: string }) {
       <ToolbarItem
         description="设置节点/连线/框的颜色，注意要先选中再点颜色"
         icon={<PaintBucket />}
-        handleFunction={() => Popup.show(<ColorPanel />)}
+        handleFunction={() => Popup.show(<ColorPanel />, true)}
       />
 
       {isHaveSelectedNode && (
         <ToolbarItem
           description="节点对齐相关"
           icon={<LayoutDashboard />}
-          handleFunction={() => Popup.show(<AlignNodePanel />)}
+          handleFunction={() => Popup.show(<AlignNodePanel />, true)}
         />
       )}
       {isClipboardClearShow && (