fix(draw-canvas): support label placement and offset

easyops-cn · Jan 6, 2025 · 123992b · 123992b
1 parent d722d20
commit 123992b
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/bricks/diagram/docs/eo-draw-canvas.md b/bricks/diagram/docs/eo-draw-canvas.md
@@ -486,7 +486,9 @@
               type: "edge",
               source: "X",
               target: "Y",
-              description: "X->Y"
+              description: "X->Y",
+              placement: "end",
+              offset: 10
             },
             {
               type: "edge",
@@ -573,6 +575,8 @@
         defaultEdgeLines:
           - callLabelOnDoubleClick: enableEditing
             label:
+              placement: <% DATA.edge.placement %>
+              offset: <% DATA.edge.offset %>
               useBrick:
                 brick: diagram.editable-label
                 properties:

diff --git a/bricks/diagram/src/diagram/interfaces.ts b/bricks/diagram/src/diagram/interfaces.ts
@@ -162,12 +162,14 @@ export interface LineLabelConf {
   if?: string | boolean | null;
   useBrick: UseSingleBrickConf;
   placement?: LineLabelPlacement;
+  offset?: number;
 }
 
 export interface TextOptions {
   content: string;
   style?: CSSProperties;
   placement?: LineLabelPlacement;
+  offset?: number;
 }
 
 export type LineLabelPlacement = "center" | "start" | "end";

diff --git a/bricks/diagram/src/diagram/processors/getRenderedLineLabels.ts b/bricks/diagram/src/diagram/processors/getRenderedLineLabels.ts
@@ -46,7 +46,7 @@ export function getRenderedLineLabels(
 
       return list.map<RenderedLineLabel>((item) => {
         const placement = item.placement ?? "center";
-        const offset = 0;
+        const offset = item.offset ?? 0;
         // istanbul ignore next
         const point =
           process.env.NODE_ENV === "test"

diff --git a/bricks/diagram/src/draw-canvas/EdgeComponent.tsx b/bricks/diagram/src/draw-canvas/EdgeComponent.tsx
@@ -67,15 +67,25 @@ export function EdgeComponent({
 
   const updateLabelPosition = useCallback(() => {
     const path = pathRef.current;
+    const { label, text } = lineConf;
     // istanbul ignore next
-    if (path && (lineConf.label || lineConf.text)) {
+    if (path && (label || text)) {
       if (process.env.NODE_ENV === "test") {
         setLabelPosition([30, 40]);
         setLineRect({ x: 10, y: 20, width: 300, height: 400 });
         return;
       }
+      const placement = (label ? label.placement : text.placement) ?? "center";
+      const offset = (label ? label.offset : text.offset) ?? 0;
       const pathLength = path.getTotalLength();
-      const pathPoint = path.getPointAtLength(pathLength / 2);
+      const halfPathLength = pathLength / 2;
+      const pathPoint = path.getPointAtLength(
+        placement === "start"
+          ? Math.min(offset, halfPathLength)
+          : placement === "end"
+            ? Math.max(pathLength - offset, halfPathLength)
+            : halfPathLength
+      );
       setLabelPosition([pathPoint.x, pathPoint.y]);
       const rect = path.getBBox();
       setLineRect({