feat: add maxWidth and wordWrapWidth for edge

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<string, unknown>;
 
+export type BaseEdgeKeyStyleProps<KT> = KT & {
+ /**
+ * <zh/> 边的起点
+ * <en/> The source point. Represents the start of the edge
+ */
+ sourcePoint: Point;
+ /**
+ * <zh/> 边的终点
+ * <en/> The target point. Represents the end of the edge
+ */
+ targetPoint: Point;
+};
+
 export type BaseEdgeStyleProps<KT extends object> = BaseShapeStyleProps &
- KT & {
+ BaseEdgeKeyStyleProps<KT> & {
  label?: boolean;
  halo?: boolean;
  startArrow?: boolean;
@@ -45,10 +59,11 @@ export type BaseEdgeOptions<KT extends object> = DisplayObjectConfig<BaseEdgeSty
 
 type ParsedBaseEdgeStyleProps<KT extends object> = Required<BaseEdgeStyleProps<KT>>;
 export abstract class BaseEdge<KT extends object, KS extends DisplayObject> extends BaseShape<BaseEdgeStyleProps<KT>> {
- static defaultStyleProps: BaseEdgeStyleProps<Record<string, unknown>> = {
+ static defaultStyleProps: BaseEdgeStyleProps<any> = {
  isBillboard: true,
  label: true,
  labelPosition: 'center',
+ labelMaxWidth: '80%',
  labelOffsetX: 4,
  labelOffsetY: -6,
  labelIsBillboard: true,
@@ -97,7 +112,7 @@ export abstract class BaseEdge<KT extends object, KS extends DisplayObject> exte
  if (attributes.label === false) return false;
 
  const labelStyle = subStyleProps<Required<EdgeLabelStyleProps>>(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<KT extends object, KS extends DisplayObject> 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<KT>, isStart: boolean) {

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 & {
- /**
- * <zh/> 边的起点
- * <en/> The source point. Represents the start of the edge
- */
- sourcePoint: Point;
- /**
- * <zh/> 边的终点
- * <en/> The target point. Represents the end of the edge
- */
- targetPoint: Point;
+type CubicHorizontalKeyStyleProps = BaseEdgeKeyStyleProps<PathStyleProps> & {
  /**
  * <zh/> 控制点在两端点连线上的相对位置，范围为`0-1`
  * <en/> The relative position of the control point on the line, ranging from `0-1`

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 & {
- /**
- * <zh/> 边的起点
- * <en/> The source point. Represents the start of the edge
- */
- sourcePoint: Point;
- /**
- * <zh/> 边的终点
- * <en/> The target point. Represents the end of the edge
- */
- targetPoint: Point;
+type CubicVerticalKeyStyleProps = BaseEdgeKeyStyleProps<PathStyleProps> & {
  /**
  * <zh/> 控制点在两端点连线上的相对位置，范围为`0-1`
  * <en/> The relative position of the control point on the line, ranging from `0-1`

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 & {
- /**
- * <zh/> 边的起点
- * <en/> The source point. Represents the start of the edge
- */
- sourcePoint: Point;
- /**
- * <zh/> 边的终点
- * <en/> The target point. Represents the end of the edge
- */
- targetPoint: Point;
+type CubicKeyStyleProps = BaseEdgeKeyStyleProps<PathStyleProps> & {
  /**
  * <zh/> 控制点数组，用于定义曲线的形状。如果不指定，将会通过`curveOffset`和`curvePosition`来计算控制点
  * <en/> Control points. Used to define the shape of the curve. If not specified, it will be calculated using `curveOffset` and `curvePosition`.

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<GLineStyleProps> & {
- /**
- * <zh/> 边的起点
- * <en/> The source point. Represents the start of the edge
- */
- sourcePoint: Point;
- /**
- * <zh/> 边的终点
- * <en/> The target point. Represents the end of the edge
- */
- targetPoint: Point;
-};
+type LineKeyStyleProps = BaseEdgeKeyStyleProps<GLineStyleProps>;
 
 export type LineStyleProps = BaseEdgeStyleProps<LineKeyStyleProps>;
 

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 & {
- /**
- * <zh/> 边的起点
- * <en/> The source point. Represents the start of the edge
- */
- sourcePoint: Point;
- /**
- * <zh/> 边的终点
- * <en/> The target point. Represents the end of the edge
- */
- targetPoint: Point;
+type PolylineKeyStyleProps = BaseEdgeKeyStyleProps<PathStyleProps> & {
  /**
  * <zh/> 拐弯处的圆角弧度，默认为 0
  * <en/> The radius of the rounded corner at the turning point. The default is 0

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 & {
- /**
- * <zh/> 边的起点
- * <en/> The source point. Represents the start of the edge
- */
- sourcePoint: Point;
- /**
- * <zh/> 边的终点
- * <en/> The target point. Represents the end of the edge
- */
- targetPoint: Point;
+type QuadraticKeyStyleProps = BaseEdgeKeyStyleProps<PathStyleProps> & {
  /**
  * <zh/> 控制点，用于定义曲线的形状。如果不指定，将会通过`curveOffset`和`curvePosition`来计算控制点
  * <en/> Control point. Used to define the shape of the curve. If not specified, it will be calculated using `curveOffset` and `curvePosition`.

packages/g6/src/elements/nodes/base-node.ts

@@ -90,7 +90,7 @@ export abstract class BaseNode<KT extends object, KS> extends BaseShape<BaseNode
  } as NodeLabelStyleProps;
  }
 
- protected abstract getHaloStyle(attributes: ParsedBaseNodeStyleProps<KT>): KT;
+ protected abstract getHaloStyle(attributes: ParsedBaseNodeStyleProps<KT>): KT | false;
 
  protected getIconStyle(attributes: ParsedBaseNodeStyleProps<KT>) {
  if (attributes.icon === false || isEmpty(attributes.iconText || attributes.iconSrc)) return false;

packages/g6/src/elements/nodes/circle.ts

@@ -17,7 +17,9 @@ export class Circle extends BaseNode<GCircleStyleProps, GCircle> {
  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<GCircleStyleProps>;
  const keyStyle = this.getKeyStyle(attributes);
 

packages/g6/src/elements/nodes/star.ts

@@ -35,7 +35,9 @@ export class Star extends BaseNode<KeyShapeStyleProps, GPath> {
  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<KeyShapeStyleProps>;
  const keyStyle = this.getKeyStyle(attributes);
 
@@ -46,6 +48,8 @@ export class Star extends BaseNode<KeyShapeStyleProps, GPath> {
  }
 
  protected getAnchorsStyle(attributes: ParsedStarStyleProps): NodeAnchorStyleProps[] {
+ if (attributes.anchor === false) return [];
+
  const { outerR, innerR } = attributes;
  const anchors = getStarAnchors(outerR, innerR);
 

packages/g6/src/types/edge.ts

@@ -28,4 +28,9 @@ export type EdgeLabelStyleProps = {
  * <en/> Indicates whether the label should automatically rotate to align with the edge's direction
  */
  autoRotate?: boolean;
+ /**
+ * <zh/> 文本的最大宽度，超出会裁减
+ * <en/> maxWidth of label text, which will be clipped if exceeded
+ */
+ maxWidth?: string | number;
 } & LabelStyleProps;