@visactor/vrender-core 0.17.11-alpha.2 → 0.17.11

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';\nimport type { IPickerService } from './picker';\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  scaleCenter: [number | string, number | string];\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  IPickStyle & {\n    opacity: number;\n    backgroundMode: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'; // 填充模式（与具体图元有关）\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 IPickStyle = {\n  // 给stroke模式的pick额外加的buffer，用于外界控制stroke区域的pick范围\n  pickStrokeBuffer: number;\n};\n\nexport type IDebugType = {\n  _debug_bounds: boolean | ((c: any, g: any) => void);\n};\nexport type IGraphicAttribute = IDebugType &\n  IGraphicStyle &\n  ITransform & {\n    /**\n     * stroke百分比\n     */\n    strokeSeg: IStrokeSeg | null;\n    // 包围盒的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     * 是否支持fill拾取，默认为 true。\n     * @experimental\n     * @default true\n     */\n    fillPickable: boolean;\n    /**\n     * 是否支持stroke拾取，默认为 true。\n     * @experimental\n     * @default true\n     */\n    strokePickable: boolean;\n    /**\n     * 对于 group 节点，是否支持其子元素的事件拾取，默认为 true。\n     * 如果 group `pickable` 关闭，`childrenPickable` 开启，那么 group 的子节点仍参与事件拾取\n     * @default true\n     */\n    childrenPickable: boolean;\n    /**\n     * 元素是否可见。\n     * @default true\n     */\n    visible: boolean;\n    zIndex: number;\n    layout: any;\n    /**\n     * 是否在3d中控制方向\n     * false: 不控制方向\n     * true: 始终控制方向朝摄像机\n     */\n    keepDirIn3d?: boolean;\n    shadowRootIdx: number;\n    globalZIndex: number;\n    globalCompositeOperation: CanvasRenderingContext2D['globalCompositeOperation'] | '';\n    // 完全支持滚动 | 完全不支持滚动 | 支持x方向的滚动 | 支持y方向的滚动\n    overflow: 'scroll' | 'hidden' | 'scroll-x' | 'scroll-y';\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  skipUpdateCallback?: boolean;\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, picker?: IPickerService) => 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, rotateCenter?: IPointLike) => 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  getNoWorkAnimateAttr: () => Record<string, number>;\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';\nimport type { IPickerService } from './picker';\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  scaleCenter: [number | string, number | string];\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  IPickStyle & {\n    opacity: number;\n    backgroundMode: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'; // 填充模式（与具体图元有关）\n    backgroundFit: boolean; // 是否正好填充，只在repeat-x或者repeat-y以及no-repeat的时候生效\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 IPickStyle = {\n  // 给stroke模式的pick额外加的buffer，用于外界控制stroke区域的pick范围\n  pickStrokeBuffer: number;\n};\n\nexport type IDebugType = {\n  _debug_bounds: boolean | ((c: any, g: any) => void);\n};\nexport type IGraphicAttribute = IDebugType &\n  IGraphicStyle &\n  ITransform & {\n    /**\n     * stroke百分比\n     */\n    strokeSeg: IStrokeSeg | null;\n    // 包围盒的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     * 是否支持fill拾取，默认为 true。\n     * @experimental\n     * @default true\n     */\n    fillPickable: boolean;\n    /**\n     * 是否支持stroke拾取，默认为 true。\n     * @experimental\n     * @default true\n     */\n    strokePickable: boolean;\n    /**\n     * 对于 group 节点，是否支持其子元素的事件拾取，默认为 true。\n     * 如果 group `pickable` 关闭，`childrenPickable` 开启，那么 group 的子节点仍参与事件拾取\n     * @default true\n     */\n    childrenPickable: boolean;\n    /**\n     * 元素是否可见。\n     * @default true\n     */\n    visible: boolean;\n    zIndex: number;\n    layout: any;\n    /**\n     * 是否在3d中控制方向\n     * false: 不控制方向\n     * true: 始终控制方向朝摄像机\n     */\n    keepDirIn3d?: boolean;\n    shadowRootIdx: number;\n    globalZIndex: number;\n    globalCompositeOperation: CanvasRenderingContext2D['globalCompositeOperation'] | '';\n    // 完全支持滚动 | 完全不支持滚动 | 支持x方向的滚动 | 支持y方向的滚动\n    overflow: 'scroll' | 'hidden' | 'scroll-x' | 'scroll-y';\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  skipUpdateCallback?: boolean;\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, picker?: IPickerService) => 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, rotateCenter?: IPointLike) => 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  getNoWorkAnimateAttr: () => Record<string, number>;\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/plugins/builtin-plugin/html-attribute-plugin.js

@@ -69,10 +69,10 @@ export class HtmlAttributePlugin {
         nativeContainer.style.position = "relative");
         let left = 0, top = 0;
         if ("position" === anchorType) {
-            const matrix = graphic.transMatrix;
+            const matrix = graphic.globalTransMatrix;
             left = matrix.e, top = matrix.f;
         } else {
-            const b = graphic.AABBBounds;
+            const b = graphic.globalAABBBounds;
             left = b.x1, top = b.y1;
         }
         const containerTL = application.global.getElementTopLeft(nativeContainer, !1), windowTL = stage.window.getTopLeft(!1), offsetX = left + windowTL.left - containerTL.left, offsetTop = top + windowTL.top - containerTL.top;

