diff --git a/packages/g6/src/elements/edges/base-edge.ts b/packages/g6/src/elements/edges/base-edge.ts index 59ca8a4f1e7..5d2ac3a0bed 100644 --- a/packages/g6/src/elements/edges/base-edge.ts +++ b/packages/g6/src/elements/edges/base-edge.ts @@ -8,11 +8,12 @@ import type { } from '@antv/g'; import { Path } from '@antv/g'; import { deepMix, isFunction } from '@antv/util'; -import type { EdgeKey, EdgeLabelStyleProps, PrefixObject } from '../../types'; +import type { EdgeKey, EdgeLabelStyleProps, Point, PrefixObject } from '../../types'; import { getLabelPositionStyle } from '../../utils/edge'; import { omitStyleProps, subStyleProps } from '../../utils/prefix'; import type { SymbolFactor } from '../../utils/symbol'; import * as Symbol from '../../utils/symbol'; +import { getWordWrapWidthByEnds } from '../../utils/text'; import type { LabelStyleProps } from '../shapes'; import { Label } from '../shapes'; import type { BaseShapeStyleProps } from '../shapes/base-shape'; @@ -28,8 +29,21 @@ type EdgeArrowStyleProps = { } & PathStyleProps & Record; +export type BaseEdgeKeyStyleProps = KT & { + /** + * 边的起点 + * The source point. Represents the start of the edge + */ + sourcePoint: Point; + /** + * 边的终点 + * The target point. Represents the end of the edge + */ + targetPoint: Point; +}; + export type BaseEdgeStyleProps = BaseShapeStyleProps & - KT & { + BaseEdgeKeyStyleProps & { label?: boolean; halo?: boolean; startArrow?: boolean; @@ -45,10 +59,11 @@ export type BaseEdgeOptions = DisplayObjectConfig = Required>; export abstract class BaseEdge extends BaseShape> { - static defaultStyleProps: BaseEdgeStyleProps> = { + static defaultStyleProps: BaseEdgeStyleProps = { isBillboard: true, label: true, labelPosition: 'center', + labelMaxWidth: '80%', labelOffsetX: 4, labelOffsetY: -6, labelIsBillboard: true, @@ -97,7 +112,7 @@ export abstract class BaseEdge exte if (attributes.label === false) return false; const labelStyle = subStyleProps>(this.getGraphicStyle(attributes), 'label'); - const { position, offsetX, offsetY, autoRotate, ...restStyle } = labelStyle; + const { position, offsetX, offsetY, autoRotate, maxWidth, ...restStyle } = labelStyle; const labelPositionStyle = getLabelPositionStyle( this.shapeMap.key as EdgeKey, position, @@ -106,7 +121,15 @@ export abstract class BaseEdge exte offsetY, ); - return { ...labelPositionStyle, ...restStyle } as LabelStyleProps; + const { sourcePoint, targetPoint } = attributes; + const points = [ + { x: sourcePoint[0], y: sourcePoint[1] }, + { x: targetPoint[0], y: targetPoint[1] }, + ]; + + const wordWrapWidth = getWordWrapWidthByEnds(points, maxWidth); + // @ts-ignore + return { wordWrapWidth, ...labelPositionStyle, ...restStyle } as LabelStyleProps; } protected drawArrow(attributes: ParsedBaseEdgeStyleProps, isStart: boolean) { diff --git a/packages/g6/src/elements/edges/cubic-horizontal.ts b/packages/g6/src/elements/edges/cubic-horizontal.ts index b394b8b7825..4099909d12c 100644 --- a/packages/g6/src/elements/edges/cubic-horizontal.ts +++ b/packages/g6/src/elements/edges/cubic-horizontal.ts @@ -1,20 +1,10 @@ import type { DisplayObjectConfig, PathStyleProps } from '@antv/g'; import { deepMix } from '@antv/util'; import type { Point } from '../../types'; -import type { BaseEdgeStyleProps } from './base-edge'; +import type { BaseEdgeKeyStyleProps, BaseEdgeStyleProps } from './base-edge'; import { Cubic } from './cubic'; -type CubicHorizontalKeyStyleProps = PathStyleProps & { - /** - * 边的起点 - * The source point. Represents the start of the edge - */ - sourcePoint: Point; - /** - * 边的终点 - * The target point. Represents the end of the edge - */ - targetPoint: Point; +type CubicHorizontalKeyStyleProps = BaseEdgeKeyStyleProps & { /** * 控制点在两端点连线上的相对位置,范围为`0-1` * The relative position of the control point on the line, ranging from `0-1` diff --git a/packages/g6/src/elements/edges/cubic-vertical.ts b/packages/g6/src/elements/edges/cubic-vertical.ts index 7fea512d613..994a0c4fa2c 100644 --- a/packages/g6/src/elements/edges/cubic-vertical.ts +++ b/packages/g6/src/elements/edges/cubic-vertical.ts @@ -1,20 +1,10 @@ import type { DisplayObjectConfig, PathStyleProps } from '@antv/g'; import { deepMix } from '@antv/util'; import type { Point } from '../../types'; -import type { BaseEdgeStyleProps } from './base-edge'; +import type { BaseEdgeKeyStyleProps, BaseEdgeStyleProps } from './base-edge'; import { Cubic } from './cubic'; -type CubicVerticalKeyStyleProps = PathStyleProps & { - /** - * 边的起点 - * The source point. Represents the start of the edge - */ - sourcePoint: Point; - /** - * 边的终点 - * The target point. Represents the end of the edge - */ - targetPoint: Point; +type CubicVerticalKeyStyleProps = BaseEdgeKeyStyleProps & { /** * 控制点在两端点连线上的相对位置,范围为`0-1` * The relative position of the control point on the line, ranging from `0-1` diff --git a/packages/g6/src/elements/edges/cubic.ts b/packages/g6/src/elements/edges/cubic.ts index 69b28f7533f..b49db00643e 100644 --- a/packages/g6/src/elements/edges/cubic.ts +++ b/packages/g6/src/elements/edges/cubic.ts @@ -3,20 +3,10 @@ import { Path } from '@antv/g'; import { deepMix } from '@antv/util'; import type { Point } from '../../types'; import { calculateControlPoint, getCubicPath, parseCurveOffset, parseCurvePosition } from '../../utils/edge'; -import type { BaseEdgeStyleProps } from './base-edge'; +import type { BaseEdgeKeyStyleProps, BaseEdgeStyleProps } from './base-edge'; import { BaseEdge } from './base-edge'; -type CubicKeyStyleProps = PathStyleProps & { - /** - * 边的起点 - * The source point. Represents the start of the edge - */ - sourcePoint: Point; - /** - * 边的终点 - * The target point. Represents the end of the edge - */ - targetPoint: Point; +type CubicKeyStyleProps = BaseEdgeKeyStyleProps & { /** * 控制点数组,用于定义曲线的形状。如果不指定,将会通过`curveOffset`和`curvePosition`来计算控制点 * Control points. Used to define the shape of the curve. If not specified, it will be calculated using `curveOffset` and `curvePosition`. diff --git a/packages/g6/src/elements/edges/line.ts b/packages/g6/src/elements/edges/line.ts index 9ee5fe21042..61d90405650 100644 --- a/packages/g6/src/elements/edges/line.ts +++ b/packages/g6/src/elements/edges/line.ts @@ -1,22 +1,10 @@ import type { DisplayObjectConfig, LineStyleProps as GLineStyleProps, Group } from '@antv/g'; import { Line as GLine } from '@antv/g'; import { deepMix } from '@antv/util'; -import type { Point } from '../../types'; -import type { BaseEdgeStyleProps } from './base-edge'; +import type { BaseEdgeKeyStyleProps, BaseEdgeStyleProps } from './base-edge'; import { BaseEdge } from './base-edge'; -type LineKeyStyleProps = Partial & { - /** - * 边的起点 - * The source point. Represents the start of the edge - */ - sourcePoint: Point; - /** - * 边的终点 - * The target point. Represents the end of the edge - */ - targetPoint: Point; -}; +type LineKeyStyleProps = BaseEdgeKeyStyleProps; export type LineStyleProps = BaseEdgeStyleProps; diff --git a/packages/g6/src/elements/edges/polyline.ts b/packages/g6/src/elements/edges/polyline.ts index b32d453c310..b6756ba00b1 100644 --- a/packages/g6/src/elements/edges/polyline.ts +++ b/packages/g6/src/elements/edges/polyline.ts @@ -3,20 +3,10 @@ import { Path } from '@antv/g'; import { deepMix } from '@antv/util'; import type { Point } from '../../types'; import { getPolylinePath } from '../../utils/edge'; -import type { BaseEdgeStyleProps } from './base-edge'; +import type { BaseEdgeKeyStyleProps, BaseEdgeStyleProps } from './base-edge'; import { BaseEdge } from './base-edge'; -type PolylineKeyStyleProps = PathStyleProps & { - /** - * 边的起点 - * The source point. Represents the start of the edge - */ - sourcePoint: Point; - /** - * 边的终点 - * The target point. Represents the end of the edge - */ - targetPoint: Point; +type PolylineKeyStyleProps = BaseEdgeKeyStyleProps & { /** * 拐弯处的圆角弧度,默认为 0 * The radius of the rounded corner at the turning point. The default is 0 diff --git a/packages/g6/src/elements/edges/quadratic.ts b/packages/g6/src/elements/edges/quadratic.ts index d72cde9e40d..c4d21a1dde1 100644 --- a/packages/g6/src/elements/edges/quadratic.ts +++ b/packages/g6/src/elements/edges/quadratic.ts @@ -3,20 +3,10 @@ import { Path } from '@antv/g'; import { deepMix } from '@antv/util'; import type { Point } from '../../types'; import { getQuadraticPath } from '../../utils/edge'; -import type { BaseEdgeStyleProps } from './base-edge'; +import type { BaseEdgeKeyStyleProps, BaseEdgeStyleProps } from './base-edge'; import { BaseEdge } from './base-edge'; -type QuadraticKeyStyleProps = PathStyleProps & { - /** - * 边的起点 - * The source point. Represents the start of the edge - */ - sourcePoint: Point; - /** - * 边的终点 - * The target point. Represents the end of the edge - */ - targetPoint: Point; +type QuadraticKeyStyleProps = BaseEdgeKeyStyleProps & { /** * 控制点,用于定义曲线的形状。如果不指定,将会通过`curveOffset`和`curvePosition`来计算控制点 * Control point. Used to define the shape of the curve. If not specified, it will be calculated using `curveOffset` and `curvePosition`. diff --git a/packages/g6/src/elements/nodes/base-node.ts b/packages/g6/src/elements/nodes/base-node.ts index 074e8f0b346..ab729dc33dc 100644 --- a/packages/g6/src/elements/nodes/base-node.ts +++ b/packages/g6/src/elements/nodes/base-node.ts @@ -90,7 +90,7 @@ export abstract class BaseNode extends BaseShape): KT; + protected abstract getHaloStyle(attributes: ParsedBaseNodeStyleProps): KT | false; protected getIconStyle(attributes: ParsedBaseNodeStyleProps) { if (attributes.icon === false || isEmpty(attributes.iconText || attributes.iconSrc)) return false; diff --git a/packages/g6/src/elements/nodes/circle.ts b/packages/g6/src/elements/nodes/circle.ts index 12b439deee8..f377681bc0b 100644 --- a/packages/g6/src/elements/nodes/circle.ts +++ b/packages/g6/src/elements/nodes/circle.ts @@ -17,7 +17,9 @@ export class Circle extends BaseNode { super(options); } - protected getHaloStyle(attributes: ParsedCircleStyleProps): GCircleStyleProps { + protected getHaloStyle(attributes: ParsedCircleStyleProps) { + if (attributes.halo === false) return false; + const haloStyle = subStyleProps(this.getGraphicStyle(attributes), 'halo') as Partial; const keyStyle = this.getKeyStyle(attributes); diff --git a/packages/g6/src/elements/nodes/star.ts b/packages/g6/src/elements/nodes/star.ts index 4eafe7f265e..48990a40e81 100644 --- a/packages/g6/src/elements/nodes/star.ts +++ b/packages/g6/src/elements/nodes/star.ts @@ -35,7 +35,9 @@ export class Star extends BaseNode { return { ...keyStyle, d }; } - protected getHaloStyle(attributes: ParsedStarStyleProps): KeyShapeStyleProps { + protected getHaloStyle(attributes: ParsedStarStyleProps) { + if (attributes.halo === false) return false; + const haloStyle = subStyleProps(this.getGraphicStyle(attributes), 'halo') as Partial; const keyStyle = this.getKeyStyle(attributes); @@ -46,6 +48,8 @@ export class Star extends BaseNode { } protected getAnchorsStyle(attributes: ParsedStarStyleProps): NodeAnchorStyleProps[] { + if (attributes.anchor === false) return []; + const { outerR, innerR } = attributes; const anchors = getStarAnchors(outerR, innerR); diff --git a/packages/g6/src/types/edge.ts b/packages/g6/src/types/edge.ts index 7404e78c8f9..f0d738e7fb0 100644 --- a/packages/g6/src/types/edge.ts +++ b/packages/g6/src/types/edge.ts @@ -28,4 +28,9 @@ export type EdgeLabelStyleProps = { * Indicates whether the label should automatically rotate to align with the edge's direction */ autoRotate?: boolean; + /** + * 文本的最大宽度,超出会裁减 + * maxWidth of label text, which will be clipped if exceeded + */ + maxWidth?: string | number; } & LabelStyleProps;