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))) {