js-draw 0.15.1 → 0.16.0

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

@@ -1,4 +1,5 @@
 import SerializableCommand from '../commands/SerializableCommand';
+import EditorImage from '../EditorImage';
 import LineSegment2 from '../math/LineSegment2';
 import Mat33 from '../math/Mat33';
 import Rect2 from '../math/Rect2';
@@ -17,7 +18,7 @@ export default abstract class AbstractComponent {
     private zIndex;
     private id;
     private static zIndexCounter;
-    protected constructor(componentKind: string);
+    protected constructor(componentKind: string, initialZIndex?: number);
     getId(): string;
     private static deserializationCallbacks;
     static registerComponent(componentKind: string, deserialize: DeserializeCallback | null): void;
@@ -33,6 +34,9 @@ export default abstract class AbstractComponent {
     getZIndex(): number;
     /** @returns the bounding box of  */
     getBBox(): Rect2;
+    /** Called when this component is added to the given image. */
+    onAddToImage(_image: EditorImage): void;
+    onRemoveFromImage(): void;
     abstract render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
     /** @return true if `lineSegment` intersects this component. */
     abstract intersects(lineSegment: LineSegment2): boolean;
@@ -46,6 +50,7 @@ export default abstract class AbstractComponent {
     transformBy(affineTransfm: Mat33): SerializableCommand;
     setZIndex(newZIndex: number): SerializableCommand;
     isSelectable(): boolean;
+    isBackground(): boolean;
     getProportionalRenderingTime(): number;
     private static transformElementCommandId;
     private static TransformElementCommand;

package/dist/src/components/AbstractComponent.js

@@ -9,12 +9,17 @@ import UnresolvedSerializableCommand from '../commands/UnresolvedCommand';
 export default class AbstractComponent {
     constructor(
     // A unique identifier for the type of component
-    componentKind) {
+    componentKind, initialZIndex) {
         this.componentKind = componentKind;
         // Stores data attached by a loader.
         this.loadSaveData = {};
         this.lastChangedTime = (new Date()).getTime();
-        this.zIndex = AbstractComponent.zIndexCounter++;
+        if (initialZIndex !== undefined) {
+            this.zIndex = initialZIndex;
+        }
+        else {
+            this.zIndex = AbstractComponent.zIndexCounter++;
+        }
         // Create a unique ID.
         this.id = `${new Date().getTime()}-${Math.random()}`;
         if (AbstractComponent.deserializationCallbacks[componentKind] === undefined) {
@@ -54,6 +59,9 @@ export default class AbstractComponent {
     getBBox() {
         return this.contentBBox;
     }
+    /** Called when this component is added to the given image. */
+    onAddToImage(_image) { }
+    onRemoveFromImage() { }
     /**
      * @returns true if this component intersects `rect` -- it is entirely contained
      *  within the rectangle or one of the rectangle's edges intersects this component.
@@ -86,6 +94,11 @@ export default class AbstractComponent {
     isSelectable() {
         return true;
     }
+    // @returns true iff this component should be added to the background, rather than the
+    // foreground of the image.
+    isBackground() {
+        return false;
+    }
     // @returns an approximation of the proportional time it takes to render this component.
     // This is intended to be a rough estimate, but, for example, a stroke with two points sould have
     // a renderingWeight approximately twice that of a stroke with one point.

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

@@ -0,0 +1,42 @@
+import Color4 from '../Color4';
+import Editor from '../Editor';
+import EditorImage from '../EditorImage';
+import SerializableCommand from '../commands/SerializableCommand';
+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';
+import RestyleableComponent, { ComponentStyle } from './RestylableComponent';
+export declare enum BackgroundType {
+    SolidColor = 0,
+    None = 1
+}
+export declare const imageBackgroundCSSClassName = "js-draw-image-background";
+export default class ImageBackground extends AbstractComponent implements RestyleableComponent {
+    private backgroundType;
+    private mainColor;
+    protected contentBBox: Rect2;
+    private viewportSizeChangeListener;
+    readonly isRestylableComponent: true;
+    constructor(backgroundType: BackgroundType, mainColor: Color4);
+    getStyle(): ComponentStyle;
+    updateStyle(style: ComponentStyle): SerializableCommand;
+    forceStyle(style: ComponentStyle, editor: Editor | null): void;
+    onAddToImage(image: EditorImage): void;
+    onRemoveFromImage(): void;
+    private recomputeBBox;
+    render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
+    intersects(lineSegment: LineSegment2): boolean;
+    isSelectable(): boolean;
+    isBackground(): boolean;
+    protected serializeToJSON(): {
+        mainColor: string;
+        backgroundType: BackgroundType;
+    };
+    protected applyTransformation(_affineTransfm: Mat33): void;
+    description(localizationTable: ImageComponentLocalization): string;
+    protected createClone(): AbstractComponent;
+    static deserializeFromJSON(json: any): ImageBackground;
+}

package/dist/src/components/ImageBackground.js

@@ -0,0 +1,139 @@
+import Color4 from '../Color4';
+import { EditorImageEventType } from '../EditorImage';
+import Rect2 from '../math/Rect2';
+import AbstractComponent from './AbstractComponent';
+import { createRestyleComponentCommand } from './RestylableComponent';
+export var BackgroundType;
+(function (BackgroundType) {
+    BackgroundType[BackgroundType["SolidColor"] = 0] = "SolidColor";
+    BackgroundType[BackgroundType["None"] = 1] = "None";
+})(BackgroundType || (BackgroundType = {}));
+export const imageBackgroundCSSClassName = 'js-draw-image-background';
+// Represents the background of an image in the editor.
+export default class ImageBackground extends AbstractComponent {
+    constructor(backgroundType, mainColor) {
+        super('image-background', 0);
+        this.backgroundType = backgroundType;
+        this.mainColor = mainColor;
+        this.viewportSizeChangeListener = null;
+        // eslint-disable-next-line @typescript-eslint/prefer-as-const
+        this.isRestylableComponent = true;
+        this.contentBBox = Rect2.empty;
+    }
+    getStyle() {
+        let color = this.mainColor;
+        if (this.backgroundType === BackgroundType.None) {
+            color = undefined;
+        }
+        return {
+            color,
+        };
+    }
+    updateStyle(style) {
+        return createRestyleComponentCommand(this.getStyle(), style, this);
+    }
+    // @internal
+    forceStyle(style, editor) {
+        const fill = style.color;
+        if (!fill) {
+            return;
+        }
+        this.mainColor = fill;
+        if (fill.eq(Color4.transparent)) {
+            this.backgroundType = BackgroundType.None;
+        }
+        else {
+            this.backgroundType = BackgroundType.SolidColor;
+        }
+        if (editor) {
+            editor.image.queueRerenderOf(this);
+            editor.queueRerender();
+        }
+    }
+    onAddToImage(image) {
+        if (this.viewportSizeChangeListener) {
+            console.warn('onAddToImage called when background is already in an image');
+            this.onRemoveFromImage();
+        }
+        this.viewportSizeChangeListener = image.notifier.on(EditorImageEventType.ExportViewportChanged, () => {
+            this.recomputeBBox(image);
+        });
+        this.recomputeBBox(image);
+    }
+    onRemoveFromImage() {
+        var _a;
+        (_a = this.viewportSizeChangeListener) === null || _a === void 0 ? void 0 : _a.remove();
+        this.viewportSizeChangeListener = null;
+    }
+    recomputeBBox(image) {
+        const importExportRect = image.getImportExportViewport().visibleRect;
+        if (!this.contentBBox.eq(importExportRect)) {
+            this.contentBBox = importExportRect;
+            // Re-render this if already added to the EditorImage.
+            image.queueRerenderOf(this);
+        }
+    }
+    render(canvas, visibleRect) {
+        if (this.backgroundType === BackgroundType.None) {
+            return;
+        }
+        canvas.startObject(this.contentBBox);
+        if (this.backgroundType === BackgroundType.SolidColor) {
+            // If the rectangle for this region contains the visible rect,
+            // we can fill the entire visible rectangle (which may be more efficient than
+            // filling the entire region for this.)
+            if (visibleRect) {
+                const intersection = visibleRect.intersection(this.contentBBox);
+                if (intersection) {
+                    canvas.fillRect(intersection, this.mainColor);
+                }
+            }
+            else {
+                canvas.fillRect(this.contentBBox, this.mainColor);
+            }
+        }
+        canvas.endObject(this.getLoadSaveData(), [imageBackgroundCSSClassName]);
+    }
+    intersects(lineSegment) {
+        return this.contentBBox.getEdges().some(edge => edge.intersects(lineSegment));
+    }
+    isSelectable() {
+        return false;
+    }
+    isBackground() {
+        return true;
+    }
+    serializeToJSON() {
+        return {
+            mainColor: this.mainColor.toHexString(),
+            backgroundType: this.backgroundType,
+        };
+    }
+    applyTransformation(_affineTransfm) {
+        // Do nothing — it doesn't make sense to transform the background.
+    }
+    description(localizationTable) {
+        if (this.backgroundType === BackgroundType.SolidColor) {
+            return localizationTable.filledBackgroundWithColor(this.mainColor.toString());
+        }
+        else {
+            return localizationTable.emptyBackground;
+        }
+    }
+    createClone() {
+        return new ImageBackground(this.backgroundType, this.mainColor);
+    }
+    // @internal
+    static deserializeFromJSON(json) {
+        if (typeof json === 'string') {
+            json = JSON.parse(json);
+        }
+        if (typeof json.mainColor !== 'string') {
+            throw new Error('Error deserializing — mainColor must be of type string.');
+        }
+        const backgroundType = json.backgroundType === BackgroundType.SolidColor ? BackgroundType.SolidColor : BackgroundType.None;
+        const mainColor = Color4.fromHex(json.mainColor);
+        return new ImageBackground(backgroundType, mainColor);
+    }
+}
+AbstractComponent.registerComponent('image-background', ImageBackground.deserializeFromJSON);

package/dist/src/components/ImageComponent.js

@@ -80,7 +80,9 @@ export default class ImageComponent extends AbstractComponent {
         });
     }
     render(canvas, _visibleRect) {
+        canvas.startObject(this.contentBBox);
         canvas.drawImage(this.image);
+        canvas.endObject(this.getLoadSaveData());
     }
     getProportionalRenderingTime() {
         // Estimate: Equivalent to a stroke with 10 segments.

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

@@ -1,13 +1,15 @@
 import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
+import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
 export declare const makeArrowBuilder: ComponentBuilderFactory;
 export default class ArrowBuilder implements ComponentBuilder {
     private readonly startPoint;
+    private readonly viewport;
     private endPoint;
-    constructor(startPoint: StrokeDataPoint);
+    constructor(startPoint: StrokeDataPoint, viewport: Viewport);
     private getLineWidth;
     getBBox(): Rect2;
     private buildPreview;

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

@@ -1,11 +1,12 @@
-import { PathCommandType } from '../../math/Path';
+import Path, { PathCommandType } from '../../math/Path';
 import Stroke from '../Stroke';
-export const makeArrowBuilder = (initialPoint, _viewport) => {
-    return new ArrowBuilder(initialPoint);
+export const makeArrowBuilder = (initialPoint, viewport) => {
+    return new ArrowBuilder(initialPoint, viewport);
 };
 export default class ArrowBuilder {
-    constructor(startPoint) {
+    constructor(startPoint, viewport) {
         this.startPoint = startPoint;
+        this.viewport = viewport;
         this.endPoint = startPoint;
     }
     getLineWidth() {
@@ -16,10 +17,10 @@ export default class ArrowBuilder {
         return preview.getBBox();
     }
     buildPreview() {
-        const startPoint = this.startPoint.pos;
+        const lineStartPoint = this.startPoint.pos;
         const endPoint = this.endPoint.pos;
-        const toEnd = endPoint.minus(startPoint).normalized();
-        const arrowLength = endPoint.minus(startPoint).length();
+        const toEnd = endPoint.minus(lineStartPoint).normalized();
+        const arrowLength = endPoint.minus(lineStartPoint).length();
         // Ensure that the arrow tip is smaller than the arrow.
         const arrowTipSize = Math.min(this.getLineWidth(), arrowLength / 2);
         const startSize = this.startPoint.width / 2;
@@ -29,41 +30,43 @@ export default class ArrowBuilder {
         const lineNormal = toEnd.orthog();
         const scaledStartNormal = lineNormal.times(startSize);
         const scaledBaseNormal = lineNormal.times(endSize);
+        const path = new Path(arrowTipBase.minus(scaledBaseNormal), [
+            // Stem
+            {
+                kind: PathCommandType.LineTo,
+                point: lineStartPoint.minus(scaledStartNormal),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: lineStartPoint.plus(scaledStartNormal),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: arrowTipBase.plus(scaledBaseNormal),
+            },
+            // Head
+            {
+                kind: PathCommandType.LineTo,
+                point: arrowTipBase.plus(lineNormal.times(arrowTipSize).plus(scaledBaseNormal)),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: endPoint.plus(toEnd.times(endSize)),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: arrowTipBase.plus(lineNormal.times(-arrowTipSize).minus(scaledBaseNormal)),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: arrowTipBase.minus(scaledBaseNormal),
+            },
+            // Round all points in the arrow (to remove unnecessary decimal places)
+        ]).mapPoints(point => this.viewport.roundPoint(point));
         const preview = new Stroke([
             {
-                startPoint: arrowTipBase.minus(scaledBaseNormal),
-                commands: [
-                    // Stem
-                    {
-                        kind: PathCommandType.LineTo,
-                        point: startPoint.minus(scaledStartNormal),
-                    },
-                    {
-                        kind: PathCommandType.LineTo,
-                        point: startPoint.plus(scaledStartNormal),
-                    },
-                    {
-                        kind: PathCommandType.LineTo,
-                        point: arrowTipBase.plus(scaledBaseNormal),
-                    },
-                    // Head
-                    {
-                        kind: PathCommandType.LineTo,
-                        point: arrowTipBase.plus(lineNormal.times(arrowTipSize).plus(scaledBaseNormal))
-                    },
-                    {
-                        kind: PathCommandType.LineTo,
-                        point: endPoint.plus(toEnd.times(endSize)),
-                    },
-                    {
-                        kind: PathCommandType.LineTo,
-                        point: arrowTipBase.plus(lineNormal.times(-arrowTipSize).minus(scaledBaseNormal)),
-                    },
-                    {
-                        kind: PathCommandType.LineTo,
-                        point: arrowTipBase.minus(scaledBaseNormal),
-                    },
-                ],
+                startPoint: path.startPoint,
+                commands: path.parts,
                 style: {
                     fill: this.startPoint.color,
                 }

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

@@ -1,13 +1,15 @@
 import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
+import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
 export declare const makeLineBuilder: ComponentBuilderFactory;
 export default class LineBuilder implements ComponentBuilder {
     private readonly startPoint;
+    private readonly viewport;
     private endPoint;
-    constructor(startPoint: StrokeDataPoint);
+    constructor(startPoint: StrokeDataPoint, viewport: Viewport);
     getBBox(): Rect2;
     private buildPreview;
     build(): AbstractComponent;

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

@@ -1,11 +1,12 @@
-import { PathCommandType } from '../../math/Path';
+import Path, { PathCommandType } from '../../math/Path';
 import Stroke from '../Stroke';
-export const makeLineBuilder = (initialPoint, _viewport) => {
-    return new LineBuilder(initialPoint);
+export const makeLineBuilder = (initialPoint, viewport) => {
+    return new LineBuilder(initialPoint, viewport);
 };
 export default class LineBuilder {
-    constructor(startPoint) {
+    constructor(startPoint, viewport) {
         this.startPoint = startPoint;
+        this.viewport = viewport;
         this.endPoint = startPoint;
     }
     getBBox() {
@@ -21,31 +22,27 @@ export default class LineBuilder {
         const lineNormal = toEnd.orthog();
         const scaledStartNormal = lineNormal.times(startSize);
         const scaledEndNormal = lineNormal.times(endSize);
-        const preview = new Stroke([
+        const strokeStartPoint = startPoint.minus(scaledStartNormal);
+        const path = new Path(strokeStartPoint, [
+            {
+                kind: PathCommandType.LineTo,
+                point: startPoint.plus(scaledStartNormal),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: endPoint.plus(scaledEndNormal),
+            },
             {
-                startPoint: startPoint.minus(scaledStartNormal),
-                commands: [
-                    {
-                        kind: PathCommandType.LineTo,
-                        point: startPoint.plus(scaledStartNormal),
-                    },
-                    {
-                        kind: PathCommandType.LineTo,
-                        point: endPoint.plus(scaledEndNormal),
-                    },
-                    {
-                        kind: PathCommandType.LineTo,
-                        point: endPoint.minus(scaledEndNormal),
-                    },
-                    {
-                        kind: PathCommandType.LineTo,
-                        point: startPoint.minus(scaledStartNormal),
-                    },
-                ],
-                style: {
-                    fill: this.startPoint.color,
-                }
-            }
+                kind: PathCommandType.LineTo,
+                point: endPoint.minus(scaledEndNormal),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: startPoint.minus(scaledStartNormal),
+            },
+        ]).mapPoints(point => this.viewport.roundPoint(point));
+        const preview = new Stroke([
+            path.toRenderable({ fill: this.startPoint.color })
         ]);
         return preview;
     }

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

@@ -30,7 +30,7 @@ export default class RectangleBuilder {
         const rect = Rect2.fromCorners(startPoint, endPoint);
         const path = Path.fromRect(rect, this.filled ? null : this.endPoint.width).transformedBy(
         // Rotate the canvas rectangle so that its rotation matches the screen
-        rotationMat);
+        rotationMat).mapPoints(point => this.viewport.roundPoint(point));
         const preview = new Stroke([
             path.toRenderable({
                 fill: this.endPoint.color

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

@@ -8,4 +8,5 @@ import Stroke from './Stroke';
 import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
 import RestyleableComponent, { createRestyleComponentCommand } from './RestylableComponent';
-export { Stroke, TextComponent as Text, RestyleableComponent, createRestyleComponentCommand, TextComponent, Stroke as StrokeComponent, ImageComponent, };
+import ImageBackground from './ImageBackground';
+export { Stroke, TextComponent as Text, RestyleableComponent, createRestyleComponentCommand, TextComponent, Stroke as StrokeComponent, ImageBackground as BackgroundComponent, ImageComponent, };

package/dist/src/components/lib.js

@@ -8,4 +8,5 @@ import Stroke from './Stroke';
 import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
 import { createRestyleComponentCommand } from './RestylableComponent';
-export { Stroke, TextComponent as Text, createRestyleComponentCommand, TextComponent, Stroke as StrokeComponent, ImageComponent, };
+import ImageBackground from './ImageBackground';
+export { Stroke, TextComponent as Text, createRestyleComponentCommand, TextComponent, Stroke as StrokeComponent, ImageBackground as BackgroundComponent, ImageComponent, };

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

@@ -4,6 +4,8 @@ export interface ImageComponentLocalization {
     imageNode: (description: string) => string;
     stroke: string;
     svgObject: string;
+    emptyBackground: string;
+    filledBackgroundWithColor: (color: string) => string;
     restyledElements: string;
 }
 export declare const defaultComponentLocalization: ImageComponentLocalization;

package/dist/src/components/localization.js

@@ -3,6 +3,8 @@ export const defaultComponentLocalization = {
     stroke: 'Stroke',
     svgObject: 'SVG Object',
     restyledElements: 'Restyled elements',
+    emptyBackground: 'Empty background',
+    filledBackgroundWithColor: (color) => `Filled background (${color})`,
     text: (text) => `Text object: ${text}`,
     imageNode: (description) => `Image: ${description}`,
 };

package/dist/src/localizations/es.js

@@ -14,5 +14,5 @@ const localization = Object.assign(Object.assign({}, defaultEditorLocalization),
         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', image: 'Imagen', imageSize: (size, units) => `Tamaño del imagen: ${size} ${units}`, imageLoadError: (message) => `Error cargando imagen: ${message}` });
+    }, selectionTool: 'Selecciona', eraserTool: 'Borrador', textTool: 'Texto', enterTextToInsert: 'Entra texto', textSize: 'Tamaño', rerenderAsText: 'Redibuja la pantalla al texto', lockRotation: 'Bloquea rotación', image: 'Imagen', imageSize: (size, units) => `Tamaño del imagen: ${size} ${units}`, imageLoadError: (message) => `Error cargando imagen: ${message}`, toggleOverflow: 'Más', documentProperties: 'Fondo', imageWidthOption: 'Ancho: ', imageHeightOption: 'Alto: ', backgroundColor: 'Color de fondo: ' });
 export default localization;

package/dist/src/math/Mat33.js

@@ -170,11 +170,46 @@ export default class Mat33 {
         return true;
     }
     toString() {
-        return `
-⎡ ${this.a1},\t ${this.a2},\t ${this.a3}\t ⎤
-⎢ ${this.b1},\t ${this.b2},\t ${this.b3}\t ⎥
-⎣ ${this.c1},\t ${this.c2},\t ${this.c3}\t ⎦
-		`.trimEnd().trimStart();
+        let result = '';
+        const maxColumnLens = [0, 0, 0];
+        // Determine the longest item in each column so we can pad the others to that
+        // length.
+        for (const row of this.rows) {
+            for (let i = 0; i < 3; i++) {
+                maxColumnLens[i] = Math.max(maxColumnLens[0], `${row.at(i)}`.length);
+            }
+        }
+        for (let i = 0; i < 3; i++) {
+            if (i === 0) {
+                result += '⎡ ';
+            }
+            else if (i === 1) {
+                result += '⎢ ';
+            }
+            else {
+                result += '⎣ ';
+            }
+            // Add each component of the ith row (after padding it)
+            for (let j = 0; j < 3; j++) {
+                const val = this.rows[i].at(j).toString();
+                let padding = '';
+                for (let i = val.length; i < maxColumnLens[j]; i++) {
+                    padding += ' ';
+                }
+                result += val + ', ' + padding;
+            }
+            if (i === 0) {
+                result += ' ⎤';
+            }
+            else if (i === 1) {
+                result += ' ⎥';
+            }
+            else {
+                result += ' ⎦';
+            }
+            result += '\n';
+        }
+        return result.trimEnd();
     }
     /**
      * ```
@@ -219,6 +254,9 @@ export default class Mat33 {
         return new Mat33(1, 0, amount.x, 0, 1, amount.y, 0, 0, 1);
     }
     static zRotation(radians, center = Vec2.zero) {
+        if (radians === 0) {
+            return Mat33.identity;
+        }
         const cos = Math.cos(radians);
         const sin = Math.sin(radians);
         // Translate everything so that rotation is about the origin

package/dist/src/math/Path.d.ts

@@ -47,6 +47,7 @@ export default class Path {
     polylineApproximation(): LineSegment2[];
     static computeBBoxForSegment(startPoint: Point2, part: PathCommand): Rect2;
     intersection(line: LineSegment2): IntersectionResult[];
+    private static mapPathCommand;
     mapPoints(mapping: (point: Point2) => Point2): Path;
     transformedBy(affineTransfm: Mat33): Path;
     union(other: Path | null): Path;
@@ -56,6 +57,10 @@ export default class Path {
     static fromRect(rect: Rect2, lineWidth?: number | null): Path;
     static fromRenderable(renderable: RenderablePathSpec): Path;
     toRenderable(fill: RenderingStyle): RenderablePathSpec;
+    /**
+     * @returns a Path that, when rendered, looks roughly equivalent to the given path.
+     */
+    static visualEquivalent(renderablePath: RenderablePathSpec, visibleRect: Rect2): RenderablePathSpec;
     private cachedStringVersion;
     toString(useNonAbsCommands?: boolean): string;
     serialize(): string;