@remotion/paths 4.0.163 → 4.0.165

package/dist/debug-path.d.ts

@@ -0,0 +1,6 @@
+type DebugInstruction = {
+    d: string;
+    color: string;
+};
+export declare const debugPath: (d: string) => DebugInstruction[];
+export {};

package/dist/debug-path.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.debugPath = void 0;
+const normalize_path_1 = require("./normalize-path");
+const parse_path_1 = require("./parse-path");
+const serialize_instructions_1 = require("./serialize-instructions");
+const debugPath = (d) => {
+    const instructions = (0, normalize_path_1.normalizeInstructions)((0, parse_path_1.parsePath)(d));
+    return instructions
+        .map((inst, i) => {
+        if (inst.type === 'Z') {
+            return null;
+        }
+        if (inst.type === 'H' || inst.type === 'V') {
+            return null;
+        }
+        const topLeft = [inst.x - 5, inst.y - 5];
+        const topRight = [inst.x + 5, inst.y - 5];
+        const bottomLeft = [inst.x - 5, inst.y + 5];
+        const bottomRight = [inst.x + 5, inst.y + 5];
+        const triangle = [
+            {
+                type: 'M',
+                x: topLeft[0],
+                y: topLeft[1],
+            },
+            {
+                type: 'L',
+                x: topRight[0],
+                y: topRight[1],
+            },
+            {
+                type: 'L',
+                x: bottomRight[0],
+                y: bottomRight[1],
+            },
+            {
+                type: 'L',
+                x: bottomLeft[0],
+                y: bottomLeft[1],
+            },
+            {
+                type: 'Z',
+            },
+        ];
+        return {
+            d: (0, serialize_instructions_1.serializeInstructions)(triangle),
+            color: i === instructions.length - 1
+                ? 'red'
+                : inst.type === 'M'
+                    ? 'blue'
+                    : 'green',
+        };
+    })
+        .filter(Boolean);
+};
+exports.debugPath = debugPath;

package/dist/get-end-position.d.ts

@@ -0,0 +1,2 @@
+import type { Instruction, Point } from './helpers/types';
+export declare const getEndPosition: (instructions: Instruction[]) => Point;

package/dist/get-end-position.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEndPosition = void 0;
+const getEndPosition = (instructions) => {
+    let x = 0;
+    let y = 0;
+    let moveX = 0;
+    let moveY = 0;
+    for (let i = 0; i < instructions.length; i++) {
+        const instruction = instructions[i];
+        if (instruction.type === 'M') {
+            moveX = instruction.x;
+            moveY = instruction.y;
+        }
+        else if (instruction.type === 'm') {
+            moveX += instruction.dx;
+            moveY += instruction.dy;
+        }
+        if (instruction.type === 'A' ||
+            instruction.type === 'C' ||
+            instruction.type === 'L' ||
+            instruction.type === 'M' ||
+            instruction.type === 'Q' ||
+            instruction.type === 'S' ||
+            instruction.type === 'T') {
+            x = instruction.x;
+            y = instruction.y;
+            continue;
+        }
+        if (instruction.type === 'a' ||
+            instruction.type === 'c' ||
+            instruction.type === 'l' ||
+            instruction.type === 'm' ||
+            instruction.type === 'q' ||
+            instruction.type === 's' ||
+            instruction.type === 't') {
+            x += instruction.dx;
+            y += instruction.dy;
+            continue;
+        }
+        if (instruction.type === 'H') {
+            x = instruction.x;
+            continue;
+        }
+        if (instruction.type === 'V') {
+            y = instruction.y;
+            continue;
+        }
+        if (instruction.type === 'Z') {
+            x = moveX;
+            y = moveY;
+            continue;
+        }
+        if (instruction.type === 'h') {
+            x += instruction.dx;
+            continue;
+        }
+        if (instruction.type === 'v') {
+            y += instruction.dy;
+            continue;
+        }
+        // @ts-expect-error
+        throw new Error('Unknown instruction type: ' + instruction.type);
+    }
+    return {
+        x,
+        y,
+    };
+};
+exports.getEndPosition = getEndPosition;

package/dist/helpers/types.d.ts

@@ -16,10 +16,6 @@ export interface Point {
     y: number;
 }
 export type PointArray = [number, number];
