@visactor/vrender-core 1.1.0-alpha.17 → 1.1.0-alpha.19

package/cjs/graphic/state/shared-state-refresh.js

@@ -41,6 +41,7 @@ function flushStageSharedStateRefresh(stage) {
     graphics.forEach((graphic => {
         if ("released" === graphic.releaseStatus) return;
         if (graphic.stage !== stage) return;
+        if (!graphic.sharedStateDirty) return;
         const refresh = graphic.refreshSharedStateBeforeRender;
         "function" == typeof refresh && (refresh.call(graphic), null == perfMonitor || perfMonitor.incrementCounter("sharedRefreshCommits"));
     })), perfMonitor && (perfMonitor.recordCost("sharedRefresh", performance.now() - start), 

package/cjs/graphic/state/shared-state-refresh.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/graphic/state/shared-state-refresh.ts"],"names":[],"mappings":"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","file":"shared-state-refresh.js","sourcesContent":["import type { IGraphic, IStage } from '../../interface';\nimport type { SharedStateScope } from './shared-state-scope';\nimport { getActiveStageStatePerfMonitor } from './state-perf-monitor';\n\nexport function scheduleStageSharedStateRefresh(stage: IStage | undefined): void {\n  if (!stage || (stage as any).releaseStatus === 'released') {\n    return;\n  }\n\n  getActiveStageStatePerfMonitor(stage)?.recordRefresh('renderScheduled');\n  stage.renderNextFrame();\n}\n\nexport function enqueueGraphicSharedStateRefresh(stage: IStage | undefined, graphic: IGraphic): void {\n  if (!stage) {\n    return;\n  }\n\n  const pending =\n    ((stage as any)._pendingSharedStateRefreshGraphics as Set<IGraphic> | undefined) ??\n    (((stage as any)._pendingSharedStateRefreshGraphics = new Set<IGraphic>()) as Set<IGraphic>);\n\n  if (!pending.has(graphic)) {\n    pending.add(graphic);\n    const perfMonitor = getActiveStageStatePerfMonitor(stage);\n    perfMonitor?.recordRefresh('queuedGraphics');\n    perfMonitor?.recordAllocation('refreshQueuePushes');\n  }\n}\n\nexport function markScopeActiveDescendantsDirty<T extends Record<string, any> = Record<string, any>>(\n  scope: SharedStateScope<T>,\n  stage?: IStage\n): void {\n  let marked = false;\n  scope.subtreeActiveDescendants.forEach(graphic => {\n    (graphic as any).sharedStateDirty = true;\n    const ownerStage = stage ?? graphic.stage ?? scope.ownerStage;\n    enqueueGraphicSharedStateRefresh(ownerStage, graphic);\n    marked = true;\n  });\n\n  if (marked) {\n    scheduleStageSharedStateRefresh(stage ?? scope.ownerStage);\n  }\n}\n\nexport function flushStageSharedStateRefresh(stage: IStage): void {\n  const pending = (stage as any)._pendingSharedStateRefreshGraphics as Set<IGraphic> | undefined;\n  if (!pending || !pending.size) {\n    return;\n  }\n\n  const perfMonitor = getActiveStageStatePerfMonitor(stage);\n  const start = perfMonitor ? performance.now() : 0;\n  const graphics = Array.from(pending.values());\n  pending.clear();\n  perfMonitor?.recordRefresh('flushedGraphics', graphics.length);\n\n  graphics.forEach(graphic => {\n    if ((graphic as any).releaseStatus === 'released') {\n      return;\n    }\n    if (graphic.stage !== stage) {\n      return;\n    }\n\n    const refresh = (graphic as any).refreshSharedStateBeforeRender;\n    if (typeof refresh === 'function') {\n      refresh.call(graphic);\n      perfMonitor?.incrementCounter('sharedRefreshCommits');\n    }\n  });\n\n  if (perfMonitor) {\n    perfMonitor.recordCost('sharedRefresh', performance.now() - start);\n    perfMonitor.recordEvent('shared-refresh-flush', {\n      stageId: (stage as any)._uid,\n      flushedGraphics: graphics.length\n    });\n  }\n}\n"]}
+{"version":3,"sources":["../src/graphic/state/shared-state-refresh.ts"],"names":[],"mappings":";;;AAEA,6DAAsE;AAEtE,SAAgB,+BAA+B,CAAC,KAAyB;;IACvE,IAAI,CAAC,KAAK,IAAK,KAAa,CAAC,aAAa,KAAK,UAAU,EAAE;QACzD,OAAO;KACR;IAED,MAAA,IAAA,mDAA8B,EAAC,KAAK,CAAC,0CAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACxE,KAAK,CAAC,eAAe,EAAE,CAAC;AAC1B,CAAC;AAPD,0EAOC;AAED,SAAgB,gCAAgC,CAAC,KAAyB,EAAE,OAAiB;;IAC3F,IAAI,CAAC,KAAK,EAAE;QACV,OAAO;KACR;IAED,MAAM,OAAO,GACX,MAAE,KAAa,CAAC,kCAAgE,mCAC/E,CAAE,KAAa,CAAC,kCAAkC,GAAG,IAAI,GAAG,EAAY,CAAmB,CAAC;IAE/F,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;QACzB,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACrB,MAAM,WAAW,GAAG,IAAA,mDAA8B,EAAC,KAAK,CAAC,CAAC;QAC1D,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC7C,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;KACrD;AACH,CAAC;AAfD,4EAeC;AAED,SAAgB,+BAA+B,CAC7C,KAA0B,EAC1B,KAAc;IAEd,IAAI,MAAM,GAAG,KAAK,CAAC;IACnB,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;;QAC9C,OAAe,CAAC,gBAAgB,GAAG,IAAI,CAAC;QACzC,MAAM,UAAU,GAAG,MAAA,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,OAAO,CAAC,KAAK,mCAAI,KAAK,CAAC,UAAU,CAAC;QAC9D,gCAAgC,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;QACtD,MAAM,GAAG,IAAI,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,IAAI,MAAM,EAAE;QACV,+BAA+B,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,KAAK,CAAC,UAAU,CAAC,CAAC;KAC5D;AACH,CAAC;AAfD,0EAeC;AAED,SAAgB,4BAA4B,CAAC,KAAa;IACxD,MAAM,OAAO,GAAI,KAAa,CAAC,kCAA+D,CAAC;IAC/F,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;QAC7B,OAAO;KACR;IAED,MAAM,WAAW,GAAG,IAAA,mDAA8B,EAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,KAAK,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAClD,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IAC9C,OAAO,CAAC,KAAK,EAAE,CAAC;IAChB,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,aAAa,CAAC,iBAAiB,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAE/D,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;QACzB,IAAK,OAAe,CAAC,aAAa,KAAK,UAAU,EAAE;YACjD,OAAO;SACR;QACD,IAAI,OAAO,CAAC,KAAK,KAAK,KAAK,EAAE;YAC3B,OAAO;SACR;QACD,IAAI,CAAE,OAAe,CAAC,gBAAgB,EAAE;YACtC,OAAO;SACR;QAED,MAAM,OAAO,GAAI,OAAe,CAAC,8BAA8B,CAAC;QAChE,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE;YACjC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACtB,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;SACvD;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,WAAW,EAAE;QACf,WAAW,CAAC,UAAU,CAAC,eAAe,EAAE,WAAW,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC,CAAC;QACnE,WAAW,CAAC,WAAW,CAAC,sBAAsB,EAAE;YAC9C,OAAO,EAAG,KAAa,CAAC,IAAI;YAC5B,eAAe,EAAE,QAAQ,CAAC,MAAM;SACjC,CAAC,CAAC;KACJ;AACH,CAAC;AArCD,oEAqCC","file":"shared-state-refresh.js","sourcesContent":["import type { IGraphic, IStage } from '../../interface';\nimport type { SharedStateScope } from './shared-state-scope';\nimport { getActiveStageStatePerfMonitor } from './state-perf-monitor';\n\nexport function scheduleStageSharedStateRefresh(stage: IStage | undefined): void {\n  if (!stage || (stage as any).releaseStatus === 'released') {\n    return;\n  }\n\n  getActiveStageStatePerfMonitor(stage)?.recordRefresh('renderScheduled');\n  stage.renderNextFrame();\n}\n\nexport function enqueueGraphicSharedStateRefresh(stage: IStage | undefined, graphic: IGraphic): void {\n  if (!stage) {\n    return;\n  }\n\n  const pending =\n    ((stage as any)._pendingSharedStateRefreshGraphics as Set<IGraphic> | undefined) ??\n    (((stage as any)._pendingSharedStateRefreshGraphics = new Set<IGraphic>()) as Set<IGraphic>);\n\n  if (!pending.has(graphic)) {\n    pending.add(graphic);\n    const perfMonitor = getActiveStageStatePerfMonitor(stage);\n    perfMonitor?.recordRefresh('queuedGraphics');\n    perfMonitor?.recordAllocation('refreshQueuePushes');\n  }\n}\n\nexport function markScopeActiveDescendantsDirty<T extends Record<string, any> = Record<string, any>>(\n  scope: SharedStateScope<T>,\n  stage?: IStage\n): void {\n  let marked = false;\n  scope.subtreeActiveDescendants.forEach(graphic => {\n    (graphic as any).sharedStateDirty = true;\n    const ownerStage = stage ?? graphic.stage ?? scope.ownerStage;\n    enqueueGraphicSharedStateRefresh(ownerStage, graphic);\n    marked = true;\n  });\n\n  if (marked) {\n    scheduleStageSharedStateRefresh(stage ?? scope.ownerStage);\n  }\n}\n\nexport function flushStageSharedStateRefresh(stage: IStage): void {\n  const pending = (stage as any)._pendingSharedStateRefreshGraphics as Set<IGraphic> | undefined;\n  if (!pending || !pending.size) {\n    return;\n  }\n\n  const perfMonitor = getActiveStageStatePerfMonitor(stage);\n  const start = perfMonitor ? performance.now() : 0;\n  const graphics = Array.from(pending.values());\n  pending.clear();\n  perfMonitor?.recordRefresh('flushedGraphics', graphics.length);\n\n  graphics.forEach(graphic => {\n    if ((graphic as any).releaseStatus === 'released') {\n      return;\n    }\n    if (graphic.stage !== stage) {\n      return;\n    }\n    if (!(graphic as any).sharedStateDirty) {\n      return;\n    }\n\n    const refresh = (graphic as any).refreshSharedStateBeforeRender;\n    if (typeof refresh === 'function') {\n      refresh.call(graphic);\n      perfMonitor?.incrementCounter('sharedRefreshCommits');\n    }\n  });\n\n  if (perfMonitor) {\n    perfMonitor.recordCost('sharedRefresh', performance.now() - start);\n    perfMonitor.recordEvent('shared-refresh-flush', {\n      stageId: (stage as any)._uid,\n      flushedGraphics: graphics.length\n    });\n  }\n}\n"]}

package/cjs/interface/graphic.d.ts

@@ -286,7 +286,10 @@ export interface IGraphic<T extends Partial<IGraphicAttribute> = Partial<IGraphi
     toggleState: (stateName: string, hasAnimation?: boolean) => void;
     removeState: (stateName: string | string[], hasAnimation?: boolean) => void;
     clearStates: (hasAnimation?: boolean) => void;
-    setStates: (states?: string[] | null, hasAnimation?: boolean) => void;
+    setStates: {
+        (states?: string[] | null, hasAnimation?: boolean): void;
+        (states?: string[] | null, options?: ISetStatesOptions): void;
+    };
     useStates: (states: string[], hasAnimation?: boolean) => void;
     addState: (stateName: string, keepCurrentStates?: boolean, hasAnimation?: boolean) => void;
     invalidateResolver: () => void;
@@ -364,5 +367,9 @@ export type IAnimateConfig = {
     easing?: EasingType;
     noAnimateAttrs?: string[] | Record<string, boolean | number>;
 };
+export type ISetStatesOptions = {
+    animate?: boolean;
+    animateSameStatePatchChange?: boolean;
+};
 export type GraphicReleaseStatus = 'released' | 'willRelease';
 export {};

package/cjs/interface/graphic.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/interface/graphic.ts"],"names":[],"mappings":"","file":"graphic.js","sourcesContent":["import type { IAABBBounds, IMatrix, IPointLike, IPoint, BoundsAnchorType, IOBBBounds } from '@visactor/vutils';\nimport type { IAnimate, IStep, EasingType, IAnimateTarget, ITimeline } from './animation';\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';\nimport type { IPickerService } from './picker';\nimport type { ISymbolClass } from './graphic/symbol';\nimport type {\n  CompiledStateDefinition,\n  StateDefinition,\n  StateDefinitionsInput\n} from '../graphic/state/state-definition';\nimport type { StateMergeMode } from '../graphic/state/state-style-resolver';\nimport type { SharedStateScope } from '../graphic/state/shared-state-scope';\n\ntype IStrokeSeg = {\n  /**\n   * 百分比\n   */\n  start: number;\n  /**\n   * 百分比\n   * end和length二选一\n   */\n  end: number;\n  /**\n   * 像素长度\n   */\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  | string;\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  /**\n   * x坐标\n   */\n  x: number;\n  /**\n   * y坐标\n   */\n  y: number;\n  /**\n   * z坐标\n   */\n  z: number;\n  /**\n   * x方向偏移量\n   */\n  dx: number;\n  /**\n   * y方向偏移量\n   */\n  dy: number;\n  /**\n   * z方向偏移量\n   */\n  dz: number;\n  /**\n   * x方向的滚动值\n   */\n  scrollX: number;\n  /**\n   * y方向的滚动值\n   */\n  scrollY: number;\n  /**\n   * x方向的缩放值\n   */\n  scaleX: number;\n  /**\n   * y方向的缩放值\n   */\n  scaleY: number;\n  /**\n   * z方向的缩放值\n   */\n  scaleZ: number;\n  /**\n   * 绕z轴的转角，即xy平面上的旋转角度\n   */\n  angle: number;\n  /**\n   * 绕x轴的转角\n   */\n  alpha: number;\n  /**\n   * 绕y轴的转角\n   */\n  beta: number;\n  /**\n   * 应用缩放的中心\n   */\n  scaleCenter: [number | string, number | string];\n  /**\n   * 基于AABB的锚点位置，用于简单的定位某些path\n   */\n  anchor: [number | string, number | string];\n  /**\n   * 3d的锚点位置\n   */\n  anchor3d: [number | string, number | string, number] | [number | string, number | string];\n  /**\n   * 处理矩阵，在正常计算完变换矩阵之后，会将该矩阵乘到变换矩阵上得到最终的变换矩阵\n   */\n  postMatrix: IMatrix;\n};\n\nexport type IFillType = boolean | string | IColor;\nexport type IFillStyle = {\n  /**\n   * 图形的填充透明度\n   */\n  fillOpacity: number;\n  /**\n   * 图形模糊效果程度\n   */\n  shadowBlur: number;\n  /**\n   * 图形的阴影颜色\n   */\n  shadowColor: string;\n  /**\n   * 阴影水平偏移距离\n   */\n  shadowOffsetX: number;\n  /**\n   * 阴影垂直偏移距离\n   */\n  shadowOffsetY: number;\n  /**\n   * 图形的填充颜色\n   */\n  fill: IFillType;\n};\n\nexport type ILayout = {\n  /**\n   * 设置对齐方式\n   */\n  alignSelf: 'auto' | 'flex-start' | 'flex-end' | 'center';\n};\n\nexport type IBorderStyle = Omit<IStrokeStyle, 'outerBorder' | 'innerBorder'> & {\n  /**\n   * 边距离边缘的距离\n   */\n  distance: number | string;\n  /**\n   * 是否显示边框，默认是不显示的\n   */\n  visible?: boolean;\n};\n\nexport type IStrokeType = boolean | string | IColor | null;\nexport type IStrokeStyle = {\n  /**\n   * 外部边框的样式配置，默认不展示外部边框\n   */\n  outerBorder: Partial<IBorderStyle>;\n  /**\n   * 内部边框的样式配置\n   */\n  innerBorder: Partial<IBorderStyle>;\n  /**\n   * 描边的透明度\n   */\n  strokeOpacity: number;\n  /**\n   * 设置线条虚线样式的属性，它通过定义实线和空白的交替长度来创建虚线效果\n   */\n  lineDash: number[];\n\n  /**\n   * 设置虚线样式的起始偏移量\n   */\n  lineDashOffset: number;\n\n  /**\n   * 设置线条的宽度\n   */\n  lineWidth: number;\n\n  /**\n   * 设置线条末端的样式\n   */\n  lineCap: CanvasLineCap;\n\n  /**\n   * 设置线条拐角的样式\n   */\n  lineJoin: CanvasLineJoin;\n\n  /**\n   * 设置线条拐角处的斜接限制\n   */\n  miterLimit: number;\n  /**\n   * 描边的boundsBuffer，用于控制bounds的buffer\n   */\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 IConnectedStyle = {\n  /**\n   * 连接，取零或者断开\n   */\n  connectedType: 'connect' | 'none';\n  /**\n   * 连接线的样式配置\n   */\n  connectedStyle: {\n    stroke: IStrokeStyle['stroke'];\n    strokeOpacity: IStrokeStyle['strokeOpacity'];\n    lineDash: IStrokeStyle['lineDash'];\n    lineDashOffset: IStrokeStyle['lineDashOffset'];\n    lineCap: IStrokeStyle['lineCap'];\n    lineJoin: IStrokeStyle['lineJoin'];\n    lineWidth: IStrokeStyle['lineWidth'];\n    fill: IFillStyle['fill'];\n    fillOpacity: IFillStyle['fillOpacity'];\n  };\n  connectedX: number;\n  connectedY: number;\n};\n\nexport type IBackgroundConfig = {\n  stroke?: string | boolean;\n  fill?: string | boolean;\n  lineWidth?: number;\n  cornerRadius?: number;\n  expandX?: number;\n  expandY?: number;\n};\n\nexport type BackgroundSizing = 'cover' | 'contain' | 'fill' | 'auto';\nexport type BackgroundRepeatMode = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';\nexport type BackgroundSizingShorthand = 'no-repeat-cover' | 'no-repeat-contain' | 'no-repeat-fill' | 'no-repeat-auto';\nexport type BackgroundMode = BackgroundRepeatMode | BackgroundSizingShorthand;\nexport type BackgroundPositionHorizontalKeyword = 'left' | 'center' | 'right';\nexport type BackgroundPositionVerticalKeyword = 'top' | 'center' | 'bottom';\nexport type BackgroundPositionKeyword = BackgroundPositionHorizontalKeyword | BackgroundPositionVerticalKeyword;\nexport type BackgroundPositionPercent = `${number}%`;\nexport type BackgroundPositionValue = number | BackgroundPositionKeyword | BackgroundPositionPercent;\nexport type BackgroundPositionPreset =\n  | 'top-left'\n  | 'top-center'\n  | 'top-right'\n  | 'center-left'\n  | 'center'\n  | 'center-right'\n  | 'bottom-left'\n  | 'bottom-center'\n  | 'bottom-right';\nexport type BackgroundPosition =\n  | BackgroundPositionKeyword\n  | BackgroundPositionPreset\n  | [BackgroundPositionValue, BackgroundPositionValue];\n\nexport type IBackgroundType = string | HTMLImageElement | HTMLCanvasElement | IBackgroundConfig;\n\nexport interface SimpleDomStyleOptions {\n  /**\n   * 容器的宽度\n   */\n  width: number;\n  /**\n   * 容器的高度\n   */\n  height: number;\n  /**\n   * 容器的样式设置\n   */\n  style?:\n    | string\n    | Record<string, any>\n    | ((\n        pos: { top: number; left: number; width: number; height: number },\n        graphic: IGraphic,\n        wrapContainer: HTMLElement\n      ) => Record<string, any>); // 容器的样式\n}\n\nexport interface CommonDomOptions {\n  /**\n   * 全局唯一的id\n   */\n  id?: string;\n  /**\n   * 容器元素的id或者dom元素\n   */\n  container: string | HTMLElement | null;\n  /**\n   * 是否显示\n   */\n  visible?: boolean;\n  /**\n   * 是否支持事件冒泡\n   */\n  pointerEvents?: boolean | string;\n  /**\n   * 可穿透的事件列表\n   * @since 0.21.2\n   */\n  penetrateEventList?: string[];\n  /**\n   * 定位类型\n   * 'position' - 根据挂载图形节点的坐标也就是x,y进行定位\n   * 'boundsLeftTop' - 定位到挂载图形节点bounds的左上角\n   * 'left' - 定位到挂载图形节点bounds 的左侧\n   * 'right' - 定位到挂载图形节点bounds 的右侧\n   * 'bottom' - 定位到挂载图形节点bounds 的底部\n   * 'top' - 定位到挂载图形节点bounds 的顶部\n   * 'center' - 定位到挂载图形节点bounds 的中心\n   * 'top-left' - 定位到挂载图形节点bounds 的左上角\n   * 'top-right' - 定位到挂载图形节点bounds 的右上角\n   * 'bottom-left' - 定位到挂载图形节点bounds 的左下角\n   * 'bottom-right' - 定位到挂载图形节点bounds 的右下角\n   */\n  anchorType?: 'position' | 'boundsLeftTop' | BoundsAnchorType;\n}\n\nexport type IRoughStyle = {\n  fillStyle: 'hachure' | 'solid' | 'zigzag' | 'cross-hatch' | 'dots' | 'sunburst' | 'dashed' | 'zigzag-line';\n  roughness: number;\n  bowing: number;\n};\n\nexport type IGraphicStyle = ILayout &\n  IFillStyle &\n  IStrokeStyle &\n  IPickStyle & {\n    /**\n     * 强制设置的bounds宽度，主要用于使用html或者react展示图形的时候，设置一个固定的宽度\n     */\n    forceBoundsWidth: number | (() => number) | undefined;\n    /**\n     * 强制设置的bounds高度，主要用于使用html或者react展示图形的时候，设置一个固定的高度\n     */\n    forceBoundsHeight: number | (() => number) | undefined;\n    /**\n     * 透明度，会同时影响填充和描边\n     */\n    opacity: number;\n    /**\n     * 影子节点\n     */\n    shadowGraphic?: IGraphic | undefined;\n    /**\n     * 背景填充模式（与具体图元有关）\n     */\n    backgroundMode: BackgroundMode;\n    /**\n     * 是否正好填充，只在repeat-x或者repeat-y以及no-repeat的时候生效\n     */\n    backgroundFit: boolean;\n    /**\n     * 是否保持背景图的宽高比\n     */\n    backgroundKeepAspectRatio: boolean;\n    /**\n     * 背景图缩放，只在no-repeat的时候生效\n     */\n    backgroundScale: number;\n    /**\n     * 背景图偏移，只在no-repeat的时候生效\n     */\n    backgroundOffsetX: number;\n    /**\n     * 背景图偏移，只在no-repeat的时候生效\n     */\n    backgroundOffsetY: number;\n    /**\n     * 背景图锚定位置（类似 CSS background-position），仅在 no-repeat 的图片背景下生效。\n     */\n    backgroundPosition: BackgroundPosition;\n    /**\n     * 背景图是否裁切，是否调用clip避免绘制到图元外部\n     */\n    backgroundClip: boolean;\n    /**\n     * 背景圆角半径\n     */\n    backgroundCornerRadius: number | number[];\n    /**\n     * 背景透明度\n     */\n    backgroundOpacity: number;\n    /**\n     * 背景，支持颜色字符串、html image元素、html canvas元素\n     */\n    // 纹理是否自动做动画\n    autoAnimateTexture: boolean;\n    // 如果做动画的话，这里代表ratio\n    textureRatio: number;\n    textureOptions: any;\n    background:\n      | IBackgroundType\n      | {\n          /**\n           * 背景，支持颜色字符串、html image元素、html canvas元素\n           */\n          background: IBackgroundType;\n          /**\n           * 背景的x方向偏移量\n           */\n          dx?: number;\n          /**\n           * 背景的y方向偏移量\n           */\n          dy?: number;\n          /**\n           * 背景宽度\n           */\n          width?: number;\n          /**\n           * 背景高度\n           */\n          height?: number;\n          /**\n           * 背景的x坐标\n           */\n          x?: number;\n          /**\n           * 背景的y坐标\n           */\n          y?: number;\n        }\n      | null; // 背景，可以与fill同时存在\n    /**\n     * 纹理的类型\n     */\n    texture: TextureType | string;\n    /**\n     * 纹理的颜色\n     */\n    textureColor: string;\n    /**\n     * 纹理的大小\n     */\n    textureSize: number;\n    /**\n     * 纹理的间隙\n     */\n    texturePadding: number;\n\n    blur: number;\n    /**\n     * 设置图形对应的鼠标样式\n     */\n    cursor: Cursor | null;\n    // @deprecated 用处少废弃，后续考虑新设计API\n    filter: string;\n    renderStyle?: 'default' | 'rough' | any;\n    roughStyle?: IRoughStyle | null;\n    /**\n     * HTML的dom或者string\n     */\n    html:\n      | ({\n          /**\n           * dom字符串或者dom\n           */\n          dom: string | HTMLElement;\n        } & SimpleDomStyleOptions &\n          CommonDomOptions)\n      | null;\n    /**\n     * 使用react元素渲染内容\n     */\n    react:\n      | ({\n          /**\n           * react场景节点\n           */\n          element: any;\n        } & SimpleDomStyleOptions &\n          CommonDomOptions)\n      | null;\n    /**\n     * 使用vue组件渲染内容\n     */\n    vue:\n      | ({\n          /**\n           * vue 虚拟节点\n           */\n          element: any;\n        } & SimpleDomStyleOptions &\n          CommonDomOptions)\n      | null;\n  };\n\nexport type IPickStyle = {\n  /**\n   * 给stroke模式的pick额外加的buffer，用于外界控制stroke区域的pick范围\n   */\n  pickStrokeBuffer: number;\n};\n\nexport type IDebugType = {\n  _debug_bounds: boolean | ((c: any, g: any) => void);\n};\nexport type IGraphicAttribute = IDebugType &\n  IGraphicStyle &\n  ITransform & {\n    /**\n     * stroke百分比\n     */\n    strokeSeg: IStrokeSeg | null;\n    /**\n     * 包围盒的padding\n     */\n    boundsPadding: number | number[];\n    /**\n     * 选择模式，精确模式，粗糙模式（包围盒模式），自定义模式\n     */\n    pickMode: 'accurate' | 'imprecise' | 'custom';\n    boundsMode: 'accurate' | 'imprecise' | 'empty';\n    customPickShape: () => boolean | null;\n    /**\n     * 是否支持事件拾取，默认为 true。\n     * @default true\n     */\n    pickable: boolean;\n    /**\n     * 是否支持fill拾取，默认为 true。\n     * @experimental\n     * @default true\n     */\n    fillPickable: boolean;\n    /**\n     * 是否支持stroke拾取，默认为 true。\n     * @experimental\n     * @default true\n     */\n    strokePickable: 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    /**\n     * 分组下的层级，层级越小越先绘制\n     */\n    zIndex: number;\n    layout: any;\n    /**\n     * 是否隐藏元素（只是绘制的时候不绘制）\n     */\n    renderable: boolean;\n    /**\n     * 是否在3d中控制方向\n     * false: 不控制方向\n     * true: 始终控制方向朝摄像机\n     */\n    keepDirIn3d?: boolean;\n    shadowRootIdx: number;\n    shadowPickMode?: 'full' | 'graphic';\n    /**\n     * 全局范围的层级，设置了这个属性的图形，会提取到交互层进行渲染\n     */\n    globalZIndex: number;\n    /**\n     * canvas 的合成方式\n     */\n    globalCompositeOperation: CanvasRenderingContext2D['globalCompositeOperation'] | '';\n    /**\n     * 完全支持滚动 | 完全不支持滚动 | 支持x方向的滚动 | 支持y方向的滚动\n     */\n    overflow: 'scroll' | 'hidden' | 'scroll-x' | 'scroll-y';\n    /**\n     * 绘制fill和stroke的顺序，为0表示fill先绘制，1表示stroke先绘制\n     */\n    fillStrokeOrder: number;\n    /**\n     * @since 0.20.15\n     * 保持stroke的scale，默认为false，为true的话stroke显示的宽度会随着scale变化\n     */\n    keepStrokeScale: boolean;\n\n    /**\n     * @since 0.22.2\n     * 裁剪路径，用于裁剪图形，用于普通图元的裁剪\n     * 由于一般情况下普通图元只需要一个形状即可，所以这里不需要配置具体的位置和大小，强制中心在图元中心，宽高和图元Bounds宽高一致\n     * 不考虑其他复杂情况，否则配置项就非常多了，比如多路径，或者配置位置大小等，如果配置大小那还得用户自己去拿图元的大小，目前没有这种需求\n     */\n    clipConfig: {\n      shape: string;\n    } | null;\n  };\n\nexport interface IGraphicJson<T extends Partial<IGraphicAttribute> = Partial<IGraphicAttribute>> {\n  attribute: Partial<T>;\n  baseAttributes?: 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  skipUpdateCallback?: boolean;\n};\n\nexport type IGraphicAnimateParams = {\n  slience?: boolean;\n  id?: number | string;\n  timeline?: ITimeline;\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  attachedThemeGraphic?: IGraphic<any>;\n  /**\n   * 保存语法上下文\n   */\n  context?: Record<string, any>;\n  bindDom?: Map<\n    string | HTMLElement,\n    { container: HTMLElement | string; dom: HTMLElement | any; wrapGroup: HTMLDivElement | any; root?: any }\n  >;\n\n  valid: boolean;\n  parent: IGroup | null;\n  isContainer?: boolean;\n  // 是否是3d模式（是否应用3d视角）\n  in3dMode?: boolean;\n\n  // 不考虑transform的宽高，特殊情况下会使用到\n  widthWithoutTransform?: number;\n  heightWithoutTransform?: number;\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?: StateDefinitionsInput<T>;\n  effectiveStates?: string[];\n  resolvedStatePatch?: Partial<T>;\n  normalAttrs?: Partial<T>;\n  baseAttributes?: Partial<T>;\n  boundSharedStateScope?: SharedStateScope<T>;\n  boundSharedStateRevision?: number;\n  sharedStateDirty?: boolean;\n  registeredActiveScopes?: Set<SharedStateScope<T>>;\n  localFallbackCompiledDefinitions?: Map<string, CompiledStateDefinition<T>>;\n  localFallbackVersion?: number;\n  stateProxy?: (stateName: string, targetStates?: string[]) => Partial<T>;\n  stateMergeMode?: StateMergeMode;\n  findFace?: () => IFace3d;\n  toggleState: (stateName: string, hasAnimation?: boolean) => void;\n  removeState: (stateName: string | string[], hasAnimation?: boolean) => void;\n  clearStates: (hasAnimation?: boolean) => void;\n  setStates: (states?: string[] | null, hasAnimation?: boolean) => void;\n  useStates: (states: string[], hasAnimation?: boolean) => void;\n  addState: (stateName: string, keepCurrentStates?: boolean, hasAnimation?: boolean) => void;\n  invalidateResolver: () => void;\n  hasState: (stateName?: string) => boolean;\n  getState: (stateName: string) => Partial<T> | StateDefinition<T>;\n  onBeforeAttributeUpdate?: (\n    val: any,\n    attributes: Partial<T>,\n    key: null | string | string[],\n    context?: ISetAttributeContext\n  ) => T | undefined;\n  applyStateAttrs: (\n    attrs: Partial<T>,\n    stateNames: string[],\n    hasAnimation?: boolean,\n    isClear?: boolean,\n    animateConfig?: IAnimateConfig\n  ) => 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, picker?: IPickerService) => boolean;\n\n  setMode: (mode: '3d' | '2d') => void;\n  isValid: () => boolean;\n\n  getClipPath: () => ISymbolClass | null;\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, rotateCenter?: IPointLike) => this;\n  rotateTo: (angle: number) => this;\n  skewTo: (b: number, c: number) => this;\n  addUpdateBoundTag: () => void;\n  addUpdatePaintTag: () => void;\n  addUpdateShapeAndBoundsTag: () => void;\n  addUpdateLayoutTag: () => 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  detachStageForRelease: () => 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 | IBackgroundConfig,\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  stopAnimates: (stopChildren?: boolean) => void;\n  getNoWorkAnimateAttr: () => Record<string, number>;\n  getGraphicTheme: () => T;\n\n  getAttributes: (final?: boolean) => Partial<T>;\n\n  pauseAnimation?: (deep?: boolean) => void;\n  resumeAnimation?: (deep?: boolean) => void;\n  stopAnimation?: (deep?: boolean) => void;\n  reApplyAnimationState?: (state: string, deep?: boolean) => this;\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  noAnimateAttrs?: string[] | Record<string, boolean | number>;\n};\n\nexport type GraphicReleaseStatus = 'released' | 'willRelease';\n"]}
+{"version":3,"sources":["../src/interface/graphic.ts"],"names":[],"mappings":"","file":"graphic.js","sourcesContent":["import type { IAABBBounds, IMatrix, IPointLike, IPoint, BoundsAnchorType, IOBBBounds } from '@visactor/vutils';\nimport type { IAnimate, IStep, EasingType, IAnimateTarget, ITimeline } from './animation';\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';\nimport type { IPickerService } from './picker';\nimport type { ISymbolClass } from './graphic/symbol';\nimport type {\n  CompiledStateDefinition,\n  StateDefinition,\n  StateDefinitionsInput\n} from '../graphic/state/state-definition';\nimport type { StateMergeMode } from '../graphic/state/state-style-resolver';\nimport type { SharedStateScope } from '../graphic/state/shared-state-scope';\n\ntype IStrokeSeg = {\n  /**\n   * 百分比\n   */\n  start: number;\n  /**\n   * 百分比\n   * end和length二选一\n   */\n  end: number;\n  /**\n   * 像素长度\n   */\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  | string;\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  /**\n   * x坐标\n   */\n  x: number;\n  /**\n   * y坐标\n   */\n  y: number;\n  /**\n   * z坐标\n   */\n  z: number;\n  /**\n   * x方向偏移量\n   */\n  dx: number;\n  /**\n   * y方向偏移量\n   */\n  dy: number;\n  /**\n   * z方向偏移量\n   */\n  dz: number;\n  /**\n   * x方向的滚动值\n   */\n  scrollX: number;\n  /**\n   * y方向的滚动值\n   */\n  scrollY: number;\n  /**\n   * x方向的缩放值\n   */\n  scaleX: number;\n  /**\n   * y方向的缩放值\n   */\n  scaleY: number;\n  /**\n   * z方向的缩放值\n   */\n  scaleZ: number;\n  /**\n   * 绕z轴的转角，即xy平面上的旋转角度\n   */\n  angle: number;\n  /**\n   * 绕x轴的转角\n   */\n  alpha: number;\n  /**\n   * 绕y轴的转角\n   */\n  beta: number;\n  /**\n   * 应用缩放的中心\n   */\n  scaleCenter: [number | string, number | string];\n  /**\n   * 基于AABB的锚点位置，用于简单的定位某些path\n   */\n  anchor: [number | string, number | string];\n  /**\n   * 3d的锚点位置\n   */\n  anchor3d: [number | string, number | string, number] | [number | string, number | string];\n  /**\n   * 处理矩阵，在正常计算完变换矩阵之后，会将该矩阵乘到变换矩阵上得到最终的变换矩阵\n   */\n  postMatrix: IMatrix;\n};\n\nexport type IFillType = boolean | string | IColor;\nexport type IFillStyle = {\n  /**\n   * 图形的填充透明度\n   */\n  fillOpacity: number;\n  /**\n   * 图形模糊效果程度\n   */\n  shadowBlur: number;\n  /**\n   * 图形的阴影颜色\n   */\n  shadowColor: string;\n  /**\n   * 阴影水平偏移距离\n   */\n  shadowOffsetX: number;\n  /**\n   * 阴影垂直偏移距离\n   */\n  shadowOffsetY: number;\n  /**\n   * 图形的填充颜色\n   */\n  fill: IFillType;\n};\n\nexport type ILayout = {\n  /**\n   * 设置对齐方式\n   */\n  alignSelf: 'auto' | 'flex-start' | 'flex-end' | 'center';\n};\n\nexport type IBorderStyle = Omit<IStrokeStyle, 'outerBorder' | 'innerBorder'> & {\n  /**\n   * 边距离边缘的距离\n   */\n  distance: number | string;\n  /**\n   * 是否显示边框，默认是不显示的\n   */\n  visible?: boolean;\n};\n\nexport type IStrokeType = boolean | string | IColor | null;\nexport type IStrokeStyle = {\n  /**\n   * 外部边框的样式配置，默认不展示外部边框\n   */\n  outerBorder: Partial<IBorderStyle>;\n  /**\n   * 内部边框的样式配置\n   */\n  innerBorder: Partial<IBorderStyle>;\n  /**\n   * 描边的透明度\n   */\n  strokeOpacity: number;\n  /**\n   * 设置线条虚线样式的属性，它通过定义实线和空白的交替长度来创建虚线效果\n   */\n  lineDash: number[];\n\n  /**\n   * 设置虚线样式的起始偏移量\n   */\n  lineDashOffset: number;\n\n  /**\n   * 设置线条的宽度\n   */\n  lineWidth: number;\n\n  /**\n   * 设置线条末端的样式\n   */\n  lineCap: CanvasLineCap;\n\n  /**\n   * 设置线条拐角的样式\n   */\n  lineJoin: CanvasLineJoin;\n\n  /**\n   * 设置线条拐角处的斜接限制\n   */\n  miterLimit: number;\n  /**\n   * 描边的boundsBuffer，用于控制bounds的buffer\n   */\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 IConnectedStyle = {\n  /**\n   * 连接，取零或者断开\n   */\n  connectedType: 'connect' | 'none';\n  /**\n   * 连接线的样式配置\n   */\n  connectedStyle: {\n    stroke: IStrokeStyle['stroke'];\n    strokeOpacity: IStrokeStyle['strokeOpacity'];\n    lineDash: IStrokeStyle['lineDash'];\n    lineDashOffset: IStrokeStyle['lineDashOffset'];\n    lineCap: IStrokeStyle['lineCap'];\n    lineJoin: IStrokeStyle['lineJoin'];\n    lineWidth: IStrokeStyle['lineWidth'];\n    fill: IFillStyle['fill'];\n    fillOpacity: IFillStyle['fillOpacity'];\n  };\n  connectedX: number;\n  connectedY: number;\n};\n\nexport type IBackgroundConfig = {\n  stroke?: string | boolean;\n  fill?: string | boolean;\n  lineWidth?: number;\n  cornerRadius?: number;\n  expandX?: number;\n  expandY?: number;\n};\n\nexport type BackgroundSizing = 'cover' | 'contain' | 'fill' | 'auto';\nexport type BackgroundRepeatMode = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';\nexport type BackgroundSizingShorthand = 'no-repeat-cover' | 'no-repeat-contain' | 'no-repeat-fill' | 'no-repeat-auto';\nexport type BackgroundMode = BackgroundRepeatMode | BackgroundSizingShorthand;\nexport type BackgroundPositionHorizontalKeyword = 'left' | 'center' | 'right';\nexport type BackgroundPositionVerticalKeyword = 'top' | 'center' | 'bottom';\nexport type BackgroundPositionKeyword = BackgroundPositionHorizontalKeyword | BackgroundPositionVerticalKeyword;\nexport type BackgroundPositionPercent = `${number}%`;\nexport type BackgroundPositionValue = number | BackgroundPositionKeyword | BackgroundPositionPercent;\nexport type BackgroundPositionPreset =\n  | 'top-left'\n  | 'top-center'\n  | 'top-right'\n  | 'center-left'\n  | 'center'\n  | 'center-right'\n  | 'bottom-left'\n  | 'bottom-center'\n  | 'bottom-right';\nexport type BackgroundPosition =\n  | BackgroundPositionKeyword\n  | BackgroundPositionPreset\n  | [BackgroundPositionValue, BackgroundPositionValue];\n\nexport type IBackgroundType = string | HTMLImageElement | HTMLCanvasElement | IBackgroundConfig;\n\nexport interface SimpleDomStyleOptions {\n  /**\n   * 容器的宽度\n   */\n  width: number;\n  /**\n   * 容器的高度\n   */\n  height: number;\n  /**\n   * 容器的样式设置\n   */\n  style?:\n    | string\n    | Record<string, any>\n    | ((\n        pos: { top: number; left: number; width: number; height: number },\n        graphic: IGraphic,\n        wrapContainer: HTMLElement\n      ) => Record<string, any>); // 容器的样式\n}\n\nexport interface CommonDomOptions {\n  /**\n   * 全局唯一的id\n   */\n  id?: string;\n  /**\n   * 容器元素的id或者dom元素\n   */\n  container: string | HTMLElement | null;\n  /**\n   * 是否显示\n   */\n  visible?: boolean;\n  /**\n   * 是否支持事件冒泡\n   */\n  pointerEvents?: boolean | string;\n  /**\n   * 可穿透的事件列表\n   * @since 0.21.2\n   */\n  penetrateEventList?: string[];\n  /**\n   * 定位类型\n   * 'position' - 根据挂载图形节点的坐标也就是x,y进行定位\n   * 'boundsLeftTop' - 定位到挂载图形节点bounds的左上角\n   * 'left' - 定位到挂载图形节点bounds 的左侧\n   * 'right' - 定位到挂载图形节点bounds 的右侧\n   * 'bottom' - 定位到挂载图形节点bounds 的底部\n   * 'top' - 定位到挂载图形节点bounds 的顶部\n   * 'center' - 定位到挂载图形节点bounds 的中心\n   * 'top-left' - 定位到挂载图形节点bounds 的左上角\n   * 'top-right' - 定位到挂载图形节点bounds 的右上角\n   * 'bottom-left' - 定位到挂载图形节点bounds 的左下角\n   * 'bottom-right' - 定位到挂载图形节点bounds 的右下角\n   */\n  anchorType?: 'position' | 'boundsLeftTop' | BoundsAnchorType;\n}\n\nexport type IRoughStyle = {\n  fillStyle: 'hachure' | 'solid' | 'zigzag' | 'cross-hatch' | 'dots' | 'sunburst' | 'dashed' | 'zigzag-line';\n  roughness: number;\n  bowing: number;\n};\n\nexport type IGraphicStyle = ILayout &\n  IFillStyle &\n  IStrokeStyle &\n  IPickStyle & {\n    /**\n     * 强制设置的bounds宽度，主要用于使用html或者react展示图形的时候，设置一个固定的宽度\n     */\n    forceBoundsWidth: number | (() => number) | undefined;\n    /**\n     * 强制设置的bounds高度，主要用于使用html或者react展示图形的时候，设置一个固定的高度\n     */\n    forceBoundsHeight: number | (() => number) | undefined;\n    /**\n     * 透明度，会同时影响填充和描边\n     */\n    opacity: number;\n    /**\n     * 影子节点\n     */\n    shadowGraphic?: IGraphic | undefined;\n    /**\n     * 背景填充模式（与具体图元有关）\n     */\n    backgroundMode: BackgroundMode;\n    /**\n     * 是否正好填充，只在repeat-x或者repeat-y以及no-repeat的时候生效\n     */\n    backgroundFit: boolean;\n    /**\n     * 是否保持背景图的宽高比\n     */\n    backgroundKeepAspectRatio: boolean;\n    /**\n     * 背景图缩放，只在no-repeat的时候生效\n     */\n    backgroundScale: number;\n    /**\n     * 背景图偏移，只在no-repeat的时候生效\n     */\n    backgroundOffsetX: number;\n    /**\n     * 背景图偏移，只在no-repeat的时候生效\n     */\n    backgroundOffsetY: number;\n    /**\n     * 背景图锚定位置（类似 CSS background-position），仅在 no-repeat 的图片背景下生效。\n     */\n    backgroundPosition: BackgroundPosition;\n    /**\n     * 背景图是否裁切，是否调用clip避免绘制到图元外部\n     */\n    backgroundClip: boolean;\n    /**\n     * 背景圆角半径\n     */\n    backgroundCornerRadius: number | number[];\n    /**\n     * 背景透明度\n     */\n    backgroundOpacity: number;\n    /**\n     * 背景，支持颜色字符串、html image元素、html canvas元素\n     */\n    // 纹理是否自动做动画\n    autoAnimateTexture: boolean;\n    // 如果做动画的话，这里代表ratio\n    textureRatio: number;\n    textureOptions: any;\n    background:\n      | IBackgroundType\n      | {\n          /**\n           * 背景，支持颜色字符串、html image元素、html canvas元素\n           */\n          background: IBackgroundType;\n          /**\n           * 背景的x方向偏移量\n           */\n          dx?: number;\n          /**\n           * 背景的y方向偏移量\n           */\n          dy?: number;\n          /**\n           * 背景宽度\n           */\n          width?: number;\n          /**\n           * 背景高度\n           */\n          height?: number;\n          /**\n           * 背景的x坐标\n           */\n          x?: number;\n          /**\n           * 背景的y坐标\n           */\n          y?: number;\n        }\n      | null; // 背景，可以与fill同时存在\n    /**\n     * 纹理的类型\n     */\n    texture: TextureType | string;\n    /**\n     * 纹理的颜色\n     */\n    textureColor: string;\n    /**\n     * 纹理的大小\n     */\n    textureSize: number;\n    /**\n     * 纹理的间隙\n     */\n    texturePadding: number;\n\n    blur: number;\n    /**\n     * 设置图形对应的鼠标样式\n     */\n    cursor: Cursor | null;\n    // @deprecated 用处少废弃，后续考虑新设计API\n    filter: string;\n    renderStyle?: 'default' | 'rough' | any;\n    roughStyle?: IRoughStyle | null;\n    /**\n     * HTML的dom或者string\n     */\n    html:\n      | ({\n          /**\n           * dom字符串或者dom\n           */\n          dom: string | HTMLElement;\n        } & SimpleDomStyleOptions &\n          CommonDomOptions)\n      | null;\n    /**\n     * 使用react元素渲染内容\n     */\n    react:\n      | ({\n          /**\n           * react场景节点\n           */\n          element: any;\n        } & SimpleDomStyleOptions &\n          CommonDomOptions)\n      | null;\n    /**\n     * 使用vue组件渲染内容\n     */\n    vue:\n      | ({\n          /**\n           * vue 虚拟节点\n           */\n          element: any;\n        } & SimpleDomStyleOptions &\n          CommonDomOptions)\n      | null;\n  };\n\nexport type IPickStyle = {\n  /**\n   * 给stroke模式的pick额外加的buffer，用于外界控制stroke区域的pick范围\n   */\n  pickStrokeBuffer: number;\n};\n\nexport type IDebugType = {\n  _debug_bounds: boolean | ((c: any, g: any) => void);\n};\nexport type IGraphicAttribute = IDebugType &\n  IGraphicStyle &\n  ITransform & {\n    /**\n     * stroke百分比\n     */\n    strokeSeg: IStrokeSeg | null;\n    /**\n     * 包围盒的padding\n     */\n    boundsPadding: number | number[];\n    /**\n     * 选择模式，精确模式，粗糙模式（包围盒模式），自定义模式\n     */\n    pickMode: 'accurate' | 'imprecise' | 'custom';\n    boundsMode: 'accurate' | 'imprecise' | 'empty';\n    customPickShape: () => boolean | null;\n    /**\n     * 是否支持事件拾取，默认为 true。\n     * @default true\n     */\n    pickable: boolean;\n    /**\n     * 是否支持fill拾取，默认为 true。\n     * @experimental\n     * @default true\n     */\n    fillPickable: boolean;\n    /**\n     * 是否支持stroke拾取，默认为 true。\n     * @experimental\n     * @default true\n     */\n    strokePickable: 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    /**\n     * 分组下的层级，层级越小越先绘制\n     */\n    zIndex: number;\n    layout: any;\n    /**\n     * 是否隐藏元素（只是绘制的时候不绘制）\n     */\n    renderable: boolean;\n    /**\n     * 是否在3d中控制方向\n     * false: 不控制方向\n     * true: 始终控制方向朝摄像机\n     */\n    keepDirIn3d?: boolean;\n    shadowRootIdx: number;\n    shadowPickMode?: 'full' | 'graphic';\n    /**\n     * 全局范围的层级，设置了这个属性的图形，会提取到交互层进行渲染\n     */\n    globalZIndex: number;\n    /**\n     * canvas 的合成方式\n     */\n    globalCompositeOperation: CanvasRenderingContext2D['globalCompositeOperation'] | '';\n    /**\n     * 完全支持滚动 | 完全不支持滚动 | 支持x方向的滚动 | 支持y方向的滚动\n     */\n    overflow: 'scroll' | 'hidden' | 'scroll-x' | 'scroll-y';\n    /**\n     * 绘制fill和stroke的顺序，为0表示fill先绘制，1表示stroke先绘制\n     */\n    fillStrokeOrder: number;\n    /**\n     * @since 0.20.15\n     * 保持stroke的scale，默认为false，为true的话stroke显示的宽度会随着scale变化\n     */\n    keepStrokeScale: boolean;\n\n    /**\n     * @since 0.22.2\n     * 裁剪路径，用于裁剪图形，用于普通图元的裁剪\n     * 由于一般情况下普通图元只需要一个形状即可，所以这里不需要配置具体的位置和大小，强制中心在图元中心，宽高和图元Bounds宽高一致\n     * 不考虑其他复杂情况，否则配置项就非常多了，比如多路径，或者配置位置大小等，如果配置大小那还得用户自己去拿图元的大小，目前没有这种需求\n     */\n    clipConfig: {\n      shape: string;\n    } | null;\n  };\n\nexport interface IGraphicJson<T extends Partial<IGraphicAttribute> = Partial<IGraphicAttribute>> {\n  attribute: Partial<T>;\n  baseAttributes?: 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  skipUpdateCallback?: boolean;\n};\n\nexport type IGraphicAnimateParams = {\n  slience?: boolean;\n  id?: number | string;\n  timeline?: ITimeline;\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  attachedThemeGraphic?: IGraphic<any>;\n  /**\n   * 保存语法上下文\n   */\n  context?: Record<string, any>;\n  bindDom?: Map<\n    string | HTMLElement,\n    { container: HTMLElement | string; dom: HTMLElement | any; wrapGroup: HTMLDivElement | any; root?: any }\n  >;\n\n  valid: boolean;\n  parent: IGroup | null;\n  isContainer?: boolean;\n  // 是否是3d模式（是否应用3d视角）\n  in3dMode?: boolean;\n\n  // 不考虑transform的宽高，特殊情况下会使用到\n  widthWithoutTransform?: number;\n  heightWithoutTransform?: number;\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?: StateDefinitionsInput<T>;\n  effectiveStates?: string[];\n  resolvedStatePatch?: Partial<T>;\n  normalAttrs?: Partial<T>;\n  baseAttributes?: Partial<T>;\n  boundSharedStateScope?: SharedStateScope<T>;\n  boundSharedStateRevision?: number;\n  sharedStateDirty?: boolean;\n  registeredActiveScopes?: Set<SharedStateScope<T>>;\n  localFallbackCompiledDefinitions?: Map<string, CompiledStateDefinition<T>>;\n  localFallbackVersion?: number;\n  stateProxy?: (stateName: string, targetStates?: string[]) => Partial<T>;\n  stateMergeMode?: StateMergeMode;\n  findFace?: () => IFace3d;\n  toggleState: (stateName: string, hasAnimation?: boolean) => void;\n  removeState: (stateName: string | string[], hasAnimation?: boolean) => void;\n  clearStates: (hasAnimation?: boolean) => void;\n  setStates: {\n    (states?: string[] | null, hasAnimation?: boolean): void;\n    (states?: string[] | null, options?: ISetStatesOptions): void;\n  };\n  useStates: (states: string[], hasAnimation?: boolean) => void;\n  addState: (stateName: string, keepCurrentStates?: boolean, hasAnimation?: boolean) => void;\n  invalidateResolver: () => void;\n  hasState: (stateName?: string) => boolean;\n  getState: (stateName: string) => Partial<T> | StateDefinition<T>;\n  onBeforeAttributeUpdate?: (\n    val: any,\n    attributes: Partial<T>,\n    key: null | string | string[],\n    context?: ISetAttributeContext\n  ) => T | undefined;\n  applyStateAttrs: (\n    attrs: Partial<T>,\n    stateNames: string[],\n    hasAnimation?: boolean,\n    isClear?: boolean,\n    animateConfig?: IAnimateConfig\n  ) => 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, picker?: IPickerService) => boolean;\n\n  setMode: (mode: '3d' | '2d') => void;\n  isValid: () => boolean;\n\n  getClipPath: () => ISymbolClass | null;\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, rotateCenter?: IPointLike) => this;\n  rotateTo: (angle: number) => this;\n  skewTo: (b: number, c: number) => this;\n  addUpdateBoundTag: () => void;\n  addUpdatePaintTag: () => void;\n  addUpdateShapeAndBoundsTag: () => void;\n  addUpdateLayoutTag: () => 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  detachStageForRelease: () => 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 | IBackgroundConfig,\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  stopAnimates: (stopChildren?: boolean) => void;\n  getNoWorkAnimateAttr: () => Record<string, number>;\n  getGraphicTheme: () => T;\n\n  getAttributes: (final?: boolean) => Partial<T>;\n\n  pauseAnimation?: (deep?: boolean) => void;\n  resumeAnimation?: (deep?: boolean) => void;\n  stopAnimation?: (deep?: boolean) => void;\n  reApplyAnimationState?: (state: string, deep?: boolean) => this;\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  noAnimateAttrs?: string[] | Record<string, boolean | number>;\n};\n\nexport type ISetStatesOptions = {\n  animate?: boolean;\n  animateSameStatePatchChange?: boolean;\n};\n\nexport type GraphicReleaseStatus = 'released' | 'willRelease';\n"]}

package/dist/index.es.js

@@ -10421,6 +10421,9 @@ function flushStageSharedStateRefresh(stage) {
         if (graphic.stage !== stage) {
             return;
         }
+        if (!graphic.sharedStateDirty) {
+            return;
+        }
         const refresh = graphic.refreshSharedStateBeforeRender;
         if (typeof refresh === 'function') {
             refresh.call(graphic);
@@ -10838,18 +10841,17 @@ class Graphic extends Node {
         };
     }
     recomputeCurrentStatePatch() {
-        var _a, _b, _c, _d;
+        var _a, _b;
         if (!((_a = this.currentStates) === null || _a === void 0 ? void 0 : _a.length)) {
             this.effectiveStates = [];
             this.resolvedStatePatch = undefined;
             this.syncSharedStateActiveRegistrations();
             return;
         }
-        const stateResolveBaseAttrs = ((_b = this.baseAttributes) !== null && _b !== void 0 ? _b : this.attribute);
-        const stateModel = this.createStateModel();
-        (_c = this.stateEngine) === null || _c === void 0 ? void 0 : _c.setResolveContext(this, stateResolveBaseAttrs);
+        const stateResolveBaseAttrs = this.getStateResolveBaseAttrs();
+        const stateModel = this.createStateModel(stateResolveBaseAttrs);
         const transition = stateModel.useStates(this.currentStates);
-        const effectiveStates = (_d = transition.effectiveStates) !== null && _d !== void 0 ? _d : transition.states;
+        const effectiveStates = (_b = transition.effectiveStates) !== null && _b !== void 0 ? _b : transition.states;
         const resolvedStateAttrs = this.stateEngine && this.compiledStateDefinitions
             ? Object.assign({}, this.stateEngine.resolvedPatch) : this.getStateStyleResolver(this.stateMergeMode).resolve(stateResolveBaseAttrs, this.states, this.stateProxy, transition.states, this.stateSort);
         this.currentStates = transition.states;
@@ -11900,7 +11902,16 @@ class Graphic extends Node {
         var _a;
         return (_a = this.states) === null || _a === void 0 ? void 0 : _a[stateName];
     }
-    createStateModel() {
+    getStateResolveBaseAttrs() {
+        var _a;
+        return ((_a = this.baseAttributes) !== null && _a !== void 0 ? _a : this.attribute);
+    }
+    syncStateResolveContext(stateResolveBaseAttrs = this.getStateResolveBaseAttrs()) {
+        var _a;
+        (_a = this.stateEngine) === null || _a === void 0 ? void 0 : _a.setResolveContext(this, stateResolveBaseAttrs);
+        return stateResolveBaseAttrs;
+    }
+    createStateModel(stateResolveBaseAttrs = this.getStateResolveBaseAttrs()) {
         const { compiledDefinitions, stateProxyEligibility, stateProxyModeKey } = this.resolveEffectiveCompiledDefinitions();
         this.compiledStateDefinitions = compiledDefinitions;
         if (!compiledDefinitions) {
@@ -11928,6 +11939,7 @@ class Graphic extends Node {
             this.stateEngineMergeMode = this.stateMergeMode;
             this.stateEngineStateProxyModeKey = stateProxyModeKey;
         }
+        this.syncStateResolveContext(stateResolveBaseAttrs);
         return new StateModel({
             states: this.states,
             currentStates: this.currentStates,
@@ -12027,6 +12039,106 @@ class Graphic extends Node {
             resolvedStateAttrs
         };
     }
+    resolveGraphicStateTransition(states, previousStates, forceResolverRefresh = false) {
+        var _a, _b;
+        let transition = this.resolveSimpleLocalStateTransition(states, previousStates);
+        const isSimpleLocalTransition = !!transition;
+        let resolvedStateAttrs;
+        if (transition) {
+            resolvedStateAttrs = transition.resolvedStateAttrs;
+        }
+        else {
+            const stateResolveBaseAttrs = this.getStateResolveBaseAttrs();
+            const stateModel = this.createStateModel(stateResolveBaseAttrs);
+            if (forceResolverRefresh) {
+                (_a = this.stateEngine) === null || _a === void 0 ? void 0 : _a.invalidateResolverCache();
+            }
+            transition = stateModel.useStates(states);
+            resolvedStateAttrs =
+                this.stateEngine && this.compiledStateDefinitions
+                    ? Object.assign({}, this.stateEngine.resolvedPatch) : this.getStateStyleResolver(this.stateMergeMode).resolve(stateResolveBaseAttrs, this.states, this.stateProxy, transition.states, this.stateSort);
+        }
+        const effectiveStates = (_b = transition.effectiveStates) !== null && _b !== void 0 ? _b : transition.states;
+        return {
+            transition,
+            effectiveStates: effectiveStates,
+            resolvedStateAttrs,
+            isSimpleLocalTransition
+        };
+    }
+    normalizeSetStatesOptions(options) {
+        if (options && typeof options === 'object') {
+            return {
+                hasAnimation: options.animate,
+                animateSameStatePatchChange: options.animateSameStatePatchChange === true,
+                shouldRefreshSameStatePatch: true
+            };
+        }
+        return {
+            hasAnimation: typeof options === 'boolean' ? options : undefined,
+            animateSameStatePatchChange: false,
+            shouldRefreshSameStatePatch: false
+        };
+    }
+    sameStatePatches(left, right) {
+        const leftRecord = (left !== null && left !== void 0 ? left : {});
+        const rightRecord = (right !== null && right !== void 0 ? right : {});
+        const keys = new Set([...Object.keys(leftRecord), ...Object.keys(rightRecord)]);
+        for (const key of keys) {
+            const hasLeft = Object.prototype.hasOwnProperty.call(leftRecord, key);
+            const hasRight = Object.prototype.hasOwnProperty.call(rightRecord, key);
+            if (hasLeft !== hasRight) {
+                return false;
+            }
+            if (!areAttributeValuesEqual(leftRecord[key], rightRecord[key])) {
+                return false;
+            }
+        }
+        return true;
+    }
+    commitSameStatePatchRefresh(states, hasAnimation, animateSameStatePatchChange = false) {
+        var _a;
+        const previousStates = (_a = this.currentStates) !== null && _a !== void 0 ? _a : EMPTY_STATE_NAMES;
+        const previousResolvedStatePatch = this.resolvedStatePatch;
+        const { transition, effectiveStates, resolvedStateAttrs, isSimpleLocalTransition } = this.resolveGraphicStateTransition(states, previousStates, true);
+        const patchChanged = !this.sameStatePatches(previousResolvedStatePatch, resolvedStateAttrs);
+        if (patchChanged &&
+            !this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, false)) {
+            return;
+        }
+        this.currentStates = transition.states;
+        this.effectiveStates = isSimpleLocalTransition ? effectiveStates : [...effectiveStates];
+        this.resolvedStatePatch = resolvedStateAttrs;
+        this.sharedStateDirty = false;
+        this.syncSharedStateActiveRegistrations();
+        if (!patchChanged) {
+            return;
+        }
+        if (this.stage) {
+            const perfMonitor = getActiveStageStatePerfMonitor(this.stage);
+            perfMonitor === null || perfMonitor === void 0 ? void 0 : perfMonitor.incrementCounter('stateCommits');
+            perfMonitor === null || perfMonitor === void 0 ? void 0 : perfMonitor.recordEvent('state-commit', {
+                graphicId: this._uid,
+                targetStates: [...transition.states]
+            });
+        }
+        if (hasAnimation && animateSameStatePatchChange) {
+            this._syncFinalAttributeFromStaticTruth();
+            this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, false, undefined, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch));
+        }
+        else {
+            this.stopStateAnimates();
+            if (this.attributeMayContainTransientAttrs) {
+                this._restoreAttributeFromStaticTruth({ type: AttributeUpdateType.STATE });
+            }
+            else {
+                this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, this.resolvedStatePatch, {
+                    type: AttributeUpdateType.STATE
+                });
+            }
+            this.emitStateUpdateEvent();
+        }
+    }
     resolveStateAnimateConfig(animateConfig) {
         var _a, _b, _c;
         return (_c = (_a = animateConfig !== null && animateConfig !== void 0 ? animateConfig : this.stateAnimateConfig) !== null && _a !== void 0 ? _a : (_b = this.context) === null || _b === void 0 ? void 0 : _b.stateAnimateConfig) !== null && _c !== void 0 ? _c : DefaultStateAnimateConfig;
@@ -12154,8 +12266,9 @@ class Graphic extends Node {
         }
         this.useStates(transition.states, hasAnimation);
     }
-    setStates(states, hasAnimation) {
+    setStates(states, options) {
         var _a, _b, _c;
+        const { hasAnimation, animateSameStatePatchChange, shouldRefreshSameStatePatch } = this.normalizeSetStatesOptions(options);
         const nextStates = (states === null || states === void 0 ? void 0 : states.length) ? states : EMPTY_STATE_NAMES;
         const hasCurrentState = !!((_a = this.currentStates) === null || _a === void 0 ? void 0 : _a.length) ||
             !!((_b = this.effectiveStates) === null || _b === void 0 ? void 0 : _b.length) ||
@@ -12169,6 +12282,10 @@ class Graphic extends Node {
             return;
         }
         if (this.sameStateNames(this.currentStates, nextStates)) {
+            if (shouldRefreshSameStatePatch) {
+                this.commitSameStatePatchRefresh(nextStates, hasAnimation, animateSameStatePatchChange);
+                return;
+            }
             if (this.sharedStateDirty) {
                 this.refreshSharedStateBeforeRender();
             }
@@ -12177,35 +12294,17 @@ class Graphic extends Node {
         this.useStates(nextStates, hasAnimation);
     }
     useStates(states, hasAnimation) {
-        var _a, _b, _c, _d;
+        var _a;
         if (!states.length) {
             this.clearStates(hasAnimation);
             return;
         }
         const previousStates = (_a = this.currentStates) !== null && _a !== void 0 ? _a : EMPTY_STATE_NAMES;
         const previousResolvedStatePatch = this.resolvedStatePatch;
-        let transition = this.resolveSimpleLocalStateTransition(states, previousStates);
-        const isSimpleLocalTransition = !!transition;
-        let resolvedStateAttrs;
-        if (transition) {
-            if (!transition.changed) {
-                return;
-            }
-            resolvedStateAttrs = transition.resolvedStateAttrs;
-        }
-        else {
-            const stateResolveBaseAttrs = ((_b = this.baseAttributes) !== null && _b !== void 0 ? _b : this.attribute);
-            const stateModel = this.createStateModel();
-            (_c = this.stateEngine) === null || _c === void 0 ? void 0 : _c.setResolveContext(this, stateResolveBaseAttrs);
-            transition = stateModel.useStates(states);
-            if (!transition.changed && this.sameStateNames(previousStates, transition.states)) {
-                return;
-            }
-            resolvedStateAttrs =
-                this.stateEngine && this.compiledStateDefinitions
-                    ? Object.assign({}, this.stateEngine.resolvedPatch) : this.getStateStyleResolver(this.stateMergeMode).resolve(stateResolveBaseAttrs, this.states, this.stateProxy, transition.states, this.stateSort);
+        const { transition, effectiveStates, resolvedStateAttrs, isSimpleLocalTransition } = this.resolveGraphicStateTransition(states, previousStates);
+        if (!transition.changed && this.sameStateNames(previousStates, transition.states)) {
+            return;
         }
-        const effectiveStates = (_d = transition.effectiveStates) !== null && _d !== void 0 ? _d : transition.states;
         if (!this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, false)) {
             return;
         }
@@ -12240,13 +12339,12 @@ class Graphic extends Node {
         }
     }
     invalidateResolver() {
-        var _a, _b, _c;
+        var _a, _b;
         if (!this.stateEngine || !((_a = this.currentStates) === null || _a === void 0 ? void 0 : _a.length) || !this.compiledStateDefinitions) {
             return;
         }
-        const stateResolveBaseAttrs = ((_b = this.baseAttributes) !== null && _b !== void 0 ? _b : this.attribute);
-        this.stateEngine.setResolveContext(this, stateResolveBaseAttrs);
-        this.resolverEpoch = ((_c = this.resolverEpoch) !== null && _c !== void 0 ? _c : 0) + 1;
+        this.syncStateResolveContext();
+        this.resolverEpoch = ((_b = this.resolverEpoch) !== null && _b !== void 0 ? _b : 0) + 1;
         this.stateEngine.invalidateResolverCache();
         const transition = this.stateEngine.applyStates(this.currentStates);
         const resolvedStateAttrs = Object.assign({}, this.stateEngine.resolvedPatch);

package/es/graphic/graphic.d.ts

@@ -1,6 +1,6 @@
 import type { ICustomPath2D } from './../interface/path';
 import { Matrix, Point, type Dict, type IAABBBounds, type IOBBBounds, type IPointLike } from '@visactor/vutils';
-import type { GraphicType, IAnimateConfig, IGraphicAttribute, IGraphic, IGraphicJson, ISetAttributeContext, ITransform, GraphicReleaseStatus } from '../interface/graphic';
+import type { GraphicType, IAnimateConfig, IGraphicAttribute, IGraphic, IGraphicJson, ISetAttributeContext, ISetStatesOptions, ITransform, GraphicReleaseStatus } from '../interface/graphic';
 import { Node } from './node-tree';
 import type { IAnimate, IAnimateTarget, IGlyphGraphicAttribute, ILayer, IPickerService, IShadowRoot, IStage, IStep, ISymbolClass } from '../interface';
 import { IContainPointMode } from '../common/enums';
@@ -18,6 +18,16 @@ type AttributeDelta = Map<string, {
     prev: unknown;
     next: unknown;
 }>;
+type ResolvedGraphicStateTransition<T> = {
+    transition: {
+        changed: boolean;
+        states: string[];
+        effectiveStates?: string[];
+    };
+    effectiveStates: string[];
+    resolvedStateAttrs: Partial<T>;
+    isSimpleLocalTransition: boolean;
+};
 export declare const NOWORK_ANIMATE_ATTR: {
     strokeSeg: number;
     boundsPadding: number;
@@ -235,13 +245,23 @@ export declare abstract class Graphic<T extends Partial<IGraphicAttribute> = Par
     }): void;
     hasState(stateName?: string): boolean;
     getState(stateName: string): Partial<T> | StateDefinition<T> | undefined;
-    protected createStateModel(): StateModel<T>;
+    protected getStateResolveBaseAttrs(): Partial<T>;
+    protected syncStateResolveContext(stateResolveBaseAttrs?: Partial<T>): Partial<T>;
+    protected createStateModel(stateResolveBaseAttrs?: Partial<T>): StateModel<T>;
     protected resolveSimpleLocalStateTransition(states: string[], previousStates: readonly string[]): {
         changed: boolean;
         states: string[];
         effectiveStates: string[];
         resolvedStateAttrs: Partial<T>;
     } | null;
+    protected resolveGraphicStateTransition(states: string[], previousStates: readonly string[], forceResolverRefresh?: boolean): ResolvedGraphicStateTransition<T>;
+    protected normalizeSetStatesOptions(options?: boolean | ISetStatesOptions): {
+        hasAnimation?: boolean;
+        animateSameStatePatchChange: boolean;
+        shouldRefreshSameStatePatch: boolean;
+    };
+    protected sameStatePatches(left?: Partial<T>, right?: Partial<T>): boolean;
+    protected commitSameStatePatchRefresh(states: string[], hasAnimation?: boolean, animateSameStatePatchChange?: boolean): void;
     protected resolveStateAnimateConfig(animateConfig?: IAnimateConfig): any;
     applyStateAttrs(attrs: Partial<T>, stateNames: string[], hasAnimation?: boolean, isClear?: boolean, animateConfig?: IAnimateConfig, extraAnimateAttrs?: Partial<T>): void;
     updateNormalAttrs(_stateAttrs: Partial<T>): void;
@@ -254,6 +274,7 @@ export declare abstract class Graphic<T extends Partial<IGraphicAttribute> = Par
     toggleState(stateName: string, hasAnimation?: boolean): void;
     addState(stateName: string, keepCurrentStates?: boolean, hasAnimation?: boolean): void;
     setStates(states?: string[] | null, hasAnimation?: boolean): void;
+    setStates(states?: string[] | null, options?: ISetStatesOptions): void;
     useStates(states: string[], hasAnimation?: boolean): void;
     invalidateResolver(): void;
     private sameStateNames;