package/es/plugins/builtin-plugin/html-attribute-plugin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/plugins/builtin-plugin/html-attribute-plugin.ts"],"names":[],"mappings":"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","file":"html-attribute-plugin.js","sourcesContent":["import { Generator } from '../../common/generator';\nimport type { IGraphic, IPlugin, IPluginService, IRenderService, IDrawContext, IGroup } from '../../interface';\nimport { application } from '../../application';\nimport { DefaultAttribute } from '../../graphic';\n\nexport class HtmlAttributePlugin implements IPlugin {\n  name: 'HtmlAttributePlugin' = 'HtmlAttributePlugin';\n  activeEvent: 'onRegister' = 'onRegister';\n  pluginService: IPluginService;\n  _uid: number = Generator.GenAutoIncrementId();\n  key: string = this.name + this._uid;\n\n  activate(context: IPluginService): void {\n    this.pluginService = context;\n    context.stage.hooks.afterRender.tap(this.key, stage => {\n      if (!(stage && stage === this.pluginService.stage)) {\n        return;\n      }\n\n      this.drawHTML(context.stage.renderService);\n    });\n    application.graphicService.hooks.onRelease.tap(this.key, graphic => {\n      this.removeDom(graphic);\n    });\n  }\n  deactivate(context: IPluginService): void {\n    context.stage.hooks.afterRender.taps = context.stage.hooks.afterRender.taps.filter(item => {\n      return item.name !== this.key;\n    });\n  }\n\n  protected drawHTML(renderService: IRenderService) {\n    if (application.global.env === 'browser') {\n      renderService.renderTreeRoots\n        .sort((a, b) => {\n          return (a.attribute.zIndex ?? DefaultAttribute.zIndex) - (b.attribute.zIndex ?? DefaultAttribute.zIndex);\n        })\n        .forEach(group => {\n          this.renderGroupHTML(group as IGroup);\n        });\n    }\n  }\n\n  renderGroupHTML(group: IGroup) {\n    this.renderGraphicHTML(group);\n    group.forEachChildren((g: IGraphic) => {\n      if (g.isContainer) {\n        this.renderGroupHTML(g as IGroup);\n      } else {\n        this.renderGraphicHTML(g);\n      }\n    });\n  }\n\n  removeDom(graphic: IGraphic) {\n    if (graphic.bindDom && graphic.bindDom.size) {\n      // 删除dom\n      graphic.bindDom.forEach(item => {\n        item.dom && item.dom.parentElement.removeChild(item.dom);\n      });\n      graphic.bindDom.clear();\n    }\n  }\n\n  renderGraphicHTML(graphic: IGraphic) {\n    const { html } = graphic.attribute;\n    if (!html) {\n      if (graphic.bindDom && graphic.bindDom.size) {\n        // 删除dom\n        graphic.bindDom.forEach(item => {\n          item.dom && item.dom.parentElement.removeChild(item.dom);\n        });\n        graphic.bindDom.clear();\n      }\n      return;\n    }\n    const stage = graphic.stage;\n    if (!stage) {\n      return;\n    }\n    const { dom, container, width, height, style, anchorType = 'boundsLeftTop' } = html;\n    if (!graphic.bindDom) {\n      graphic.bindDom = new Map();\n    }\n    const lastDom = graphic.bindDom.get(dom);\n    // 如果存在了（dom存在，且container没有变化），就跳过\n    if (lastDom && !(container && container !== lastDom.container)) {\n      return;\n    }\n    // 清除上一次的dom\n    graphic.bindDom.forEach(({ wrapGroup }) => {\n      application.global.removeDom(wrapGroup);\n    });\n    // 转化这个dom为nativeDOM\n    let nativeDom: HTMLElement;\n    if (typeof dom === 'string') {\n      nativeDom = new DOMParser().parseFromString(dom, 'text/html').firstChild as any;\n    } else {\n      nativeDom = dom;\n    }\n    // 获取container的dom，默认为window的container\n    let nativeContainer;\n    const _container =\n      container || (stage.params.enableHtmlAttribute === true ? null : stage.params.enableHtmlAttribute);\n    if (_container) {\n      if (typeof _container === 'string') {\n        nativeContainer = application.global.getElementById(_container);\n      } else {\n        nativeContainer = _container;\n      }\n    } else {\n      // nativeContainer = application.global.getRootElement();\n      nativeContainer = graphic.stage.window.getContainer();\n    }\n    // 创建wrapGroup\n    const wrapGroup = application.global.createDom({ tagName: 'div', width, height, style, parent: nativeContainer });\n    if (wrapGroup) {\n      wrapGroup.appendChild(nativeDom);\n      graphic.bindDom.set(dom, { dom: nativeDom, container, wrapGroup: wrapGroup as any });\n    }\n    // 事件穿透\n    wrapGroup.style.pointerEvents = 'none';\n    // 定位wrapGroup\n    if (!wrapGroup.style.position) {\n      wrapGroup.style.position = 'absolute';\n      nativeContainer.style.position = 'relative';\n    }\n    let left: number = 0;\n    let top: number = 0;\n    if (anchorType === 'position') {\n      const matrix = graphic.transMatrix;\n      left = matrix.e;\n      top = matrix.f;\n    } else {\n      const b = graphic.AABBBounds;\n      left = b.x1;\n      top = b.y1;\n    }\n    // 查看wrapGroup的位置\n    // const wrapGroupTL = application.global.getElementTopLeft(wrapGroup, false);\n    const containerTL = application.global.getElementTopLeft(nativeContainer, false);\n    const windowTL = stage.window.getTopLeft(false);\n    const offsetX = left + windowTL.left - containerTL.left;\n    const offsetTop = top + windowTL.top - containerTL.top;\n    // wrapGroup.style.transform = `translate(${offsetX}px, ${offsetTop}px)`;\n    wrapGroup.style.left = `${offsetX}px`;\n    wrapGroup.style.top = `${offsetTop}px`;\n  }\n}\n"]}
+{"version":3,"sources":["../src/plugins/builtin-plugin/html-attribute-plugin.ts"],"names":[],"mappings":"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","file":"html-attribute-plugin.js","sourcesContent":["import { Generator } from '../../common/generator';\nimport type { IGraphic, IPlugin, IPluginService, IRenderService, IDrawContext, IGroup } from '../../interface';\nimport { application } from '../../application';\nimport { DefaultAttribute } from '../../graphic';\n\nexport class HtmlAttributePlugin implements IPlugin {\n  name: 'HtmlAttributePlugin' = 'HtmlAttributePlugin';\n  activeEvent: 'onRegister' = 'onRegister';\n  pluginService: IPluginService;\n  _uid: number = Generator.GenAutoIncrementId();\n  key: string = this.name + this._uid;\n\n  activate(context: IPluginService): void {\n    this.pluginService = context;\n    context.stage.hooks.afterRender.tap(this.key, stage => {\n      if (!(stage && stage === this.pluginService.stage)) {\n        return;\n      }\n\n      this.drawHTML(context.stage.renderService);\n    });\n    application.graphicService.hooks.onRelease.tap(this.key, graphic => {\n      this.removeDom(graphic);\n    });\n  }\n  deactivate(context: IPluginService): void {\n    context.stage.hooks.afterRender.taps = context.stage.hooks.afterRender.taps.filter(item => {\n      return item.name !== this.key;\n    });\n  }\n\n  protected drawHTML(renderService: IRenderService) {\n    if (application.global.env === 'browser') {\n      renderService.renderTreeRoots\n        .sort((a, b) => {\n          return (a.attribute.zIndex ?? DefaultAttribute.zIndex) - (b.attribute.zIndex ?? DefaultAttribute.zIndex);\n        })\n        .forEach(group => {\n          this.renderGroupHTML(group as IGroup);\n        });\n    }\n  }\n\n  renderGroupHTML(group: IGroup) {\n    this.renderGraphicHTML(group);\n    group.forEachChildren((g: IGraphic) => {\n      if (g.isContainer) {\n        this.renderGroupHTML(g as IGroup);\n      } else {\n        this.renderGraphicHTML(g);\n      }\n    });\n  }\n\n  removeDom(graphic: IGraphic) {\n    if (graphic.bindDom && graphic.bindDom.size) {\n      // 删除dom\n      graphic.bindDom.forEach(item => {\n        item.dom && item.dom.parentElement.removeChild(item.dom);\n      });\n      graphic.bindDom.clear();\n    }\n  }\n\n  renderGraphicHTML(graphic: IGraphic) {\n    const { html } = graphic.attribute;\n    if (!html) {\n      if (graphic.bindDom && graphic.bindDom.size) {\n        // 删除dom\n        graphic.bindDom.forEach(item => {\n          item.dom && item.dom.parentElement.removeChild(item.dom);\n        });\n        graphic.bindDom.clear();\n      }\n      return;\n    }\n    const stage = graphic.stage;\n    if (!stage) {\n      return;\n    }\n    const { dom, container, width, height, style, anchorType = 'boundsLeftTop' } = html;\n    if (!graphic.bindDom) {\n      graphic.bindDom = new Map();\n    }\n    const lastDom = graphic.bindDom.get(dom);\n    // 如果存在了（dom存在，且container没有变化），就跳过\n    if (lastDom && !(container && container !== lastDom.container)) {\n      return;\n    }\n    // 清除上一次的dom\n    graphic.bindDom.forEach(({ wrapGroup }) => {\n      application.global.removeDom(wrapGroup);\n    });\n    // 转化这个dom为nativeDOM\n    let nativeDom: HTMLElement;\n    if (typeof dom === 'string') {\n      nativeDom = new DOMParser().parseFromString(dom, 'text/html').firstChild as any;\n    } else {\n      nativeDom = dom;\n    }\n    // 获取container的dom，默认为window的container\n    let nativeContainer;\n    const _container =\n      container || (stage.params.enableHtmlAttribute === true ? null : stage.params.enableHtmlAttribute);\n    if (_container) {\n      if (typeof _container === 'string') {\n        nativeContainer = application.global.getElementById(_container);\n      } else {\n        nativeContainer = _container;\n      }\n    } else {\n      // nativeContainer = application.global.getRootElement();\n      nativeContainer = graphic.stage.window.getContainer();\n    }\n    // 创建wrapGroup\n    const wrapGroup = application.global.createDom({ tagName: 'div', width, height, style, parent: nativeContainer });\n    if (wrapGroup) {\n      wrapGroup.appendChild(nativeDom);\n      graphic.bindDom.set(dom, { dom: nativeDom, container, wrapGroup: wrapGroup as any });\n    }\n    // 事件穿透\n    wrapGroup.style.pointerEvents = 'none';\n    // 定位wrapGroup\n    if (!wrapGroup.style.position) {\n      wrapGroup.style.position = 'absolute';\n      nativeContainer.style.position = 'relative';\n    }\n    let left: number = 0;\n    let top: number = 0;\n    if (anchorType === 'position') {\n      const matrix = graphic.globalTransMatrix;\n      left = matrix.e;\n      top = matrix.f;\n    } else {\n      const b = graphic.globalAABBBounds;\n      left = b.x1;\n      top = b.y1;\n    }\n    // 查看wrapGroup的位置\n    // const wrapGroupTL = application.global.getElementTopLeft(wrapGroup, false);\n    const containerTL = application.global.getElementTopLeft(nativeContainer, false);\n    const windowTL = stage.window.getTopLeft(false);\n    const offsetX = left + windowTL.left - containerTL.left;\n    const offsetTop = top + windowTL.top - containerTL.top;\n    // wrapGroup.style.transform = `translate(${offsetX}px, ${offsetTop}px)`;\n    wrapGroup.style.left = `${offsetX}px`;\n    wrapGroup.style.top = `${offsetTop}px`;\n  }\n}\n"]}

package/es/render/contributions/render/contributions/base-contribution-render.d.ts

@@ -6,7 +6,7 @@ export declare class DefaultBaseBackgroundRenderContribution implements IBaseRen
     useStyle: boolean;
     order: number;
     drawShape(graphic: IGraphic, context: IContext2d, x: number, y: number, doFill: boolean, doStroke: boolean, fVisible: boolean, sVisible: boolean, graphicAttribute: Required<IGraphicAttribute>, drawContext: IDrawContext, fillCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean, strokeCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean, options?: any): void;
-    protected doDrawImage(context: IContext2d, data: any, b: IBounds, backgroundMode: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'): void;
+    protected doDrawImage(context: IContext2d, data: any, b: IBounds, backgroundMode: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat', backgroundFit: boolean): void;
 }
 export declare const defaultBaseBackgroundRenderContribution: DefaultBaseBackgroundRenderContribution;
 export interface IInteractiveSubRenderContribution {

package/es/render/contributions/render/contributions/base-contribution-render.js

@@ -14,6 +14,8 @@ import { inject, injectable, named } from "../../../../common/inversify-lite";
 
 import { getTheme } from "../../../../graphic";
 
+import { canvasAllocate } from "../../../../allocator/canvas-allocate";
+
 import { BaseRenderContributionTime } from "../../../../common/enums";
 
 import { ContributionProvider } from "../../../../common/contribution-provider";
@@ -25,7 +27,7 @@ export class DefaultBaseBackgroundRenderContribution {
         this.time = BaseRenderContributionTime.beforeFillStroke, this.useStyle = !0, this.order = 0;
     }
     drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, options) {
-        const {background: background, backgroundMode: backgroundMode = graphicAttribute.backgroundMode} = graphic.attribute;
+        const {background: background, backgroundMode: backgroundMode = graphicAttribute.backgroundMode, backgroundFit: backgroundFit = graphicAttribute.backgroundFit} = graphic.attribute;
         if (background) if (graphic.backgroundImg && graphic.resources) {
             const res = graphic.resources.get(background);
             if ("success" !== res.state || !res.data) return;
@@ -35,15 +37,33 @@ export class DefaultBaseBackgroundRenderContribution {
             }
             context.clip();
             const b = graphic.AABBBounds;
-            context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), this.doDrawImage(context, res.data, b, backgroundMode), 
+            context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), 
             context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
         } else context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), 
         context.fillStyle = background, context.fill(), context.highPerformanceRestore();
     }
-    doDrawImage(context, data, b, backgroundMode) {
+    doDrawImage(context, data, b, backgroundMode, backgroundFit) {
         if ("no-repeat" === backgroundMode) context.drawImage(data, b.x1, b.y1, b.width(), b.height()); else {
+            const targetW = b.width(), targetH = b.height();
+            let w = targetW, h = targetH;
+            if (backgroundFit && "repeat" !== backgroundMode && (data.width || data.height)) {
+                const resW = data.width, resH = data.height;
+                if ("repeat-x" === backgroundMode) {
+                    w = resW * (targetH / resH);
+                } else if ("repeat-y" === backgroundMode) {
+                    h = resH * (targetW / resW);
+                }
+                const canvas = canvasAllocate.allocate({
+                    width: w,
+                    height: h,
+                    dpr: context.dpr
+                }), ctx = canvas.getContext("2d");
+                ctx && (ctx.inuse = !0, ctx.clearMatrix(), ctx.setTransformForCurrent(!0), ctx.clearRect(0, 0, w, h), 
+                ctx.drawImage(data, 0, 0, w, h), data = canvas.nativeCanvas), document.body.appendChild(data), 
+                canvasAllocate.free(canvas);
+            }
             const pattern = context.createPattern(data, backgroundMode);
-            context.fillStyle = pattern, context.translate(b.x1, b.y1), context.fillRect(0, 0, b.width(), b.height()), 
+            context.fillStyle = pattern, context.translate(b.x1, b.y1), context.fillRect(0, 0, targetW, targetH), 
             context.translate(-b.x1, -b.y1);
         }
     }

package/es/render/contributions/render/contributions/base-contribution-render.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/render/contributions/render/contributions/base-contribution-render.ts"],"names":[],"mappings":"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","file":"base-contribution-render.js","sourcesContent":["import type {\n  IGraphicAttribute,\n  IContext2d,\n  IGraphic,\n  IStage,\n  IThemeAttribute,\n  IBaseRenderContribution,\n  IContributionProvider,\n  IDrawContext\n} from '../../../../interface';\nimport type { IBounds } from '@visactor/vutils';\nimport { inject, injectable, named } from '../../../../common/inversify-lite';\nimport { getTheme } from '../../../../graphic';\nimport { canvasAllocate } from '../../../../allocator/canvas-allocate';\nimport { pi2 } from '@visactor/vutils';\nimport { BaseRenderContributionTime } from '../../../../common/enums';\nimport { ContributionProvider } from '../../../../common/contribution-provider';\nimport { InteractiveSubRenderContribution } from './constants';\n\nexport class DefaultBaseBackgroundRenderContribution implements IBaseRenderContribution<IGraphic, IGraphicAttribute> {\n  time: BaseRenderContributionTime = BaseRenderContributionTime.beforeFillStroke;\n  useStyle: boolean = true;\n  order: number = 0;\n  drawShape(\n    graphic: IGraphic,\n    context: IContext2d,\n    x: number,\n    y: number,\n    doFill: boolean,\n    doStroke: boolean,\n    fVisible: boolean,\n    sVisible: boolean,\n    graphicAttribute: Required<IGraphicAttribute>,\n    drawContext: IDrawContext,\n    fillCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean,\n    strokeCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean,\n    options?: any\n  ) {\n    const { background, backgroundMode = graphicAttribute.backgroundMode } = graphic.attribute;\n    if (!background) {\n      return;\n    }\n\n    if (graphic.backgroundImg && graphic.resources) {\n      const res = graphic.resources.get(background);\n      if (res.state !== 'success' || !res.data) {\n        return;\n      }\n\n      context.save();\n\n      if (graphic.parent && !graphic.transMatrix.onlyTranslate()) {\n        const groupAttribute = getTheme(graphic.parent).group;\n        const { scrollX = groupAttribute.scrollX, scrollY = groupAttribute.scrollY } = graphic.parent.attribute;\n        context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true);\n        context.translate(scrollX, scrollY);\n      }\n      context.clip();\n      const b = graphic.AABBBounds;\n      context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute);\n      this.doDrawImage(context, res.data, b, backgroundMode);\n      context.restore();\n      if (!graphic.transMatrix.onlyTranslate()) {\n        context.setTransformForCurrent();\n      }\n    } else {\n      context.highPerformanceSave();\n      context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute);\n      context.fillStyle = background as string;\n      context.fill();\n      context.highPerformanceRestore();\n    }\n  }\n\n  protected doDrawImage(\n    context: IContext2d,\n    data: any,\n    b: IBounds,\n    backgroundMode: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'\n  ) {\n    if (backgroundMode === 'no-repeat') {\n      context.drawImage(data, b.x1, b.y1, b.width(), b.height());\n    } else {\n      const pattern = context.createPattern(data, backgroundMode);\n      context.fillStyle = pattern;\n      context.translate(b.x1, b.y1);\n      context.fillRect(0, 0, b.width(), b.height());\n      context.translate(-b.x1, -b.y1);\n    }\n  }\n}\n\nexport const defaultBaseBackgroundRenderContribution = new DefaultBaseBackgroundRenderContribution();\n\nexport interface IInteractiveSubRenderContribution {\n  render: (\n    graphic: IGraphic,\n    context: IContext2d,\n    x: number,\n    y: number,\n    doFill: boolean,\n    doStroke: boolean,\n    fVisible: boolean,\n    sVisible: boolean,\n    graphicAttribute: Required<IGraphicAttribute>,\n    drawContext: IDrawContext,\n    fillCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean,\n    strokeCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean,\n    options?: any\n  ) => void;\n}\n\n@injectable()\nexport class DefaultBaseInteractiveRenderContribution implements IBaseRenderContribution<IGraphic, IGraphicAttribute> {\n  time: BaseRenderContributionTime = BaseRenderContributionTime.afterFillStroke;\n  useStyle: boolean = true;\n  order: number = 0;\n\n  _subRenderContribitions?: IInteractiveSubRenderContribution[];\n  constructor(\n    @inject(ContributionProvider)\n    @named(InteractiveSubRenderContribution)\n    protected readonly subRenderContribitions: IContributionProvider<IInteractiveSubRenderContribution>\n  ) {}\n\n  drawShape(\n    graphic: IGraphic,\n    context: IContext2d,\n    x: number,\n    y: number,\n    doFill: boolean,\n    doStroke: boolean,\n    fVisible: boolean,\n    sVisible: boolean,\n    graphicAttribute: Required<IGraphicAttribute>,\n    drawContext: IDrawContext,\n    fillCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean,\n    strokeCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean,\n    options?: any\n  ) {\n    if (!this._subRenderContribitions) {\n      this._subRenderContribitions = this.subRenderContribitions.getContributions();\n    }\n    this._subRenderContribitions.forEach(c => {\n      c.render(\n        graphic,\n        context,\n        x,\n        y,\n        doFill,\n        doStroke,\n        fVisible,\n        sVisible,\n        graphicAttribute,\n        drawContext,\n        fillCb,\n        strokeCb,\n        options\n      );\n    });\n  }\n}\n\n// const rect1 =\n//   // @ts-ignore\n//   'data:image/png;base64,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';\n"]}
+{"version":3,"sources":["../src/render/contributions/render/contributions/base-contribution-render.ts"],"names":[],"mappings":"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","file":"base-contribution-render.js","sourcesContent":["import type {\n  IGraphicAttribute,\n  IContext2d,\n  IGraphic,\n  IStage,\n  IThemeAttribute,\n  IBaseRenderContribution,\n  IContributionProvider,\n  IDrawContext\n} from '../../../../interface';\nimport type { IBounds } from '@visactor/vutils';\nimport { inject, injectable, named } from '../../../../common/inversify-lite';\nimport { getTheme } from '../../../../graphic';\nimport { canvasAllocate } from '../../../../allocator/canvas-allocate';\nimport { pi2 } from '@visactor/vutils';\nimport { BaseRenderContributionTime } from '../../../../common/enums';\nimport { ContributionProvider } from '../../../../common/contribution-provider';\nimport { InteractiveSubRenderContribution } from './constants';\n\nexport class DefaultBaseBackgroundRenderContribution implements IBaseRenderContribution<IGraphic, IGraphicAttribute> {\n  time: BaseRenderContributionTime = BaseRenderContributionTime.beforeFillStroke;\n  useStyle: boolean = true;\n  order: number = 0;\n  drawShape(\n    graphic: IGraphic,\n    context: IContext2d,\n    x: number,\n    y: number,\n    doFill: boolean,\n    doStroke: boolean,\n    fVisible: boolean,\n    sVisible: boolean,\n    graphicAttribute: Required<IGraphicAttribute>,\n    drawContext: IDrawContext,\n    fillCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean,\n    strokeCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean,\n    options?: any\n  ) {\n    const {\n      background,\n      backgroundMode = graphicAttribute.backgroundMode,\n      backgroundFit = graphicAttribute.backgroundFit\n    } = graphic.attribute;\n    if (!background) {\n      return;\n    }\n\n    if (graphic.backgroundImg && graphic.resources) {\n      const res = graphic.resources.get(background);\n      if (res.state !== 'success' || !res.data) {\n        return;\n      }\n\n      context.save();\n\n      if (graphic.parent && !graphic.transMatrix.onlyTranslate()) {\n        const groupAttribute = getTheme(graphic.parent).group;\n        const { scrollX = groupAttribute.scrollX, scrollY = groupAttribute.scrollY } = graphic.parent.attribute;\n        context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true);\n        context.translate(scrollX, scrollY);\n      }\n      context.clip();\n      const b = graphic.AABBBounds;\n      context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute);\n      this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit);\n      context.restore();\n      if (!graphic.transMatrix.onlyTranslate()) {\n        context.setTransformForCurrent();\n      }\n    } else {\n      context.highPerformanceSave();\n      context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute);\n      context.fillStyle = background as string;\n      context.fill();\n      context.highPerformanceRestore();\n    }\n  }\n\n  protected doDrawImage(\n    context: IContext2d,\n    data: any,\n    b: IBounds,\n    backgroundMode: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat',\n    backgroundFit: boolean\n  ): void {\n    if (backgroundMode === 'no-repeat') {\n      context.drawImage(data, b.x1, b.y1, b.width(), b.height());\n    } else {\n      const targetW = b.width();\n      const targetH = b.height();\n      let w = targetW;\n      let h = targetH;\n      // debugger;\n      // TODO 考虑缓存\n      if (backgroundFit && backgroundMode !== 'repeat' && (data.width || data.height)) {\n        const resW = data.width;\n        const resH = data.height;\n\n        if (backgroundMode === 'repeat-x') {\n          // 高度适应\n          const ratio = targetH / resH;\n          w = resW * ratio;\n        } else if (backgroundMode === 'repeat-y') {\n          // 宽度适应\n          const ratio = targetW / resW;\n          h = resH * ratio;\n        }\n\n        const canvas = canvasAllocate.allocate({ width: w, height: h, dpr: context.dpr });\n        const ctx = canvas.getContext('2d');\n        if (ctx) {\n          ctx.inuse = true;\n          ctx.clearMatrix();\n          ctx.setTransformForCurrent(true);\n          ctx.clearRect(0, 0, w, h);\n          ctx.drawImage(data, 0, 0, w, h);\n          data = canvas.nativeCanvas;\n        }\n        document.body.appendChild(data);\n        canvasAllocate.free(canvas);\n      }\n      const pattern = context.createPattern(data, backgroundMode);\n      context.fillStyle = pattern;\n      context.translate(b.x1, b.y1);\n      context.fillRect(0, 0, targetW, targetH);\n      context.translate(-b.x1, -b.y1);\n    }\n  }\n}\n\nexport const defaultBaseBackgroundRenderContribution = new DefaultBaseBackgroundRenderContribution();\n\nexport interface IInteractiveSubRenderContribution {\n  render: (\n    graphic: IGraphic,\n    context: IContext2d,\n    x: number,\n    y: number,\n    doFill: boolean,\n    doStroke: boolean,\n    fVisible: boolean,\n    sVisible: boolean,\n    graphicAttribute: Required<IGraphicAttribute>,\n    drawContext: IDrawContext,\n    fillCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean,\n    strokeCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean,\n    options?: any\n  ) => void;\n}\n\n@injectable()\nexport class DefaultBaseInteractiveRenderContribution implements IBaseRenderContribution<IGraphic, IGraphicAttribute> {\n  time: BaseRenderContributionTime = BaseRenderContributionTime.afterFillStroke;\n  useStyle: boolean = true;\n  order: number = 0;\n\n  _subRenderContribitions?: IInteractiveSubRenderContribution[];\n  constructor(\n    @inject(ContributionProvider)\n    @named(InteractiveSubRenderContribution)\n    protected readonly subRenderContribitions: IContributionProvider<IInteractiveSubRenderContribution>\n  ) {}\n\n  drawShape(\n    graphic: IGraphic,\n    context: IContext2d,\n    x: number,\n    y: number,\n    doFill: boolean,\n    doStroke: boolean,\n    fVisible: boolean,\n    sVisible: boolean,\n    graphicAttribute: Required<IGraphicAttribute>,\n    drawContext: IDrawContext,\n    fillCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean,\n    strokeCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean,\n    options?: any\n  ) {\n    if (!this._subRenderContribitions) {\n      this._subRenderContribitions = this.subRenderContribitions.getContributions();\n    }\n    this._subRenderContribitions.forEach(c => {\n      c.render(\n        graphic,\n        context,\n        x,\n        y,\n        doFill,\n        doStroke,\n        fVisible,\n        sVisible,\n        graphicAttribute,\n        drawContext,\n        fillCb,\n        strokeCb,\n        options\n      );\n    });\n  }\n}\n\n// const rect1 =\n//   // @ts-ignore\n//   'data:image/png;base64,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';\n"]}

package/es/render/contributions/render/contributions/group-contribution-render.js

@@ -7,13 +7,13 @@ export class DefaultGroupBackgroundRenderContribution extends DefaultBaseBackgro
         super(...arguments), this.time = BaseRenderContributionTime.beforeFillStroke;
     }
     drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
