@remotion/paths 4.0.0-webhook.27 → 4.1.0-alpha2

package/dist/parse-path.js

@@ -0,0 +1,265 @@
+"use strict";
+// Copied from: https://github.com/rveciana/svg-path-properties
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parsePath = void 0;
+const length = {
+    a: 7,
+    A: 7,
+    C: 6,
+    c: 6,
+    H: 1,
+    h: 1,
+    L: 2,
+    l: 2,
+    M: 2,
+    m: 2,
+    Q: 4,
+    q: 4,
+    S: 4,
+    s: 4,
+    T: 2,
+    t: 2,
+    V: 1,
+    v: 1,
+    Z: 0,
+    z: 0,
+};
+const chunkExact = (array, instruction) => {
+    const chunks = [];
+    const expectedSize = length[instruction];
+    if (array.length % expectedSize !== 0) {
+        throw new Error(`Expected number of arguments of SVG instruction "${instruction} ${array.join(' ')}" to be a multiple of ${expectedSize}`);
+    }
+    for (let i = 0; i < array.length; i += expectedSize) {
+        chunks.push(array.slice(i, i + expectedSize));
+    }
+    return chunks;
+};
+const makeInstructions = (arr, instruction, cb) => {
+    return chunkExact(arr, instruction).map((args) => {
+        return cb(args);
+    });
+};
+const segmentRegExp = /([astvzqmhlc])([^astvzqmhlc]*)/gi;
+const numberRegExp = /-?[0-9]*\.?[0-9]+(?:e[-+]?\d+)?/gi;
+/**
+ * @description Parses an SVG string path into an array of Instruction's.
+ * @param {string} path
+ * @returns an array of objects containing the Instructions
+ * @see [Documentation](https://www.remotion.dev/docs/paths/parse-path)
+ */
+const parsePath = (path) => {
+    if (!path) {
+        throw new Error('No path provided');
+    }
+    const segments = path.match(segmentRegExp);
+    if (!segments) {
+        throw new Error(`No path elements found in string ${path}`);
+    }
+    return segments
+        .map((segmentString) => {
+        const command = segmentString.charAt(0);
+        const args = parseValues(segmentString.substring(1), command);
+        // overloaded moveTo
+        if (command === 'M' && args.length > 2) {
+            const segmentsArray = [];
+            segmentsArray.push({
+                type: command,
+                x: args[0],
+                y: args[1],
+            });
+            segmentsArray.push(...makeInstructions(args.slice(2), 'L', (numbers) => ({
+                type: 'L',
+                x: numbers[0],
+                y: numbers[1],
+            })));
+            return segmentsArray;
+        }
+        if (command === 'm' && args.length > 2) {
+            const segmentsArray = [];
+            segmentsArray.push({
+                type: command,
+                dx: args[0],
+                dy: args[1],
+            });
+            segmentsArray.push(...makeInstructions(args.slice(2), 'l', (numbers) => ({
+                type: 'l',
+                dx: numbers[0],
+                dy: numbers[1],
+            })));
+            return segmentsArray;
+        }
+        if (command === 'Z' || command === 'z') {
+            return [
+                {
+                    type: 'Z',
+                },
+            ];
+        }
+        if (command === 'A') {
+            return makeInstructions(args, command, (numbers) => ({
+                type: command,
+                rx: numbers[0],
+                ry: numbers[1],
+                xAxisRotation: numbers[2],
+                largeArcFlag: numbers[3] === 1,
+                sweepFlag: numbers[4] === 1,
+                x: numbers[5],
+                y: numbers[6],
+            }));
+        }
+        if (command === 'a') {
+            return makeInstructions(args, command, (numbers) => ({
+                type: command,
+                rx: numbers[0],
+                ry: numbers[1],
+                xAxisRotation: numbers[2],
+                largeArcFlag: numbers[3] === 1,
+                sweepFlag: numbers[4] === 1,
+                dx: numbers[5],
+                dy: numbers[6],
+            }));
+        }
+        if (command === 'C') {
+            return makeInstructions(args, command, (numbers) => ({
+                type: command,
+                cp1x: numbers[0],
+                cp1y: numbers[1],
+                cp2x: numbers[2],
+                cp2y: numbers[3],
+                x: numbers[4],
+                y: numbers[5],
+            }));
+        }
+        if (command === 'c') {
+            return makeInstructions(args, command, (numbers) => ({
+                type: command,
+                cp1dx: numbers[0],
+                cp1dy: numbers[1],
+                cp2dx: numbers[2],
+                cp2dy: numbers[3],
+                dx: numbers[4],
+                dy: numbers[5],
+            }));
+        }
+        if (command === 'S') {
+            return makeInstructions(args, command, (numbers) => ({
+                type: command,
+                cpx: numbers[0],
+                cpy: numbers[1],
+                x: numbers[2],
+                y: numbers[3],
+            }));
+        }
+        if (command === 's') {
+            return makeInstructions(args, command, (numbers) => ({
+                type: command,
+                cpdx: numbers[0],
+                cpdy: numbers[1],
+                dx: numbers[2],
+                dy: numbers[3],
+            }));
+        }
+        if (command === 'H') {
+            return makeInstructions(args, command, (numbers) => ({
+                type: command,
+                x: numbers[0],
+            }));
+        }
+        if (command === 'h') {
+            return makeInstructions(args, command, (numbers) => ({
+                type: command,
+                dx: numbers[0],
+            }));
+        }
+        if (command === 'V') {
+            return makeInstructions(args, command, (numbers) => ({
+                type: command,
+                y: numbers[0],
+            }));
+        }
+        if (command === 'v') {
+            return makeInstructions(args, command, (numbers) => ({
+                type: command,
+                dy: numbers[0],
+            }));
+        }
+        if (command === 'L') {
+            return makeInstructions(args, command, (numbers) => ({
+                type: command,
+                x: numbers[0],
+                y: numbers[1],
+            }));
+        }
+        if (command === 'M') {
+            return makeInstructions(args, command, (numbers) => ({
+                type: command,
+                x: numbers[0],
+                y: numbers[1],
+            }));
+        }
+        if (command === 'm') {
+            return makeInstructions(args, command, (numbers) => ({
+                type: command,
+                dx: numbers[0],
+                dy: numbers[1],
+            }));
+        }
+        if (command === 'l') {
+            return makeInstructions(args, command, (numbers) => ({
+                type: command,
+                dx: numbers[0],
+                dy: numbers[1],
+            }));
+        }
+        if (command === 'Q') {
+            return makeInstructions(args, command, (numbers) => ({
+                type: command,
+                cpx: numbers[0],
+                cpy: numbers[1],
+                x: numbers[2],
+                y: numbers[3],
+            }));
+        }
+        if (command === 'q') {
+            return makeInstructions(args, command, (numbers) => ({
+                type: command,
+                cpdx: numbers[0],
+                cpdy: numbers[1],
+                dx: numbers[2],
+                dy: numbers[3],
+            }));
+        }
+        if (command === 'T') {
+            return makeInstructions(args, command, (numbers) => ({
+                type: command,
+                x: numbers[0],
+                y: numbers[1],
+            }));
+        }
+        if (command === 't') {
+            return makeInstructions(args, command, (numbers) => ({
+                type: command,
+                dx: numbers[0],
+                dy: numbers[1],
+            }));
+        }
+        throw new Error(`Invalid path element ${segmentString}`);
+    }, [])
+        .flat(1);
+};
+exports.parsePath = parsePath;
+const parseValues = (args, instructionType) => {
+    const numbers = args.match(numberRegExp);
+    if (!numbers) {
+        if (instructionType === 'Z' || instructionType === 'z') {
+            return [];
+        }
+        throw new Error(`Malformed path data: ${instructionType} was expected to have numbers afterwards`);
+    }
+    const expectedArguments = length[instructionType];
+    if (numbers.length % expectedArguments !== 0) {
+        throw new Error(`Malformed path data: ${instructionType} was expected to have a multiple of ${expectedArguments} numbers, but got "${instructionType} ${numbers.join(' ')} instead"`);
+    }
+    return numbers.map(Number);
+};

