@visactor/vrender-core 0.23.0-alpha.2 → 1.0.0-alpha.1

package/cjs/interface/animate.js

@@ -1,6 +1,3 @@
-"use strict";
 
-Object.defineProperty(exports, "__esModule", {
-    value: !0
-});
+
 //# sourceMappingURL=animate.js.map

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\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\nexport type IAnimateConstructor = new (...args: any[]) => IAnimate;\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  onRemove: (cb: () => 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  isGlobal: boolean;\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 type ITimelineConstructor = new (...args: any[]) => ITimeline;\n\nexport type ITickerConstructor = new (...args: any[]) => ITicker;\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"]}
+{"version":3,"sources":["../src/interface/animate.ts"],"names":[],"mappings":"","file":"animate.js","sourcesContent":["// import type { EventEmitter } from '@visactor/vutils';\n// import type { AnimateStepType } from '../common/enums';\n// import type { Releaseable } from './common';\n// import type { IGraphic } from './graphic';\n\n// enum AnimateStatus {\n//   INITIAL = 0,\n//   RUNNING = 1,\n//   PAUSED = 2,\n//   END = 3\n// }\n\n// enum AnimateMode {\n//   NORMAL = 0b0000,\n//   SET_ATTR_IMMEDIATELY = 0b0001\n// }\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\n// export interface Timeline {\n//   AnimateList: IAnimate[];\n// }\n\n// type IStopType = 'end' | 'start' | 'current';\n\n// // TODO: 提供options配置可序列化\n// interface AnimateSpecItem {\n//   type: 'to' | 'delay' | 'stop' | 'any';\n//   params: any[];\n// }\n\n// export 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//   | '';\n// export type EasingTypeFunc = (t: number) => number;\n\n// export type EasingType = EasingTypeStr | EasingTypeFunc;\n\n// export type IAnimateStepType = keyof typeof AnimateStepType;\n\n// export 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\n// export interface IStepConfig {\n//   tempProps?: boolean; // props为临时props，可以直接使用不用拷贝\n//   noPreventAttrs?: boolean;\n// }\n\n// export interface IAnimateTarget {\n//   onAnimateBind?: (animte: IAnimate | ISubAnimate) => 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\n// export 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// export type IAnimateConstructor = new (...args: any[]) => IAnimate;\n\n// // 每一个animate绑定一个graphic，用于描述这个graphic的动画内容\n// // 在timeline层面，animate相当于是一段timeslice\n// export 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//   onRemove: (cb: () => 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\n// export 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\n// export 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命名不一致，好尴尬\n// export interface MorphingAnimateConfig extends Omit<BaseAnimateConfig, 'interpolate'> {\n//   duration?: number;\n//   easing?: EasingType; // 统一到easing\n//   delay?: number;\n// }\n\n// export 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\n// export interface ITimeline {\n//   id: number;\n//   animateCount: number;\n//   isGlobal: boolean;\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\n// export type ITimelineConstructor = new (...args: any[]) => ITimeline;\n\n// export type ITickerConstructor = new (...args: any[]) => ITicker;\n\n// export 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\n// export interface ITickerHandlerStatic {\n//   Avaliable: () => boolean;\n//   new (): ITickHandler;\n// }\n\n// export 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/animation/animate.d.ts

@@ -0,0 +1,100 @@
+import type { IGraphic } from '../graphic';
+import type { EasingType, EasingTypeFunc } from './easing';
+import type { AnimateStatus, IAnimateStepType } from './type';
+import type { ITimeline } from './timeline';
+export interface ICustomAnimate extends IStep {
+    type: IAnimateStepType;
+}
+export interface IStep {
+    type: IAnimateStepType;
+    prev?: IStep;
+    duration: number;
+    next?: IStep;
+    props?: Record<string, any>;
+    fromParsedProps?: Record<string, any>;
+    toParsedProps?: Record<string, any>;
+    fromProps?: Record<string, any>;
+    propKeys?: string[];
+    easing?: EasingTypeFunc;
+    append: (step: IStep) => void;
+    getLastProps: () => any;
+    animate: IAnimate;
+    setDuration: (duration: number, updateDownstream?: boolean) => void;
+    getDuration: () => number;
+    determineInterpolateUpdateFunction: () => void;
+    setStartTime: (time: number, updateDownstream?: boolean) => void;
+    getStartTime: () => number;
+    bind: (target: IGraphic, animate: IAnimate) => void;
+    onBind: () => void;
+    onFirstRun: () => void;
+    onStart: () => void;
+    onEnd: (cb?: (animate: IAnimate, step: IStep) => void) => void;
+    update: (end: boolean, ratio: number, out: Record<string, any>) => void;
+    onUpdate: (end: boolean, ratio: number, out: Record<string, any>) => void;
+    getEndProps: () => Record<string, any> | void;
+    getFromProps: () => Record<string, any> | void;
+    getMergedEndProps: () => Record<string, any> | void;
+    deleteSelfAttr: (key: string) => void;
+    stop: () => void;
+}
+export interface IAnimate {
+    readonly id: string | number;
+    status: AnimateStatus;
+    target: IGraphic;
+    priority: number;
+    interpolateUpdateFunction: ((from: Record<string, any>, to: Record<string, any>, ratio: number, step: IStep, target: IGraphic) => void) | null;
+    _onStart?: (() => void)[];
+    _onFrame?: ((step: IStep, ratio: number) => void)[];
+    _onEnd?: (() => void)[];
+    _onRemove?: (() => void)[];
+    getStartProps: () => Record<string, any>;
+    getEndProps: () => Record<string, any>;
+    setTimeline: (timeline: ITimeline) => void;
+    getTimeline: () => ITimeline;
+    readonly timeline: ITimeline;
+    bind: (target: IGraphic) => this;
+    to: (props: Record<string, any>, duration: number, easing: EasingType) => this;
+    from: (props: Record<string, any>, duration: number, easing: EasingType) => this;
+    pause: () => void;
+    resume: () => void;
+    onStart: (cb?: () => void) => void;
+    onEnd: (cb?: () => void) => void;
+    onFrame: (cb: (step: IStep, ratio: number) => void) => void;
+    onRemove: (cb?: () => void) => void;
+    preventAttr: (key: string) => void;
+    preventAttrs: (key: string[]) => void;
+    validAttr: (key: string) => boolean;
+    runCb: (cb: (a: IAnimate, step: IStep) => void) => IAnimate;
+    customInterpolate: (key: string, ratio: number, from: any, to: any, target: IGraphic, ret: Record<string, any>) => boolean;
+    play: (customAnimate: ICustomAnimate) => this;
+    getFromValue: () => Record<string, any>;
+    getToValue: () => Record<string, any>;
+    stop: (type?: 'start' | 'end' | Record<string, any>) => void;
+    release: () => void;
+    getDuration: () => number;
+    getTotalDuration: () => number;
+    getStartTime: () => number;
+    wait: (delay: number) => this;
+    afterAll: (list: IAnimate[]) => this;
+    after: (animate: IAnimate) => this;
+    parallel: (animate: IAnimate) => this;
+    getLoop: () => number;
+    loop: (n: number | boolean) => IAnimate;
+    bounce: (b: boolean) => IAnimate;
+    advance: (delta: number) => void;
+    startAt: (t: number) => IAnimate;
+    reSyncProps: () => void;
+    updateDuration: () => void;
+}
+export declare enum AnimateMode {
+    NORMAL = 0,
+    SET_ATTR_IMMEDIATELY = 1
+}
+export interface IAnimateTarget {
+    onAnimateBind?: (animte: IAnimate) => void;
+    getComputedAttribute: (name: string) => any;
+    getDefaultAttribute: (name: string) => any;
+    onStop: (props?: Record<string, any>) => void;
+    animates: Map<string | number, IAnimate>;
+    [key: string]: any;
+}

package/cjs/interface/animation/animate.js

@@ -0,0 +1,10 @@
+"use strict";
+
+var AnimateMode;
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.AnimateMode = void 0, function(AnimateMode) {
+    AnimateMode[AnimateMode.NORMAL = 0] = "NORMAL", AnimateMode[AnimateMode.SET_ATTR_IMMEDIATELY = 1] = "SET_ATTR_IMMEDIATELY";
+}(AnimateMode = exports.AnimateMode || (exports.AnimateMode = {}));
+//# sourceMappingURL=animate.js.map

package/cjs/interface/animation/animate.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/interface/animation/animate.ts"],"names":[],"mappings":";;;AAsKA,IAAY,WAGX;AAHD,WAAY,WAAW;IACrB,iDAAe,CAAA;IACf,6EAA6B,CAAA;AAC/B,CAAC,EAHW,WAAW,GAAX,mBAAW,KAAX,mBAAW,QAGtB","file":"animate.js","sourcesContent":["import type { IGraphic } from '../graphic';\nimport type { EasingType, EasingTypeFunc } from './easing';\nimport type { AnimateStatus, IAnimateStepType } from './type';\nimport type { ITimeline } from './timeline';\n\nexport interface ICustomAnimate extends IStep {\n  type: IAnimateStepType;\n}\n\nexport interface IStep {\n  type: IAnimateStepType;\n  prev?: IStep;\n  // 持续时间\n  duration: number;\n  // 链表，下一个\n  next?: IStep;\n  // 属性\n  props?: Record<string, any>;\n  // 解析后的属性（用于性能优化，避免每次tick都解析）\n  fromParsedProps?: Record<string, any>;\n  toParsedProps?: Record<string, any>;\n  fromProps?: Record<string, any>;\n  // 解析后的属性列表（用于性能优化，避免每次tick都解析）\n  propKeys?: string[];\n  // 缓动函数\n  easing?: EasingTypeFunc;\n\n  // 添加一个\n  append: (step: IStep) => void;\n  // 获取上一个props，用于完成这次的fromValue 和 toValue的插值\n  getLastProps: () => any;\n\n  animate: IAnimate;\n\n  // 设置持续时间\n  setDuration: (duration: number, updateDownstream?: boolean) => void;\n  // 获取持续时间\n  getDuration: () => number;\n  // 确定插值更新函数（在开始的时候就确定，避免每次tick都解析）\n  determineInterpolateUpdateFunction: () => void;\n\n  // 设置开始时间\n  setStartTime: (time: number, updateDownstream?: boolean) => void;\n  // 获取开始时间\n  getStartTime: () => number;\n\n  bind: (target: IGraphic, animate: IAnimate) => void;\n  // 在第一次绑定到Animate的时候触发\n  onBind: () => void;\n  // 第一次执行的时候调用\n  onFirstRun: () => void;\n  // 开始执行的时候调用（如果有循环，那每个周期都会调用）\n  onStart: () => void;\n  // 结束执行的时候调用（如果有循环，那每个周期都会调用）\n  onEnd: (cb?: (animate: IAnimate, step: IStep) => void) => void;\n  // 更新执行的时候调用（如果有循环，那每个周期都会调用）\n  update: (end: boolean, ratio: number, out: Record<string, any>) => void;\n  onUpdate: (end: boolean, ratio: number, out: Record<string, any>) => void;\n\n  getEndProps: () => Record<string, any> | void;\n  getFromProps: () => Record<string, any> | void;\n  getMergedEndProps: () => Record<string, any> | void;\n\n  // 屏蔽自身属性，会直接从props等内容里删除掉\n  deleteSelfAttr: (key: string) => void;\n\n  // 停止\n  stop: () => void;\n}\n\nexport interface IAnimate {\n  readonly id: string | number;\n  status: AnimateStatus;\n  target: IGraphic;\n  priority: number;\n  interpolateUpdateFunction:\n    | ((from: Record<string, any>, to: Record<string, any>, ratio: number, step: IStep, target: IGraphic) => void)\n    | null;\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  // 设置timeline\n  setTimeline: (timeline: ITimeline) => void;\n  // 获取timeline\n  getTimeline: () => ITimeline;\n  readonly timeline: ITimeline;\n\n  bind: (target: IGraphic) => this;\n  to: (props: Record<string, any>, duration: number, easing: EasingType) => this;\n  from: (props: Record<string, any>, duration: number, easing: EasingType) => 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  onRemove: (cb?: () => 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: IGraphic,\n    ret: Record<string, any>\n  ) => boolean;\n  play: (customAnimate: ICustomAnimate) => this;\n\n  getFromValue: () => Record<string, any>;\n  getToValue: () => Record<string, any>;\n  // 停止，可以设置停止后设置target的属性为开始的值（fromValue），还是结束的值（toValue）\n  stop: (type?: 'start' | 'end' | Record<string, any>) => void;\n  /** 打上END标志，下一帧被删除 */\n  release: () => void;\n  // 获取持续的时长\n  getDuration: () => number;\n  getTotalDuration: () => number;\n  // 获取动画开始时间（注意并不是子动画的startAt）\n  getStartTime: () => number;\n  // 等待delay\n  wait: (delay: number) => this;\n\n  /* 动画编排 */\n  // 所有动画结束后执行\n  afterAll: (list: IAnimate[]) => this;\n  // 在某个动画结束后执行\n  after: (animate: IAnimate) => this;\n  // 并行执行\n  parallel: (animate: IAnimate) => this;\n\n  getLoop: () => number;\n\n  // 反转动画\n  // reversed: (r: boolean) => IAnimate;\n  // 循环动画\n  loop: (n: number | boolean) => IAnimate;\n  // 反弹动画\n  bounce: (b: boolean) => IAnimate;\n\n  advance: (delta: number) => void;\n\n  // 设置开始时间（startAt之前是完全不会进入动画生命周期的）\n  // 它和wait不一样，如果调用的是wait，wait过程中还算是一个动画阶段，只是空的阶段，而startAt之前是完全不会进入动画生命周期的\n  startAt: (t: number) => IAnimate;\n\n  // 重新同步和计算props，用于内部某些step发生了变更后，重新计算自身\n  reSyncProps: () => void;\n\n  // 更新duration\n  updateDuration: () => void;\n}\n\nexport enum AnimateMode {\n  NORMAL = 0b0000,\n  SET_ATTR_IMMEDIATELY = 0b0001\n}\n\nexport interface IAnimateTarget {\n  onAnimateBind?: (animte: IAnimate) => 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"]}

package/cjs/interface/animation/easing.d.ts

@@ -0,0 +1,3 @@
+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;

package/cjs/interface/animation/easing.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+});
+//# sourceMappingURL=easing.js.map

package/cjs/interface/animation/easing.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/interface/animation/easing.ts"],"names":[],"mappings":"","file":"easing.js","sourcesContent":["export 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"]}

package/cjs/interface/animation/index.d.ts

@@ -0,0 +1,5 @@
+export * from './animate';
+export * from './ticker';
+export * from './timeline';
+export * from './type';
+export * from './easing';

package/cjs/interface/animation/index.js

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

package/cjs/interface/animation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/interface/animation/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,4CAA0B;AAC1B,2CAAyB;AACzB,6CAA2B;AAC3B,yCAAuB;AACvB,2CAAyB","file":"index.js","sourcesContent":["export * from './animate';\nexport * from './ticker';\nexport * from './timeline';\nexport * from './type';\nexport * from './easing';\n"]}

package/cjs/interface/animation/ticker.d.ts

@@ -0,0 +1,37 @@
+import type { EventEmitter } from '@visactor/vutils';
+import type { ITimeline } from './timeline';
+export type TickerMode = 'raf' | 'timeout' | 'manual';
+export declare enum STATUS {
+    INITIAL = 0,
+    RUNNING = 1,
+    PAUSE = 2
+}
+export interface ITickHandler {
+    tick: (interval: number, cb: (handler: ITickHandler) => void) => void;
+    tickTo?: (t: number, cb: (handler: ITickHandler, params?: {
+        once: boolean;
+    }) => void) => void;
+    getTime: () => number;
+    release: () => void;
+}
+export interface ITickerHandlerStatic {
+    new (): ITickHandler;
+}
+export interface ITicker extends EventEmitter {
+    setFPS?: (fps: number) => void;
+    setInterval?: (interval: number) => void;
+    getFPS?: () => number;
+    getInterval?: () => number;
+    tick: (interval: number) => void;
+    tickAt?: (time: number) => void;
+    pause: () => boolean;
+    resume: () => boolean;
+    start: (force?: boolean) => boolean;
+    stop: () => void;
+    addTimeline: (timeline: ITimeline) => void;
+    remTimeline: (timeline: ITimeline) => void;
+    trySyncTickStatus: () => void;
+    getTimelines: () => ITimeline[];
+    release: () => void;
+    autoStop: boolean;
+}

package/cjs/interface/animation/ticker.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var STATUS;
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.STATUS = void 0, function(STATUS) {
+    STATUS[STATUS.INITIAL = 0] = "INITIAL", STATUS[STATUS.RUNNING = 1] = "RUNNING", 
+    STATUS[STATUS.PAUSE = 2] = "PAUSE";
+}(STATUS = exports.STATUS || (exports.STATUS = {}));
+//# sourceMappingURL=ticker.js.map

package/cjs/interface/animation/ticker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/interface/animation/ticker.ts"],"names":[],"mappings":";;;AASA,IAAY,MAIX;AAJD,WAAY,MAAM;IAChB,yCAAW,CAAA;IACX,yCAAW,CAAA;IACX,qCAAS,CAAA;AACX,CAAC,EAJW,MAAM,GAAN,cAAM,KAAN,cAAM,QAIjB","file":"ticker.js","sourcesContent":["/**\n * Ticker Types for Animation Graph\n */\n\nimport type { EventEmitter } from '@visactor/vutils';\nimport type { ITimeline } from './timeline';\n\nexport type TickerMode = 'raf' | 'timeout' | 'manual';\n\nexport enum STATUS {\n  INITIAL = 0, // initial represents initial state\n  RUNNING = 1, // running represents executing\n  PAUSE = 2 // PAUSE represents tick continues but functions are not executed\n}\n\nexport interface ITickHandler {\n  /**\n   * Start executing tick\n   * @param interval Delay in ms\n   * @param cb Callback to execute\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; // Get current time\n  release: () => void;\n}\n\nexport interface ITickerHandlerStatic {\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   * Start ticking, if force is true, start regardless;\n   * otherwise, don't start if timeline is empty\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  release: () => void;\n\n  // Whether to automatically stop, default is true\n  autoStop: boolean;\n}\n"]}

package/cjs/interface/animation/timeline.d.ts

@@ -0,0 +1,17 @@
+import type { IAnimate } from './animate';
+export interface ITimeline {
+    id: number;
+    isGlobal?: boolean;
+    animateCount: number;
+    addAnimate: (animate: IAnimate) => void;
+    removeAnimate: (animate: IAnimate, release?: boolean) => void;
+    tick: (delta: number) => void;
+    clear: () => void;
+    pause: () => void;
+    resume: () => void;
+    getTotalDuration: () => number;
+    getPlaySpeed: () => number;
+    setPlaySpeed: (speed: number) => void;
+    getPlayState: () => 'playing' | 'paused' | 'stopped';
+    isRunning: () => boolean;
+}

package/cjs/interface/animation/timeline.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+});
+//# sourceMappingURL=timeline.js.map

package/cjs/interface/animation/timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/interface/animation/timeline.ts"],"names":[],"mappings":"","file":"timeline.js","sourcesContent":["import type { IAnimate } from './animate';\n\nexport interface ITimeline {\n  id: number;\n  isGlobal?: boolean;\n  // 包含的动画数量（animate数组的数量），包含所有动画\n  animateCount: number;\n  // 添加动画\n  addAnimate: (animate: IAnimate) => void;\n  // 移除动画\n  removeAnimate: (animate: IAnimate, release?: boolean) => void;\n  // 更新动画\n  tick: (delta: number) => void;\n  // 清除动画\n  clear: () => void;\n  // 暂停动画\n  pause: () => void;\n  // 恢复动画\n  resume: () => void;\n  // 获取动画总时长\n  getTotalDuration: () => number;\n  // 获取动画的播放速度\n  getPlaySpeed: () => number;\n  // 设置动画的播放速度\n  setPlaySpeed: (speed: number) => void;\n  // 获取动画的播放状态\n  getPlayState: () => 'playing' | 'paused' | 'stopped';\n  // 获取动画是否正在运行\n  isRunning: () => boolean;\n}\n"]}

package/cjs/interface/animation/type.d.ts

@@ -0,0 +1,13 @@
+export declare enum AnimateStepType {
+    wait = "wait",
+    from = "from",
+    to = "to",
+    customAnimate = "customAnimate"
+}
+export declare enum AnimateStatus {
+    INITIAL = 0,
+    RUNNING = 1,
+    PAUSED = 2,
+    END = 3
+}
+export type IAnimateStepType = keyof typeof AnimateStepType;

package/cjs/interface/animation/type.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var AnimateStepType, AnimateStatus;
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.AnimateStatus = exports.AnimateStepType = void 0, function(AnimateStepType) {
+    AnimateStepType.wait = "wait", AnimateStepType.from = "from", AnimateStepType.to = "to", 
+    AnimateStepType.customAnimate = "customAnimate";
+}(AnimateStepType = exports.AnimateStepType || (exports.AnimateStepType = {})), 
+function(AnimateStatus) {
+    AnimateStatus[AnimateStatus.INITIAL = 0] = "INITIAL", AnimateStatus[AnimateStatus.RUNNING = 1] = "RUNNING", 
+    AnimateStatus[AnimateStatus.PAUSED = 2] = "PAUSED", AnimateStatus[AnimateStatus.END = 3] = "END";
+}(AnimateStatus = exports.AnimateStatus || (exports.AnimateStatus = {}));
+//# sourceMappingURL=type.js.map

package/cjs/interface/animation/type.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/interface/animation/type.ts"],"names":[],"mappings":";;;AAAA,IAAY,eAKX;AALD,WAAY,eAAe;IACzB,gCAAa,CAAA;IACb,gCAAa,CAAA;IACb,4BAAS,CAAA;IACT,kDAA+B,CAAA;AACjC,CAAC,EALW,eAAe,GAAf,uBAAe,KAAf,uBAAe,QAK1B;AAED,IAAY,aAKX;AALD,WAAY,aAAa;IACvB,uDAAW,CAAA;IACX,uDAAW,CAAA;IACX,qDAAU,CAAA;IACV,+CAAO,CAAA;AACT,CAAC,EALW,aAAa,GAAb,qBAAa,KAAb,qBAAa,QAKxB","file":"type.js","sourcesContent":["export enum AnimateStepType {\n  wait = 'wait',\n  from = 'from',\n  to = 'to',\n  customAnimate = 'customAnimate'\n}\n\nexport enum AnimateStatus {\n  INITIAL = 0,\n  RUNNING = 1,\n  PAUSED = 2,\n  END = 3\n}\n\nexport type IAnimateStepType = keyof typeof AnimateStepType;\n"]}

package/cjs/interface/context.d.ts

@@ -81,6 +81,7 @@ export interface IContext2d extends Releaseable {
     [key: string]: any;
     getCanvas: () => ICanvas;
     getContext: () => any;
+    reset: (setTransform?: boolean) => void;
     setTransformForCurrent: (force?: boolean) => void;
     currentMatrix: IMatrix;
     clear: () => void;

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  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"]}
+{"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  reset: (setTransform?: boolean) => void;\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

@@ -131,6 +131,8 @@ export interface IGlobal extends Omit<IEventElement, 'on' | 'off' | 'once' | 'em
     measureTextMethod: 'native' | 'simple' | 'quick';
     getRequestAnimationFrame: () => null | ((callback: FrameRequestCallback) => number);
     getCancelAnimationFrame: () => null | ((h: number) => void);
+    getSpecifiedRequestAnimationFrame: (id: number) => (callback: FrameRequestCallback) => number;
+    getSpecifiedCancelAnimationFrame: (id: number) => (h: number) => void;
     mapToCanvasPoint: (nativeEvent: any, domElement?: any) => IPointLike | null;
     loadImage: (url: string) => Promise<{
         loadState: 'success' | 'fail';

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  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  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  getSpecifiedRequestAnimationFrame: (id: number) => (callback: FrameRequestCallback) => number;\n  getSpecifiedCancelAnimationFrame: (id: number) => (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"]}

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

@@ -68,6 +68,9 @@ export type IRichTextParagraphCharacter = IRichTextBasicCharacter & {
     strokeOpacity?: number;
     background?: string;
     backgroundOpacity?: number;
+    space?: number;
+    dx?: number;
+    dy?: 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 IRichTextEditOptionsType = {\n  placeholder?: string;\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  stopPropagation?: boolean;\n};\n\nexport type IRichTextAttribute = {\n  /**\n   * @since 0.22.1\n   * 升级后避免break change，通过开关来控制\n   */\n  upgradeAttrs: {\n    lineHeight: true;\n    multiBreakLine: true;\n  } | null;\n  /**\n   * 富文本的总宽度\n   */\n  width: number;\n  /**\n   * 富文本的总高度\n   */\n  height: number;\n  /**\n   * 是否可编辑\n   */\n  editable: boolean;\n  /**\n   * 测量ascent和descent的模式，预览的时候actual比较合适，而如果需要编辑的话，font比较合适\n   */\n  ascentDescentMode?: 'actual' | 'font';\n  /**\n   * 富文本的编辑配置\n   */\n  editOptions: IRichTextEditOptionsType | null;\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  // 仅支持纯色背景\n  background?: string;\n  // 背景透明度\n  backgroundOpacity?: 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  placeholderColor?: string;\n  placeholderFontSize?: number;\n  placeholderFontFamily?: string;\n  // 是否将placeholder同步到textConfig中\n  syncPlaceholderToTextConfig?: boolean;\n  // 即使是空文本，是否也保持高度\n  keepHeightWhileEmpty?: boolean;\n  // 是否在输入的时候展示包围框，不传默认是false，可以传入颜色\n  boundsStrokeWhenInput?: string;\n  stopPropagation?: boolean;\n};\n\nexport type IRichTextAttribute = {\n  /**\n   * @since 0.22.1\n   * 升级后避免break change，通过开关来控制\n   */\n  upgradeAttrs: {\n    lineHeight: true;\n    multiBreakLine: true;\n  } | null;\n  /**\n   * 富文本的总宽度\n   */\n  width: number;\n  /**\n   * 富文本的总高度\n   */\n  height: number;\n  /**\n   * 是否可编辑\n   */\n  editable: boolean;\n  /**\n   * 测量ascent和descent的模式，预览的时候actual比较合适，而如果需要编辑的话，font比较合适\n   */\n  ascentDescentMode?: 'actual' | 'font';\n  /**\n   * 富文本的编辑配置\n   */\n  editOptions: IRichTextEditOptionsType | null;\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  // 仅支持纯色背景\n  background?: string;\n  // 背景透明度\n  backgroundOpacity?: number;\n  /**\n   * 该character与相邻节点的间距\n   */\n  space?: number;\n  /**\n   * 该character的偏移量，仅在Render时生效，不影响布局效果，常用于动画过程中\n   */\n  dx?: number;\n  /**\n   * 该character的偏移量，仅在Render时生效不影响布局效果，常用于动画过程中\n   */\n  dy?: 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"]}