@visactor/vrender 0.15.0-alpha.1 → 0.15.0-alpha.3

package/es/interface/graphic.d.ts

@@ -50,6 +50,7 @@ export type ILayout = {
 };
 export type IBorderStyle = Omit<IStrokeStyle, 'outerBorder' | 'innerBorder'> & {
     distance: number | string;
+    visible?: boolean;
 };
 export type IStrokeType = boolean | string | IColor | null;
 export type IStrokeStyle = {
@@ -82,10 +83,18 @@ export type IConnectedStyle = {
     connectedX: number;
     connectedY: number;
 };
+export type IBackgroundConfig = {
+    stroke?: string | boolean;
+    fill?: string | boolean;
+    lineWidth?: number;
+    cornerRadius?: number;
+    expandX?: number;
+    expandY?: number;
+};
 export type IGraphicStyle = IFillStyle & IStrokeStyle & {
     opacity: number;
     backgroundMode: number;
-    background: string | HTMLImageElement | HTMLCanvasElement | null;
+    background: string | HTMLImageElement | HTMLCanvasElement | IBackgroundConfig | null;
     texture: TextureType | string;
     textureColor: string;
     textureSize: number;
@@ -197,6 +206,7 @@ export interface IGraphic<T extends Partial<IGraphicAttribute> = Partial<IGraphi
     skewTo: (b: number, c: number) => this;
     addUpdateBoundTag: () => void;
     addUpdateShapeAndBoundsTag: () => void;
+    addUpdateLayoutTag: () => void;
     update: (d?: {
         bounds: boolean;
         trans: boolean;
@@ -220,7 +230,7 @@ export interface IGraphic<T extends Partial<IGraphicAttribute> = Partial<IGraphi
     toJson: () => IGraphicJson;
     createPathProxy: (path?: string) => void;
     toCustomPath?: () => ICustomPath2D;
-    resources?: Map<string | HTMLImageElement | HTMLCanvasElement, {
+    resources?: Map<string | HTMLImageElement | HTMLCanvasElement | IBackgroundConfig, {
         state: 'init' | 'loading' | 'success' | 'fail';
         data?: HTMLImageElement | HTMLCanvasElement;
     }>;

package/es/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    // 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"]}
+{"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  visible?: boolean;\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 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 IGraphicStyle = IFillStyle &\n  IStrokeStyle & {\n    opacity: number;\n    backgroundMode: number; // 填充模式（与具体图元有关）\n    background: string | HTMLImageElement | HTMLCanvasElement | IBackgroundConfig | 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  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  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}\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/es/interface/stage.d.ts

@@ -9,7 +9,7 @@ import type { vec3 } from './matrix';
 import type { IDirectionLight } from './light';
 import type { ISyncHook } from './sync-hook';
 import type { IDrawContext, IRenderService } from './render';
-import type { ITicker } from './animate';
+import type { ITicker, ITimeline } from './animate';
 import type { IPickerService } from './picker';
 import type { IPluginService } from './plugin';
 import type { IWindow } from './window';
@@ -36,7 +36,11 @@ export interface IStageParams {
     renderStyle?: string;
     ticker?: ITicker;
     pluginList?: string[];
+    optimize?: IOptimizeType;
 }
+export type IOptimizeType = {
+    skipRenderWithOutRange?: boolean;
+};
 export interface IOption3D {
     enableView3dTransform?: boolean;
     alpha?: number;
@@ -95,6 +99,7 @@ export interface IStage extends INode {
     getLayer: (name: string) => ILayer;
     sortLayer: (cb: (layer1: ILayer, layer2: ILayer) => number) => void;
     removeLayer: (layerId: number) => ILayer | false;
+    getTimeline: () => ITimeline;
     render: (layers?: ILayer[], params?: Partial<IDrawContext>) => void;
     renderNextFrame: (layers?: ILayer[]) => void;
     tryInitInteractiveLayer: () => void;

package/es/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 { IAABBBounds, 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, viewBox?: IAABBBounds) => 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 { IAABBBounds, 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, ITimeline } 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  optimize?: IOptimizeType;\n}\n\nexport type IOptimizeType = {\n  // 视口不在可视区，跳过渲染，默认为true\n  skipRenderWithOutRange?: boolean;\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  getTimeline: () => ITimeline;\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, viewBox?: IAABBBounds) => 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/es/interface/window.d.ts

@@ -43,6 +43,8 @@ export interface IWindow extends Releaseable, Omit<IEventElement, 'on' | 'off' |
     getImageBuffer: (type?: string) => any;
     clearViewBox: (viewBox: IBoundsLike, color?: string) => void;
     getBoundingClientRect: () => IDomRectLike;
+    isVisible: (bbox?: IBoundsLike) => boolean;
+    onVisibleChange: (cb: (currentVisible: boolean) => void) => void;
 }
 export interface IWindowHandlerContribution extends IContribution<IWindow>, Omit<IEventElement, 'on' | 'off' | 'once' | 'emit' | 'removeAllListeners'> {
     container?: any;
@@ -69,4 +71,6 @@ export interface IWindowHandlerContribution extends IContribution<IWindow>, Omit
     setStyle: (s: CSSStyleDeclaration | Record<string, any>) => void;
     getBoundingClientRect: () => IDomRectLike;
     clearViewBox: (vb: IBoundsLike, color?: string) => void;
+    isVisible: (bbox?: IBoundsLike) => boolean;
+    onVisibleChange: (cb: (currentVisible: boolean) => void) => void;
 }

package/es/interface/window.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/interface/window.ts"],"names":[],"mappings":"","file":"window.js","sourcesContent":["// window为内部对象，属性均为stage传入\n\nimport type { IBoundsLike } from '@visactor/vutils';\nimport type { ICanvas } from './canvas';\nimport type { IContext2d } from './context';\nimport type { IDomRectLike, IEventElement, Releaseable } from './common';\nimport type { ISyncHook } from './sync-hook';\nimport type { IContribution } from './contribution';\nimport type { IGlobal } from './global';\n\n// TODO: 参数考虑动态注入，比如CreateWindow是native的专用接口\nexport interface IWindowParams {\n  canvas?: string | HTMLCanvasElement;\n  offscreen?: boolean;\n  width?: number;\n  height?: number;\n  x?: number;\n  y?: number;\n  dpr: number;\n  container?: string | HTMLElement;\n  canvasControled: boolean;\n  title: string;\n  CreateWindow?: (w: number, h: number, title: string) => void;\n}\n\nexport interface IWindow\n  extends Releaseable,\n    Omit<IEventElement, 'on' | 'off' | 'once' | 'emit' | 'removeAllListeners'> {\n  hooks: {\n    onChange: ISyncHook<[number, number, number, number]>;\n  };\n  // 窗口的大小\n  width: number;\n  height: number;\n  // // 窗口的位置\n  // x: number;\n  // y: number;\n  // 窗口操作配置\n  resizable: boolean;\n  minHeight: number;\n  minWidth: number;\n  maxHeight: number;\n  maxWidth: number;\n  // 窗口配置\n  title: string;\n  dpr: number;\n  style: CSSStyleDeclaration | Record<string, any>;\n\n  create: (options: IWindowParams) => void;\n  setWindowHandler: (handler: IWindowHandlerContribution) => void;\n  setDpr: (dpr: number) => void;\n  resize: (w: number, h: number) => void;\n  configure: () => void;\n\n  // 获取上下文和canvas，可以是2d也可以是GL\n  getContext: () => IContext2d;\n  getNativeHandler: () => ICanvas;\n  getContainer: () => HTMLElement | any;\n  getImageBuffer: (type?: string) => any;\n\n  clearViewBox: (viewBox: IBoundsLike, color?: string) => void;\n\n  getBoundingClientRect: () => IDomRectLike;\n}\n\nexport interface IWindowHandlerContribution\n  extends IContribution<IWindow>,\n    Omit<IEventElement, 'on' | 'off' | 'once' | 'emit' | 'removeAllListeners'> {\n  container?: any;\n\n  configure: (window: IWindow, global: IGlobal) => void;\n  createWindow: (params: IWindowParams) => void;\n  releaseWindow: () => void;\n  resizeWindow: (width: number, height: number) => void;\n  setDpr: (dpr: number) => void;\n  getDpr: () => number;\n  getWH: () => { width: number; height: number };\n  getXY: () => { x: number; y: number };\n  getTitle: () => string;\n\n  // 获取上下文和canvas，可以是2d也可以是GL\n  getContext: () => IContext2d;\n  getNativeHandler: () => ICanvas;\n  getImageBuffer?: (type?: string) => any;\n  release: (...params: any) => void;\n\n  getStyle: () => CSSStyleDeclaration | Record<string, any>;\n  setStyle: (s: CSSStyleDeclaration | Record<string, any>) => void;\n\n  getBoundingClientRect: () => IDomRectLike;\n  clearViewBox: (vb: IBoundsLike, color?: string) => void;\n}\n"]}
+{"version":3,"sources":["../../src/interface/window.ts"],"names":[],"mappings":"","file":"window.js","sourcesContent":["// window为内部对象，属性均为stage传入\n\nimport type { IBoundsLike } from '@visactor/vutils';\nimport type { ICanvas } from './canvas';\nimport type { IContext2d } from './context';\nimport type { IDomRectLike, IEventElement, Releaseable } from './common';\nimport type { ISyncHook } from './sync-hook';\nimport type { IContribution } from './contribution';\nimport type { IGlobal } from './global';\n\n// TODO: 参数考虑动态注入，比如CreateWindow是native的专用接口\nexport interface IWindowParams {\n  canvas?: string | HTMLCanvasElement;\n  offscreen?: boolean;\n  width?: number;\n  height?: number;\n  x?: number;\n  y?: number;\n  dpr: number;\n  container?: string | HTMLElement;\n  canvasControled: boolean;\n  title: string;\n  CreateWindow?: (w: number, h: number, title: string) => void;\n}\n\nexport interface IWindow\n  extends Releaseable,\n    Omit<IEventElement, 'on' | 'off' | 'once' | 'emit' | 'removeAllListeners'> {\n  hooks: {\n    onChange: ISyncHook<[number, number, number, number]>;\n  };\n  // 窗口的大小\n  width: number;\n  height: number;\n  // // 窗口的位置\n  // x: number;\n  // y: number;\n  // 窗口操作配置\n  resizable: boolean;\n  minHeight: number;\n  minWidth: number;\n  maxHeight: number;\n  maxWidth: number;\n  // 窗口配置\n  title: string;\n  dpr: number;\n  style: CSSStyleDeclaration | Record<string, any>;\n\n  create: (options: IWindowParams) => void;\n  setWindowHandler: (handler: IWindowHandlerContribution) => void;\n  setDpr: (dpr: number) => void;\n  resize: (w: number, h: number) => void;\n  configure: () => void;\n\n  // 获取上下文和canvas，可以是2d也可以是GL\n  getContext: () => IContext2d;\n  getNativeHandler: () => ICanvas;\n  getContainer: () => HTMLElement | any;\n  getImageBuffer: (type?: string) => any;\n\n  clearViewBox: (viewBox: IBoundsLike, color?: string) => void;\n\n  getBoundingClientRect: () => IDomRectLike;\n\n  isVisible: (bbox?: IBoundsLike) => boolean;\n\n  onVisibleChange: (cb: (currentVisible: boolean) => void) => void;\n}\n\nexport interface IWindowHandlerContribution\n  extends IContribution<IWindow>,\n    Omit<IEventElement, 'on' | 'off' | 'once' | 'emit' | 'removeAllListeners'> {\n  container?: any;\n\n  configure: (window: IWindow, global: IGlobal) => void;\n  createWindow: (params: IWindowParams) => void;\n  releaseWindow: () => void;\n  resizeWindow: (width: number, height: number) => void;\n  setDpr: (dpr: number) => void;\n  getDpr: () => number;\n  getWH: () => { width: number; height: number };\n  getXY: () => { x: number; y: number };\n  getTitle: () => string;\n\n  // 获取上下文和canvas，可以是2d也可以是GL\n  getContext: () => IContext2d;\n  getNativeHandler: () => ICanvas;\n  getImageBuffer?: (type?: string) => any;\n  release: (...params: any) => void;\n\n  getStyle: () => CSSStyleDeclaration | Record<string, any>;\n  setStyle: (s: CSSStyleDeclaration | Record<string, any>) => void;\n\n  getBoundingClientRect: () => IDomRectLike;\n  clearViewBox: (vb: IBoundsLike, color?: string) => void;\n  isVisible: (bbox?: IBoundsLike) => boolean;\n\n  onVisibleChange: (cb: (currentVisible: boolean) => void) => void;\n}\n"]}

package/es/jsx/graphicType.d.ts

@@ -48,10 +48,10 @@ export declare const REACT_TO_CANOPUS_EVENTS: {
     onDblClick: string;
 };
 export declare const REACT_TO_CANOPUS_EVENTS_LIST: string[];
-type IEventParamsType = {
+export type IEventParamsType = {
     [t in keyof typeof REACT_TO_CANOPUS_EVENTS]?: (d: any) => void;
 };
-type IDefaultGraphicParamsType<T> = {
+export type IDefaultGraphicParamsType<T> = {
     attribute?: T;
 } & IEventParamsType;
 export declare function VArc(params: IDefaultGraphicParamsType<IArcGraphicAttribute>): import("../interface").IArc;
@@ -133,4 +133,3 @@ export declare namespace VRichText {
         type: string;
     };
 }
-export {};

package/es/jsx/graphicType.js.map

@@ -1 +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  createRichText,\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  IRichTextCharacter,\n  IRichTextGraphicAttribute,\n  IRichTextImageCharacter,\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}\nexport function VRichText(params: IDefaultGraphicParamsType<IRichTextGraphicAttribute>) {\n  return createRichText(params ? params.attribute : {});\n}\n\nVRichText.Text = function (params: IRichTextCharacter) {\n  return {\n    type: 'rich/text',\n    ...params\n  };\n};\n\nVRichText.Image = function (params: IRichTextImageCharacter) {\n  return {\n    type: 'rich/image',\n    ...params\n  };\n};\n"]}
+{"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  createRichText,\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  IRichTextCharacter,\n  IRichTextGraphicAttribute,\n  IRichTextImageCharacter,\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\nexport type IEventParamsType = {\n  [t in keyof typeof REACT_TO_CANOPUS_EVENTS]?: (d: any) => void;\n};\n\nexport type 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}\nexport function VRichText(params: IDefaultGraphicParamsType<IRichTextGraphicAttribute>) {\n  return createRichText(params ? params.attribute : {});\n}\n\nVRichText.Text = function (params: IRichTextCharacter) {\n  return {\n    type: 'rich/text',\n    ...params\n  };\n};\n\nVRichText.Image = function (params: IRichTextImageCharacter) {\n  return {\n    type: 'rich/image',\n    ...params\n  };\n};\n"]}

package/es/jsx/jsx-classic.js

@@ -20,14 +20,15 @@ function flatten(list, out) {
 }
 
 export function jsx(type, config, ...children) {
-    const _a = config || {}, {key: key, attribute: attribute} = _a, props = __rest(_a, [ "key", "attribute" ]);
+    const _a = config || {}, {key: key, attribute: attribute, stateProxy: stateProxy} = _a, props = __rest(_a, [ "key", "attribute", "stateProxy" ]);
     let c = type;
     isString(type) && (c = graphicCreator[type]);
     const childrenList = [];
     children.length && flatten(1 === children.length ? children[0] : children, childrenList), 
     c.type;
     const g = c.prototype.type ? new c(attribute) : c(config);
-    return parseToGraphic(g, childrenList, props), g;
+    return parseToGraphic(g, childrenList, props), stateProxy && (g.stateProxy = stateProxy), 
+    g;
 }
 
 function parseToGraphic(g, childrenList, props) {
@@ -45,7 +46,7 @@ function parseToGraphic(g, childrenList, props) {
         isGraphic = !0;
     }
     isGraphic ? (childrenList.forEach((c => {
-        g.add(c);
+        c && g.add(c);
     })), Object.keys(props).forEach((k => {
         const en = REACT_TO_CANOPUS_EVENTS[k];
         en && g.on(en, props[k]);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/jsx/jsx-classic.ts"],"names":[],"mappings":"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","file":"jsx-classic.js","sourcesContent":["import { isArray, isString } from '@visactor/vutils';\nimport { graphicCreator } from '../graphic';\nimport { REACT_TO_CANOPUS_EVENTS } from './graphicType';\n\nfunction flatten(list: any, out: any[]): void {\n  if (isArray(list)) {\n    return list.forEach(i => flatten(i, out));\n  }\n  out.push(list);\n}\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  const childrenList: any[] = [];\n  if (children.length) {\n    flatten(children.length === 1 ? children[0] : children, childrenList);\n  }\n\n  if (c.type === 'richtext') {\n  }\n  const g = c.prototype.type ? new c(attribute) : c(config);\n  parseToGraphic(g, childrenList, props);\n\n  return g;\n}\n\nfunction parseToGraphic(g: any, childrenList: any[], props: any) {\n  let isGraphic: boolean = false;\n  let out: any;\n  switch (g.type) {\n    case 'richtext':\n      break;\n    case 'rich/text':\n      out = g.attribute || {};\n      childrenList[0] && (out.text = childrenList[0]);\n      break;\n    case 'rich/image':\n      break;\n    default:\n      isGraphic = true;\n  }\n\n  if (isGraphic) {\n    childrenList.forEach((c: any) => {\n      g.add(c);\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  } else {\n    if (g.type === 'richtext') {\n      g.attribute.textConfig = childrenList.map(item => item.attribute).filter(item => item);\n    }\n  }\n}\n\nexport class Fragment {\n  children: any[] = [];\n  add(g: any) {\n    this.children.push(g);\n  }\n}\n"]}
+{"version":3,"sources":["../../src/jsx/jsx-classic.ts"],"names":[],"mappings":"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","file":"jsx-classic.js","sourcesContent":["import { isArray, isString } from '@visactor/vutils';\nimport { graphicCreator } from '../graphic';\nimport { REACT_TO_CANOPUS_EVENTS } from './graphicType';\n\nfunction flatten(list: any, out: any[]): void {\n  if (isArray(list)) {\n    return list.forEach(i => flatten(i, out));\n  }\n  out.push(list);\n}\n\nexport function jsx(type: string | any, config: Record<string, any>, ...children: any) {\n  const { key, attribute, stateProxy, ...props } = config || {};\n\n  let c = type;\n  if (isString(type)) {\n    c = graphicCreator[type];\n  }\n\n  const childrenList: any[] = [];\n  if (children.length) {\n    flatten(children.length === 1 ? children[0] : children, childrenList);\n  }\n\n  if (c.type === 'richtext') {\n  }\n  const g = c.prototype.type ? new c(attribute) : c(config);\n  parseToGraphic(g, childrenList, props);\n\n  if (stateProxy) {\n    g.stateProxy = stateProxy;\n  }\n\n  return g;\n}\n\nfunction parseToGraphic(g: any, childrenList: any[], props: any) {\n  let isGraphic: boolean = false;\n  let out: any;\n  switch (g.type) {\n    case 'richtext':\n      break;\n    case 'rich/text':\n      out = g.attribute || {};\n      childrenList[0] && (out.text = childrenList[0]);\n      break;\n    case 'rich/image':\n      break;\n    default:\n      isGraphic = true;\n  }\n\n  if (isGraphic) {\n    childrenList.forEach((c: any) => {\n      c && g.add(c);\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  } else {\n    if (g.type === 'richtext') {\n      g.attribute.textConfig = childrenList.map(item => item.attribute).filter(item => item);\n    }\n  }\n}\n\nexport class Fragment {\n  children: any[] = [];\n  add(g: any) {\n    this.children.push(g);\n  }\n}\n"]}

package/es/plugins/builtin-plugin/flex-layout-plugin.d.ts

@@ -1,11 +1,13 @@
 import type { IGraphic, IGroup, IGroupAttribute } from '../../interface';
 import type { IPlugin, IPluginService } from '../../interface';
+import { AABBBounds } from '@visactor/vutils';
 export declare class FlexLayoutPlugin implements IPlugin {
     name: 'FlexLayoutPlugin';
     activeEvent: 'onRegister';
     pluginService: IPluginService;
     id: number;
     key: string;
+    tempBounds: AABBBounds;
     tryLayout(graphic: IGraphic): void;
     layoutMain(p: IGroup, children: IGraphic[], justifyContent: IGroupAttribute['justifyContent'], main: {
         len: number;

package/es/plugins/builtin-plugin/flex-layout-plugin.js

@@ -4,18 +4,34 @@ import { graphicService } from "../../modules";
 
 import { Generator } from "../../common/generator";
 
+import { isNumber } from "../../canvas/util";
+
+import { parsePadding } from "../../common/utils";
+
+import { AABBBounds, isArray } from "@visactor/vutils";
+
 export class FlexLayoutPlugin {
     constructor() {
         this.name = "FlexLayoutPlugin", this.activeEvent = "onRegister", this.id = Generator.GenAutoIncrementId(), 
-        this.key = this.name + this.id;
+        this.key = this.name + this.id, this.tempBounds = new AABBBounds;
     }
     tryLayout(graphic) {
         const p = graphic.parent;
-        if (!p) return;
+        if (!p || !graphic.needUpdateLayout()) return;
         const theme = getTheme(p).group, {display: display = theme.display} = p.attribute;
         if ("flex" !== display) return;
-        const {width: width, height: height, flexDirection: flexDirection = theme.flexDirection, flexWrap: flexWrap = theme.flexWrap, justifyContent: justifyContent = theme.justifyContent, alignItems: alignItems = theme.alignItems, alignContent: alignContent = theme.alignContent} = p.attribute;
-        if (!width || !height) return;
+        const {flexDirection: flexDirection = theme.flexDirection, flexWrap: flexWrap = theme.flexWrap, justifyContent: justifyContent = theme.justifyContent, alignItems: alignItems = theme.alignItems, alignContent: alignContent = theme.alignContent, clip: clip = theme.clip} = p.attribute;
+        let childrenWidth = 0, childrenHeight = 0, boundsLegal = 0;
+        if (p.forEachChildren((child => {
+            const bounds = child.AABBBounds;
+            "column" === flexDirection || "column-reverse" === flexDirection ? (childrenHeight += bounds.height(), 
+            childrenWidth = Math.max(childrenWidth, bounds.width())) : (childrenWidth += bounds.width(), 
+            childrenHeight = Math.max(childrenHeight, bounds.height())), boundsLegal += bounds.x1, 
+            boundsLegal += bounds.y1, boundsLegal += bounds.x2, boundsLegal += bounds.y2;
+        })), !isFinite(boundsLegal)) return;
+        const width = p.attribute.width || childrenWidth, height = p.attribute.height || childrenHeight;
+        p.attribute.width || (p.attribute.width = 0), p.attribute.height || (p.attribute.height = 0), 
+        this.tempBounds.copy(p._AABBBounds);
         const result = {
             main: {
                 len: width,
@@ -66,15 +82,15 @@ export class FlexLayoutPlugin {
         let lastIdx = 0;
         if (mainList.forEach((s => {
             this.layoutMain(p, children, justifyContent, main, mianLenArray, lastIdx, s), lastIdx = s.idx + 1;
-        })), crossLen = mainList.reduce(((a, b) => a + b.crossLen), 0), 1 === mainList.length) {
-            if ("flex-end" === alignItems) {
-                const anchorPos = cross.len;
-                this.layoutCross(children, alignItems, cross, anchorPos, mianLenArray, mainList[0], 0);
-            } else if ("center" === alignItems) {
-                const anchorPos = cross.len / 2;
-                this.layoutCross(children, alignItems, cross, anchorPos, mianLenArray, mainList[0], 0);
-            }
-        } else if ("flex-start" === alignContent) {
+        })), crossLen = mainList.reduce(((a, b) => a + b.crossLen), 0), 1 === mainList.length) if ("flex-end" === alignItems) {
+            const anchorPos = cross.len;
+            this.layoutCross(children, alignItems, cross, anchorPos, mianLenArray, mainList[0], 0);
+        } else if ("center" === alignItems) {
+            const anchorPos = cross.len / 2;
+            this.layoutCross(children, alignItems, cross, anchorPos, mianLenArray, mainList[0], 0);
+        } else children.forEach((child => {
+            child.attribute[cross.field] = getPadding(child, cross.field);
+        })); else if ("flex-start" === alignContent) {
             lastIdx = 0;
             let anchorPos = 0;
             mainList.forEach(((s, i) => {
@@ -105,37 +121,40 @@ export class FlexLayoutPlugin {
                 lastIdx = s.idx + 1, anchorPos += s.crossLen + 2 * padding;
             }));
         }
+        children.forEach(((child, idx) => {
+            child.addUpdateBoundTag(), child.addUpdatePositionTag(), child.clearUpdateLayoutTag();
+        })), p.addUpdateLayoutTag(), clip || this.tempBounds.equals(p.AABBBounds) || this.tryLayout(p);
     }
     layoutMain(p, children, justifyContent, main, mianLenArray, lastIdx, currSeg) {
         if ("flex-start" === justifyContent) {
             let pos = 0;
-            for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos, 
+            for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos + getPadding(children[i], main.field), 
             pos += mianLenArray[i].mainLen;
         } else if ("flex-end" === justifyContent) {
             let pos = main.len;
-            for (let i = lastIdx; i <= currSeg.idx; i++) pos -= mianLenArray[i].mainLen, children[i].attribute[main.field] = pos;
+            for (let i = lastIdx; i <= currSeg.idx; i++) pos -= mianLenArray[i].mainLen, children[i].attribute[main.field] = pos + getPadding(children[i], main.field);
         } else if ("space-around" === justifyContent) if (currSeg.mainLen >= main.len) {
             let pos = 0;
-            for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos, 
+            for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos + getPadding(children[i], main.field), 
             pos += mianLenArray[i].mainLen;
         } else {
             const size = currSeg.idx - lastIdx + 1, padding = (main.len - currSeg.mainLen) / size / 2;
             let pos = padding;
-            for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos, 
+            for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos + getPadding(children[i], main.field), 
             pos += mianLenArray[i].mainLen + 2 * padding;
         } else if ("space-between" === justifyContent) if (currSeg.mainLen >= main.len) {
             let pos = 0;
-            for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos, 
+            for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos + getPadding(children[i], main.field), 
             pos += mianLenArray[i].mainLen;
         } else {
             const size = currSeg.idx - lastIdx + 1, padding = (main.len - currSeg.mainLen) / (2 * size - 2);
             let pos = 0;
-            for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos, 
+            for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos + getPadding(children[i], main.field), 
             pos += mianLenArray[i].mainLen + 2 * padding;
         }
     }
     layoutCross(children, alignItem, cross, anchorPos, lenArray, currSeg, lastIdx) {
-        if ("flex-end" === alignItem) for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[cross.field] = anchorPos - lenArray[i].crossLen; else if ("center" === alignItem) for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[cross.field] = anchorPos - lenArray[i].crossLen / 2; else for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[cross.field] = anchorPos;
+        if ("flex-end" === alignItem) for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[cross.field] = anchorPos - lenArray[i].crossLen + getPadding(children[i], cross.field); else if ("center" === alignItem) for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[cross.field] = anchorPos - lenArray[i].crossLen / 2 + getPadding(children[i], cross.field); else for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[cross.field] = anchorPos + getPadding(children[i], cross.field);
     }
     activate(context) {
         this.pluginService = context, graphicService.hooks.onAttributeUpdate.tap(this.key, (graphic => {
@@ -149,4 +168,12 @@ export class FlexLayoutPlugin {
         graphicService.hooks.onSetStage.taps = graphicService.hooks.onSetStage.taps.filter((item => item.name !== this.key));
     }
 }
+
+function getPadding(graphic, field) {
+    if (!graphic.attribute.boundsPadding) return 0;
+    if (isNumber(graphic.attribute.boundsPadding)) return graphic.attribute.boundsPadding;
+    if (isArray(graphic.attribute.boundsPadding) && 1 === graphic.attribute.boundsPadding.length) return graphic.attribute.boundsPadding[0];
+    const paddingArray = parsePadding(graphic.attribute.boundsPadding);
+    return "x" === field ? paddingArray[3] : "y" === field ? paddingArray[0] : 0;
+}
 //# sourceMappingURL=flex-layout-plugin.js.map

package/es/plugins/builtin-plugin/flex-layout-plugin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/plugins/builtin-plugin/flex-layout-plugin.ts"],"names":[],"mappings":"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","file":"flex-layout-plugin.js","sourcesContent":["import type { IGraphic, IGroup, IGroupAttribute } from '../../interface';\nimport { getTheme } from '../../graphic';\nimport { graphicService } from '../../modules';\nimport type { IPlugin, IPluginService } from '../../interface';\nimport { Generator } from '../../common/generator';\n\nexport class FlexLayoutPlugin implements IPlugin {\n  name: 'FlexLayoutPlugin' = 'FlexLayoutPlugin';\n  activeEvent: 'onRegister' = 'onRegister';\n  pluginService: IPluginService;\n  id: number = Generator.GenAutoIncrementId();\n  key: string = this.name + this.id;\n\n  tryLayout(graphic: IGraphic) {\n    const p = graphic.parent;\n    if (!p) {\n      return;\n    }\n    const theme = getTheme(p).group;\n    const { display = theme.display } = p.attribute;\n    if (display !== 'flex') {\n      return;\n    }\n    const {\n      width,\n      height,\n      flexDirection = theme.flexDirection,\n      flexWrap = theme.flexWrap,\n      justifyContent = theme.justifyContent,\n      alignItems = theme.alignItems,\n      alignContent = theme.alignContent\n    } = p.attribute;\n    if (!(width && height)) {\n      return;\n    }\n\n    const result = {\n      main: { len: width, field: 'x' },\n      cross: { len: height, field: 'y' },\n      dir: 1\n    };\n    const main = result.main;\n    const cross = result.cross;\n    if (flexDirection === 'row-reverse') {\n      result.dir = -1;\n    } else if (flexDirection === 'column') {\n      main.len = height;\n      cross.len = width;\n      main.field = 'y';\n      cross.field = 'x';\n    } else if (flexDirection === 'column-reverse') {\n      main.len = height;\n      cross.len = width;\n      main.field = 'y';\n      cross.field = 'x';\n      result.dir = -1;\n    }\n\n    // 计算宽度\n    let mainLen = 0;\n    let crossLen = 0;\n    const mianLenArray: { mainLen: number; crossLen: number }[] = [];\n    p.forEachChildren((c: IGraphic) => {\n      const b = c.AABBBounds;\n      const ml = main.field === 'x' ? b.width() : b.height();\n      const cl = cross.field === 'x' ? b.width() : b.height();\n      mianLenArray.push({ mainLen: ml, crossLen: cl });\n      mainLen += ml;\n      crossLen = Math.max(crossLen, cl);\n    });\n    // 解析main\n    const mainList: { idx: number; mainLen: number; crossLen: number }[] = [];\n    if (mainLen > main.len && flexWrap === 'wrap') {\n      let tempMainL = 0;\n      let tempCrossL = 0;\n      mianLenArray.forEach(({ mainLen, crossLen }, i) => {\n        if (tempMainL + mainLen > main.len) {\n          if (tempMainL === 0) {\n            mainList.push({ idx: i, mainLen: tempMainL + mainLen, crossLen });\n            tempMainL = 0;\n            tempCrossL = 0;\n          } else {\n            mainList.push({ idx: i - 1, mainLen: tempMainL, crossLen });\n            tempMainL = mainLen;\n            tempCrossL = crossLen;\n          }\n        } else {\n          tempMainL += mainLen;\n          tempCrossL = Math.max(tempCrossL, crossLen);\n        }\n      });\n      mainList.push({ idx: mianLenArray.length - 1, mainLen: tempMainL, crossLen: tempCrossL });\n    } else {\n      mainList.push({ idx: mianLenArray.length - 1, mainLen: mainLen, crossLen });\n    }\n\n    const children = p.getChildren() as IGraphic[];\n\n    // 布局main\n    let lastIdx: number = 0;\n    mainList.forEach(s => {\n      this.layoutMain(p, children, justifyContent, main, mianLenArray, lastIdx, s);\n      lastIdx = s.idx + 1;\n    });\n\n    crossLen = mainList.reduce((a, b) => a + b.crossLen, 0);\n\n    // 布局cross\n    if (mainList.length === 1) {\n      if (alignItems === 'flex-end') {\n        const anchorPos = cross.len;\n        this.layoutCross(children, alignItems, cross, anchorPos, mianLenArray, mainList[0], 0);\n      } else if (alignItems === 'center') {\n        const anchorPos = cross.len / 2;\n        this.layoutCross(children, alignItems, cross, anchorPos, mianLenArray, mainList[0], 0);\n      }\n    } else {\n      if (alignContent === 'flex-start') {\n        lastIdx = 0;\n        let anchorPos = 0;\n        mainList.forEach((s, i) => {\n          this.layoutCross(children, 'flex-start', cross, anchorPos, mianLenArray, mainList[i], lastIdx);\n          lastIdx = s.idx + 1;\n          anchorPos += s.crossLen;\n        });\n      } else if (alignContent === 'center') {\n        lastIdx = 0;\n        const padding = Math.max(0, (cross.len - crossLen) / 2);\n        let anchorPos = padding;\n        mainList.forEach((s, i) => {\n          this.layoutCross(children, 'center', cross, anchorPos + s.crossLen / 2, mianLenArray, mainList[i], lastIdx);\n          lastIdx = s.idx + 1;\n          anchorPos += s.crossLen;\n        });\n      } else if (alignContent === 'space-around') {\n        lastIdx = 0;\n        const padding = Math.max(0, (cross.len - crossLen) / mainList.length / 2);\n        let anchorPos = padding;\n        mainList.forEach((s, i) => {\n          this.layoutCross(children, 'flex-start', cross, anchorPos, mianLenArray, mainList[i], lastIdx);\n          lastIdx = s.idx + 1;\n          anchorPos += s.crossLen + padding * 2;\n        });\n      } else if (alignContent === 'space-between') {\n        lastIdx = 0;\n        const padding = Math.max(0, (cross.len - crossLen) / (mainList.length * 2 - 2));\n        let anchorPos = 0;\n        mainList.forEach((s, i) => {\n          this.layoutCross(children, 'flex-start', cross, anchorPos, mianLenArray, mainList[i], lastIdx);\n          lastIdx = s.idx + 1;\n          anchorPos += s.crossLen + padding * 2;\n        });\n      }\n    }\n  }\n\n  layoutMain(\n    p: IGroup,\n    children: IGraphic[],\n    justifyContent: IGroupAttribute['justifyContent'],\n    main: { len: number; field: string },\n    mianLenArray: { mainLen: number; crossLen: number }[],\n    lastIdx: number,\n    currSeg: { idx: number; mainLen: number; crossLen: number }\n  ) {\n    if (justifyContent === 'flex-start') {\n      let pos = 0;\n      for (let i = lastIdx; i <= currSeg.idx; i++) {\n        children[i].attribute[main.field] = pos;\n        pos += mianLenArray[i].mainLen;\n      }\n    } else if (justifyContent === 'flex-end') {\n      let pos = main.len;\n      for (let i = lastIdx; i <= currSeg.idx; i++) {\n        pos -= mianLenArray[i].mainLen;\n        children[i].attribute[main.field] = pos;\n      }\n    } else if (justifyContent === 'space-around') {\n      if (currSeg.mainLen >= main.len) {\n        let pos = 0;\n        for (let i = lastIdx; i <= currSeg.idx; i++) {\n          children[i].attribute[main.field] = pos;\n          pos += mianLenArray[i].mainLen;\n        }\n      } else {\n        const size = currSeg.idx - lastIdx + 1;\n        const padding = (main.len - currSeg.mainLen) / size / 2;\n        let pos = padding;\n        for (let i = lastIdx; i <= currSeg.idx; i++) {\n          children[i].attribute[main.field] = pos;\n          pos += mianLenArray[i].mainLen + padding * 2;\n        }\n      }\n    } else if (justifyContent === 'space-between') {\n      if (currSeg.mainLen >= main.len) {\n        let pos = 0;\n        for (let i = lastIdx; i <= currSeg.idx; i++) {\n          children[i].attribute[main.field] = pos;\n          pos += mianLenArray[i].mainLen;\n        }\n      } else {\n        const size = currSeg.idx - lastIdx + 1;\n        const padding = (main.len - currSeg.mainLen) / (size * 2 - 2);\n        let pos = 0;\n        for (let i = lastIdx; i <= currSeg.idx; i++) {\n          children[i].attribute[main.field] = pos;\n          pos += mianLenArray[i].mainLen + padding * 2;\n        }\n      }\n    }\n  }\n\n  layoutCross(\n    children: IGraphic[],\n    alignItem: IGroupAttribute['alignItems'],\n    cross: { len: number; field: string },\n    anchorPos: number,\n    lenArray: { mainLen: number; crossLen: number }[],\n    currSeg: { idx: number; mainLen: number; crossLen: number },\n    lastIdx: number\n  ) {\n    if (alignItem === 'flex-end') {\n      for (let i = lastIdx; i <= currSeg.idx; i++) {\n        children[i].attribute[cross.field] = anchorPos - lenArray[i].crossLen;\n      }\n    } else if (alignItem === 'center') {\n      for (let i = lastIdx; i <= currSeg.idx; i++) {\n        children[i].attribute[cross.field] = anchorPos - lenArray[i].crossLen / 2;\n      }\n    } else {\n      for (let i = lastIdx; i <= currSeg.idx; i++) {\n        children[i].attribute[cross.field] = anchorPos;\n      }\n    }\n  }\n\n  activate(context: IPluginService): void {\n    this.pluginService = context;\n    graphicService.hooks.onAttributeUpdate.tap(this.key, graphic => {\n      if (graphic.glyphHost) {\n        graphic = graphic.glyphHost;\n      }\n      this.tryLayout(graphic);\n    });\n    graphicService.hooks.onSetStage.tap(this.key, graphic => {\n      if (graphic.glyphHost) {\n        graphic = graphic.glyphHost;\n      }\n      this.tryLayout(graphic);\n    });\n  }\n  deactivate(context: IPluginService): void {\n    graphicService.hooks.onAttributeUpdate.taps = graphicService.hooks.onAttributeUpdate.taps.filter(item => {\n      return item.name !== this.key;\n    });\n    graphicService.hooks.onSetStage.taps = graphicService.hooks.onSetStage.taps.filter(item => {\n      return item.name !== this.key;\n    });\n  }\n}\n"]}
+{"version":3,"sources":["../../src/plugins/builtin-plugin/flex-layout-plugin.ts"],"names":[],"mappings":"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","file":"flex-layout-plugin.js","sourcesContent":["import type { IGraphic, IGroup, IGroupAttribute, IStage } from '../../interface';\nimport { getTheme } from '../../graphic';\nimport { graphicService } from '../../modules';\nimport type { IPlugin, IPluginService } from '../../interface';\nimport { Generator } from '../../common/generator';\nimport { isNumber } from '../../canvas/util';\nimport { parsePadding } from '../../common/utils';\nimport { AABBBounds, isArray } from '@visactor/vutils';\n\nexport class FlexLayoutPlugin implements IPlugin {\n  name: 'FlexLayoutPlugin' = 'FlexLayoutPlugin';\n  activeEvent: 'onRegister' = 'onRegister';\n  pluginService: IPluginService;\n  id: number = Generator.GenAutoIncrementId();\n  key: string = this.name + this.id;\n  tempBounds: AABBBounds = new AABBBounds();\n\n  tryLayout(graphic: IGraphic) {\n    const p = graphic.parent;\n    if (!p || !graphic.needUpdateLayout()) {\n      return;\n    }\n    const theme = getTheme(p).group;\n    const { display = theme.display } = p.attribute;\n    if (display !== 'flex') {\n      return;\n    }\n    const {\n      // width,\n      // height,\n      flexDirection = theme.flexDirection,\n      flexWrap = theme.flexWrap,\n      justifyContent = theme.justifyContent,\n      alignItems = theme.alignItems,\n      alignContent = theme.alignContent,\n      clip = theme.clip\n    } = p.attribute;\n    // if (!(width && height)) {\n    //   return;\n    // }\n\n    let childrenWidth = 0;\n    let childrenHeight = 0;\n    let boundsLegal = 0;\n    p.forEachChildren((child: IGraphic) => {\n      const bounds = child.AABBBounds;\n      if (flexDirection === 'column' || flexDirection === 'column-reverse') {\n        childrenHeight += bounds.height();\n        childrenWidth = Math.max(childrenWidth, bounds.width());\n      } else {\n        childrenWidth += bounds.width();\n        childrenHeight = Math.max(childrenHeight, bounds.height());\n      }\n      boundsLegal += bounds.x1;\n      boundsLegal += bounds.y1;\n      boundsLegal += bounds.x2;\n      boundsLegal += bounds.y2;\n    });\n    // judgement children bounds legal\n    if (!isFinite(boundsLegal)) {\n      return;\n    }\n    const width = p.attribute.width || childrenWidth;\n    const height = p.attribute.height || childrenHeight;\n    if (!p.attribute.width) {\n      p.attribute.width = 0;\n    }\n    if (!p.attribute.height) {\n      p.attribute.height = 0;\n    }\n\n    // 这里使用p._AABBBounds可能会将非布局造成的bounds更新也会触发重新布局\n    // TODO: 增加layout前预处理，在非递归布局前将子节点及其全部父节点_AABBBounds更新\n    this.tempBounds.copy(p._AABBBounds);\n    const result = {\n      main: { len: width, field: 'x' },\n      cross: { len: height, field: 'y' },\n      dir: 1\n    };\n    const main = result.main;\n    const cross = result.cross;\n    if (flexDirection === 'row-reverse') {\n      result.dir = -1;\n    } else if (flexDirection === 'column') {\n      main.len = height;\n      cross.len = width;\n      main.field = 'y';\n      cross.field = 'x';\n    } else if (flexDirection === 'column-reverse') {\n      main.len = height;\n      cross.len = width;\n      main.field = 'y';\n      cross.field = 'x';\n      result.dir = -1;\n    }\n\n    // 计算宽度\n    let mainLen = 0;\n    let crossLen = 0;\n    const mianLenArray: { mainLen: number; crossLen: number }[] = [];\n    p.forEachChildren((c: IGraphic) => {\n      const b = c.AABBBounds;\n      const ml = main.field === 'x' ? b.width() : b.height();\n      const cl = cross.field === 'x' ? b.width() : b.height();\n      mianLenArray.push({ mainLen: ml, crossLen: cl });\n      mainLen += ml;\n      crossLen = Math.max(crossLen, cl);\n    });\n    // 解析main\n    const mainList: { idx: number; mainLen: number; crossLen: number }[] = [];\n    if (mainLen > main.len && flexWrap === 'wrap') {\n      let tempMainL = 0;\n      let tempCrossL = 0;\n      mianLenArray.forEach(({ mainLen, crossLen }, i) => {\n        if (tempMainL + mainLen > main.len) {\n          if (tempMainL === 0) {\n            mainList.push({ idx: i, mainLen: tempMainL + mainLen, crossLen });\n            tempMainL = 0;\n            tempCrossL = 0;\n          } else {\n            mainList.push({ idx: i - 1, mainLen: tempMainL, crossLen });\n            tempMainL = mainLen;\n            tempCrossL = crossLen;\n          }\n        } else {\n          tempMainL += mainLen;\n          tempCrossL = Math.max(tempCrossL, crossLen);\n        }\n      });\n      mainList.push({ idx: mianLenArray.length - 1, mainLen: tempMainL, crossLen: tempCrossL });\n    } else {\n      mainList.push({ idx: mianLenArray.length - 1, mainLen: mainLen, crossLen });\n    }\n\n    const children = p.getChildren() as IGraphic[];\n\n    // 布局main\n    let lastIdx: number = 0;\n    mainList.forEach(s => {\n      this.layoutMain(p, children, justifyContent, main, mianLenArray, lastIdx, s);\n      lastIdx = s.idx + 1;\n    });\n\n    crossLen = mainList.reduce((a, b) => a + b.crossLen, 0);\n\n    // 布局cross\n    if (mainList.length === 1) {\n      if (alignItems === 'flex-end') {\n        const anchorPos = cross.len;\n        this.layoutCross(children, alignItems, cross, anchorPos, mianLenArray, mainList[0], 0);\n      } else if (alignItems === 'center') {\n        const anchorPos = cross.len / 2;\n        this.layoutCross(children, alignItems, cross, anchorPos, mianLenArray, mainList[0], 0);\n      } else {\n        children.forEach(child => {\n          child.attribute[cross.field] = getPadding(child, cross.field);\n        });\n      }\n    } else {\n      if (alignContent === 'flex-start') {\n        lastIdx = 0;\n        let anchorPos = 0;\n        mainList.forEach((s, i) => {\n          this.layoutCross(children, 'flex-start', cross, anchorPos, mianLenArray, mainList[i], lastIdx);\n          lastIdx = s.idx + 1;\n          anchorPos += s.crossLen;\n        });\n      } else if (alignContent === 'center') {\n        lastIdx = 0;\n        const padding = Math.max(0, (cross.len - crossLen) / 2);\n        let anchorPos = padding;\n        mainList.forEach((s, i) => {\n          this.layoutCross(children, 'center', cross, anchorPos + s.crossLen / 2, mianLenArray, mainList[i], lastIdx);\n          lastIdx = s.idx + 1;\n          anchorPos += s.crossLen;\n        });\n      } else if (alignContent === 'space-around') {\n        lastIdx = 0;\n        const padding = Math.max(0, (cross.len - crossLen) / mainList.length / 2);\n        let anchorPos = padding;\n        mainList.forEach((s, i) => {\n          this.layoutCross(children, 'flex-start', cross, anchorPos, mianLenArray, mainList[i], lastIdx);\n          lastIdx = s.idx + 1;\n          anchorPos += s.crossLen + padding * 2;\n        });\n      } else if (alignContent === 'space-between') {\n        lastIdx = 0;\n        const padding = Math.max(0, (cross.len - crossLen) / (mainList.length * 2 - 2));\n        let anchorPos = 0;\n        mainList.forEach((s, i) => {\n          this.layoutCross(children, 'flex-start', cross, anchorPos, mianLenArray, mainList[i], lastIdx);\n          lastIdx = s.idx + 1;\n          anchorPos += s.crossLen + padding * 2;\n        });\n      }\n    }\n\n    // update children\n    children.forEach((child, idx) => {\n      child.addUpdateBoundTag();\n      child.addUpdatePositionTag();\n      child.clearUpdateLayoutTag();\n    });\n\n    p.addUpdateLayoutTag();\n    // 更新父级元素的layout，直到存在clip\n    if (!clip && !this.tempBounds.equals(p.AABBBounds)) {\n      // 判断父元素包围盒是否发生变化\n      this.tryLayout(p);\n    }\n  }\n\n  layoutMain(\n    p: IGroup,\n    children: IGraphic[],\n    justifyContent: IGroupAttribute['justifyContent'],\n    main: { len: number; field: string },\n    mianLenArray: { mainLen: number; crossLen: number }[],\n    lastIdx: number,\n    currSeg: { idx: number; mainLen: number; crossLen: number }\n  ) {\n    if (justifyContent === 'flex-start') {\n      let pos = 0;\n      for (let i = lastIdx; i <= currSeg.idx; i++) {\n        children[i].attribute[main.field] = pos + getPadding(children[i], main.field);\n        pos += mianLenArray[i].mainLen;\n      }\n    } else if (justifyContent === 'flex-end') {\n      let pos = main.len;\n      for (let i = lastIdx; i <= currSeg.idx; i++) {\n        pos -= mianLenArray[i].mainLen;\n        children[i].attribute[main.field] = pos + getPadding(children[i], main.field);\n      }\n    } else if (justifyContent === 'space-around') {\n      if (currSeg.mainLen >= main.len) {\n        let pos = 0;\n        for (let i = lastIdx; i <= currSeg.idx; i++) {\n          children[i].attribute[main.field] = pos + getPadding(children[i], main.field);\n          pos += mianLenArray[i].mainLen;\n        }\n      } else {\n        const size = currSeg.idx - lastIdx + 1;\n        const padding = (main.len - currSeg.mainLen) / size / 2;\n        let pos = padding;\n        for (let i = lastIdx; i <= currSeg.idx; i++) {\n          children[i].attribute[main.field] = pos + getPadding(children[i], main.field);\n          pos += mianLenArray[i].mainLen + padding * 2;\n        }\n      }\n    } else if (justifyContent === 'space-between') {\n      if (currSeg.mainLen >= main.len) {\n        let pos = 0;\n        for (let i = lastIdx; i <= currSeg.idx; i++) {\n          children[i].attribute[main.field] = pos + getPadding(children[i], main.field);\n          pos += mianLenArray[i].mainLen;\n        }\n      } else {\n        const size = currSeg.idx - lastIdx + 1;\n        const padding = (main.len - currSeg.mainLen) / (size * 2 - 2);\n        let pos = 0;\n        for (let i = lastIdx; i <= currSeg.idx; i++) {\n          children[i].attribute[main.field] = pos + getPadding(children[i], main.field);\n          pos += mianLenArray[i].mainLen + padding * 2;\n        }\n      }\n    }\n  }\n\n  layoutCross(\n    children: IGraphic[],\n    alignItem: IGroupAttribute['alignItems'],\n    cross: { len: number; field: string },\n    anchorPos: number,\n    lenArray: { mainLen: number; crossLen: number }[],\n    currSeg: { idx: number; mainLen: number; crossLen: number },\n    lastIdx: number\n  ) {\n    if (alignItem === 'flex-end') {\n      for (let i = lastIdx; i <= currSeg.idx; i++) {\n        children[i].attribute[cross.field] = anchorPos - lenArray[i].crossLen + getPadding(children[i], cross.field);\n      }\n    } else if (alignItem === 'center') {\n      for (let i = lastIdx; i <= currSeg.idx; i++) {\n        children[i].attribute[cross.field] =\n          anchorPos - lenArray[i].crossLen / 2 + getPadding(children[i], cross.field);\n      }\n    } else {\n      for (let i = lastIdx; i <= currSeg.idx; i++) {\n        children[i].attribute[cross.field] = anchorPos + getPadding(children[i], cross.field);\n      }\n    }\n  }\n\n  activate(context: IPluginService): void {\n    this.pluginService = context;\n    graphicService.hooks.onAttributeUpdate.tap(this.key, graphic => {\n      if (graphic.glyphHost) {\n        graphic = graphic.glyphHost;\n      }\n      this.tryLayout(graphic);\n    });\n    graphicService.hooks.onSetStage.tap(this.key, graphic => {\n      if (graphic.glyphHost) {\n        graphic = graphic.glyphHost;\n      }\n      this.tryLayout(graphic);\n    });\n  }\n  deactivate(context: IPluginService): void {\n    graphicService.hooks.onAttributeUpdate.taps = graphicService.hooks.onAttributeUpdate.taps.filter(item => {\n      return item.name !== this.key;\n    });\n    graphicService.hooks.onSetStage.taps = graphicService.hooks.onSetStage.taps.filter(item => {\n      return item.name !== this.key;\n    });\n  }\n}\n\nfunction getPadding(graphic: IGraphic, field: string): number {\n  if (!graphic.attribute.boundsPadding) {\n    return 0;\n  } else if (isNumber(graphic.attribute.boundsPadding)) {\n    return graphic.attribute.boundsPadding as number;\n  } else if (isArray(graphic.attribute.boundsPadding) && graphic.attribute.boundsPadding.length === 1) {\n    return graphic.attribute.boundsPadding[0];\n  }\n  const paddingArray = parsePadding(graphic.attribute.boundsPadding);\n  if (field === 'x') {\n    return paddingArray[3];\n  } else if (field === 'y') {\n    return paddingArray[0];\n  }\n  return 0;\n}\n"]}