diff --git a/README.md b/README.md
index d21ed129..d34b9961 100755
--- a/README.md
+++ b/README.md
@@ -86,6 +86,12 @@ http://localhost:3000
|
保持所有线条起始点与 startPointAnchorId 线条一致 |
+
+ anchorPlacement |
+ string |
+ |
+ 锚点位置,若值为 bottom,则位于锚点的父节点底部 |
+
lineTextMap |
object |
diff --git a/src/lib/components/topology/index.tsx b/src/lib/components/topology/index.tsx
index eb21f557..43cb419e 100644
--- 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 {
const {
data: { lines, nodes },
startPointAnchorId,
+ anchorPlacement,
lineTextMap,
lineOffsetY,
readOnly,
@@ -1458,12 +1461,20 @@ class Topology extends React.Component {
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
index 87152800..27272b8a 100644
--- 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))) {