@visactor/vrender 0.9.0-alpha.1 → 0.9.0-fillstroke.0

package/cjs/interface/graphic/creator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/interface/graphic/creator.ts"],"names":[],"mappings":"","file":"creator.js","sourcesContent":["import { IGraphicAttribute } from '../graphic';\nimport { IArc, IArcAttribute, IArcGraphicAttribute } from './arc';\nimport { IArea, IAreaAttribute, IAreaGraphicAttribute } from './area';\nimport { ICircle, ICircleAttribute, ICircleGraphicAttribute } from './circle';\nimport { IEllipse, IEllipseAttribute } from './ellipse';\nimport { IGroup, IGroupAttribute, IGroupGraphicAttribute } from './group';\nimport { IImage, IImageAttribute, IImageGraphicAttribute } from './image';\nimport { IIsogon, IIsogonAttribute } from './isogon';\nimport { ILine, ILineAttribute, ILineGraphicAttribute } from './line';\nimport { IPath, IPathAttribute, IPathGraphicAttribute } from './path';\nimport { IPolygon, IPolygonAttribute } from './polygon';\nimport { IRect, IRectAttribute, IRectGraphicAttribute } from './rect';\nimport { IRichText, IRichTextAttribute, IRichTextGraphicAttribute } from './richText';\nimport { ISvg, ISvgAttribute } from './svg';\nimport { ISymbol, ISymbolAttribute, ISymbolGraphicAttribute } from './symbol';\nimport { IText, ITextAttribute, ITextGraphicAttribute, IWrapTextGraphicAttribute } from './text';\n\nexport type IMarkAttribute =\n  | IGraphicAttribute\n  | IArcAttribute\n  | IAreaAttribute\n  | ICircleAttribute\n  | IEllipseAttribute\n  | IGroupAttribute\n  | IImageAttribute\n  | IIsogonAttribute\n  | ILineAttribute\n  | IPathAttribute\n  | IPolygonAttribute\n  | IRectAttribute\n  | IRichTextAttribute\n  | ISvgAttribute\n  | ISymbolAttribute\n  | ITextAttribute;\n\nexport type IThemeAttribute =\n  | IArcGraphicAttribute\n  | IAreaGraphicAttribute\n  | ICircleGraphicAttribute\n  // | IEllipseGraphicAttribute\n  // | IGroupGraphicAttribute\n  | IImageGraphicAttribute\n  // | IIsogonGraphicAttribute\n  | ILineGraphicAttribute\n  | IPathGraphicAttribute\n  // | IPolygonGraphicAttribute\n  | IRectGraphicAttribute\n  // | IRichTextGraphicAttribute\n  // | ISvgGraphicAttribute\n  | ISymbolGraphicAttribute\n  | ITextGraphicAttribute\n  | IRichTextGraphicAttribute\n  | IWrapTextGraphicAttribute;\n\n/**\n * facet object map\n */\nexport interface GraphicAttributeMap {\n  readonly arc: IArcGraphicAttribute;\n  readonly area: IAreaGraphicAttribute;\n  readonly circle: ICircleGraphicAttribute;\n  readonly image: IImageGraphicAttribute;\n  readonly line: ILineGraphicAttribute;\n  readonly path: IPathGraphicAttribute;\n  readonly group: IGroupGraphicAttribute;\n  readonly rect: IRectGraphicAttribute;\n  readonly symbol: ISymbolGraphicAttribute;\n  readonly text: ITextGraphicAttribute;\n  readonly richtext: IRichTextGraphicAttribute;\n  readonly wrapText: IWrapTextGraphicAttribute;\n}\n\n// export declare function createArc(params: Partial<IArcAttribute & IGraphicAttribute>): IArc;\n// export declare function createArea(params: Partial<IAreaAttribute & IGraphicAttribute>): IArea;\n// export declare function createCircle(params: Partial<ICircleAttribute & IGraphicAttribute>): ICircle;\n// // export declare function createDynamicPath(params: Params<Partial<IDynamicPathShape>, Partial<IGraphicAttribute>>): IDynamicPath;\n// export declare function createEllipse(params: Partial<IEllipseAttribute & IGraphicAttribute>): IEllipse;\n// export declare function createGlyph(): IGlyph;\n// export declare function createGroup(params: Partial<IGroupAttribute & IGraphicAttribute>): IGroup;\n// export declare function createImage(params: Partial<IImageAttribute & IGraphicAttribute>): IImage;\n// export declare function createIsogon(params: Partial<IIsogonAttribute & IGraphicAttribute>): IIsogon;\n// export declare function createIine(params: Partial<ILineAttribute & IGraphicAttribute>): ILine;\n// export declare function createPath(params: Partial<IPathAttribute & IGraphicAttribute>): IPath;\n// export declare function createPolygon(params: Partial<IPolygonAttribute & IGraphicAttribute>): IPolygon;\n// // export declare function createPolyline(params: Partial<IArcAttribute & IGraphicAttribute>): IPolyline;\n// export declare function createRect(params: Partial<IRectAttribute & IGraphicAttribute>): IRect;\n// export declare function createRichText(params: Partial<IRichTextAttribute & IGraphicAttribute>): IRichText;\n// export declare function createSvg(params: Partial<ISvgAttribute & IGraphicAttribute>): ISvg;\n// export declare function createSymbol(params: Partial<ISymbolAttribute & IGraphicAttribute>): ISymbol;\n// export declare function createText(params: Partial<ITextAttribute & IGraphicAttribute>): IText;\n"]}
+{"version":3,"sources":["../src/interface/graphic/creator.ts"],"names":[],"mappings":"","file":"creator.js","sourcesContent":["import { IGraphicAttribute } from '../graphic';\nimport { IArcAttribute, IArcGraphicAttribute } from './arc';\nimport { IAreaAttribute, IAreaGraphicAttribute } from './area';\nimport { ICircleAttribute, ICircleGraphicAttribute } from './circle';\nimport { IEllipseAttribute } from './ellipse';\nimport { IGroupAttribute, IGroupGraphicAttribute } from './group';\nimport { IImageAttribute, IImageGraphicAttribute } from './image';\nimport { IIsogonAttribute } from './isogon';\nimport { ILineAttribute, ILineGraphicAttribute } from './line';\nimport { IPathAttribute, IPathGraphicAttribute } from './path';\nimport { IPolygonAttribute } from './polygon';\nimport { IRectAttribute, IRectGraphicAttribute } from './rect';\nimport { IRichTextAttribute, IRichTextGraphicAttribute } from './richText';\nimport { ISvgAttribute } from './svg';\nimport { ISymbolAttribute, ISymbolGraphicAttribute } from './symbol';\nimport { ITextAttribute, ITextGraphicAttribute, IWrapTextGraphicAttribute } from './text';\n\nexport type IMarkAttribute =\n  | IGraphicAttribute\n  | IArcAttribute\n  | IAreaAttribute\n  | ICircleAttribute\n  | IEllipseAttribute\n  | IGroupAttribute\n  | IImageAttribute\n  | IIsogonAttribute\n  | ILineAttribute\n  | IPathAttribute\n  | IPolygonAttribute\n  | IRectAttribute\n  | IRichTextAttribute\n  | ISvgAttribute\n  | ISymbolAttribute\n  | ITextAttribute;\n\nexport type IThemeAttribute =\n  | IArcGraphicAttribute\n  | IAreaGraphicAttribute\n  | ICircleGraphicAttribute\n  // | IEllipseGraphicAttribute\n  // | IGroupGraphicAttribute\n  | IImageGraphicAttribute\n  // | IIsogonGraphicAttribute\n  | ILineGraphicAttribute\n  | IPathGraphicAttribute\n  // | IPolygonGraphicAttribute\n  | IRectGraphicAttribute\n  // | IRichTextGraphicAttribute\n  // | ISvgGraphicAttribute\n  | ISymbolGraphicAttribute\n  | ITextGraphicAttribute\n  | IRichTextGraphicAttribute\n  | IWrapTextGraphicAttribute;\n\n/**\n * facet object map\n */\nexport interface GraphicAttributeMap {\n  readonly arc: IArcGraphicAttribute;\n  readonly area: IAreaGraphicAttribute;\n  readonly circle: ICircleGraphicAttribute;\n  readonly image: IImageGraphicAttribute;\n  readonly line: ILineGraphicAttribute;\n  readonly path: IPathGraphicAttribute;\n  readonly group: IGroupGraphicAttribute;\n  readonly rect: IRectGraphicAttribute;\n  readonly symbol: ISymbolGraphicAttribute;\n  readonly text: ITextGraphicAttribute;\n  readonly richtext: IRichTextGraphicAttribute;\n  readonly wrapText: IWrapTextGraphicAttribute;\n}\n\n// export declare function createArc(params: Partial<IArcAttribute & IGraphicAttribute>): IArc;\n// export declare function createArea(params: Partial<IAreaAttribute & IGraphicAttribute>): IArea;\n// export declare function createCircle(params: Partial<ICircleAttribute & IGraphicAttribute>): ICircle;\n// // export declare function createDynamicPath(params: Params<Partial<IDynamicPathShape>, Partial<IGraphicAttribute>>): IDynamicPath;\n// export declare function createEllipse(params: Partial<IEllipseAttribute & IGraphicAttribute>): IEllipse;\n// export declare function createGlyph(): IGlyph;\n// export declare function createGroup(params: Partial<IGroupAttribute & IGraphicAttribute>): IGroup;\n// export declare function createImage(params: Partial<IImageAttribute & IGraphicAttribute>): IImage;\n// export declare function createIsogon(params: Partial<IIsogonAttribute & IGraphicAttribute>): IIsogon;\n// export declare function createIine(params: Partial<ILineAttribute & IGraphicAttribute>): ILine;\n// export declare function createPath(params: Partial<IPathAttribute & IGraphicAttribute>): IPath;\n// export declare function createPolygon(params: Partial<IPolygonAttribute & IGraphicAttribute>): IPolygon;\n// // export declare function createPolyline(params: Partial<IArcAttribute & IGraphicAttribute>): IPolyline;\n// export declare function createRect(params: Partial<IRectAttribute & IGraphicAttribute>): IRect;\n// export declare function createRichText(params: Partial<IRichTextAttribute & IGraphicAttribute>): IRichText;\n// export declare function createSvg(params: Partial<ISvgAttribute & IGraphicAttribute>): ISvg;\n// export declare function createSymbol(params: Partial<ISymbolAttribute & IGraphicAttribute>): ISymbol;\n// export declare function createText(params: Partial<ITextAttribute & IGraphicAttribute>): IText;\n"]}

