animejs 4.1.4 → 4.2.0

package/dist/modules/scope/scope.js

@@ -0,0 +1,251 @@
+/**
+ * Anime.js - scope - ESM
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+import { doc, win } from '../core/consts.js';
+import { globals, scope } from '../core/globals.js';
+import { mergeObjects, isFnc } from '../core/helpers.js';
+import { parseTargets } from '../core/targets.js';
+import { keepTime } from '../utils/time.js';
+
+/**
+ * @import {
+ *   Tickable,
+ *   ScopeParams,
+ *   DOMTarget,
+ *   ReactRef,
+ *   AngularRef,
+ *   DOMTargetSelector,
+ *   DefaultsParams,
+ *   ScopeConstructorCallback,
+ *   ScopeCleanupCallback,
+ *   Revertible,
+ *   ScopeMethod,
+ *   ScopedCallback,
+ * } from '../types/index.js'
+*/
+
+class Scope {
+  /** @param {ScopeParams} [parameters] */
+  constructor(parameters = {}) {
+    if (scope.current) scope.current.register(this);
+    const rootParam = parameters.root;
+    /** @type {Document|DOMTarget} */
+    let root = doc;
+    if (rootParam) {
+      root = /** @type {ReactRef} */(rootParam).current ||
+             /** @type {AngularRef} */(rootParam).nativeElement ||
+             parseTargets(/** @type {DOMTargetSelector} */(rootParam))[0] ||
+             doc;
+    }
+    const scopeDefaults = parameters.defaults;
+    const globalDefault = globals.defaults;
+    const mediaQueries = parameters.mediaQueries;
+    /** @type {DefaultsParams} */
+    this.defaults = scopeDefaults ? mergeObjects(scopeDefaults, globalDefault) : globalDefault;
+    /** @type {Document|DOMTarget} */
+    this.root = root;
+    /** @type {Array<ScopeConstructorCallback>} */
+    this.constructors = [];
+    /** @type {Array<ScopeCleanupCallback>} */
+    this.revertConstructors = [];
+    /** @type {Array<Revertible>} */
+    this.revertibles = [];
+    /** @type {Array<ScopeConstructorCallback | ((scope: this) => Tickable)>} */
+    this.constructorsOnce = [];
+    /** @type {Array<ScopeCleanupCallback>} */
+    this.revertConstructorsOnce = [];
+    /** @type {Array<Revertible>} */
+    this.revertiblesOnce = [];
+    /** @type {Boolean} */
+    this.once = false;
+    /** @type {Number} */
+    this.onceIndex = 0;
+    /** @type {Record<String, ScopeMethod>} */
+    this.methods = {};
+    /** @type {Record<String, Boolean>} */
+    this.matches = {};
+    /** @type {Record<String, MediaQueryList>} */
+    this.mediaQueryLists = {};
+    /** @type {Record<String, any>} */
+    this.data = {};
+    if (mediaQueries) {
+      for (let mq in mediaQueries) {
+        const _mq = win.matchMedia(mediaQueries[mq]);
+        this.mediaQueryLists[mq] = _mq;
+        _mq.addEventListener('change', this);
+      }
+    }
+  }
+
+  /**
+   * @param {Revertible} revertible
+   */
+  register(revertible) {
+    const store = this.once ? this.revertiblesOnce : this.revertibles;
+    store.push(revertible);
+  }
+
+  /**
+   * @template T
+   * @param {ScopedCallback<T>} cb
+   * @return {T}
+   */
+  execute(cb) {
+    let activeScope = scope.current;
+    let activeRoot = scope.root;
+    let activeDefaults = globals.defaults;
+    scope.current = this;
+    scope.root = this.root;
+    globals.defaults = this.defaults;
+    const mqs = this.mediaQueryLists;
+    for (let mq in mqs) this.matches[mq] = mqs[mq].matches;
+    const returned = cb(this);
+    scope.current = activeScope;
+    scope.root = activeRoot;
+    globals.defaults = activeDefaults;
+    return returned;
+  }
+
+  /**
+   * @return {this}
+   */
+  refresh() {
+    this.onceIndex = 0;
+    this.execute(() => {
+      let i = this.revertibles.length;
+      let y = this.revertConstructors.length;
+      while (i--) this.revertibles[i].revert();
+      while (y--) this.revertConstructors[y](this);
+      this.revertibles.length = 0;
+      this.revertConstructors.length = 0;
+      this.constructors.forEach((/** @type {ScopeConstructorCallback} */constructor) => {
+        const revertConstructor = constructor(this);
+        if (isFnc(revertConstructor)) {
+          this.revertConstructors.push(revertConstructor);
+        }
+      });
+    });
+    return this;
+  }
+
+  /**
+   * @overload
+   * @param {String} a1
+   * @param {ScopeMethod} a2
+   * @return {this}
+   *
+   * @overload
+   * @param {ScopeConstructorCallback} a1
+   * @return {this}
+   *
+   * @param {String|ScopeConstructorCallback} a1
+   * @param {ScopeMethod} [a2]
+   */
+  add(a1, a2) {
+    this.once = false;
+    if (isFnc(a1)) {
+      const constructor = /** @type {ScopeConstructorCallback} */(a1);
+      this.constructors.push(constructor);
+      this.execute(() => {
+        const revertConstructor = constructor(this);
+        if (isFnc(revertConstructor)) {
+          this.revertConstructors.push(revertConstructor);
+        }
+      });
+    } else {
+      this.methods[/** @type {String} */(a1)] = (/** @type {any} */...args) => this.execute(() => a2(...args));
+    }
+    return this;
+  }
+
+  /**
+   * @param {ScopeConstructorCallback} scopeConstructorCallback
+   * @return {this}
+   */
+  addOnce(scopeConstructorCallback) {
+    this.once = true;
+    if (isFnc(scopeConstructorCallback)) {
+      const currentIndex = this.onceIndex++;
+      const tracked = this.constructorsOnce[currentIndex];
+      if (tracked) return this;
+      const constructor = /** @type {ScopeConstructorCallback} */(scopeConstructorCallback);
+      this.constructorsOnce[currentIndex] = constructor;
+      this.execute(() => {
+        const revertConstructor = constructor(this);
+        if (isFnc(revertConstructor)) {
+          this.revertConstructorsOnce.push(revertConstructor);
+        }
+      });
+    }
+    return this;
+  }
+
+  /**
+   * @param  {(scope: this) => Tickable} cb
+   * @return {Tickable}
+   */
+  keepTime(cb) {
+    this.once = true;
+    const currentIndex = this.onceIndex++;
+    const tracked = /** @type {(scope: this) => Tickable} */(this.constructorsOnce[currentIndex]);
+    if (isFnc(tracked)) return tracked(this);
+    const constructor = /** @type {(scope: this) => Tickable} */(keepTime(cb));
+    this.constructorsOnce[currentIndex] = constructor;
+    let trackedTickable;
+    this.execute(() => {
+      trackedTickable = constructor(this);
+    });
+    return trackedTickable;
+  }
+
+  /**
+   * @param {Event} e
+   */
+  handleEvent(e) {
+    switch (e.type) {
+      case 'change':
+        this.refresh();
+        break;
+    }
+  }
+
+  revert() {
+    const revertibles = this.revertibles;
+    const revertConstructors = this.revertConstructors;
+    const revertiblesOnce = this.revertiblesOnce;
+    const revertConstructorsOnce = this.revertConstructorsOnce;
+    const mqs = this.mediaQueryLists;
+    let i = revertibles.length;
+    let j = revertConstructors.length;
+    let k = revertiblesOnce.length;
+    let l = revertConstructorsOnce.length;
+    while (i--) revertibles[i].revert();
+    while (j--) revertConstructors[j](this);
+    while (k--) revertiblesOnce[k].revert();
+    while (l--) revertConstructorsOnce[l](this);
+    for (let mq in mqs) mqs[mq].removeEventListener('change', this);
+    revertibles.length = 0;
+    revertConstructors.length = 0;
+    this.constructors.length = 0;
+    revertiblesOnce.length = 0;
+    revertConstructorsOnce.length = 0;
+    this.constructorsOnce.length = 0;
+    this.onceIndex = 0;
+    this.matches = {};
+    this.methods = {};
+    this.mediaQueryLists = {};
+    this.data = {};
+  }
+}
+
+/**
+ * @param {ScopeParams} [params]
+ * @return {Scope}
+ */
+const createScope = params => new Scope(params);
+
+export { Scope, createScope };

