@visactor/vrender-core 0.21.14 → 0.22.0-vstory.10

package/cjs/interface/animate.d.ts

@@ -2,48 +2,10 @@ import type { EventEmitter } from '@visactor/vutils';
 import type { AnimateMode, AnimateStatus, AnimateStepType } from '../common/enums';
 import type { Releaseable } from './common';
 import type { IGraphic } from './graphic';
-export declare class Easing {
-    static linear(t: number): number;
-    static none(): typeof Easing.linear;
-    static get(amount: number): (t: number) => number;
-    static getPowIn(pow: number): (t: number) => number;
-    static getPowOut(pow: number): (t: number) => number;
-    static getPowInOut(pow: number): (t: number) => number;
-    static quadIn: (t: number) => number;
-    static quadOut: (t: number) => number;
-    static quadInOut: (t: number) => number;
-    static cubicIn: (t: number) => number;
-    static cubicOut: (t: number) => number;
-    static cubicInOut: (t: number) => number;
-    static quartIn: (t: number) => number;
-    static quartOut: (t: number) => number;
-    static quartInOut: (t: number) => number;
-    static quintIn: (t: number) => number;
-    static quintOut: (t: number) => number;
-    static quintInOut: (t: number) => number;
-    static getBackIn(amount: number): (t: number) => number;
-    static getBackOut(amount: number): (t: number) => number;
-    static getBackInOut(amount: number): (t: number) => number;
-    static backIn: (t: number) => number;
-    static backOut: (t: number) => number;
-    static backInOut: (t: number) => number;
-    static circIn(t: number): number;
-    static circOut(t: number): number;
-    static circInOut(t: number): number;
-    static bounceOut(t: number): number;
-    static bounceIn(t: number): number;
-    static bounceInOut(t: number): number;
-    static getElasticIn(amplitude: number, period: number): (t: number) => number;
-    static getElasticOut(amplitude: number, period: number): (t: number) => number;
-    static getElasticInOut(amplitude: number, period: number): (t: number) => number;
-    static elasticIn: (t: number) => number;
-    static elasticOut: (t: number) => number;
-    static elasticInOut: (t: number) => number;
-}
 export interface Timeline {
     AnimateList: IAnimate[];
 }
-export type EasingTypeStr = 'linear' | 'quadIn' | 'quadOut' | 'quadInOut' | 'quadInOut' | 'cubicIn' | 'cubicOut' | 'cubicInOut' | 'quartIn' | 'quartOut' | 'quartInOut' | 'quintIn' | 'quintOut' | 'quintInOut' | 'backIn' | 'backOut' | 'backInOut' | 'circIn' | 'circOut' | 'circInOut' | 'bounceOut' | 'bounceIn' | 'bounceInOut' | 'elasticIn' | 'elasticOut' | 'elasticInOut' | 'sineIn' | 'sineOut' | 'sineInOut' | 'expoIn' | 'expoOut' | 'expoInOut' | '';
+export type EasingTypeStr = 'linear' | 'quadIn' | 'quadOut' | 'quadInOut' | 'quadInOut' | 'cubicIn' | 'cubicOut' | 'cubicInOut' | 'quartIn' | 'quartOut' | 'quartInOut' | 'quintIn' | 'quintOut' | 'quintInOut' | 'backIn' | 'backOut' | 'backInOut' | 'circIn' | 'circOut' | 'circInOut' | 'bounceOut' | 'bounceIn' | 'bounceInOut' | 'elasticIn' | 'elasticOut' | 'elasticInOut' | 'sineIn' | 'sineOut' | 'sineInOut' | 'expoIn' | 'expoOut' | 'expoInOut' | 'easeInOutQuad' | 'easeOutElastic' | 'easeInOutElastic' | '';
 export type EasingTypeFunc = (t: number) => number;
 export type EasingType = EasingTypeStr | EasingTypeFunc;
 export type IAnimateStepType = keyof typeof AnimateStepType;
