fabric/dist/src/util/animation/ColorAnimation.mjs.map

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

{"version":3,"file":"ColorAnimation.mjs","names":[],"sources":["../../../../src/util/animation/ColorAnimation.ts"],"sourcesContent":["import { Color } from '../../color/Color';\nimport type { TRGBAColorSource } from '../../color/typedefs';\nimport { halfPI } from '../../constants';\nimport { capValue } from '../misc/capValue';\nimport { AnimationBase } from './AnimationBase';\nimport type {\n  ColorAnimationOptions,\n  TEasingFunction,\n  TOnAnimationChangeCallback,\n} from './types';\n\nconst defaultColorEasing: TEasingFunction = (\n  timeElapsed,\n  startValue,\n  byValue,\n  duration,\n) => {\n  const durationProgress = 1 - Math.cos((timeElapsed / duration) * halfPI);\n  return startValue + byValue * durationProgress;\n};\n\nconst wrapColorCallback = <R>(\n  callback?: TOnAnimationChangeCallback<string, R>,\n) =>\n  callback &&\n  ((rgba: TRGBAColorSource, valueProgress: number, durationProgress: number) =>\n    callback(new Color(rgba).toRgba(), valueProgress, durationProgress));\n\nexport class ColorAnimation extends AnimationBase<TRGBAColorSource> {\n  constructor({\n    startValue,\n    endValue,\n    easing = defaultColorEasing,\n    onChange,\n    onComplete,\n    abort,\n    ...options\n  }: ColorAnimationOptions) {\n    const startColor = new Color(startValue).getSource();\n    const endColor = new Color(endValue).getSource();\n    super({\n      ...options,\n      startValue: startColor,\n      byValue: endColor.map(\n        (value, i) => value - startColor[i],\n      ) as TRGBAColorSource,\n      easing,\n      onChange: wrapColorCallback(onChange),\n      onComplete: wrapColorCallback(onComplete),\n      abort: wrapColorCallback(abort),\n    });\n  }\n  protected calculate(timeElapsed: number) {\n    const [r, g, b, a] = this.startValue.map((value, i) =>\n      this.easing(timeElapsed, value, this.byValue[i], this.duration, i),\n    ) as TRGBAColorSource;\n    const value = [\n      ...[r, g, b].map(Math.round),\n      capValue(0, a, 1),\n    ] as TRGBAColorSource;\n    return {\n      value,\n      valueProgress:\n        // to correctly calculate the change ratio we must find a changed value\n        value\n          .map((p, i) =>\n            this.byValue[i] !== 0\n              ? Math.abs((p - this.startValue[i]) / this.byValue[i])\n              : 0,\n          )\n          .find((p) => p !== 0) || 0,\n    };\n  }\n}\n"],"mappings":";;;;;AAWA,MAAM,sBACJ,aACA,YACA,SACA,aACG;AAEH,QAAO,aAAa,WADK,IAAI,KAAK,IAAK,cAAc,WAAY,OAAO;;AAI1E,MAAM,qBACJ,aAEA,cACE,MAAwB,eAAuB,qBAC/C,SAAS,IAAI,MAAM,KAAK,CAAC,QAAQ,EAAE,eAAe,iBAAiB;AAEvE,IAAa,iBAAb,cAAoC,cAAgC;CAClE,YAAY,EACV,YACA,UACA,SAAS,oBACT,UACA,YACA,OACA,GAAG,WACqB;EACxB,MAAM,aAAa,IAAI,MAAM,WAAW,CAAC,WAAW;EACpD,MAAM,WAAW,IAAI,MAAM,SAAS,CAAC,WAAW;AAChD,QAAM;GACJ,GAAG;GACH,YAAY;GACZ,SAAS,SAAS,KACf,OAAO,MAAM,QAAQ,WAAW,GAClC;GACD;GACA,UAAU,kBAAkB,SAAS;GACrC,YAAY,kBAAkB,WAAW;GACzC,OAAO,kBAAkB,MAAM;GAChC,CAAC;;CAEJ,UAAoB,aAAqB;EACvC,MAAM,CAAC,GAAG,GAAG,GAAG,KAAK,KAAK,WAAW,KAAK,OAAO,MAC/C,KAAK,OAAO,aAAa,OAAO,KAAK,QAAQ,IAAI,KAAK,UAAU,EAAE,CACnE;EACD,MAAM,QAAQ,CACZ,GAAG;GAAC;GAAG;GAAG;GAAE,CAAC,IAAI,KAAK,MAAM,EAC5B,SAAS,GAAG,GAAG,EAAE,CAClB;AACD,SAAO;GACL;GACA,eAEE,MACG,KAAK,GAAG,MACP,KAAK,QAAQ,OAAO,IAChB,KAAK,KAAK,IAAI,KAAK,WAAW,MAAM,KAAK,QAAQ,GAAG,GACpD,EACL,CACA,MAAM,MAAM,MAAM,EAAE,IAAI;GAC9B"}