@remotion/paths 4.0.0-newpathfunctions.13 → 4.0.0-newpaths.1

package/dist/get-bounding-box.js

@@ -1,9 +1,9 @@
-'use strict';
+"use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getBoundingBox = void 0;
+const remove_a_s_t_curves_1 = require("./helpers/remove-a-s-t-curves");
 const normalize_path_1 = require("./normalize-path");
-const unarc_1 = require("./unarc");
-const unshort_1 = require("./unshort");
+const parse_path_1 = require("./parse-path");
 // Precision for consider cubic polynom as quadratic one
 const CBEZIER_MINMAX_EPSILON = 0.00000001;
 // https://github.com/kpym/SVGPathy/blob/acd1a50c626b36d81969f6e98e8602e128ba4302/lib/box.js#L89
@@ -72,91 +72,73 @@ const getBoundingBox = (d) => {
     let minY = Infinity;
     let maxX = -Infinity;
     let maxY = -Infinity;
-    const abs = (0, normalize_path_1.normalizePath)(d);
-    const unarced = (0, unarc_1.unarc)(abs);
-    const unshortened = (0, unshort_1.unshort)(unarced);
+    const parsed = (0, parse_path_1.parsePath)((0, normalize_path_1.normalizePath)(d));
+    const unarced = (0, remove_a_s_t_curves_1.removeATSHVInstructions)(parsed);
     let x = 0;
     let y = 0;
-    for (const seg of unshortened) {
-        switch (seg[0]) {
+    for (const seg of unarced) {
+        switch (seg.type) {
             case 'M':
             case 'L': {
-                if (minX > seg[1]) {
-                    minX = seg[1];
+                if (minX > seg.x) {
+                    minX = seg.x;
                 }
-                if (minY > seg[2]) {
-                    minY = seg[2];
+                if (minY > seg.y) {
+                    minY = seg.y;
                 }
-                if (maxX < seg[1]) {
-                    maxX = seg[1];
+                if (maxX < seg.x) {
+                    maxX = seg.x;
                 }
-                if (maxY < seg[2]) {
-                    maxY = seg[2];
+                if (maxY < seg.y) {
+                    maxY = seg.y;
                 }
-                x = seg[1];
-                y = seg[2];
-                break;
-            }
-            case 'V': {
-                if (minY > seg[1]) {
-                    minY = seg[1];
-                }
-                if (maxY < seg[1]) {
-                    maxY = seg[1];
-                }
-                y = seg[1];
-                break;
-            }
-            case 'H': {
-                if (minX > seg[1]) {
-                    minX = seg[1];
-                }
-                if (maxX < seg[1]) {
-                    maxX = seg[1];
-                }
-                x = seg[1];
+                x = seg.x;
+                y = seg.y;
                 break;
             }
             case 'C': {
-                const cxMinMax = minmaxC([x, seg[1], seg[3], seg[5]]);
+                const cxMinMax = minmaxC([x, seg.cp1x, seg.cp2x, seg.x]);
                 if (minX > cxMinMax[0]) {
                     minX = cxMinMax[0];
                 }
                 if (maxX < cxMinMax[1]) {
                     maxX = cxMinMax[1];
                 }
-                const cyMinMax = minmaxC([y, seg[2], seg[4], seg[6]]);
+                const cyMinMax = minmaxC([y, seg.cp1y, seg.cp2y, seg.y]);
                 if (minY > cyMinMax[0]) {
                     minY = cyMinMax[0];
                 }
                 if (maxY < cyMinMax[1]) {
                     maxY = cyMinMax[1];
                 }
-                x = seg[5];
-                y = seg[6];
+                x = seg.x;
+                y = seg.y;
                 break;
             }
             case 'Q': {
-                const qxMinMax = minmaxQ([x, seg[1], seg[3]]);
+                const qxMinMax = minmaxQ([x, seg.cpx, seg.x]);
                 if (minX > qxMinMax[0]) {
                     minX = qxMinMax[0];
                 }
                 if (maxX < qxMinMax[1]) {
                     maxX = qxMinMax[1];
                 }
-                const qyMinMax = minmaxQ([y, seg[2], seg[4]]);
+                const qyMinMax = minmaxQ([y, seg.cpy, seg.y]);
                 if (minY > qyMinMax[0]) {
                     minY = qyMinMax[0];
                 }
                 if (maxY < qyMinMax[1]) {
                     maxY = qyMinMax[1];
                 }
-                x = seg[3];
-                y = seg[4];
+                x = seg.x;
+                y = seg.y;
                 break;
             }
+            case 'Z':
+                break;
             default:
-                throw new Error(`Unknown instruction ${seg[0]}`);
+                // @ts-expect-error
+                throw new Error(`Unknown instruction ${seg.type}`);
         }
     }
     return { x1: minX, y1: minY, x2: maxX, y2: maxY };

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 serialize_instructions_1 = require("./serialize-instructions");
 /**
  * Splits a valid SVG path into it's parts.
  * @param {string} path A valid SVG path
@@ -9,10 +10,8 @@ const construct_1 = require("./helpers/construct");
  */
 const getSubpaths = (path) => {
     const { segments } = (0, construct_1.construct)(path);
-    return segments
-        .map((seg) => {
-        return seg.map((s) => s.join(' '));
-    })
-        .map((_s) => _s.join(' '));
+    return segments.map((seg) => {
+        return (0, serialize_instructions_1.serializeInstructions)(seg);
+    });
 };
 exports.getSubpaths = getSubpaths;

package/dist/helpers/construct.d.ts

@@ -1,5 +1,4 @@
-import type { Instruction } from './parse';
-import type { Point, Properties } from './types';
+import type { Instruction, Point, Properties } from './types';
 export declare const construct: (string: string) => {
     segments: Instruction[][];
     initial_point: Point | null;

package/dist/helpers/construct.js

@@ -2,16 +2,16 @@
 // Copied from: https://github.com/rveciana/svg-path-properties
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.construct = 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 parse_1 = require("./parse");
 const construct = (string) => {
     let length = 0;
     const partial_lengths = [];
     const functions = [];
     let initial_point = null;
-    const parsed = (0, parse_1.parsePath)(string);
+    const parsed = (0, parse_path_1.parsePath)(string);
     let cur = [0, 0];
     let prev_point = [0, 0];
     let curve;
@@ -19,100 +19,142 @@ const construct = (string) => {
     const segments = [];
     for (let i = 0; i < parsed.length; i++) {
         const instruction = parsed[i];
-        if (instruction[0].toLowerCase() !== 'm' && segments.length > 0) {
+        if (instruction.type !== 'm' &&
+            instruction.type !== 'M' &&
+            segments.length > 0) {
             segments[segments.length - 1].push(instruction);
         }
         // moveTo
-        if (instruction[0] === 'M') {
-            cur = [instruction[1], instruction[2]];
+        if (instruction.type === 'M') {
+            cur = [instruction.x, instruction.y];
             ringStart = [cur[0], cur[1]];
             segments.push([instruction]);
             functions.push(null);
             if (i === 0) {
-                initial_point = { x: instruction[1], y: instruction[2] };
+                initial_point = { x: instruction.x, y: instruction.y };
             }
         }
-        else if (instruction[0] === 'm') {
-            cur = [instruction[1] + cur[0], instruction[2] + cur[1]];
+        else if (instruction.type === 'm') {
+            cur = [instruction.dx + cur[0], instruction.dy + cur[1]];
             ringStart = [cur[0], cur[1]];
-            segments.push([['M', cur[0], cur[1]]]);
+            segments.push([{ type: 'M', x: cur[0], y: cur[1] }]);
             functions.push(null);
             // lineTo
         }
-        else if (instruction[0] === 'L') {
-            length += Math.sqrt((cur[0] - instruction[1]) ** 2 + (cur[1] - instruction[2]) ** 2);
-            functions.push((0, linear_1.makeLinearPosition)(cur[0], instruction[1], cur[1], instruction[2]));
-            cur = [instruction[1], instruction[2]];
+        else if (instruction.type === 'L') {
+            length += Math.sqrt((cur[0] - instruction.x) ** 2 + (cur[1] - instruction.y) ** 2);
+            functions.push((0, linear_1.makeLinearPosition)({
+                x0: cur[0],
+                x1: instruction.x,
+                y0: cur[1],
+                y1: instruction.y,
+            }));
+            cur = [instruction.x, instruction.y];
         }
-        else if (instruction[0] === 'l') {
-            length += Math.sqrt(instruction[1] ** 2 + instruction[2] ** 2);
-            functions.push((0, linear_1.makeLinearPosition)(cur[0], instruction[1] + cur[0], cur[1], instruction[2] + cur[1]));
-            cur = [instruction[1] + cur[0], instruction[2] + cur[1]];
+        else if (instruction.type === 'l') {
+            length += Math.sqrt(instruction.dx ** 2 + instruction.dy ** 2);
+            functions.push((0, linear_1.makeLinearPosition)({
+                x0: cur[0],
+                x1: instruction.dx + cur[0],
+                y0: cur[1],
+                y1: instruction.dy + cur[1],
+            }));
+            cur = [instruction.dx + cur[0], instruction.dy + cur[1]];
         }
-        else if (instruction[0] === 'H') {
-            length += Math.abs(cur[0] - instruction[1]);
-            functions.push((0, linear_1.makeLinearPosition)(cur[0], instruction[1], cur[1], cur[1]));
-            cur[0] = instruction[1];
+        else if (instruction.type === 'H') {
+            length += Math.abs(cur[0] - instruction.x);
+            functions.push((0, linear_1.makeLinearPosition)({
+                x0: cur[0],
+                x1: instruction.x,
+                y0: cur[1],
+                y1: cur[1],
+            }));
+            cur[0] = instruction.x;
         }
-        else if (instruction[0] === 'h') {
-            length += Math.abs(instruction[1]);
-            functions.push((0, linear_1.makeLinearPosition)(cur[0], cur[0] + instruction[1], cur[1], cur[1]));
-            cur[0] = instruction[1] + cur[0];
+        else if (instruction.type === 'h') {
+            length += Math.abs(instruction.dx);
+            functions.push((0, linear_1.makeLinearPosition)({
+                x0: cur[0],
+                x1: cur[0] + instruction.dx,
+                y0: cur[1],
+                y1: cur[1],
+            }));
+            cur[0] = instruction.dx + cur[0];
         }
-        else if (instruction[0] === 'V') {
-            length += Math.abs(cur[1] - instruction[1]);
-            functions.push((0, linear_1.makeLinearPosition)(cur[0], cur[0], cur[1], instruction[1]));
-            cur[1] = instruction[1];
+        else if (instruction.type === 'V') {
+            length += Math.abs(cur[1] - instruction.y);
+            functions.push((0, linear_1.makeLinearPosition)({
+                x0: cur[0],
+                x1: cur[0],
+                y0: cur[1],
+                y1: instruction.y,
+            }));
+            cur[1] = instruction.y;
         }
-        else if (instruction[0] === 'v') {
-            length += Math.abs(instruction[1]);
-            functions.push((0, linear_1.makeLinearPosition)(cur[0], cur[0], cur[1], cur[1] + instruction[1]));
-            cur[1] = instruction[1] + cur[1];
+        else if (instruction.type === 'v') {
+            length += Math.abs(instruction.dy);
+            functions.push((0, linear_1.makeLinearPosition)({
+                x0: cur[0],
+                x1: cur[0],
+                y0: cur[1],
+                y1: cur[1] + instruction.dy,
+            }));
+            cur[1] = instruction.dy + cur[1];
             // Close path
         }
-        else if (instruction[0] === 'z' || instruction[0] === 'Z') {
+        else if (instruction.type === 'Z') {
             length += Math.sqrt((ringStart[0] - cur[0]) ** 2 + (ringStart[1] - cur[1]) ** 2);
-            functions.push((0, linear_1.makeLinearPosition)(cur[0], ringStart[0], cur[1], ringStart[1]));
+            functions.push((0, linear_1.makeLinearPosition)({
+                x0: cur[0],
+                x1: ringStart[0],
+                y0: cur[1],
+                y1: ringStart[1],
+            }));
             cur = [ringStart[0], ringStart[1]];
             // Cubic Bezier curves
         }
-        else if (instruction[0] === 'C') {
+        else if (instruction.type === 'C') {
             curve = (0, bezier_1.makeBezier)({
                 ax: cur[0],
                 ay: cur[1],
-                bx: instruction[1],
-                by: instruction[2],
-                cx: instruction[3],
-                cy: instruction[4],
-                dx: instruction[5],
-                dy: instruction[6],
+                bx: instruction.cp1x,
+                by: instruction.cp1y,
+                cx: instruction.cp2x,
+                cy: instruction.cp2y,
+                dx: instruction.x,
+                dy: instruction.y,
             });
             length += curve.getTotalLength();
-            cur = [instruction[5], instruction[6]];
+            cur = [instruction.x, instruction.y];
             functions.push(curve);
         }
-        else if (instruction[0] === 'c') {
+        else if (instruction.type === 'c') {
             curve = (0, bezier_1.makeBezier)({
                 ax: cur[0],
                 ay: cur[1],
-                bx: cur[0] + instruction[1],
-                by: cur[1] + instruction[2],
-                cx: cur[0] + instruction[3],
-                cy: cur[1] + instruction[4],
-                dx: cur[0] + instruction[5],
-                dy: cur[1] + instruction[6],
+                bx: cur[0] + instruction.cp1dx,
+                by: cur[1] + instruction.cp1dy,
+                cx: cur[0] + instruction.cp2dx,
+                cy: cur[1] + instruction.cp2dy,
+                dx: cur[0] + instruction.dx,
+                dy: cur[1] + instruction.dy,
             });
             if (curve.getTotalLength() > 0) {
                 length += curve.getTotalLength();
                 functions.push(curve);
-                cur = [instruction[5] + cur[0], instruction[6] + cur[1]];
+                cur = [instruction.dx + cur[0], instruction.dy + cur[1]];
             }
             else {
-                functions.push((0, linear_1.makeLinearPosition)(cur[0], cur[0], cur[1], cur[1]));
+                functions.push((0, linear_1.makeLinearPosition)({ x0: cur[0], x1: cur[0], y0: cur[1], y1: cur[1] }));
             }
         }
-        else if (instruction[0] === 'S') {
-            if (i > 0 && ['C', 'c', 'S', 's'].indexOf(parsed[i - 1][0]) > -1) {
+        else if (instruction.type === 'S') {
+            const prev = parsed[i - 1];
+            const prevWasCurve = prev.type === 'C' ||
+                prev.type === 'c' ||
+                prev.type === 'S' ||
+                prev.type === 's';
+            if (i > 0 && prevWasCurve) {
                 if (curve) {
                     const c = curve.getC();
                     curve = (0, bezier_1.makeBezier)({
@@ -120,10 +162,10 @@ const construct = (string) => {
                         ay: cur[1],
                         bx: 2 * cur[0] - c.x,
                         by: 2 * cur[1] - c.y,
-                        cx: instruction[1],
-                        cy: instruction[2],
-                        dx: instruction[3],
-                        dy: instruction[4],
+                        cx: instruction.cpx,
+                        cy: instruction.cpy,
+                        dx: instruction.x,
+                        dy: instruction.y,
                     });
                 }
             }
@@ -133,21 +175,25 @@ const construct = (string) => {
                     ay: cur[1],
                     bx: cur[0],
                     by: cur[1],
-                    cx: instruction[1],
-                    cy: instruction[2],
-                    dx: instruction[3],
-                    dy: instruction[4],
+                    cx: instruction.cpx,
+                    cy: instruction.cpy,
+                    dx: instruction.x,
+                    dy: instruction.y,
                 });
             }
             if (curve) {
                 length += curve.getTotalLength();
-                cur = [instruction[3], instruction[4]];
+                cur = [instruction.x, instruction.y];
                 functions.push(curve);
             }
         }
-        else if (instruction[0] === 's') {
-            // 240 225
-            if (i > 0 && ['C', 'c', 'S', 's'].indexOf(parsed[i - 1][0]) > -1) {
+        else if (instruction.type === 's') {
+            const prev = parsed[i - 1];
+            const prevWasCurve = prev.type === 'C' ||
+                prev.type === 'c' ||
+                prev.type === 'S' ||
+                prev.type === 's';
+            if (i > 0 && prevWasCurve) {
                 if (curve) {
                     const c = curve.getC();
                     const d = curve.getD();
@@ -156,10 +202,10 @@ const construct = (string) => {
                         ay: cur[1],
                         bx: cur[0] + d.x - c.x,
                         by: cur[1] + d.y - c.y,
-                        cx: cur[0] + instruction[1],
-                        cy: cur[1] + instruction[2],
-                        dx: cur[0] + instruction[3],
-                        dy: cur[1] + instruction[4],
+                        cx: cur[0] + instruction.cpdx,
+                        cy: cur[1] + instruction.cpdy,
+                        dx: cur[0] + instruction.dx,
+                        dy: cur[1] + instruction.dy,
                     });
                 }
             }
@@ -169,22 +215,27 @@ const construct = (string) => {
                     ay: cur[1],
                     bx: cur[0],
                     by: cur[1],
-                    cx: cur[0] + instruction[1],
-                    cy: cur[1] + instruction[2],
-                    dx: cur[0] + instruction[3],
-                    dy: cur[1] + instruction[4],
+                    cx: cur[0] + instruction.cpdx,
+                    cy: cur[1] + instruction.cpdy,
+                    dx: cur[0] + instruction.dx,
+                    dy: cur[1] + instruction.dy,
                 });
             }
             if (curve) {
                 length += curve.getTotalLength();
-                cur = [instruction[3] + cur[0], instruction[4] + cur[1]];
+                cur = [instruction.dx + cur[0], instruction.dy + cur[1]];
                 functions.push(curve);
             }
         }
         // Quadratic Bezier curves
-        else if (instruction[0] === 'Q') {
-            if (cur[0] === instruction[1] && cur[1] === instruction[2]) {
-                const linearCurve = (0, linear_1.makeLinearPosition)(instruction[1], instruction[3], instruction[2], instruction[4]);
+        else if (instruction.type === 'Q') {
+            if (cur[0] === instruction.cpx && cur[1] === instruction.cpy) {
+                const linearCurve = (0, linear_1.makeLinearPosition)({
+                    x0: instruction.cpx,
+                    x1: instruction.x,
+                    y0: instruction.cpy,
+                    y1: instruction.y,
+                });
                 length += linearCurve.getTotalLength();
                 functions.push(linearCurve);
             }
@@ -192,22 +243,27 @@ const construct = (string) => {
                 curve = (0, bezier_1.makeBezier)({
                     ax: cur[0],
                     ay: cur[1],
-                    bx: instruction[1],
-                    by: instruction[2],
-                    cx: instruction[3],
-                    cy: instruction[4],
+                    bx: instruction.cpx,
+                    by: instruction.cpy,
+                    cx: instruction.x,
+                    cy: instruction.y,
                     dx: null,
                     dy: null,
                 });
                 length += curve.getTotalLength();
                 functions.push(curve);
             }
-            cur = [instruction[3], instruction[4]];
-            prev_point = [instruction[1], instruction[2]];
+            cur = [instruction.x, instruction.y];
+            prev_point = [instruction.cpx, instruction.cpy];
         }
-        else if (instruction[0] === 'q') {
-            if (instruction[1] === 0 && instruction[2] === 0) {
-                const linearCurve = (0, linear_1.makeLinearPosition)(cur[0] + instruction[1], cur[0] + instruction[3], cur[1] + instruction[2], cur[1] + instruction[4]);
+        else if (instruction.type === 'q') {
+            if (instruction.cpdx === 0 && instruction.cpdy === 0) {
+                const linearCurve = (0, linear_1.makeLinearPosition)({
+                    x0: cur[0] + instruction.cpdx,
+                    x1: cur[0] + instruction.cpdy,
+                    y0: cur[1] + instruction.dx,
+                    y1: cur[1] + instruction.dy,
+                });
                 length += linearCurve.getTotalLength();
                 functions.push(linearCurve);
             }
@@ -215,28 +271,33 @@ const construct = (string) => {
                 curve = (0, bezier_1.makeBezier)({
                     ax: cur[0],
                     ay: cur[1],
-                    bx: cur[0] + instruction[1],
-                    by: cur[1] + instruction[2],
-                    cx: cur[0] + instruction[3],
-                    cy: cur[1] + instruction[4],
+                    bx: cur[0] + instruction.cpdx,
+                    by: cur[1] + instruction.cpdy,
+                    cx: cur[0] + instruction.dx,
+                    cy: cur[1] + instruction.dy,
                     dx: null,
                     dy: null,
                 });
                 length += curve.getTotalLength();
                 functions.push(curve);
             }
-            prev_point = [cur[0] + instruction[1], cur[1] + instruction[2]];
-            cur = [instruction[3] + cur[0], instruction[4] + cur[1]];
+            prev_point = [cur[0] + instruction.cpdx, cur[1] + instruction.cpdy];
+            cur = [instruction.dx + cur[0], instruction.dy + cur[1]];
         }
-        else if (instruction[0] === 'T') {
-            if (i > 0 && ['Q', 'q', 'T', 't'].indexOf(parsed[i - 1][0]) > -1) {
+        else if (instruction.type === 'T') {
+            const prev = parsed[i - 1];
+            const prevWasQ = prev.type === 'Q' ||
+                prev.type === 'q' ||
+                prev.type === 'T' ||
+                prev.type === 't';
+            if (i > 0 && prevWasQ) {
                 curve = (0, bezier_1.makeBezier)({
                     ax: cur[0],
                     ay: cur[1],
                     bx: 2 * cur[0] - prev_point[0],
                     by: 2 * cur[1] - prev_point[1],
-                    cx: instruction[1],
-                    cy: instruction[2],
+                    cx: instruction.x,
+                    cy: instruction.y,
                     dx: null,
                     dy: null,
                 });
@@ -244,22 +305,32 @@ const construct = (string) => {
                 length += curve.getTotalLength();
             }
             else {
-                const linearCurve = (0, linear_1.makeLinearPosition)(cur[0], instruction[1], cur[1], instruction[2]);
+                const linearCurve = (0, linear_1.makeLinearPosition)({
+                    x0: cur[0],
+                    x1: instruction.x,
+                    y0: cur[1],
+                    y1: instruction.y,
+                });
                 functions.push(linearCurve);
                 length += linearCurve.getTotalLength();
             }
             prev_point = [2 * cur[0] - prev_point[0], 2 * cur[1] - prev_point[1]];
-            cur = [instruction[1], instruction[2]];
+            cur = [instruction.x, instruction.y];
         }
-        else if (instruction[0] === 't') {
-            if (i > 0 && ['Q', 'q', 'T', 't'].indexOf(parsed[i - 1][0]) > -1) {
+        else if (instruction.type === 't') {
+            const prev = parsed[i - 1];
+            const prevWasQ = prev.type === 'Q' ||
+                prev.type === 'q' ||
+                prev.type === 'T' ||
+                prev.type === 't';
+            if (i > 0 && prevWasQ) {
                 curve = (0, bezier_1.makeBezier)({
                     ax: cur[0],
                     ay: cur[1],
                     bx: 2 * cur[0] - prev_point[0],
                     by: 2 * cur[1] - prev_point[1],
-                    cx: cur[0] + instruction[1],
-                    cy: cur[1] + instruction[2],
+                    cx: cur[0] + instruction.dx,
+                    cy: cur[1] + instruction.dy,
                     dx: null,
                     dy: null,
                 });
@@ -267,43 +338,48 @@ const construct = (string) => {
                 functions.push(curve);
             }
             else {
-                const linearCurve = (0, linear_1.makeLinearPosition)(cur[0], cur[0] + instruction[1], cur[1], cur[1] + instruction[2]);
+                const linearCurve = (0, linear_1.makeLinearPosition)({
+                    x0: cur[0],
+                    x1: cur[0] + instruction.dx,
+                    y0: cur[1],
+                    y1: cur[1] + instruction.dy,
+                });
                 length += linearCurve.getTotalLength();
                 functions.push(linearCurve);
             }
             prev_point = [2 * cur[0] - prev_point[0], 2 * cur[1] - prev_point[1]];
-            cur = [instruction[1] + cur[0], instruction[2] + cur[1]];
+            cur = [instruction.dx + cur[0], instruction.dy + cur[1]];
         }
-        else if (instruction[0] === 'A') {
+        else if (instruction.type === 'A') {
             const arcCurve = (0, arc_1.makeArc)({
                 x0: cur[0],
                 y0: cur[1],
-                rx: instruction[1],
-                ry: instruction[2],
-                xAxisRotate: instruction[3],
-                LargeArcFlag: instruction[4] === 1,
-                SweepFlag: instruction[5] === 1,
-                x1: instruction[6],
-                y1: instruction[7],
+                rx: instruction.rx,
+                ry: instruction.ry,
+                xAxisRotate: instruction.xAxisRotation,
+                LargeArcFlag: instruction.largeArcFlag,
+                SweepFlag: instruction.sweepFlag,
+                x1: instruction.x,
+                y1: instruction.y,
             });
             length += arcCurve.getTotalLength();
-            cur = [instruction[6], instruction[7]];
+            cur = [instruction.x, instruction.y];
             functions.push(arcCurve);
         }
-        else if (instruction[0] === 'a') {
+        else if (instruction.type === 'a') {
             const arcCurve = (0, arc_1.makeArc)({
                 x0: cur[0],
                 y0: cur[1],
-                rx: instruction[1],
-                ry: instruction[2],
-                xAxisRotate: instruction[3],
-                LargeArcFlag: instruction[4] === 1,
-                SweepFlag: instruction[5] === 1,
-                x1: cur[0] + instruction[6],
-                y1: cur[1] + instruction[7],
+                rx: instruction.rx,
+                ry: instruction.ry,
+                xAxisRotate: instruction.xAxisRotation,
+                LargeArcFlag: instruction.largeArcFlag,
+                SweepFlag: instruction.sweepFlag,
+                x1: cur[0] + instruction.dx,
+                y1: cur[1] + instruction.dy,
             });
             length += arcCurve.getTotalLength();
-            cur = [cur[0] + instruction[6], cur[1] + instruction[7]];
+            cur = [cur[0] + instruction.dx, cur[1] + instruction.dy];
             functions.push(arcCurve);
         }
         partial_lengths.push(length);