@@ -103,6 +65,7 @@ export interface IAnimate {
     getStartProps: () => Record<string, any>;
     getEndProps: () => Record<string, any>;
     setTimeline: (timeline: ITimeline) => void;
+    readonly timeline: ITimeline;
     bind: (target: IAnimateTarget) => this;
     to: (props: Record<string, any>, duration: number, easing: EasingType, params?: IStepConfig) => this;
     from: (props: Record<string, any>, duration: number, easing: EasingType, params?: IStepConfig) => this;
@@ -191,4 +154,7 @@ export interface ITicker extends EventEmitter {
     addTimeline: (timeline: ITimeline) => void;
     remTimeline: (timeline: ITimeline) => void;
     trySyncTickStatus: () => void;
+    getTimelines: () => ITimeline[];
+    release: () => void;
+    autoStop: boolean;
 }

package/cjs/interface/animate.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/interface/animate.ts"],"names":[],"mappings":"","file":"animate.js","sourcesContent":["import type { EventEmitter } from '@visactor/vutils';\nimport type { AnimateMode, AnimateStatus, AnimateStepType } from '../common/enums';\nimport type { Releaseable } from './common';\nimport type { IGraphic } from './graphic';\n\n// export type EasingType = (...args: any) => any;\n\nexport declare class Easing {\n  static linear(t: number): number;\n  static none(): typeof Easing.linear;\n  /**\n   * 获取缓动函数，amount指示这个缓动函数的插值方式\n   * @param amount\n   * @returns\n   */\n  static get(amount: number): (t: number) => number;\n  static getPowIn(pow: number): (t: number) => number;\n  static getPowOut(pow: number): (t: number) => number;\n  static getPowInOut(pow: number): (t: number) => number;\n  static quadIn: (t: number) => number;\n  static quadOut: (t: number) => number;\n  static quadInOut: (t: number) => number;\n  static cubicIn: (t: number) => number;\n  static cubicOut: (t: number) => number;\n  static cubicInOut: (t: number) => number;\n  static quartIn: (t: number) => number;\n  static quartOut: (t: number) => number;\n  static quartInOut: (t: number) => number;\n  static quintIn: (t: number) => number;\n  static quintOut: (t: number) => number;\n  static quintInOut: (t: number) => number;\n  static getBackIn(amount: number): (t: number) => number;\n  static getBackOut(amount: number): (t: number) => number;\n  static getBackInOut(amount: number): (t: number) => number;\n  static backIn: (t: number) => number;\n  static backOut: (t: number) => number;\n  static backInOut: (t: number) => number;\n  static circIn(t: number): number;\n  static circOut(t: number): number;\n  static circInOut(t: number): number;\n  static bounceOut(t: number): number;\n  static bounceIn(t: number): number;\n  static bounceInOut(t: number): number;\n  static getElasticIn(amplitude: number, period: number): (t: number) => number;\n  static getElasticOut(amplitude: number, period: number): (t: number) => number;\n  static getElasticInOut(amplitude: number, period: number): (t: number) => number;\n  static elasticIn: (t: number) => number;\n  static elasticOut: (t: number) => number;\n  static elasticInOut: (t: number) => number;\n}\n\n// timeline管理一堆的animate，多个timeline互不影响\n// timeline主要作用是基于layer层面的整体管理\n// 每个layer默认带有一个timeline\nexport interface Timeline {\n  AnimateList: IAnimate[];\n}\n\ntype IStopType = 'end' | 'start' | 'current';\n\n// TODO: 提供options配置可序列化\ninterface AnimateSpecItem {\n  type: 'to' | 'delay' | 'stop' | 'any';\n  params: any[];\n}\n\nexport type EasingTypeStr =\n  | 'linear'\n  | 'quadIn'\n  | 'quadOut'\n  | 'quadInOut'\n  | 'quadInOut'\n  | 'cubicIn'\n  | 'cubicOut'\n  | 'cubicInOut'\n  | 'quartIn'\n  | 'quartOut'\n  | 'quartInOut'\n  | 'quintIn'\n  | 'quintOut'\n  | 'quintInOut'\n  | 'backIn'\n  | 'backOut'\n  | 'backInOut'\n  | 'circIn'\n  | 'circOut'\n  | 'circInOut'\n  | 'bounceOut'\n  | 'bounceIn'\n  | 'bounceInOut'\n  | 'elasticIn'\n  | 'elasticOut'\n  | 'elasticInOut'\n  | 'sineIn'\n  | 'sineOut'\n  | 'sineInOut'\n  | 'expoIn'\n  | 'expoOut'\n  | 'expoInOut'\n  | '';\nexport type EasingTypeFunc = (t: number) => number;\n\nexport type EasingType = EasingTypeStr | EasingTypeFunc;\n\nexport type IAnimateStepType = keyof typeof AnimateStepType;\n\nexport interface IStep {\n  type: IAnimateStepType;\n  prev?: IStep;\n  // 持续时间\n  duration: number;\n  // 在animate中的位置\n  position: number;\n  next?: IStep;\n  props?: any;\n  parsedProps?: any;\n  propKeys?: string[];\n  easing?: EasingTypeFunc;\n  customAnimate?: ICustomAnimate;\n\n  append: (step: IStep) => void;\n  getLastProps: () => any;\n}\n\nexport interface IStepConfig {\n  tempProps?: boolean; // props为临时props，可以直接使用不用拷贝\n  noPreventAttrs?: boolean;\n}\n\nexport interface IAnimateTarget {\n  onAnimateBind?: (animte: IAnimate | ISubAnimate) => void;\n  // 添加动画step的时候调用\n  onAddStep?: (step: IStep) => void;\n  // step时调用\n  onStep: (subAnimate: ISubAnimate, animate: IAnimate, step: IStep, ratio: number, end: boolean) => void;\n  // 插值函数\n  stepInterpolate: (\n    subAnimate: ISubAnimate,\n    animate: IAnimate,\n    nextAttributes: Record<string, any>,\n    step: IStep,\n    ratio: number,\n    end: boolean,\n    nextProps: Record<string, any>,\n    lastProps?: Record<string, any>,\n    nextParsedProps?: any,\n    propKeys?: string[]\n  ) => void;\n  // 获取属性\n  getComputedAttribute: (name: string) => any;\n  // 获取默认属性\n  getDefaultAttribute: (name: string) => any;\n  onStop: (props?: Record<string, any>) => void;\n  animates: Map<string | number, IAnimate>;\n  [key: string]: any;\n}\n\nexport interface ICustomAnimate {\n  duration: number;\n  easing: EasingType;\n  step?: IStep;\n  mode?: AnimateMode;\n\n  bind: (target: IAnimateTarget, subAni: ISubAnimate) => void;\n  // 在第一次调用的时候触发\n  onBind: () => void;\n  // 第一次执行的时候调用\n  onFirstRun: () => void;\n  // 开始执行的时候调用（如果有循环，那每个周期都会调用）\n  onStart: () => void;\n  // 结束执行的时候调用（如果有循环，那每个周期都会调用）\n  onEnd: () => void;\n  onUpdate: (end: boolean, ratio: number, out: Record<string, any>) => void;\n  update: (end: boolean, ratio: number, out: Record<string, any>) => void;\n  getEndProps: () => Record<string, any> | void;\n  getFromProps: () => Record<string, any> | void;\n  getMergedEndProps: () => Record<string, any> | void;\n}\n\n// 每一个animate绑定一个graphic，用于描述这个graphic的动画内容\n// 在timeline层面，animate相当于是一段timeslice\nexport interface IAnimate {\n  readonly id: string | number;\n  status: AnimateStatus;\n\n  interpolateFunc: (key: string, ratio: number, from: any, to: any, nextAttributes: any) => boolean;\n\n  _onStart?: (() => void)[];\n  _onFrame?: ((step: IStep, ratio: number) => void)[];\n  _onEnd?: (() => void)[];\n  _onRemove?: (() => void)[];\n\n  getStartProps: () => Record<string, any>;\n  getEndProps: () => Record<string, any>;\n\n  setTimeline: (timeline: ITimeline) => void;\n\n  bind: (target: IAnimateTarget) => this;\n  to: (props: Record<string, any>, duration: number, easing: EasingType, params?: IStepConfig) => this;\n  from: (props: Record<string, any>, duration: number, easing: EasingType, params?: IStepConfig) => this;\n  pause: () => void;\n  resume: () => void;\n  onStart: (cb: () => void) => void;\n  onEnd: (cb: () => void) => void;\n  onFrame: (cb: (step: IStep, ratio: number) => void) => void;\n  // 屏蔽属性\n  preventAttr: (key: string) => void;\n  // 屏蔽属性\n  preventAttrs: (key: string[]) => void;\n  // 属性是否合法\n  validAttr: (key: string) => boolean;\n\n  runCb: (cb: (a: IAnimate, step: IStep) => void) => IAnimate;\n\n  // 自定义插值，返回false表示没有匹配上\n  customInterpolate: (\n    key: string,\n    ratio: number,\n    from: any,\n    to: any,\n    target: IAnimateTarget,\n    ret: Record<string, any>\n  ) => boolean;\n  //\n  play: (customAnimate: ICustomAnimate) => this;\n\n  // 获取该属性的上一个值\n  // getLastPropByName: (name: string, step: IStep) => any;\n  // delay: (duration: number) => IAnimate;\n  stop: (type?: 'start' | 'end' | Record<string, any>) => void;\n  /** 打上END标志，下一帧被删除 */\n  release: () => void;\n  // 获取持续的时长\n  getDuration: () => number;\n  // 获取动画开始时间（注意并不是子动画的startAt）\n  getStartTime: () => number;\n  // done: (cb: (_: any) => any) => IAnimate;\n  // pause: () => IAnimate;\n  // spec: (spec: AnimateSpecItem[]) => IAnimate;\n  // start: () => void; // 有start方法，避免动画提前开始（VGrammar需要时间处理数据）\n  wait: (delay: number) => this;\n\n  // // 编排\n  afterAll: (list: IAnimate[]) => this;\n  after: (animate: IAnimate) => this;\n  parallel: (animate: IAnimate) => this;\n\n  // // timislice (getter)\n  // startTime: number;\n  // endTime: number;\n  // startTimes: number[];\n  // endTimes: number[];\n\n  // // 高级参数，frame到frameEnd之间可以进行reverse，loop，bounce效果\n  // frame: () => IAnimate;\n  // frameEnd: () => IAnimate;\n  reversed: (r: boolean) => IAnimate;\n  loop: (n: number) => IAnimate;\n  bounce: (b: boolean) => IAnimate;\n\n  nextAnimate?: IAnimate;\n  prevAnimate?: IAnimate;\n\n  advance: (delta: number) => void;\n\n  startAt: (t: number) => IAnimate;\n\n  // // 语法糖\n  // create: (duration: number) => IAnimate;\n  // fadeIn: (duration: number) => IAnimate;\n}\n\nexport interface ISubAnimate {\n  getLastStep: () => IStep;\n  animate: IAnimate;\n  // 获取该属性的上一个值\n  getLastPropByName: (name: string, step: IStep) => any;\n}\n\n// rect.animate().abc().to({}, 1000).delay(1000).frame().to().delay().to().frameEnd().loop().bounce()\n\nexport interface BaseAnimateConfig {\n  id?: number | string;\n  interpolate?: (key: string, ratio: number, from: any, to: any, nextAttributes: any) => boolean;\n  onStart?: () => void;\n  onFrame?: (step: IStep, ratio: number) => void;\n  onEnd?: () => void;\n  onRemove?: () => void;\n}\n\n// VGrammar和 vrender命名不一致，好尴尬\nexport interface MorphingAnimateConfig extends Omit<BaseAnimateConfig, 'interpolate'> {\n  duration?: number;\n  easing?: EasingType; // 统一到easing\n  delay?: number;\n}\n\nexport interface MultiMorphingAnimateConfig extends MorphingAnimateConfig {\n  splitPath?: 'clone' | ((graphic: IGraphic, count: number, needAppend?: boolean) => IGraphic[]);\n  individualDelay?: (index: number, count: number, fromGraphic: IGraphic, toGraphic: IGraphic) => number;\n}\n\nexport interface ITimeline {\n  id: number;\n  animateCount: number;\n  addAnimate: (animate: IAnimate) => void;\n  removeAnimate: (animate: IAnimate, release?: boolean) => void;\n  tick: (delta: number) => void;\n  clear: () => void;\n  pause: () => void;\n  resume: () => void;\n}\n\nexport interface ITickHandler extends Releaseable {\n  avaliable: () => boolean;\n  /**\n   * 开始执行tick\n   * @param interval 延时 ms\n   * @param cb 执行的回调\n   */\n  tick: (interval: number, cb: (handler: ITickHandler) => void) => void; // 开始\n  tickTo?: (t: number, cb: (handler: ITickHandler, params?: { once: boolean }) => void) => void;\n  getTime: () => number; // 获取时间\n}\n\nexport interface ITickerHandlerStatic {\n  Avaliable: () => boolean;\n  new (): ITickHandler;\n}\n\nexport interface ITicker extends EventEmitter {\n  setFPS?: (fps: number) => void;\n  setInterval?: (interval: number) => void;\n  getFPS?: () => number;\n  getInterval?: () => number;\n  tick: (interval: number) => void;\n  tickAt?: (time: number) => void;\n  pause: () => boolean;\n  resume: () => boolean;\n  /**\n   * 开启tick，force为true强制开启，否则如果timeline为空则不开启\n   */\n  start: (force?: boolean) => boolean;\n  stop: () => void;\n  addTimeline: (timeline: ITimeline) => void;\n  remTimeline: (timeline: ITimeline) => void;\n  trySyncTickStatus: () => void;\n}\n"]}
+{"version":3,"sources":["../src/interface/animate.ts"],"names":[],"mappings":"","file":"animate.js","sourcesContent":["import type { EventEmitter } from '@visactor/vutils';\nimport type { AnimateMode, AnimateStatus, AnimateStepType } from '../common/enums';\nimport type { Releaseable } from './common';\nimport type { IGraphic } from './graphic';\n\n// export type EasingType = (...args: any) => any;\n\n// export declare class Easing {\n//   static linear(t: number): number;\n//   static none(): typeof Easing.linear;\n//   /**\n//    * 获取缓动函数，amount指示这个缓动函数的插值方式\n//    * @param amount\n//    * @returns\n//    */\n//   static get(amount: number): (t: number) => number;\n//   static getPowIn(pow: number): (t: number) => number;\n//   static getPowOut(pow: number): (t: number) => number;\n//   static getPowInOut(pow: number): (t: number) => number;\n//   static quadIn: (t: number) => number;\n//   static quadOut: (t: number) => number;\n//   static quadInOut: (t: number) => number;\n//   static cubicIn: (t: number) => number;\n//   static cubicOut: (t: number) => number;\n//   static cubicInOut: (t: number) => number;\n//   static quartIn: (t: number) => number;\n//   static quartOut: (t: number) => number;\n//   static quartInOut: (t: number) => number;\n//   static quintIn: (t: number) => number;\n//   static quintOut: (t: number) => number;\n//   static quintInOut: (t: number) => number;\n//   static getBackIn(amount: number): (t: number) => number;\n//   static getBackOut(amount: number): (t: number) => number;\n//   static getBackInOut(amount: number): (t: number) => number;\n//   static backIn: (t: number) => number;\n//   static backOut: (t: number) => number;\n//   static backInOut: (t: number) => number;\n//   static circIn(t: number): number;\n//   static circOut(t: number): number;\n//   static circInOut(t: number): number;\n//   static bounceOut(t: number): number;\n//   static bounceIn(t: number): number;\n//   static bounceInOut(t: number): number;\n//   static getElasticIn(amplitude: number, period: number): (t: number) => number;\n//   static getElasticOut(amplitude: number, period: number): (t: number) => number;\n//   static getElasticInOut(amplitude: number, period: number): (t: number) => number;\n//   static elasticIn: (t: number) => number;\n//   static elasticOut: (t: number) => number;\n//   static elasticInOut: (t: number) => number;\n// }\n\n// timeline管理一堆的animate，多个timeline互不影响\n// timeline主要作用是基于layer层面的整体管理\n// 每个layer默认带有一个timeline\nexport interface Timeline {\n  AnimateList: IAnimate[];\n}\n\ntype IStopType = 'end' | 'start' | 'current';\n\n// TODO: 提供options配置可序列化\ninterface AnimateSpecItem {\n  type: 'to' | 'delay' | 'stop' | 'any';\n  params: any[];\n}\n\nexport type EasingTypeStr =\n  | 'linear'\n  | 'quadIn'\n  | 'quadOut'\n  | 'quadInOut'\n  | 'quadInOut'\n  | 'cubicIn'\n  | 'cubicOut'\n  | 'cubicInOut'\n  | 'quartIn'\n  | 'quartOut'\n  | 'quartInOut'\n  | 'quintIn'\n  | 'quintOut'\n  | 'quintInOut'\n  | 'backIn'\n  | 'backOut'\n  | 'backInOut'\n  | 'circIn'\n  | 'circOut'\n  | 'circInOut'\n  | 'bounceOut'\n  | 'bounceIn'\n  | 'bounceInOut'\n  | 'elasticIn'\n  | 'elasticOut'\n  | 'elasticInOut'\n  | 'sineIn'\n  | 'sineOut'\n  | 'sineInOut'\n  | 'expoIn'\n  | 'expoOut'\n  | 'expoInOut'\n  // @since 0.21.0\n  | 'easeInOutQuad'\n  | 'easeOutElastic'\n  | 'easeInOutElastic'\n  | '';\nexport type EasingTypeFunc = (t: number) => number;\n\nexport type EasingType = EasingTypeStr | EasingTypeFunc;\n\nexport type IAnimateStepType = keyof typeof AnimateStepType;\n\nexport interface IStep {\n  type: IAnimateStepType;\n  prev?: IStep;\n  // 持续时间\n  duration: number;\n  // 在animate中的位置\n  position: number;\n  next?: IStep;\n  props?: any;\n  parsedProps?: any;\n  propKeys?: string[];\n  easing?: EasingTypeFunc;\n  customAnimate?: ICustomAnimate;\n\n  append: (step: IStep) => void;\n  getLastProps: () => any;\n}\n\nexport interface IStepConfig {\n  tempProps?: boolean; // props为临时props，可以直接使用不用拷贝\n  noPreventAttrs?: boolean;\n}\n\nexport interface IAnimateTarget {\n  onAnimateBind?: (animte: IAnimate | ISubAnimate) => void;\n  // 添加动画step的时候调用\n  onAddStep?: (step: IStep) => void;\n  // step时调用\n  onStep: (subAnimate: ISubAnimate, animate: IAnimate, step: IStep, ratio: number, end: boolean) => void;\n  // 插值函数\n  stepInterpolate: (\n    subAnimate: ISubAnimate,\n    animate: IAnimate,\n    nextAttributes: Record<string, any>,\n    step: IStep,\n    ratio: number,\n    end: boolean,\n    nextProps: Record<string, any>,\n    lastProps?: Record<string, any>,\n    nextParsedProps?: any,\n    propKeys?: string[]\n  ) => void;\n  // 获取属性\n  getComputedAttribute: (name: string) => any;\n  // 获取默认属性\n  getDefaultAttribute: (name: string) => any;\n  onStop: (props?: Record<string, any>) => void;\n  animates: Map<string | number, IAnimate>;\n  [key: string]: any;\n}\n\nexport interface ICustomAnimate {\n  duration: number;\n  easing: EasingType;\n  step?: IStep;\n  mode?: AnimateMode;\n\n  bind: (target: IAnimateTarget, subAni: ISubAnimate) => void;\n  // 在第一次调用的时候触发\n  onBind: () => void;\n  // 第一次执行的时候调用\n  onFirstRun: () => void;\n  // 开始执行的时候调用（如果有循环，那每个周期都会调用）\n  onStart: () => void;\n  // 结束执行的时候调用（如果有循环，那每个周期都会调用）\n  onEnd: () => void;\n  onUpdate: (end: boolean, ratio: number, out: Record<string, any>) => void;\n  update: (end: boolean, ratio: number, out: Record<string, any>) => void;\n  getEndProps: () => Record<string, any> | void;\n  getFromProps: () => Record<string, any> | void;\n  getMergedEndProps: () => Record<string, any> | void;\n}\n\n// 每一个animate绑定一个graphic，用于描述这个graphic的动画内容\n// 在timeline层面，animate相当于是一段timeslice\nexport interface IAnimate {\n  readonly id: string | number;\n  status: AnimateStatus;\n\n  interpolateFunc: (key: string, ratio: number, from: any, to: any, nextAttributes: any) => boolean;\n\n  _onStart?: (() => void)[];\n  _onFrame?: ((step: IStep, ratio: number) => void)[];\n  _onEnd?: (() => void)[];\n  _onRemove?: (() => void)[];\n\n  getStartProps: () => Record<string, any>;\n  getEndProps: () => Record<string, any>;\n\n  setTimeline: (timeline: ITimeline) => void;\n  // getTimeline: () => ITimeline;\n  readonly timeline: ITimeline;\n\n  bind: (target: IAnimateTarget) => this;\n  to: (props: Record<string, any>, duration: number, easing: EasingType, params?: IStepConfig) => this;\n  from: (props: Record<string, any>, duration: number, easing: EasingType, params?: IStepConfig) => this;\n  pause: () => void;\n  resume: () => void;\n  onStart: (cb: () => void) => void;\n  onEnd: (cb: () => void) => void;\n  onFrame: (cb: (step: IStep, ratio: number) => void) => void;\n  // 屏蔽属性\n  preventAttr: (key: string) => void;\n  // 屏蔽属性\n  preventAttrs: (key: string[]) => void;\n  // 属性是否合法\n  validAttr: (key: string) => boolean;\n\n  runCb: (cb: (a: IAnimate, step: IStep) => void) => IAnimate;\n\n  // 自定义插值，返回false表示没有匹配上\n  customInterpolate: (\n    key: string,\n    ratio: number,\n    from: any,\n    to: any,\n    target: IAnimateTarget,\n    ret: Record<string, any>\n  ) => boolean;\n  //\n  play: (customAnimate: ICustomAnimate) => this;\n\n  // 获取该属性的上一个值\n  // getLastPropByName: (name: string, step: IStep) => any;\n  // delay: (duration: number) => IAnimate;\n  stop: (type?: 'start' | 'end' | Record<string, any>) => void;\n  /** 打上END标志，下一帧被删除 */\n  release: () => void;\n  // 获取持续的时长\n  getDuration: () => number;\n  // 获取动画开始时间（注意并不是子动画的startAt）\n  getStartTime: () => number;\n  // done: (cb: (_: any) => any) => IAnimate;\n  // pause: () => IAnimate;\n  // spec: (spec: AnimateSpecItem[]) => IAnimate;\n  // start: () => void; // 有start方法，避免动画提前开始（VGrammar需要时间处理数据）\n  wait: (delay: number) => this;\n\n  // // 编排\n  afterAll: (list: IAnimate[]) => this;\n  after: (animate: IAnimate) => this;\n  parallel: (animate: IAnimate) => this;\n\n  // // timislice (getter)\n  // startTime: number;\n  // endTime: number;\n  // startTimes: number[];\n  // endTimes: number[];\n\n  // // 高级参数，frame到frameEnd之间可以进行reverse，loop，bounce效果\n  // frame: () => IAnimate;\n  // frameEnd: () => IAnimate;\n  reversed: (r: boolean) => IAnimate;\n  loop: (n: number) => IAnimate;\n  bounce: (b: boolean) => IAnimate;\n\n  nextAnimate?: IAnimate;\n  prevAnimate?: IAnimate;\n\n  advance: (delta: number) => void;\n\n  startAt: (t: number) => IAnimate;\n\n  // // 语法糖\n  // create: (duration: number) => IAnimate;\n  // fadeIn: (duration: number) => IAnimate;\n}\n\nexport interface ISubAnimate {\n  getLastStep: () => IStep;\n  animate: IAnimate;\n  // 获取该属性的上一个值\n  getLastPropByName: (name: string, step: IStep) => any;\n}\n\n// rect.animate().abc().to({}, 1000).delay(1000).frame().to().delay().to().frameEnd().loop().bounce()\n\nexport interface BaseAnimateConfig {\n  id?: number | string;\n  interpolate?: (key: string, ratio: number, from: any, to: any, nextAttributes: any) => boolean;\n  onStart?: () => void;\n  onFrame?: (step: IStep, ratio: number) => void;\n  onEnd?: () => void;\n  onRemove?: () => void;\n}\n\n// VGrammar和 vrender命名不一致，好尴尬\nexport interface MorphingAnimateConfig extends Omit<BaseAnimateConfig, 'interpolate'> {\n  duration?: number;\n  easing?: EasingType; // 统一到easing\n  delay?: number;\n}\n\nexport interface MultiMorphingAnimateConfig extends MorphingAnimateConfig {\n  splitPath?: 'clone' | ((graphic: IGraphic, count: number, needAppend?: boolean) => IGraphic[]);\n  individualDelay?: (index: number, count: number, fromGraphic: IGraphic, toGraphic: IGraphic) => number;\n}\n\nexport interface ITimeline {\n  id: number;\n  animateCount: number;\n  addAnimate: (animate: IAnimate) => void;\n  removeAnimate: (animate: IAnimate, release?: boolean) => void;\n  tick: (delta: number) => void;\n  clear: () => void;\n  pause: () => void;\n  resume: () => void;\n}\n\nexport interface ITickHandler extends Releaseable {\n  avaliable: () => boolean;\n  /**\n   * 开始执行tick\n   * @param interval 延时 ms\n   * @param cb 执行的回调\n   */\n  tick: (interval: number, cb: (handler: ITickHandler) => void) => void; // 开始\n  tickTo?: (t: number, cb: (handler: ITickHandler, params?: { once: boolean }) => void) => void;\n  getTime: () => number; // 获取时间\n}\n\nexport interface ITickerHandlerStatic {\n  Avaliable: () => boolean;\n  new (): ITickHandler;\n}\n\nexport interface ITicker extends EventEmitter {\n  setFPS?: (fps: number) => void;\n  setInterval?: (interval: number) => void;\n  getFPS?: () => number;\n  getInterval?: () => number;\n  tick: (interval: number) => void;\n  tickAt?: (time: number) => void;\n  pause: () => boolean;\n  resume: () => boolean;\n  /**\n   * 开启tick，force为true强制开启，否则如果timeline为空则不开启\n   */\n  start: (force?: boolean) => boolean;\n  stop: () => void;\n  addTimeline: (timeline: ITimeline) => void;\n  remTimeline: (timeline: ITimeline) => void;\n  trySyncTickStatus: () => void;\n  getTimelines: () => ITimeline[];\n\n  release: () => void;\n\n  // 是否自动停止，默认为true\n  autoStop: boolean;\n}\n"]}

package/cjs/interface/color.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/interface/color.ts"],"names":[],"mappings":"","file":"color.js","sourcesContent":["interface IGradientStop {\n  /**\n   * 颜色偏移量, 0-1的值\n   */\n  offset: number;\n  /**\n   * 颜色值\n   */\n  color: string;\n}\n\nexport type IGradientColor = ILinearGradient | IRadialGradient | IConicalGradient;\n\n/**\n * 线性渐变色\n */\nexport interface ILinearGradient {\n  /**\n   * 渐变色的类型设置为 'linear'，即线形渐变\n   */\n  gradient: 'linear';\n  /**\n   * 渐变色的起点x坐标，0-1的值，相对于图形包围盒x方向取值的比例值\n   */\n  x0?: number;\n  /**\n   * 渐变色的起点y坐标，0-1的值，相对于图形包围盒y方向取值的比例值\n   */\n  y0?: number;\n  /**\n   * 渐变色的终点x坐标，0-1的值，相对于图形包围盒x方向取值的比例值\n   */\n  x1?: number;\n  /**\n   * 渐变色的终点y坐标，0-1的值，相对于图形包围盒y方向取值的比例值\n   */\n  y1?: number;\n  /**\n   * 渐变色的颜色数组，每个颜色对象包含一个偏移量（0-1）和一个颜色值\n   */\n  stops: IGradientStop[];\n}\n\n/**\n * 径向渐变色\n */\nexport interface IRadialGradient {\n  /**\n   * 渐变色的类型设置为 'radial'，即环形渐变\n   */\n  gradient: 'radial';\n  /**\n   * 径向渐变的起点的x坐标\n   */\n  x0?: number;\n  /**\n   * 径向渐变的起点的y坐标\n   */\n  y0?: number;\n  /**\n   * 径向渐变的终点的x坐标\n   */\n  x1?: number;\n  /**\n   * 径向渐变的终点的x坐标\n   */\n  y1?: number;\n  /**\n   * 径向渐变的起点的半径\n   */\n  r0?: number;\n  /**\n   * 径向渐变的终点的半径\n   */\n  r1?: number;\n  /**\n   * 径向渐变的颜色数组，每个颜色对象包含一个偏移量（0-1）和一个颜色值\n   */\n  stops: IGradientStop[];\n}\n\n/**\n * 环形渐变色/锥形渐变色\n */\nexport interface IConicalGradient {\n  /**\n   * 渐变色的类型设置为 'conical'，即环形渐变\n   */\n  gradient: 'conical';\n  /**\n   * 锥形渐变的开始角度\n   */\n  startAngle?: number;\n  /**\n   * 锥形渐变的开始角度\n   */\n  endAngle?: number;\n  /**\n   * 锥形渐变的中心点x坐标\n   */\n  x?: number;\n  /**\n   * 锥形渐变的中心点y坐标\n   */\n  y?: number;\n  /**\n   * 锥形渐变的颜色\n   */\n  stops: IGradientStop[];\n}\n\nexport interface IColorStop {\n  /**\n   * 颜色偏移量, 0-1的值\n   */\n  offset: number;\n  /**\n   * 颜色值\n   */\n  color: string;\n}\n\n/**\n * 颜色类型，\n * 支持字符串、线性渐变、径向渐变、锥形渐变\n */\nexport type IColor = string | ILinearGradient | IRadialGradient | IConicalGradient;\n"]}
+{"version":3,"sources":["../src/interface/color.ts"],"names":[],"mappings":"","file":"color.js","sourcesContent":["interface IGradientStop {\n  offset: number;\n  color: string;\n}\n\nexport type IGradientColor = ILinearGradient | IRadialGradient | IConicalGradient;\n\nexport interface ILinearGradient {\n  gradient: 'linear';\n  x0?: number;\n  y0?: number;\n  x1?: number;\n  y1?: number;\n  stops: IGradientStop[];\n}\n\nexport interface IRadialGradient {\n  gradient: 'radial';\n  x0?: number;\n  y0?: number;\n  x1?: number;\n  y1?: number;\n  r0?: number;\n  r1?: number;\n  stops: IGradientStop[];\n}\n\nexport interface IConicalGradient {\n  gradient: 'conical';\n  startAngle?: number;\n  endAngle?: number;\n  x?: number;\n  y?: number;\n  stops: IGradientStop[];\n}\n\nexport interface IColorStop {\n  offset: number;\n  color: string;\n}\n\nexport type IColor = string | ILinearGradient | IRadialGradient | IConicalGradient;\n"]}

package/cjs/interface/context.d.ts

@@ -19,6 +19,7 @@ export interface ICommonStyleParams {
     globalCompositeOperation?: CanvasRenderingContext2D['globalCompositeOperation'] | '';
     opacity?: number;
     blur?: number;
+    filter?: string;
 }
 export interface IStrokeStyleParams {
     stroke?: IStrokeType | IStrokeType[];

package/cjs/interface/context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/interface/context.ts"],"names":[],"mappings":"","file":"context.js","sourcesContent":["import type { Matrix, IMatrix, IBoundsLike, IPointLike } from '@visactor/vutils';\nimport type { ICamera } from './camera';\nimport type { ICanvas } from './canvas';\nimport type { Releaseable } from './common';\nimport type { mat4, vec3 } from './matrix';\nimport type { IFillType, IStrokeType, ITransform } from './graphic';\n\nexport interface IConicalGradientData {\n  addColorStop: (pos: number, color: string) => void;\n  readonly stops: [number, string][];\n  GetPattern: (minW: number, minH: number, deltaAngle?: number) => CanvasPattern | null;\n}\n\n// 用于commonStyle函数的参数\nexport interface ICommonStyleParams {\n  fill?: IFillType;\n  fillOpacity?: number;\n  shadowBlur?: number;\n  shadowColor?: string;\n  shadowOffsetX?: number;\n  shadowOffsetY?: number;\n  globalCompositeOperation?: CanvasRenderingContext2D['globalCompositeOperation'] | '';\n  opacity?: number;\n  blur?: number;\n}\n\nexport interface IStrokeStyleParams {\n  stroke?: IStrokeType | IStrokeType[];\n  strokeOpacity?: number;\n  lineDash?: number[];\n  lineDashOffset?: number;\n  lineWidth?: number;\n  lineCap?: CanvasLineCap;\n  lineJoin?: CanvasLineJoin;\n  miterLimit?: number;\n  opacity?: number;\n  keepStrokeScale?: boolean;\n}\nexport interface ITextStyleParams {\n  font?: string;\n  fontSize: number;\n  fontFamily?: string;\n  fontWeight?: string | number;\n  textAlign?: CanvasTextAlign;\n  textBaseline?: CanvasTextBaseline;\n  scaleIn3d?: boolean;\n}\n\nexport interface ISetCommonStyleParams {\n  attribute: Partial<ICommonStyleParams & ITransform>;\n  AABBBounds: IBoundsLike;\n}\n\nexport interface ISetStrokeStyleParams {\n  attribute: Partial<IStrokeStyleParams & ITransform>;\n  AABBBounds: IBoundsLike;\n}\nexport interface IContext2d extends Releaseable {\n  stack: IMatrix[];\n  inuse?: boolean;\n  camera?: ICamera;\n  modelMatrix?: mat4;\n  drawPromise?: Promise<any>;\n  baseGlobalAlpha?: number;\n  // 属性代理\n  fillStyle: string | CanvasGradient | CanvasPattern;\n  disableFill?: boolean;\n  disableStroke?: boolean;\n  disableBeginPath?: boolean;\n  /**\n   * @deprecated font方法不建议使用，请使用setTextStyle\n   */\n  font: string;\n  globalAlpha: number;\n  lineCap: string;\n  lineDashOffset: number;\n  lineJoin: string;\n  lineWidth: number;\n  miterLimit: number;\n  shadowBlur: number;\n  shadowColor: string;\n  shadowOffsetX: number;\n  shadowOffsetY: number;\n  strokeStyle: string | CanvasGradient | CanvasPattern;\n  dpr: number;\n  /**\n   * @deprecated textAlign方法不建议使用，请使用setTextStyle\n   */\n  textAlign: string;\n  /**\n   * @deprecated textBaseline方法不建议使用，请使用setTextStyle\n   */\n  textBaseline: string;\n  nativeContext: CanvasRenderingContext2D | any;\n  canvas: ICanvas;\n  [key: string]: any; //类型没有索引签名\n\n  getCanvas: () => ICanvas;\n\n  getContext: () => any;\n\n  /**\n   * 设置当前ctx 的transform信息\n   */\n  setTransformForCurrent: (force?: boolean) => void;\n  /**\n   * 获取当前矩阵信息\n   */\n  currentMatrix: IMatrix;\n\n  /**\n   * 清空画布\n   */\n  clear: () => void;\n\n  restore: () => void;\n  highPerformanceRestore: () => void;\n\n  /**\n   *\n   * @param angle 弧度数\n   */\n  rotate: (angle: number, setTransform?: boolean) => void;\n\n  save: () => void;\n  highPerformanceSave: () => void;\n\n  project?: (x: number, y: number, z?: number) => IPointLike;\n  view?: (x: number, y: number, z?: number) => vec3;\n\n  scale: (x: number, y: number, setTransform?: boolean) => void;\n\n  scalePoint: (sx: number, sy: number, px: number, py: number, setTransform?: boolean) => void;\n  transform: (\n    m11: number,\n    m12: number,\n    m21: number,\n    m22: number,\n    dx: number,\n    dy: number,\n    setTransform?: boolean\n  ) => void;\n  transformFromMatrix: (matrix: Matrix, setTransform?: boolean) => void;\n  setTransform: (\n    m11: number,\n    m12: number,\n    m21: number,\n    m22: number,\n    dx: number,\n    dy: number,\n    setTransform?: boolean,\n    dpr?: number\n  ) => void;\n  setTransformFromMatrix: (matrix: Matrix, setTransform?: boolean, dpr?: number) => void;\n\n  resetTransform: (setTransform?: boolean, dpr?: number) => void;\n\n  translate: (x: number, y: number, setTransform?: boolean) => void;\n  /**\n   * 旋转角度，自动转换为弧度\n   * @param deg 角度数\n   */\n  rotateDegrees: (deg: number, setTransform?: boolean) => void;\n\n  /**\n   * 绕点旋转\n   * @param rad 弧度\n   * @param x 旋转中心点x\n   * @param y 旋转中心点y\n   */\n  rotateAbout: (rad: number, x: number, y: number, setTransform?: boolean) => void;\n\n  /**\n   * 绕点旋转\n   * @param deg 旋转角度\n   * @param x 旋转中心点x\n   * @param y 旋转中心点y\n   */\n  rotateDegreesAbout: (deg: number, x: number, y: number, setTransform?: boolean) => void;\n\n  beginPath: () => void;\n\n  clip: ((fillRule?: CanvasFillRule) => void) & ((path: Path2D, fillRule?: CanvasFillRule) => void);\n\n  arc: (\n    x: number,\n    y: number,\n    radius: number,\n    startAngle: number,\n    endAngle: number,\n    anticlockwise?: boolean,\n    z?: number\n  ) => void;\n\n  arcTo: (x1: number, y1: number, x2: number, y2: number, radius: number) => void;\n\n  bezierCurveTo: (cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number) => void;\n\n  closePath: () => void;\n\n  ellipse: (\n    x: number,\n    y: number,\n    radiusX: number,\n    radiusY: number,\n    rotation: number,\n    startAngle: number,\n    endAngle: number,\n    anticlockwise?: boolean\n  ) => void;\n\n  lineTo: (x: number, y: number, z?: number) => void;\n\n  moveTo: (x: number, y: number, z?: number) => void;\n\n  quadraticCurveTo: (cpx: number, cpy: number, x: number, y: number, z?: number) => void;\n\n  rect: (x: number, y: number, w: number, h: number, z?: number) => void;\n\n  createImageData: (imageDataOrSw: number | ImageData, sh?: number) => ImageData;\n\n  createLinearGradient: (x0: number, y0: number, x1: number, y1: number) => CanvasGradient;\n\n  createPattern: (\n    image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ICanvas | any,\n    repetition: string\n  ) => CanvasPattern | null;\n\n  createRadialGradient: (x0: number, y0: number, r0: number, x1: number, y1: number, r1: number) => CanvasGradient;\n\n  createConicGradient: (x: number, y: number, startAngle: number, endAngle: number) => IConicalGradientData | null;\n\n  // createConicGradient: (x: number, y: number, startAngle: number, endAngle: number) => IConicalGradient | null;\n\n  // fill(fillRule?: CanvasFillRule): void;\n  fill: (path?: Path2D, fillRule?: CanvasFillRule) => void;\n\n  fillRect: (x: number, y: number, w: number, h: number) => void;\n\n  clearRect: (x: number, y: number, w: number, h: number) => void;\n\n  fillText: (text: string, x: number, y: number, z?: number) => void;\n\n  getImageData: (sx: number, sy: number, sw: number, sh: number) => ImageData;\n\n  getLineDash: () => number[];\n\n  isPointInPath: (x: number, y: number) => boolean;\n  isPointInStroke: (x: number, y: number) => boolean;\n\n  measureText: (text: string, method?: 'native' | 'simple' | 'quick') => { width: number };\n\n  putImageData: (imagedata: ImageData, dx: number, dy: number) => void;\n\n  setLineDash: (segments: number[]) => void;\n\n  stroke: (path?: Path2D) => void;\n\n  strokeRect: (x: number, y: number, w: number, h: number) => void;\n\n  strokeText: (text: string, x: number, y: number, z?: number) => void;\n\n  drawImage: ((\n    image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap | ICanvas | any,\n    dstX: number,\n    dstY: number\n  ) => void) &\n    ((\n      image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap | ICanvas | any,\n      dstX: number,\n      dstY: number,\n      dstW: number,\n      dstH: number\n    ) => void) &\n    ((\n      image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap | ICanvas | any,\n      srcX: number,\n      srcY: number,\n      srcW: number,\n      srcH: number,\n      dstX: number,\n      dstY: number,\n      dstW: number,\n      dstH: number\n    ) => void);\n\n  setCommonStyle: (\n    params: ISetCommonStyleParams,\n    attribute: ICommonStyleParams,\n    // 用于渐变色\n    offsetX: number,\n    offsetY: number,\n    defultParams?: ICommonStyleParams | Partial<ICommonStyleParams>[]\n  ) => void;\n\n  setShadowBlendStyle?: (\n    params: ISetCommonStyleParams,\n    attribute: ICommonStyleParams,\n    defultParams?: ICommonStyleParams | Partial<ICommonStyleParams>[]\n  ) => void;\n\n  setStrokeStyle: (\n    params: ISetStrokeStyleParams,\n    attribute: IStrokeStyleParams,\n    // 用于渐变色\n    offsetX: number,\n    offsetY: number,\n    defultParams?: Required<IStrokeStyleParams> | Partial<IStrokeStyleParams>[]\n  ) => void;\n\n  setTextStyle: (params: Partial<ITextStyleParams>, defaultParams?: ITextStyleParams, z?: number) => void;\n  setTextStyleWithoutAlignBaseline: (\n    params: Partial<ITextStyleParams>,\n    defaultParams?: ITextStyleParams,\n    z?: number\n  ) => void;\n\n  draw: (...params: any) => void;\n\n  clearMatrix: (setTransform?: boolean, dpr?: number) => void;\n  setClearMatrix: (a: number, b: number, c: number, d: number, e: number, f: number) => void;\n  onlyTranslate: (dpr?: number) => boolean;\n}\n\nexport interface IContextLike {\n  // 属性代理\n  fillStyle: string | CanvasGradient | CanvasPattern;\n  /**\n   * @deprecated font方法不建议使用，请使用setTextStyle\n   */\n  font: string;\n  globalAlpha: number;\n  lineCap: string;\n  lineDashOffset: number;\n  lineJoin: string;\n  lineWidth: number;\n  miterLimit: number;\n  shadowBlur: number;\n  shadowColor: string;\n  shadowOffsetX: number;\n  shadowOffsetY: number;\n  strokeStyle: string | CanvasGradient | CanvasPattern;\n  dpr: number;\n  /**\n   * @deprecated textAlign方法不建议使用，请使用setTextStyle\n   */\n  textAlign: string;\n  /**\n   * @deprecated textBaseline方法不建议使用，请使用setTextStyle\n   */\n  textBaseline: string;\n  nativeContext: CanvasRenderingContext2D | any;\n  [key: string]: any; //类型没有索引签名\n\n  /**\n   * 清空画布\n   */\n  clear: () => void;\n\n  restore: () => void;\n\n  save: () => void;\n\n  // transform(m11: number, m12: number, m21: number, m22: number, dx: number, dy: number): void;\n\n  translate: (x: number, y: number) => void;\n\n  beginPath: () => void;\n\n  clip: ((fillRule?: CanvasFillRule) => void) & ((path: Path2D, fillRule?: CanvasFillRule) => void);\n\n  arc: (x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean) => void;\n\n  arcTo: ((x1: number, y1: number, x2: number, y2: number, radius: number) => void) &\n    ((x1: number, y1: number, x2: number, y2: number, radiusX: number, radiusY: number, rotation: number) => void);\n\n  bezierCurveTo: (cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number) => void;\n\n  closePath: () => void;\n\n  ellipse: (\n    x: number,\n    y: number,\n    radiusX: number,\n    radiusY: number,\n    rotation: number,\n    startAngle: number,\n    endAngle: number,\n    anticlockwise?: boolean\n  ) => void;\n\n  lineTo: (x: number, y: number) => void;\n\n  moveTo: (x: number, y: number) => void;\n\n  quadraticCurveTo: (cpx: number, cpy: number, x: number, y: number) => void;\n\n  rect: (x: number, y: number, w: number, h: number) => void;\n\n  fill: (path?: Path2D, fillRule?: CanvasFillRule) => void;\n\n  fillRect: (x: number, y: number, w: number, h: number) => void;\n\n  clearRect: (x: number, y: number, w: number, h: number) => void;\n\n  fillText: (text: string, x: number, y: number, maxWidth?: number) => void;\n\n  getImageData: (sx: number, sy: number, sw: number, sh: number) => ImageData;\n\n  getLineDash: () => number[];\n\n  isPointInPath: (x: number, y: number) => boolean;\n  isPointInStroke: (x: number, y: number) => boolean;\n\n  measureText: (text: string, method?: 'native' | 'simple' | 'quick') => { width: number };\n\n  putImageData: (\n    imagedata: ImageData,\n    dx: number,\n    dy: number,\n    dirtyX?: number,\n    dirtyY?: number,\n    dirtyWidth?: number,\n    dirtyHeight?: number\n  ) => void;\n\n  setLineDash: (segments: number[]) => void;\n\n  stroke: (path?: Path2D) => void;\n\n  strokeRect: (x: number, y: number, w: number, h: number) => void;\n\n  strokeText: (text: string, x: number, y: number, maxWidth?: number) => void;\n\n  drawImage: ((\n    image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap | any,\n    dstX: number,\n    dstY: number\n  ) => void) &\n    ((\n      image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap | any,\n      dstX: number,\n      dstY: number,\n      dstW: number,\n      dstH: number\n    ) => void) &\n    ((\n      image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap | any,\n      srcX: number,\n      srcY: number,\n      srcW: number,\n      srcH: number,\n      dstX: number,\n      dstY: number,\n      dstW: number,\n      dstH: number\n    ) => void);\n\n  clearMatrix: () => void;\n  onlyTranslate: () => boolean;\n}\n"]}
+{"version":3,"sources":["../src/interface/context.ts"],"names":[],"mappings":"","file":"context.js","sourcesContent":["import type { Matrix, IMatrix, IBoundsLike, IPointLike } from '@visactor/vutils';\nimport type { ICamera } from './camera';\nimport type { ICanvas } from './canvas';\nimport type { Releaseable } from './common';\nimport type { mat4, vec3 } from './matrix';\nimport type { IFillType, IStrokeType, ITransform } from './graphic';\n\nexport interface IConicalGradientData {\n  addColorStop: (pos: number, color: string) => void;\n  readonly stops: [number, string][];\n  GetPattern: (minW: number, minH: number, deltaAngle?: number) => CanvasPattern | null;\n}\n\n// 用于commonStyle函数的参数\nexport interface ICommonStyleParams {\n  fill?: IFillType;\n  fillOpacity?: number;\n  shadowBlur?: number;\n  shadowColor?: string;\n  shadowOffsetX?: number;\n  shadowOffsetY?: number;\n  globalCompositeOperation?: CanvasRenderingContext2D['globalCompositeOperation'] | '';\n  opacity?: number;\n  blur?: number;\n  filter?: string;\n}\n\nexport interface IStrokeStyleParams {\n  stroke?: IStrokeType | IStrokeType[];\n  strokeOpacity?: number;\n  lineDash?: number[];\n  lineDashOffset?: number;\n  lineWidth?: number;\n  lineCap?: CanvasLineCap;\n  lineJoin?: CanvasLineJoin;\n  miterLimit?: number;\n  opacity?: number;\n  keepStrokeScale?: boolean;\n}\nexport interface ITextStyleParams {\n  font?: string;\n  fontSize: number;\n  fontFamily?: string;\n  fontWeight?: string | number;\n  textAlign?: CanvasTextAlign;\n  textBaseline?: CanvasTextBaseline;\n  scaleIn3d?: boolean;\n}\n\nexport interface ISetCommonStyleParams {\n  attribute: Partial<ICommonStyleParams & ITransform>;\n  AABBBounds: IBoundsLike;\n}\n\nexport interface ISetStrokeStyleParams {\n  attribute: Partial<IStrokeStyleParams & ITransform>;\n  AABBBounds: IBoundsLike;\n}\nexport interface IContext2d extends Releaseable {\n  stack: IMatrix[];\n  inuse?: boolean;\n  camera?: ICamera;\n  modelMatrix?: mat4;\n  drawPromise?: Promise<any>;\n  baseGlobalAlpha?: number;\n  // 属性代理\n  fillStyle: string | CanvasGradient | CanvasPattern;\n  disableFill?: boolean;\n  disableStroke?: boolean;\n  disableBeginPath?: boolean;\n  /**\n   * @deprecated font方法不建议使用，请使用setTextStyle\n   */\n  font: string;\n  globalAlpha: number;\n  lineCap: string;\n  lineDashOffset: number;\n  lineJoin: string;\n  lineWidth: number;\n  miterLimit: number;\n  shadowBlur: number;\n  shadowColor: string;\n  shadowOffsetX: number;\n  shadowOffsetY: number;\n  strokeStyle: string | CanvasGradient | CanvasPattern;\n  dpr: number;\n  /**\n   * @deprecated textAlign方法不建议使用，请使用setTextStyle\n   */\n  textAlign: string;\n  /**\n   * @deprecated textBaseline方法不建议使用，请使用setTextStyle\n   */\n  textBaseline: string;\n  nativeContext: CanvasRenderingContext2D | any;\n  canvas: ICanvas;\n  [key: string]: any; //类型没有索引签名\n\n  getCanvas: () => ICanvas;\n\n  getContext: () => any;\n\n  /**\n   * 设置当前ctx 的transform信息\n   */\n  setTransformForCurrent: (force?: boolean) => void;\n  /**\n   * 获取当前矩阵信息\n   */\n  currentMatrix: IMatrix;\n\n  /**\n   * 清空画布\n   */\n  clear: () => void;\n\n  restore: () => void;\n  highPerformanceRestore: () => void;\n\n  /**\n   *\n   * @param angle 弧度数\n   */\n  rotate: (angle: number, setTransform?: boolean) => void;\n\n  save: () => void;\n  highPerformanceSave: () => void;\n\n  project?: (x: number, y: number, z?: number) => IPointLike;\n  view?: (x: number, y: number, z?: number) => vec3;\n\n  scale: (x: number, y: number, setTransform?: boolean) => void;\n\n  scalePoint: (sx: number, sy: number, px: number, py: number, setTransform?: boolean) => void;\n  transform: (\n    m11: number,\n    m12: number,\n    m21: number,\n    m22: number,\n    dx: number,\n    dy: number,\n    setTransform?: boolean\n  ) => void;\n  transformFromMatrix: (matrix: Matrix, setTransform?: boolean) => void;\n  setTransform: (\n    m11: number,\n    m12: number,\n    m21: number,\n    m22: number,\n    dx: number,\n    dy: number,\n    setTransform?: boolean,\n    dpr?: number\n  ) => void;\n  setTransformFromMatrix: (matrix: Matrix, setTransform?: boolean, dpr?: number) => void;\n\n  resetTransform: (setTransform?: boolean, dpr?: number) => void;\n\n  translate: (x: number, y: number, setTransform?: boolean) => void;\n  /**\n   * 旋转角度，自动转换为弧度\n   * @param deg 角度数\n   */\n  rotateDegrees: (deg: number, setTransform?: boolean) => void;\n\n  /**\n   * 绕点旋转\n   * @param rad 弧度\n   * @param x 旋转中心点x\n   * @param y 旋转中心点y\n   */\n  rotateAbout: (rad: number, x: number, y: number, setTransform?: boolean) => void;\n\n  /**\n   * 绕点旋转\n   * @param deg 旋转角度\n   * @param x 旋转中心点x\n   * @param y 旋转中心点y\n   */\n  rotateDegreesAbout: (deg: number, x: number, y: number, setTransform?: boolean) => void;\n\n  beginPath: () => void;\n\n  clip: ((fillRule?: CanvasFillRule) => void) & ((path: Path2D, fillRule?: CanvasFillRule) => void);\n\n  arc: (\n    x: number,\n    y: number,\n    radius: number,\n    startAngle: number,\n    endAngle: number,\n    anticlockwise?: boolean,\n    z?: number\n  ) => void;\n\n  arcTo: (x1: number, y1: number, x2: number, y2: number, radius: number) => void;\n\n  bezierCurveTo: (cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number) => void;\n\n  closePath: () => void;\n\n  ellipse: (\n    x: number,\n    y: number,\n    radiusX: number,\n    radiusY: number,\n    rotation: number,\n    startAngle: number,\n    endAngle: number,\n    anticlockwise?: boolean\n  ) => void;\n\n  lineTo: (x: number, y: number, z?: number) => void;\n\n  moveTo: (x: number, y: number, z?: number) => void;\n\n  quadraticCurveTo: (cpx: number, cpy: number, x: number, y: number, z?: number) => void;\n\n  rect: (x: number, y: number, w: number, h: number, z?: number) => void;\n\n  createImageData: (imageDataOrSw: number | ImageData, sh?: number) => ImageData;\n\n  createLinearGradient: (x0: number, y0: number, x1: number, y1: number) => CanvasGradient;\n\n  createPattern: (\n    image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ICanvas | any,\n    repetition: string\n  ) => CanvasPattern | null;\n\n  createRadialGradient: (x0: number, y0: number, r0: number, x1: number, y1: number, r1: number) => CanvasGradient;\n\n  createConicGradient: (x: number, y: number, startAngle: number, endAngle: number) => IConicalGradientData | null;\n\n  // createConicGradient: (x: number, y: number, startAngle: number, endAngle: number) => IConicalGradient | null;\n\n  // fill(fillRule?: CanvasFillRule): void;\n  fill: (path?: Path2D, fillRule?: CanvasFillRule) => void;\n\n  fillRect: (x: number, y: number, w: number, h: number) => void;\n\n  clearRect: (x: number, y: number, w: number, h: number) => void;\n\n  fillText: (text: string, x: number, y: number, z?: number) => void;\n\n  getImageData: (sx: number, sy: number, sw: number, sh: number) => ImageData;\n\n  getLineDash: () => number[];\n\n  isPointInPath: (x: number, y: number) => boolean;\n  isPointInStroke: (x: number, y: number) => boolean;\n\n  measureText: (text: string, method?: 'native' | 'simple' | 'quick') => { width: number };\n\n  putImageData: (imagedata: ImageData, dx: number, dy: number) => void;\n\n  setLineDash: (segments: number[]) => void;\n\n  stroke: (path?: Path2D) => void;\n\n  strokeRect: (x: number, y: number, w: number, h: number) => void;\n\n  strokeText: (text: string, x: number, y: number, z?: number) => void;\n\n  drawImage: ((\n    image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap | ICanvas | any,\n    dstX: number,\n    dstY: number\n  ) => void) &\n    ((\n      image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap | ICanvas | any,\n      dstX: number,\n      dstY: number,\n      dstW: number,\n      dstH: number\n    ) => void) &\n    ((\n      image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap | ICanvas | any,\n      srcX: number,\n      srcY: number,\n      srcW: number,\n      srcH: number,\n      dstX: number,\n      dstY: number,\n      dstW: number,\n      dstH: number\n    ) => void);\n\n  setCommonStyle: (\n    params: ISetCommonStyleParams,\n    attribute: ICommonStyleParams,\n    // 用于渐变色\n    offsetX: number,\n    offsetY: number,\n    defultParams?: ICommonStyleParams | Partial<ICommonStyleParams>[]\n  ) => void;\n\n  setShadowBlendStyle?: (\n    params: ISetCommonStyleParams,\n    attribute: ICommonStyleParams,\n    defultParams?: ICommonStyleParams | Partial<ICommonStyleParams>[]\n  ) => void;\n\n  setStrokeStyle: (\n    params: ISetStrokeStyleParams,\n    attribute: IStrokeStyleParams,\n    // 用于渐变色\n    offsetX: number,\n    offsetY: number,\n    defultParams?: Required<IStrokeStyleParams> | Partial<IStrokeStyleParams>[]\n  ) => void;\n\n  setTextStyle: (params: Partial<ITextStyleParams>, defaultParams?: ITextStyleParams, z?: number) => void;\n  setTextStyleWithoutAlignBaseline: (\n    params: Partial<ITextStyleParams>,\n    defaultParams?: ITextStyleParams,\n    z?: number\n  ) => void;\n\n  draw: (...params: any) => void;\n\n  clearMatrix: (setTransform?: boolean, dpr?: number) => void;\n  setClearMatrix: (a: number, b: number, c: number, d: number, e: number, f: number) => void;\n  onlyTranslate: (dpr?: number) => boolean;\n}\n\nexport interface IContextLike {\n  // 属性代理\n  fillStyle: string | CanvasGradient | CanvasPattern;\n  /**\n   * @deprecated font方法不建议使用，请使用setTextStyle\n   */\n  font: string;\n  globalAlpha: number;\n  lineCap: string;\n  lineDashOffset: number;\n  lineJoin: string;\n  lineWidth: number;\n  miterLimit: number;\n  shadowBlur: number;\n  shadowColor: string;\n  shadowOffsetX: number;\n  shadowOffsetY: number;\n  strokeStyle: string | CanvasGradient | CanvasPattern;\n  dpr: number;\n  /**\n   * @deprecated textAlign方法不建议使用，请使用setTextStyle\n   */\n  textAlign: string;\n  /**\n   * @deprecated textBaseline方法不建议使用，请使用setTextStyle\n   */\n  textBaseline: string;\n  nativeContext: CanvasRenderingContext2D | any;\n  [key: string]: any; //类型没有索引签名\n\n  /**\n   * 清空画布\n   */\n  clear: () => void;\n\n  restore: () => void;\n\n  save: () => void;\n\n  // transform(m11: number, m12: number, m21: number, m22: number, dx: number, dy: number): void;\n\n  translate: (x: number, y: number) => void;\n\n  beginPath: () => void;\n\n  clip: ((fillRule?: CanvasFillRule) => void) & ((path: Path2D, fillRule?: CanvasFillRule) => void);\n\n  arc: (x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean) => void;\n\n  arcTo: ((x1: number, y1: number, x2: number, y2: number, radius: number) => void) &\n    ((x1: number, y1: number, x2: number, y2: number, radiusX: number, radiusY: number, rotation: number) => void);\n\n  bezierCurveTo: (cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number) => void;\n\n  closePath: () => void;\n\n  ellipse: (\n    x: number,\n    y: number,\n    radiusX: number,\n    radiusY: number,\n    rotation: number,\n    startAngle: number,\n    endAngle: number,\n    anticlockwise?: boolean\n  ) => void;\n\n  lineTo: (x: number, y: number) => void;\n\n  moveTo: (x: number, y: number) => void;\n\n  quadraticCurveTo: (cpx: number, cpy: number, x: number, y: number) => void;\n\n  rect: (x: number, y: number, w: number, h: number) => void;\n\n  fill: (path?: Path2D, fillRule?: CanvasFillRule) => void;\n\n  fillRect: (x: number, y: number, w: number, h: number) => void;\n\n  clearRect: (x: number, y: number, w: number, h: number) => void;\n\n  fillText: (text: string, x: number, y: number, maxWidth?: number) => void;\n\n  getImageData: (sx: number, sy: number, sw: number, sh: number) => ImageData;\n\n  getLineDash: () => number[];\n\n  isPointInPath: (x: number, y: number) => boolean;\n  isPointInStroke: (x: number, y: number) => boolean;\n\n  measureText: (text: string, method?: 'native' | 'simple' | 'quick') => { width: number };\n\n  putImageData: (\n    imagedata: ImageData,\n    dx: number,\n    dy: number,\n    dirtyX?: number,\n    dirtyY?: number,\n    dirtyWidth?: number,\n    dirtyHeight?: number\n  ) => void;\n\n  setLineDash: (segments: number[]) => void;\n\n  stroke: (path?: Path2D) => void;\n\n  strokeRect: (x: number, y: number, w: number, h: number) => void;\n\n  strokeText: (text: string, x: number, y: number, maxWidth?: number) => void;\n\n  drawImage: ((\n    image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap | any,\n    dstX: number,\n    dstY: number\n  ) => void) &\n    ((\n      image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap | any,\n      dstX: number,\n      dstY: number,\n      dstW: number,\n      dstH: number\n    ) => void) &\n    ((\n      image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap | any,\n      srcX: number,\n      srcY: number,\n      srcW: number,\n      srcH: number,\n      dstX: number,\n      dstY: number,\n      dstW: number,\n      dstH: number\n    ) => void);\n\n  clearMatrix: () => void;\n  onlyTranslate: () => boolean;\n}\n"]}

package/cjs/interface/global.d.ts

@@ -71,6 +71,8 @@ export interface IEnvContribution extends IContribution<IGlobal>, Omit<IEventEle
     loadFont: (font: string, source: string | BinaryData, descriptors?: FontFaceDescriptors) => Promise<{
         loadState: 'success' | 'fail';
     }>;
+    isMacOS: () => boolean;
+    copyToClipBoard: (text: string) => Promise<void>;
 }
 export type IMiniAppEnvParams = {
     domref?: Dict<any>;
@@ -116,6 +118,8 @@ export interface IGlobal extends Omit<IEventElement, 'on' | 'off' | 'once' | 'em
     getDynamicCanvasCount: () => number;
     isChrome: () => boolean;
     isSafari: () => boolean;
+    isMacOS: () => boolean;
+    copyToClipBoard: (text: string) => Promise<void>;
     getStaticCanvasCount: () => number;
     getElementById: (str: string) => HTMLElement | null;
     getRootElement: () => HTMLElement | null;
@@ -157,5 +161,4 @@ export interface IGlobal extends Omit<IEventElement, 'on' | 'off' | 'once' | 'em
         top: number;
         left: number;
     };
-    isImageAnonymous: boolean;
 }

