@visactor/vrender 0.14.2 → 0.15.0-alpha.0

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 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 ILayout = {\n  alignSelf: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';\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 IConnectedStyle = {\n  // 连接，取零或者断开\n  connectedType: 'connect' | 'zero' | 'none';\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 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  stopAnimates: (stopChildren?: boolean) => void;\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\nexport type GraphicReleaseStatus = 'released' | 'willRelease';\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 ILayout = {\n  alignSelf: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';\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 IConnectedStyle = {\n  // 连接，取零或者断开\n  connectedType: 'connect' | 'zero' | 'none';\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 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    // HTML的dom或者string\n    html: {\n      dom: string | HTMLElement; // dom字符串或者dom\n      container: string | HTMLElement | null; // id或者dom\n      width: number; // 容器的宽度\n      height: number; // 容器的高度\n      style: string | Record<string, any>; // 容器的样式\n      visible?: boolean;\n      anchorType?: 'position' | 'boundsLeftTop';\n    } | 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  bindDom?: Map<string | HTMLElement, { container: HTMLElement | string; dom: HTMLElement; wrapGroup: HTMLDivElement }>;\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  stopAnimates: (stopChildren?: boolean) => void;\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\nexport type GraphicReleaseStatus = 'released' | 'willRelease';\n"]}

package/cjs/interface/render.d.ts

@@ -57,6 +57,7 @@ export interface IDrawContribution {
     defaultRenderMap: Map<number, IGraphicRender>;
     styleRenderMap: Map<string, Map<number, IGraphicRender>>;
     draw: (renderService: IRenderService, drawParams: IDrawContext) => MaybePromise<void>;
+    afterDraw?: (renderService: IRenderService, drawParams: IDrawContext) => MaybePromise<void>;
     getRenderContribution: (graphic: IGraphic) => IGraphicRender | null;
     renderGroup: (group: IGroup, drawContext: IDrawContext, skipSort?: boolean) => void;
     renderItem: (graphic: IGraphic, drawContext: IDrawContext, params?: IGraphicRenderDrawParams) => void;

package/cjs/interface/render.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/interface/render.ts"],"names":[],"mappings":"","file":"render.js","sourcesContent":["import type { IAABBBounds, IBounds } from '@visactor/vutils';\nimport type { IColor } from './color';\nimport type { IContext2d } from './context';\nimport type { IGraphic, IGraphicAttribute } from './graphic';\nimport type { IMarkAttribute, IThemeAttribute } from './graphic/creator';\nimport type { IFullThemeSpec } from './graphic/theme';\nimport type { ILayer } from './layer';\nimport type { IStage } from './stage';\nimport type { IGroup } from './graphic/group';\nimport type { MaybePromise } from './common';\nimport type { ISyncHook } from './sync-hook';\n\n// 用于绘制的参数，提供context\n// TODO: 考虑是否可以隐藏上下文类型\nexport interface IRenderServiceDrawParams {\n  context?: IContext2d;\n\n  // 绘制的区域以及是否需要清屏\n  clear?: string | IColor;\n  width: number;\n  height: number;\n  x: number;\n  y: number;\n  stage: IStage;\n  layer: ILayer;\n  renderService: IRenderService;\n  updateBounds: boolean;\n  renderStyle?: string;\n}\n\nexport interface IRenderService {\n  dirtyBounds: IBounds;\n  renderTreeRoots: IGraphic[]; // 此次render的数组\n  renderLists: IGraphic[];\n  drawParams: IRenderServiceDrawParams;\n\n  prepare: (updateBounds: boolean) => void;\n  prepareRenderList: () => void;\n  beforeDraw: (params: IRenderServiceDrawParams) => void;\n  draw: (params: IRenderServiceDrawParams) => void;\n  afterDraw: (params: IRenderServiceDrawParams) => void;\n  render: (groups: IGroup[], params: IRenderServiceDrawParams) => MaybePromise<void>;\n}\n\nexport interface IDrawContext extends IRenderServiceDrawParams {\n  startAtId?: number;\n  break?: boolean;\n  restartIncremental?: boolean;\n  // multi图元开始的位置\n  multiGraphicOptions?: {\n    startAtIdx: number;\n    length: number;\n  };\n  in3dInterceptor?: boolean;\n  drawContribution?: IDrawContribution;\n  // hack内容\n  hack_pieFace?: 'inside' | 'bottom' | 'top' | 'outside';\n}\n\nexport interface IDrawContribution {\n  hooks?: {\n    completeDraw: ISyncHook<[]>;\n  };\n  dirtyBounds?: IAABBBounds;\n  backupDirtyBounds?: IAABBBounds;\n  rendering?: boolean;\n  currentRenderMap: Map<number, IGraphicRender>;\n  defaultRenderMap: Map<number, IGraphicRender>;\n  styleRenderMap: Map<string, Map<number, IGraphicRender>>;\n  draw: (renderService: IRenderService, drawParams: IDrawContext) => MaybePromise<void>;\n  getRenderContribution: (graphic: IGraphic) => IGraphicRender | null;\n  renderGroup: (group: IGroup, drawContext: IDrawContext, skipSort?: boolean) => void;\n  renderItem: (graphic: IGraphic, drawContext: IDrawContext, params?: IGraphicRenderDrawParams) => void;\n}\n\nexport interface IGraphicRenderDrawParams {\n  beforeDrawCb?: () => void;\n  afterDrawCb?: () => void;\n  drawingCb?: () => void;\n  skipDraw?: boolean;\n  theme?: IFullThemeSpec;\n}\n\nexport interface IGraphicRender {\n  type: string; // 图元类型\n  numberType: number;\n  style?: string;\n  z?: number;\n  draw: (\n    graphic: IGraphic,\n    renderService: IRenderService,\n    drawContext: IDrawContext,\n    params?: IGraphicRenderDrawParams\n  ) => void;\n  drawShape?: (\n    graphic: IGraphic,\n    ctx: IContext2d,\n    x: number,\n    y: number,\n    drawContext: IDrawContext,\n    params?: IGraphicRenderDrawParams,\n    fillCb?: (\n      ctx: IContext2d,\n      markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n      themeAttribute: IThemeAttribute\n    ) => boolean,\n    strokeCb?: (\n      ctx: IContext2d,\n      markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n      themeAttribute: IThemeAttribute\n    ) => boolean\n  ) => void;\n}\n\nexport interface IBeforeRenderConstribution {\n  apply: (renderService: IRenderService) => MaybePromise<void>;\n}\n\nexport interface IRenderSelector {\n  selector: (graphic: IGraphic) => IGraphicRender | null;\n}\n\nexport interface IDrawItemInterceptorContribution {\n  order: number;\n  beforeDrawItem?: (\n    graphic: IGraphic,\n    renderService: IRenderService,\n    drawContext: IDrawContext,\n    drawContribution: IDrawContribution,\n    params?: IGraphicRenderDrawParams\n  ) => boolean;\n  afterDrawItem?: (\n    graphic: IGraphic,\n    renderService: IRenderService,\n    drawContext: IDrawContext,\n    drawContribution: IDrawContribution,\n    params?: IGraphicRenderDrawParams\n  ) => boolean;\n}\n"]}
+{"version":3,"sources":["../../src/interface/render.ts"],"names":[],"mappings":"","file":"render.js","sourcesContent":["import type { IAABBBounds, IBounds } from '@visactor/vutils';\nimport type { IColor } from './color';\nimport type { IContext2d } from './context';\nimport type { IGraphic, IGraphicAttribute } from './graphic';\nimport type { IMarkAttribute, IThemeAttribute } from './graphic/creator';\nimport type { IFullThemeSpec } from './graphic/theme';\nimport type { ILayer } from './layer';\nimport type { IStage } from './stage';\nimport type { IGroup } from './graphic/group';\nimport type { MaybePromise } from './common';\nimport type { ISyncHook } from './sync-hook';\n\n// 用于绘制的参数，提供context\n// TODO: 考虑是否可以隐藏上下文类型\nexport interface IRenderServiceDrawParams {\n  context?: IContext2d;\n\n  // 绘制的区域以及是否需要清屏\n  clear?: string | IColor;\n  width: number;\n  height: number;\n  x: number;\n  y: number;\n  stage: IStage;\n  layer: ILayer;\n  renderService: IRenderService;\n  updateBounds: boolean;\n  renderStyle?: string;\n}\n\nexport interface IRenderService {\n  dirtyBounds: IBounds;\n  renderTreeRoots: IGraphic[]; // 此次render的数组\n  renderLists: IGraphic[];\n  drawParams: IRenderServiceDrawParams;\n\n  prepare: (updateBounds: boolean) => void;\n  prepareRenderList: () => void;\n  beforeDraw: (params: IRenderServiceDrawParams) => void;\n  draw: (params: IRenderServiceDrawParams) => void;\n  afterDraw: (params: IRenderServiceDrawParams) => void;\n  render: (groups: IGroup[], params: IRenderServiceDrawParams) => MaybePromise<void>;\n}\n\nexport interface IDrawContext extends IRenderServiceDrawParams {\n  startAtId?: number;\n  break?: boolean;\n  restartIncremental?: boolean;\n  // multi图元开始的位置\n  multiGraphicOptions?: {\n    startAtIdx: number;\n    length: number;\n  };\n  in3dInterceptor?: boolean;\n  drawContribution?: IDrawContribution;\n  // hack内容\n  hack_pieFace?: 'inside' | 'bottom' | 'top' | 'outside';\n}\n\nexport interface IDrawContribution {\n  hooks?: {\n    completeDraw: ISyncHook<[]>;\n  };\n  dirtyBounds?: IAABBBounds;\n  backupDirtyBounds?: IAABBBounds;\n  rendering?: boolean;\n  currentRenderMap: Map<number, IGraphicRender>;\n  defaultRenderMap: Map<number, IGraphicRender>;\n  styleRenderMap: Map<string, Map<number, IGraphicRender>>;\n  draw: (renderService: IRenderService, drawParams: IDrawContext) => MaybePromise<void>;\n  afterDraw?: (renderService: IRenderService, drawParams: IDrawContext) => MaybePromise<void>;\n  getRenderContribution: (graphic: IGraphic) => IGraphicRender | null;\n  renderGroup: (group: IGroup, drawContext: IDrawContext, skipSort?: boolean) => void;\n  renderItem: (graphic: IGraphic, drawContext: IDrawContext, params?: IGraphicRenderDrawParams) => void;\n}\n\nexport interface IGraphicRenderDrawParams {\n  beforeDrawCb?: () => void;\n  afterDrawCb?: () => void;\n  drawingCb?: () => void;\n  skipDraw?: boolean;\n  theme?: IFullThemeSpec;\n}\n\nexport interface IGraphicRender {\n  type: string; // 图元类型\n  numberType: number;\n  style?: string;\n  z?: number;\n  draw: (\n    graphic: IGraphic,\n    renderService: IRenderService,\n    drawContext: IDrawContext,\n    params?: IGraphicRenderDrawParams\n  ) => void;\n  drawShape?: (\n    graphic: IGraphic,\n    ctx: IContext2d,\n    x: number,\n    y: number,\n    drawContext: IDrawContext,\n    params?: IGraphicRenderDrawParams,\n    fillCb?: (\n      ctx: IContext2d,\n      markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n      themeAttribute: IThemeAttribute\n    ) => boolean,\n    strokeCb?: (\n      ctx: IContext2d,\n      markAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n      themeAttribute: IThemeAttribute\n    ) => boolean\n  ) => void;\n}\n\nexport interface IBeforeRenderConstribution {\n  apply: (renderService: IRenderService) => MaybePromise<void>;\n}\n\nexport interface IRenderSelector {\n  selector: (graphic: IGraphic) => IGraphicRender | null;\n}\n\nexport interface IDrawItemInterceptorContribution {\n  order: number;\n  beforeDrawItem?: (\n    graphic: IGraphic,\n    renderService: IRenderService,\n    drawContext: IDrawContext,\n    drawContribution: IDrawContribution,\n    params?: IGraphicRenderDrawParams\n  ) => boolean;\n  afterDrawItem?: (\n    graphic: IGraphic,\n    renderService: IRenderService,\n    drawContext: IDrawContext,\n    drawContribution: IDrawContribution,\n    params?: IGraphicRenderDrawParams\n  ) => boolean;\n}\n"]}

package/cjs/interface/stage.d.ts

@@ -29,6 +29,7 @@ export interface IStageParams {
     enableLayout: boolean;
     disableDirtyBounds: boolean;
     interactiveLayer: boolean;
+    enableHtmlAttribute: string | boolean | HTMLElement;
     poptip: boolean;
     beforeRender: (stage: IStage) => void;
     afterRender: (stage: IStage) => void;
@@ -63,6 +64,7 @@ export interface IStage extends INode {
     parent: IStage | null;
     x: number;
     y: number;
+    params: Partial<IStageParams>;
     window: IWindow;
     width: number;
     height: number;

package/cjs/interface/stage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/interface/stage.ts"],"names":[],"mappings":"","file":"stage.js","sourcesContent":["import type { INode } from './node-tree';\nimport type { ILayer } from './layer';\nimport type { IGraphic } from './graphic';\nimport type { IGroup } from './graphic/group';\nimport type { IColor } from './color';\nimport type { IBounds, IBoundsLike, IMatrix, IPointLike } from '@visactor/vutils';\nimport type { ICamera } from './camera';\nimport type { vec3 } from './matrix';\nimport type { IDirectionLight } from './light';\nimport type { ISyncHook } from './sync-hook';\nimport type { IDrawContext, IRenderService } from './render';\nimport type { ITicker } from './animate';\nimport type { IPickerService } from './picker';\nimport type { IPluginService } from './plugin';\nimport type { IWindow } from './window';\nimport type { ILayerService } from './core';\n\nexport type IExportType = 'canvas' | 'imageData';\n\nexport interface IStageParams {\n  // x: number;\n  // y: number;\n  // // 视口的宽高\n  // viewWidth: number;\n  // viewHeight: number;\n\n  // 视口的宽高\n  viewBox: IBoundsLike;\n  // 总的宽高\n  width: number;\n  height: number;\n  dpr: number;\n  // stage的背景\n  background: string | IColor;\n  // 外部的canvas\n  canvas: string | HTMLCanvasElement;\n  // canvas的container容器，如果不传入canvas，那就会在容器中创建canvas\n  container: string | HTMLElement;\n  // 是否是受控制的canvas，如果不是的话，不会进行resize等操作，也不会修改canvas的样式\n  canvasControled: boolean;\n  title: string;\n  // 是否开启自动渲染\n  autoRender: boolean;\n  // 是否开启布局支持\n  enableLayout: boolean;\n  // 是否关闭脏矩形检测\n  disableDirtyBounds: boolean;\n  // 是否支持interactiveLayer，默认为true\n  interactiveLayer: boolean;\n  poptip: boolean;\n  // 绘制之前的钩子函数\n  beforeRender: (stage: IStage) => void;\n  // 绘制之后的钩子函数\n  afterRender: (stage: IStage) => void;\n  renderStyle?: string;\n  ticker?: ITicker;\n  pluginList?: string[];\n}\n\nexport interface IOption3D {\n  enableView3dTransform?: boolean; // 是否开启view3d自动旋转\n  alpha?: number; // x轴的转角\n  beta?: number; // y轴的转角\n  gama?: number; // z轴的转角\n  center?: { x?: number; y?: number; z?: number; dx?: number; dy?: number; dz?: number }; // 中心位置\n  fieldRatio?: number; // 透视的视域缩放比例\n  fieldDepth?: number;\n  light?: {\n    dir?: vec3;\n    color?: string;\n    ambient?: number;\n  };\n  // 配置相机后，alpha、beta、gamma配置会失效\n  camera?: any; // 相机配置\n}\n\n// TODO 命名方式\nexport interface IStage extends INode {\n  stage?: IStage;\n  parent: IStage | null;\n  // rootNode: IStage;\n  x: number;\n  y: number;\n\n  window: IWindow;\n\n  width: number;\n  height: number;\n  viewWidth: number;\n  viewHeight: number;\n  defaultLayer: ILayer;\n  dirtyBounds: IBounds | null;\n\n  autoRender: boolean;\n  renderCount: number;\n\n  hooks: {\n    beforeRender: ISyncHook<[IStage]>;\n    afterRender: ISyncHook<[IStage]>;\n  };\n\n  option3d?: IOption3D;\n\n  set3dOptions: (options: IOption3D) => void;\n  light?: IDirectionLight;\n  camera?: ICamera;\n\n  dpr: number;\n\n  viewBox: IBoundsLike;\n  background: string | IColor;\n  ticker: ITicker;\n  increaseAutoRender: boolean;\n  readonly renderService: IRenderService;\n  readonly pickerService: IPickerService;\n  readonly pluginService: IPluginService;\n  readonly layerService: ILayerService;\n  // 如果传入CanvasId，如果存在相同Id，说明这两个图层使用相同的Canvas绘制\n  // 但需要注意的是依然是两个图层（用于解决Table嵌入ChartSpace不影响Table的绘制）\n  createLayer: (canvasId?: string) => ILayer;\n  getLayer: (name: string) => ILayer;\n  sortLayer: (cb: (layer1: ILayer, layer2: ILayer) => number) => void;\n  removeLayer: (layerId: number) => ILayer | false;\n\n  render: (layers?: ILayer[], params?: Partial<IDrawContext>) => void;\n  renderNextFrame: (layers?: ILayer[]) => void;\n  tryInitInteractiveLayer: () => void;\n\n  // 画布操作\n  resize: (w: number, h: number, rerender?: boolean) => void;\n  resizeWindow: (w: number, h: number, rerender?: boolean) => void;\n  resizeView: (w: number, h: number, rerender?: boolean) => void;\n  setViewBox:\n    | ((viewBox: IBoundsLike, rerender: boolean) => void)\n    | ((x: number, y: number, w: number, h: number, rerender: boolean) => void)\n    | ((x: number | IBoundsLike, y: number | boolean, w?: number, h?: number, rerender?: boolean) => void);\n  setDpr: (dpr: number) => void;\n  setOrigin: (x: number, y: number) => void;\n  export: (type: IExportType) => HTMLCanvasElement | ImageData;\n  pick: (x: number, y: number) => { graphic: IGraphic | null; group: IGroup | null } | false;\n\n  // 动画相关\n  startAnimate: (t: number) => void;\n  setToFrame: (t: number) => void;\n  dirty: (b: IBounds, matrix?: IMatrix) => void;\n  // 考虑操作回放\n\n  renderTo: (window: IWindow, params: { x: number; y: number; width: number; height: number }) => void;\n\n  renderToNewWindow: (fullImage?: boolean) => IWindow;\n\n  toCanvas: (fullImage?: boolean) => HTMLCanvasElement | null;\n\n  setBeforeRender: (cb: (stage: IStage) => void) => void;\n\n  setAfterRender: (cb: (stage: IStage) => void) => void;\n\n  afterNextRender: (cb: (stage: IStage) => void) => void;\n  enableAutoRender: () => void;\n  disableAutoRender: () => void;\n  enableIncrementalAutoRender: () => void;\n  disableIncrementalAutoRender: () => void;\n  enableDirtyBounds: () => void;\n  disableDirtyBounds: () => void;\n  enableView3dTransform: () => void;\n  disableView3dTranform: () => void;\n  clearViewBox: (color?: string) => void;\n  release: () => void;\n  setStage: (stage?: IStage) => void;\n\n  setCursor: (mode?: string) => void;\n}\n\nexport declare function combineStage(srages: IStage[], params: { canvas: string | HTMLCanvasElement }): IStage;\n"]}
+{"version":3,"sources":["../../src/interface/stage.ts"],"names":[],"mappings":"","file":"stage.js","sourcesContent":["import type { INode } from './node-tree';\nimport type { ILayer } from './layer';\nimport type { IGraphic } from './graphic';\nimport type { IGroup } from './graphic/group';\nimport type { IColor } from './color';\nimport type { IBounds, IBoundsLike, IMatrix, IPointLike } from '@visactor/vutils';\nimport type { ICamera } from './camera';\nimport type { vec3 } from './matrix';\nimport type { IDirectionLight } from './light';\nimport type { ISyncHook } from './sync-hook';\nimport type { IDrawContext, IRenderService } from './render';\nimport type { ITicker } from './animate';\nimport type { IPickerService } from './picker';\nimport type { IPluginService } from './plugin';\nimport type { IWindow } from './window';\nimport type { ILayerService } from './core';\n\nexport type IExportType = 'canvas' | 'imageData';\n\nexport interface IStageParams {\n  // x: number;\n  // y: number;\n  // // 视口的宽高\n  // viewWidth: number;\n  // viewHeight: number;\n\n  // 视口的宽高\n  viewBox: IBoundsLike;\n  // 总的宽高\n  width: number;\n  height: number;\n  dpr: number;\n  // stage的背景\n  background: string | IColor;\n  // 外部的canvas\n  canvas: string | HTMLCanvasElement;\n  // canvas的container容器，如果不传入canvas，那就会在容器中创建canvas\n  container: string | HTMLElement;\n  // 是否是受控制的canvas，如果不是的话，不会进行resize等操作，也不会修改canvas的样式\n  canvasControled: boolean;\n  title: string;\n  // 是否开启自动渲染\n  autoRender: boolean;\n  // 是否开启布局支持\n  enableLayout: boolean;\n  // 是否关闭脏矩形检测\n  disableDirtyBounds: boolean;\n  // 是否支持interactiveLayer，默认为true\n  interactiveLayer: boolean;\n  // 是否支持HTML属性\n  enableHtmlAttribute: string | boolean | HTMLElement;\n  poptip: boolean;\n  // 绘制之前的钩子函数\n  beforeRender: (stage: IStage) => void;\n  // 绘制之后的钩子函数\n  afterRender: (stage: IStage) => void;\n  renderStyle?: string;\n  ticker?: ITicker;\n  pluginList?: string[];\n}\n\nexport interface IOption3D {\n  enableView3dTransform?: boolean; // 是否开启view3d自动旋转\n  alpha?: number; // x轴的转角\n  beta?: number; // y轴的转角\n  gama?: number; // z轴的转角\n  center?: { x?: number; y?: number; z?: number; dx?: number; dy?: number; dz?: number }; // 中心位置\n  fieldRatio?: number; // 透视的视域缩放比例\n  fieldDepth?: number;\n  light?: {\n    dir?: vec3;\n    color?: string;\n    ambient?: number;\n  };\n  // 配置相机后，alpha、beta、gamma配置会失效\n  camera?: any; // 相机配置\n}\n\n// TODO 命名方式\nexport interface IStage extends INode {\n  stage?: IStage;\n  parent: IStage | null;\n  // rootNode: IStage;\n  x: number;\n  y: number;\n\n  params: Partial<IStageParams>;\n\n  window: IWindow;\n\n  width: number;\n  height: number;\n  viewWidth: number;\n  viewHeight: number;\n  defaultLayer: ILayer;\n  dirtyBounds: IBounds | null;\n\n  autoRender: boolean;\n  renderCount: number;\n\n  hooks: {\n    beforeRender: ISyncHook<[IStage]>;\n    afterRender: ISyncHook<[IStage]>;\n  };\n\n  option3d?: IOption3D;\n\n  set3dOptions: (options: IOption3D) => void;\n  light?: IDirectionLight;\n  camera?: ICamera;\n\n  dpr: number;\n\n  viewBox: IBoundsLike;\n  background: string | IColor;\n  ticker: ITicker;\n  increaseAutoRender: boolean;\n  readonly renderService: IRenderService;\n  readonly pickerService: IPickerService;\n  readonly pluginService: IPluginService;\n  readonly layerService: ILayerService;\n  // 如果传入CanvasId，如果存在相同Id，说明这两个图层使用相同的Canvas绘制\n  // 但需要注意的是依然是两个图层（用于解决Table嵌入ChartSpace不影响Table的绘制）\n  createLayer: (canvasId?: string) => ILayer;\n  getLayer: (name: string) => ILayer;\n  sortLayer: (cb: (layer1: ILayer, layer2: ILayer) => number) => void;\n  removeLayer: (layerId: number) => ILayer | false;\n\n  render: (layers?: ILayer[], params?: Partial<IDrawContext>) => void;\n  renderNextFrame: (layers?: ILayer[]) => void;\n  tryInitInteractiveLayer: () => void;\n\n  // 画布操作\n  resize: (w: number, h: number, rerender?: boolean) => void;\n  resizeWindow: (w: number, h: number, rerender?: boolean) => void;\n  resizeView: (w: number, h: number, rerender?: boolean) => void;\n  setViewBox:\n    | ((viewBox: IBoundsLike, rerender: boolean) => void)\n    | ((x: number, y: number, w: number, h: number, rerender: boolean) => void)\n    | ((x: number | IBoundsLike, y: number | boolean, w?: number, h?: number, rerender?: boolean) => void);\n  setDpr: (dpr: number) => void;\n  setOrigin: (x: number, y: number) => void;\n  export: (type: IExportType) => HTMLCanvasElement | ImageData;\n  pick: (x: number, y: number) => { graphic: IGraphic | null; group: IGroup | null } | false;\n\n  // 动画相关\n  startAnimate: (t: number) => void;\n  setToFrame: (t: number) => void;\n  dirty: (b: IBounds, matrix?: IMatrix) => void;\n  // 考虑操作回放\n\n  renderTo: (window: IWindow, params: { x: number; y: number; width: number; height: number }) => void;\n\n  renderToNewWindow: (fullImage?: boolean) => IWindow;\n\n  toCanvas: (fullImage?: boolean) => HTMLCanvasElement | null;\n\n  setBeforeRender: (cb: (stage: IStage) => void) => void;\n\n  setAfterRender: (cb: (stage: IStage) => void) => void;\n\n  afterNextRender: (cb: (stage: IStage) => void) => void;\n  enableAutoRender: () => void;\n  disableAutoRender: () => void;\n  enableIncrementalAutoRender: () => void;\n  disableIncrementalAutoRender: () => void;\n  enableDirtyBounds: () => void;\n  disableDirtyBounds: () => void;\n  enableView3dTransform: () => void;\n  disableView3dTranform: () => void;\n  clearViewBox: (color?: string) => void;\n  release: () => void;\n  setStage: (stage?: IStage) => void;\n\n  setCursor: (mode?: string) => void;\n}\n\nexport declare function combineStage(srages: IStage[], params: { canvas: string | HTMLCanvasElement }): IStage;\n"]}

package/cjs/jsx/graphicType.d.ts

@@ -0,0 +1,72 @@
+import type { IArc3dGraphicAttribute, IArcGraphicAttribute, IAreaGraphicAttribute, ICircleGraphicAttribute, IGlyphGraphicAttribute, IGroupGraphicAttribute, IImageGraphicAttribute, ILineGraphicAttribute, IPathGraphicAttribute, IPolygonGraphicAttribute, IPyramid3dGraphicAttribute, IRect3dGraphicAttribute, IRectGraphicAttribute, ISymbolGraphicAttribute, ITextGraphicAttribute } from '../interface';
+import { IGroup, ISymbol } from '../interface';
+export declare const REACT_TO_CANOPUS_EVENTS: {
+    onPointerDown: string;
+    onPointerUp: string;
+    onPointerUpOutside: string;
+    onPointerTap: string;
+    onPointerOver: string;
+    onPointerMove: string;
+    onPointerEnter: string;
+    onPointerLeave: string;
+    onPointerOut: string;
+    onMouseDown: string;
+    onMouseUp: string;
+    onMouseUpOutside: string;
+    onMouseMove: string;
+    onMouseOver: string;
+    onMouseOut: string;
+    onMouseEnter: string;
+    onMouseLeave: string;
+    onPinch: string;
+    onPinchStart: string;
+    onPinchEnd: string;
+    onPan: string;
+    onPanStart: string;
+    onPanEnd: string;
+    onDrag: string;
+    onDragStart: string;
+    onDragEnter: string;
+    onDragLeave: string;
+    onDragOver: string;
+    onDragEnd: string;
+    onRightDown: string;
+    onRightUp: string;
+    onRightUpOutside: string;
+    onTouchStart: string;
+    onTouchEnd: string;
+    onTouchEndOutside: string;
+    onTouchMove: string;
+    onTouchCancel: string;
+    onPress: string;
+    onPressUp: string;
+    onPressEnd: string;
+    onSwipe: string;
+    onDrop: string;
+    onWeel: string;
+    onClick: string;
+    onDblClick: string;
+};
+export declare const REACT_TO_CANOPUS_EVENTS_LIST: string[];
+type IEventParamsType = {
+    [t in keyof typeof REACT_TO_CANOPUS_EVENTS]?: (d: any) => void;
+};
+type IDefaultGraphicParamsType<T> = {
+    attribute?: T;
+} & IEventParamsType;
+export declare function VArc(params: IDefaultGraphicParamsType<IArcGraphicAttribute>): import("../interface").IArc;
+export declare function VArc3d(params: IDefaultGraphicParamsType<IArc3dGraphicAttribute>): import("../interface").IArc;
+export declare function VArea(params: IDefaultGraphicParamsType<IAreaGraphicAttribute>): import("../interface").IArea;
+export declare function VCircle(params: IDefaultGraphicParamsType<ICircleGraphicAttribute>): import("../interface").ICircle;
+export declare function VGroup(params: IDefaultGraphicParamsType<IGroupGraphicAttribute>): IGroup;
+export declare function VGlyph(params: IDefaultGraphicParamsType<IGlyphGraphicAttribute>): import("../interface").IGlyph<Partial<import("../interface").IGraphicAttribute>>;
+export declare function VImage(params: IDefaultGraphicParamsType<IImageGraphicAttribute>): import("../interface").IImage;
+export declare function VLine(params: IDefaultGraphicParamsType<ILineGraphicAttribute>): import("../interface").ILine;
+export declare function VPath(params: IDefaultGraphicParamsType<IPathGraphicAttribute>): import("../interface").IPath;
+export declare function VPolygon(params: IDefaultGraphicParamsType<IPolygonGraphicAttribute>): import("../interface").IPolygon;
+export declare function VPyramid3d(params: IDefaultGraphicParamsType<IPyramid3dGraphicAttribute>): import("../interface").IPyramid3d;
+export declare function VRect(params: IDefaultGraphicParamsType<IRectGraphicAttribute>): import("../interface").IRect;
+export declare function VRect3d(params: IDefaultGraphicParamsType<IRect3dGraphicAttribute>): import("../interface").IRect3d;
+export declare function VSymbol(params: IDefaultGraphicParamsType<ISymbolGraphicAttribute>): ISymbol;
+export declare function VText(params: IDefaultGraphicParamsType<ITextGraphicAttribute>): import("../interface").IText;
+export {};

package/cjs/jsx/graphicType.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.VText = exports.VSymbol = exports.VRect3d = exports.VRect = exports.VPyramid3d = exports.VPolygon = exports.VPath = exports.VLine = exports.VImage = exports.VGlyph = exports.VGroup = exports.VCircle = exports.VArea = exports.VArc3d = exports.VArc = exports.REACT_TO_CANOPUS_EVENTS_LIST = exports.REACT_TO_CANOPUS_EVENTS = void 0;
+
+const graphic_1 = require("../graphic");
+
+function VArc(params) {
+    return (0, graphic_1.createArc)(params ? params.attribute : {});
+}
+
+function VArc3d(params) {
+    return (0, graphic_1.createArc3d)(params ? params.attribute : {});
+}
+
+function VArea(params) {
+    return (0, graphic_1.createArea)(params ? params.attribute : {});
+}
+
+function VCircle(params) {
+    return (0, graphic_1.createCircle)(params ? params.attribute : {});
+}
+
+function VGroup(params) {
+    return (0, graphic_1.createGroup)(params ? params.attribute : {});
+}
+
+function VGlyph(params) {
+    return (0, graphic_1.createGlyph)(params ? params.attribute : {});
+}
+
+function VImage(params) {
+    return (0, graphic_1.createImage)(params ? params.attribute : {});
+}
+
+function VLine(params) {
+    return (0, graphic_1.createLine)(params ? params.attribute : {});
+}
+
+function VPath(params) {
+    return (0, graphic_1.createPath)(params ? params.attribute : {});
+}
+
+function VPolygon(params) {
+    return (0, graphic_1.createPolygon)(params ? params.attribute : {});
+}
+
+function VPyramid3d(params) {
+    return (0, graphic_1.createPyramid3d)(params ? params.attribute : {});
+}
+
+function VRect(params) {
+    return (0, graphic_1.createRect)(params ? params.attribute : {});
+}
+
+function VRect3d(params) {
+    return (0, graphic_1.createRect3d)(params ? params.attribute : {});
+}
+
+function VSymbol(params) {
+    return (0, graphic_1.createSymbol)(params ? params.attribute : {});
+}
+
+function VText(params) {
+    return (0, graphic_1.createText)(params ? params.attribute : {});
+}
+
+exports.REACT_TO_CANOPUS_EVENTS = {
+    onPointerDown: "pointerdown",
+    onPointerUp: "pointerup",
+    onPointerUpOutside: "pointerupoutside",
+    onPointerTap: "pointertap",
+    onPointerOver: "pointerover",
+    onPointerMove: "pointermove",
+    onPointerEnter: "pointerenter",
+    onPointerLeave: "pointerleave",
+    onPointerOut: "pointerout",
+    onMouseDown: "mousedown",
+    onMouseUp: "mouseup",
+    onMouseUpOutside: "mouseupoutside",
+    onMouseMove: "mousemove",
+    onMouseOver: "mouseover",
+    onMouseOut: "mouseout",
+    onMouseEnter: "mouseenter",
+    onMouseLeave: "mouseleave",
+    onPinch: "pinch",
+    onPinchStart: "pinchstart",
+    onPinchEnd: "pinchend",
+    onPan: "pan",
+    onPanStart: "panstart",
+    onPanEnd: "panend",
+    onDrag: "drag",
+    onDragStart: "dragstart",
+    onDragEnter: "dragenter",
+    onDragLeave: "dragleave",
+    onDragOver: "dragover",
+    onDragEnd: "dragend",
+    onRightDown: "rightdown",
+    onRightUp: "rightup",
+    onRightUpOutside: "rightupoutside",
+    onTouchStart: "touchstart",
+    onTouchEnd: "touchend",
+    onTouchEndOutside: "touchendoutside",
+    onTouchMove: "touchmove",
+    onTouchCancel: "touchcancel",
+    onPress: "press",
+    onPressUp: "pressup",
+    onPressEnd: "pressend",
+    onSwipe: "swipe",
+    onDrop: "drop",
+    onWeel: "wheel",
+    onClick: "click",
+    onDblClick: "dblclick"
+}, exports.REACT_TO_CANOPUS_EVENTS_LIST = Object.keys(exports.REACT_TO_CANOPUS_EVENTS), 
+exports.VArc = VArc, exports.VArc3d = VArc3d, exports.VArea = VArea, exports.VCircle = VCircle, 
+exports.VGroup = VGroup, exports.VGlyph = VGlyph, exports.VImage = VImage, exports.VLine = VLine, 
+exports.VPath = VPath, exports.VPolygon = VPolygon, exports.VPyramid3d = VPyramid3d, 
+exports.VRect = VRect, exports.VRect3d = VRect3d, exports.VSymbol = VSymbol, exports.VText = VText;
+//# sourceMappingURL=graphicType.js.map

package/cjs/jsx/graphicType.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/jsx/graphicType.ts"],"names":[],"mappings":"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","file":"graphicType.js","sourcesContent":["import {\n  createArc,\n  createArc3d,\n  createArea,\n  createCircle,\n  createGlyph,\n  createGroup,\n  createImage,\n  createLine,\n  createPath,\n  createPolygon,\n  createPyramid3d,\n  createRect,\n  createRect3d,\n  createSymbol,\n  createText\n} from '../graphic';\nimport type {\n  IArc3dGraphicAttribute,\n  IArcGraphicAttribute,\n  IAreaGraphicAttribute,\n  ICircleGraphicAttribute,\n  IGlyphGraphicAttribute,\n  IGroupGraphicAttribute,\n  IImageGraphicAttribute,\n  ILineGraphicAttribute,\n  IPathGraphicAttribute,\n  IPolygonGraphicAttribute,\n  IPyramid3dGraphicAttribute,\n  IRect3dGraphicAttribute,\n  IRectGraphicAttribute,\n  ISymbolGraphicAttribute,\n  ITextGraphicAttribute\n} from '../interface';\nimport { IArcAttribute, IGraphic, IGroup, ISymbol, ISymbolAttribute } from '../interface';\n\nexport const REACT_TO_CANOPUS_EVENTS = {\n  onPointerDown: 'pointerdown',\n  onPointerUp: 'pointerup',\n  onPointerUpOutside: 'pointerupoutside',\n  onPointerTap: 'pointertap',\n  onPointerOver: 'pointerover',\n  onPointerMove: 'pointermove',\n  onPointerEnter: 'pointerenter',\n  onPointerLeave: 'pointerleave',\n  onPointerOut: 'pointerout',\n  onMouseDown: 'mousedown',\n  onMouseUp: 'mouseup',\n  onMouseUpOutside: 'mouseupoutside',\n  onMouseMove: 'mousemove',\n  onMouseOver: 'mouseover',\n  onMouseOut: 'mouseout',\n  onMouseEnter: 'mouseenter',\n  onMouseLeave: 'mouseleave',\n  onPinch: 'pinch',\n  onPinchStart: 'pinchstart',\n  onPinchEnd: 'pinchend',\n  onPan: 'pan',\n  onPanStart: 'panstart',\n  onPanEnd: 'panend',\n  onDrag: 'drag',\n  onDragStart: 'dragstart',\n  onDragEnter: 'dragenter',\n  onDragLeave: 'dragleave',\n  onDragOver: 'dragover',\n  onDragEnd: 'dragend',\n  onRightDown: 'rightdown',\n  onRightUp: 'rightup',\n  onRightUpOutside: 'rightupoutside',\n  onTouchStart: 'touchstart',\n  onTouchEnd: 'touchend',\n  onTouchEndOutside: 'touchendoutside',\n  onTouchMove: 'touchmove',\n  onTouchCancel: 'touchcancel',\n  onPress: 'press',\n  onPressUp: 'pressup',\n  onPressEnd: 'pressend',\n  onSwipe: 'swipe',\n  onDrop: 'drop',\n  onWeel: 'wheel',\n  onClick: 'click',\n  onDblClick: 'dblclick'\n};\n\nexport const REACT_TO_CANOPUS_EVENTS_LIST = Object.keys(REACT_TO_CANOPUS_EVENTS);\n\ntype IEventParamsType = {\n  [t in keyof typeof REACT_TO_CANOPUS_EVENTS]?: (d: any) => void;\n};\n\ntype IDefaultGraphicParamsType<T> = {\n  attribute?: T;\n} & IEventParamsType;\n\nexport function VArc(params: IDefaultGraphicParamsType<IArcGraphicAttribute>) {\n  return createArc(params ? params.attribute : {});\n}\nexport function VArc3d(params: IDefaultGraphicParamsType<IArc3dGraphicAttribute>) {\n  return createArc3d(params ? params.attribute : {});\n}\nexport function VArea(params: IDefaultGraphicParamsType<IAreaGraphicAttribute>) {\n  return createArea(params ? params.attribute : {});\n}\nexport function VCircle(params: IDefaultGraphicParamsType<ICircleGraphicAttribute>) {\n  return createCircle(params ? params.attribute : {});\n}\nexport function VGroup(params: IDefaultGraphicParamsType<IGroupGraphicAttribute>) {\n  return createGroup(params ? params.attribute : {});\n}\nexport function VGlyph(params: IDefaultGraphicParamsType<IGlyphGraphicAttribute>) {\n  return createGlyph(params ? params.attribute : {});\n}\nexport function VImage(params: IDefaultGraphicParamsType<IImageGraphicAttribute>) {\n  return createImage(params ? params.attribute : {});\n}\nexport function VLine(params: IDefaultGraphicParamsType<ILineGraphicAttribute>) {\n  return createLine(params ? params.attribute : {});\n}\nexport function VPath(params: IDefaultGraphicParamsType<IPathGraphicAttribute>) {\n  return createPath(params ? params.attribute : {});\n}\nexport function VPolygon(params: IDefaultGraphicParamsType<IPolygonGraphicAttribute>) {\n  return createPolygon(params ? params.attribute : {});\n}\nexport function VPyramid3d(params: IDefaultGraphicParamsType<IPyramid3dGraphicAttribute>) {\n  return createPyramid3d(params ? params.attribute : {});\n}\nexport function VRect(params: IDefaultGraphicParamsType<IRectGraphicAttribute>) {\n  return createRect(params ? params.attribute : {});\n}\nexport function VRect3d(params: IDefaultGraphicParamsType<IRect3dGraphicAttribute>) {\n  return createRect3d(params ? params.attribute : {});\n}\nexport function VSymbol(params: IDefaultGraphicParamsType<ISymbolGraphicAttribute>) {\n  return createSymbol(params ? params.attribute : {});\n}\nexport function VText(params: IDefaultGraphicParamsType<ITextGraphicAttribute>) {\n  return createText(params ? params.attribute : {});\n}\n"]}

package/cjs/jsx/index.d.ts

@@ -0,0 +1,2 @@
+export * from './jsx-classic';
+export * from './graphicType';

package/cjs/jsx/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k);
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
+        enumerable: !0,
+        get: function() {
+            return m[k];
+        }
+    }), Object.defineProperty(o, k2, desc);
+} : function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k), o[k2] = m[k];
+}), __exportStar = this && this.__exportStar || function(m, exports) {
+    for (var p in m) "default" === p || Object.prototype.hasOwnProperty.call(exports, p) || __createBinding(exports, m, p);
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), __exportStar(require("./jsx-classic"), exports), __exportStar(require("./graphicType"), exports);
+//# sourceMappingURL=index.js.map