package/dist/reduce-instructions.d.ts

@@ -0,0 +1,7 @@
+import type { Instruction, ReducedInstruction } from './helpers/types';
+/**
+ * @description Takes an array of Instruction's and reduces the amount of instruction types them so the path only consists of M, L, C, Q and Z instructions.
+ * @param {Array} instruction
+ * @see [Documentation](https://www.remotion.dev/docs/paths/reduce-instructions)
+ */
+export declare const reduceInstructions: (instruction: Instruction[]) => ReducedInstruction[];

package/dist/reduce-instructions.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reduceInstructions = void 0;
+const remove_a_s_t_curves_1 = require("./helpers/remove-a-s-t-curves");
+const normalize_path_1 = require("./normalize-path");
+/**
+ * @description Takes an array of Instruction's and reduces the amount of instruction types them so the path only consists of M, L, C, Q and Z instructions.
+ * @param {Array} instruction
+ * @see [Documentation](https://www.remotion.dev/docs/paths/reduce-instructions)
+ */
+const reduceInstructions = (instruction) => {
+    const simplified = (0, normalize_path_1.normalizeInstructions)(instruction);
+    return (0, remove_a_s_t_curves_1.removeATSHVInstructions)(simplified);
+};
+exports.reduceInstructions = reduceInstructions;