package/dist/modules/svg/drawable.cjs

@@ -0,0 +1,119 @@
+/**
+ * Anime.js - svg - CJS
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+'use strict';
+
+var consts = require('../core/consts.cjs');
+var helpers = require('../core/helpers.cjs');
+var targets = require('../core/targets.cjs');
+
+/**
+ * @import {
+ *   TargetsParam,
+ *   DrawableSVGGeometry,
+ * } from '../types/index.js'
+*/
+
+/**
+ * @param {SVGGeometryElement} [$el]
+ * @return {Number}
+ */
+const getScaleFactor = $el => {
+  let scaleFactor = 1;
+  if ($el && $el.getCTM) {
+    const ctm = $el.getCTM();
+    if (ctm) {
+      const scaleX = helpers.sqrt(ctm.a * ctm.a + ctm.b * ctm.b);
+      const scaleY = helpers.sqrt(ctm.c * ctm.c + ctm.d * ctm.d);
+      scaleFactor = (scaleX + scaleY) / 2;
+    }
+  }
+  return scaleFactor;
+};
+
+/**
+ * Creates a proxy that wraps an SVGGeometryElement and adds drawing functionality.
+ * @param {SVGGeometryElement} $el - The SVG element to transform into a drawable
+ * @param {number} start - Starting position (0-1)
+ * @param {number} end - Ending position (0-1)
+ * @return {DrawableSVGGeometry} - Returns a proxy that preserves the original element's type with additional 'draw' attribute functionality
+ */
+const createDrawableProxy = ($el, start, end) => {
+  const pathLength = consts.K;
+  const computedStyles = getComputedStyle($el);
+  const strokeLineCap = computedStyles.strokeLinecap;
+  // @ts-ignore
+  const $scalled = computedStyles.vectorEffect === 'non-scaling-stroke' ? $el : null;
+  let currentCap = strokeLineCap;
+
+  const proxy = new Proxy($el, {
+    get(target, property) {
+      const value = target[property];
+      if (property === consts.proxyTargetSymbol) return target;
+      if (property === 'setAttribute') {
+        return (...args) => {
+          if (args[0] === 'draw') {
+            const value = args[1];
+            const values = value.split(' ');
+            const v1 = +values[0];
+            const v2 = +values[1];
+            // TOTO: Benchmark if performing two slices is more performant than one split
+            // const spaceIndex = value.indexOf(' ');
+            // const v1 = round(+value.slice(0, spaceIndex), precision);
+            // const v2 = round(+value.slice(spaceIndex + 1), precision);
+            const scaleFactor = getScaleFactor($scalled);
+            const os = v1 * -pathLength * scaleFactor;
+            const d1 = (v2 * pathLength * scaleFactor) + os;
+            const d2 = (pathLength * scaleFactor +
+                      ((v1 === 0 && v2 === 1) || (v1 === 1 && v2 === 0) ? 0 : 10 * scaleFactor) - d1);
+            if (strokeLineCap !== 'butt') {
+              const newCap = v1 === v2 ? 'butt' : strokeLineCap;
+              if (currentCap !== newCap) {
+                target.style.strokeLinecap = `${newCap}`;
+                currentCap = newCap;
+              }
+            }
+            target.setAttribute('stroke-dashoffset', `${os}`);
+            target.setAttribute('stroke-dasharray', `${d1} ${d2}`);
+          }
+          return Reflect.apply(value, target, args);
+        };
+      }
+
+      if (helpers.isFnc(value)) {
+        return (...args) => Reflect.apply(value, target, args);
+      } else {
+        return value;
+      }
+    }
+  });
+
+  if ($el.getAttribute('pathLength') !== `${pathLength}`) {
+    $el.setAttribute('pathLength', `${pathLength}`);
+    proxy.setAttribute('draw', `${start} ${end}`);
+  }
+
+  return /** @type {DrawableSVGGeometry} */(proxy);
+};
+
+/**
+ * Creates drawable proxies for multiple SVG elements.
+ * @param {TargetsParam} selector - CSS selector, SVG element, or array of elements and selectors
+ * @param {number} [start=0] - Starting position (0-1)
+ * @param {number} [end=0] - Ending position (0-1)
+ * @return {Array<DrawableSVGGeometry>} - Array of proxied elements with drawing functionality
+ */
+const createDrawable = (selector, start = 0, end = 0) => {
+  const els = targets.parseTargets(selector);
+  return els.map($el => createDrawableProxy(
+    /** @type {SVGGeometryElement} */($el),
+    start,
+    end
+  ));
+};
+
+exports.createDrawable = createDrawable;

