feat: add anchorPlacement

byai · Dec 5, 2023 · 1032c28 · 1032c28
1 parent 7bb02d7
commit 1032c28
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -86,6 +86,12 @@ http://localhost:3000
             <td></td>
             <td>保持所有线条起始点与 startPointAnchorId 线条一致</td>
         </tr>
+        <tr>
+            <td>anchorPlacement</td>
+            <td>string</td>
+            <td></td>
+            <td>锚点位置，若值为 bottom，则位于锚点的父节点底部</td>
+        </tr>
         <tr>
             <td>lineTextMap</td>
             <td>object</td>

diff --git a/src/lib/components/topology/index.tsx b/src/lib/components/topology/index.tsx
@@ -45,6 +45,7 @@ import {
     computeMaxAndMin,
     isMatchKeyValue,
     DagreDirection,
+    computeAnchorPoWithNodeBottom,
 } from '../../utils';
 // import layoutCalculation from '../../utils/layoutCalculation';
 import computeLayout from '../../utils/computeLayout';
@@ -95,6 +96,7 @@ export interface ITopologyProps {
     }; // 线条上文字颜色映射对象 eg: {'锚点1': '#82BEFF', '锚点2': '#FFA39E'}
     lineOffsetY?: number; // 线条起始点向上偏移量
     startPointAnchorId?: string; // 保持所有线条起始点与 startPointAnchorId 线条一致
+    anchorPlacement?: string; // 锚点位置
     lineTextMap?: {
         [x: string]: string; // 线条上文字与 anchorId 映射对象 eg: {'anchorId1': '锚点1', 'anchorId2': '锚点2'}
     };
@@ -1422,6 +1424,7 @@ class Topology extends React.Component<ITopologyProps, ITopologyState> {
         const {
             data: { lines, nodes },
             startPointAnchorId,
+            anchorPlacement,
             lineTextMap,
             lineOffsetY,
             readOnly,
@@ -1458,12 +1461,20 @@ class Topology extends React.Component<ITopologyProps, ITopologyState> {
                 return activeLine.start;
             }
 
-            // 这里特殊处理下，目的是保持所有锚点的起始点位置与 startPointAnchorId 锚点位置一致
-            return computeAnchorPo(
-                // `dom-map-${line.start}`,
-                `dom-map-${startPointAnchorId === undefined ? line.start : `${line.start.split("-")[0]}-${startPointAnchorId}`}`,
-                nodeHash[line.start.split("-")[0]]
-            );
+            if (anchorPlacement === 'bottom') {
+                return computeAnchorPoWithNodeBottom(
+                    nodeHash[line.start.split("-")[0]]
+                );
+            } else {
+                // 这里特殊处理下，目的是保持所有锚点的起始点位置与 startPointAnchorId 锚点位置一致
+                return computeAnchorPo(
+                    `dom-map-${line.start}`,
+                    // `dom-map-${startPointAnchorId === undefined ? line.start : `${line.start.split("-")[0]}-${startPointAnchorId}`}`,
+                    nodeHash[line.start.split("-")[0]]
+                );
+            }
+
+
         };
         const getLineEndPo = (line: ITopologyLine) => {
             if (isEditing(line) && activeLine.type === LineEditType.EDIT_END) {

diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
@@ -187,6 +187,21 @@ export const computeAnchorPo = (anchor: string, parentNode: ITopologyNode) => {
     return po;
 };
 
+// 锚点始终位于节点底部
+export const computeAnchorPoWithNodeBottom = (parentNode: ITopologyNode) => {
+    const parentSize = getNodeSize(parentNode.id);
+    const parentPosition = parentNode.position || { x: 0, y: 0 };
+    const po = {
+        x: parentPosition.x + parentSize.width / 2,
+        y: parentPosition.y + parentSize.height,
+    };
+    if (Number.isNaN(po.x) || Number.isNaN(po.y)) {
+        return null;
+    }
+
+    return po;
+};
+
 export const computeMaxAndMin = (nodes: ITopologyNode[]) => {
     // @ts-ignore
     if (!nodes.length || nodes.find(item => !item.position || [item.position.x, item.position.y].includes(undefined))) {