package/cjs/interface/global.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/interface/global.ts"],"names":[],"mappings":"","file":"global.js","sourcesContent":["import type { Dict, IAABBBoundsLike, IPointLike } from '@visactor/vutils';\nimport type { ICanvasLike } from './canvas';\nimport type { IEventElement } from './common';\nimport type { IContribution } from './contribution';\nimport type { ISyncHook } from './sync-hook';\n\nexport interface ILoader {\n  loadImage: (url: string) => HTMLImageElement | ImageData;\n  loadJson: (url: string) => JSON;\n}\n\n// 环境定义\nexport type EnvType = 'browser' | 'feishu' | 'tt' | 'taro' | 'node' | 'native' | 'lynx' | 'wx' | 'harmony';\n\n// 创建canvas需要的参数\nexport interface ICreateCanvasParams {\n  id?: string;\n  // 像素宽\n  width?: number;\n  // 像素高\n  height?: number;\n  dpr?: number;\n}\n\nexport interface ILoader {\n  loadImage: (url: string) => HTMLImageElement | ImageData;\n  loadJson: (url: string) => JSON;\n}\n\nexport interface IEnvContribution\n  extends IContribution<IGlobal>,\n    Omit<IEventElement, 'on' | 'off' | 'once' | 'emit' | 'removeAllListeners'> {\n  // 当前代码所运行的环境\n  type: EnvType;\n\n  // 是否支持事件\n  // node环境不需要事件\n  supportEvent: boolean;\n\n  // 开始配置环境，相当于init\n  configure: (global: IGlobal, ...p: any) => void;\n\n  // 创建销毁\n  createCanvas: (params: ICreateCanvasParams) => ICanvasLike | any;\n  createOffscreenCanvas: (params: ICreateCanvasParams) => ICanvasLike | any;\n  releaseCanvas: (canvas: ICanvasLike | string | any) => void;\n\n  getNativeAABBBounds: (dom: string | HTMLElement | any) => IAABBBoundsLike;\n  removeDom: (dom: HTMLElement) => boolean;\n  createDom: (params: CreateDOMParamsType) => HTMLElement | null;\n  updateDom: (dom: HTMLElement, params: CreateDOMParamsType) => boolean;\n  getElementTop: (dom: any, baseWindow?: boolean) => number;\n  getElementLeft: (dom: any, baseWindow?: boolean) => number;\n  getElementTopLeft: (dom: any, baseWindow?: boolean) => { top: number; left: number };\n\n  /**\n   * 获取动态canvas的数量，offscreenCanvas或者framebuffer\n   */\n  getDynamicCanvasCount: () => number;\n\n  /**\n   * 获取静态canvas的数量，纯粹canvas\n   */\n  getStaticCanvasCount: () => number;\n\n  // 设备信息\n  getDevicePixelRatio: () => number;\n\n  // 通用接口\n  getRequestAnimationFrame: () => (callback: FrameRequestCallback) => number;\n  getCancelAnimationFrame: () => (h: number) => void;\n\n  // DOM接口\n  getElementById?: (str: string) => HTMLElement | null;\n  getRootElement?: () => HTMLElement | null;\n  /**\n   * get document instance\n   */\n  getDocument?: () => Document | null;\n  /**\n   * whether supports TouchEvent.\n   */\n  supportsTouchEvents: boolean;\n  /**\n   * whether supports PointerEvent.\n   */\n  supportsPointerEvents: boolean;\n  /**\n   * whether supports MouseEvent.\n   */\n  supportsMouseEvents: boolean;\n  /**\n   * Whether to allow setting the cursor style\n   */\n  applyStyles?: boolean;\n\n  /**\n   * 将窗口坐标转换为画布坐标，小程序/小组件环境需要兼容\n   */\n  mapToCanvasPoint?: (event: any, domElement?: any) => IPointLike | null;\n\n  loadImage: (url: string) => Promise<{\n    loadState: 'success' | 'fail';\n    data: HTMLImageElement | ImageData | null;\n  }>;\n  loadSvg: (url: string) => Promise<{\n    loadState: 'success' | 'fail';\n    data: HTMLImageElement | ImageData | null;\n  }>;\n  loadJson: (url: string) => Promise<{\n    loadState: 'success' | 'fail';\n    data: Record<string, unknown> | null;\n  }>;\n  loadArrayBuffer: (url: string) => Promise<{\n    loadState: 'success' | 'fail';\n    data: ArrayBuffer | null;\n  }>;\n  loadBlob: (url: string) => Promise<{\n    loadState: 'success' | 'fail';\n    data: Blob | null;\n  }>;\n  // @since 0.21.3\n  /**\n   * 加载字体，参数对应Font类\n   * @param font 字体名\n   * @param source 数据源\n   * @param descriptors 其他描述\n   * @returns\n   */\n  loadFont: (\n    font: string,\n    source: string | BinaryData,\n    descriptors?: FontFaceDescriptors\n  ) => Promise<{\n    loadState: 'success' | 'fail';\n  }>;\n}\n\nexport type IMiniAppEnvParams = {\n  /** dom 容器对象 */\n  domref?: Dict<any>;\n  /**\n   * 强行设置env，如果env重复设置也设置\n   */\n  force?: boolean;\n  /**\n   * 可用的canvas列表\n   */\n  canvasIdLists?: (string | number)[];\n  /**\n   * 表示可以自由使用的canvas索引\n   */\n  freeCanvasIdx?: string | number;\n  /** taro 环境使用 */\n  taro?: any;\n  pixelRatio?: number;\n  [key: string]: any;\n};\n\nexport interface IEnvParamsMap {\n  readonly taro: IMiniAppEnvParams;\n  readonly feishu: IMiniAppEnvParams;\n  readonly tt: IMiniAppEnvParams;\n  readonly browser: any;\n  readonly node: any;\n  readonly native: any;\n  readonly lynx: any;\n  readonly wx: any;\n  readonly harmony: any;\n}\n\nexport type CreateDOMParamsType = {\n  tagName?: string;\n  width?: number;\n  height?: number;\n  style?: string | Record<string, any>;\n  parent?: string | HTMLElement;\n};\nexport interface IGlobal extends Omit<IEventElement, 'on' | 'off' | 'once' | 'emit' | 'removeAllListeners'> {\n  // 当前代码所运行的环境\n  env: EnvType;\n\n  // 设备的dpr\n  devicePixelRatio: number;\n\n  // 当设置env的时候被调用\n  hooks: {\n    onSetEnv: ISyncHook<[EnvType | undefined, EnvType, IGlobal]>;\n  };\n\n  // 设置env的时候传入的参数\n  // node环境需要传入整个node-canvas包\n  // 小程序环境需要传入小程序要用到的参数\n  envParams?: any;\n\n  // 是否支持事件\n  // node环境不需要事件\n  supportEvent: boolean;\n\n  // 是否在不显示canvas的时候停止绘图操作，默认false\n  optimizeVisible: boolean;\n\n  setEnv: (env: EnvType, params?: IEnvParamsMap[EnvType]) => void;\n  setActiveEnvContribution: (contribution: IEnvContribution) => void;\n  createCanvas: (params: ICreateCanvasParams) => HTMLCanvasElement | any;\n  createOffscreenCanvas: (params: ICreateCanvasParams) => HTMLCanvasElement | any;\n  releaseCanvas: (canvas: HTMLCanvasElement | string | any) => void;\n\n  /**\n   * 获取环境中最大动态canvas的数量，offscreenCanvas或者framebuffer\n   */\n  getDynamicCanvasCount: () => number;\n\n  isChrome: () => boolean;\n  isSafari: () => boolean;\n\n  /**\n   * 获取环境中最大静态canvas的数量，纯粹canvas\n   */\n  getStaticCanvasCount: () => number;\n\n  /* 浏览器环境 - dom tree */\n  getElementById: (str: string) => HTMLElement | null;\n  getRootElement: () => HTMLElement | null;\n  /**\n   * get document instance\n   */\n  getDocument: () => Document | null;\n  /**\n   * whether supports TouchEvent.\n   */\n  supportsTouchEvents: boolean;\n  /**\n   * whether supports PointerEvent.\n   */\n  supportsPointerEvents: boolean;\n  /**\n   * whether supports MouseEvent.\n   */\n  supportsMouseEvents: boolean;\n  /**\n   * Whether to allow setting the cursor style\n   */\n  applyStyles?: boolean;\n  /**\n   * 测量文字的方法\n   */\n  measureTextMethod: 'native' | 'simple' | 'quick';\n\n  getRequestAnimationFrame: () => null | ((callback: FrameRequestCallback) => number);\n  getCancelAnimationFrame: () => null | ((h: number) => void);\n\n  /**\n   * 将窗口坐标转换为画布坐标，小程序/小组件环境需要兼容\n   */\n  mapToCanvasPoint: (nativeEvent: any, domElement?: any) => IPointLike | null;\n\n  loadImage: (url: string) => Promise<{\n    loadState: 'success' | 'fail';\n    data: HTMLImageElement | ImageData | null;\n  }>;\n  loadSvg: (url: string) => Promise<{\n    loadState: 'success' | 'fail';\n    data: HTMLImageElement | ImageData | null;\n  }>;\n  loadJson: (url: string) => Promise<{\n    loadState: 'success' | 'fail';\n    data: Record<string, unknown> | null;\n  }>;\n  loadArrayBuffer: (url: string) => Promise<{\n    loadState: 'success' | 'fail';\n    data: ArrayBuffer | null;\n  }>;\n  loadBlob: (url: string) => Promise<{\n    loadState: 'success' | 'fail';\n    data: Blob | null;\n  }>;\n\n  removeDom: (dom: HTMLElement) => boolean;\n  createDom: (params: CreateDOMParamsType) => HTMLElement | null;\n  updateDom: (dom: HTMLElement, params: CreateDOMParamsType) => boolean;\n\n  getElementTop: (dom: any, baseWindow?: boolean) => number;\n  getElementLeft: (dom: any, baseWindow?: boolean) => number;\n  getElementTopLeft: (dom: any, baseWindow?: boolean) => { top: number; left: number };\n\n  isImageAnonymous: boolean;\n}\n"]}
+{"version":3,"sources":["../src/interface/global.ts"],"names":[],"mappings":"","file":"global.js","sourcesContent":["import type { Dict, IAABBBoundsLike, IPointLike } from '@visactor/vutils';\nimport type { ICanvasLike } from './canvas';\nimport type { IEventElement } from './common';\nimport type { IContribution } from './contribution';\nimport type { ISyncHook } from './sync-hook';\n\nexport interface ILoader {\n  loadImage: (url: string) => HTMLImageElement | ImageData;\n  loadJson: (url: string) => JSON;\n}\n\n// 环境定义\nexport type EnvType = 'browser' | 'feishu' | 'tt' | 'taro' | 'node' | 'native' | 'lynx' | 'wx' | 'harmony';\n\n// 创建canvas需要的参数\nexport interface ICreateCanvasParams {\n  id?: string;\n  // 像素宽\n  width?: number;\n  // 像素高\n  height?: number;\n  dpr?: number;\n}\n\nexport interface ILoader {\n  loadImage: (url: string) => HTMLImageElement | ImageData;\n  loadJson: (url: string) => JSON;\n}\n\nexport interface IEnvContribution\n  extends IContribution<IGlobal>,\n    Omit<IEventElement, 'on' | 'off' | 'once' | 'emit' | 'removeAllListeners'> {\n  // 当前代码所运行的环境\n  type: EnvType;\n\n  // 是否支持事件\n  // node环境不需要事件\n  supportEvent: boolean;\n\n  // 开始配置环境，相当于init\n  configure: (global: IGlobal, ...p: any) => void;\n\n  // 创建销毁\n  createCanvas: (params: ICreateCanvasParams) => ICanvasLike | any;\n  createOffscreenCanvas: (params: ICreateCanvasParams) => ICanvasLike | any;\n  releaseCanvas: (canvas: ICanvasLike | string | any) => void;\n\n  getNativeAABBBounds: (dom: string | HTMLElement | any) => IAABBBoundsLike;\n  removeDom: (dom: HTMLElement) => boolean;\n  createDom: (params: CreateDOMParamsType) => HTMLElement | null;\n  updateDom: (dom: HTMLElement, params: CreateDOMParamsType) => boolean;\n  getElementTop: (dom: any, baseWindow?: boolean) => number;\n  getElementLeft: (dom: any, baseWindow?: boolean) => number;\n  getElementTopLeft: (dom: any, baseWindow?: boolean) => { top: number; left: number };\n\n  /**\n   * 获取动态canvas的数量，offscreenCanvas或者framebuffer\n   */\n  getDynamicCanvasCount: () => number;\n\n  /**\n   * 获取静态canvas的数量，纯粹canvas\n   */\n  getStaticCanvasCount: () => number;\n\n  // 设备信息\n  getDevicePixelRatio: () => number;\n\n  // 通用接口\n  getRequestAnimationFrame: () => (callback: FrameRequestCallback) => number;\n  getCancelAnimationFrame: () => (h: number) => void;\n\n  // DOM接口\n  getElementById?: (str: string) => HTMLElement | null;\n  getRootElement?: () => HTMLElement | null;\n  /**\n   * get document instance\n   */\n  getDocument?: () => Document | null;\n  /**\n   * whether supports TouchEvent.\n   */\n  supportsTouchEvents: boolean;\n  /**\n   * whether supports PointerEvent.\n   */\n  supportsPointerEvents: boolean;\n  /**\n   * whether supports MouseEvent.\n   */\n  supportsMouseEvents: boolean;\n  /**\n   * Whether to allow setting the cursor style\n   */\n  applyStyles?: boolean;\n\n  /**\n   * 将窗口坐标转换为画布坐标，小程序/小组件环境需要兼容\n   */\n  mapToCanvasPoint?: (event: any, domElement?: any) => IPointLike | null;\n\n  loadImage: (url: string) => Promise<{\n    loadState: 'success' | 'fail';\n    data: HTMLImageElement | ImageData | null;\n  }>;\n  loadSvg: (url: string) => Promise<{\n    loadState: 'success' | 'fail';\n    data: HTMLImageElement | ImageData | null;\n  }>;\n  loadJson: (url: string) => Promise<{\n    loadState: 'success' | 'fail';\n    data: Record<string, unknown> | null;\n  }>;\n  loadArrayBuffer: (url: string) => Promise<{\n    loadState: 'success' | 'fail';\n    data: ArrayBuffer | null;\n  }>;\n  loadBlob: (url: string) => Promise<{\n    loadState: 'success' | 'fail';\n    data: Blob | null;\n  }>;\n  // @since 0.21.3\n  /**\n   * 加载字体，参数对应Font类\n   * @param font 字体名\n   * @param source 数据源\n   * @param descriptors 其他描述\n   * @returns\n   */\n  loadFont: (\n    font: string,\n    source: string | BinaryData,\n    descriptors?: FontFaceDescriptors\n  ) => Promise<{\n    loadState: 'success' | 'fail';\n  }>;\n\n  isMacOS: () => boolean;\n  copyToClipBoard: (text: string) => Promise<void>;\n}\n\nexport type IMiniAppEnvParams = {\n  /** dom 容器对象 */\n  domref?: Dict<any>;\n  /**\n   * 强行设置env，如果env重复设置也设置\n   */\n  force?: boolean;\n  /**\n   * 可用的canvas列表\n   */\n  canvasIdLists?: (string | number)[];\n  /**\n   * 表示可以自由使用的canvas索引\n   */\n  freeCanvasIdx?: string | number;\n  /** taro 环境使用 */\n  taro?: any;\n  pixelRatio?: number;\n  [key: string]: any;\n};\n\nexport interface IEnvParamsMap {\n  readonly taro: IMiniAppEnvParams;\n  readonly feishu: IMiniAppEnvParams;\n  readonly tt: IMiniAppEnvParams;\n  readonly browser: any;\n  readonly node: any;\n  readonly native: any;\n  readonly lynx: any;\n  readonly wx: any;\n  readonly harmony: any;\n}\n\nexport type CreateDOMParamsType = {\n  tagName?: string;\n  width?: number;\n  height?: number;\n  style?: string | Record<string, any>;\n  parent?: string | HTMLElement;\n};\nexport interface IGlobal extends Omit<IEventElement, 'on' | 'off' | 'once' | 'emit' | 'removeAllListeners'> {\n  // 当前代码所运行的环境\n  env: EnvType;\n\n  // 设备的dpr\n  devicePixelRatio: number;\n\n  // 当设置env的时候被调用\n  hooks: {\n    onSetEnv: ISyncHook<[EnvType | undefined, EnvType, IGlobal]>;\n  };\n\n  // 设置env的时候传入的参数\n  // node环境需要传入整个node-canvas包\n  // 小程序环境需要传入小程序要用到的参数\n  envParams?: any;\n\n  // 是否支持事件\n  // node环境不需要事件\n  supportEvent: boolean;\n\n  // 是否在不显示canvas的时候停止绘图操作，默认false\n  optimizeVisible: boolean;\n\n  setEnv: (env: EnvType, params?: IEnvParamsMap[EnvType]) => void;\n  setActiveEnvContribution: (contribution: IEnvContribution) => void;\n  createCanvas: (params: ICreateCanvasParams) => HTMLCanvasElement | any;\n  createOffscreenCanvas: (params: ICreateCanvasParams) => HTMLCanvasElement | any;\n  releaseCanvas: (canvas: HTMLCanvasElement | string | any) => void;\n\n  /**\n   * 获取环境中最大动态canvas的数量，offscreenCanvas或者framebuffer\n   */\n  getDynamicCanvasCount: () => number;\n\n  isChrome: () => boolean;\n  isSafari: () => boolean;\n  isMacOS: () => boolean;\n  copyToClipBoard: (text: string) => Promise<void>;\n\n  /**\n   * 获取环境中最大静态canvas的数量，纯粹canvas\n   */\n  getStaticCanvasCount: () => number;\n\n  /* 浏览器环境 - dom tree */\n  getElementById: (str: string) => HTMLElement | null;\n  getRootElement: () => HTMLElement | null;\n  /**\n   * get document instance\n   */\n  getDocument: () => Document | null;\n  /**\n   * whether supports TouchEvent.\n   */\n  supportsTouchEvents: boolean;\n  /**\n   * whether supports PointerEvent.\n   */\n  supportsPointerEvents: boolean;\n  /**\n   * whether supports MouseEvent.\n   */\n  supportsMouseEvents: boolean;\n  /**\n   * Whether to allow setting the cursor style\n   */\n  applyStyles?: boolean;\n  /**\n   * 测量文字的方法\n   */\n  measureTextMethod: 'native' | 'simple' | 'quick';\n\n  getRequestAnimationFrame: () => null | ((callback: FrameRequestCallback) => number);\n  getCancelAnimationFrame: () => null | ((h: number) => void);\n\n  /**\n   * 将窗口坐标转换为画布坐标，小程序/小组件环境需要兼容\n   */\n  mapToCanvasPoint: (nativeEvent: any, domElement?: any) => IPointLike | null;\n\n  loadImage: (url: string) => Promise<{\n    loadState: 'success' | 'fail';\n    data: HTMLImageElement | ImageData | null;\n  }>;\n  loadSvg: (url: string) => Promise<{\n    loadState: 'success' | 'fail';\n    data: HTMLImageElement | ImageData | null;\n  }>;\n  loadJson: (url: string) => Promise<{\n    loadState: 'success' | 'fail';\n    data: Record<string, unknown> | null;\n  }>;\n  loadArrayBuffer: (url: string) => Promise<{\n    loadState: 'success' | 'fail';\n    data: ArrayBuffer | null;\n  }>;\n  loadBlob: (url: string) => Promise<{\n    loadState: 'success' | 'fail';\n    data: Blob | null;\n  }>;\n\n  removeDom: (dom: HTMLElement) => boolean;\n  createDom: (params: CreateDOMParamsType) => HTMLElement | null;\n  updateDom: (dom: HTMLElement, params: CreateDOMParamsType) => boolean;\n\n  getElementTop: (dom: any, baseWindow?: boolean) => number;\n  getElementLeft: (dom: any, baseWindow?: boolean) => number;\n  getElementTopLeft: (dom: any, baseWindow?: boolean) => { top: number; left: number };\n}\n"]}

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