package/dist/reset-path.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @description Translates an SVG path so that the top-left corner of the bounding box is at 0, 0.
+ * @param {string} d a valid SVG path
+ * @see [Documentation](https://www.remotion.dev/docs/paths/reset-path)
+ */
+export declare const resetPath: (d: string) => string;

package/dist/reset-path.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resetPath = void 0;
+const get_bounding_box_1 = require("./get-bounding-box");
+const translate_path_1 = require("./translate-path");
+/**
+ * @description Translates an SVG path so that the top-left corner of the bounding box is at 0, 0.
+ * @param {string} d a valid SVG path
+ * @see [Documentation](https://www.remotion.dev/docs/paths/reset-path)
+ */
+const resetPath = (d) => {
+    const box = (0, get_bounding_box_1.getBoundingBox)(d);
+    return (0, translate_path_1.translatePath)(d, -box.x1, -box.y1);
+};
+exports.resetPath = resetPath;

package/dist/reverse-path.d.ts

@@ -5,8 +5,8 @@
  * not recognise the public domain, where this code is MIT licensed.
  */
 /**
- * Reverses a path so the end and start are switched.
+ * @description Reverses a path so the end and start are switched.
  * @param {string} path A valid SVG path
- * @link https://remotion.dev/docs/paths/reverse-path
+ * @see [Documentation](https://remotion.dev/docs/paths/reverse-path)
  */
 export declare const reversePath: (path: string) => string;

package/dist/reverse-path.js

@@ -7,139 +7,94 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.reversePath = void 0;
+const construct_1 = require("./helpers/construct");
 const normalize_path_1 = require("./normalize-path");
-/**
- * Normalise an SVG path to absolute coordinates
- * and full commands, rather than relative coordinates
- * and/or shortcut commands.
- */
-/**
- * Reverse an SVG path.
- * As long as the input path is normalised, this is actually really
- * simple to do. As all pathing commands are symmetrical, meaning
- * that they render the same when you reverse the coordinate order,
- * the grand trick here is to reverse the path (making sure to keep
- * coordinates ordered pairwise) and shift the operators left by
- * one or two coordinate pairs depending on the operator:
- *
- *   - Z is removed (after noting it existed),
- *   - L moves to 2 spots earlier (skipping one coordinate),
- *   - Q moves to 2 spots earlier (skipping one coordinate),
- *   - C moves to 4 spots earlier (skipping two coordinates)
- *       and its arguments get reversed,
- *   - the path start becomes M.
- *   - the path end becomes Z iff it was there to begin with.
- */
-function reverseNormalizedPath(normalized) {
-    const terms = normalized.trim().split(' ');
-    let term;
-    const tlen = terms.length;
-    const tlen1 = tlen - 1;
-    let t;
+const parse_path_1 = require("./parse-path");
+const reduce_instructions_1 = require("./reduce-instructions");
+const serialize_instructions_1 = require("./serialize-instructions");
+function reverseNormalizedPath(instructions) {
     const reversed = [];
-    let x;
-    let y;
-    let pair;
-    let pairs;
-    let shift;
-    const matcher = /[QAZLCM]/;
-    const closed = terms.slice(-1)[0].toUpperCase() === 'Z';
-    for (t = 0; t < tlen; t++) {
-        term = terms[t];
-        // Is this an operator? If it is, run through its
-        // argument list, which we know is fixed length.
-        if (matcher.test(term)) {
-            // Arc processing relies on not-just-coordinates
-            if (term === 'A') {
-                reversed.push(terms[t + 5] === '0' ? '1' : '0');
-                reversed.push(terms[t + 4]);
-                reversed.push(terms[t + 3]);
-                reversed.push(terms[t + 2]);
-                reversed.push(terms[t + 1]);
-                reversed.push(term);
-                reversed.push(terms[t + 7]);
-                reversed.push(terms[t + 6]);
-                t += 7;
-                continue;
-            }
-            // how many coordinate pairs do we need to read,
-            // and by how many pairs should this operator be
-            // shifted left?
-            else if (term === 'C') {
-                pairs = 3;
-                shift = 2;
-            }
-            else if (term === 'Q') {
-                pairs = 2;
-                shift = 1;
-            }
-            else if (term === 'L') {
-                pairs = 1;
-                shift = 1;
-            }
-            else if (term === 'M') {
-                pairs = 1;
-                shift = 0;
-            }
-            else {
-                continue;
-            }
-            // do the argument reading and operator shifting
-            if (pairs === shift) {
-                reversed.push(term);
-            }
-            for (pair = 0; pair < pairs; pair++) {
-                if (pair === shift) {
-                    reversed.push(term);
-                }
-                x = terms[++t];
-                y = terms[++t];
-                reversed.push(y);
-                reversed.push(x);
-            }
+    let nextX = 0;
+    let nextY = 0;
+    for (const term of instructions) {
+        if (term.type === 'A') {
+            reversed.unshift({
+                type: 'A',
+                largeArcFlag: term.largeArcFlag,
+                rx: term.rx,
+                ry: term.ry,
+                xAxisRotation: term.xAxisRotation,
+                sweepFlag: !term.sweepFlag,
+                x: nextX,
+                y: nextY,
+            });
+        }
+        else if (term.type === 'C') {
+            reversed.unshift({
+                type: 'C',
+                cp1x: term.cp2x,
+                cp1y: term.cp2y,
+                cp2x: term.cp1x,
+                cp2y: term.cp1y,
+                x: nextX,
+                y: nextY,
+            });
+        }
+        else if (term.type === 'Q') {
+            reversed.unshift({
+                type: 'Q',
+                cpx: term.cpx,
+                cpy: term.cpy,
+                x: nextX,
+                y: nextY,
+            });
+        }
+        else if (term.type === 'L') {
+            reversed.unshift({
+                type: 'L',
+                x: nextX,
+                y: nextY,
+            });
+            // Do nothing
+        }
+        else if (term.type === 'M') {
+            // Do nothing
+        }
+        else if (term.type === 'Z') {
+            // Do nothing
         }
-        // the code has been set up so that every time we
-        // iterate because of the for() operation, the term
-        // we see is a pathing operator, not a number. As
-        // such, if we get to this "else" the path is malformed.
         else {
-            const pre = terms.slice(Math.max(t - 3, 0), 3).join(' ');
-            const post = terms.slice(t + 1, Math.min(t + 4, tlen1)).join(' ');
-            const range = pre + ' [' + term + '] ' + post;
-            throw new Error('Error while trying to reverse normalized SVG path, at position ' +
-                t +
-                ' (' +
-                range +
-                ').\n' +
-                "Either the path is not normalised, or it's malformed.");
+            throw new Error('unnormalized instruction ' + term.type);
+        }
+        if (term.type !== 'Z') {
+            nextX = term.x;
+            nextY = term.y;
         }
     }
-    reversed.push('M');
-    // generating the reversed path string involves
-    // running through our transformed terms in reverse.
-    let revstring = '';
-    const rlen1 = reversed.length - 1;
-    let r;
-    for (r = rlen1; r > 0; r--) {
-        revstring += reversed[r] + ' ';
-    }
-    if (closed)
+    reversed.unshift({
+        type: 'M',
+        x: nextX,
+        y: nextY,
+    });
+    let revstring = (0, serialize_instructions_1.serializeInstructions)(reversed);
+    if (instructions[instructions.length - 1].type === 'Z')
         revstring += 'Z';
     revstring = revstring.replace(/M M/g, 'Z M');
     return revstring;
 }
 /**
- * Reverses a path so the end and start are switched.
+ * @description Reverses a path so the end and start are switched.
  * @param {string} path A valid SVG path
- * @link https://remotion.dev/docs/paths/reverse-path
+ * @see [Documentation](https://remotion.dev/docs/paths/reverse-path)
  */
 const reversePath = (path) => {
-    const normalizedPath = (0, normalize_path_1.normalizePath)(path);
-    const paths = normalizedPath.replace(/M/g, '|M').split('|');
-    paths.splice(0, 1);
-    return paths
+    const parsed = (0, parse_path_1.parsePath)(path);
+    const normalized = (0, normalize_path_1.normalizeInstructions)(parsed);
+    const reduced = (0, reduce_instructions_1.reduceInstructions)(normalized);
+    const { segments } = (0, construct_1.constructFromInstructions)(reduced);
+    return segments
         .map((spath) => {
-        return reverseNormalizedPath(spath.trim());
+        return reverseNormalizedPath(spath);
     })
         .join(' ')
         .replace(/ +/g, ' ')

package/dist/scale-path.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description Allows you to grow or shrink the size of a path.
+ * @param {string} path A valid SVG path
+ * @param {string} d
+ * @param {Number} scaleX
+ * @param {Number} scaleY
+ * @returns a new path with respect to the scale values provided
+ * @see [Documentation](https://www.remotion.dev/docs/paths/scale-path)
+ */
+export declare const scalePath: (d: string, scaleX: number, scaleY: number) => string;