✨ 增加标签节点的巨大化设置开关

Author: Littlefean

app/src/core/render/canvas2d/renderer.tsx

@@ -15,6 +15,7 @@ import { Canvas } from "../../stage/Canvas";
 import { Stage } from "../../stage/Stage";
 import { StageHistoryManager } from "../../stage/stageManager/StageHistoryManager";
 import { StageManager } from "../../stage/stageManager/StageManager";
+import { TextNode } from "../../stage/stageObject/entity/TextNode";
 import { CurveRenderer } from "./basicRenderer/curveRenderer";
 import { ShapeRenderer } from "./basicRenderer/shapeRenderer";
 import { TextRenderer } from "./basicRenderer/textRenderer";
@@ -103,6 +104,7 @@ export namespace Renderer {
   let isShowBackgroundCartesian = false;
   export let isAlwaysShowDetails = false;
   export let protectingPrivacy = false;
+  export let enableTagTextNodesBigDisplay = false;
   let isRenderCenterPointer = true;
 
   // 确保这个函数在软件打开的那一次调用
@@ -133,6 +135,7 @@ export namespace Renderer {
     Settings.watch("alwaysShowDetails", (value) => (isAlwaysShowDetails = value));
     Settings.watch("protectingPrivacy", (value) => (protectingPrivacy = value));
     Settings.watch("isRenderCenterPointer", (value) => (isRenderCenterPointer = value));
+    Settings.watch("enableTagTextNodesBigDisplay", (value) => (enableTagTextNodesBigDisplay = value));
   }
 
   /**
@@ -430,27 +433,28 @@ export namespace Renderer {
         StageStyleManager.currentStyle.StageObjectBorderColor,
         2 * Camera.currentScale,
       );
-      // 用户不建议放大标签，所以这里注释掉了
-
-      // if (Camera.currentScale < 0.25 && tagObject instanceof TextNode) {
-      //   const backRect = rect.clone();
-      //   backRect.location = transformWorld2View(rect.center).add(new Vector(-rect.size.x / 2, -rect.size.y / 2));
-      //   const rectBgc = StageStyleManager.currentStyle.BackgroundColor.clone();
-      //   rectBgc.a = 0.5;
-      //   ShapeRenderer.renderRect(
-      //     backRect,
-      //     rectBgc,
-      //     StageStyleManager.currentStyle.StageObjectBorderColor,
-      //     1,
-      //     NODE_ROUNDED_RADIUS,
-      //   );
-      //   TextRenderer.renderTextFromCenter(
-      //     tagObject.text,
-      //     transformWorld2View(rect.center),
-      //     FONT_SIZE,
-      //     StageStyleManager.currentStyle.StageObjectBorderColor,
-      //   );
-      // }
+      // 用户不建议放大标签，所以这里注释掉了，但又有用户觉得这个也挺好，所以加个设置项
+      if (Renderer.enableTagTextNodesBigDisplay) {
+        if (Camera.currentScale < 0.25 && tagObject instanceof TextNode) {
+          const backRect = rect.clone();
+          backRect.location = transformWorld2View(rect.center).add(new Vector(-rect.size.x / 2, -rect.size.y / 2));
+          const rectBgc = StageStyleManager.currentStyle.BackgroundColor.clone();
+          rectBgc.a = 0.5;
+          ShapeRenderer.renderRect(
+            backRect,
+            rectBgc,
+            StageStyleManager.currentStyle.StageObjectBorderColor,
+            1,
+            NODE_ROUNDED_RADIUS,
+          );
+          TextRenderer.renderTextFromCenter(
+            tagObject.text,
+            transformWorld2View(rect.center),
+            FONT_SIZE,
+            StageStyleManager.currentStyle.StageObjectBorderColor,
+          );
+        }
+      }
     }
   }
   /**

app/src/core/service/Settings.tsx

@@ -25,6 +25,7 @@ export namespace Settings {
     showBackgroundDots: boolean;
     showBackgroundCartesian: boolean;
     windowBackgroundAlpha: number;
+    enableTagTextNodesBigDisplay: boolean;
     showDebug: boolean;
     alwaysShowDetails: boolean;
     protectingPrivacy: boolean;
@@ -94,6 +95,7 @@ export namespace Settings {
     showBackgroundDots: true,
     showBackgroundCartesian: false,
     windowBackgroundAlpha: 0.9,
+    enableTagTextNodesBigDisplay: false,
     showDebug: false, // 从1.4.7开始，以后用户安装软件后不默认显示调试信息，进而避免出现让用户感到困惑“这一大堆字是什么”
     alwaysShowDetails: false,
     protectingPrivacy: false,

app/src/locales/en.yml

@@ -151,6 +151,11 @@ settings:
       Usually used by developers.
       When enabled, debug information will be displayed in the top left corner of the canvas.
       It is recommended to enable this option when reporting bugs with screenshots.
+  enableTagTextNodesBigDisplay:
+    title: Bigify Tag Text Nodes Display
+    description: |
+      When enabled, tag text nodes will be displayed in a larger size when the canvas is zoomed out to a broad global view,
+      making it easier to identify the layout and distribution of the entire file.
   alwaysShowDetails:
     title: Always Show Node Details
     description: |

app/src/locales/zh_CN.yml

@@ -141,6 +141,11 @@ settings:
       通常为开发者使用
       开启后，画布左上角将会显示调试信息。
       若您遇到bug截图反馈时，建议开启此选项。
+  enableTagTextNodesBigDisplay:
+    title: 标签文本节点巨大化显示
+    description: |
+      开启后，标签文本节点的显示在画布缩小到广袤的全局视野时，
+      标签会巨大化显示，以便更容易辨识整个文件的布局分布
   alwaysShowDetails:
     title: 始终显示节点详细信息
     description: |

app/src/locales/zh_TW.yml

@@ -123,6 +123,11 @@ settings:
       通常為開發者使用
       開啟後，畫布左上角將會顯示除錯資訊。
       若您遇到bug截圖回饋時，建議開啟此選項。
+  enableTagTextNodesBigDisplay:
+    title: 标签文本节点巨大化显示
+    description: |
+      开启后，标签文本节点的显示在画布缩小到广袤的全局视野时，
+      标签会巨大化显示，以便更容易辨识整个文件的布局分布
   alwaysShowDetails:
     title: 始終顯示節點詳細資訊
     description: |

app/src/pages/settings/visual.tsx

@@ -16,6 +16,7 @@ import {
   Scaling,
   Space,
   Spline,
+  Tag,
   VenetianMask,
 } from "lucide-react";
 import { SettingField } from "./_field";
@@ -34,6 +35,7 @@ export default function Visual() {
       <SettingField icon={<Move3d />} settingKey="showBackgroundCartesian" type="switch" />
       <SettingField icon={<Blend />} settingKey="windowBackgroundAlpha" type="slider" min={0} max={1} step={0.01} />
       <SettingField icon={<Bug />} settingKey="showDebug" type="switch" />
+      <SettingField icon={<Tag />} settingKey="enableTagTextNodesBigDisplay" type="switch" />
       <SettingField icon={<VenetianMask />} settingKey="protectingPrivacy" type="switch" />
 
       <SettingField icon={<ListCollapse />} settingKey="alwaysShowDetails" type="switch" />