-export interface PointProperties {
-    tangentX: number;
-    tangentY: number;
-}
 export type BoundingBox = {
     x1: number;
     y1: number;
@@ -29,15 +25,12 @@ export type BoundingBox = {
     width: number;
     height: number;
 };
-export type ReducedInstruction = {
-    type: 'M';
-    x: number;
-    y: number;
-} | {
+export type LInstruction = {
     type: 'L';
     x: number;
     y: number;
-} | {
+};
+export type CInstruction = {
     type: 'C';
     cp1x: number;
     cp1y: number;
@@ -45,15 +38,23 @@ export type ReducedInstruction = {
     cp2y: number;
     x: number;
     y: number;
-} | {
+};
+export type MInstruction = {
+    type: 'M';
+    x: number;
+    y: number;
+};
+export type QInstruction = {
     type: 'Q';
     cpx: number;
     cpy: number;
     x: number;
     y: number;
-} | {
+};
+export type ZInstruction = {
     type: 'Z';
 };
+export type ReducedInstruction = MInstruction | LInstruction | CInstruction | QInstruction | ZInstruction;
 export type AbsoluteInstruction = ReducedInstruction | {
     type: 'A';
     rx: number;

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export { getPointAtLength } from './get-point-at-length';
 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';
+export { interpolatePath } from './interpolate-path/interpolate-path';
 export { normalizePath } from './normalize-path';
 export { parsePath } from './parse-path';
 export { reduceInstructions } from './reduce-instructions';
@@ -19,4 +19,8 @@ export { translatePath } from './translate-path';
 export { WarpPathFn, warpPath } from './warp-path';
 export declare const PathInternals: {
     getBoundingBoxFromInstructions: (instructions: import("./helpers/types").ReducedInstruction[]) => import("./helpers/types").BoundingBox;
+    debugPath: (d: string) => {
+        d: string;
+        color: string;
+    }[];
 };

package/dist/index.js

@@ -2,6 +2,7 @@
 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 = void 0;
 const get_bounding_box_1 = require("./get-bounding-box");
+const debug_path_1 = require("./debug-path");
 var evolve_path_1 = require("./evolve-path");
 Object.defineProperty(exports, "evolvePath", { enumerable: true, get: function () { return evolve_path_1.evolvePath; } });
 var extend_viewbox_1 = require("./extend-viewbox");
@@ -18,7 +19,7 @@ var get_subpaths_1 = require("./get-subpaths");
 Object.defineProperty(exports, "getSubpaths", { enumerable: true, get: function () { return get_subpaths_1.getSubpaths; } });
 var 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; } });
-var interpolate_path_1 = require("./interpolate-path");
+var interpolate_path_1 = require("./interpolate-path/interpolate-path");
 Object.defineProperty(exports, "interpolatePath", { enumerable: true, get: function () { return interpolate_path_1.interpolatePath; } });
 var normalize_path_1 = require("./normalize-path");
 Object.defineProperty(exports, "normalizePath", { enumerable: true, get: function () { return normalize_path_1.normalizePath; } });
@@ -40,4 +41,5 @@ var warp_path_1 = require("./warp-path");
 Object.defineProperty(exports, "warpPath", { enumerable: true, get: function () { return warp_path_1.warpPath; } });
 exports.PathInternals = {
     getBoundingBoxFromInstructions: get_bounding_box_1.getBoundingBoxFromInstructions,
+    debugPath: debug_path_1.debugPath,
 };

package/dist/interpolate-path/convert-to-same-instruction-type.d.ts

@@ -0,0 +1,22 @@
+import type { Point, ReducedInstruction } from '../helpers/types';
+/**
+ * Converts command A to have the same type as command B.
+ *
+ * e.g., L0,5 -> C0,5,0,5,0,5
+ *
+ * Uses these rules:
+ * x1 <- x
+ * x2 <- x
+ * y1 <- y
+ * y2 <- y
+ * rx <- 0
+ * ry <- 0
+ * xAxisRotation <- read from B
+ * largeArcFlag <- read from B
+ * sweepflag <- read from B
+ *
+ * @param {Object} aCommand Command object from path `d` attribute
+ * @param {Object} bCommand Command object from path `d` attribute to match against
+ * @return {Object} aCommand converted to type of bCommand
+ */
+export declare function convertToSameInstructionType(aCommand: ReducedInstruction, bCommand: ReducedInstruction, currentPoint: Point): ReducedInstruction;

package/dist/interpolate-path/convert-to-same-instruction-type.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertToSameInstructionType = void 0;
+const convertToLCommand = (command) => {
+    if (command.type === 'M' || command.type === 'L' || command.type === 'Z') {
+        throw new Error('unexpected');
+    }
+    return {
+        type: 'L',
+        x: command.x,
+        y: command.y,
+    };
+};
+const convertToCCommand = (command, currentPoint) => {
+    if (command.type === 'M' || command.type === 'C' || command.type === 'Z') {
+        throw new Error('unexpected');
+    }
+    if (command.type === 'L') {
+        return {
+            type: 'C',
+            cp1x: currentPoint.x,
+            cp1y: currentPoint.y,
+            cp2x: command.x,
+            cp2y: command.y,
+            x: command.x,
+            y: command.y,
+        };
+    }
+    if (command.type === 'Q') {
+        return {
+            type: 'C',
+            cp1x: command.cpx,
+            cp1y: command.cpy,
+            cp2x: command.cpx,
+            cp2y: command.cpy,
+            x: command.x,
+            y: command.y,
+        };
+    }
+    throw new Error('all types should be handled');
+};
+const convertToQCommand = (command) => {
+    if (command.type === 'M' || command.type === 'Q' || command.type === 'Z') {
+        throw new Error('unexpected');
+    }
+    if (command.type === 'C') {
+        return {
+            type: 'Q',
+            cpx: command.cp1x,
+            cpy: command.cp1y,
+            x: command.x,
+            y: command.y,
+        };
+    }
+    if (command.type === 'L') {
+        return {
+            type: 'Q',
+            cpx: command.x,
+            cpy: command.y,
+            x: command.x,
+            y: command.y,
+        };
+    }
+    throw new Error('unhandled');
+};
+/**
+ * Converts command A to have the same type as command B.
+ *
+ * e.g., L0,5 -> C0,5,0,5,0,5
+ *
+ * Uses these rules:
+ * x1 <- x
+ * x2 <- x
+ * y1 <- y
+ * y2 <- y
+ * rx <- 0
+ * ry <- 0
+ * xAxisRotation <- read from B
+ * largeArcFlag <- read from B
+ * sweepflag <- read from B
+ *
+ * @param {Object} aCommand Command object from path `d` attribute
+ * @param {Object} bCommand Command object from path `d` attribute to match against
+ * @return {Object} aCommand converted to type of bCommand
+ */
+function convertToSameInstructionType(aCommand, bCommand, currentPoint) {
+    if (aCommand.type === 'M' || bCommand.type === 'M') {
+        return { ...aCommand };
+    }
+    if (aCommand.type === bCommand.type) {
+        return { ...aCommand };
+    }
+    if (bCommand.type === 'C') {
+        return convertToCCommand(aCommand, currentPoint);
+    }
+    if (bCommand.type === 'L') {
+        return convertToLCommand(aCommand);
+    }
+    if (bCommand.type === 'Q') {
+        return convertToQCommand(aCommand);
+    }
+    if (bCommand.type === 'Z') {
+        return {
+            type: 'Z',
+        };
+    }
+    throw new TypeError('unhandled');
+}
+exports.convertToSameInstructionType = convertToSameInstructionType;

package/dist/interpolate-path/de-casteljau.d.ts

@@ -0,0 +1,14 @@
+/**
+ * de Casteljau's algorithm for drawing and splitting bezier curves.
+ * Inspired by https://pomax.github.io/bezierinfo/
+ *
+ * @param {Number[][]} points Array of [x,y] points: [start, control1, control2, ..., end]
+ *   The original segment to split.
+ * @param {Number} t Where to split the curve (value between [0, 1])
+ * @return {Object} An object { left, right } where left is the segment from 0..t and
+ *   right is the segment from t..1.
+ */
+export declare function decasteljau(points: number[][], t: number): {
+    left: number[][];
+    right: number[][];
+};

package/dist/interpolate-path/de-casteljau.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.decasteljau = void 0;
+/**
+ * de Casteljau's algorithm for drawing and splitting bezier curves.
+ * Inspired by https://pomax.github.io/bezierinfo/
+ *
+ * @param {Number[][]} points Array of [x,y] points: [start, control1, control2, ..., end]
+ *   The original segment to split.
+ * @param {Number} t Where to split the curve (value between [0, 1])
+ * @return {Object} An object { left, right } where left is the segment from 0..t and
+ *   right is the segment from t..1.
+ */
+function decasteljau(points, t) {
+    const left = [];
+    const right = [];
+    function decasteljauRecurse(_points, _t) {
+        if (_points.length === 1) {
+            left.push(_points[0]);
+            right.push(_points[0]);
+        }
+        else {
+            const newPoints = Array(_points.length - 1);
+            for (let i = 0; i < newPoints.length; i++) {
+                if (i === 0) {
+                    left.push(_points[0]);
+                }
+                if (i === newPoints.length - 1) {
+                    right.push(_points[i + 1]);
+                }
+                newPoints[i] = [
+                    (1 - _t) * _points[i][0] + _t * _points[i + 1][0],
+                    (1 - _t) * _points[i][1] + _t * _points[i + 1][1],
+                ];
+            }
+            decasteljauRecurse(newPoints, _t);
+        }
+    }
+    if (points.length) {
+        decasteljauRecurse(points, t);
+    }
+    return { left, right: right.reverse() };
+}
+exports.decasteljau = decasteljau;

package/dist/interpolate-path/extend-command.d.ts

@@ -0,0 +1,11 @@
+import type { ReducedInstruction } from '../helpers/types';
+/**
+ * Extends an array of commandsToExtend to the length of the referenceCommands by
+ * splitting segments until the number of commands match. Ensures all the actual
+ * points of commandsToExtend are in the extended array.
+ *
+ * @param {Object[]} commandsToExtend The command object array to extend
+ * @param {Object[]} referenceCommands The command object array to match in length
+ * @return {Object[]} The extended commandsToExtend array
+ */
+export declare function extendInstruction(commandsToExtend: ReducedInstruction[], referenceCommands: ReducedInstruction[]): ReducedInstruction[];

package/dist/interpolate-path/extend-command.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extendInstruction = void 0;
+const split_segment_1 = require("./split-segment");
+/**
+ * Extends an array of commandsToExtend to the length of the referenceCommands by
+ * splitting segments until the number of commands match. Ensures all the actual
+ * points of commandsToExtend are in the extended array.
+ *
+ * @param {Object[]} commandsToExtend The command object array to extend
+ * @param {Object[]} referenceCommands The command object array to match in length
+ * @return {Object[]} The extended commandsToExtend array
+ */
+function extendInstruction(commandsToExtend, referenceCommands) {
+    // compute insertion points:
+    // number of segments in the path to extend
+    const numSegmentsToExtend = commandsToExtend.length - 1;
+    // number of segments in the reference path.
+    const numReferenceSegments = referenceCommands.length - 1;
+    // this value is always between [0, 1].
+    const segmentRatio = numSegmentsToExtend / numReferenceSegments;
+    // create a map, mapping segments in referenceCommands to how many points
+    // should be added in that segment (should always be >= 1 since we need each
+    // point itself).
+    // 0 = segment 0-1, 1 = segment 1-2, n-1 = last vertex
+    const countPointsPerSegment = new Array(numReferenceSegments)
+        .fill(undefined)
+        .reduce((accum, _d, i) => {
+        const insertIndex = Math.floor(segmentRatio * i);
+        accum[insertIndex] = (accum[insertIndex] || 0) + 1;
+        return accum;
+    }, []);
+    // extend each segment to have the correct number of points for a smooth interpolation
+    const extended = countPointsPerSegment.reduce((_extended, segmentCount, i) => {
+        // if last command, just add `segmentCount` number of times
+        if (i === commandsToExtend.length - 1) {
+            const lastCommandCopies = new Array(segmentCount).fill({
+                ...commandsToExtend[commandsToExtend.length - 1],
+            });
+            // convert M to L
+            if (lastCommandCopies[0].type === 'M') {
+                lastCommandCopies.forEach((d) => {
+                    d.type = 'L';
+                });
+            }
+            return _extended.concat(lastCommandCopies);
+        }
+        // otherwise, split the segment segmentCount times.
+        return _extended.concat((0, split_segment_1.splitSegmentInstructions)(commandsToExtend[i], commandsToExtend[i + 1], segmentCount));
+    }, []);
+    // add in the very first point since splitSegment only adds in the ones after it
+    extended.unshift(commandsToExtend[0]);
+    return extended;
+}
+exports.extendInstruction = extendInstruction;

package/dist/interpolate-path/interpolate-instruction-of-same-kind.d.ts

@@ -0,0 +1,2 @@
+import type { CInstruction, LInstruction, MInstruction, QInstruction, ReducedInstruction, ZInstruction } from '../helpers/types';
+export declare const interpolateInstructionOfSameKind: (t: number, first: ReducedInstruction, second: ReducedInstruction) => LInstruction | CInstruction | MInstruction | QInstruction | ZInstruction;

package/dist/interpolate-path/interpolate-instruction-of-same-kind.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.interpolateInstructionOfSameKind = void 0;
+const interpolateLInstruction = (t, first, second) => {
+    return {
+        type: 'L',
+        x: (1 - t) * first.x + t * second.x,
+        y: (1 - t) * first.y + t * second.y,
+    };
+};
+const interpolateCInstructions = (t, first, second) => {
+    return {
+        type: 'C',
+        cp1x: (1 - t) * first.cp1x + t * second.cp1x,
+        cp2x: (1 - t) * first.cp2x + t * second.cp2x,
+        cp1y: (1 - t) * first.cp1y + t * second.cp1y,
+        cp2y: (1 - t) * first.cp2y + t * second.cp2y,
+        x: (1 - t) * first.x + t * second.x,
+        y: (1 - t) * first.y + t * second.y,
+    };
+};
+const interpolateQInstructions = (t, first, second) => {
+    return {
+        type: 'Q',
+        cpx: (1 - t) * first.cpx + t * second.cpx,
+        cpy: (1 - t) * first.cpy + t * second.cpy,
+        x: (1 - t) * first.x + t * second.x,
+        y: (1 - t) * first.y + t * second.y,
+    };
+};
+const interpolateMInstructions = (t, first, second) => {
+    return {
+        type: 'M',
+        x: (1 - t) * first.x + t * second.x,
+        y: (1 - t) * first.y + t * second.y,
+    };
+};
+const interpolateInstructionOfSameKind = (t, first, second) => {
+    if (first.type === 'L') {
+        if (second.type !== 'L') {
+            throw new Error('mismatch');
+        }
+        return interpolateLInstruction(t, first, second);
+    }
+    if (first.type === 'C') {
+        if (second.type !== 'C') {
+            throw new Error('mismatch');
+        }
+        return interpolateCInstructions(t, first, second);
+    }
+    if (first.type === 'Q') {
+        if (second.type !== 'Q') {
+            throw new Error('mismatch');
+        }
+        return interpolateQInstructions(t, first, second);
+    }
+    if (first.type === 'M') {
+        if (second.type !== 'M') {
+            throw new Error('mismatch');
+        }
+        return interpolateMInstructions(t, first, second);
+    }
+    if (first.type === 'Z') {
+        if (second.type !== 'Z') {
+            throw new Error('mismatch');
+        }
+        return {
+            type: 'Z',
+        };
+    }
+    throw new Error('mismatch');
+};
+exports.interpolateInstructionOfSameKind = interpolateInstructionOfSameKind;

package/dist/interpolate-path/interpolate-instructions.d.ts

@@ -0,0 +1,16 @@
+import type { ReducedInstruction } from '../helpers/types';
+/**
+ * Interpolate from A to B by extending A and B during interpolation to have
+ * the same number of points. This allows for a smooth transition when they
+ * have a different number of points.
+ *
+ * Ignores the `Z` command in paths unless both A and B end with it.
+ *
+ * This function works directly with arrays of command objects instead of with
+ * path `d` strings (see interpolatePath for working with `d` strings).
+ *
+ * @param {Object[]} aCommandsInput Array of path commands
+ * @param {Object[]} bCommandsInput Array of path commands
+ * @returns {Function} Interpolation function that maps t ([0, 1]) to an array of path commands.
+ */
+export declare function interpolateInstructions(aCommandsInput: ReducedInstruction[], bCommandsInput: ReducedInstruction[]): (t: number) => ReducedInstruction[];

package/dist/interpolate-path/interpolate-instructions.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.interpolateInstructions = void 0;
+const get_end_position_1 = require("../get-end-position");
+const convert_to_same_instruction_type_1 = require("./convert-to-same-instruction-type");
+const extend_command_1 = require("./extend-command");
+const interpolate_instruction_of_same_kind_1 = require("./interpolate-instruction-of-same-kind");
+/**
+ * Interpolate from A to B by extending A and B during interpolation to have
+ * the same number of points. This allows for a smooth transition when they
+ * have a different number of points.
+ *
+ * Ignores the `Z` command in paths unless both A and B end with it.
+ *
+ * This function works directly with arrays of command objects instead of with
+ * path `d` strings (see interpolatePath for working with `d` strings).
+ *
+ * @param {Object[]} aCommandsInput Array of path commands
+ * @param {Object[]} bCommandsInput Array of path commands
+ * @returns {Function} Interpolation function that maps t ([0, 1]) to an array of path commands.
+ */
+function interpolateInstructions(aCommandsInput, bCommandsInput) {
+    // make a copy so we don't mess with the input arrays
+    let aCommands = aCommandsInput.slice();
+    let bCommands = bCommandsInput.slice();
+    // both input sets are empty, so we don't interpolate
+    if (!aCommands.length && !bCommands.length) {
+        return function () {
+            return [];
+        };
+    }
+    // do we add Z during interpolation? yes if both have it. (we'd expect both to have it or not)
+    const addZ = (aCommands.length === 0 || aCommands[aCommands.length - 1].type === 'Z') &&
+        (bCommands.length === 0 || bCommands[bCommands.length - 1].type === 'Z');
+    // we temporarily remove Z
+    if (aCommands.length > 0 && aCommands[aCommands.length - 1].type === 'Z') {
+        aCommands.pop();
+    }
+    if (bCommands.length > 0 && bCommands[bCommands.length - 1].type === 'Z') {
+        bCommands.pop();
+    }
+    // if A is empty, treat it as if it used to contain just the first point
+    // of B. This makes it so the line extends out of from that first point.
+    if (!aCommands.length) {
+        aCommands.push(bCommands[0]);
+        // otherwise if B is empty, treat it as if it contains the first point
+        // of A. This makes it so the line retracts into the first point.
+    }
+    else if (!bCommands.length) {
+        bCommands.push(aCommands[0]);
+    }
+    // extend to match equal size
+    const numPointsToExtend = Math.abs(bCommands.length - aCommands.length);
+    if (numPointsToExtend !== 0) {
+        // B has more points than A, so add points to A before interpolating
+        if (bCommands.length > aCommands.length) {
+            aCommands = (0, extend_command_1.extendInstruction)(aCommands, bCommands);
+            // else if A has more points than B, add more points to B
+        }
+        else if (bCommands.length < aCommands.length) {
+            bCommands = (0, extend_command_1.extendInstruction)(bCommands, aCommands);
+        }
+    }
+    // commands have same length now.
+    // convert commands in A to the same type as those in B
+    const aSameType = aCommands.map((aCommand, i) => {
+        const commandsUntilNow = aCommands.slice(0, i);
+        const point = (0, get_end_position_1.getEndPosition)(commandsUntilNow);
+        return (0, convert_to_same_instruction_type_1.convertToSameInstructionType)(aCommand, bCommands[i], point);
+    });
+    const interpolatedCommands = [];
+    if (addZ) {
+        aSameType.push({ type: 'Z' }); // required for when returning at t == 0
+        bCommands.push({ type: 'Z' });
+    }
+    return function (t) {
+        // at 1 return the final value without the extensions used during interpolation
+        if (t === 1) {
+            return bCommandsInput;
+        }
+        // work with aCommands directly since interpolatedCommands are mutated
+        if (t === 0) {
+            return aSameType;
+        }
+        // interpolate the commands using the mutable interpolated command objs
+        for (let i = 0; i < aSameType.length; ++i) {
+            interpolatedCommands.push((0, interpolate_instruction_of_same_kind_1.interpolateInstructionOfSameKind)(t, aSameType[i], bCommands[i]));
+        }
+        return interpolatedCommands;
+    };
+}
+exports.interpolateInstructions = interpolateInstructions;

package/dist/interpolate-path/interpolate-path.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @description Interpolates between two SVG paths.
+ * @param {number} value A number - 0 means first path, 1 means second path, any other values will be interpolated
+ * @param {string} firstPath The first valid SVG path
+ * @param {string} secondPath The second valid SVG path
+ * @see [Documentation](https://remotion.dev/docs/paths/interpolate-path)
+ */
+export declare const interpolatePath: (value: number, firstPath: string, secondPath: string) => string;

package/dist/interpolate-path/interpolate-path.js

@@ -0,0 +1,66 @@
+"use strict";
+/*
+
+Copied and adapted from https://github.com/pbeshai/d3-interpolate-path:
+Copyright 2016, Peter Beshai
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the author nor the names of contributors may be used to
+  endorse or promote products derived from this software without specific prior
+  written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.interpolatePath = void 0;
+const parse_path_1 = require("../parse-path");
+const reduce_instructions_1 = require("../reduce-instructions");
+const serialize_instructions_1 = require("../serialize-instructions");
+const interpolate_instructions_1 = require("./interpolate-instructions");
+/**
+ * @description Interpolates between two SVG paths.
+ * @param {number} value A number - 0 means first path, 1 means second path, any other values will be interpolated
+ * @param {string} firstPath The first valid SVG path
+ * @param {string} secondPath The second valid SVG path
+ * @see [Documentation](https://remotion.dev/docs/paths/interpolate-path)
+ */
+const interpolatePath = (value, firstPath, secondPath) => {
+    // at 1 return the final value without the extensions used during interpolation
+    if (value === 1) {
+        return secondPath;
+    }
+    if (value === 0) {
+        return firstPath;
+    }
+    const aCommands = (0, reduce_instructions_1.reduceInstructions)((0, parse_path_1.parsePath)(firstPath));
+    if (aCommands.length === 0) {
+        throw new TypeError(`SVG Path "${firstPath}" is not valid`);
+    }
+    const bCommands = (0, reduce_instructions_1.reduceInstructions)((0, parse_path_1.parsePath)(secondPath));
+    if (bCommands.length === 0) {
+        throw new TypeError(`SVG Path "${secondPath}" is not valid`);
+    }
+    const commandInterpolator = (0, interpolate_instructions_1.interpolateInstructions)(aCommands, bCommands);
+    return (0, serialize_instructions_1.serializeInstructions)(commandInterpolator(value));
+};
+exports.interpolatePath = interpolatePath;

package/dist/interpolate-path/points-to-command.d.ts

@@ -0,0 +1,9 @@
+import type { ReducedInstruction } from '../helpers/types';
+/**
+ * Convert segments represented as points back into a command object
+ *
+ * @param {Number[][]} points Array of [x,y] points: [start, control1, control2, ..., end]
+ *   Represents a segment
+ * @return {Object} A command object representing the segment.
+ */
+export declare function pointsToInstruction(points: number[][]): ReducedInstruction;

package/dist/interpolate-path/points-to-command.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pointsToInstruction = void 0;
+/**
+ * Convert segments represented as points back into a command object
+ *
+ * @param {Number[][]} points Array of [x,y] points: [start, control1, control2, ..., end]
+ *   Represents a segment
+ * @return {Object} A command object representing the segment.
+ */
+function pointsToInstruction(points) {
+    const x = points[points.length - 1][0];
+    const y = points[points.length - 1][1];
+    if (points.length === 4) {
+        const x1 = points[1][0];
+        const y1 = points[1][1];
+        const x2 = points[2][0];
+        const y2 = points[2][1];
+        return {
+            type: 'C',
+            cp1x: x1,
+            cp1y: y1,
+            cp2x: x2,
+            cp2y: y2,
+            x,
+            y,
+        };
+    }
+    if (points.length === 3) {
+        const x1 = points[1][0];
+        const y1 = points[1][1];
+        return {
+            type: 'Q',
+            cpx: x1,
+            cpy: y1,
+            x,
+            y,
+        };
+    }
+    return {
+        type: 'L',
+        x,
+        y,
+    };
+}
+exports.pointsToInstruction = pointsToInstruction;

package/dist/interpolate-path/split-curve-as-points.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Runs de Casteljau's algorithm enough times to produce the desired number of segments.
+ *
+ * @param {Number[][]} points Array of [x,y] points for de Casteljau (the initial segment to split)
+ * @param {Number} segmentCount Number of segments to split the original into
+ * @return {Number[][][]} Array of segments
+ */
+export declare function splitCurveAsPoints(points: number[][], segmentCount?: number): number[][][];

package/dist/interpolate-path/split-curve-as-points.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitCurveAsPoints = void 0;
+const de_casteljau_1 = require("./de-casteljau");
+/**
+ * Runs de Casteljau's algorithm enough times to produce the desired number of segments.
+ *
+ * @param {Number[][]} points Array of [x,y] points for de Casteljau (the initial segment to split)
+ * @param {Number} segmentCount Number of segments to split the original into
+ * @return {Number[][][]} Array of segments
+ */
+function splitCurveAsPoints(points, segmentCount = 2) {
+    const segments = [];
+    let remainingCurve = points;
+    const tIncrement = 1 / segmentCount;
+    // x-----x-----x-----x
+    // t=  0.33   0.66   1
+    // x-----o-----------x
+    // r=  0.33
+    //       x-----o-----x
+    // r=         0.5  (0.33 / (1 - 0.33))  === tIncrement / (1 - (tIncrement * (i - 1))
+    // x-----x-----x-----x----x
+    // t=  0.25   0.5   0.75  1
+    // x-----o----------------x
+    // r=  0.25
+    //       x-----o----------x
+    // r=         0.33  (0.25 / (1 - 0.25))
+    //             x-----o----x
+    // r=         0.5  (0.25 / (1 - 0.5))
+    for (let i = 0; i < segmentCount - 1; i++) {
+        const tRelative = tIncrement / (1 - tIncrement * i);
+        const split = (0, de_casteljau_1.decasteljau)(remainingCurve, tRelative);
+        segments.push(split.left);
+        remainingCurve = split.right;
+    }
+    // last segment is just to the end from the last point
+    segments.push(remainingCurve);
+    return segments;
+}
+exports.splitCurveAsPoints = splitCurveAsPoints;

package/dist/interpolate-path/split-curve.d.ts

@@ -0,0 +1,11 @@
+import type { CInstruction, LInstruction, QInstruction, ReducedInstruction } from '../helpers/types';
+/**
+ * Convert command objects to arrays of points, run de Casteljau's algorithm on it
+ * to split into to the desired number of segments.
+ *
+ * @param {Object} commandStart The start command object
+ * @param {Object} instructionEnd The end command object
+ * @param {Number} segmentCount The number of segments to create
+ * @return {Object[]} An array of commands representing the segments in sequence
+ */
+export declare const splitCurveInstructions: (instructionStartX: number, instructionStartY: number, instructionEnd: LInstruction | QInstruction | CInstruction, segmentCount: number) => ReducedInstruction[];

package/dist/interpolate-path/split-curve.js

@@ -0,0 +1,61 @@
+"use strict";
+/*
+
+Copied and adapted from https://github.com/pbeshai/d3-interpolate-path:
+Copyright 2016, Peter Beshai
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the author nor the names of contributors may be used to
+  endorse or promote products derived from this software without specific prior
+  written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitCurveInstructions = void 0;
+const points_to_command_1 = require("./points-to-command");
+const split_curve_as_points_1 = require("./split-curve-as-points");
+/**
+ * Convert command objects to arrays of points, run de Casteljau's algorithm on it
+ * to split into to the desired number of segments.
+ *
+ * @param {Object} commandStart The start command object
+ * @param {Object} instructionEnd The end command object
+ * @param {Number} segmentCount The number of segments to create
+ * @return {Object[]} An array of commands representing the segments in sequence
+ */
+const splitCurveInstructions = (instructionStartX, instructionStartY, instructionEnd, segmentCount) => {
+    const points = [[instructionStartX, instructionStartY]];
+    if (instructionEnd.type === 'Q') {
+        points.push([instructionEnd.cpx, instructionEnd.cpy]);
+    }
+    if (instructionEnd.type === 'C') {
+        points.push([instructionEnd.cp1x, instructionEnd.cp1y]);
+        points.push([instructionEnd.cp2x, instructionEnd.cp2y]);
+    }
+    points.push([instructionEnd.x, instructionEnd.y]);
+    return (0, split_curve_as_points_1.splitCurveAsPoints)(points, segmentCount).map((p) => {
+        return (0, points_to_command_1.pointsToInstruction)(p);
+    });
+};
+exports.splitCurveInstructions = splitCurveInstructions;

package/dist/interpolate-path/split-segment.d.ts

@@ -0,0 +1,14 @@
+import type { ReducedInstruction } from '../helpers/types';
+/**
+ * Interpolate between command objects commandStart and commandEnd segmentCount times.
+ * If the types are L, Q, or C then the curves are split as per de Casteljau's algorithm.
+ * Otherwise we just copy commandStart segmentCount - 1 times, finally ending with commandEnd.
+ *
+ * @param {Object} commandStart Command object at the beginning of the segment
+ * @param {Object} commandEnd Command object at the end of the segment
+ * @param {Number} segmentCount The number of segments to split this into. If only 1
+ *   Then [commandEnd] is returned.
+ * @return {Object[]} Array of ~segmentCount command objects between commandStart and
+ *   commandEnd. (Can be segmentCount+1 objects if commandStart is type M).
+ */
+export declare function splitSegmentInstructions(commandStart: ReducedInstruction, commandEnd: ReducedInstruction, segmentCount: number): ReducedInstruction[];

package/dist/interpolate-path/split-segment.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitSegmentInstructions = void 0;
+const split_curve_1 = require("./split-curve");
+/**
+ * Interpolate between command objects commandStart and commandEnd segmentCount times.
+ * If the types are L, Q, or C then the curves are split as per de Casteljau's algorithm.
+ * Otherwise we just copy commandStart segmentCount - 1 times, finally ending with commandEnd.
+ *
+ * @param {Object} commandStart Command object at the beginning of the segment
+ * @param {Object} commandEnd Command object at the end of the segment
+ * @param {Number} segmentCount The number of segments to split this into. If only 1
+ *   Then [commandEnd] is returned.
+ * @return {Object[]} Array of ~segmentCount command objects between commandStart and
+ *   commandEnd. (Can be segmentCount+1 objects if commandStart is type M).
+ */
+function splitSegmentInstructions(commandStart, commandEnd, segmentCount) {
+    let segments = [];
+    // line, quadratic bezier, or cubic bezier
+    if (commandEnd.type === 'L' ||
+        commandEnd.type === 'Q' ||
+        commandEnd.type === 'C') {
+        if (commandStart.type !== 'Z') {
+            segments = segments.concat((0, split_curve_1.splitCurveInstructions)(commandStart.x, commandStart.y, commandEnd, segmentCount));
+        }
+        // general case - just copy the same point
+    }
+    else {
+        const copyCommand = commandStart.type === 'M'
+            ? {
+                type: 'L',
+                x: commandStart.x,
+                y: commandStart.y,
+            }
+            : commandStart;
+        segments = segments.concat(new Array(segmentCount - 1).fill(true).map(() => copyCommand));
+        segments.push(commandEnd);
+    }
+    return segments;
+}
+exports.splitSegmentInstructions = splitSegmentInstructions;

package/dist/warp-path/warp-helpers.d.ts

@@ -6,9 +6,6 @@ export type WarpPathFn = (point: {
     x: number;
     y: number;
 };
-export declare function split(p: number[][], t?: number): number[][][];
-export declare function interpolateUntil(points: [number, number][], threshold: number, deltaFunction?: (points: [number, number][]) => number): [number, number][][];
-export declare function createLineSegment(points: number[][]): ReducedInstruction;
 export declare function svgPathInterpolate(path: ReducedInstruction[], threshold: number): ReducedInstruction[];
 export declare const warpTransform: (path: ReducedInstruction[], transformer: WarpPathFn) => ReducedInstruction[];
 export declare const fixZInstruction: (instructions: ReducedInstruction[]) => ReducedInstruction[];

package/dist/warp-path/warp-helpers.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fixZInstruction = exports.warpTransform = exports.svgPathInterpolate = exports.createLineSegment = exports.interpolateUntil = exports.split = void 0;
+exports.fixZInstruction = exports.warpTransform = exports.svgPathInterpolate = void 0;
 const euclideanDistance = (points) => {
     const startPoint = points[0];
     const endPoint = points[points.length - 1];
@@ -38,7 +38,6 @@ function split(p, t = 0.5) {
     }
     return [seg0, seg1];
 }
-exports.split = split;
 function interpolateUntil(points, threshold, deltaFunction = euclideanDistance) {
     const stack = [points];
     const segments = [];
@@ -57,7 +56,6 @@ function interpolateUntil(points, threshold, deltaFunction = euclideanDistance)
     }
     return segments;
 }
-exports.interpolateUntil = interpolateUntil;
 function createLineSegment(points) {
     switch (points.length) {
         case 2:
@@ -88,7 +86,6 @@ function createLineSegment(points) {
             throw new Error('Expected 2, 3 or 4 points for a line segment, got ' + points.length);
     }
 }
-exports.createLineSegment = createLineSegment;
 function warpInterpolate(path, threshold, deltaFunction) {
     let prexX = 0;
     let prexY = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/paths",
-  "version": "4.0.163",
+  "version": "4.0.165",
   "description": "Utility functions for SVG paths",
   "main": "dist/index.js",
   "sideEffects": false,