fabric/dist/src/shapes/Object/AnimatableObject.min.mjs.map

Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.

{"version":3,"file":"AnimatableObject.min.mjs","sources":["../../../../src/shapes/Object/AnimatableObject.ts"],"sourcesContent":["import type { TColorArg } from '../../color/typedefs';\nimport { FILL, STROKE } from '../../constants';\nimport type { ObjectEvents } from '../../EventTypeDefs';\nimport type { TAnimation } from '../../util/animation/animate';\nimport { animate, animateColor } from '../../util/animation/animate';\nimport type {\n  AnimationOptions,\n  ArrayAnimationOptions,\n  ColorAnimationOptions,\n  ValueAnimationOptions,\n} from '../../util/animation/types';\nimport { StackedObject } from './StackedObject';\n\nexport abstract class AnimatableObject<\n  EventSpec extends ObjectEvents = ObjectEvents\n> extends StackedObject<EventSpec> {\n  /**\n   * List of properties to consider for animating colors.\n   * @type String[]\n   */\n  static colorProperties: string[] = [FILL, STROKE, 'backgroundColor'];\n\n  /**\n   * Animates object's properties\n   * @param {Record<string, number | number[] | TColorArg>} animatable map of keys and end values\n   * @param {Partial<AnimationOptions<T>>} options\n   * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#animation}\n   * @return {Record<string, TAnimation<T>>} map of animation contexts\n   *\n   * As object — multiple properties\n   *\n   * object.animate({ left: ..., top: ... });\n   * object.animate({ left: ..., top: ... }, { duration: ... });\n   */\n  animate<T extends number | number[] | TColorArg>(\n    animatable: Record<string, T>,\n    options?: Partial<AnimationOptions<T>>\n  ): Record<string, TAnimation<T>> {\n    return Object.entries(animatable).reduce((acc, [key, endValue]) => {\n      acc[key] = this._animate(key, endValue, options);\n      return acc;\n    }, {} as Record<string, TAnimation<T>>);\n  }\n\n  /**\n   * @private\n   * @param {String} key Property to animate\n   * @param {String} to Value to animate to\n   * @param {Object} [options] Options object\n   */\n  _animate<T extends number | number[] | TColorArg>(\n    key: string,\n    endValue: T,\n    options: Partial<AnimationOptions<T>> = {}\n  ): TAnimation<T> {\n    const path = key.split('.');\n    const propIsColor = (\n      this.constructor as typeof AnimatableObject\n    ).colorProperties.includes(path[path.length - 1]);\n    const { abort, startValue, onChange, onComplete } = options;\n    const animationOptions = {\n      ...options,\n      target: this,\n      // path.reduce... is the current value in case start value isn't provided\n      startValue:\n        startValue ?? path.reduce((deep: any, key) => deep[key], this),\n      endValue,\n      abort: abort?.bind(this),\n      onChange: (\n        value: number | number[] | string,\n        valueProgress: number,\n        durationProgress: number\n      ) => {\n        path.reduce((deep: Record<string, any>, key, index) => {\n          if (index === path.length - 1) {\n            deep[key] = value;\n          }\n          return deep[key];\n        }, this);\n        onChange &&\n          // @ts-expect-error generic callback arg0 is wrong\n          onChange(value, valueProgress, durationProgress);\n      },\n      onComplete: (\n        value: number | number[] | string,\n        valueProgress: number,\n        durationProgress: number\n      ) => {\n        this.setCoords();\n        onComplete &&\n          // @ts-expect-error generic callback arg0 is wrong\n          onComplete(value, valueProgress, durationProgress);\n      },\n    } as AnimationOptions<T>;\n\n    return (\n      propIsColor\n        ? animateColor(animationOptions as ColorAnimationOptions)\n        : animate(\n            animationOptions as ValueAnimationOptions | ArrayAnimationOptions\n          )\n    ) as TAnimation<T>;\n  }\n}\n"],"names":["AnimatableObject","StackedObject","animate","animatable","options","Object","entries","reduce","acc","_ref","key","endValue","this","_animate","arguments","length","undefined","path","split","propIsColor","constructor","colorProperties","includes","abort","startValue","onChange","onComplete","animationOptions","_objectSpread","target","deep","bind","value","valueProgress","durationProgress","index","setCoords","animateColor","_defineProperty","FILL","STROKE"],"mappings":"4SAaO,MAAeA,UAEZC,EAmBRC,OAAAA,CACEC,EACAC,GAEA,OAAOC,OAAOC,QAAQH,GAAYI,QAAO,CAACC,EAAGC,KAAsB,IAAnBC,EAAKC,GAASF,EAE5D,OADAD,EAAIE,GAAOE,KAAKC,SAASH,EAAKC,EAAUP,GACjCI,CAAG,GACT,CAAmC,EACxC,CAQAK,QAAAA,CACEH,EACAC,GAEe,IADfP,EAAqCU,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,CAAA,EAExC,MAAMG,EAAOP,EAAIQ,MAAM,KACjBC,EACJP,KAAKQ,YACLC,gBAAgBC,SAASL,EAAKA,EAAKF,OAAS,KACxCQ,MAAEA,EAAKC,WAAEA,EAAUC,SAAEA,EAAQC,WAAEA,GAAetB,EAC9CuB,EAAgBC,EAAAA,KACjBxB,GAAO,GAAA,CACVyB,OAAQjB,KAERY,WACEA,QAAAA,EAAcP,EAAKV,QAAO,CAACuB,EAAWpB,IAAQoB,EAAKpB,IAAME,MAC3DD,WACAY,MAAOA,aAAK,EAALA,EAAOQ,KAAKnB,MACnBa,SAAUA,CACRO,EACAC,EACAC,KAEAjB,EAAKV,QAAO,CAACuB,EAA2BpB,EAAKyB,KACvCA,IAAUlB,EAAKF,OAAS,IAC1Be,EAAKpB,GAAOsB,GAEPF,EAAKpB,KACXE,MACHa,GAEEA,EAASO,EAAOC,EAAeC,EAAiB,EAEpDR,WAAYA,CACVM,EACAC,EACAC,KAEAtB,KAAKwB,YACLV,GAEEA,EAAWM,EAAOC,EAAeC,EAAiB,IAIxD,OACEf,EACIkB,EAAaV,GACbzB,EACEyB,EAGV,EAtFAW,EAHoBtC,EAOe,kBAAA,CAACuC,EAAMC,EAAQ"}