package/cjs/jsx/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/jsx/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,gDAA8B;AAC9B,gDAA8B","file":"index.js","sourcesContent":["export * from './jsx-classic';\nexport * from './graphicType';\n"]}

package/cjs/jsx/jsx-classic.d.ts

@@ -0,0 +1,5 @@
+export declare function jsx(type: string | any, config: Record<string, any>, ...children: any): any;
+export declare class Fragment {
+    children: any[];
+    add(g: any): void;
+}

package/cjs/jsx/jsx-classic.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var __rest = this && this.__rest || function(s, e) {
+    var t = {};
+    for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
+    if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
+        var i = 0;
+        for (p = Object.getOwnPropertySymbols(s); i < p.length; i++) e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
+    }
+    return t;
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Fragment = exports.jsx = void 0;
+
+const vutils_1 = require("@visactor/vutils"), graphic_1 = require("../graphic"), graphicType_1 = require("./graphicType");
+
+function jsx(type, config, ...children) {
+    const _a = config || {}, {key: key, attribute: attribute} = _a, props = __rest(_a, [ "key", "attribute" ]);
+    let c = type;
+    (0, vutils_1.isString)(type) && (c = graphic_1.graphicCreator[type]);
+    let childrenList = [];
+    children.length && (childrenList = 1 === children.length ? children[0] : children);
+    const g = c.prototype.type ? new c(attribute) : c(config);
+    return childrenList && (0, vutils_1.isArray)(childrenList) ? childrenList.forEach((c => {
+        g.add(c);
+    })) : g.add(childrenList), Object.keys(props).forEach((k => {
+        const en = graphicType_1.REACT_TO_CANOPUS_EVENTS[k];
+        en && g.on(en, props[k]);
+    })), g;
+}
+
+exports.jsx = jsx;
+
+class Fragment {
+    constructor() {
+        this.children = [];
+    }
+    add(g) {
+        this.children.push(g);
+    }
+}
+
+exports.Fragment = Fragment;
+//# sourceMappingURL=jsx-classic.js.map

