@remotion/paths 3.3.79 → 3.3.81

package/dist/get-subpaths.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSubpaths = void 0;
 const construct_1 = require("./helpers/construct");
+const parse_path_1 = require("./parse-path");
 const serialize_instructions_1 = require("./serialize-instructions");
 /**
  * @description Splits a valid SVG path into it's parts.
@@ -9,7 +10,8 @@ const serialize_instructions_1 = require("./serialize-instructions");
  * @see [Documentation](https://remotion.dev/docs/paths/get-subpaths)
  */
 const getSubpaths = (path) => {
-    const { segments } = (0, construct_1.construct)(path);
+    const parsed = (0, parse_path_1.parsePath)(path);
+    const { segments } = (0, construct_1.constructFromInstructions)(parsed);
     return segments.map((seg) => {
         return (0, serialize_instructions_1.serializeInstructions)(seg);
     });

package/dist/helpers/construct.d.ts

@@ -1,4 +1,11 @@
 import type { Instruction, Point, Properties } from './types';
+export declare const constructFromInstructions: (instructions: Instruction[]) => {
+    segments: Instruction[][];
+    initial_point: Point | null;
+    length: number;
+    partial_lengths: number[];
+    functions: (Properties | null)[];
+};
 export declare const construct: (string: string) => {
     segments: Instruction[][];
     initial_point: Point | null;

package/dist/helpers/construct.js

@@ -1,24 +1,23 @@
 "use strict";
 // Copied from: https://github.com/rveciana/svg-path-properties
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.construct = void 0;
+exports.construct = exports.constructFromInstructions = void 0;
 const parse_path_1 = require("../parse-path");
 const arc_1 = require("./arc");
 const bezier_1 = require("./bezier");
 const linear_1 = require("./linear");
-const construct = (string) => {
+const constructFromInstructions = (instructions) => {
     let length = 0;
     const partial_lengths = [];
     const functions = [];
     let initial_point = null;
-    const parsed = (0, parse_path_1.parsePath)(string);
     let cur = [0, 0];
     let prev_point = [0, 0];
     let curve;
     let ringStart = [0, 0];
     const segments = [];
-    for (let i = 0; i < parsed.length; i++) {
-        const instruction = parsed[i];
+    for (let i = 0; i < instructions.length; i++) {
+        const instruction = instructions[i];
         if (instruction.type !== 'm' &&
             instruction.type !== 'M' &&
             segments.length > 0) {
@@ -149,7 +148,7 @@ const construct = (string) => {
             }
         }
         else if (instruction.type === 'S') {
-            const prev = parsed[i - 1];
+            const prev = instructions[i - 1];
             const prevWasCurve = prev.type === 'C' ||
                 prev.type === 'c' ||
                 prev.type === 'S' ||
@@ -188,7 +187,7 @@ const construct = (string) => {
             }
         }
         else if (instruction.type === 's') {
-            const prev = parsed[i - 1];
+            const prev = instructions[i - 1];
             const prevWasCurve = prev.type === 'C' ||
                 prev.type === 'c' ||
                 prev.type === 'S' ||
@@ -285,7 +284,7 @@ const construct = (string) => {
             cur = [instruction.dx + cur[0], instruction.dy + cur[1]];
         }
         else if (instruction.type === 'T') {
-            const prev = parsed[i - 1];
+            const prev = instructions[i - 1];
             const prevWasQ = prev.type === 'Q' ||
                 prev.type === 'q' ||
                 prev.type === 'T' ||
@@ -318,7 +317,7 @@ const construct = (string) => {
             cur = [instruction.x, instruction.y];
         }
         else if (instruction.type === 't') {
-            const prev = parsed[i - 1];
+            const prev = instructions[i - 1];
             const prevWasQ = prev.type === 'Q' ||
                 prev.type === 'q' ||
                 prev.type === 'T' ||
@@ -392,4 +391,9 @@ const construct = (string) => {
         functions,
     };
 };
+exports.constructFromInstructions = constructFromInstructions;
+const construct = (string) => {
+    const parsed = (0, parse_path_1.parsePath)(string);
+    return (0, exports.constructFromInstructions)(parsed);
+};
 exports.construct = construct;

package/dist/reverse-path.js

@@ -7,123 +7,72 @@
  */
 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
         }
-        // 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);
         }
+        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;
@@ -134,12 +83,13 @@ function reverseNormalizedPath(normalized) {
  * @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/package.json

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