@@ -7,6 +7,7 @@ export type IGroupAttribute = {
     width: number;
     height: number;
     cornerRadius: number | number[];
+    cornerType: 'round' | 'bevel';
     clip: boolean;
     visibleAll: boolean;
     display?: 'relative' | 'inner-block' | 'flex';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/interface/graphic/group.ts"],"names":[],"mappings":"","file":"group.js","sourcesContent":["import type { ITheme, IThemeSpec } from './theme';\nimport type { IGraphicAttribute, IGraphic } from '../graphic';\nimport type { INode } from '../node-tree';\nimport type { GraphicAttributeMap } from './creator';\n\nexport type IGroupAttribute = {\n  path: IGraphic[];\n  width: number;\n  height: number;\n  cornerRadius: number | number[];\n  clip: boolean;\n  visibleAll: boolean;\n  display?: 'relative' | 'inner-block' | 'flex';\n  flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';\n  flexWrap?: 'nowrap' | 'wrap';\n  justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';\n  alignItems?: 'flex-start' | 'flex-end' | 'center';\n  alignContent?: 'flex-start' | 'center' | 'space-between' | 'space-around';\n  // 基准的透明度，用于控制group下面整体图元的透明度\n  baseOpacity?: number;\n};\n\nexport type IGroupGraphicAttribute = Partial<IGraphicAttribute> & Partial<IGroupAttribute>;\n\nexport interface IGroup extends IGraphic<IGroupGraphicAttribute> {\n  childrenPickable?: boolean; // 子元素是否可以被pick\n\n  theme?: ITheme;\n\n  createTheme: () => void;\n  hideAll: () => void;\n  showAll: () => void;\n\n  setTheme: (t: IThemeSpec) => void;\n\n  incrementalAppendChild: (node: INode, highPerformance?: boolean) => INode | null;\n  incrementalClearChild: () => void;\n\n  createOrUpdateChild: <T extends keyof GraphicAttributeMap>(\n    graphicName: string,\n    attributes: GraphicAttributeMap[T],\n    graphicType: T\n  ) => INode;\n}\n"]}
+{"version":3,"sources":["../src/interface/graphic/group.ts"],"names":[],"mappings":"","file":"group.js","sourcesContent":["import type { ITheme, IThemeSpec } from './theme';\nimport type { IGraphicAttribute, IGraphic } from '../graphic';\nimport type { INode } from '../node-tree';\nimport type { GraphicAttributeMap } from './creator';\n\nexport type IGroupAttribute = {\n  path: IGraphic[];\n  width: number;\n  height: number;\n  cornerRadius: number | number[];\n  cornerType: 'round' | 'bevel';\n  clip: boolean;\n  visibleAll: boolean;\n  display?: 'relative' | 'inner-block' | 'flex';\n  flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';\n  flexWrap?: 'nowrap' | 'wrap';\n  justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';\n  alignItems?: 'flex-start' | 'flex-end' | 'center';\n  alignContent?: 'flex-start' | 'center' | 'space-between' | 'space-around';\n  // 基准的透明度，用于控制group下面整体图元的透明度\n  baseOpacity?: number;\n};\n\nexport type IGroupGraphicAttribute = Partial<IGraphicAttribute> & Partial<IGroupAttribute>;\n\nexport interface IGroup extends IGraphic<IGroupGraphicAttribute> {\n  childrenPickable?: boolean; // 子元素是否可以被pick\n\n  theme?: ITheme;\n\n  createTheme: () => void;\n  hideAll: () => void;\n  showAll: () => void;\n\n  setTheme: (t: IThemeSpec) => void;\n\n  incrementalAppendChild: (node: INode, highPerformance?: boolean) => INode | null;\n  incrementalClearChild: () => void;\n\n  createOrUpdateChild: <T extends keyof GraphicAttributeMap>(\n    graphicName: string,\n    attributes: GraphicAttributeMap[T],\n    graphicType: T\n  ) => INode;\n}\n"]}

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

@@ -7,6 +7,7 @@ export type IImageAttribute = {
     repeatY: IRepeatType;
     image: string | HTMLImageElement | HTMLCanvasElement;
     cornerRadius: number | number[];
+    cornerType: 'round' | 'bevel';
 };
 export type IImageGraphicAttribute = Partial<IGraphicAttribute> & Partial<IImageAttribute>;
 export interface IImage extends IGraphic<IImageGraphicAttribute> {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/interface/graphic/image.ts"],"names":[],"mappings":"","file":"image.js","sourcesContent":["import type { IGraphicAttribute, IGraphic } from '../graphic';\n\nexport type IRepeatType = 'no-repeat' | 'repeat';\n\nexport type IImageAttribute = {\n  width: number;\n  height: number;\n  repeatX: IRepeatType;\n  repeatY: IRepeatType;\n  image: string | HTMLImageElement | HTMLCanvasElement;\n  cornerRadius: number | number[];\n};\n\nexport type IImageGraphicAttribute = Partial<IGraphicAttribute> & Partial<IImageAttribute>;\n\nexport interface IImage extends IGraphic<IImageGraphicAttribute> {\n  successCallback?: () => void;\n  failCallback?: () => void;\n}\n"]}
+{"version":3,"sources":["../src/interface/graphic/image.ts"],"names":[],"mappings":"","file":"image.js","sourcesContent":["import type { IGraphicAttribute, IGraphic } from '../graphic';\n\nexport type IRepeatType = 'no-repeat' | 'repeat';\n\nexport type IImageAttribute = {\n  width: number;\n  height: number;\n  repeatX: IRepeatType;\n  repeatY: IRepeatType;\n  image: string | HTMLImageElement | HTMLCanvasElement;\n  cornerRadius: number | number[];\n  cornerType: 'round' | 'bevel';\n};\n\nexport type IImageGraphicAttribute = Partial<IGraphicAttribute> & Partial<IImageAttribute>;\n\nexport interface IImage extends IGraphic<IImageGraphicAttribute> {\n  successCallback?: () => void;\n  failCallback?: () => void;\n}\n"]}

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

@@ -2,6 +2,7 @@ import type { IGraphicAttribute, IGraphic } from '../graphic';
 import type { ICustomPath2D } from '../path';
 export type IPathAttribute = {
     path: ICustomPath2D | string;
+    clipRange: number;
     customPath: (context: ICustomPath2D, pathMark: IPath) => void;
 };
 export type IPathGraphicAttribute = Partial<IGraphicAttribute> & Partial<IPathAttribute>;

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/interface/graphic/path.ts"],"names":[],"mappings":"","file":"path.js","sourcesContent":["import type { IGraphicAttribute, IGraphic } from '../graphic';\nimport type { ICustomPath2D } from '../path';\n// TODO: Path svg <Path path='' />\n\nexport type IPathAttribute = {\n  path: ICustomPath2D | string;\n  customPath: (context: ICustomPath2D, pathMark: IPath) => void;\n};\n\nexport type IPathGraphicAttribute = Partial<IGraphicAttribute> & Partial<IPathAttribute>;\n\nexport type ShapeType = 'area' | 'circle' | 'ellipse' | 'line' | 'rect';\n\nexport interface IPath extends IGraphic<IPathGraphicAttribute> {\n  originType?: ShapeType;\n  cache?: ICustomPath2D;\n  pathShape: ICustomPath2D;\n\n  getParsedPathShape: () => ICustomPath2D;\n}\n"]}
+{"version":3,"sources":["../src/interface/graphic/path.ts"],"names":[],"mappings":"","file":"path.js","sourcesContent":["import type { IGraphicAttribute, IGraphic } from '../graphic';\nimport type { ICustomPath2D } from '../path';\n// TODO: Path svg <Path path='' />\n\nexport type IPathAttribute = {\n  path: ICustomPath2D | string;\n  clipRange: number;\n  customPath: (context: ICustomPath2D, pathMark: IPath) => void;\n};\n\nexport type IPathGraphicAttribute = Partial<IGraphicAttribute> & Partial<IPathAttribute>;\n\nexport type ShapeType = 'area' | 'circle' | 'ellipse' | 'line' | 'rect';\n\nexport interface IPath extends IGraphic<IPathGraphicAttribute> {\n  originType?: ShapeType;\n  cache?: ICustomPath2D;\n  pathShape: ICustomPath2D;\n\n  getParsedPathShape: () => ICustomPath2D;\n}\n"]}

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

@@ -6,6 +6,7 @@ export type IRectAttribute = {
     x1: number;
     y1: number;
     cornerRadius: number | number[];
+    cornerType: 'round' | 'bevel';
 };
 export type IRectGraphicAttribute = Partial<IGraphicAttribute> & Partial<IRectAttribute>;
 export interface IRect extends IGraphic<IRectGraphicAttribute> {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/interface/graphic/rect.ts"],"names":[],"mappings":"","file":"rect.js","sourcesContent":["import type { IGraphicAttribute, IGraphic } from '../graphic';\nimport type { ICustomPath2D } from '../path';\n\nexport type IRectAttribute = {\n  width: number;\n  height: number;\n  x1: number;\n  y1: number;\n  cornerRadius: number | number[];\n};\n\nexport type IRectGraphicAttribute = Partial<IGraphicAttribute> & Partial<IRectAttribute>;\n\nexport interface IRect extends IGraphic<IRectGraphicAttribute> {\n  cache?: ICustomPath2D;\n}\n"]}
+{"version":3,"sources":["../src/interface/graphic/rect.ts"],"names":[],"mappings":"","file":"rect.js","sourcesContent":["import type { IGraphicAttribute, IGraphic } from '../graphic';\nimport type { ICustomPath2D } from '../path';\n\nexport type IRectAttribute = {\n  width: number;\n  height: number;\n  x1: number;\n  y1: number;\n  cornerRadius: number | number[];\n  cornerType: 'round' | 'bevel';\n};\n\nexport type IRectGraphicAttribute = Partial<IGraphicAttribute> & Partial<IRectAttribute>;\n\nexport interface IRect extends IGraphic<IRectGraphicAttribute> {\n  cache?: ICustomPath2D;\n}\n"]}

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

@@ -3,10 +3,21 @@ import type { IContext2d } from '../context';
 import type { IGraphicAttribute, IGraphic } from '../graphic';
 import type { IImage, IImageGraphicAttribute } from './image';
 import type { ITextGraphicAttribute } from './text';
+export type IRichTextEditOptionsType = {
+    placeholder?: string;
+    syncPlaceHolderToTextConfig?: boolean;
+    placeholderColor?: string;
+    placeholderFontSize?: number;
+    placeholderFontFamily?: string;
+    syncPlaceholderToTextConfig?: boolean;
+    keepHeightWhileEmpty?: boolean;
+    boundsStrokeWhenInput?: string;
+};
 export type IRichTextAttribute = {
     width: number;
     height: number;
     editable: boolean;
+    editOptions: IRichTextEditOptionsType | null;
     ellipsis: boolean | string;
     wordBreak: RichTextWordBreak;
     verticalDirection: RichTextVerticalDirection;
@@ -50,6 +61,8 @@ export type IRichTextParagraphCharacter = IRichTextBasicCharacter & {
     opacity?: number;
     fillOpacity?: number;
     strokeOpacity?: number;
+    background?: string;
+    backgroundOpacity?: number;
 };
 export type IRichTextImageCharacter = IRichTextBasicCharacter & {
     image: string | HTMLImageElement | HTMLCanvasElement;

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/interface/graphic/richText.ts"],"names":[],"mappings":"","file":"richText.js","sourcesContent":["import type { IColor } from '../color';\nimport type { IContext2d } from '../context';\nimport type { IGraphicAttribute, IGraphic } from '../graphic';\nimport type { IImage, IImageGraphicAttribute } from './image';\nimport type { ITextGraphicAttribute } from './text';\n\nexport type IRichTextAttribute = {\n  /**\n   * 富文本的总宽度\n   */\n  width: number;\n  /**\n   * 富文本的总高度\n   */\n  height: number;\n  /**\n   * 是否可编辑\n   */\n  editable: boolean;\n  /**\n   * 文本超长的时候是否显示省略字符串\n   * 1. boolean类型，true 表示将截断后的省略字符串设置为..., false 表示不显示省略字符串\n   * 2. string类型，表示显示省略字符串，并将省略字符串设置为指定的值\n   */\n  ellipsis: boolean | string;\n  /**\n   * 文字换行类型\n   */\n  wordBreak: RichTextWordBreak;\n  /**\n   * 文字垂直方向\n   */\n  verticalDirection: RichTextVerticalDirection;\n  /**\n   * 富文本的最大高度，超过这个高度根据ellipsis的配置展示省略字符串或者直接截断\n   */\n  maxHeight: number;\n  /**\n   * 富文本的最大宽度，超过这个宽度根据ellipsis的配置展示省略字符串或者直接截断\n   */\n  maxWidth: number;\n  /**\n   * 文字对齐方式\n   */\n  textAlign: RichTextGlobalAlignType;\n  /**\n   * 文字基线\n   */\n  textBaseline: RichTextGlobalBaselineType;\n  /**\n   * 富文本的布局方向\n   */\n  layoutDirection: RichTextLayoutDirectionType;\n  /**\n   * 富文本的内容配置\n   */\n  textConfig: IRichTextCharacter[];\n  /**\n   * 不自动换行，仅当用户设置了换行符的时候才换行\n   */\n  disableAutoWrapLine: boolean;\n  /**\n   * 是否强制单行显示\n   */\n  singleLine: boolean;\n};\n\nexport type IRichTextGraphicAttribute = Partial<IGraphicAttribute & ITextGraphicAttribute> &\n  Partial<IRichTextAttribute>;\n\nexport type RichTextWordBreak = 'break-word' | 'break-all';\nexport type RichTextVerticalDirection = 'top' | 'middle' | 'bottom';\nexport type RichTextGlobalAlignType = 'left' | 'right' | 'center';\nexport type RichTextGlobalBaselineType = 'top' | 'middle' | 'bottom';\nexport type RichTextLayoutDirectionType = 'horizontal' | 'vertical';\nexport type RichTextFontStyle = 'normal' | 'italic' | 'oblique';\nexport type RichTextTextDecoration = 'none' | 'underline' | 'line-through';\n// export type RichTextTextAlign = 'left' | 'right' | 'center';\nexport type RichTextScript = 'normal' | 'sub' | 'super';\n\nexport type IRichTextBasicCharacter = {\n  /**\n   * 行高\n   */\n  lineHeight?: number | string;\n  /**\n   * 文字对齐方式\n   * left, right, center\n   */\n  textAlign?: CanvasTextAlign;\n  /**\n   * 文字基线\n   */\n  textBaseline?: CanvasTextBaseline;\n  /**\n   * 文字方向\n   */\n  direction?: RichTextLayoutDirectionType;\n};\n\n/**\n * 富文本段落为文本类型时候的配置\n */\nexport type IRichTextParagraphCharacter = IRichTextBasicCharacter & {\n  /**\n   * 文本内容\n   */\n  text: string | number;\n  /**\n   * 富文本片段的字体大小\n   */\n  fontSize?: number;\n  /**\n   * 富文本片段的字体类型\n   */\n  fontFamily?: string;\n  /**\n   * 富文本片段的文字颜色\n   */\n  fill?: IColor | boolean;\n  /**\n   * 富文本片段的文字描边颜色\n   */\n  stroke?: IColor | boolean;\n  /**\n   * 富文本片段的文字字重\n   */\n  fontWeight?: string;\n  /**\n   * 富文本片段的文字描边宽度\n   */\n  lineWidth?: number;\n  // lineHeight?: number;\n  /**\n   * 富文本片段的文字斜体设置，支持以下属性\n   * normal, italic, oblique\n   */\n  fontStyle?: RichTextFontStyle;\n  /**\n   * 富文本片段的文字中划线设置，支持以下属性\n   * none, underline, line-through\n   */\n  textDecoration?: RichTextTextDecoration;\n  // textAlign?: RichTextTextAlign; // left, right, center\n  script?: RichTextScript; // normal, sub, super\n  /**\n   * 富文本片段的文字下划线设置，是否显示下划线\n   */\n  underline?: boolean;\n  /**\n   * 富文本片段的文字中划线设置，是否显示中划线\n   */\n  lineThrough?: boolean;\n  /**\n   * 富文本片段的透明度\n   */\n  opacity?: number;\n  /**\n   * 富文本片段的文字填充透明度\n   */\n  fillOpacity?: number;\n  /**\n   * 富文本片段的文字描边透明度\n   */\n  strokeOpacity?: number;\n  // direction?: RichTextLayoutDirectionType;\n};\n\nexport type IRichTextImageCharacter = IRichTextBasicCharacter & {\n  /**\n   * 设置图片的内容，\n   * 支持三种格式：\n   * 1. 图片的url\n   * 2. 图片的Image对象\n   * 3. 图片的Canvas对象\n   */\n  image: string | HTMLImageElement | HTMLCanvasElement;\n  /**\n   * 图片的宽度\n   */\n  width: number;\n  /**\n   * 图片的高度\n   */\n  height: number;\n\n  // hover相关属性\n  // backgroundShow?: boolean; // 是否显示background\n  /**\n   * 背景的展示模式，支持以下属性\n   * always： 一直显示\n   * hover： 鼠标hover时显示\n   */\n  backgroundShowMode?: 'always' | 'hover';\n  /**\n   * 背景矩形填充颜色\n   */\n  backgroundFill?: boolean | IColor;\n  /**\n   * 背景矩形填充透明度\n   */\n  backgroundFillOpacity?: number;\n  /**\n   * 背景矩形边框颜色\n   */\n  backgroundStroke?: boolean | IColor;\n  /**\n   * 背景矩形边框透明度\n   */\n  backgroundStrokeOpacity?: number;\n  /**\n   * 背景矩形圆角\n   */\n  backgroundRadius?: number;\n  // background size 同时控制了该icon的响应范围\n  /**\n   * 背景矩形的宽度\n   */\n  backgroundWidth?: number;\n  /**\n   * 背景矩形的高度\n   */\n  backgroundHeight?: number;\n\n  /**\n   * 唯一标识符\n   */\n  id?: string;\n\n  // lineHeight?: number;\n  // textAlign?: RichTextTextAlign; // left, right, center\n  // direction?: RichTextLayoutDirectionType;\n  /**\n   * 图片与相邻节点的间距\n   */\n  margin?: number | number[];\n\n  funcType?: string;\n  hoverImage?: string | HTMLImageElement | HTMLCanvasElement;\n};\n/**\n * 富文本的字符类型\n */\nexport type IRichTextCharacter = IRichTextParagraphCharacter | IRichTextImageCharacter;\n\nexport type IRichTextIconGraphicAttribute = IImageGraphicAttribute & {\n  /**\n   * 唯一id\n   */\n  id?: string;\n  /**\n   * 背景的展示模式，支持以下属性\n   * always： 一直显示\n   * hover： 鼠标hover时显示\n   * never： 不显示\n   */\n  backgroundShowMode?: 'always' | 'hover' | 'never';\n  /**\n   * 背景矩形填充颜色\n   */\n  backgroundFill?: boolean | IColor;\n  /**\n   * 背景矩形填充透明度\n   */\n  backgroundFillOpacity?: number;\n  /**\n   * 背景矩形边框颜色\n   */\n  backgroundStroke?: boolean | IColor;\n  /**\n   * 背景矩形边框透明度\n   */\n  backgroundStrokeOpacity?: number;\n  /**\n   * 背景矩形圆角\n   */\n  backgroundRadius?: number;\n  /**\n   * 背景矩形的宽度\n   */\n  backgroundWidth?: number;\n  /**\n   * 背景矩形的高度\n   */\n  backgroundHeight?: number;\n\n  // lineHeight?: number;\n  /**\n   * 文字对齐方式\n   * left, right, center\n   */\n  textAlign?: CanvasTextAlign;\n  /**\n   * 文字基线\n   * top, middle, bottom\n   */\n  textBaseline?: CanvasTextBaseline;\n  /**\n   * 文字方向\n   * horizontal, vertical\n   */\n  direction?: RichTextLayoutDirectionType;\n  /**\n   * 图片与相邻节点的间距\n   */\n  margin?: number | number[];\n\n  // backgroundShow?: boolean;\n};\n\nexport interface IRichTextParagraph {\n  text: string;\n  ascent: number;\n  descent: number;\n  width: number;\n  height: number;\n  lineHeight: number;\n  fontSize: number;\n  length: number;\n  newLine: boolean;\n  character: IRichTextParagraphCharacter;\n  left: number;\n  top: number;\n  direction?: 'horizontal' | 'vertical';\n  widthOrigin?: number;\n  heightOrigin?: number;\n  textBaseline?: CanvasTextBaseline;\n  ellipsis: 'normal' | 'add' | 'replace' | 'hide';\n  ellipsisWidth: number;\n  ellipsisOtherParagraphWidth: number;\n  verticalEllipsis?: boolean;\n  updateWidth: () => void;\n  draw: (ctx: IContext2d, baseline: number, deltaLeft: number, isLineFirst: boolean, textAlign: string) => void;\n  getWidthWithEllips: (direction: string) => number;\n}\n\nexport interface IRichTextLine {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n  baseline: number;\n  ascent: number;\n  descent: number;\n  paragraphs: (IRichTextParagraph | IRichTextIcon)[];\n  actualWidth: number;\n  blankWidth: number;\n  textAlign: string;\n  direction: 'horizontal' | 'vertical';\n  directionKey: {\n    width: string;\n    height: string;\n    left: string;\n    x: string;\n    y: string;\n  };\n  draw: (\n    ctx: IContext2d,\n    lastLine: boolean,\n    x: number,\n    y: number,\n    drawEllipsis: boolean | string,\n    drawIcon: (icon: IRichTextIcon, context: IContext2d, x: number, y: number, baseline: number) => void\n  ) => void;\n  getWidthWithEllips: (ellipsis: string) => number;\n}\n\nexport interface IRichTextFrame {\n  left: number;\n  top: number;\n  bottom: number;\n  right: number;\n  width: number;\n  height: number;\n  actualHeight: number;\n  ellipsis: boolean | string;\n  wordBreak: 'break-word' | 'break-all';\n  verticalDirection: 'top' | 'middle' | 'bottom';\n  lines: IRichTextLine[];\n  globalAlign: 'left' | 'center' | 'right' | 'start' | 'end';\n  globalBaseline: 'top' | 'middle' | 'bottom';\n  layoutDirection: 'horizontal' | 'vertical';\n  directionKey: {\n    width: string;\n    height: string;\n    left: string;\n    top: string;\n    bottom: string;\n  };\n  isWidthMax: boolean;\n  isHeightMax: boolean;\n  singleLine: boolean;\n  icons: Map<string, IRichTextIcon>;\n  draw: (\n    ctx: IContext2d,\n    drawIcon: (icon: IRichTextIcon, context: IContext2d, x: number, y: number, baseline: number) => void\n  ) => boolean;\n  getActualSize: () => {\n    width: number;\n    height: number;\n  };\n  getRawActualSize: () => {\n    width: number;\n    height: number;\n  };\n  getActualSizeWidthEllipsis: () => {\n    width: number;\n    height: number;\n  };\n}\n\nexport interface IRichText extends IGraphic<IRichTextGraphicAttribute> {\n  getFrameCache: () => IRichTextFrame;\n  cliped?: boolean;\n}\n\nexport interface IRichTextIcon extends IImage {\n  attribute: IRichTextIconGraphicAttribute;\n  richtextId?: string;\n  globalX?: number;\n  globalY?: number;\n\n  _x: number;\n  _y: number;\n  _hovered: boolean;\n  _marginArray: [number, number, number, number];\n\n  setHoverState: (hovered: boolean) => void;\n}\n"]}
+{"version":3,"sources":["../src/interface/graphic/richText.ts"],"names":[],"mappings":"","file":"richText.js","sourcesContent":["import type { IColor } from '../color';\nimport type { IContext2d } from '../context';\nimport type { IGraphicAttribute, IGraphic } from '../graphic';\nimport type { IImage, IImageGraphicAttribute } from './image';\nimport type { ITextGraphicAttribute } from './text';\n\nexport type IRichTextEditOptionsType = {\n  placeholder?: string;\n  syncPlaceHolderToTextConfig?: boolean;\n  placeholderColor?: string;\n  placeholderFontSize?: number;\n  placeholderFontFamily?: string;\n  // 是否将placeholder同步到textConfig中\n  syncPlaceholderToTextConfig?: boolean;\n  // 即使是空文本，是否也保持高度\n  keepHeightWhileEmpty?: boolean;\n  // 是否在输入的时候展示包围框，不传默认是false，可以传入颜色\n  boundsStrokeWhenInput?: string;\n};\n\nexport type IRichTextAttribute = {\n  width: number;\n  height: number;\n  editable: boolean;\n  editOptions: IRichTextEditOptionsType | null;\n  ellipsis: boolean | string;\n  wordBreak: RichTextWordBreak;\n  verticalDirection: RichTextVerticalDirection;\n  maxHeight: number;\n  maxWidth: number;\n  textAlign: RichTextGlobalAlignType;\n  textBaseline: RichTextGlobalBaselineType;\n  layoutDirection: RichTextLayoutDirectionType;\n  textConfig: IRichTextCharacter[];\n  // 是否不自动每行截断\n  disableAutoWrapLine: boolean;\n  singleLine: boolean;\n};\n\nexport type IRichTextGraphicAttribute = Partial<IGraphicAttribute & ITextGraphicAttribute> &\n  Partial<IRichTextAttribute>;\n\nexport type RichTextWordBreak = 'break-word' | 'break-all';\nexport type RichTextVerticalDirection = 'top' | 'middle' | 'bottom';\nexport type RichTextGlobalAlignType = 'left' | 'right' | 'center';\nexport type RichTextGlobalBaselineType = 'top' | 'middle' | 'bottom';\nexport type RichTextLayoutDirectionType = 'horizontal' | 'vertical';\nexport type RichTextFontStyle = 'normal' | 'italic' | 'oblique';\nexport type RichTextTextDecoration = 'none' | 'underline' | 'line-through';\n// export type RichTextTextAlign = 'left' | 'right' | 'center';\nexport type RichTextScript = 'normal' | 'sub' | 'super';\n\nexport type IRichTextBasicCharacter = {\n  lineHeight?: number | string;\n  textAlign?: CanvasTextAlign; // left, right, center\n  textBaseline?: CanvasTextBaseline;\n  direction?: RichTextLayoutDirectionType;\n};\n\nexport type IRichTextParagraphCharacter = IRichTextBasicCharacter & {\n  text: string | number;\n  fontSize?: number;\n  fontFamily?: string;\n  fill?: IColor | boolean;\n  stroke?: IColor | boolean;\n  fontWeight?: string;\n  lineWidth?: number;\n  // lineHeight?: number;\n  fontStyle?: RichTextFontStyle; // normal, italic, oblique\n  textDecoration?: RichTextTextDecoration; // none, underline, line-through\n  // textAlign?: RichTextTextAlign; // left, right, center\n  script?: RichTextScript; // normal, sub, super\n  underline?: boolean;\n  lineThrough?: boolean;\n  opacity?: number;\n  fillOpacity?: number;\n  strokeOpacity?: number;\n  // 仅支持纯色背景\n  background?: string;\n  // 背景透明度\n  backgroundOpacity?: number;\n  // direction?: RichTextLayoutDirectionType;\n};\n\nexport type IRichTextImageCharacter = IRichTextBasicCharacter & {\n  // 图片基础属性\n  image: string | HTMLImageElement | HTMLCanvasElement;\n  width: number;\n  height: number;\n\n  // hover相关属性\n  // backgroundShow?: boolean; // 是否显示background\n  backgroundShowMode?: 'always' | 'hover';\n  backgroundFill?: boolean | IColor; // 背景矩形填充颜色\n  backgroundFillOpacity?: number; // 背景矩形填充透明度\n  backgroundStroke?: boolean | IColor; // 背景矩形边框颜色\n  backgroundStrokeOpacity?: number; // 背景矩形边框透明度\n  backgroundRadius?: number; // 背景矩形圆角\n  // background size 同时控制了该icon的响应范围\n  backgroundWidth?: number;\n  backgroundHeight?: number;\n\n  // 唯一标识符\n  id?: string;\n\n  // lineHeight?: number;\n  // textAlign?: RichTextTextAlign; // left, right, center\n  // direction?: RichTextLayoutDirectionType;\n  margin?: number | number[];\n\n  funcType?: string;\n  hoverImage?: string | HTMLImageElement | HTMLCanvasElement;\n};\n\nexport type IRichTextCharacter = IRichTextParagraphCharacter | IRichTextImageCharacter;\n\nexport type IRichTextIconGraphicAttribute = IImageGraphicAttribute & {\n  id?: string;\n  backgroundShowMode?: 'always' | 'hover' | 'never';\n  backgroundFill?: boolean | IColor; // 背景矩形填充颜色\n  backgroundFillOpacity?: number; // 背景矩形填充透明度\n  backgroundStroke?: boolean | IColor; // 背景矩形边框颜色\n  backgroundStrokeOpacity?: number; // 背景矩形边框透明度\n  backgroundRadius?: number; // 背景矩形圆角\n  backgroundWidth?: number;\n  backgroundHeight?: number;\n\n  // lineHeight?: number;\n  textAlign?: CanvasTextAlign; // left, right, center\n  textBaseline?: CanvasTextBaseline;\n  direction?: RichTextLayoutDirectionType;\n\n  margin?: number | number[];\n\n  // backgroundShow?: boolean;\n};\n\nexport interface IRichTextParagraph {\n  text: string;\n  ascent: number;\n  descent: number;\n  width: number;\n  height: number;\n  lineHeight: number;\n  fontSize: number;\n  length: number;\n  newLine: boolean;\n  character: IRichTextParagraphCharacter;\n  left: number;\n  top: number;\n  direction?: 'horizontal' | 'vertical';\n  widthOrigin?: number;\n  heightOrigin?: number;\n  textBaseline?: CanvasTextBaseline;\n  ellipsis: 'normal' | 'add' | 'replace' | 'hide';\n  ellipsisWidth: number;\n  ellipsisOtherParagraphWidth: number;\n  verticalEllipsis?: boolean;\n  updateWidth: () => void;\n  draw: (ctx: IContext2d, baseline: number, deltaLeft: number, isLineFirst: boolean, textAlign: string) => void;\n  getWidthWithEllips: (direction: string) => number;\n}\n\nexport interface IRichTextLine {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n  baseline: number;\n  ascent: number;\n  descent: number;\n  paragraphs: (IRichTextParagraph | IRichTextIcon)[];\n  actualWidth: number;\n  blankWidth: number;\n  textAlign: string;\n  direction: 'horizontal' | 'vertical';\n  directionKey: {\n    width: string;\n    height: string;\n    left: string;\n    x: string;\n    y: string;\n  };\n  draw: (\n    ctx: IContext2d,\n    lastLine: boolean,\n    x: number,\n    y: number,\n    drawEllipsis: boolean | string,\n    drawIcon: (icon: IRichTextIcon, context: IContext2d, x: number, y: number, baseline: number) => void\n  ) => void;\n  getWidthWithEllips: (ellipsis: string) => number;\n}\n\nexport interface IRichTextFrame {\n  left: number;\n  top: number;\n  bottom: number;\n  right: number;\n  width: number;\n  height: number;\n  actualHeight: number;\n  ellipsis: boolean | string;\n  wordBreak: 'break-word' | 'break-all';\n  verticalDirection: 'top' | 'middle' | 'bottom';\n  lines: IRichTextLine[];\n  globalAlign: 'left' | 'center' | 'right' | 'start' | 'end';\n  globalBaseline: 'top' | 'middle' | 'bottom';\n  layoutDirection: 'horizontal' | 'vertical';\n  directionKey: {\n    width: string;\n    height: string;\n    left: string;\n    top: string;\n    bottom: string;\n  };\n  isWidthMax: boolean;\n  isHeightMax: boolean;\n  singleLine: boolean;\n  icons: Map<string, IRichTextIcon>;\n  draw: (\n    ctx: IContext2d,\n    drawIcon: (icon: IRichTextIcon, context: IContext2d, x: number, y: number, baseline: number) => void\n  ) => boolean;\n  getActualSize: () => {\n    width: number;\n    height: number;\n  };\n  getRawActualSize: () => {\n    width: number;\n    height: number;\n  };\n  getActualSizeWidthEllipsis: () => {\n    width: number;\n    height: number;\n  };\n}\n\nexport interface IRichText extends IGraphic<IRichTextGraphicAttribute> {\n  getFrameCache: () => IRichTextFrame;\n  cliped?: boolean;\n}\n\nexport interface IRichTextIcon extends IImage {\n  attribute: IRichTextIconGraphicAttribute;\n  richtextId?: string;\n  globalX?: number;\n  globalY?: number;\n\n  _x: number;\n  _y: number;\n  _hovered: boolean;\n  _marginArray: [number, number, number, number];\n\n  setHoverState: (hovered: boolean) => void;\n}\n"]}

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

@@ -4,6 +4,7 @@ import type { ICustomPath2D, IPath2D } from '../path';
 export type ISymbolAttribute = {
     symbolType: SymbolType;
     size: number | [number, number];
+    clipRange: number;
 };
 export type ISymbolGraphicAttribute = Partial<IGraphicAttribute> & Partial<ISymbolAttribute>;
 export interface ISymbol extends IGraphic<ISymbolGraphicAttribute> {
@@ -16,6 +17,7 @@ export interface ISymbolClass {
     pathStr: string;
     isSvg?: boolean;
     draw: (ctx: IPath2D, size: number | [number, number], x: number, y: number, z?: number, cb?: (p: ICustomPath2D, a: any) => void) => boolean;
+    drawWithClipRange?: (ctx: IPath2D, size: number | [number, number], x: number, y: number, clipRange: number, z?: number, cb?: (p: ICustomPath2D, a: any) => void) => boolean;
     drawOffset: (ctx: IPath2D, size: number | [number, number], x: number, y: number, offset: number, z?: number, cb?: (p: ICustomPath2D, a: any) => void) => boolean;
     drawToSvgPath?: (size: number | [number, number], x: number, y: number, z?: number) => string;
     bounds: (size: number | [number, number], bounds: IBounds) => void;

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/interface/graphic/symbol.ts"],"names":[],"mappings":"","file":"symbol.js","sourcesContent":["import type { IBounds } from '@visactor/vutils';\nimport type { IGraphicAttribute, IGraphic } from '../graphic';\nimport type { ICustomPath2D, IPath2D } from '../path';\n\nexport type ISymbolAttribute = {\n  symbolType: SymbolType;\n  size: number | [number, number];\n};\n\nexport type ISymbolGraphicAttribute = Partial<IGraphicAttribute> & Partial<ISymbolAttribute>;\n\nexport interface ISymbol extends IGraphic<ISymbolGraphicAttribute> {\n  getParsedPath: () => ISymbolClass;\n}\n\nexport type SymbolType =\n  | 'circle'\n  | 'cross'\n  | 'diamond'\n  | 'square'\n  | 'arrow'\n  | 'arrowLeft'\n  | 'arrowRight'\n  | 'arrow2Left'\n  | 'arrow2Right'\n  | 'wedge'\n  | 'thinTriangle'\n  | 'triangle'\n  | 'triangleUp'\n  | 'triangleDown'\n  | 'triangleRight'\n  | 'triangleLeft'\n  | 'stroke'\n  | 'star'\n  | 'wye'\n  | 'rect'\n  | 'rectRound'\n  | 'roundLine'\n  | string;\n\nexport interface ISymbolClass {\n  type: SymbolType | string;\n  path?: ICustomPath2D;\n  pathStr: string;\n  isSvg?: boolean;\n\n  // 返回true表示内部已经调用closePath，返回false表示没有调用closePath，外部需要调用closePath\n  draw: (\n    ctx: IPath2D,\n    size: number | [number, number],\n    x: number,\n    y: number,\n    z?: number,\n    cb?: (p: ICustomPath2D, a: any) => void\n  ) => boolean;\n  drawOffset: (\n    ctx: IPath2D,\n    size: number | [number, number],\n    x: number,\n    y: number,\n    offset: number,\n    z?: number,\n    cb?: (p: ICustomPath2D, a: any) => void\n  ) => boolean;\n\n  drawToSvgPath?: (size: number | [number, number], x: number, y: number, z?: number) => string;\n\n  bounds: (size: number | [number, number], bounds: IBounds) => void;\n}\n"]}
+{"version":3,"sources":["../src/interface/graphic/symbol.ts"],"names":[],"mappings":"","file":"symbol.js","sourcesContent":["import type { IBounds } from '@visactor/vutils';\nimport type { IGraphicAttribute, IGraphic } from '../graphic';\nimport type { ICustomPath2D, IPath2D } from '../path';\n\nexport type ISymbolAttribute = {\n  symbolType: SymbolType;\n  size: number | [number, number];\n  clipRange: number;\n};\n\nexport type ISymbolGraphicAttribute = Partial<IGraphicAttribute> & Partial<ISymbolAttribute>;\n\nexport interface ISymbol extends IGraphic<ISymbolGraphicAttribute> {\n  getParsedPath: () => ISymbolClass;\n}\n\nexport type SymbolType =\n  | 'circle'\n  | 'cross'\n  | 'diamond'\n  | 'square'\n  | 'arrow'\n  | 'arrowLeft'\n  | 'arrowRight'\n  | 'arrow2Left'\n  | 'arrow2Right'\n  | 'wedge'\n  | 'thinTriangle'\n  | 'triangle'\n  | 'triangleUp'\n  | 'triangleDown'\n  | 'triangleRight'\n  | 'triangleLeft'\n  | 'stroke'\n  | 'star'\n  | 'wye'\n  | 'rect'\n  | 'rectRound'\n  | 'roundLine'\n  | string;\n\nexport interface ISymbolClass {\n  type: SymbolType | string;\n  path?: ICustomPath2D;\n  pathStr: string;\n  isSvg?: boolean;\n\n  // 返回true表示内部已经调用closePath，返回false表示没有调用closePath，外部需要调用closePath\n  draw: (\n    ctx: IPath2D,\n    size: number | [number, number],\n    x: number,\n    y: number,\n    z?: number,\n    cb?: (p: ICustomPath2D, a: any) => void\n  ) => boolean;\n  drawWithClipRange?: (\n    ctx: IPath2D,\n    size: number | [number, number],\n    x: number,\n    y: number,\n    clipRange: number,\n    z?: number,\n    cb?: (p: ICustomPath2D, a: any) => void\n  ) => boolean;\n  drawOffset: (\n    ctx: IPath2D,\n    size: number | [number, number],\n    x: number,\n    y: number,\n    offset: number,\n    z?: number,\n    cb?: (p: ICustomPath2D, a: any) => void\n  ) => boolean;\n\n  drawToSvgPath?: (size: number | [number, number], x: number, y: number, z?: number) => string;\n\n  bounds: (size: number | [number, number], bounds: IBounds) => void;\n}\n"]}

package/cjs/interface/graphic.d.ts

@@ -1,5 +1,5 @@
 import type { IAABBBounds, IMatrix, IPointLike, IPoint, BoundsAnchorType, IOBBBounds } from '@visactor/vutils';
-import type { IAnimate, IStep, EasingType, IAnimateTarget } from './animate';
+import type { IAnimate, IStep, EasingType, IAnimateTarget, ITimeline } from './animate';
 import type { IColor } from './color';
 import type { IGroup } from './graphic/group';
 import type { IShadowRoot } from './graphic/shadow-root';
@@ -70,7 +70,7 @@ export type IStrokeStyle = {
 };
 type TextureType = 'circle' | 'diamond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid';
 export type IConnectedStyle = {
-    connectedType: 'connect' | 'none';
+    connectedType: 'connect' | 'zero' | 'none';
     connectedStyle: {
         stroke: IStrokeStyle['stroke'];
         strokeOpacity: IStrokeStyle['strokeOpacity'];
@@ -119,8 +119,15 @@ export type IGraphicStyle = ILayout & IFillStyle & IStrokeStyle & IPickStyle & {
     shadowGraphic?: IGraphic | undefined;
     backgroundMode: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
     backgroundFit: boolean;
+    backgroundScale: number;
+    backgroundOffsetX: number;
+    backgroundOffsetY: number;
+    backgroundClip: boolean;
     backgroundCornerRadius: number | number[];
     backgroundOpacity: number;
+    autoAnimateTexture: boolean;
+    textureRatio: number;
+    textureOptions: any;
     background: IBackgroundType | {
         background: IBackgroundType;
         dx?: number;
@@ -135,6 +142,7 @@ export type IGraphicStyle = ILayout & IFillStyle & IStrokeStyle & IPickStyle & {
     textureSize: number;
     texturePadding: number;
     blur: number;
+    filter: string;
     cursor: Cursor | null;
     renderStyle?: 'default' | 'rough' | any;
     html: ({
@@ -154,7 +162,7 @@ export type IGraphicAttribute = IDebugType & IGraphicStyle & ITransform & {
     strokeSeg: IStrokeSeg | null;
     boundsPadding: number | number[];
     pickMode: 'accurate' | 'imprecise' | 'custom';
-    boundsMode: 'accurate' | 'imprecise';
+    boundsMode: 'accurate' | 'imprecise' | 'empty';
     customPickShape: () => boolean | null;
     pickable: boolean;
     fillPickable: boolean;
@@ -193,6 +201,7 @@ export type ISetAttributeContext = {
 export type IGraphicAnimateParams = {
     slience?: boolean;
     id?: number | string;
+    timeline?: ITimeline;
     onStart?: () => void;
     onFrame?: (step: IStep, ratio: number) => void;
     onEnd?: () => void;