js-draw 0.1.9 → 0.1.12

package/dist/src/components/UnknownSVGObject.d.ts

@@ -1,6 +1,6 @@
-import LineSegment2 from '../geometry/LineSegment2';
-import Mat33 from '../geometry/Mat33';
-import Rect2 from '../geometry/Rect2';
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';

package/dist/src/components/UnknownSVGObject.js

@@ -1,4 +1,4 @@
-import Rect2 from '../geometry/Rect2';
+import Rect2 from '../math/Rect2';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import AbstractComponent from './AbstractComponent';
 const componentId = 'unknown-svg-object';

package/dist/src/components/builders/ArrowBuilder.d.ts

@@ -1,4 +1,4 @@
-import Rect2 from '../../geometry/Rect2';
+import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import AbstractComponent from '../AbstractComponent';

package/dist/src/components/builders/ArrowBuilder.js

@@ -1,4 +1,4 @@
-import { PathCommandType } from '../../geometry/Path';
+import { PathCommandType } from '../../math/Path';
 import Stroke from '../Stroke';
 export const makeArrowBuilder = (initialPoint, _viewport) => {
     return new ArrowBuilder(initialPoint);

package/dist/src/components/builders/FreehandLineBuilder.d.ts

@@ -1,5 +1,5 @@
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
-import Rect2 from '../../geometry/Rect2';
+import Rect2 from '../../math/Rect2';
 import Stroke from '../Stroke';
 import { StrokeDataPoint } from '../../types';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
@@ -8,7 +8,11 @@ export default class FreehandLineBuilder implements ComponentBuilder {
     private startPoint;
     private minFitAllowed;
     private maxFitAllowed;
-    private segments;
+    private isFirstSegment;
+    private pathStartConnector;
+    private mostRecentConnector;
+    private upperSegments;
+    private lowerSegments;
     private buffer;
     private lastPoint;
     private lastExitingVec;
@@ -20,7 +24,8 @@ export default class FreehandLineBuilder implements ComponentBuilder {
     constructor(startPoint: StrokeDataPoint, minFitAllowed: number, maxFitAllowed: number);
     getBBox(): Rect2;
     private getRenderingStyle;
-    private getPreview;
+    private previewPath;
+    private previewStroke;
     preview(renderer: AbstractRenderer): void;
     build(): Stroke;
     private roundPoint;

package/dist/src/components/builders/FreehandLineBuilder.js

@@ -1,8 +1,8 @@
 import { Bezier } from 'bezier-js';
-import { Vec2 } from '../../geometry/Vec2';
-import Rect2 from '../../geometry/Rect2';
-import { PathCommandType } from '../../geometry/Path';
-import LineSegment2 from '../../geometry/LineSegment2';
+import { Vec2 } from '../../math/Vec2';
+import Rect2 from '../../math/Rect2';
+import { PathCommandType } from '../../math/Path';
+import LineSegment2 from '../../math/LineSegment2';
 import Stroke from '../Stroke';
 import Viewport from '../../Viewport';
 export const makeFreehandLineBuilder = (initialPoint, viewport) => {
@@ -24,9 +24,13 @@ export default class FreehandLineBuilder {
         this.startPoint = startPoint;
         this.minFitAllowed = minFitAllowed;
         this.maxFitAllowed = maxFitAllowed;
+        this.isFirstSegment = true;
+        this.pathStartConnector = null;
+        this.mostRecentConnector = null;
         this.currentCurve = null;
         this.lastPoint = this.startPoint;
-        this.segments = [];
+        this.upperSegments = [];
+        this.lowerSegments = [];
         this.buffer = [this.startPoint.pos];
         this.momentum = Vec2.zero;
         this.currentCurve = null;
@@ -41,24 +45,81 @@ export default class FreehandLineBuilder {
             fill: (_a = this.lastPoint.color) !== null && _a !== void 0 ? _a : null,
         };
     }
-    // Get the segments that make up this' path. Can be called after calling build()
-    getPreview() {
-        if (this.currentCurve && this.lastPoint) {
-            const currentPath = this.currentSegmentToPath();
-            return this.segments.concat(currentPath);
+    previewPath() {
+        var _a;
+        let upperPath;
+        let lowerPath;
+        let lowerToUpperCap;
+        let pathStartConnector;
+        if (this.currentCurve) {
+            const { upperCurve, lowerToUpperConnector, upperToLowerConnector, lowerCurve } = this.currentSegmentToPath();
+            upperPath = this.upperSegments.concat(upperCurve);
+            lowerPath = this.lowerSegments.concat(lowerCurve);
+            lowerToUpperCap = lowerToUpperConnector;
+            pathStartConnector = (_a = this.pathStartConnector) !== null && _a !== void 0 ? _a : upperToLowerConnector;
+        }
+        else {
+            if (this.mostRecentConnector === null || this.pathStartConnector === null) {
+                return null;
+            }
+            upperPath = this.upperSegments.slice();
+            lowerPath = this.lowerSegments.slice();
+            lowerToUpperCap = this.mostRecentConnector;
+            pathStartConnector = this.pathStartConnector;
+        }
+        const startPoint = lowerPath[lowerPath.length - 1].endPoint;
+        return {
+            // Start at the end of the lower curve:
+            //    Start point
+            //     ↓     
+            //  __/  __/ ← Most recent points on this end
+            // /___ /
+            //  ↑
+            //  Oldest points
+            startPoint,
+            commands: [
+                // Move to the most recent point on the upperPath:
+                //     ----→•     
+                //  __/  __/
+                // /___ /
+                lowerToUpperCap,
+                // Move to the beginning of the upperPath:
+                //  __/  __/
+                // /___ /
+                //     • ←-
+                ...upperPath.reverse(),
+                // Move to the beginning of the lowerPath:
+                //  __/  __/
+                // /___ /
+                // •
+                pathStartConnector,
+                // Move back to the start point:
+                //     •
+                //  __/  __/
+                // /___ /
+                ...lowerPath,
+            ],
+            style: this.getRenderingStyle(),
+        };
+    }
+    previewStroke() {
+        const pathPreview = this.previewPath();
+        if (pathPreview) {
+            return new Stroke([pathPreview]);
         }
-        return this.segments;
+        return null;
     }
     preview(renderer) {
-        for (const part of this.getPreview()) {
-            renderer.drawPath(part);
+        const path = this.previewPath();
+        if (path) {
+            renderer.drawPath(path);
         }
     }
     build() {
         if (this.lastPoint) {
             this.finalizeCurrentCurve();
         }
-        return new Stroke(this.segments);
+        return this.previewStroke();
     }
     roundPoint(point) {
         return Viewport.roundPoint(point, this.minFitAllowed);
@@ -67,53 +128,61 @@ export default class FreehandLineBuilder {
         // Case where no points have been added
         if (!this.currentCurve) {
             // Don't create a circle around the initial point if the stroke has more than one point.
-            if (this.segments.length > 0) {
+            if (!this.isFirstSegment) {
                 return;
             }
-            const width = Viewport.roundPoint(this.startPoint.width / 3, this.minFitAllowed);
+            const width = Viewport.roundPoint(this.startPoint.width / 3.5, this.minFitAllowed);
             const center = this.roundPoint(this.startPoint.pos);
+            // Start on the right, cycle clockwise:
+            //    |
+            //  ----- ←
+            //    |
+            const startPoint = this.startPoint.pos.plus(Vec2.of(width, 0));
             // Draw a circle-ish shape around the start point
-            this.segments.push({
-                // Start on the right, cycle clockwise:
+            this.lowerSegments.push({
+                kind: PathCommandType.QuadraticBezierTo,
+                controlPoint: center.plus(Vec2.of(width, width)),
+                // Bottom of the circle
                 //    |
-                //  ----- ←
+                //  -----
                 //    |
-                startPoint: this.startPoint.pos.plus(Vec2.of(width, 0)),
-                commands: [
-                    {
-                        kind: PathCommandType.QuadraticBezierTo,
-                        controlPoint: center.plus(Vec2.of(width, width)),
-                        // Bottom of the circle
-                        //    |
-                        //  -----
-                        //    |
-                        //    ↑
-                        endPoint: center.plus(Vec2.of(0, width)),
-                    },
-                    {
-                        kind: PathCommandType.QuadraticBezierTo,
-                        controlPoint: center.plus(Vec2.of(-width, width)),
-                        endPoint: center.plus(Vec2.of(-width, 0)),
-                    },
-                    {
-                        kind: PathCommandType.QuadraticBezierTo,
-                        controlPoint: center.plus(Vec2.of(-width, -width)),
-                        endPoint: center.plus(Vec2.of(0, -width)),
-                    },
-                    {
-                        kind: PathCommandType.QuadraticBezierTo,
-                        controlPoint: center.plus(Vec2.of(width, -width)),
-                        endPoint: center.plus(Vec2.of(width, 0)),
-                    },
-                ],
-                style: this.getRenderingStyle(),
+                //    ↑
+                endPoint: center.plus(Vec2.of(0, width)),
+            }, {
+                kind: PathCommandType.QuadraticBezierTo,
+                controlPoint: center.plus(Vec2.of(-width, width)),
+                endPoint: center.plus(Vec2.of(-width, 0)),
+            }, {
+                kind: PathCommandType.QuadraticBezierTo,
+                controlPoint: center.plus(Vec2.of(-width, -width)),
+                endPoint: center.plus(Vec2.of(0, -width)),
+            }, {
+                kind: PathCommandType.QuadraticBezierTo,
+                controlPoint: center.plus(Vec2.of(width, -width)),
+                endPoint: center.plus(Vec2.of(width, 0)),
             });
+            this.pathStartConnector = {
+                kind: PathCommandType.LineTo,
+                point: startPoint,
+            };
+            this.mostRecentConnector = this.pathStartConnector;
             return;
         }
-        this.segments.push(this.currentSegmentToPath());
+        const { upperCurve, lowerToUpperConnector, upperToLowerConnector, lowerCurve } = this.currentSegmentToPath();
+        if (this.isFirstSegment) {
+            // We draw the upper path (reversed), then the lower path, so we need the
+            // upperToLowerConnector to join the two paths.
+            this.pathStartConnector = upperToLowerConnector;
+            this.isFirstSegment = false;
+        }
+        // With the most recent connector, we're joining the end of the lowerPath to the most recent
+        // upperPath:
+        this.mostRecentConnector = lowerToUpperConnector;
+        this.upperSegments.push(upperCurve);
+        this.lowerSegments.push(lowerCurve);
         const lastPoint = this.buffer[this.buffer.length - 1];
         this.lastExitingVec = Vec2.ofXY(this.currentCurve.points[2]).minus(Vec2.ofXY(this.currentCurve.points[1]));
-        console.assert(this.lastExitingVec.magnitude() !== 0);
+        console.assert(this.lastExitingVec.magnitude() !== 0, 'lastExitingVec has zero length!');
         // Use the last two points to start a new curve (the last point isn't used
         // in the current curve and we want connected curves to share end points)
         this.buffer = [
@@ -121,6 +190,7 @@ export default class FreehandLineBuilder {
         ];
         this.currentCurve = null;
     }
+    // Returns [upper curve, connector, lower curve]
     currentSegmentToPath() {
         if (this.currentCurve == null) {
             throw new Error('Invalid State: currentCurve is null!');
@@ -163,27 +233,28 @@ export default class FreehandLineBuilder {
         if (upperBoundary.intersects(lowerBoundary).length > 0) {
             halfVec = halfVec.times(2);
         }
-        const pathCommands = [
-            {
-                kind: PathCommandType.QuadraticBezierTo,
-                controlPoint: this.roundPoint(controlPoint.plus(halfVec)),
-                endPoint: this.roundPoint(endPt.plus(endVec)),
-            },
-            {
-                kind: PathCommandType.LineTo,
-                point: this.roundPoint(endPt.minus(endVec)),
-            },
-            {
-                kind: PathCommandType.QuadraticBezierTo,
-                controlPoint: this.roundPoint(controlPoint.minus(halfVec)),
-                endPoint: this.roundPoint(startPt.minus(startVec)),
-            },
-        ];
-        return {
-            startPoint: this.roundPoint(startPt.plus(startVec)),
-            commands: pathCommands,
-            style: this.getRenderingStyle(),
+        // Each starts at startPt ± startVec
+        const lowerCurve = {
+            kind: PathCommandType.QuadraticBezierTo,
+            controlPoint: this.roundPoint(controlPoint.plus(halfVec)),
+            endPoint: this.roundPoint(endPt.plus(endVec)),
+        };
+        // From the end of the upperCurve to the start of the lowerCurve:
+        const upperToLowerConnector = {
+            kind: PathCommandType.LineTo,
+            point: this.roundPoint(startPt.plus(startVec)),
+        };
+        // From the end of lowerCurve to the start of upperCurve:
+        const lowerToUpperConnector = {
+            kind: PathCommandType.LineTo,
+            point: this.roundPoint(endPt.minus(endVec))
+        };
+        const upperCurve = {
+            kind: PathCommandType.QuadraticBezierTo,
+            controlPoint: this.roundPoint(controlPoint.minus(halfVec)),
+            endPoint: this.roundPoint(startPt.minus(startVec)),
         };
+        return { upperCurve, upperToLowerConnector, lowerToUpperConnector, lowerCurve };
     }
     // Compute the direction of the velocity at the end of this.buffer
     computeExitingVec() {
@@ -205,7 +276,7 @@ export default class FreehandLineBuilder {
             }
             const threshold = Math.min(this.lastPoint.width, newPoint.width) / 4;
             const shouldSnapToInitial = this.startPoint.pos.minus(newPoint.pos).magnitude() < threshold
-                && this.segments.length === 0;
+                && this.isFirstSegment;
             // Snap to the starting point if the stroke is contained within a small ball centered
             // at the starting point.
             // This allows us to create a circle/dot at the start of the stroke.

package/dist/src/components/builders/LineBuilder.d.ts

@@ -1,4 +1,4 @@
-import Rect2 from '../../geometry/Rect2';
+import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import AbstractComponent from '../AbstractComponent';

package/dist/src/components/builders/LineBuilder.js

@@ -1,4 +1,4 @@
-import { PathCommandType } from '../../geometry/Path';
+import { PathCommandType } from '../../math/Path';
 import Stroke from '../Stroke';
 export const makeLineBuilder = (initialPoint, _viewport) => {
     return new LineBuilder(initialPoint);

package/dist/src/components/builders/RectangleBuilder.d.ts

@@ -1,4 +1,4 @@
-import Rect2 from '../../geometry/Rect2';
+import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';

package/dist/src/components/builders/RectangleBuilder.js

@@ -1,6 +1,6 @@
-import Mat33 from '../../geometry/Mat33';
-import Path from '../../geometry/Path';
-import Rect2 from '../../geometry/Rect2';
+import Mat33 from '../../math/Mat33';
+import Path from '../../math/Path';
+import Rect2 from '../../math/Rect2';
 import Stroke from '../Stroke';
 export const makeFilledRectangleBuilder = (initialPoint, viewport) => {
     return new RectangleBuilder(initialPoint, true, viewport);

package/dist/src/components/builders/types.d.ts

@@ -1,4 +1,4 @@
-import Rect2 from '../../geometry/Rect2';
+import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';

package/dist/src/localization.d.ts

@@ -4,6 +4,7 @@ import { TextRendererLocalization } from './rendering/localization';
 import { ToolbarLocalization } from './toolbar/localization';
 import { ToolLocalization } from './tools/localization';
 export interface EditorLocalization extends ToolbarLocalization, ToolLocalization, CommandLocalization, ImageComponentLocalization, TextRendererLocalization {
+    accessibilityInputInstructions: string;
     undoAnnouncement: (actionDescription: string) => string;
     redoAnnouncement: (actionDescription: string) => string;
     doneLoading: string;

package/dist/src/localization.js

@@ -3,4 +3,8 @@ import { defaultComponentLocalization } from './components/localization';
 import { defaultTextRendererLocalization } from './rendering/localization';
 import { defaultToolbarLocalization } from './toolbar/localization';
 import { defaultToolLocalization } from './tools/localization';
-export const defaultEditorLocalization = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultToolbarLocalization), defaultToolLocalization), defaultCommandLocalization), defaultComponentLocalization), defaultTextRendererLocalization), { loading: (percentage) => `Loading ${percentage}%...`, imageEditor: 'Image Editor', doneLoading: 'Done loading', undoAnnouncement: (commandDescription) => `Undid ${commandDescription}`, redoAnnouncement: (commandDescription) => `Redid ${commandDescription}` });
+export const defaultEditorLocalization = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultToolbarLocalization), defaultToolLocalization), defaultCommandLocalization), defaultComponentLocalization), defaultTextRendererLocalization), { accessibilityInputInstructions: [
+        'Press "t" to read the contents of the viewport as text.',
+        'Use the arrow keys to move the viewport, click and drag to draw strokes.',
+        'Press "w" to zoom in and "s" to zoom out.',
+    ].join(' '), loading: (percentage) => `Loading ${percentage}%...`, imageEditor: 'Image Editor', doneLoading: 'Done loading', undoAnnouncement: (commandDescription) => `Undid ${commandDescription}`, redoAnnouncement: (commandDescription) => `Redid ${commandDescription}` });

package/dist/src/localizations/en.d.ts

@@ -0,0 +1,3 @@
+import { EditorLocalization } from '../localization';
+declare const localization: EditorLocalization;
+export default localization;

package/dist/src/localizations/en.js

@@ -0,0 +1,4 @@
+import { defaultEditorLocalization } from '../localization';
+// Default localizations are already in English.
+const localization = Object.assign({}, defaultEditorLocalization);
+export default localization;

package/dist/src/localizations/es.d.ts

@@ -0,0 +1,3 @@
+import { EditorLocalization } from '../localization';
+declare const localization: EditorLocalization;
+export default localization;

package/dist/src/localizations/es.js

@@ -0,0 +1,18 @@
+import { defaultEditorLocalization } from '../localization';
+// A partial Spanish localization.
+const localization = Object.assign(Object.assign({}, defaultEditorLocalization), { 
+    // Strings for the main editor interface
+    // (see src/localization.ts)
+    loading: (percentage) => `Cargando: ${percentage}%...`, imageEditor: 'Editor de dibujos', undoAnnouncement: (commandDescription) => `${commandDescription} fue deshecho`, redoAnnouncement: (commandDescription) => `${commandDescription} fue rehecho`, undo: 'Deshace', redo: 'Rehace', 
+    // Strings for the toolbar
+    // (see src/toolbar/localization.ts)
+    pen: 'Lapiz', eraser: 'Borrador', select: 'Selecciona', thicknessLabel: 'Tamaño: ', colorLabel: 'Color: ', doneLoading: 'El cargado terminó', fontLabel: 'Fuente: ', anyDevicePanning: 'Mover la pantalla con todo dispotivo', touchPanning: 'Mover la pantalla con un dedo', touchPanTool: 'Instrumento de mover la pantalla con un dedo', outlinedRectanglePen: 'Rectángulo con nada más que un borde', filledRectanglePen: 'Rectángulo sin borde', linePen: 'Línea', arrowPen: 'Flecha', freehandPen: 'Dibuja sin restricción de forma', selectObjectType: 'Forma de dibuja:', handTool: 'Mover', zoom: 'Zoom', resetView: 'Reiniciar vista', resizeImageToSelection: 'Redimensionar la imagen a lo que está seleccionado', deleteSelection: 'Borra la selección', duplicateSelection: 'Duplica la selección', pickColorFromScreen: 'Selecciona un color de la pantalla', clickToPickColorAnnouncement: 'Haga un clic en la pantalla para seleccionar un color', dropdownShown(toolName) {
+        return `Menú por ${toolName} es visible`;
+    }, dropdownHidden: function (toolName) {
+        return `Menú por ${toolName} fue ocultado`;
+    }, colorChangedAnnouncement: function (color) {
+        return `Color fue cambiado a ${color}`;
+    }, keyboardPanZoom: 'Mover la pantalla con el teclado', penTool: function (penId) {
+        return `Lapiz ${penId}`;
+    }, selectionTool: 'Selecciona', eraserTool: 'Borrador', textTool: 'Texto', enterTextToInsert: 'Entra texto', rerenderAsText: 'Redibuja la pantalla al texto' });
+export default localization;

package/dist/src/localizations/getLocalizationTable.d.ts

@@ -0,0 +1,3 @@
+import { EditorLocalization } from '../localization';
+declare const getLocalizationTable: (userLocales?: readonly string[]) => EditorLocalization;
+export default getLocalizationTable;

package/dist/src/localizations/getLocalizationTable.js

@@ -0,0 +1,43 @@
+import { defaultEditorLocalization } from '../localization';
+import en from './en';
+import es from './es';
+const allLocales = {
+    en,
+    es,
+};
+// [locale]: A string in the format languageCode_Region or just languageCode. For example, en_US.
+const languageFromLocale = (locale) => {
+    const matches = /^(\w+)[_-](\w+)$/.exec(locale);
+    if (!matches) {
+        // If not in languageCode_region format, the locale should be the
+        // languageCode. Return that.
+        return locale;
+    }
+    return matches[1];
+};
+const getLocalizationTable = (userLocales) => {
+    userLocales !== null && userLocales !== void 0 ? userLocales : (userLocales = navigator.languages);
+    let prevLanguage;
+    for (const locale of userLocales) {
+        const language = languageFromLocale(locale);
+        // If the specific localization of the language is not available, but
+        // a localization for the language is,
+        if (prevLanguage && language !== prevLanguage) {
+            if (prevLanguage in allLocales) {
+                return allLocales[prevLanguage];
+            }
+        }
+        // If the full locale (e.g. en_US) is available,
+        if (locale in allLocales) {
+            return allLocales[locale];
+        }
+        prevLanguage = language;
+    }
+    if (prevLanguage && prevLanguage in allLocales) {
+        return allLocales[prevLanguage];
+    }
+    else {
+        return defaultEditorLocalization;
+    }
+};
+export default getLocalizationTable;

package/dist/src/{geometry → math}/LineSegment2.d.ts

@@ -15,5 +15,6 @@ export default class LineSegment2 {
     get p2(): Point2;
     get(t: number): Point2;
     intersection(other: LineSegment2): IntersectionResult | null;
+    closestPointTo(target: Point2): import("./Vec3").default;
 }
 export {};

package/dist/src/{geometry → math}/LineSegment2.js

@@ -97,4 +97,20 @@ export default class LineSegment2 {
             t: resultT,
         };
     }
+    // Returns the closest point on this to [target]
+    closestPointTo(target) {
+        // Distance from P1 along this' direction.
+        const projectedDistFromP1 = target.minus(this.p1).dot(this.direction);
+        const projectedDistFromP2 = this.length - projectedDistFromP1;
+        const projection = this.p1.plus(this.direction.times(projectedDistFromP1));
+        if (projectedDistFromP1 > 0 && projectedDistFromP1 < this.length) {
+            return projection;
+        }
+        if (Math.abs(projectedDistFromP2) < Math.abs(projectedDistFromP1)) {
+            return this.p2;
+        }
+        else {
+            return this.p1;
+        }
+    }
 }

package/dist/src/{geometry → math}/Path.d.ts

@@ -45,6 +45,7 @@ export default class Path {
     get geometry(): Array<LineSegment2 | Bezier>;
     static computeBBoxForSegment(startPoint: Point2, part: PathCommand): Rect2;
     intersection(line: LineSegment2): IntersectionResult[];
+    mapPoints(mapping: (point: Point2) => Point2): Path;
     transformedBy(affineTransfm: Mat33): Path;
     union(other: Path | null): Path;
     static fromRect(rect: Rect2, lineWidth?: number | null): Path;
@@ -52,7 +53,7 @@ export default class Path {
     toRenderable(fill: RenderingStyle): RenderablePathSpec;
     toString(): string;
     serialize(): string;
-    static toString(startPoint: Point2, parts: PathCommand[]): string;
+    static toString(startPoint: Point2, parts: PathCommand[], onlyAbsCommands?: boolean): string;
     static fromString(pathString: string): Path;
     static empty: Path;
 }