-        const {background: background, backgroundMode: backgroundMode = graphicAttribute.backgroundMode} = graphic.attribute;
+        const {background: background, backgroundMode: backgroundMode = graphicAttribute.backgroundMode, backgroundFit: backgroundFit = graphicAttribute.backgroundFit} = graphic.attribute;
         if (background) if (graphic.backgroundImg && graphic.resources) {
             const res = graphic.resources.get(background);
             if ("success" !== res.state || !res.data) return;
             context.highPerformanceSave(), context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0);
             const b = graphic.AABBBounds;
-            this.doDrawImage(context, res.data, b, backgroundMode), context.highPerformanceRestore(), 
+            this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.highPerformanceRestore(), 
             context.setTransformForCurrent();
         } else context.highPerformanceSave(), context.fillStyle = background, context.fill(), 
         context.highPerformanceRestore();

package/es/render/contributions/render/contributions/group-contribution-render.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/render/contributions/render/contributions/group-contribution-render.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,uCAAuC,EAAE,MAAM,4BAA4B,CAAC;AACrF,OAAO,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAEtE,MAAM,OAAO,wCACX,SAAQ,uCAAuC;IADjD;;QAIE,SAAI,GAA+B,0BAA0B,CAAC,gBAAgB,CAAC;IAyCjF,CAAC;IAvCC,SAAS,CACP,OAAe,EACf,OAAmB,EACnB,CAAS,EACT,CAAS,EACT,MAAe,EACf,QAAiB,EACjB,QAAiB,EACjB,QAAiB,EACjB,gBAA6C,EAC7C,WAAyB,EACzB,MAAiH,EACjH,QAAmH;QAEnH,MAAM,EAAE,UAAU,EAAE,cAAc,GAAG,gBAAgB,CAAC,cAAc,EAAE,GAAG,OAAO,CAAC,SAAS,CAAC;QAC3F,IAAI,CAAC,UAAU,EAAE;YACf,OAAO;SACR;QAED,IAAI,OAAO,CAAC,aAAa,IAAI,OAAO,CAAC,SAAS,EAAE;YAC9C,MAAM,GAAG,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;YAC9C,IAAI,GAAG,CAAC,KAAK,KAAK,SAAS,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE;gBACxC,OAAO;aACR;YAED,OAAO,CAAC,mBAAmB,EAAE,CAAC;YAE9B,OAAO,CAAC,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;YACvE,MAAM,CAAC,GAAG,OAAO,CAAC,UAAU,CAAC;YAC7B,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,cAAc,CAAC,CAAC;YACvD,OAAO,CAAC,sBAAsB,EAAE,CAAC;YACjC,OAAO,CAAC,sBAAsB,EAAE,CAAC;SAClC;aAAM;YACL,OAAO,CAAC,mBAAmB,EAAE,CAAC;YAC9B,OAAO,CAAC,SAAS,GAAG,UAAoB,CAAC;YACzC,OAAO,CAAC,IAAI,EAAE,CAAC;YACf,OAAO,CAAC,sBAAsB,EAAE,CAAC;SAClC;IACH,CAAC;CACF;AAED,MAAM,CAAC,MAAM,wCAAwC,GAAG,IAAI,wCAAwC,EAAE,CAAC","file":"group-contribution-render.js","sourcesContent":["import type {\n  IGraphicAttribute,\n  IContext2d,\n  IGroup,\n  IThemeAttribute,\n  IGroupRenderContribution,\n  IDrawContext\n} from '../../../../interface';\nimport { DefaultBaseBackgroundRenderContribution } from './base-contribution-render';\nimport { BaseRenderContributionTime } from '../../../../common/enums';\n\nexport class DefaultGroupBackgroundRenderContribution\n  extends DefaultBaseBackgroundRenderContribution\n  implements IGroupRenderContribution\n{\n  time: BaseRenderContributionTime = BaseRenderContributionTime.beforeFillStroke;\n\n  drawShape(\n    graphic: IGroup,\n    context: IContext2d,\n    x: number,\n    y: number,\n    doFill: boolean,\n    doStroke: boolean,\n    fVisible: boolean,\n    sVisible: boolean,\n    graphicAttribute: Required<IGraphicAttribute>,\n    drawContext: IDrawContext,\n    fillCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean,\n    strokeCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean\n  ) {\n    const { background, backgroundMode = graphicAttribute.backgroundMode } = graphic.attribute;\n    if (!background) {\n      return;\n    }\n\n    if (graphic.backgroundImg && graphic.resources) {\n      const res = graphic.resources.get(background);\n      if (res.state !== 'success' || !res.data) {\n        return;\n      }\n\n      context.highPerformanceSave();\n\n      context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true);\n      const b = graphic.AABBBounds;\n      this.doDrawImage(context, res.data, b, backgroundMode);\n      context.highPerformanceRestore();\n      context.setTransformForCurrent();\n    } else {\n      context.highPerformanceSave();\n      context.fillStyle = background as string;\n      context.fill();\n      context.highPerformanceRestore();\n    }\n  }\n}\n\nexport const defaultGroupBackgroundRenderContribution = new DefaultGroupBackgroundRenderContribution();\n"]}
+{"version":3,"sources":["../src/render/contributions/render/contributions/group-contribution-render.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,uCAAuC,EAAE,MAAM,4BAA4B,CAAC;AACrF,OAAO,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAEtE,MAAM,OAAO,wCACX,SAAQ,uCAAuC;IADjD;;QAIE,SAAI,GAA+B,0BAA0B,CAAC,gBAAgB,CAAC;IA6CjF,CAAC;IA3CC,SAAS,CACP,OAAe,EACf,OAAmB,EACnB,CAAS,EACT,CAAS,EACT,MAAe,EACf,QAAiB,EACjB,QAAiB,EACjB,QAAiB,EACjB,gBAA6C,EAC7C,WAAyB,EACzB,MAAiH,EACjH,QAAmH;QAEnH,MAAM,EACJ,UAAU,EACV,cAAc,GAAG,gBAAgB,CAAC,cAAc,EAChD,aAAa,GAAG,gBAAgB,CAAC,aAAa,EAC/C,GAAG,OAAO,CAAC,SAAS,CAAC;QACtB,IAAI,CAAC,UAAU,EAAE;YACf,OAAO;SACR;QAED,IAAI,OAAO,CAAC,aAAa,IAAI,OAAO,CAAC,SAAS,EAAE;YAC9C,MAAM,GAAG,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;YAC9C,IAAI,GAAG,CAAC,KAAK,KAAK,SAAS,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE;gBACxC,OAAO;aACR;YAED,OAAO,CAAC,mBAAmB,EAAE,CAAC;YAE9B,OAAO,CAAC,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;YACvE,MAAM,CAAC,GAAG,OAAO,CAAC,UAAU,CAAC;YAC7B,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,cAAc,EAAE,aAAa,CAAC,CAAC;YACtE,OAAO,CAAC,sBAAsB,EAAE,CAAC;YACjC,OAAO,CAAC,sBAAsB,EAAE,CAAC;SAClC;aAAM;YACL,OAAO,CAAC,mBAAmB,EAAE,CAAC;YAC9B,OAAO,CAAC,SAAS,GAAG,UAAoB,CAAC;YACzC,OAAO,CAAC,IAAI,EAAE,CAAC;YACf,OAAO,CAAC,sBAAsB,EAAE,CAAC;SAClC;IACH,CAAC;CACF;AAED,MAAM,CAAC,MAAM,wCAAwC,GAAG,IAAI,wCAAwC,EAAE,CAAC","file":"group-contribution-render.js","sourcesContent":["import type {\n  IGraphicAttribute,\n  IContext2d,\n  IGroup,\n  IThemeAttribute,\n  IGroupRenderContribution,\n  IDrawContext\n} from '../../../../interface';\nimport { DefaultBaseBackgroundRenderContribution } from './base-contribution-render';\nimport { BaseRenderContributionTime } from '../../../../common/enums';\n\nexport class DefaultGroupBackgroundRenderContribution\n  extends DefaultBaseBackgroundRenderContribution\n  implements IGroupRenderContribution\n{\n  time: BaseRenderContributionTime = BaseRenderContributionTime.beforeFillStroke;\n\n  drawShape(\n    graphic: IGroup,\n    context: IContext2d,\n    x: number,\n    y: number,\n    doFill: boolean,\n    doStroke: boolean,\n    fVisible: boolean,\n    sVisible: boolean,\n    graphicAttribute: Required<IGraphicAttribute>,\n    drawContext: IDrawContext,\n    fillCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean,\n    strokeCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean\n  ) {\n    const {\n      background,\n      backgroundMode = graphicAttribute.backgroundMode,\n      backgroundFit = graphicAttribute.backgroundFit\n    } = graphic.attribute;\n    if (!background) {\n      return;\n    }\n\n    if (graphic.backgroundImg && graphic.resources) {\n      const res = graphic.resources.get(background);\n      if (res.state !== 'success' || !res.data) {\n        return;\n      }\n\n      context.highPerformanceSave();\n\n      context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true);\n      const b = graphic.AABBBounds;\n      this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit);\n      context.highPerformanceRestore();\n      context.setTransformForCurrent();\n    } else {\n      context.highPerformanceSave();\n      context.fillStyle = background as string;\n      context.fill();\n      context.highPerformanceRestore();\n    }\n  }\n}\n\nexport const defaultGroupBackgroundRenderContribution = new DefaultGroupBackgroundRenderContribution();\n"]}

package/es/render/contributions/render/contributions/image-contribution-render.js

@@ -15,7 +15,7 @@ export class DefaultImageBackgroundRenderContribution extends DefaultBaseBackgro
         super(...arguments), this.time = BaseRenderContributionTime.beforeFillStroke;
     }
     drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
