docs: update desc of graphics

packages/vrender-core/src/interface/graphic/arc.ts

@@ -5,13 +5,21 @@ import type { ICustomPath2D } from '../path';
  * 扇区属性
  */
 export type IArcAttribute = {
-  /** 内半径 */
+  /**
+   * 内半径
+   */
   innerRadius: number;
-  /** 外半径 */
+  /**
+   * 外半径
+   */
   outerRadius: number;
-  /* 内边距 */
+  /**
+   * 内边距
+   */
   innerPadding: number;
-  /* 外边距 */
+  /**
+   * 外边距
+   */
   outerPadding: number;
   /**
    * 起始角度；
@@ -47,6 +55,9 @@ export type IArcAttribute = {
    * 间隔角度通常只应用于环形扇区（即当内半径大于 0）
    */
   padAngle: number;
+  /**
+   * 间隙半径
+   */
   padRadius: number;
 
   /**

packages/vrender-core/src/interface/graphic/area.ts

@@ -4,11 +4,29 @@ import type { IConnectedStyle, IGraphic, IGraphicAttribute } from '../graphic';
 import type { ICurveType } from '../common';
 
 export type IAreaAttribute = {
-  segments: IAreaSegment[]; // 分段设置point和样式
+  /**
+   * 分段设置point和样式
+   */
+  segments: IAreaSegment[];
+  /**
+   * 所有的点坐标
+   */
   points: IPointLike[];
+  /**
+   * 曲线的类型，默认为linear
+   */
   curveType: ICurveType;
+  /**
+   * 线段的裁切比例/显示长度占总长度的比例
+   */
   clipRange: number;
+  /**
+   * 是否是闭合曲线
+   */
   closePath: boolean;
+  /**
+   * 曲线类型为catmullRom时，对应的张力参数
+   */
   curveTension: number;
 };
 

packages/vrender-core/src/interface/graphic/circle.ts

@@ -1,8 +1,17 @@
 import type { IGraphicAttribute, IGraphic } from '../graphic';
 
 export type ICircleAttribute = {
+  /**
+   * 半径
+   */
   radius: number;
+  /**
+   * 起始角度，单位为弧度
+   */
   startAngle: number;
+  /**
+   * 终止角度，单位为弧度
+   */
   endAngle: number;
 };
 

packages/vrender-core/src/interface/graphic/group.ts

@@ -4,20 +4,63 @@ import type { INode } from '../node-tree';
 import type { GraphicAttributeMap } from './creator';
 
 export type IGroupAttribute = {
+  /**
+   * 路径，用于绘制路径图形或者设置裁剪图形
+   */
   path: IGraphic[];
+  /**
+   * 宽度
+   */
   width: number;
+  /**
+   * 高度
+   */
   height: number;
+  /**
+   * 圆角半径
+   */
   cornerRadius: number | number[];
+  /**
+   * 圆角类型，
+   * 'round' - 圆弧
+   * 'bevel' - 斜角
+   */
   cornerType: 'round' | 'bevel';
+  /**
+   * 是否剪裁
+   */
   clip: boolean;
+  /**
+   * 所有的子节点是否可见
+   */
   visibleAll: boolean;
+  /**
+   * 布局方式
+   */
   display?: 'relative' | 'inner-block' | 'flex';
+  /**
+   * flex布局的方向
+   */
   flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+  /**
+   * flex布局的换行
+   */
   flexWrap?: 'nowrap' | 'wrap';
+  /**
+   * flex布局中，子元素在主轴上的对齐方式
+   */
   justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
+  /**
+   * flex布局中，子元素在交叉轴上的对齐方式
+   */
   alignItems?: 'flex-start' | 'flex-end' | 'center';
+  /**
+   * flex布局中，多行内容的垂直对齐方式
+   */
   alignContent?: 'flex-start' | 'center' | 'space-between' | 'space-around';
-  // 基准的透明度，用于控制group下面整体图元的透明度
+  /**
+   * 基准的透明度，用于控制group下面整体图元的透明度
+   */
   baseOpacity?: number;
 };
 

packages/vrender-core/src/interface/graphic/image.ts

@@ -3,12 +3,35 @@ import type { IGraphicAttribute, IGraphic } from '../graphic';
 export type IRepeatType = 'no-repeat' | 'repeat';
 
 export type IImageAttribute = {
+  /**
+   * 宽度
+   */
   width: number;
+  /**
+   * 高度
+   */
   height: number;
+  /**
+   * x方向的重复方式
+   */
   repeatX: IRepeatType;
+  /**
+   * y方向的重复方式
+   */
   repeatY: IRepeatType;
+  /**
+   * 图像url或者内容
+   */
   image: string | HTMLImageElement | HTMLCanvasElement;
+  /**
+   * 圆角半径
+   */
   cornerRadius: number | number[];
+  /**
+   * 圆角类型，
+   * 'round' - 圆弧
+   * 'bevel' - 斜角
+   */
   cornerType: 'round' | 'bevel';
 };
 

packages/vrender-core/src/interface/graphic/line.ts