package/dist/modules/svg/drawable.d.ts

@@ -0,0 +1,3 @@
+export function createDrawable(selector: TargetsParam, start?: number, end?: number): Array<DrawableSVGGeometry>;
+import type { TargetsParam } from '../types/index.js';
+import type { DrawableSVGGeometry } from '../types/index.js';

package/dist/modules/svg/drawable.js

@@ -0,0 +1,117 @@
+/**
+ * Anime.js - svg - ESM
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+import { proxyTargetSymbol, K } from '../core/consts.js';
+import { isFnc, sqrt } from '../core/helpers.js';
+import { parseTargets } from '../core/targets.js';
+
+/**
+ * @import {
+ *   TargetsParam,
+ *   DrawableSVGGeometry,
+ * } from '../types/index.js'
+*/
+
+/**
+ * @param {SVGGeometryElement} [$el]
+ * @return {Number}
+ */
+const getScaleFactor = $el => {
+  let scaleFactor = 1;
+  if ($el && $el.getCTM) {
+    const ctm = $el.getCTM();
+    if (ctm) {
+      const scaleX = sqrt(ctm.a * ctm.a + ctm.b * ctm.b);
+      const scaleY = sqrt(ctm.c * ctm.c + ctm.d * ctm.d);
+      scaleFactor = (scaleX + scaleY) / 2;
+    }
+  }
+  return scaleFactor;
+};
+
+/**
+ * Creates a proxy that wraps an SVGGeometryElement and adds drawing functionality.
+ * @param {SVGGeometryElement} $el - The SVG element to transform into a drawable
+ * @param {number} start - Starting position (0-1)
+ * @param {number} end - Ending position (0-1)
+ * @return {DrawableSVGGeometry} - Returns a proxy that preserves the original element's type with additional 'draw' attribute functionality
+ */
+const createDrawableProxy = ($el, start, end) => {
+  const pathLength = K;
+  const computedStyles = getComputedStyle($el);
+  const strokeLineCap = computedStyles.strokeLinecap;
+  // @ts-ignore
+  const $scalled = computedStyles.vectorEffect === 'non-scaling-stroke' ? $el : null;
+  let currentCap = strokeLineCap;
+
+  const proxy = new Proxy($el, {
+    get(target, property) {
+      const value = target[property];
+      if (property === proxyTargetSymbol) return target;
+      if (property === 'setAttribute') {
+        return (...args) => {
+          if (args[0] === 'draw') {
+            const value = args[1];
+            const values = value.split(' ');
+            const v1 = +values[0];
+            const v2 = +values[1];
+            // TOTO: Benchmark if performing two slices is more performant than one split
+            // const spaceIndex = value.indexOf(' ');
+            // const v1 = round(+value.slice(0, spaceIndex), precision);
+            // const v2 = round(+value.slice(spaceIndex + 1), precision);
+            const scaleFactor = getScaleFactor($scalled);
+            const os = v1 * -pathLength * scaleFactor;
+            const d1 = (v2 * pathLength * scaleFactor) + os;
+            const d2 = (pathLength * scaleFactor +
+                      ((v1 === 0 && v2 === 1) || (v1 === 1 && v2 === 0) ? 0 : 10 * scaleFactor) - d1);
+            if (strokeLineCap !== 'butt') {
+              const newCap = v1 === v2 ? 'butt' : strokeLineCap;
+              if (currentCap !== newCap) {
+                target.style.strokeLinecap = `${newCap}`;
+                currentCap = newCap;
+              }
+            }
+            target.setAttribute('stroke-dashoffset', `${os}`);
+            target.setAttribute('stroke-dasharray', `${d1} ${d2}`);
+          }
+          return Reflect.apply(value, target, args);
+        };
+      }
+
+      if (isFnc(value)) {
+        return (...args) => Reflect.apply(value, target, args);
+      } else {
+        return value;
+      }
+    }
+  });
+
+  if ($el.getAttribute('pathLength') !== `${pathLength}`) {
+    $el.setAttribute('pathLength', `${pathLength}`);
+    proxy.setAttribute('draw', `${start} ${end}`);
+  }
+
+  return /** @type {DrawableSVGGeometry} */(proxy);
+};
+
+/**
+ * Creates drawable proxies for multiple SVG elements.
+ * @param {TargetsParam} selector - CSS selector, SVG element, or array of elements and selectors
+ * @param {number} [start=0] - Starting position (0-1)
+ * @param {number} [end=0] - Ending position (0-1)
+ * @return {Array<DrawableSVGGeometry>} - Array of proxied elements with drawing functionality
+ */
+const createDrawable = (selector, start = 0, end = 0) => {
+  const els = parseTargets(selector);
+  return els.map($el => createDrawableProxy(
+    /** @type {SVGGeometryElement} */($el),
+    start,
+    end
+  ));
+};
+
+export { createDrawable };

