✨ fix: #205 双击时，连线上的文字支持编辑换行

Author: Littlefean

app/src/core/render/canvas2d/basicRenderer/textRenderer.tsx

@@ -100,6 +100,34 @@ export namespace TextRenderer {
     }
   }
 
+  export function renderMultiLineTextFromCenter(
+    text: string,
+    centerLocation: Vector,
+    size: number,
+    limitWidth: number,
+    color: Color,
+    lineHeight: number = 1.2,
+    limitLines: number = Infinity,
+  ): void {
+    text = Renderer.protectingPrivacy ? replaceTextWhenProtect(text) : text;
+    let currentY = 0; // 顶部偏移量
+    let textLineArray = textToTextArrayWrapCache(text, size, limitWidth);
+    // 限制行数
+    if (limitLines < textLineArray.length) {
+      textLineArray = textLineArray.slice(0, limitLines);
+      textLineArray[limitLines - 1] += "..."; // 最后一行加省略号
+    }
+    for (const line of textLineArray) {
+      renderTextFromCenter(
+        line,
+        centerLocation.add(new Vector(0, currentY - ((textLineArray.length - 1) * size) / 2)),
+        size,
+        color,
+      );
+      currentY += size * lineHeight;
+    }
+  }
+
   const textArrayCache: LruCache<string, string[]> = new LruCache(100);
 
   /**

app/src/core/render/canvas2d/entityRenderer/edge/concrete/StraightEdgeRenderer.tsx

@@ -82,10 +82,11 @@ export class StraightEdgeRenderer extends EdgeRendererClass {
       const midPoint = edge.bodyLine.midPoint();
       const startHalf = new Line(edge.bodyLine.start, midPoint);
       const endHalf = new Line(midPoint, edge.bodyLine.end);
-      TextRenderer.renderTextFromCenter(
+      TextRenderer.renderMultiLineTextFromCenter(
         edge.text,
         Renderer.transformWorld2View(midPoint),
         Renderer.FONT_SIZE * Camera.currentScale,
+        Infinity,
         edgeColor,
       );
       const edgeTextRectangle = edge.textRectangle;

app/src/core/service/controlService/controller/concrete/ControllerEdgeEdit.tsx

@@ -2,6 +2,7 @@ import { Stage } from "../../../../stage/Stage";
 import { StageManager } from "../../../../stage/stageManager/StageManager";
 
 import { ControllerClass } from "../ControllerClass";
+import { editEdgeText } from "./utilsControl";
 
 /**
  * 包含编辑节点文字，编辑详细信息等功能的控制器
@@ -18,13 +19,16 @@ ControllerEdgeEdit.mouseDoubleClick = (event: MouseEvent) => {
   if (!firstHoverEdge) {
     return;
   }
+
   // 编辑边上的文字
-  const user_input = prompt("请输入线上的文字", firstHoverEdge.text);
-  if (user_input) {
-    for (const edge of Stage.mouseInteractionCore.hoverEdges) {
-      edge.rename(user_input);
-    }
-  }
+  editEdgeText(firstHoverEdge);
+
+  // const user_input = prompt("请输入线上的文字", firstHoverEdge.text);
+  // if (user_input) {
+  //   for (const edge of Stage.mouseInteractionCore.hoverEdges) {
+  //     edge.rename(user_input);
+  //   }
+  // }
   return;
 };
 

app/src/core/service/controlService/controller/concrete/ControllerNodeConnection.tsx

@@ -180,8 +180,6 @@ class ControllerNodeConnectionClass extends ControllerClass {
     }
     const releaseWorldLocation = Renderer.transformView2World(new Vector(event.clientX, event.clientY));
     const releaseTargetEntity = StageManager.findConnectableEntityByLocation(releaseWorldLocation);
-    console.log("releaseTargetEntity", releaseTargetEntity);
-    console.log("this.connectToEntity", this.connectToEntity);
     // 结束连线
     if (releaseTargetEntity !== null) {
       // 在目标节点上弹起

app/src/core/service/controlService/controller/concrete/ControllerNodeEdit.tsx

@@ -48,7 +48,6 @@ ControllerNodeEdit.mouseDoubleClick = (event: MouseEvent) => {
         open(clickedEntity.url);
       }
     } else if (clickedEntity instanceof PortalNode) {
-      // TODO: 点击范围有待设计
       const diffNodeLeftTopLocation = pressLocation.subtract(clickedEntity.rectangle.leftTop);
       if (diffNodeLeftTopLocation.y < PortalNode.TITLE_LINE_Y) {
         // 编辑标题

app/src/core/service/controlService/controller/concrete/ControllerSectionEdit.tsx

@@ -38,7 +38,6 @@ ControllerSectionEdit.mousemove = (event: MouseEvent) => {
 
 ControllerSectionEdit.keydown = (event: KeyboardEvent) => {
   if (event.key === "Enter") {
-    // 先检测是否有选择了的边
     const isHaveSectionSelected = StageManager.getSections().some((section) => section.isSelected);
     if (!isHaveSectionSelected) {
       return;

app/src/core/service/controlService/controller/concrete/utilsControl.tsx

@@ -8,6 +8,7 @@ import { Stage } from "../../../../stage/Stage";
 import { SectionMethods } from "../../../../stage/stageManager/basicMethods/SectionMethods";
 import { StageManager } from "../../../../stage/stageManager/StageManager";
 import { Entity } from "../../../../stage/stageObject/abstract/StageEntity";
+import { LineEdge } from "../../../../stage/stageObject/association/LineEdge";
 import { PortalNode } from "../../../../stage/stageObject/entity/PortalNode";
 import { TextNode } from "../../../../stage/stageObject/entity/TextNode";
 import { UrlNode } from "../../../../stage/stageObject/entity/UrlNode";
@@ -51,6 +52,32 @@ export function editTextNode(clickedNode: TextNode, selectAll = true) {
   });
 }
 
+export function editEdgeText(clickedLineEdge: LineEdge, selectAll = true) {
+  Controller.isCameraLocked = true;
+
+  // clickedLineEdge.isEditing = true;
+  InputElement.textarea(
+    Renderer.transformWorld2View(clickedLineEdge.textRectangle.location).add(
+      Vector.same(Renderer.NODE_PADDING).multiply(Camera.currentScale),
+    ),
+    clickedLineEdge.text,
+    (text) => {
+      clickedLineEdge?.rename(text);
+    },
+    {
+      fontSize: Renderer.FONT_SIZE * Camera.currentScale + "px",
+      backgroundColor: StageStyleManager.currentStyle.BackgroundColor.toString(),
+      color: StageStyleManager.currentStyle.StageObjectBorderColor.toString(),
+      outline: "solid 1px rgba(255,255,255,0.1)",
+      // marginTop: -8 * Camera.currentScale + "px",
+    },
+    selectAll,
+  ).then(() => {
+    // clickedLineEdge!.isEditing = false;
+    Controller.isCameraLocked = false;
+  });
+}
+
 export function editUrlNodeTitle(clickedUrlNode: UrlNode) {
   Controller.isCameraLocked = true;
   // 编辑节点

app/src/core/stage/stageObject/association/LineEdge.tsx

@@ -1,6 +1,6 @@
 import { v4 as uuidv4 } from "uuid";
 import { Serialized } from "../../../../types/node";
-import { getTextSize } from "../../../../utils/font";
+import { getMultiLineTextSize } from "../../../../utils/font";
 import { Vector } from "../../../dataStruct/Vector";
 import { Line } from "../../../dataStruct/shape/Line";
 import { Rectangle } from "../../../dataStruct/shape/Rectangle";
@@ -90,7 +90,7 @@ export class LineEdge extends Edge {
 
   get textRectangle(): Rectangle {
     // HACK: 这里会造成频繁渲染，频繁计算文字宽度进而可能出现性能问题
-    const textSize = getTextSize(this.text, Renderer.FONT_SIZE);
+    const textSize = getMultiLineTextSize(this.text, Renderer.FONT_SIZE, 1.2);
     if (this.isShifting) {
       return new Rectangle(this.shiftingMidPoint.subtract(textSize.divide(2)), textSize);
     } else {