@remotion/paths 4.0.527 → 4.0.529

package/dist/esm/index.mjs

@@ -1144,9 +1144,31 @@ var makeInstructions = (arr, instruction, cb) => {
 };
 var segmentRegExp = /([astvzqmhlc])([^astvzqmhlc]*)/gi;
 var numberRegExp = /-?[0-9]*\.?[0-9]+(?:e[-+]?\d+)?/gi;
+var arcNumberRegExp = /[\s,]*([-+]?(?:[0-9]+\.?[0-9]*|\.[0-9]+)(?:e[-+]?\d+)?)/iy;
+var arcFlagRegExp = /[\s,]*([01])/y;
 var parseValues = (args, instructionType) => {
-  const numbers = args.match(numberRegExp);
-  if (!numbers) {
+  let numbers;
+  if (instructionType === "A" || instructionType === "a") {
+    numbers = [];
+    let match;
+    let lastIndex = 0;
+    do {
+      const regExp = numbers.length % 7 === 3 || numbers.length % 7 === 4 ? arcFlagRegExp : arcNumberRegExp;
+      regExp.lastIndex = lastIndex;
+      match = regExp.exec(args);
+      if (match) {
+        numbers.push(match[1]);
+        lastIndex = regExp.lastIndex;
+      }
+    } while (match);
+    const rest = args.slice(lastIndex);
+    if (!/^[\s,]*$/.test(rest)) {
+      throw new Error(`Malformed path data: ${instructionType} has an invalid value at "${rest.trim()}"`);
+    }
+  } else {
+    numbers = args.match(numberRegExp);
+  }
+  if (!numbers || numbers.length === 0) {
     if (instructionType === "Z" || instructionType === "z") {
       return [];
     }
@@ -1788,8 +1810,8 @@ var normalizeInstructions = (instructions) => {
       moveX = instruction.x;
       moveY = instruction.y;
     } else if (instruction.type === "m") {
-      moveX += instruction.dx;
-      moveY += instruction.dy;
+      moveX = x + instruction.dx;
+      moveY = y + instruction.dy;
     }
     if (instruction.type === "A" || instruction.type === "C" || instruction.type === "L" || instruction.type === "M" || instruction.type === "Q" || instruction.type === "S" || instruction.type === "T") {
       normalized.push(instruction);
@@ -3275,6 +3297,101 @@ var interpolatePath = (value, firstPath, secondPath) => {
   const commandInterpolator = interpolateInstructions(aCommands, bCommands);
   return serializeInstructions(commandInterpolator(value));
 };
+// src/interpolate-paths.ts
+import {
+  interpolate
+} from "remotion/no-react";
+var normalizeInterpolatedPath = (path) => {
+  return path.replace(/-?\d*\.?\d+(?:e[+-]?\d+)?/gi, (value) => {
+    const number = Number(value);
+    return Number.isInteger(number) ? value : String(Number(number.toPrecision(15)));
+  });
+};
+var interpolatePaths = (input, inputRange, outputRange, options) => {
+  if (!Array.isArray(outputRange)) {
+    throw new TypeError("outputRange must be an array of SVG path strings");
+  }
+  for (const path of outputRange) {
+    if (typeof path !== "string") {
+      throw new TypeError("outputRange must contain only SVG path strings");
+    }
+  }
+  for (const side of ["extrapolateLeft", "extrapolateRight"]) {
+    const extrapolation = options?.[side];
+    if (extrapolation !== undefined && extrapolation !== "extend" && extrapolation !== "clamp" && extrapolation !== "wrap") {
+      throw new TypeError(`${side} must be "extend", "clamp", or "wrap" for interpolatePaths()`);
+    }
+  }
+  const weights = interpolate(input, inputRange, outputRange.map((_, pathIndex) => outputRange.map((__, index) => index === pathIndex ? 1 : 0)), options);
+  const exactPathIndex = weights.findIndex((weight, index) => weight === 1 && weights.every((otherWeight, otherIndex) => otherIndex === index ? true : otherWeight === 0));
+  if (exactPathIndex !== -1) {
+    return outputRange[exactPathIndex];
+  }
+  const contributingPaths = outputRange.map((path, index) => ({ path, weight: weights[index] })).filter(({ weight }) => weight !== 0);
+  const paths = contributingPaths.map(({ path }) => {
+    const commands = reduceInstructions(parsePath(path));
+    if (commands.length === 0) {
+      throw new TypeError(`SVG Path "${path}" is not valid`);
+    }
+    return commands;
+  });
+  const closed = paths.every((commands) => commands[commands.length - 1].type === "Z");
+  const openPaths = paths.map((commands) => commands[commands.length - 1].type === "Z" ? commands.slice(0, -1) : commands);
+  const reference = openPaths.reduce((longest, commands) => commands.length > longest.length ? commands : longest);
+  const extendedPaths = openPaths.map((commands) => commands.length < reference.length ? extendInstruction(commands, reference) : commands);
+  const result = reference.map((_, instructionIndex) => {
+    const commands = extendedPaths.map((path) => path[instructionIndex]);
+    if (commands.some((command) => command.type === "Z")) {
+      if (commands.every((command) => command.type === "Z")) {
+        return { type: "Z" };
+      }
+      throw new TypeError("Cannot interpolate SVG paths with different subpath structures");
+    }
+    const target = commands.find((command) => command.type === "C") ?? commands[0];
+    const normalized = commands.map((command, pathIndex) => {
+      if (command.type === "M" !== (target.type === "M")) {
+        throw new TypeError("Cannot interpolate SVG paths with different subpath structures");
+      }
+      return convertToSameInstructionType(command, target, getEndPosition(extendedPaths[pathIndex].slice(0, instructionIndex)));
+    });
+    const coordinates = normalized.map((command) => {
+      if (command.type === "Z") {
+        return [];
+      }
+      return command.type === "C" ? [
+        command.x,
+        command.y,
+        command.cp1x,
+        command.cp1y,
+        command.cp2x,
+        command.cp2y
+      ] : [command.x, command.y];
+    });
+    const values = coordinates[0].map((base, coordinateIndex) => {
+      const interpolated = coordinates.reduce((value, path, pathIndex) => value + (path[coordinateIndex] - base) * contributingPaths[pathIndex].weight, base);
+      if (Number.isFinite(interpolated)) {
+        return interpolated;
+      }
+      return coordinates.reduce((sum, path, pathIndex) => sum + path[coordinateIndex] * contributingPaths[pathIndex].weight, 0);
+    });
+    if (target.type === "C") {
+      return {
+        type: "C",
+        x: values[0],
+        y: values[1],
+        cp1x: values[2],
+        cp1y: values[3],
+        cp2x: values[4],
+        cp2y: values[5]
+      };
+    }
+    return { type: target.type, x: values[0], y: values[1] };
+  });
+  if (closed) {
+    result.push({ type: "Z" });
+  }
+  return normalizeInterpolatedPath(serializeInstructions(result));
+};
 // src/reset-path.ts
 var resetPath = (d) => {
   const box = getBoundingBox(d);
@@ -3735,6 +3852,7 @@ export {
   reduceInstructions,
   parsePath,
   normalizePath,
+  interpolatePaths,
   interpolatePath,
   getTangentAtLength,
   getSubpaths,

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export { getSubpaths } from './get-subpaths';
 export { getTangentAtLength } from './get-tangent-at-length';
 export { AbsoluteInstruction, BoundingBox, Instruction, Part, ReducedInstruction, } from './helpers/types';
 export { interpolatePath } from './interpolate-path/interpolate-path';
+export { interpolatePaths, type InterpolatePathsOptions, } from './interpolate-paths';
 export { normalizePath } from './normalize-path';
 export { parsePath } from './parse-path';
 export { reduceInstructions } from './reduce-instructions';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PathInternals = exports.warpPath = exports.translatePath = exports.serializeInstructions = exports.scalePath = exports.reversePath = exports.resetPath = exports.reduceInstructions = exports.parsePath = exports.normalizePath = exports.interpolatePath = exports.getTangentAtLength = exports.getSubpaths = exports.getPointAtLength = exports.getLength = exports.getInstructionIndexAtLength = exports.getBoundingBox = exports.extendViewBox = exports.evolvePath = exports.cutPath = exports.centerPath = void 0;
+exports.PathInternals = exports.warpPath = exports.translatePath = exports.serializeInstructions = exports.scalePath = exports.reversePath = exports.resetPath = exports.reduceInstructions = exports.parsePath = exports.normalizePath = exports.interpolatePaths = exports.interpolatePath = exports.getTangentAtLength = exports.getSubpaths = exports.getPointAtLength = exports.getLength = exports.getInstructionIndexAtLength = exports.getBoundingBox = exports.extendViewBox = exports.evolvePath = exports.cutPath = exports.centerPath = void 0;
 const cut_path_1 = require("./cut-path");
 const debug_path_1 = require("./debug-path");
 const get_bounding_box_1 = require("./get-bounding-box");
@@ -26,6 +26,8 @@ const get_tangent_at_length_1 = require("./get-tangent-at-length");
 Object.defineProperty(exports, "getTangentAtLength", { enumerable: true, get: function () { return get_tangent_at_length_1.getTangentAtLength; } });
 const interpolate_path_1 = require("./interpolate-path/interpolate-path");
 Object.defineProperty(exports, "interpolatePath", { enumerable: true, get: function () { return interpolate_path_1.interpolatePath; } });
+const interpolate_paths_1 = require("./interpolate-paths");
+Object.defineProperty(exports, "interpolatePaths", { enumerable: true, get: function () { return interpolate_paths_1.interpolatePaths; } });
 const normalize_path_1 = require("./normalize-path");
 Object.defineProperty(exports, "normalizePath", { enumerable: true, get: function () { return normalize_path_1.normalizePath; } });
 const parse_path_1 = require("./parse-path");

package/dist/interpolate-paths.d.ts

@@ -0,0 +1,6 @@
+import { type ExtrapolateType, type InterpolateOptions } from 'remotion/no-react';
+export type InterpolatePathsOptions = Pick<InterpolateOptions, 'easing' | 'posterize'> & {
+    extrapolateLeft?: Exclude<ExtrapolateType, 'identity'>;
+    extrapolateRight?: Exclude<ExtrapolateType, 'identity'>;
+};
+export declare const interpolatePaths: (input: number, inputRange: readonly number[], outputRange: readonly string[], options?: InterpolatePathsOptions | undefined) => string;

package/dist/interpolate-paths.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.interpolatePaths = void 0;
+const no_react_1 = require("remotion/no-react");
+const get_end_position_1 = require("./get-end-position");
+const convert_to_same_instruction_type_1 = require("./interpolate-path/convert-to-same-instruction-type");
+const extend_command_1 = require("./interpolate-path/extend-command");
+const parse_path_1 = require("./parse-path");
+const reduce_instructions_1 = require("./reduce-instructions");
+const serialize_instructions_1 = require("./serialize-instructions");
+const normalizeInterpolatedPath = (path) => {
+    // Remove floating-point artifacts without rounding small coordinates to zero.
+    return path.replace(/-?\d*\.?\d+(?:e[+-]?\d+)?/gi, (value) => {
+        const number = Number(value);
+        return Number.isInteger(number)
+            ? value
+            : String(Number(number.toPrecision(15)));
+    });
+};
+/*
+ * @description Interpolates between multiple SVG paths, with keyframes, easing, and extrapolation.
+ * @see [Documentation](https://www.remotion.dev/docs/paths/interpolate-paths)
+ */
+const interpolatePaths = (input, inputRange, outputRange, options) => {
+    if (!Array.isArray(outputRange)) {
+        throw new TypeError('outputRange must be an array of SVG path strings');
+    }
+    for (const path of outputRange) {
+        if (typeof path !== 'string') {
+            throw new TypeError('outputRange must contain only SVG path strings');
+        }
+    }
+    for (const side of ['extrapolateLeft', 'extrapolateRight']) {
+        const extrapolation = options === null || options === void 0 ? void 0 : options[side];
+        if (extrapolation !== undefined &&
+            extrapolation !== 'extend' &&
+            extrapolation !== 'clamp' &&
+            extrapolation !== 'wrap') {
+            throw new TypeError(`${side} must be "extend", "clamp", or "wrap" for interpolatePaths()`);
+        }
+    }
+    // Interpolating a basis vector for each path preserves segment selection,
+    // easing overshoot, and the contributions of earlier spring segments.
+    const weights = (0, no_react_1.interpolate)(input, inputRange, outputRange.map((_, pathIndex) => outputRange.map((__, index) => (index === pathIndex ? 1 : 0))), options);
+    const exactPathIndex = weights.findIndex((weight, index) => weight === 1 &&
+        weights.every((otherWeight, otherIndex) => otherIndex === index ? true : otherWeight === 0));
+    if (exactPathIndex !== -1) {
+        return outputRange[exactPathIndex];
+    }
+    const contributingPaths = outputRange
+        .map((path, index) => ({ path, weight: weights[index] }))
+        .filter(({ weight }) => weight !== 0);
+    const paths = contributingPaths.map(({ path }) => {
+        const commands = (0, reduce_instructions_1.reduceInstructions)((0, parse_path_1.parsePath)(path));
+        if (commands.length === 0) {
+            throw new TypeError(`SVG Path "${path}" is not valid`);
+        }
+        return commands;
+    });
+    const closed = paths.every((commands) => commands[commands.length - 1].type === 'Z');
+    const openPaths = paths.map((commands) => commands[commands.length - 1].type === 'Z'
+        ? commands.slice(0, -1)
+        : commands);
+    const reference = openPaths.reduce((longest, commands) => commands.length > longest.length ? commands : longest);
+    const extendedPaths = openPaths.map((commands) => commands.length < reference.length
+        ? (0, extend_command_1.extendInstruction)(commands, reference)
+        : commands);
+    const result = reference.map((_, instructionIndex) => {
+        var _a;
+        const commands = extendedPaths.map((path) => path[instructionIndex]);
+        if (commands.some((command) => command.type === 'Z')) {
+            if (commands.every((command) => command.type === 'Z')) {
+                return { type: 'Z' };
+            }
+            throw new TypeError('Cannot interpolate SVG paths with different subpath structures');
+        }
+        // A common cubic command preserves every curve while allowing paths with
+        // different instruction types to share the same coordinate interpolation.
+        const target = (_a = commands.find((command) => command.type === 'C')) !== null && _a !== void 0 ? _a : commands[0];
+        const normalized = commands.map((command, pathIndex) => {
+            if ((command.type === 'M') !== (target.type === 'M')) {
+                throw new TypeError('Cannot interpolate SVG paths with different subpath structures');
+            }
+            return (0, convert_to_same_instruction_type_1.convertToSameInstructionType)(command, target, (0, get_end_position_1.getEndPosition)(extendedPaths[pathIndex].slice(0, instructionIndex)));
+        });
+        const coordinates = normalized.map((command) => {
+            if (command.type === 'Z') {
+                return [];
+            }
+            return command.type === 'C'
+                ? [
+                    command.x,
+                    command.y,
+                    command.cp1x,
+                    command.cp1y,
+                    command.cp2x,
+                    command.cp2y,
+                ]
+                : [command.x, command.y];
+        });
+        const values = coordinates[0].map((base, coordinateIndex) => {
+            const interpolated = coordinates.reduce((value, path, pathIndex) => value +
+                (path[coordinateIndex] - base) * contributingPaths[pathIndex].weight, base);
+            if (Number.isFinite(interpolated)) {
+                return interpolated;
+            }
+            // Opposite large coordinates can overflow when subtracting the base.
+            return coordinates.reduce((sum, path, pathIndex) => sum + path[coordinateIndex] * contributingPaths[pathIndex].weight, 0);
+        });
+        if (target.type === 'C') {
+            return {
+                type: 'C',
+                x: values[0],
+                y: values[1],
+                cp1x: values[2],
+                cp1y: values[3],
+                cp2x: values[4],
+                cp2y: values[5],
+            };
+        }
+        return { type: target.type, x: values[0], y: values[1] };
+    });
+    if (closed) {
+        result.push({ type: 'Z' });
+    }
+    return normalizeInterpolatedPath((0, serialize_instructions_1.serializeInstructions)(result));
+};
+exports.interpolatePaths = interpolatePaths;

package/dist/normalize-path.js

@@ -17,8 +17,8 @@ const normalizeInstructions = (instructions) => {
             moveY = instruction.y;
         }
         else if (instruction.type === 'm') {
-            moveX += instruction.dx;
-            moveY += instruction.dy;
+            moveX = x + instruction.dx;
+            moveY = y + instruction.dy;
         }
         if (instruction.type === 'A' ||
             instruction.type === 'C' ||

package/dist/parse-path.js

@@ -42,9 +42,36 @@ const makeInstructions = (arr, instruction, cb) => {
 };
 const segmentRegExp = /([astvzqmhlc])([^astvzqmhlc]*)/gi;
 const numberRegExp = /-?[0-9]*\.?[0-9]+(?:e[-+]?\d+)?/gi;
+const arcNumberRegExp = /[\s,]*([-+]?(?:[0-9]+\.?[0-9]*|\.[0-9]+)(?:e[-+]?\d+)?)/iy;
+const arcFlagRegExp = /[\s,]*([01])/y;
 const parseValues = (args, instructionType) => {
-    const numbers = args.match(numberRegExp);
-    if (!numbers) {
+    let numbers;
+    if (instructionType === 'A' || instructionType === 'a') {
+        // Arc flags are a single "0" or "1" and don't need a separator,
+        // e.g. "A1 1 0 011 1" (https://www.w3.org/TR/SVG2/paths.html#PathDataBNF)
+        numbers = [];
+        let match;
+        let lastIndex = 0;
+        do {
+            const regExp = numbers.length % 7 === 3 || numbers.length % 7 === 4
+                ? arcFlagRegExp
+                : arcNumberRegExp;
+            regExp.lastIndex = lastIndex;
+            match = regExp.exec(args);
+            if (match) {
+                numbers.push(match[1]);
+                lastIndex = regExp.lastIndex;
+            }
+        } while (match);
+        const rest = args.slice(lastIndex);
+        if (!/^[\s,]*$/.test(rest)) {
+            throw new Error(`Malformed path data: ${instructionType} has an invalid value at "${rest.trim()}"`);
+        }
+    }
+    else {
+        numbers = args.match(numberRegExp);
+    }
+    if (!numbers || numbers.length === 0) {
         if (instructionType === 'Z' || instructionType === 'z') {
             return [];
         }

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/paths"
 	},
 	"name": "@remotion/paths",
-	"version": "4.0.527",
+	"version": "4.0.529",
 	"description": "Utilities for working with SVG paths",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -26,10 +26,13 @@
 		"utilities"
 	],
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.527",
+		"@remotion/eslint-config-internal": "4.0.529",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},
+	"dependencies": {
+		"remotion": "4.0.529"
+	},
 	"exports": {
 		"./package.json": "./package.json",
 		".": {