package/cjs/interface/graphic/line.d.ts

@@ -14,7 +14,7 @@ export type ILineGraphicAttribute = Partial<IGraphicAttribute> & Partial<ILineAt
 export interface ILine extends IGraphic<ILineGraphicAttribute> {
     cache?: ISegPath2D | ISegPath2D[];
 }
-type ISegmentStyle = Pick<IGraphicAttribute, 'strokeColor' | 'strokeOpacity' | 'lineDash' | 'lineDashOffset' | 'lineCap' | 'lineJoin' | 'lineWidth' | 'miterLimit'>;
+type ISegmentStyle = Pick<IGraphicAttribute, 'stroke' | 'strokeOpacity' | 'lineDash' | 'lineDashOffset' | 'lineCap' | 'lineJoin' | 'lineWidth' | 'miterLimit'>;
 export interface ISegment extends Partial<ISegmentStyle> {
     points: IPointLike[];
     simplify?: boolean;

package/cjs/interface/graphic/line.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/interface/graphic/line.ts"],"names":[],"mappings":"","file":"line.js","sourcesContent":["import type { IPointLike } from '@visactor/vutils';\nimport type { IGraphicAttribute, IGraphic } from '../graphic';\nimport type { ICurveType } from '../common';\nimport type { ISegPath2D } from '../../common';\n\n// 依据x纬度做clipRange\n// 依据y纬度做clipRange\n// 依据线段自动匹配纬度做clipRange\n// 依据线长纬度做clipRange\nexport type IClipRangeByDimensionType = 'x' | 'y' | 'auto' | 'default';\n\nexport type ILineAttribute = {\n  segments: ISegment[]; // 分段设置point和样式\n  points: IPointLike[]; // segments points 二选一\n  curveType: ICurveType;\n  clipRange: number;\n  clipRangeByDimension: IClipRangeByDimensionType;\n};\n\nexport type ILineGraphicAttribute = Partial<IGraphicAttribute> & Partial<ILineAttribute>;\n\nexport interface ILine extends IGraphic<ILineGraphicAttribute> {\n  cache?: ISegPath2D | ISegPath2D[];\n}\n\ntype ISegmentStyle = Pick<\n  IGraphicAttribute,\n  'strokeColor' | 'strokeOpacity' | 'lineDash' | 'lineDashOffset' | 'lineCap' | 'lineJoin' | 'lineWidth' | 'miterLimit'\n>;\n\nexport interface ISegment extends Partial<ISegmentStyle> {\n  points: IPointLike[];\n  simplify?: boolean;\n}\n"]}
+{"version":3,"sources":["../src/interface/graphic/line.ts"],"names":[],"mappings":"","file":"line.js","sourcesContent":["import type { IPointLike } from '@visactor/vutils';\nimport type { IGraphicAttribute, IGraphic } from '../graphic';\nimport type { ICurveType } from '../common';\nimport type { ISegPath2D } from '../../common';\n\n// 依据x纬度做clipRange\n// 依据y纬度做clipRange\n// 依据线段自动匹配纬度做clipRange\n// 依据线长纬度做clipRange\nexport type IClipRangeByDimensionType = 'x' | 'y' | 'auto' | 'default';\n\nexport type ILineAttribute = {\n  segments: ISegment[]; // 分段设置point和样式\n  points: IPointLike[]; // segments points 二选一\n  curveType: ICurveType;\n  clipRange: number;\n  clipRangeByDimension: IClipRangeByDimensionType;\n};\n\nexport type ILineGraphicAttribute = Partial<IGraphicAttribute> & Partial<ILineAttribute>;\n\nexport interface ILine extends IGraphic<ILineGraphicAttribute> {\n  cache?: ISegPath2D | ISegPath2D[];\n}\n\ntype ISegmentStyle = Pick<\n  IGraphicAttribute,\n  'stroke' | 'strokeOpacity' | 'lineDash' | 'lineDashOffset' | 'lineCap' | 'lineJoin' | 'lineWidth' | 'miterLimit'\n>;\n\nexport interface ISegment extends Partial<ISegmentStyle> {\n  points: IPointLike[];\n  simplify?: boolean;\n}\n"]}

package/cjs/interface/graphic/richText.d.ts

@@ -35,10 +35,8 @@ export type IRichTextParagraphCharacter = IRichTextBasicCharacter & {
     text: string;
     fontSize?: number;
     fontFamily?: string;
-    fill?: boolean;
-    stroke?: boolean;
-    fillColor?: IColor;
-    strokeColor?: IColor;
+    fill?: IColor | boolean;
+    stroke?: IColor | boolean;
     fontWeight?: string;
     fontStyle?: RichTextFontStyle;
     textDecoration?: RichTextTextDecoration;

package/cjs/interface/graphic/richText.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/interface/graphic/richText.ts"],"names":[],"mappings":"","file":"richText.js","sourcesContent":["import type Frame from '../../graphic/richtext/frame';\nimport type { IColor } from '../color';\nimport type { IGraphicAttribute, IGraphic } from '../graphic';\nimport type { IImage, IImageGraphicAttribute } from './image';\n\nexport type IRichTextAttribute = {\n  width: number;\n  height: number;\n  ellipsis: boolean | string;\n  wordBreak: RichTextWordBreak;\n  verticalDirection: RichTextVerticalDirection;\n  maxHeight: number;\n  maxWidth: number;\n  textAlign: RichTextGlobalAlignType;\n  textBaseline: RichTextGlobalBaselineType;\n  layoutDirection: RichTextLayoutDirectionType;\n  textConfig: IRichTextCharacter[];\n  singleLine: boolean;\n};\n\nexport type IRichTextGraphicAttribute = Partial<IGraphicAttribute> & Partial<IRichTextAttribute>;\n\nexport type RichTextWordBreak = 'break-word' | 'break-all';\nexport type RichTextVerticalDirection = 'top' | 'middle' | 'bottom';\nexport type RichTextGlobalAlignType = 'left' | 'right' | 'center';\nexport type RichTextGlobalBaselineType = 'top' | 'middle' | 'bottom';\nexport type RichTextLayoutDirectionType = 'horizontal' | 'vertical';\nexport type RichTextFontStyle = 'normal' | 'italic' | 'oblique';\nexport type RichTextTextDecoration = 'none' | 'underline' | 'line-through';\n// export type RichTextTextAlign = 'left' | 'right' | 'center';\nexport type RichTextScript = 'normal' | 'sub' | 'super';\n\nexport type IRichTextBasicCharacter = {\n  lineHeight?: number;\n  textAlign?: CanvasTextAlign; // left, right, center\n  textBaseline?: CanvasTextBaseline;\n  direction?: RichTextLayoutDirectionType;\n};\n\nexport type IRichTextParagraphCharacter = IRichTextBasicCharacter & {\n  text: string;\n  fontSize?: number;\n  fontFamily?: string;\n  fill?: boolean;\n  stroke?: boolean;\n  fillColor?: IColor;\n  strokeColor?: IColor;\n  fontWeight?: string;\n  // lineHeight?: number;\n  fontStyle?: RichTextFontStyle; // normal, italic, oblique\n  textDecoration?: RichTextTextDecoration; // none, underline, line-through\n  // textAlign?: RichTextTextAlign; // left, right, center\n  script?: RichTextScript; // normal, sub, super\n  underline?: boolean;\n  lineThrough?: boolean;\n  // direction?: RichTextLayoutDirectionType;\n};\n\nexport type IRichTextImageCharacter = IRichTextBasicCharacter & {\n  // 图片基础属性\n  image: string | HTMLImageElement | HTMLCanvasElement;\n  width: number;\n  height: number;\n\n  // hover相关属性\n  // backgroundShow?: boolean; // 是否显示background\n  backgroundShowMode?: 'always' | 'hover';\n  backgroundFill?: boolean;\n  backgroundFillColor?: IColor; // 背景矩形填充颜色\n  backgroundFillOpacity?: number; // 背景矩形填充透明度\n  backgroundStroke?: boolean;\n  backgroundStrokeColor?: IColor; // 背景矩形边框颜色\n  backgroundStrokeOpacity?: number; // 背景矩形边框透明度\n  backgroundRadius?: number; // 背景矩形圆角\n  // background size 同时控制了该icon的响应范围\n  backgroundWidth?: number;\n  backgroundHeight?: number;\n\n  // 唯一标识符\n  id?: string;\n\n  // lineHeight?: number;\n  // textAlign?: RichTextTextAlign; // left, right, center\n  // direction?: RichTextLayoutDirectionType;\n  margin?: number | number[];\n\n  funcType?: string;\n  hoverImage?: string | HTMLImageElement | HTMLCanvasElement;\n};\n\nexport type IRichTextCharacter = IRichTextParagraphCharacter | IRichTextImageCharacter;\n\nexport type IRichTextIconGraphicAttribute = IImageGraphicAttribute & {\n  id?: string;\n  backgroundShowMode?: 'always' | 'hover' | 'never';\n  backgroundFill?: boolean;\n  backgroundFillColor?: IColor; // 背景矩形填充颜色\n  backgroundFillOpacity?: number; // 背景矩形填充透明度\n  backgroundStroke?: boolean;\n  backgroundStrokeColor?: IColor; // 背景矩形边框颜色\n  backgroundStrokeOpacity?: number; // 背景矩形边框透明度\n  backgroundRadius?: number; // 背景矩形圆角\n  backgroundWidth?: number;\n  backgroundHeight?: number;\n\n  // lineHeight?: number;\n  textAlign?: CanvasTextAlign; // left, right, center\n  textBaseline?: CanvasTextBaseline;\n  direction?: RichTextLayoutDirectionType;\n\n  margin?: number | number[];\n\n  // backgroundShow?: boolean;\n};\n\nexport interface IRichText extends IGraphic<IRichTextGraphicAttribute> {\n  getFrameCache: () => Frame;\n}\n\nexport interface IRichTextIcon extends IImage {\n  attribute: IRichTextIconGraphicAttribute;\n  richtextId?: string;\n  globalX?: number;\n  globalY?: number;\n\n  _x: number;\n  _y: number;\n  _hovered: boolean;\n  _marginArray: [number, number, number, number];\n\n  setHoverState: (hovered: boolean) => void;\n}\n"]}
+{"version":3,"sources":["../src/interface/graphic/richText.ts"],"names":[],"mappings":"","file":"richText.js","sourcesContent":["import type Frame from '../../graphic/richtext/frame';\nimport type { IColor } from '../color';\nimport type { IGraphicAttribute, IGraphic } from '../graphic';\nimport type { IImage, IImageGraphicAttribute } from './image';\n\nexport type IRichTextAttribute = {\n  width: number;\n  height: number;\n  ellipsis: boolean | string;\n  wordBreak: RichTextWordBreak;\n  verticalDirection: RichTextVerticalDirection;\n  maxHeight: number;\n  maxWidth: number;\n  textAlign: RichTextGlobalAlignType;\n  textBaseline: RichTextGlobalBaselineType;\n  layoutDirection: RichTextLayoutDirectionType;\n  textConfig: IRichTextCharacter[];\n  singleLine: boolean;\n};\n\nexport type IRichTextGraphicAttribute = Partial<IGraphicAttribute> & Partial<IRichTextAttribute>;\n\nexport type RichTextWordBreak = 'break-word' | 'break-all';\nexport type RichTextVerticalDirection = 'top' | 'middle' | 'bottom';\nexport type RichTextGlobalAlignType = 'left' | 'right' | 'center';\nexport type RichTextGlobalBaselineType = 'top' | 'middle' | 'bottom';\nexport type RichTextLayoutDirectionType = 'horizontal' | 'vertical';\nexport type RichTextFontStyle = 'normal' | 'italic' | 'oblique';\nexport type RichTextTextDecoration = 'none' | 'underline' | 'line-through';\n// export type RichTextTextAlign = 'left' | 'right' | 'center';\nexport type RichTextScript = 'normal' | 'sub' | 'super';\n\nexport type IRichTextBasicCharacter = {\n  lineHeight?: number;\n  textAlign?: CanvasTextAlign; // left, right, center\n  textBaseline?: CanvasTextBaseline;\n  direction?: RichTextLayoutDirectionType;\n};\n\nexport type IRichTextParagraphCharacter = IRichTextBasicCharacter & {\n  text: string;\n  fontSize?: number;\n  fontFamily?: string;\n  fill?: IColor | boolean;\n  stroke?: IColor | boolean;\n  fontWeight?: string;\n  // lineHeight?: number;\n  fontStyle?: RichTextFontStyle; // normal, italic, oblique\n  textDecoration?: RichTextTextDecoration; // none, underline, line-through\n  // textAlign?: RichTextTextAlign; // left, right, center\n  script?: RichTextScript; // normal, sub, super\n  underline?: boolean;\n  lineThrough?: boolean;\n  // direction?: RichTextLayoutDirectionType;\n};\n\nexport type IRichTextImageCharacter = IRichTextBasicCharacter & {\n  // 图片基础属性\n  image: string | HTMLImageElement | HTMLCanvasElement;\n  width: number;\n  height: number;\n\n  // hover相关属性\n  // backgroundShow?: boolean; // 是否显示background\n  backgroundShowMode?: 'always' | 'hover';\n  backgroundFill?: boolean;\n  backgroundFillColor?: IColor; // 背景矩形填充颜色\n  backgroundFillOpacity?: number; // 背景矩形填充透明度\n  backgroundStroke?: boolean;\n  backgroundStrokeColor?: IColor; // 背景矩形边框颜色\n  backgroundStrokeOpacity?: number; // 背景矩形边框透明度\n  backgroundRadius?: number; // 背景矩形圆角\n  // background size 同时控制了该icon的响应范围\n  backgroundWidth?: number;\n  backgroundHeight?: number;\n\n  // 唯一标识符\n  id?: string;\n\n  // lineHeight?: number;\n  // textAlign?: RichTextTextAlign; // left, right, center\n  // direction?: RichTextLayoutDirectionType;\n  margin?: number | number[];\n\n  funcType?: string;\n  hoverImage?: string | HTMLImageElement | HTMLCanvasElement;\n};\n\nexport type IRichTextCharacter = IRichTextParagraphCharacter | IRichTextImageCharacter;\n\nexport type IRichTextIconGraphicAttribute = IImageGraphicAttribute & {\n  id?: string;\n  backgroundShowMode?: 'always' | 'hover' | 'never';\n  backgroundFill?: boolean;\n  backgroundFillColor?: IColor; // 背景矩形填充颜色\n  backgroundFillOpacity?: number; // 背景矩形填充透明度\n  backgroundStroke?: boolean;\n  backgroundStrokeColor?: IColor; // 背景矩形边框颜色\n  backgroundStrokeOpacity?: number; // 背景矩形边框透明度\n  backgroundRadius?: number; // 背景矩形圆角\n  backgroundWidth?: number;\n  backgroundHeight?: number;\n\n  // lineHeight?: number;\n  textAlign?: CanvasTextAlign; // left, right, center\n  textBaseline?: CanvasTextBaseline;\n  direction?: RichTextLayoutDirectionType;\n\n  margin?: number | number[];\n\n  // backgroundShow?: boolean;\n};\n\nexport interface IRichText extends IGraphic<IRichTextGraphicAttribute> {\n  getFrameCache: () => Frame;\n}\n\nexport interface IRichTextIcon extends IImage {\n  attribute: IRichTextIconGraphicAttribute;\n  richtextId?: string;\n  globalX?: number;\n  globalY?: number;\n\n  _x: number;\n  _y: number;\n  _hovered: boolean;\n  _marginArray: [number, number, number, number];\n\n  setHoverState: (hovered: boolean) => void;\n}\n"]}

package/cjs/interface/graphic.d.ts

@@ -36,22 +36,22 @@ export type ITransform = {
     anchor3d: [number | string, number | string, number] | [number | string, number | string];
     postMatrix: IMatrix;
 };
+export type IFillType = boolean | string | IColor;
 export type IFillStyle = {
-    fillColor: string | IColor;
     fillOpacity: number;
     shadowBlur: number;
     shadowColor: string;
     shadowOffsetX: number;
     shadowOffsetY: number;
-    fill: boolean | null;
+    fill: IFillType;
 };
 export type IBorderStyle = Omit<IStrokeStyle, 'outerBorder' | 'innerBorder'> & {
     distance: number | string;
 };
+export type IStrokeType = boolean | string | IColor | null;
 export type IStrokeStyle = {
     outerBorder: Partial<IBorderStyle>;
     innerBorder: Partial<IBorderStyle>;
-    strokeColor: string | IColor;
     strokeOpacity: number;
     lineDash: number[];
     lineDashOffset: number;
@@ -60,7 +60,7 @@ export type IStrokeStyle = {
     lineJoin: CanvasLineJoin;
     miterLimit: number;
     strokeBoundsBuffer: number;
-    stroke: boolean[] | number | boolean | null;
+    stroke: IStrokeType[] | IStrokeType;
 };
 type TextureType = 'circle' | 'diamond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid';
 export type IGraphicStyle = IFillStyle & IStrokeStyle & {

package/cjs/interface/graphic.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/interface/graphic.ts"],"names":[],"mappings":"","file":"graphic.js","sourcesContent":["import type { IAABBBounds, IOBBBounds, IMatrix, IPointLike, IPoint } from '@visactor/vutils';\nimport type { IAnimate, IStep, EasingType, IAnimateTarget } from './animate';\nimport type { IColor } from './color';\nimport type { IGroup } from './graphic/group';\nimport type { IShadowRoot } from './graphic/shadow-root';\nimport type { ILayer } from './layer';\nimport type { INode } from './node-tree';\nimport type { ICustomPath2D } from './path';\nimport type { IStage } from './stage';\nimport type { IGlyphGraphicAttribute } from './graphic/glyph';\nimport type { IContainPointMode } from '../common/enums';\nimport type { IFace3d } from './graphic/face3d';\n\ntype IStrokeSeg = {\n  start: number; // 百分比\n  // end和length二选一\n  end: number; // 百分比\n  length: number; // 像素长度\n};\n\n// TODO 最后加一个any\nexport type GraphicType =\n  | 'area'\n  | 'circle'\n  | 'ellipse'\n  | 'line'\n  | 'rect'\n  | 'rect3d'\n  | 'path'\n  | 'richtext'\n  | 'text'\n  | 'arc'\n  | 'arc3d'\n  | 'image'\n  | 'symbol'\n  | 'group'\n  | 'shadowroot'\n  | 'polygon'\n  | 'pyramid3d'\n  | 'glyph';\n\n// Cursor style\n// See: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor\nexport type Cursor =\n  | 'auto'\n  | 'default'\n  | 'none'\n  | 'context-menu'\n  | 'help'\n  | 'pointer'\n  | 'progress'\n  | 'wait'\n  | 'cell'\n  | 'crosshair'\n  | 'text'\n  | 'vertical-text'\n  | 'alias'\n  | 'copy'\n  | 'move'\n  | 'no-drop'\n  | 'not-allowed'\n  | 'grab'\n  | 'grabbing'\n  | 'all-scroll'\n  | 'col-resize'\n  | 'row-resize'\n  | 'n-resize'\n  | 'e-resize'\n  | 's-resize'\n  | 'w-resize'\n  | 'ne-resize'\n  | 'nw-resize'\n  | 'se-resize'\n  | 'sw-resize'\n  | 'ew-resize'\n  | 'ns-resize'\n  | 'nesw-resize'\n  | 'nwse-resize'\n  | 'zoom-in'\n  | 'zoom-out';\n\nexport type ITransform = {\n  x: number;\n  y: number;\n  z: number;\n  dx: number;\n  dy: number;\n  dz: number;\n  scrollX: number;\n  scrollY: number;\n  scaleX: number;\n  scaleY: number;\n  scaleZ: number;\n  angle: number;\n  alpha: number;\n  beta: number;\n  anchor: [number | string, number | string]; // 基于AABB的锚点位置，用于简单的定位某些path\n  anchor3d: [number | string, number | string, number] | [number | string, number | string]; // 3d的锚点位置\n  postMatrix: IMatrix;\n};\n\nexport type IFillStyle = {\n  fillColor: string | IColor;\n  fillOpacity: number;\n  shadowBlur: number;\n  shadowColor: string;\n  shadowOffsetX: number;\n  shadowOffsetY: number;\n  fill: boolean | null;\n};\n\nexport type IBorderStyle = Omit<IStrokeStyle, 'outerBorder' | 'innerBorder'> & {\n  distance: number | string;\n};\n\nexport type IStrokeStyle = {\n  outerBorder: Partial<IBorderStyle>;\n  innerBorder: Partial<IBorderStyle>;\n  strokeColor: string | IColor;\n  strokeOpacity: number;\n  lineDash: number[];\n  lineDashOffset: number;\n  lineWidth: number;\n  lineCap: CanvasLineCap;\n  lineJoin: CanvasLineJoin;\n  miterLimit: number;\n  // 描边的boundsBuffer，用于控制bounds的buffer\n  strokeBoundsBuffer: number;\n  /**\n   * stroke - true 全描边\n   * stroke - false 不描边\n   * stroke 为数值类型，适用于rect\\arc等图形，用于配置部分描边的场景，其中\n   *\n   * 0b00000 - 不描边\n   * 0b000001 - top\n   * 0b000010 - right\n   * 0b000100 - bottom\n   * 0b001000 - left\n   * 相应的：\n   * 0b000011 - top + right\n   * 0b000111 - top + right + bottom\n   * 0b001111 - 全描边\n   *\n   * stroke - boolean[]，适用于rect\\arc等图形，用于配置部分描边的场景\n   */\n  stroke: boolean[] | number | boolean | null;\n};\n\ntype TextureType = 'circle' | 'diamond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid';\n\nexport type IGraphicStyle = IFillStyle &\n  IStrokeStyle & {\n    opacity: number;\n    backgroundMode: number; // 填充模式（与具体图元有关）\n    background: string | HTMLImageElement | HTMLCanvasElement | null; // 背景，可以与fill同时存在\n    texture: TextureType | string; // 纹理\n    textureColor: string; // 纹理颜色\n    textureSize: number; // 纹理大小\n    texturePadding: number; // 纹理间隙\n    blur: number;\n    cursor: Cursor | null; // 鼠标样式\n  };\n\nexport type IGraphicAttribute = IGraphicStyle &\n  ITransform & {\n    /**\n     * stroke百分比\n     */\n    strokeSeg: IStrokeSeg | null;\n    // 包围盒的padding\n    boundsPadding: number | number[];\n    /**\n     * 选择模式，精确模式，粗糙模式（包围盒模式），自定义模式\n     */\n    pickMode: 'accurate' | 'imprecise' | 'custom';\n    boundsMode: 'accurate' | 'imprecise';\n    customPickShape: () => boolean | null;\n    /**\n     * 是否支持事件拾取，默认为 true。\n     * @default true\n     */\n    pickable: boolean;\n    /**\n     * 对于 group 节点，是否支持其子元素的事件拾取，默认为 true。\n     * 如果 group `pickable` 关闭，`childrenPickable` 开启，那么 group 的子节点仍参与事件拾取\n     * @default true\n     */\n    childrenPickable: boolean;\n    /**\n     * 元素是否可见。\n     * @default true\n     */\n    visible: boolean;\n    zIndex: number;\n    layout: any;\n    /**\n     * 是否在3d中控制方向\n     * false: 不控制方向\n     * true: 始终控制方向朝摄像机\n     */\n    keepDirIn3d?: boolean;\n  };\n\nexport interface IGraphicJson<T extends Partial<IGraphicAttribute> = Partial<IGraphicAttribute>> {\n  attribute: Partial<T>;\n  _uid: number;\n  type: string;\n  name: string;\n  children: IGraphicJson<T>[];\n}\n\n/** the context of setAttribute */\nexport type ISetAttributeContext = {\n  /** type of setAttribute */\n  type?: number;\n  animationState?: {\n    step?: IStep;\n    isFirstFrameOfStep?: boolean;\n    /** ratio of animation */\n    ratio?: number;\n    /** is animation end? */\n    end?: boolean;\n  };\n};\n\nexport type IGraphicAnimateParams = {\n  id?: number | string;\n  onStart?: () => void;\n  onFrame?: (step: IStep, ratio: number) => void;\n  onEnd?: () => void;\n  onRemove?: () => void;\n  interpolate?: (key: string, ratio: number, from: any, to: any, nextAttributes: any) => boolean;\n};\n\nexport interface IGraphic<T extends Partial<IGraphicAttribute> = Partial<IGraphicAttribute>>\n  extends INode,\n    IAnimateTarget {\n  type?: GraphicType;\n  numberType?: number;\n  stage?: IStage;\n  layer?: ILayer;\n  shadowRoot?: IShadowRoot;\n  glyphHost?: IGraphic<IGlyphGraphicAttribute>;\n  backgroundImg?: boolean;\n\n  valid: boolean;\n  parent: IGroup | null;\n  isContainer?: boolean;\n  // 是否是3d模式（是否应用3d视角）\n  in3dMode?: boolean;\n\n  // 上次更新的stamp\n  stamp?: number;\n  animationBackUps?: {\n    from: Record<string, any>;\n    to: Record<string, any>;\n  };\n\n  attribute: Partial<T>;\n\n  /** 用于实现morph动画场景，转换成bezier曲线渲染 */\n  pathProxy?: ICustomPath2D | ((attrs: T) => ICustomPath2D);\n  incremental?: number;\n  incrementalAt?: number;\n\n  /** 记录state对应的图形属性 */\n  states?: Record<string, Partial<T>>;\n  normalAttrs?: Partial<T>;\n  stateProxy?: (stateName: string, targetStates?: string[]) => Partial<T>;\n  findFace?: () => IFace3d;\n  toggleState: (stateName: string, hasAnimation?: boolean) => void;\n  removeState: (stateName: string, hasAnimation?: boolean) => void;\n  clearStates: (hasAnimation?: boolean) => void;\n  useStates: (states: string[], hasAnimation?: boolean) => void;\n  addState: (stateName: string, keepCurrentStates?: boolean, hasAnimation?: boolean) => void;\n  hasState: (stateName?: string) => boolean;\n  getState: (stateName: string) => Partial<T>;\n  onBeforeAttributeUpdate?: (\n    val: any,\n    attributes: Partial<T>,\n    key: null | string | string[],\n    context?: ISetAttributeContext\n  ) => T | undefined;\n  applyStateAttrs: (attrs: Partial<T>, stateNames: string[], hasAnimation?: boolean, isClear?: boolean) => void;\n  updateNormalAttrs: (stateAttrs: Partial<T>) => void;\n\n  // get\n  readonly AABBBounds: IAABBBounds; // 用于获取当前节点的AABB包围盒\n  readonly OBBBounds: IOBBBounds; // 获取OBB包围盒，旋转防重叠需要用\n  readonly globalAABBBounds: IAABBBounds; // 全局AABB包围盒\n  readonly transMatrix: IMatrix; // 变换矩阵，动态计算\n  readonly globalTransMatrix: IMatrix; // 变换矩阵，动态计算\n\n  getOffsetXY: (attr?: ITransform) => IPoint;\n\n  // function\n  containsPoint: (x: number, y: number, mode?: IContainPointMode) => boolean;\n\n  setMode: (mode: '3d' | '2d') => void;\n  isValid: () => boolean;\n\n  // TODO: transform API\n  // 基于当前transform的变换，普通用户尽量别用，拿捏不住的~\n  translate: (x: number, y: number) => this;\n  translateTo: (x: number, y: number) => this;\n  scale: (scaleX: number, scaleY: number, scaleCenter?: IPointLike) => this;\n  scaleTo: (scaleX: number, scaleY: number) => this;\n  rotate: (angle: number) => this;\n  rotateTo: (angle: number) => this;\n  skewTo: (b: number, c: number) => this;\n  addUpdateBoundTag: () => void;\n  addUpdateShapeAndBoundsTag: () => void;\n\n  update: (d?: { bounds: boolean; trans: boolean }) => void;\n\n  // animate\n  animate: (params?: IGraphicAnimateParams) => IAnimate;\n\n  // 语法糖，可有可无，有的为了首屏性能考虑做成get方法，有的由外界直接托管，内部不赋值\n  name?: string;\n\n  // 供render处理shape缓存tag\n  shouldUpdateShape: () => boolean;\n  clearUpdateShapeTag: () => void;\n\n  // // 供render缓存shape\n  // cacheShape?: ICustomPath2D;\n  // // 线段使用的path2D\n  // cacheLine?: ISegPath2D | ISegPath2D[];\n  // // 面积图使用的path2D\n  // cacheArea?: IAreaCacheItem | IAreaCacheItem[];\n\n  setAttributes: (params: Partial<T>, forceUpdateTag?: boolean, context?: ISetAttributeContext) => void;\n\n  initAttributes: (params: Partial<T>) => void;\n\n  setAttribute: (key: string, value: any, forceUpdateTag?: boolean, context?: ISetAttributeContext) => void;\n\n  setStage: (stage?: IStage, layer?: ILayer) => void;\n  onSetStage: (cb: (g: IGraphic, stage: IStage) => void) => void;\n\n  shouldUpdateAABBBounds: () => boolean;\n  shouldSelfChangeUpdateAABBBounds: () => boolean;\n  shouldUpdateGlobalMatrix: () => boolean;\n\n  addUpdatePositionTag: () => void;\n  addUpdateGlobalPositionTag: () => void;\n\n  attachShadow: () => IShadowRoot;\n  detachShadow: () => void;\n\n  toJson: () => IGraphicJson;\n\n  /** 创建pathProxy */\n  createPathProxy: (path?: string) => void;\n  /** 将图形转换成CustomPath2D */\n  toCustomPath?: () => ICustomPath2D;\n\n  resources?: Map<\n    string | HTMLImageElement | HTMLCanvasElement,\n    { state: 'init' | 'loading' | 'success' | 'fail'; data?: HTMLImageElement | HTMLCanvasElement }\n  >;\n  imageLoadSuccess: (url: string, data: HTMLImageElement) => void;\n  imageLoadFail: (url: string) => void;\n\n  clone: () => IGraphic;\n}\n\nexport interface IRoot extends IGraphic {\n  pick: (x: number, y: number) => IGraphic;\n}\n\n/**\n * 动画配置\n */\nexport type IAnimateConfig = {\n  duration?: number;\n  easing?: EasingType;\n};\n"]}
+{"version":3,"sources":["../src/interface/graphic.ts"],"names":[],"mappings":"","file":"graphic.js","sourcesContent":["import type { IAABBBounds, IOBBBounds, IMatrix, IPointLike, IPoint } from '@visactor/vutils';\nimport type { IAnimate, IStep, EasingType, IAnimateTarget } from './animate';\nimport type { IColor } from './color';\nimport type { IGroup } from './graphic/group';\nimport type { IShadowRoot } from './graphic/shadow-root';\nimport type { ILayer } from './layer';\nimport type { INode } from './node-tree';\nimport type { ICustomPath2D } from './path';\nimport type { IStage } from './stage';\nimport type { IGlyphGraphicAttribute } from './graphic/glyph';\nimport type { IContainPointMode } from '../common/enums';\nimport type { IFace3d } from './graphic/face3d';\n\ntype IStrokeSeg = {\n  start: number; // 百分比\n  // end和length二选一\n  end: number; // 百分比\n  length: number; // 像素长度\n};\n\n// TODO 最后加一个any\nexport type GraphicType =\n  | 'area'\n  | 'circle'\n  | 'ellipse'\n  | 'line'\n  | 'rect'\n  | 'rect3d'\n  | 'path'\n  | 'richtext'\n  | 'text'\n  | 'arc'\n  | 'arc3d'\n  | 'image'\n  | 'symbol'\n  | 'group'\n  | 'shadowroot'\n  | 'polygon'\n  | 'pyramid3d'\n  | 'glyph';\n\n// Cursor style\n// See: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor\nexport type Cursor =\n  | 'auto'\n  | 'default'\n  | 'none'\n  | 'context-menu'\n  | 'help'\n  | 'pointer'\n  | 'progress'\n  | 'wait'\n  | 'cell'\n  | 'crosshair'\n  | 'text'\n  | 'vertical-text'\n  | 'alias'\n  | 'copy'\n  | 'move'\n  | 'no-drop'\n  | 'not-allowed'\n  | 'grab'\n  | 'grabbing'\n  | 'all-scroll'\n  | 'col-resize'\n  | 'row-resize'\n  | 'n-resize'\n  | 'e-resize'\n  | 's-resize'\n  | 'w-resize'\n  | 'ne-resize'\n  | 'nw-resize'\n  | 'se-resize'\n  | 'sw-resize'\n  | 'ew-resize'\n  | 'ns-resize'\n  | 'nesw-resize'\n  | 'nwse-resize'\n  | 'zoom-in'\n  | 'zoom-out';\n\nexport type ITransform = {\n  x: number;\n  y: number;\n  z: number;\n  dx: number;\n  dy: number;\n  dz: number;\n  scrollX: number;\n  scrollY: number;\n  scaleX: number;\n  scaleY: number;\n  scaleZ: number;\n  angle: number;\n  alpha: number;\n  beta: number;\n  anchor: [number | string, number | string]; // 基于AABB的锚点位置，用于简单的定位某些path\n  anchor3d: [number | string, number | string, number] | [number | string, number | string]; // 3d的锚点位置\n  postMatrix: IMatrix;\n};\n\nexport type IFillType = boolean | string | IColor;\nexport type IFillStyle = {\n  fillOpacity: number;\n  shadowBlur: number;\n  shadowColor: string;\n  shadowOffsetX: number;\n  shadowOffsetY: number;\n  fill: IFillType;\n};\n\nexport type IBorderStyle = Omit<IStrokeStyle, 'outerBorder' | 'innerBorder'> & {\n  distance: number | string;\n};\n\nexport type IStrokeType = boolean | string | IColor | null;\nexport type IStrokeStyle = {\n  outerBorder: Partial<IBorderStyle>;\n  innerBorder: Partial<IBorderStyle>;\n  strokeOpacity: number;\n  lineDash: number[];\n  lineDashOffset: number;\n  lineWidth: number;\n  lineCap: CanvasLineCap;\n  lineJoin: CanvasLineJoin;\n  miterLimit: number;\n  // 描边的boundsBuffer，用于控制bounds的buffer\n  strokeBoundsBuffer: number;\n  /**\n   * stroke - true 全描边\n   * stroke - false 不描边\n   * stroke 为数值类型，适用于rect\\arc等图形，用于配置部分描边的场景，其中\n   *\n   * 0b00000 - 不描边\n   * 0b000001 - top\n   * 0b000010 - right\n   * 0b000100 - bottom\n   * 0b001000 - left\n   * 相应的：\n   * 0b000011 - top + right\n   * 0b000111 - top + right + bottom\n   * 0b001111 - 全描边\n   *\n   * stroke - boolean[]，适用于rect\\arc等图形，用于配置部分描边的场景\n   */\n  stroke: IStrokeType[] | IStrokeType;\n};\n\ntype TextureType = 'circle' | 'diamond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid';\n\nexport type IGraphicStyle = IFillStyle &\n  IStrokeStyle & {\n    opacity: number;\n    backgroundMode: number; // 填充模式（与具体图元有关）\n    background: string | HTMLImageElement | HTMLCanvasElement | null; // 背景，可以与fill同时存在\n    texture: TextureType | string; // 纹理\n    textureColor: string; // 纹理颜色\n    textureSize: number; // 纹理大小\n    texturePadding: number; // 纹理间隙\n    blur: number;\n    cursor: Cursor | null; // 鼠标样式\n  };\n\nexport type IGraphicAttribute = IGraphicStyle &\n  ITransform & {\n    /**\n     * stroke百分比\n     */\n    strokeSeg: IStrokeSeg | null;\n    // 包围盒的padding\n    boundsPadding: number | number[];\n    /**\n     * 选择模式，精确模式，粗糙模式（包围盒模式），自定义模式\n     */\n    pickMode: 'accurate' | 'imprecise' | 'custom';\n    boundsMode: 'accurate' | 'imprecise';\n    customPickShape: () => boolean | null;\n    /**\n     * 是否支持事件拾取，默认为 true。\n     * @default true\n     */\n    pickable: boolean;\n    /**\n     * 对于 group 节点，是否支持其子元素的事件拾取，默认为 true。\n     * 如果 group `pickable` 关闭，`childrenPickable` 开启，那么 group 的子节点仍参与事件拾取\n     * @default true\n     */\n    childrenPickable: boolean;\n    /**\n     * 元素是否可见。\n     * @default true\n     */\n    visible: boolean;\n    zIndex: number;\n    layout: any;\n    /**\n     * 是否在3d中控制方向\n     * false: 不控制方向\n     * true: 始终控制方向朝摄像机\n     */\n    keepDirIn3d?: boolean;\n  };\n\nexport interface IGraphicJson<T extends Partial<IGraphicAttribute> = Partial<IGraphicAttribute>> {\n  attribute: Partial<T>;\n  _uid: number;\n  type: string;\n  name: string;\n  children: IGraphicJson<T>[];\n}\n\n/** the context of setAttribute */\nexport type ISetAttributeContext = {\n  /** type of setAttribute */\n  type?: number;\n  animationState?: {\n    step?: IStep;\n    isFirstFrameOfStep?: boolean;\n    /** ratio of animation */\n    ratio?: number;\n    /** is animation end? */\n    end?: boolean;\n  };\n};\n\nexport type IGraphicAnimateParams = {\n  id?: number | string;\n  onStart?: () => void;\n  onFrame?: (step: IStep, ratio: number) => void;\n  onEnd?: () => void;\n  onRemove?: () => void;\n  interpolate?: (key: string, ratio: number, from: any, to: any, nextAttributes: any) => boolean;\n};\n\nexport interface IGraphic<T extends Partial<IGraphicAttribute> = Partial<IGraphicAttribute>>\n  extends INode,\n    IAnimateTarget {\n  type?: GraphicType;\n  numberType?: number;\n  stage?: IStage;\n  layer?: ILayer;\n  shadowRoot?: IShadowRoot;\n  glyphHost?: IGraphic<IGlyphGraphicAttribute>;\n  backgroundImg?: boolean;\n\n  valid: boolean;\n  parent: IGroup | null;\n  isContainer?: boolean;\n  // 是否是3d模式（是否应用3d视角）\n  in3dMode?: boolean;\n\n  // 上次更新的stamp\n  stamp?: number;\n  animationBackUps?: {\n    from: Record<string, any>;\n    to: Record<string, any>;\n  };\n\n  attribute: Partial<T>;\n\n  /** 用于实现morph动画场景，转换成bezier曲线渲染 */\n  pathProxy?: ICustomPath2D | ((attrs: T) => ICustomPath2D);\n  incremental?: number;\n  incrementalAt?: number;\n\n  /** 记录state对应的图形属性 */\n  states?: Record<string, Partial<T>>;\n  normalAttrs?: Partial<T>;\n  stateProxy?: (stateName: string, targetStates?: string[]) => Partial<T>;\n  findFace?: () => IFace3d;\n  toggleState: (stateName: string, hasAnimation?: boolean) => void;\n  removeState: (stateName: string, hasAnimation?: boolean) => void;\n  clearStates: (hasAnimation?: boolean) => void;\n  useStates: (states: string[], hasAnimation?: boolean) => void;\n  addState: (stateName: string, keepCurrentStates?: boolean, hasAnimation?: boolean) => void;\n  hasState: (stateName?: string) => boolean;\n  getState: (stateName: string) => Partial<T>;\n  onBeforeAttributeUpdate?: (\n    val: any,\n    attributes: Partial<T>,\n    key: null | string | string[],\n    context?: ISetAttributeContext\n  ) => T | undefined;\n  applyStateAttrs: (attrs: Partial<T>, stateNames: string[], hasAnimation?: boolean, isClear?: boolean) => void;\n  updateNormalAttrs: (stateAttrs: Partial<T>) => void;\n\n  // get\n  readonly AABBBounds: IAABBBounds; // 用于获取当前节点的AABB包围盒\n  readonly OBBBounds: IOBBBounds; // 获取OBB包围盒，旋转防重叠需要用\n  readonly globalAABBBounds: IAABBBounds; // 全局AABB包围盒\n  readonly transMatrix: IMatrix; // 变换矩阵，动态计算\n  readonly globalTransMatrix: IMatrix; // 变换矩阵，动态计算\n\n  getOffsetXY: (attr?: ITransform) => IPoint;\n\n  // function\n  containsPoint: (x: number, y: number, mode?: IContainPointMode) => boolean;\n\n  setMode: (mode: '3d' | '2d') => void;\n  isValid: () => boolean;\n\n  // TODO: transform API\n  // 基于当前transform的变换，普通用户尽量别用，拿捏不住的~\n  translate: (x: number, y: number) => this;\n  translateTo: (x: number, y: number) => this;\n  scale: (scaleX: number, scaleY: number, scaleCenter?: IPointLike) => this;\n  scaleTo: (scaleX: number, scaleY: number) => this;\n  rotate: (angle: number) => this;\n  rotateTo: (angle: number) => this;\n  skewTo: (b: number, c: number) => this;\n  addUpdateBoundTag: () => void;\n  addUpdateShapeAndBoundsTag: () => void;\n\n  update: (d?: { bounds: boolean; trans: boolean }) => void;\n\n  // animate\n  animate: (params?: IGraphicAnimateParams) => IAnimate;\n\n  // 语法糖，可有可无，有的为了首屏性能考虑做成get方法，有的由外界直接托管，内部不赋值\n  name?: string;\n\n  // 供render处理shape缓存tag\n  shouldUpdateShape: () => boolean;\n  clearUpdateShapeTag: () => void;\n\n  // // 供render缓存shape\n  // cacheShape?: ICustomPath2D;\n  // // 线段使用的path2D\n  // cacheLine?: ISegPath2D | ISegPath2D[];\n  // // 面积图使用的path2D\n  // cacheArea?: IAreaCacheItem | IAreaCacheItem[];\n\n  setAttributes: (params: Partial<T>, forceUpdateTag?: boolean, context?: ISetAttributeContext) => void;\n\n  initAttributes: (params: Partial<T>) => void;\n\n  setAttribute: (key: string, value: any, forceUpdateTag?: boolean, context?: ISetAttributeContext) => void;\n\n  setStage: (stage?: IStage, layer?: ILayer) => void;\n  onSetStage: (cb: (g: IGraphic, stage: IStage) => void) => void;\n\n  shouldUpdateAABBBounds: () => boolean;\n  shouldSelfChangeUpdateAABBBounds: () => boolean;\n  shouldUpdateGlobalMatrix: () => boolean;\n\n  addUpdatePositionTag: () => void;\n  addUpdateGlobalPositionTag: () => void;\n\n  attachShadow: () => IShadowRoot;\n  detachShadow: () => void;\n\n  toJson: () => IGraphicJson;\n\n  /** 创建pathProxy */\n  createPathProxy: (path?: string) => void;\n  /** 将图形转换成CustomPath2D */\n  toCustomPath?: () => ICustomPath2D;\n\n  resources?: Map<\n    string | HTMLImageElement | HTMLCanvasElement,\n    { state: 'init' | 'loading' | 'success' | 'fail'; data?: HTMLImageElement | HTMLCanvasElement }\n  >;\n  imageLoadSuccess: (url: string, data: HTMLImageElement) => void;\n  imageLoadFail: (url: string) => void;\n\n  clone: () => IGraphic;\n}\n\nexport interface IRoot extends IGraphic {\n  pick: (x: number, y: number) => IGraphic;\n}\n\n/**\n * 动画配置\n */\nexport type IAnimateConfig = {\n  duration?: number;\n  easing?: EasingType;\n};\n"]}

package/cjs/picker/contributions/canvas-picker/rect-picker.js

@@ -45,7 +45,7 @@ let DefaultCanvasRectPicker = class {
             return pickContext.lineWidth = (0, common_1.getScaledStroke)(pickContext, lineWidth, pickContext.dpr), 
             picked = context.isPointInStroke(point.x, point.y), picked;
         })); else if (picked) {
-            const {fill: fill = !!rect.attribute.fillColor, stroke: stroke = !!rect.attribute.strokeColor, lineWidth: lineWidth = rectAttribute.lineWidth} = rect.attribute;
+            const {fill: fill = rectAttribute.fill, stroke: stroke = rectAttribute.stroke, lineWidth: lineWidth = rectAttribute.lineWidth} = rect.attribute;
             if (fill) picked = !0; else if (stroke) {
                 const bounds = rect.AABBBounds;
                 _bounds.setValue(bounds.x1, bounds.y1, bounds.x2, bounds.y2), _bounds.expand(-lineWidth / 2), 

package/cjs/picker/contributions/canvas-picker/rect-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/picker/contributions/canvas-picker/rect-picker.ts"],"names":[],"mappings":"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","file":"rect-picker.js","sourcesContent":["import { isArray, isNumber, IPoint, AABBBounds } from '@visactor/vutils';\nimport { getScaledStroke } from '../../../common';\nimport { inject, injectable } from 'inversify';\nimport { getTheme, RECT_NUMBER_TYPE } from '../../../graphic';\nimport { IGraphicAttribute, IContext2d, IMarkAttribute, IRect, IThemeAttribute } from '../../../interface';\nimport { IGraphicRender, RectRender } from '../../../render';\nimport { IGraphicPicker, IPickParams } from '../../picker-service';\n\nconst _bounds = new AABBBounds();\n\n@injectable()\nexport class DefaultCanvasRectPicker implements IGraphicPicker {\n  type: string = 'rect';\n  numberType: number = RECT_NUMBER_TYPE;\n\n  constructor(@inject(RectRender) public readonly canvasRenderer: IGraphicRender) {}\n\n  contains(rect: IRect, point: IPoint, params?: IPickParams): boolean {\n    if (!rect.AABBBounds.containsPoint(point)) {\n      return false;\n    }\n    if (rect.attribute.pickMode === 'imprecise') {\n      return true;\n    }\n\n    const { pickContext } = params ?? {};\n    if (!pickContext) {\n      return false;\n    }\n\n    // const { rectAttribute } = graphicService.themeService.getCurrentTheme();\n    const rectAttribute = getTheme(rect).rect;\n    const { borderRadius = rectAttribute.borderRadius } = rect.attribute;\n    let { x = rectAttribute.x, y = rectAttribute.y } = rect.attribute;\n\n    pickContext.highPerformanceSave();\n    let onlyTranslate = true;\n    if (!rect.transMatrix.onlyTranslate()) {\n      // 性能较差\n      x = 0;\n      y = 0;\n      onlyTranslate = false;\n      pickContext.transformFromMatrix(rect.transMatrix, true);\n    } else {\n      const point = rect.getOffsetXY(rectAttribute);\n      x += point.x;\n      y += point.y;\n      // 当前context有rotate/scale，重置matrix\n      pickContext.setTransformForCurrent();\n    }\n\n    let picked = true;\n    // 处理圆角情况，无圆角直接使用bounds判断结果\n    if (\n      !onlyTranslate ||\n      (isNumber(borderRadius, true) && borderRadius !== 0) ||\n      (isArray(borderRadius) && (<number[]>borderRadius).some(num => num !== 0))\n    ) {\n      // 详细形状判断\n      picked = false;\n      this.canvasRenderer.drawShape(\n        rect,\n        pickContext,\n        x,\n        y,\n        {} as any,\n        null,\n        (\n          context: IContext2d,\n          rectAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n          themeAttribute: IThemeAttribute\n        ) => {\n          // 选中后面就不需要再走逻辑了\n          if (picked) {\n            return true;\n          }\n          picked = context.isPointInPath(point.x, point.y);\n          return picked;\n        },\n        (\n          context: IContext2d,\n          rectAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n          themeAttribute: IThemeAttribute\n        ) => {\n          // 选中后面就不需要再走逻辑了\n          if (picked) {\n            return true;\n          }\n          const lineWidth = rectAttribute.lineWidth || themeAttribute.lineWidth;\n          pickContext.lineWidth = getScaledStroke(pickContext, lineWidth, pickContext.dpr);\n          picked = context.isPointInStroke(point.x, point.y);\n          return picked;\n        }\n      );\n    } else if (picked) {\n      // 如果只有描边那需要测试描边\n      const {\n        fill = !!rect.attribute.fillColor,\n        stroke = !!rect.attribute.strokeColor,\n        lineWidth = rectAttribute.lineWidth\n      } = rect.attribute;\n      if (fill) {\n        picked = true;\n      } else if (stroke) {\n        const bounds = rect.AABBBounds;\n        _bounds.setValue(bounds.x1, bounds.y1, bounds.x2, bounds.y2);\n        _bounds.expand(-lineWidth / 2);\n        picked = !_bounds.containsPoint(point);\n      }\n    }\n\n    pickContext.highPerformanceRestore();\n    return picked; // 无圆角形状判断通过\n  }\n}\n"]}
+{"version":3,"sources":["../src/picker/contributions/canvas-picker/rect-picker.ts"],"names":[],"mappings":"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","file":"rect-picker.js","sourcesContent":["import { isArray, isNumber, IPoint, AABBBounds } from '@visactor/vutils';\nimport { getScaledStroke } from '../../../common';\nimport { inject, injectable } from 'inversify';\nimport { getTheme, RECT_NUMBER_TYPE } from '../../../graphic';\nimport { IGraphicAttribute, IContext2d, IMarkAttribute, IRect, IThemeAttribute } from '../../../interface';\nimport { IGraphicRender, RectRender } from '../../../render';\nimport { IGraphicPicker, IPickParams } from '../../picker-service';\n\nconst _bounds = new AABBBounds();\n\n@injectable()\nexport class DefaultCanvasRectPicker implements IGraphicPicker {\n  type: string = 'rect';\n  numberType: number = RECT_NUMBER_TYPE;\n\n  constructor(@inject(RectRender) public readonly canvasRenderer: IGraphicRender) {}\n\n  contains(rect: IRect, point: IPoint, params?: IPickParams): boolean {\n    if (!rect.AABBBounds.containsPoint(point)) {\n      return false;\n    }\n    if (rect.attribute.pickMode === 'imprecise') {\n      return true;\n    }\n\n    const { pickContext } = params ?? {};\n    if (!pickContext) {\n      return false;\n    }\n\n    // const { rectAttribute } = graphicService.themeService.getCurrentTheme();\n    const rectAttribute = getTheme(rect).rect;\n    const { borderRadius = rectAttribute.borderRadius } = rect.attribute;\n    let { x = rectAttribute.x, y = rectAttribute.y } = rect.attribute;\n\n    pickContext.highPerformanceSave();\n    let onlyTranslate = true;\n    if (!rect.transMatrix.onlyTranslate()) {\n      // 性能较差\n      x = 0;\n      y = 0;\n      onlyTranslate = false;\n      pickContext.transformFromMatrix(rect.transMatrix, true);\n    } else {\n      const point = rect.getOffsetXY(rectAttribute);\n      x += point.x;\n      y += point.y;\n      // 当前context有rotate/scale，重置matrix\n      pickContext.setTransformForCurrent();\n    }\n\n    let picked = true;\n    // 处理圆角情况，无圆角直接使用bounds判断结果\n    if (\n      !onlyTranslate ||\n      (isNumber(borderRadius, true) && borderRadius !== 0) ||\n      (isArray(borderRadius) && (<number[]>borderRadius).some(num => num !== 0))\n    ) {\n      // 详细形状判断\n      picked = false;\n      this.canvasRenderer.drawShape(\n        rect,\n        pickContext,\n        x,\n        y,\n        {} as any,\n        null,\n        (\n          context: IContext2d,\n          rectAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n          themeAttribute: IThemeAttribute\n        ) => {\n          // 选中后面就不需要再走逻辑了\n          if (picked) {\n            return true;\n          }\n          picked = context.isPointInPath(point.x, point.y);\n          return picked;\n        },\n        (\n          context: IContext2d,\n          rectAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n          themeAttribute: IThemeAttribute\n        ) => {\n          // 选中后面就不需要再走逻辑了\n          if (picked) {\n            return true;\n          }\n          const lineWidth = rectAttribute.lineWidth || themeAttribute.lineWidth;\n          pickContext.lineWidth = getScaledStroke(pickContext, lineWidth, pickContext.dpr);\n          picked = context.isPointInStroke(point.x, point.y);\n          return picked;\n        }\n      );\n    } else if (picked) {\n      // 如果只有描边那需要测试描边\n      const {\n        fill = rectAttribute.fill,\n        stroke = rectAttribute.stroke,\n        lineWidth = rectAttribute.lineWidth\n      } = rect.attribute;\n      if (fill) {\n        picked = true;\n      } else if (stroke) {\n        const bounds = rect.AABBBounds;\n        _bounds.setValue(bounds.x1, bounds.y1, bounds.x2, bounds.y2);\n        _bounds.expand(-lineWidth / 2);\n        picked = !_bounds.containsPoint(point);\n      }\n    }\n\n    pickContext.highPerformanceRestore();\n    return picked; // 无圆角形状判断通过\n  }\n}\n"]}

package/cjs/picker/contributions/math-picker/rect-picker.js

@@ -45,7 +45,7 @@ let DefaultMathRectPicker = class {
             return pickContext.lineWidth = lineWidth, picked = context.isPointInStroke(point.x, point.y), 
             picked;
         })); else if (picked) {
-            const {fill: fill = !!rect.attribute.fillColor, stroke: stroke = !!rect.attribute.strokeColor, lineWidth: lineWidth = rectAttribute.lineWidth} = rect.attribute;
+            const {fill: fill = rectAttribute.fill, stroke: stroke = rectAttribute.stroke, lineWidth: lineWidth = rectAttribute.lineWidth} = rect.attribute;
             if (fill) picked = !0; else if (stroke) {
                 const bounds = rect.AABBBounds;
                 _bounds.setValue(bounds.x1, bounds.y1, bounds.x2, bounds.y2), _bounds.expand(-lineWidth / 2), 

package/cjs/picker/contributions/math-picker/rect-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/picker/contributions/math-picker/rect-picker.ts"],"names":[],"mappings":"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","file":"rect-picker.js","sourcesContent":["import { isArray, isNumber, IPoint, AABBBounds } from '@visactor/vutils';\nimport { inject, injectable } from 'inversify';\nimport { getTheme, RECT_NUMBER_TYPE } from '../../../graphic';\nimport { IGraphicAttribute, IContext2d, IMarkAttribute, IRect, IThemeAttribute } from '../../../interface';\nimport { IGraphicRender, RectRender } from '../../../render';\nimport { IGraphicPicker, IPickParams } from '../../picker-service';\n\nconst _bounds = new AABBBounds();\n\n@injectable()\nexport class DefaultMathRectPicker implements IGraphicPicker {\n  type: string = 'rect';\n  numberType: number = RECT_NUMBER_TYPE;\n\n  constructor(@inject(RectRender) public readonly canvasRenderer: IGraphicRender) {}\n\n  contains(rect: IRect, point: IPoint, params?: IPickParams): boolean {\n    if (!rect.AABBBounds.containsPoint(point)) {\n      return false;\n    }\n    if (rect.attribute.pickMode === 'imprecise') {\n      return true;\n    }\n\n    const { pickContext } = params ?? {};\n    if (!pickContext) {\n      return false;\n    }\n\n    // const { rectAttribute } = graphicService.themeService.getCurrentTheme();\n    const rectAttribute = getTheme(rect).rect;\n    const { borderRadius = rectAttribute.borderRadius } = rect.attribute;\n    let { x = rectAttribute.x, y = rectAttribute.y } = rect.attribute;\n\n    pickContext.highPerformanceSave();\n    let onlyTranslate = true;\n    if (!rect.transMatrix.onlyTranslate()) {\n      // 性能较差\n      x = 0;\n      y = 0;\n      onlyTranslate = false;\n      pickContext.transformFromMatrix(rect.transMatrix, true);\n    } else {\n      const point = rect.getOffsetXY(rectAttribute);\n      x += point.x;\n      y += point.y;\n      // 当前context有rotate/scale，重置matrix\n      pickContext.setTransformForCurrent();\n    }\n\n    let picked = true;\n    // 处理圆角情况，无圆角直接使用bounds判断结果\n    if (\n      !onlyTranslate ||\n      (isNumber(borderRadius, true) && borderRadius !== 0) ||\n      (isArray(borderRadius) && (<number[]>borderRadius).some(num => num !== 0))\n    ) {\n      // 详细形状判断\n      picked = false;\n      this.canvasRenderer.drawShape(\n        rect,\n        pickContext,\n        x,\n        y,\n        {} as any,\n        null,\n        (\n          context: IContext2d,\n          rectAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n          themeAttribute: IThemeAttribute\n        ) => {\n          // 选中后面就不需要再走逻辑了\n          if (picked) {\n            return true;\n          }\n          picked = context.isPointInPath(point.x, point.y);\n          return picked;\n        },\n        (\n          context: IContext2d,\n          rectAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n          themeAttribute: IThemeAttribute\n        ) => {\n          // 选中后面就不需要再走逻辑了\n          if (picked) {\n            return true;\n          }\n          const lineWidth = rectAttribute.lineWidth || themeAttribute.lineWidth;\n          pickContext.lineWidth = lineWidth;\n          picked = context.isPointInStroke(point.x, point.y);\n          return picked;\n        }\n      );\n    } else if (picked) {\n      // 如果只有描边那需要测试描边\n      const {\n        fill = !!rect.attribute.fillColor,\n        stroke = !!rect.attribute.strokeColor,\n        lineWidth = rectAttribute.lineWidth\n      } = rect.attribute;\n      if (fill) {\n        picked = true;\n      } else if (stroke) {\n        const bounds = rect.AABBBounds;\n        _bounds.setValue(bounds.x1, bounds.y1, bounds.x2, bounds.y2);\n        _bounds.expand(-lineWidth / 2);\n        picked = !_bounds.containsPoint(point);\n      }\n    }\n\n    pickContext.highPerformanceRestore();\n    return picked; // 无圆角形状判断通过\n  }\n}\n"]}
+{"version":3,"sources":["../src/picker/contributions/math-picker/rect-picker.ts"],"names":[],"mappings":"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","file":"rect-picker.js","sourcesContent":["import { isArray, isNumber, IPoint, AABBBounds } from '@visactor/vutils';\nimport { inject, injectable } from 'inversify';\nimport { getTheme, RECT_NUMBER_TYPE } from '../../../graphic';\nimport { IGraphicAttribute, IContext2d, IMarkAttribute, IRect, IThemeAttribute } from '../../../interface';\nimport { IGraphicRender, RectRender } from '../../../render';\nimport { IGraphicPicker, IPickParams } from '../../picker-service';\n\nconst _bounds = new AABBBounds();\n\n@injectable()\nexport class DefaultMathRectPicker implements IGraphicPicker {\n  type: string = 'rect';\n  numberType: number = RECT_NUMBER_TYPE;\n\n  constructor(@inject(RectRender) public readonly canvasRenderer: IGraphicRender) {}\n\n  contains(rect: IRect, point: IPoint, params?: IPickParams): boolean {\n    if (!rect.AABBBounds.containsPoint(point)) {\n      return false;\n    }\n    if (rect.attribute.pickMode === 'imprecise') {\n      return true;\n    }\n\n    const { pickContext } = params ?? {};\n    if (!pickContext) {\n      return false;\n    }\n\n    // const { rectAttribute } = graphicService.themeService.getCurrentTheme();\n    const rectAttribute = getTheme(rect).rect;\n    const { borderRadius = rectAttribute.borderRadius } = rect.attribute;\n    let { x = rectAttribute.x, y = rectAttribute.y } = rect.attribute;\n\n    pickContext.highPerformanceSave();\n    let onlyTranslate = true;\n    if (!rect.transMatrix.onlyTranslate()) {\n      // 性能较差\n      x = 0;\n      y = 0;\n      onlyTranslate = false;\n      pickContext.transformFromMatrix(rect.transMatrix, true);\n    } else {\n      const point = rect.getOffsetXY(rectAttribute);\n      x += point.x;\n      y += point.y;\n      // 当前context有rotate/scale，重置matrix\n      pickContext.setTransformForCurrent();\n    }\n\n    let picked = true;\n    // 处理圆角情况，无圆角直接使用bounds判断结果\n    if (\n      !onlyTranslate ||\n      (isNumber(borderRadius, true) && borderRadius !== 0) ||\n      (isArray(borderRadius) && (<number[]>borderRadius).some(num => num !== 0))\n    ) {\n      // 详细形状判断\n      picked = false;\n      this.canvasRenderer.drawShape(\n        rect,\n        pickContext,\n        x,\n        y,\n        {} as any,\n        null,\n        (\n          context: IContext2d,\n          rectAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n          themeAttribute: IThemeAttribute\n        ) => {\n          // 选中后面就不需要再走逻辑了\n          if (picked) {\n            return true;\n          }\n          picked = context.isPointInPath(point.x, point.y);\n          return picked;\n        },\n        (\n          context: IContext2d,\n          rectAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n          themeAttribute: IThemeAttribute\n        ) => {\n          // 选中后面就不需要再走逻辑了\n          if (picked) {\n            return true;\n          }\n          const lineWidth = rectAttribute.lineWidth || themeAttribute.lineWidth;\n          pickContext.lineWidth = lineWidth;\n          picked = context.isPointInStroke(point.x, point.y);\n          return picked;\n        }\n      );\n    } else if (picked) {\n      // 如果只有描边那需要测试描边\n      const {\n        fill = rectAttribute.fill,\n        stroke = rectAttribute.stroke,\n        lineWidth = rectAttribute.lineWidth\n      } = rect.attribute;\n      if (fill) {\n        picked = true;\n      } else if (stroke) {\n        const bounds = rect.AABBBounds;\n        _bounds.setValue(bounds.x1, bounds.y1, bounds.x2, bounds.y2);\n        _bounds.expand(-lineWidth / 2);\n        picked = !_bounds.containsPoint(point);\n      }\n    }\n\n    pickContext.highPerformanceRestore();\n    return picked; // 无圆角形状判断通过\n  }\n}\n"]}

package/cjs/render/contributions/render/arc-render.d.ts

@@ -3,7 +3,7 @@ import { IContext2d, IArc, IPath2D, IGraphicAttribute, IMarkAttribute, IThemeAtt
 import { IDrawContext, IRenderService } from '../../render-service';
 import { IGraphicRender, IGraphicRenderDrawParams } from './graphic-render';
 import { IArcRenderContribution } from './contributions/arc-contribution-render';
-export declare function drawArcPath(arc: IArc, context: IContext2d | IPath2D, cx: number, cy: number, outerRadius: number, innerRadius: number, partStroke?: boolean[]): boolean;
+export declare function drawArcPath(arc: IArc, context: IContext2d | IPath2D, cx: number, cy: number, outerRadius: number, innerRadius: number, partStroke?: (boolean | string)[]): boolean;
 export declare class DefaultCanvasArcRender implements IGraphicRender {
     protected readonly arcRenderContribitions: ContributionProvider<IArcRenderContribution>;
     type: 'arc';

package/cjs/render/contributions/render/arc-render.js

@@ -178,7 +178,7 @@ let DefaultCanvasArcRender = class {
         return collapsedToLine;
     }
     drawShape(arc, context, x, y, drawContext, params, fillCb, strokeCb) {
-        const arcAttribute = (0, graphic_1.getTheme)(arc, null == params ? void 0 : params.theme).arc, {fill: fill = (null == arcAttribute.fill ? !!arc.attribute.fillColor : arcAttribute.fill), background: background, stroke: stroke = (null == arcAttribute.stroke ? !!arc.attribute.strokeColor : arcAttribute.stroke), opacity: opacity = arcAttribute.opacity, fillOpacity: fillOpacity = arcAttribute.fillOpacity, lineWidth: lineWidth = arcAttribute.lineWidth, strokeOpacity: strokeOpacity = arcAttribute.strokeOpacity, visible: visible = arcAttribute.visible} = arc.attribute, fVisible = (0, 
+        const arcAttribute = (0, graphic_1.getTheme)(arc, null == params ? void 0 : params.theme).arc, {fill: fill = arcAttribute.fill, background: background, stroke: stroke = arcAttribute.stroke, opacity: opacity = arcAttribute.opacity, fillOpacity: fillOpacity = arcAttribute.fillOpacity, lineWidth: lineWidth = arcAttribute.lineWidth, strokeOpacity: strokeOpacity = arcAttribute.strokeOpacity, visible: visible = arcAttribute.visible} = arc.attribute, fVisible = (0, 
         utils_1.fillVisible)(opacity, fillOpacity), sVisible = (0, utils_1.strokeVisible)(opacity, strokeOpacity), doFill = (0, 
         utils_1.runFill)(fill), doStroke = (0, utils_1.runStroke)(stroke, lineWidth);
         if (!arc.valid || !visible) return;
@@ -203,10 +203,10 @@ let DefaultCanvasArcRender = class {
             const {startAngle: sa, endAngle: ea} = arc.getParsedAngle();
             if ((0, vutils_1.abs)(ea - sa) >= vutils_1.pi2 - vutils_1.epsilon) {
                 context.beginPath();
-                const capAngle = Math.abs(outerRadius - innerRadius) / 2 / outerRadius, {endAngle: endAngle = arcAttribute.endAngle, fillColor: fillColor = arcAttribute.fillColor} = arc.attribute, startAngle = endAngle;
+                const capAngle = Math.abs(outerRadius - innerRadius) / 2 / outerRadius, {endAngle: endAngle = arcAttribute.endAngle, fill: fill = arcAttribute.fill} = arc.attribute, startAngle = endAngle;
                 if (this.drawArcTailCapPath(arc, context, x, y, outerRadius, innerRadius, startAngle, startAngle + capAngle), 
                 doFill) {
-                    const color = fillColor;
+                    const color = fill;
                     if ("conical" === color.gradient) {
                         const lastColor = (0, canvas_1.getConicGradientAt)(0, 0, endAngle, color);
                         fillCb || utils_1.fillVisible && (context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute),