✨ 增加了节点详情的自定义选择：小型面板和Vditor编辑器

Author: Littlefean

app/src/core/service/Settings.tsx

@@ -33,6 +33,7 @@ export namespace Settings {
     entityDetailsFontSize: number;
     entityDetailsLinesLimit: number;
     entityDetailsWidthLimit: number;
+    nodeDetailsPanel: "small" | "vditor";
     limitCameraInCycleSpace: boolean;
     cameraCycleSpaceSizeX: number;
     cameraCycleSpaceSizeY: number;
@@ -105,6 +106,7 @@ export namespace Settings {
     entityDetailsFontSize: 18,
     entityDetailsLinesLimit: 4,
     entityDetailsWidthLimit: 200,
+    nodeDetailsPanel: "vditor",
     limitCameraInCycleSpace: false,
     cameraCycleSpaceSizeX: 1000,
     cameraCycleSpaceSizeY: 1000,

app/src/locales/en.yml

@@ -160,6 +160,11 @@ settings:
     title: Always Show Node Details
     description: |
       When enabled, node details will be shown without hovering the mouse over the node.
+  nodeDetailsPanel:
+    title: node details panel
+    options:
+      small: small panel
+      vditor: vditor markdown panel
   useNativeTitleBar:
     title: Use Native Title Bar (Requires application restart)
     description: |

app/src/locales/zh_CN.yml

@@ -150,6 +150,11 @@ settings:
     title: 始终显示节点详细信息
     description: |
       开启后，无需鼠标移动到节点上时，才显示节点的详细信息。
+  nodeDetailsPanel:
+    title: 节点详细信息面板
+    options:
+      small: 小型面板
+      vditor: vditor markdown编辑器
   useNativeTitleBar:
     title: 使用原生标题栏（需要重启应用）
     description: |

app/src/locales/zh_TW.yml

@@ -132,6 +132,11 @@ settings:
     title: 始終顯示節點詳細資訊
     description: |
       開啟後，無需滑鼠移動到節點上時，才顯示節點的詳細資訊。
+  nodeDetailsPanel:
+    title: 节点详细信息面板
+    options:
+      small: 小型面板
+      vditor: vditor markdown编辑器
   useNativeTitleBar:
     title: 使用原生標題列（需要重新啟動應用程式）
     description: |

app/src/pages/_details_edit_panel.tsx renamed to app/src/pages/_details_edit_small_panel.tsx

@@ -9,9 +9,10 @@ import { Entity } from "../core/stage/stageObject/abstract/StageEntity";
 
 /**
  * 2025年1月4日，这个打算被侧边栏取代 ——littlefean
+ * 2025年2月9日，打算先共存
  * @returns
  */
-export default function DetailsEditPanel() {
+export default function DetailsEditSmallPanel() {
   const [inputCurrentDetails, setInputCurrentDetails] = React.useState("");
   const [isNodeTextEditing, setIsNodeTextEditing] = React.useState(false);
   const [clickedNode, setClickedNode] = React.useState<Entity>();
@@ -43,6 +44,7 @@ export default function DetailsEditPanel() {
     Controller.isCameraLocked = false;
     entity.isEditingDetails = false;
   };
+
   const getClickedNodeStyle = () => {
     if (!clickedNode) {
       return {
@@ -52,13 +54,17 @@ export default function DetailsEditPanel() {
     }
     const collisionBoxRectangle = clickedNode.collisionBox.getRectangle();
     const heightViewSize = collisionBoxRectangle.size.y * Camera.currentScale;
-
+    let viewTop = Renderer.transformWorld2View(collisionBoxRectangle.location).y + heightViewSize;
+    viewTop = Math.min(viewTop, window.innerHeight - 192);
+    let viewLeft = Renderer.transformWorld2View(collisionBoxRectangle.location).x;
+    viewLeft = Math.min(viewLeft, window.innerWidth - 288);
     return {
-      left: `${Renderer.transformWorld2View(collisionBoxRectangle.location).x}px`,
-      top: `${Renderer.transformWorld2View(collisionBoxRectangle.location).y + heightViewSize}px`,
+      left: `${viewLeft}px`,
+      top: `${viewTop}px`,
     };
   };
-
+  // h-48 = 192px
+  // w-72 = 288px
   return (
     <>
       {isNodeTextEditing && (

app/src/pages/index.tsx

@@ -7,19 +7,21 @@ import { Settings } from "../core/service/Settings";
 import { Canvas } from "../core/stage/Canvas";
 import { Stage } from "../core/stage/Stage";
 // import DetailsEditPanel from "./_details_edit_panel";
+import Button from "../components/Button";
+import { isMobile } from "../utils/platform";
+import DetailsEditSmallPanel from "./_details_edit_small_panel";
 import DetailsEditSidePanel from "./_details_edit_side_panel";
 import HintText from "./_hint_text";
 import SearchingNodePanel from "./_searching_node_panel";
 import Toolbar from "./_toolbar";
-import Button from "../components/Button";
-import { isMobile } from "../utils/platform";
 
 export default function Home() {
   const canvasRef: React.RefObject<HTMLCanvasElement | null> = useRef(null);
 
   const [cursorName, setCursorName] = React.useState("default");
   const [bgAlpha, setBgAlpha] = React.useState(1);
   const [isDrawingMode, setIsDrawingMode] = React.useState(false);
+  const [nodeDetailsPanel, setNodeDetailsPanel] = React.useState("vditor");
 
   useEffect(() => {
     const handleResize = () => {
@@ -82,6 +84,10 @@ export default function Home() {
 
     let frameId = requestAnimationFrame(loop);
 
+    Settings.watch("nodeDetailsPanel", (value) => {
+      setNodeDetailsPanel(value);
+    });
+
     // 清理事件监听器
     return () => {
       window.removeEventListener("resize", handleResize);
@@ -99,8 +105,7 @@ export default function Home() {
       <Toolbar />
       <SearchingNodePanel />
       {/* 这个打算被取代 */}
-      {/* <DetailsEditPanel /> */}
-      <DetailsEditSidePanel />
+      {nodeDetailsPanel === "small" ? <DetailsEditSmallPanel /> : <DetailsEditSidePanel />}
       <HintText />
       {isMobile && (
         <Button

app/src/pages/settings/visual.tsx

@@ -1,4 +1,5 @@
 import {
+  AppWindow,
   AppWindowMac,
   ArrowDownNarrowWide,
   Blend,
@@ -14,6 +15,7 @@ import {
   Move3d,
   Palette,
   Ratio,
+  ReceiptText,
   Rows4,
   Scaling,
   Settings,
@@ -45,6 +47,9 @@ export default function Visual() {
       <FieldGroup title="Node & Edge 节点与连线样式" icon={<Workflow />}>
         <SettingField icon={<Spline />} settingKey="lineStyle" type="select" />
         <SettingField icon={<Tag />} settingKey="enableTagTextNodesBigDisplay" type="switch" />
+      </FieldGroup>
+      <FieldGroup title="节点详情" icon={<ReceiptText />}>
+        <SettingField icon={<AppWindow />} settingKey="nodeDetailsPanel" type="select" />
         <SettingField icon={<ListCollapse />} settingKey="alwaysShowDetails" type="switch" />
         <SettingField
           icon={<CaseSensitive />}