package/dist/modules/svg/helpers.cjs

@@ -0,0 +1,30 @@
+/**
+ * Anime.js - svg - CJS
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+'use strict';
+
+var helpers = require('../core/helpers.cjs');
+var targets = require('../core/targets.cjs');
+
+/**
+ * @import {
+ *   TargetsParam,
+ * } from '../types/index.js'
+*/
+
+/**
+ * @param  {TargetsParam} path
+ * @return {SVGGeometryElement|void}
+ */
+const getPath = path => {
+  const parsedTargets = targets.parseTargets(path);
+  const $parsedSvg = /** @type {SVGGeometryElement} */(parsedTargets[0]);
+  if (!$parsedSvg || !helpers.isSvg($parsedSvg)) return console.warn(`${path} is not a valid SVGGeometryElement`);
+  return $parsedSvg;
+};
+
+exports.getPath = getPath;

package/dist/modules/svg/helpers.d.ts

@@ -0,0 +1,2 @@
+export function getPath(path: TargetsParam): SVGGeometryElement | void;
+import type { TargetsParam } from '../types/index.js';

package/dist/modules/svg/helpers.js

@@ -0,0 +1,28 @@
+/**
+ * Anime.js - svg - ESM
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+import { isSvg } from '../core/helpers.js';
+import { parseTargets } from '../core/targets.js';
+
+/**
+ * @import {
+ *   TargetsParam,
+ * } from '../types/index.js'
+*/
+
+/**
+ * @param  {TargetsParam} path
+ * @return {SVGGeometryElement|void}
+ */
+const getPath = path => {
+  const parsedTargets = parseTargets(path);
+  const $parsedSvg = /** @type {SVGGeometryElement} */(parsedTargets[0]);
+  if (!$parsedSvg || !isSvg($parsedSvg)) return console.warn(`${path} is not a valid SVGGeometryElement`);
+  return $parsedSvg;
+};
+
+export { getPath };