-        const {background: background, backgroundMode: backgroundMode = graphicAttribute.backgroundMode} = graphic.attribute;
+        const {background: background, backgroundMode: backgroundMode = graphicAttribute.backgroundMode, backgroundFit: backgroundFit = graphicAttribute.backgroundFit} = graphic.attribute;
         if (background) if (graphic.backgroundImg) {
             const res = graphic.resources.get(background);
             if ("success" !== res.state || !res.data) return;
@@ -24,7 +24,8 @@ export class DefaultImageBackgroundRenderContribution extends DefaultBaseBackgro
                 context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), context.translate(scrollX, scrollY);
             }
             const b = graphic.AABBBounds;
-            this.doDrawImage(context, res.data, b, backgroundMode), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
+            this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.restore(), 
+            graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
         } else if (isObject(background)) {
             const {stroke: stroke, fill: fill, lineWidth: lineWidth = 1, cornerRadius: cornerRadius = 0, expandX: expandX = 0, expandY: expandY = 0} = background;
             if (!stroke && !fill) return;

package/es/render/contributions/render/contributions/image-contribution-render.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/render/contributions/render/contributions/image-contribution-render.ts"],"names":[],"mappings":"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","file":"image-contribution-render.js","sourcesContent":["import type {\n  IGraphicAttribute,\n  IContext2d,\n  IImage,\n  IThemeAttribute,\n  IImageRenderContribution,\n  IDrawContext,\n  IBackgroundConfig,\n  IGraphic\n} from '../../../../interface';\nimport { getTheme } from '../../../../graphic';\nimport { DefaultBaseBackgroundRenderContribution } from './base-contribution-render';\nimport { BaseRenderContributionTime } from '../../../../common/enums';\nimport { isNumber, isObject } from '@visactor/vutils';\nimport { parsePadding } from '../../../../common/utils';\nimport { createRectPath } from '../../../../common/shape/rect';\n\nexport class DefaultImageBackgroundRenderContribution\n  extends DefaultBaseBackgroundRenderContribution\n  implements IImageRenderContribution\n{\n  time: BaseRenderContributionTime = BaseRenderContributionTime.beforeFillStroke;\n\n  drawShape(\n    graphic: IImage,\n    context: IContext2d,\n    x: number,\n    y: number,\n    doFill: boolean,\n    doStroke: boolean,\n    fVisible: boolean,\n    sVisible: boolean,\n    graphicAttribute: Required<IGraphicAttribute>,\n    drawContext: IDrawContext,\n    fillCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean,\n    strokeCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean\n  ) {\n    const { background, backgroundMode = graphicAttribute.backgroundMode } = graphic.attribute;\n    if (!background) {\n      return;\n    }\n\n    if (!graphic.backgroundImg) {\n      if (isObject(background)) {\n        const {\n          stroke,\n          fill,\n          lineWidth = 1,\n          cornerRadius = 0,\n          expandX = 0,\n          expandY = 0\n        } = background as IBackgroundConfig;\n\n        if (!stroke && !fill) {\n          return;\n        }\n\n        context.beginPath();\n        const { x, y, width, height } = getActualPosition(graphic);\n        if (cornerRadius) {\n          createRectPath(context, x - expandX, y - expandY, width + expandX * 2, height + expandY * 2, cornerRadius);\n        } else {\n          context.rect(x - expandX, y - expandY, width + expandX * 2, height + expandY * 2);\n        }\n\n        context.globalAlpha = 1;\n        if (fill) {\n          context.fillStyle = fill as string;\n          context.fill();\n        }\n\n        if (stroke && lineWidth > 0) {\n          context.lineWidth = lineWidth;\n          context.strokeStyle = stroke as string;\n          context.stroke();\n        }\n      } else {\n        context.beginPath();\n        const b = graphic.AABBBounds;\n        context.rect(x, y, b.width(), b.height());\n        context.fillStyle = background as string;\n        context.globalAlpha = 1;\n        context.fill();\n      }\n    } else {\n      const res = graphic.resources.get(background);\n      if (res.state !== 'success' || !res.data) {\n        return;\n      }\n      context.save();\n      if (graphic.parent && !graphic.transMatrix.onlyTranslate()) {\n        const groupAttribute = getTheme(graphic.parent).group;\n        const { scrollX = groupAttribute.scrollX, scrollY = groupAttribute.scrollY } = graphic.parent.attribute;\n        context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true);\n        context.translate(scrollX, scrollY);\n      }\n      // context.clip();\n      const b = graphic.AABBBounds;\n      this.doDrawImage(context, res.data, b, backgroundMode);\n      context.restore();\n      if (!graphic.transMatrix.onlyTranslate()) {\n        context.setTransformForCurrent();\n      }\n    }\n  }\n}\n\nfunction getActualPosition(graphic: IGraphic) {\n  const boundsPadding = parsePadding(graphic.attribute.boundsPadding);\n  const bounds = graphic.AABBBounds;\n  let x = bounds.x1;\n  let y = bounds.y1;\n  let width = bounds.width();\n  let height = bounds.height();\n\n  if (isNumber(boundsPadding)) {\n    x += boundsPadding;\n    y += boundsPadding;\n    width -= boundsPadding * 2;\n    height -= boundsPadding * 2;\n  } else {\n    x += boundsPadding[3];\n    y += boundsPadding[0];\n    width -= boundsPadding[1] + boundsPadding[3];\n    height -= boundsPadding[0] + boundsPadding[2];\n  }\n\n  return {\n    x,\n    y,\n    width,\n    height\n  };\n}\n\nexport const defaultImageBackgroundRenderContribution = new DefaultImageBackgroundRenderContribution();\n"]}
+{"version":3,"sources":["../src/render/contributions/render/contributions/image-contribution-render.ts"],"names":[],"mappings":"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","file":"image-contribution-render.js","sourcesContent":["import type {\n  IGraphicAttribute,\n  IContext2d,\n  IImage,\n  IThemeAttribute,\n  IImageRenderContribution,\n  IDrawContext,\n  IBackgroundConfig,\n  IGraphic\n} from '../../../../interface';\nimport { getTheme } from '../../../../graphic';\nimport { DefaultBaseBackgroundRenderContribution } from './base-contribution-render';\nimport { BaseRenderContributionTime } from '../../../../common/enums';\nimport { isNumber, isObject } from '@visactor/vutils';\nimport { parsePadding } from '../../../../common/utils';\nimport { createRectPath } from '../../../../common/shape/rect';\n\nexport class DefaultImageBackgroundRenderContribution\n  extends DefaultBaseBackgroundRenderContribution\n  implements IImageRenderContribution\n{\n  time: BaseRenderContributionTime = BaseRenderContributionTime.beforeFillStroke;\n\n  drawShape(\n    graphic: IImage,\n    context: IContext2d,\n    x: number,\n    y: number,\n    doFill: boolean,\n    doStroke: boolean,\n    fVisible: boolean,\n    sVisible: boolean,\n    graphicAttribute: Required<IGraphicAttribute>,\n    drawContext: IDrawContext,\n    fillCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean,\n    strokeCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean\n  ) {\n    const {\n      background,\n      backgroundMode = graphicAttribute.backgroundMode,\n      backgroundFit = graphicAttribute.backgroundFit\n    } = graphic.attribute;\n    if (!background) {\n      return;\n    }\n\n    if (!graphic.backgroundImg) {\n      if (isObject(background)) {\n        const {\n          stroke,\n          fill,\n          lineWidth = 1,\n          cornerRadius = 0,\n          expandX = 0,\n          expandY = 0\n        } = background as IBackgroundConfig;\n\n        if (!stroke && !fill) {\n          return;\n        }\n\n        context.beginPath();\n        const { x, y, width, height } = getActualPosition(graphic);\n        if (cornerRadius) {\n          createRectPath(context, x - expandX, y - expandY, width + expandX * 2, height + expandY * 2, cornerRadius);\n        } else {\n          context.rect(x - expandX, y - expandY, width + expandX * 2, height + expandY * 2);\n        }\n\n        context.globalAlpha = 1;\n        if (fill) {\n          context.fillStyle = fill as string;\n          context.fill();\n        }\n\n        if (stroke && lineWidth > 0) {\n          context.lineWidth = lineWidth;\n          context.strokeStyle = stroke as string;\n          context.stroke();\n        }\n      } else {\n        context.beginPath();\n        const b = graphic.AABBBounds;\n        context.rect(x, y, b.width(), b.height());\n        context.fillStyle = background as string;\n        context.globalAlpha = 1;\n        context.fill();\n      }\n    } else {\n      const res = graphic.resources.get(background);\n      if (res.state !== 'success' || !res.data) {\n        return;\n      }\n      context.save();\n      if (graphic.parent && !graphic.transMatrix.onlyTranslate()) {\n        const groupAttribute = getTheme(graphic.parent).group;\n        const { scrollX = groupAttribute.scrollX, scrollY = groupAttribute.scrollY } = graphic.parent.attribute;\n        context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true);\n        context.translate(scrollX, scrollY);\n      }\n      // context.clip();\n      const b = graphic.AABBBounds;\n      this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit);\n      context.restore();\n      if (!graphic.transMatrix.onlyTranslate()) {\n        context.setTransformForCurrent();\n      }\n    }\n  }\n}\n\nfunction getActualPosition(graphic: IGraphic) {\n  const boundsPadding = parsePadding(graphic.attribute.boundsPadding);\n  const bounds = graphic.AABBBounds;\n  let x = bounds.x1;\n  let y = bounds.y1;\n  let width = bounds.width();\n  let height = bounds.height();\n\n  if (isNumber(boundsPadding)) {\n    x += boundsPadding;\n    y += boundsPadding;\n    width -= boundsPadding * 2;\n    height -= boundsPadding * 2;\n  } else {\n    x += boundsPadding[3];\n    y += boundsPadding[0];\n    width -= boundsPadding[1] + boundsPadding[3];\n    height -= boundsPadding[0] + boundsPadding[2];\n  }\n\n  return {\n    x,\n    y,\n    width,\n    height\n  };\n}\n\nexport const defaultImageBackgroundRenderContribution = new DefaultImageBackgroundRenderContribution();\n"]}

package/es/render/contributions/render/contributions/text-contribution-render.js

@@ -7,14 +7,14 @@ export class DefaultTextBackgroundRenderContribution extends DefaultBaseBackgrou
         super(...arguments), this.time = BaseRenderContributionTime.beforeFillStroke;
     }
     drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
-        const {background: background, backgroundMode: backgroundMode = graphicAttribute.backgroundMode} = graphic.attribute;
+        const {background: background, backgroundMode: backgroundMode = graphicAttribute.backgroundMode, backgroundFit: backgroundFit = graphicAttribute.backgroundFit} = graphic.attribute;
         if (!background) return;
         const b = graphic.AABBBounds;
         if (graphic.backgroundImg && graphic.resources) {
             const res = graphic.resources.get(background);
             if ("success" !== res.state || !res.data) return;
             context.highPerformanceSave(), context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), 
-            this.doDrawImage(context, res.data, b, backgroundMode), context.highPerformanceRestore(), 
+            this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.highPerformanceRestore(), 
             context.setTransformForCurrent();
         } else context.highPerformanceSave(), context.fillStyle = background, context.fillRect(b.x1, b.y1, b.width(), b.height()), 
         context.highPerformanceRestore();

package/es/render/contributions/render/contributions/text-contribution-render.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/render/contributions/render/contributions/text-contribution-render.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAStE,OAAO,EAAE,uCAAuC,EAAE,MAAM,4BAA4B,CAAC;AAErF,MAAM,OAAO,uCACX,SAAQ,uCAAuC;IADjD;;QAIE,SAAI,GAA+B,0BAA0B,CAAC,gBAAgB,CAAC;IA0CjF,CAAC;IAxCC,SAAS,CACP,OAAc,EACd,OAAmB,EACnB,CAAS,EACT,CAAS,EACT,MAAe,EACf,QAAiB,EACjB,QAAiB,EACjB,QAAiB,EACjB,gBAA6C,EAC7C,WAAyB,EACzB,MAAiH,EACjH,QAAmH;QAEnH,MAAM,EAAE,UAAU,EAAE,cAAc,GAAG,gBAAgB,CAAC,cAAc,EAAE,GAAG,OAAO,CAAC,SAAS,CAAC;QAC3F,IAAI,CAAC,UAAU,EAAE;YACf,OAAO;SACR;QAED,MAAM,CAAC,GAAG,OAAO,CAAC,UAAU,CAAC;QAC7B,IAAI,OAAO,CAAC,aAAa,IAAI,OAAO,CAAC,SAAS,EAAE;YAC9C,MAAM,GAAG,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;YAC9C,IAAI,GAAG,CAAC,KAAK,KAAK,SAAS,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE;gBACxC,OAAO;aACR;YAED,OAAO,CAAC,mBAAmB,EAAE,CAAC;YAE9B,OAAO,CAAC,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;YAEvE,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,cAAc,CAAC,CAAC;YACvD,OAAO,CAAC,sBAAsB,EAAE,CAAC;YACjC,OAAO,CAAC,sBAAsB,EAAE,CAAC;SAClC;aAAM;YACL,OAAO,CAAC,mBAAmB,EAAE,CAAC;YAC9B,OAAO,CAAC,SAAS,GAAG,UAAoB,CAAC;YACzC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;YACpD,OAAO,CAAC,sBAAsB,EAAE,CAAC;SAClC;IACH,CAAC;CACF;AAED,MAAM,CAAC,MAAM,uCAAuC,GAAG,IAAI,uCAAuC,EAAE,CAAC","file":"text-contribution-render.js","sourcesContent":["import { BaseRenderContributionTime } from '../../../../common/enums';\nimport type {\n  IContext2d,\n  IDrawContext,\n  IGraphicAttribute,\n  IText,\n  ITextRenderContribution,\n  IThemeAttribute\n} from '../../../../interface';\nimport { DefaultBaseBackgroundRenderContribution } from './base-contribution-render';\n\nexport class DefaultTextBackgroundRenderContribution\n  extends DefaultBaseBackgroundRenderContribution\n  implements ITextRenderContribution\n{\n  time: BaseRenderContributionTime = BaseRenderContributionTime.beforeFillStroke;\n\n  drawShape(\n    graphic: IText,\n    context: IContext2d,\n    x: number,\n    y: number,\n    doFill: boolean,\n    doStroke: boolean,\n    fVisible: boolean,\n    sVisible: boolean,\n    graphicAttribute: Required<IGraphicAttribute>,\n    drawContext: IDrawContext,\n    fillCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean,\n    strokeCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean\n  ) {\n    const { background, backgroundMode = graphicAttribute.backgroundMode } = graphic.attribute;\n    if (!background) {\n      return;\n    }\n\n    const b = graphic.AABBBounds;\n    if (graphic.backgroundImg && graphic.resources) {\n      const res = graphic.resources.get(background);\n      if (res.state !== 'success' || !res.data) {\n        return;\n      }\n\n      context.highPerformanceSave();\n\n      context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true);\n\n      this.doDrawImage(context, res.data, b, backgroundMode);\n      context.highPerformanceRestore();\n      context.setTransformForCurrent();\n    } else {\n      context.highPerformanceSave();\n      context.fillStyle = background as string;\n      context.fillRect(b.x1, b.y1, b.width(), b.height());\n      context.highPerformanceRestore();\n    }\n  }\n}\n\nexport const defaultTextBackgroundRenderContribution = new DefaultTextBackgroundRenderContribution();\n\n// @injectable()\n// export class DefaultTextPopTipRenderContribution\n//   extends DefaultBasePopTipRenderContribution\n//   implements ITextRenderContribution\n// {\n//   time: BaseRenderContributionTime = BaseRenderContributionTime.afterFillStroke;\n// }\n"]}
+{"version":3,"sources":["../src/render/contributions/render/contributions/text-contribution-render.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAStE,OAAO,EAAE,uCAAuC,EAAE,MAAM,4BAA4B,CAAC;AAErF,MAAM,OAAO,uCACX,SAAQ,uCAAuC;IADjD;;QAIE,SAAI,GAA+B,0BAA0B,CAAC,gBAAgB,CAAC;IA8CjF,CAAC;IA5CC,SAAS,CACP,OAAc,EACd,OAAmB,EACnB,CAAS,EACT,CAAS,EACT,MAAe,EACf,QAAiB,EACjB,QAAiB,EACjB,QAAiB,EACjB,gBAA6C,EAC7C,WAAyB,EACzB,MAAiH,EACjH,QAAmH;QAEnH,MAAM,EACJ,UAAU,EACV,cAAc,GAAG,gBAAgB,CAAC,cAAc,EAChD,aAAa,GAAG,gBAAgB,CAAC,aAAa,EAC/C,GAAG,OAAO,CAAC,SAAS,CAAC;QACtB,IAAI,CAAC,UAAU,EAAE;YACf,OAAO;SACR;QAED,MAAM,CAAC,GAAG,OAAO,CAAC,UAAU,CAAC;QAC7B,IAAI,OAAO,CAAC,aAAa,IAAI,OAAO,CAAC,SAAS,EAAE;YAC9C,MAAM,GAAG,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;YAC9C,IAAI,GAAG,CAAC,KAAK,KAAK,SAAS,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE;gBACxC,OAAO;aACR;YAED,OAAO,CAAC,mBAAmB,EAAE,CAAC;YAE9B,OAAO,CAAC,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;YAEvE,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,cAAc,EAAE,aAAa,CAAC,CAAC;YACtE,OAAO,CAAC,sBAAsB,EAAE,CAAC;YACjC,OAAO,CAAC,sBAAsB,EAAE,CAAC;SAClC;aAAM;YACL,OAAO,CAAC,mBAAmB,EAAE,CAAC;YAC9B,OAAO,CAAC,SAAS,GAAG,UAAoB,CAAC;YACzC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;YACpD,OAAO,CAAC,sBAAsB,EAAE,CAAC;SAClC;IACH,CAAC;CACF;AAED,MAAM,CAAC,MAAM,uCAAuC,GAAG,IAAI,uCAAuC,EAAE,CAAC","file":"text-contribution-render.js","sourcesContent":["import { BaseRenderContributionTime } from '../../../../common/enums';\nimport type {\n  IContext2d,\n  IDrawContext,\n  IGraphicAttribute,\n  IText,\n  ITextRenderContribution,\n  IThemeAttribute\n} from '../../../../interface';\nimport { DefaultBaseBackgroundRenderContribution } from './base-contribution-render';\n\nexport class DefaultTextBackgroundRenderContribution\n  extends DefaultBaseBackgroundRenderContribution\n  implements ITextRenderContribution\n{\n  time: BaseRenderContributionTime = BaseRenderContributionTime.beforeFillStroke;\n\n  drawShape(\n    graphic: IText,\n    context: IContext2d,\n    x: number,\n    y: number,\n    doFill: boolean,\n    doStroke: boolean,\n    fVisible: boolean,\n    sVisible: boolean,\n    graphicAttribute: Required<IGraphicAttribute>,\n    drawContext: IDrawContext,\n    fillCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean,\n    strokeCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean\n  ) {\n    const {\n      background,\n      backgroundMode = graphicAttribute.backgroundMode,\n      backgroundFit = graphicAttribute.backgroundFit\n    } = graphic.attribute;\n    if (!background) {\n      return;\n    }\n\n    const b = graphic.AABBBounds;\n    if (graphic.backgroundImg && graphic.resources) {\n      const res = graphic.resources.get(background);\n      if (res.state !== 'success' || !res.data) {\n        return;\n      }\n\n      context.highPerformanceSave();\n\n      context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true);\n\n      this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit);\n      context.highPerformanceRestore();\n      context.setTransformForCurrent();\n    } else {\n      context.highPerformanceSave();\n      context.fillStyle = background as string;\n      context.fillRect(b.x1, b.y1, b.width(), b.height());\n      context.highPerformanceRestore();\n    }\n  }\n}\n\nexport const defaultTextBackgroundRenderContribution = new DefaultTextBackgroundRenderContribution();\n\n// @injectable()\n// export class DefaultTextPopTipRenderContribution\n//   extends DefaultBasePopTipRenderContribution\n//   implements ITextRenderContribution\n// {\n//   time: BaseRenderContributionTime = BaseRenderContributionTime.afterFillStroke;\n// }\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visactor/vrender-core",
-  "version": "0.17.11-alpha.2",
+  "version": "0.17.11",
   "description": "",
   "sideEffects": [
     "./src/modules.ts"