package/cjs/jsx/jsx-classic.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/jsx/jsx-classic.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,6CAAqD;AACrD,wCAA4C;AAC5C,+CAAwD;AAExD,SAAgB,GAAG,CAAC,IAAkB,EAAE,MAA2B,EAAE,GAAG,QAAa;IACnF,MAAM,KAA+B,MAAM,IAAI,EAAE,EAA3C,EAAE,GAAG,EAAE,SAAS,OAA2B,EAAtB,KAAK,cAA1B,oBAA4B,CAAe,CAAC;IAElD,IAAI,CAAC,GAAG,IAAI,CAAC;IACb,IAAI,IAAA,iBAAQ,EAAC,IAAI,CAAC,EAAE;QAClB,CAAC,GAAG,wBAAc,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,IAAI,YAAY,GAAG,EAAE,CAAC;IACtB,IAAI,QAAQ,CAAC,MAAM,EAAE;QACnB,YAAY,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;KAC/D;IAED,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAC1D,IAAI,YAAY,IAAI,IAAA,gBAAO,EAAC,YAAY,CAAC,EAAE;QACzC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAM,EAAE,EAAE;YAC9B,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACX,CAAC,CAAC,CAAC;KACJ;SAAM;QACL,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;KACrB;IAED,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;QAC7B,MAAM,EAAE,GAAG,qCAAuB,CAAC,CAAC,CAAC,CAAC;QACtC,IAAI,EAAE,EAAE;YACN,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;SACpB;IACH,CAAC,CAAC,CAAC;IACH,OAAO,CAAC,CAAC;AACX,CAAC;AA7BD,kBA6BC;AAED,MAAa,QAAQ;IAArB;QACE,aAAQ,GAAU,EAAE,CAAC;IAIvB,CAAC;IAHC,GAAG,CAAC,CAAM;QACR,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IACxB,CAAC;CACF;AALD,4BAKC","file":"jsx-classic.js","sourcesContent":["import { isArray, isString } from '@visactor/vutils';\nimport { graphicCreator } from '../graphic';\nimport { REACT_TO_CANOPUS_EVENTS } from './graphicType';\n\nexport function jsx(type: string | any, config: Record<string, any>, ...children: any) {\n  const { key, attribute, ...props } = config || {};\n\n  let c = type;\n  if (isString(type)) {\n    c = graphicCreator[type];\n  }\n\n  let childrenList = [];\n  if (children.length) {\n    childrenList = children.length === 1 ? children[0] : children;\n  }\n\n  const g = c.prototype.type ? new c(attribute) : c(config);\n  if (childrenList && isArray(childrenList)) {\n    childrenList.forEach((c: any) => {\n      g.add(c);\n    });\n  } else {\n    g.add(childrenList);\n  }\n\n  Object.keys(props).forEach(k => {\n    const en = REACT_TO_CANOPUS_EVENTS[k];\n    if (en) {\n      g.on(en, props[k]);\n    }\n  });\n  return g;\n}\n\nexport class Fragment {\n  children: any[] = [];\n  add(g: any) {\n    this.children.push(g);\n  }\n}\n"]}

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