package/dist/modules/svg/index.cjs

@@ -0,0 +1,18 @@
+/**
+ * Anime.js - svg - CJS
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+'use strict';
+
+var motionpath = require('./motionpath.cjs');
+var drawable = require('./drawable.cjs');
+var morphto = require('./morphto.cjs');
+
+
+
+exports.createMotionPath = motionpath.createMotionPath;
+exports.createDrawable = drawable.createDrawable;
+exports.morphTo = morphto.morphTo;

package/dist/modules/svg/index.d.ts

@@ -0,0 +1,3 @@
+export { createMotionPath } from "./motionpath.js";
+export { createDrawable } from "./drawable.js";
+export { morphTo } from "./morphto.js";

package/dist/modules/svg/index.js

@@ -0,0 +1,10 @@
+/**
+ * Anime.js - svg - ESM
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+export { createMotionPath } from './motionpath.js';
+export { createDrawable } from './drawable.js';
+export { morphTo } from './morphto.js';

package/dist/modules/svg/morphto.cjs

@@ -0,0 +1,58 @@
+/**
+ * Anime.js - svg - CJS
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+'use strict';
+
+var consts = require('../core/consts.cjs');
+var helpers$1 = require('../core/helpers.cjs');
+var helpers = require('./helpers.cjs');
+
+/**
+ * @import {
+ *   TargetsParam,
+ *   FunctionValue
+ * } from '../types/index.js'
+*/
+
+/**
+ * @param  {TargetsParam} path2
+ * @param  {Number} [precision]
+ * @return {FunctionValue}
+ */
+const morphTo = (path2, precision = .33) => ($path1) => {
+  const $path2 = /** @type {SVGGeometryElement} */(helpers.getPath(path2));
+  if (!$path2) return;
+  const isPath = $path1.tagName === 'path';
+  const separator = isPath ? ' ' : ',';
+  const previousPoints = $path1[consts.morphPointsSymbol];
+  if (previousPoints) $path1.setAttribute(isPath ? 'd' : 'points', previousPoints);
+
+  let v1 = '', v2 = '';
+
+  if (!precision) {
+    v1 = $path1.getAttribute(isPath ? 'd' : 'points');
+    v2 = $path2.getAttribute(isPath ? 'd' : 'points');
+  } else {
+    const length1 = /** @type {SVGGeometryElement} */($path1).getTotalLength();
+    const length2 = $path2.getTotalLength();
+    const maxPoints = Math.max(Math.ceil(length1 * precision), Math.ceil(length2 * precision));
+    for (let i = 0; i < maxPoints; i++) {
+      const t = i / (maxPoints - 1);
+      const pointOnPath1 = /** @type {SVGGeometryElement} */($path1).getPointAtLength(length1 * t);
+      const pointOnPath2 = $path2.getPointAtLength(length2 * t);
+      const prefix = isPath ? (i === 0 ? 'M' : 'L') : '';
+      v1 += prefix + helpers$1.round(pointOnPath1.x, 3) + separator + pointOnPath1.y + ' ';
+      v2 += prefix + helpers$1.round(pointOnPath2.x, 3) + separator + pointOnPath2.y + ' ';
+    }
+  }
+
+  $path1[consts.morphPointsSymbol] = v2;
+
+  return [v1, v2];
+};
+
+exports.morphTo = morphTo;

package/dist/modules/svg/morphto.d.ts

@@ -0,0 +1,3 @@
+export function morphTo(path2: TargetsParam, precision?: number): FunctionValue;
+import type { TargetsParam } from '../types/index.js';
+import type { FunctionValue } from '../types/index.js';