@@ -10,12 +10,33 @@ import type { ISegPath2D } from '../curve';
 export type IClipRangeByDimensionType = 'x' | 'y' | 'auto' | 'default';
 
 export type ILineAttribute = {
-  segments: ISegment[]; // 分段设置point和样式
-  points: IPointLike[]; // segments points 二选一
+  /**
+   * 分段设置point和样式
+   */
+  segments: ISegment[];
+  /**
+   * 所有点的坐标，segments 和 points 不能同时生效
+   */
+  points: IPointLike[];
+  /**
+   * 曲线的类型，默认为linear
+   */
   curveType: ICurveType;
+  /**
+   * 线段的裁切比例/显示长度占总长度的比例
+   */
   clipRange: number;
+  /**
+   * 裁剪的维度
+   */
   clipRangeByDimension: IClipRangeByDimensionType;
-  closePath: boolean; // 是否封闭路径
+  /**
+   * 是否封闭路径
+   */
+  closePath: boolean;
+  /**
+   * 曲线类型为catmullRom时，对应的张力参数
+   */
   curveTension: number;
 };
 

packages/vrender-core/src/interface/graphic/polygon.ts

@@ -2,9 +2,17 @@ import type { IPointLike } from '@visactor/vutils';
 import type { IGraphicAttribute, IGraphic } from '../graphic';
 
 export type IPolygonAttribute = {
-  // ? 不需要x2/y2
+  /**
+   * 多边形的顶点坐标
+   */
   points: IPointLike[];
+  /**
+   * 圆角半径
+   */
   cornerRadius?: number | number[];
+  /**
+   * 是否闭合多边形
+   */
   closePath?: boolean;
 };
 

packages/vrender-core/src/interface/graphic/rect.ts

@@ -6,7 +6,15 @@ export type IRectAttribute = {
   height: number;
   x1: number;
   y1: number;
+  /**
+   * 圆角半径
+   */
   cornerRadius: number | number[];
+  /**
+   * 圆角类型，
+   * 'round' - 圆弧
+   * 'bevel' - 斜角
+   */
   cornerType: 'round' | 'bevel';
 };
 

packages/vrender-core/src/interface/graphic/text.ts

@@ -39,41 +39,127 @@ export enum MeasureModeEnum {
 }
 
 export type ITextAttribute = {
+  /**
+   * 文字内容
+   */
   text: string | number | string[] | number[];
+  /**
+   * 单行的的最大长度，当超出这个长度，可以展示省略符或者换行、截断等
+   * 后续可能去除
+   */
   maxLineWidth: number;
+  /**
+   * 单行的的最大长度，当超出这个长度，可以展示省略符或者换行、截断等
+   * 同 maxLineWidth
+   */
   maxWidth: number;
+  /**
+   * 文字对齐方式
+   */
   textAlign: TextAlignType;
+  /**
+   * 文字竖直方向的对齐方式
+   */
   textBaseline: TextBaselineType;
+  /**
+   * 字号
+   */
   fontSize: number;
+  /**
+   * 字体
+   */
   fontFamily: string;
+  /**
+   * 字重
+   */
   fontWeight: string | number;
+  /**
+   * 文字超出后的省略符
+   */
   ellipsis: boolean | string;
+  /**
+   * 控制文本的小型大写字母（small-caps）显示
+   */
   fontVariant: string;
+  /**
+   * 字体样式，是否为斜体等
+   */
   fontStyle: string;
+  /**
+   * 行高（字符串类型表示比例值，如"150%"）
+   */
   lineHeight: number | string;
+  /**
+   * 是否显示下划线
+   */
   underline: number;
+  /**
+   * 是否显示中划线
+   */
   lineThrough: number;
+  /**
+   * 在3d场景下是否根据z坐标缩放
+   */
   scaleIn3d: boolean;
+  /**
+   * 文本的排布方向，如果需要文本纵向排布，可以配置为 'vertical'
+   */
   direction: 'horizontal' | 'vertical';
-  verticalMode: number; // 垂直布局的模式，0代表默认（横向textAlign，纵向textBaseline），1代表特殊（横向textBaseline，纵向textAlign）
+  /**
+   * 垂直布局的模式，0代表默认（横向textAlign，纵向textBaseline），1代表特殊（横向textBaseline，纵向textAlign）
+   */
+  verticalMode: number;
+  /*
+   * 单词断行
+   */
   wordBreak: 'break-word' | 'break-all' | 'keep-all';
+  /**
+   * 内部配置，是否忽略一些bounds的buffer
+   */
   ignoreBuf: boolean;
+  /**
+   * 高度限制控制显示内容及省略号
+   */
   heightLimit: number;
+  /**
+   * 按照行数限制显示内容及省略号
+   */
   lineClamp: number;
+  /**
+   * 同 whiteSpace: 'normal'
+   * 后续可能删除
+   */
   wrap: boolean;
+  /**
+   * 设置如何处理空白字符
+   */
   whiteSpace: 'normal' | 'no-wrap';
+  /**
+   * 省略号的位置，默认为'end'
+   */
   suffixPosition: 'start' | 'end' | 'middle';
+  /**
+   * 下划线的虚线样式
+   */
   underlineDash: number[];
+  /**
+   * 下划线的虚线偏移量
+   */
   underlineOffset: number;
-  // textDecoration: number;
-  // textDecorationWidth: number;
-  // padding?: number | number[];
+  /**
+   * 关闭poptip
+   */
   disableAutoClipedPoptip?: boolean;
-  // @since 0.21.0
-  // 测量模式，默认使用actualBounding
+  /**
+   * @since 0.21.0
+   * 测量模式，默认使用actualBounding
+   */
   measureMode?: MeasureModeEnum;
-  // @since 0.21.0
-  // 保持在行中间的位置
+
+  /**
+   * @since 0.21.0
+   * 保持在行中间的位置
+   */
   keepCenterInLine?: boolean;
 };
 export type ITextCache = {