@@ -16,7 +16,8 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.DefaultCanvasSymbolPicker = void 0;
 
-const inversify_1 = require("inversify"), theme_1 = require("../../../graphic/theme"), render_1 = require("../../../render"), matrix_allocate_1 = require("../../../allocator/matrix-allocate"), canvas_utils_1 = require("../../../common/canvas-utils"), base_picker_1 = require("./base-picker"), constants_1 = require("../../../graphic/constants");
+const inversify_1 = require("inversify"), theme_1 = require("../../../graphic/theme"), render_1 = require("../../../render"), matrix_allocate_1 = require("../../../allocator/matrix-allocate"), canvas_utils_1 = require("../../../common/canvas-utils"), base_picker_1 = require("./base-picker"), constants_1 = require("../../../graphic/constants"), graphic_1 = require("../../../graphic"), rect = (0, 
+graphic_1.createRect)({});
 
 let DefaultCanvasSymbolPicker = class extends base_picker_1.BasePicker {
     constructor(canvasRenderer) {
@@ -25,9 +26,10 @@ let DefaultCanvasSymbolPicker = class extends base_picker_1.BasePicker {
     contains(symbol, point, params) {
         const {pickContext: pickContext} = null != params ? params : {};
         if (!pickContext) return !1;
+        const parsedPath = symbol.getParsedPath();
         if (!pickContext.camera) {
             if (!symbol.AABBBounds.containsPoint(point)) return !1;
-            if ("imprecise" === symbol.attribute.pickMode) return !0;
+            if (parsedPath.isSvg || "imprecise" === symbol.attribute.pickMode) return !0;
         }
         pickContext.highPerformanceSave();
         const symbolAttribute = (0, theme_1.getTheme)(symbol).symbol, data = this.transform(symbol, symbolAttribute, pickContext), {x: x, y: y, z: z, lastModelMatrix: lastModelMatrix} = data;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/picker/contributions/canvas-picker/symbol-picker.ts"],"names":[],"mappings":"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","file":"symbol-picker.js","sourcesContent":["import { inject, injectable } from 'inversify';\nimport type { IPoint } from '@visactor/vutils';\nimport { getTheme } from '../../../graphic/theme';\nimport type {\n  IGraphicAttribute,\n  IContext2d,\n  IMarkAttribute,\n  ISymbol,\n  IThemeAttribute,\n  IGraphicPicker,\n  IGraphicRender,\n  IPickParams\n} from '../../../interface';\nimport { SymbolRender } from '../../../render';\nimport { mat4Allocate } from '../../../allocator/matrix-allocate';\nimport { getScaledStroke } from '../../../common/canvas-utils';\nimport { BasePicker } from './base-picker';\nimport { SYMBOL_NUMBER_TYPE } from '../../../graphic/constants';\n\n@injectable()\nexport class DefaultCanvasSymbolPicker extends BasePicker<ISymbol> implements IGraphicPicker {\n  type: string = 'symbol';\n  numberType: number = SYMBOL_NUMBER_TYPE;\n\n  constructor(@inject(SymbolRender) public readonly canvasRenderer: IGraphicRender) {\n    super();\n  }\n\n  contains(symbol: ISymbol, point: IPoint, params?: IPickParams): boolean {\n    const { pickContext } = params ?? {};\n    if (!pickContext) {\n      return false;\n    }\n\n    if (!pickContext.camera) {\n      if (!symbol.AABBBounds.containsPoint(point)) {\n        return false;\n      }\n      if (symbol.attribute.pickMode === 'imprecise') {\n        return true;\n      }\n    }\n\n    pickContext.highPerformanceSave();\n    // const symbolAttribute = graphicService.themeService.getCurrentTheme().symbolAttribute;\n    const symbolAttribute = getTheme(symbol).symbol;\n\n    const data = this.transform(symbol, symbolAttribute, pickContext);\n    const { x, y, z, lastModelMatrix } = data;\n    // let { x = symbolAttribute.x, y = symbolAttribute.y } = symbol.attribute;\n\n    // pickContext.highPerformanceSave();\n    // if (!symbol.transMatrix.onlyTranslate()) {\n    //   // 性能较差\n    //   x = 0;\n    //   y = 0;\n    //   pickContext.transformFromMatrix(symbol.transMatrix, true);\n    // } else {\n    //   const point = symbol.getOffsetXY(symbolAttribute);\n    //   x += point.x;\n    //   y += point.y;\n    //   // 当前context有rotate/scale，重置matrix\n    //   pickContext.setTransformForCurrent();\n    // }\n\n    let pickPoint = point;\n    if (pickContext.camera) {\n      pickPoint = point.clone();\n      const globalMatrix = symbol.parent.globalTransMatrix;\n      pickPoint.x = globalMatrix.a * point.x + globalMatrix.c * point.y + globalMatrix.e;\n      pickPoint.y = globalMatrix.b * point.x + globalMatrix.d * point.y + globalMatrix.f;\n    }\n\n    this.canvasRenderer.z = z;\n    // 详细形状判断\n    let picked = false;\n    this.canvasRenderer.drawShape(\n      symbol,\n      pickContext,\n      x,\n      y,\n      {} as any,\n      null,\n      (\n        context: IContext2d,\n        symbolAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n        themeAttribute: IThemeAttribute\n      ) => {\n        // 选中后面就不需要再走逻辑了\n        if (picked) {\n          return true;\n        }\n        picked = context.isPointInPath(pickPoint.x, pickPoint.y);\n        return picked;\n      },\n      (\n        context: IContext2d,\n        symbolAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n        themeAttribute: IThemeAttribute\n      ) => {\n        // 选中后面就不需要再走逻辑了\n        if (picked) {\n          return true;\n        }\n        const lineWidth = symbolAttribute.lineWidth || themeAttribute.lineWidth;\n        pickContext.lineWidth = getScaledStroke(pickContext, lineWidth, pickContext.dpr);\n        picked = context.isPointInStroke(pickPoint.x, pickPoint.y);\n        return picked;\n      }\n    );\n\n    this.canvasRenderer.z = 0;\n\n    if (pickContext.modelMatrix !== lastModelMatrix) {\n      mat4Allocate.free(pickContext.modelMatrix);\n    }\n    pickContext.modelMatrix = lastModelMatrix;\n    pickContext.highPerformanceRestore();\n    return picked;\n  }\n}\n"]}
+{"version":3,"sources":["../../src/picker/contributions/canvas-picker/symbol-picker.ts"],"names":[],"mappings":"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","file":"symbol-picker.js","sourcesContent":["import { inject, injectable } from 'inversify';\nimport type { IPoint } from '@visactor/vutils';\nimport { getTheme } from '../../../graphic/theme';\nimport type {\n  IGraphicAttribute,\n  IContext2d,\n  IMarkAttribute,\n  ISymbol,\n  IThemeAttribute,\n  IGraphicPicker,\n  IGraphicRender,\n  IPickParams\n} from '../../../interface';\nimport { SymbolRender } from '../../../render';\nimport { mat4Allocate } from '../../../allocator/matrix-allocate';\nimport { getScaledStroke } from '../../../common/canvas-utils';\nimport { BasePicker } from './base-picker';\nimport { SYMBOL_NUMBER_TYPE } from '../../../graphic/constants';\nimport { createRect } from '../../../graphic';\n\nconst rect = createRect({});\n\n@injectable()\nexport class DefaultCanvasSymbolPicker extends BasePicker<ISymbol> implements IGraphicPicker {\n  type: string = 'symbol';\n  numberType: number = SYMBOL_NUMBER_TYPE;\n\n  constructor(@inject(SymbolRender) public readonly canvasRenderer: IGraphicRender) {\n    super();\n  }\n\n  contains(symbol: ISymbol, point: IPoint, params?: IPickParams): boolean {\n    const { pickContext } = params ?? {};\n    if (!pickContext) {\n      return false;\n    }\n\n    const parsedPath = symbol.getParsedPath();\n    if (!pickContext.camera) {\n      if (!symbol.AABBBounds.containsPoint(point)) {\n        return false;\n      }\n      if (parsedPath.isSvg || symbol.attribute.pickMode === 'imprecise') {\n        return true;\n      }\n    }\n\n    pickContext.highPerformanceSave();\n    // const symbolAttribute = graphicService.themeService.getCurrentTheme().symbolAttribute;\n    const symbolAttribute = getTheme(symbol).symbol;\n\n    const data = this.transform(symbol, symbolAttribute, pickContext);\n    const { x, y, z, lastModelMatrix } = data;\n    // let { x = symbolAttribute.x, y = symbolAttribute.y } = symbol.attribute;\n\n    // pickContext.highPerformanceSave();\n    // if (!symbol.transMatrix.onlyTranslate()) {\n    //   // 性能较差\n    //   x = 0;\n    //   y = 0;\n    //   pickContext.transformFromMatrix(symbol.transMatrix, true);\n    // } else {\n    //   const point = symbol.getOffsetXY(symbolAttribute);\n    //   x += point.x;\n    //   y += point.y;\n    //   // 当前context有rotate/scale，重置matrix\n    //   pickContext.setTransformForCurrent();\n    // }\n\n    let pickPoint = point;\n    if (pickContext.camera) {\n      pickPoint = point.clone();\n      const globalMatrix = symbol.parent.globalTransMatrix;\n      pickPoint.x = globalMatrix.a * point.x + globalMatrix.c * point.y + globalMatrix.e;\n      pickPoint.y = globalMatrix.b * point.x + globalMatrix.d * point.y + globalMatrix.f;\n    }\n\n    this.canvasRenderer.z = z;\n    // 详细形状判断\n    let picked = false;\n    this.canvasRenderer.drawShape(\n      symbol,\n      pickContext,\n      x,\n      y,\n      {} as any,\n      null,\n      (\n        context: IContext2d,\n        symbolAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n        themeAttribute: IThemeAttribute\n      ) => {\n        // 选中后面就不需要再走逻辑了\n        if (picked) {\n          return true;\n        }\n        picked = context.isPointInPath(pickPoint.x, pickPoint.y);\n        return picked;\n      },\n      (\n        context: IContext2d,\n        symbolAttribute: Partial<IMarkAttribute & IGraphicAttribute>,\n        themeAttribute: IThemeAttribute\n      ) => {\n        // 选中后面就不需要再走逻辑了\n        if (picked) {\n          return true;\n        }\n        const lineWidth = symbolAttribute.lineWidth || themeAttribute.lineWidth;\n        pickContext.lineWidth = getScaledStroke(pickContext, lineWidth, pickContext.dpr);\n        picked = context.isPointInStroke(pickPoint.x, pickPoint.y);\n        return picked;\n      }\n    );\n\n    this.canvasRenderer.z = 0;\n\n    if (pickContext.modelMatrix !== lastModelMatrix) {\n      mat4Allocate.free(pickContext.modelMatrix);\n    }\n    pickContext.modelMatrix = lastModelMatrix;\n    pickContext.highPerformanceRestore();\n    return picked;\n  }\n}\n"]}

package/cjs/picker/pick-interceptor.js

@@ -65,10 +65,9 @@ let Canvas3DPickItemInterceptor = class {
                     graphic.add(g);
                 }));
             } else result = pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams);
-            return context.camera = null, context.restore(), pickParams.in3dInterceptor = !1, 
-            result;
+            return context.camera = null, pickParams.in3dInterceptor = !1, result;
         }
-        return null;
+        return context.restore(), null;
     }
     initCanvasCtx(context) {
         context.setTransformForCurrent();

package/cjs/picker/pick-interceptor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/picker/pick-interceptor.ts"],"names":[],"mappings":"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","file":"pick-interceptor.js","sourcesContent":["import type { IMatrix, IPointLike } from '@visactor/vutils';\nimport { pi2 } from '@visactor/vutils';\nimport { injectable } from 'inversify';\nimport { ARC3D_NUMBER_TYPE } from '../graphic/constants';\nimport type {\n  IArc,\n  IContext2d,\n  IGraphic,\n  IGroup,\n  IPickItemInterceptorContribution,\n  IPickParams,\n  IPickerService,\n  PickResult\n} from '../interface';\n\n// 拦截器\nexport const PickItemInterceptor = Symbol.for('PickItemInterceptor');\n\n/**\n * 3d拦截器，用于渲染3d视角\n */\n@injectable()\nexport class Canvas3DPickItemInterceptor implements IPickItemInterceptorContribution {\n  // canvas?: ICanvas;\n  order: number = 1;\n\n  beforePickItem(\n    graphic: IGraphic,\n    pickerService: IPickerService,\n    point: IPointLike,\n    pickParams: IPickParams,\n    params?: {\n      parentMatrix: IMatrix;\n    }\n  ) {\n    if (!graphic.in3dMode || pickParams.in3dInterceptor) {\n      return null;\n    }\n\n    const context = pickerService.pickContext;\n    const stage = graphic.stage;\n    if (!(context && stage)) {\n      return null;\n    }\n    pickParams.in3dInterceptor = true;\n\n    // 使用3d模式渲染\n    context.save();\n    this.initCanvasCtx(context);\n    context.camera = stage.camera;\n\n    // 设置context的transform到上一个节点\n    if (graphic.isContainer) {\n      // hack逻辑，如果是饼图的话，需要依次绘制不同的边\n      let isPie: boolean = false;\n      let is3d: boolean = false;\n      graphic.forEachChildren((c: IGraphic) => {\n        isPie = c.numberType === ARC3D_NUMBER_TYPE;\n        return !isPie;\n      });\n      graphic.forEachChildren((c: IGraphic) => {\n        is3d = !!c.findFace;\n        return !is3d;\n      });\n\n      let result: PickResult;\n      if (isPie) {\n        const children = graphic.getChildren() as IArc[];\n        // 绘制内层\n        // drawContext.hack_pieFace = 'inside';\n        // drawContribution.renderGroup(graphic as IGroup, drawContext);\n        // 绘制底部\n        // drawContext.hack_pieFace = 'bottom';\n        // drawContribution.renderGroup(graphic as IGroup, drawContext);\n        // 绘制外部\n        // 排序一下\n        const sortedChildren = [...children];\n        sortedChildren.sort((a, b) => {\n          let angle1 = (a.attribute.startAngle ?? 0 + a.attribute.endAngle ?? 0) / 2;\n          let angle2 = (b.attribute.startAngle ?? 0 + b.attribute.endAngle ?? 0) / 2;\n          while (angle1 < 0) {\n            angle1 += pi2;\n          }\n          while (angle2 < 0) {\n            angle2 += pi2;\n          }\n          return angle2 - angle1;\n        });\n        sortedChildren.forEach(c => {\n          c._next = null;\n          c._prev = null;\n        });\n        graphic.removeAllChild();\n        graphic.update();\n        sortedChildren.forEach(c => {\n          graphic.appendChild(c);\n        });\n        pickParams.hack_pieFace = 'outside';\n        result = pickerService.pickGroup(graphic as IGroup, point, params.parentMatrix, pickParams);\n        if (!result.graphic) {\n          // 绘制内部\n          pickParams.hack_pieFace = 'inside';\n          result = pickerService.pickGroup(graphic as IGroup, point, params.parentMatrix, pickParams);\n        }\n        if (!result.graphic) {\n          // 绘制顶部\n          pickParams.hack_pieFace = 'top';\n          result = pickerService.pickGroup(graphic as IGroup, point, params.parentMatrix, pickParams);\n        }\n        graphic.removeAllChild();\n        children.forEach(c => {\n          c._next = null;\n          c._prev = null;\n        });\n        children.forEach(c => {\n          graphic.appendChild(c);\n        });\n      } else if (is3d) {\n        // 排序这些图元\n        const children = graphic.getChildren() as IGraphic[];\n        const zChildren = children.map(g => {\n          const face3d = g.findFace();\n          const vertices = face3d.vertices;\n          // 计算每个顶点的view\n          const viewdVerticesZ = vertices.map(v => {\n            return context.view(v[0], v[1], v[2] + g.attribute.z ?? 0)[2];\n          });\n          const ave_z = viewdVerticesZ.reduce((a, b) => a + b, 0);\n          return {\n            ave_z,\n            g\n          };\n        });\n        zChildren.sort((a, b) => b.ave_z - a.ave_z);\n        graphic.removeAllChild();\n        zChildren.forEach(i => {\n          i.g._next = null;\n          i.g._prev = null;\n        });\n        graphic.update();\n        zChildren.forEach(i => {\n          graphic.add(i.g);\n        });\n\n        result = pickerService.pickGroup(graphic as IGroup, point, params.parentMatrix, pickParams);\n\n        graphic.removeAllChild();\n        children.forEach(g => {\n          g._next = null;\n          g._prev = null;\n        });\n        graphic.update();\n        children.forEach(g => {\n          graphic.add(g);\n        });\n      } else {\n        result = pickerService.pickGroup(graphic as IGroup, point, params.parentMatrix, pickParams);\n      }\n\n      context.camera = null;\n      context.restore();\n\n      pickParams.in3dInterceptor = false;\n      return result;\n    }\n    return null;\n  }\n\n  initCanvasCtx(context: IContext2d) {\n    context.setTransformForCurrent();\n  }\n}\n"]}
+{"version":3,"sources":["../../src/picker/pick-interceptor.ts"],"names":[],"mappings":"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","file":"pick-interceptor.js","sourcesContent":["import type { IMatrix, IPointLike } from '@visactor/vutils';\nimport { pi2 } from '@visactor/vutils';\nimport { injectable } from 'inversify';\nimport { ARC3D_NUMBER_TYPE } from '../graphic/constants';\nimport type {\n  IArc,\n  IContext2d,\n  IGraphic,\n  IGroup,\n  IPickItemInterceptorContribution,\n  IPickParams,\n  IPickerService,\n  PickResult\n} from '../interface';\n\n// 拦截器\nexport const PickItemInterceptor = Symbol.for('PickItemInterceptor');\n\n/**\n * 3d拦截器，用于渲染3d视角\n */\n@injectable()\nexport class Canvas3DPickItemInterceptor implements IPickItemInterceptorContribution {\n  // canvas?: ICanvas;\n  order: number = 1;\n\n  beforePickItem(\n    graphic: IGraphic,\n    pickerService: IPickerService,\n    point: IPointLike,\n    pickParams: IPickParams,\n    params?: {\n      parentMatrix: IMatrix;\n    }\n  ) {\n    if (!graphic.in3dMode || pickParams.in3dInterceptor) {\n      return null;\n    }\n\n    const context = pickerService.pickContext;\n    const stage = graphic.stage;\n    if (!(context && stage)) {\n      return null;\n    }\n    pickParams.in3dInterceptor = true;\n\n    // 使用3d模式渲染\n    context.save();\n    this.initCanvasCtx(context);\n    context.camera = stage.camera;\n\n    // 设置context的transform到上一个节点\n    if (graphic.isContainer) {\n      // hack逻辑，如果是饼图的话，需要依次绘制不同的边\n      let isPie: boolean = false;\n      let is3d: boolean = false;\n      graphic.forEachChildren((c: IGraphic) => {\n        isPie = c.numberType === ARC3D_NUMBER_TYPE;\n        return !isPie;\n      });\n      graphic.forEachChildren((c: IGraphic) => {\n        is3d = !!c.findFace;\n        return !is3d;\n      });\n\n      let result: PickResult;\n      if (isPie) {\n        const children = graphic.getChildren() as IArc[];\n        // 绘制内层\n        // drawContext.hack_pieFace = 'inside';\n        // drawContribution.renderGroup(graphic as IGroup, drawContext);\n        // 绘制底部\n        // drawContext.hack_pieFace = 'bottom';\n        // drawContribution.renderGroup(graphic as IGroup, drawContext);\n        // 绘制外部\n        // 排序一下\n        const sortedChildren = [...children];\n        sortedChildren.sort((a, b) => {\n          let angle1 = (a.attribute.startAngle ?? 0 + a.attribute.endAngle ?? 0) / 2;\n          let angle2 = (b.attribute.startAngle ?? 0 + b.attribute.endAngle ?? 0) / 2;\n          while (angle1 < 0) {\n            angle1 += pi2;\n          }\n          while (angle2 < 0) {\n            angle2 += pi2;\n          }\n          return angle2 - angle1;\n        });\n        sortedChildren.forEach(c => {\n          c._next = null;\n          c._prev = null;\n        });\n        graphic.removeAllChild();\n        graphic.update();\n        sortedChildren.forEach(c => {\n          graphic.appendChild(c);\n        });\n        pickParams.hack_pieFace = 'outside';\n        result = pickerService.pickGroup(graphic as IGroup, point, params.parentMatrix, pickParams);\n        if (!result.graphic) {\n          // 绘制内部\n          pickParams.hack_pieFace = 'inside';\n          result = pickerService.pickGroup(graphic as IGroup, point, params.parentMatrix, pickParams);\n        }\n        if (!result.graphic) {\n          // 绘制顶部\n          pickParams.hack_pieFace = 'top';\n          result = pickerService.pickGroup(graphic as IGroup, point, params.parentMatrix, pickParams);\n        }\n        graphic.removeAllChild();\n        children.forEach(c => {\n          c._next = null;\n          c._prev = null;\n        });\n        children.forEach(c => {\n          graphic.appendChild(c);\n        });\n      } else if (is3d) {\n        // 排序这些图元\n        const children = graphic.getChildren() as IGraphic[];\n        const zChildren = children.map(g => {\n          const face3d = g.findFace();\n          const vertices = face3d.vertices;\n          // 计算每个顶点的view\n          const viewdVerticesZ = vertices.map(v => {\n            return context.view(v[0], v[1], v[2] + g.attribute.z ?? 0)[2];\n          });\n          const ave_z = viewdVerticesZ.reduce((a, b) => a + b, 0);\n          return {\n            ave_z,\n            g\n          };\n        });\n        zChildren.sort((a, b) => b.ave_z - a.ave_z);\n        graphic.removeAllChild();\n        zChildren.forEach(i => {\n          i.g._next = null;\n          i.g._prev = null;\n        });\n        graphic.update();\n        zChildren.forEach(i => {\n          graphic.add(i.g);\n        });\n\n        result = pickerService.pickGroup(graphic as IGroup, point, params.parentMatrix, pickParams);\n\n        graphic.removeAllChild();\n        children.forEach(g => {\n          g._next = null;\n          g._prev = null;\n        });\n        graphic.update();\n        children.forEach(g => {\n          graphic.add(g);\n        });\n      } else {\n        result = pickerService.pickGroup(graphic as IGroup, point, params.parentMatrix, pickParams);\n      }\n\n      context.camera = null;\n\n      pickParams.in3dInterceptor = false;\n      return result;\n    }\n    context.restore();\n    return null;\n  }\n\n  initCanvasCtx(context: IContext2d) {\n    context.setTransformForCurrent();\n  }\n}\n"]}

package/cjs/plugins/builtin-plugin/html-attribute-plugin.d.ts

@@ -0,0 +1,13 @@
+import type { IGraphic, IPlugin, IPluginService, IRenderService, IGroup } from '../../interface';
+export declare class HtmlAttributePlugin implements IPlugin {
+    name: 'HtmlAttributePlugin';
+    activeEvent: 'onRegister';
+    pluginService: IPluginService;
+    _uid: number;
+    key: string;
+    activate(context: IPluginService): void;
+    deactivate(context: IPluginService): void;
+    protected drawHTML(renderService: IRenderService): void;
+    renderGroupHTML(group: IGroup): void;
+    renderGraphicHTML(graphic: IGraphic): void;
+}