js-draw 0.15.1 → 0.15.2

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/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;

package/dist/src/math/Path.js

@@ -1,6 +1,7 @@
 import { Bezier } from 'bezier-js';
 import { toRoundedString, toStringOfSamePrecision } from './rounding';
 import LineSegment2 from './LineSegment2';
+import Mat33 from './Mat33';
 import Rect2 from './Rect2';
 import { Vec2 } from './Vec2';
 export var PathCommandType;
@@ -143,38 +144,39 @@ export default class Path {
         }
         return result;
     }
+    static mapPathCommand(part, mapping) {
+        switch (part.kind) {
+            case PathCommandType.MoveTo:
+            case PathCommandType.LineTo:
+                return {
+                    kind: part.kind,
+                    point: mapping(part.point),
+                };
+                break;
+            case PathCommandType.CubicBezierTo:
+                return {
+                    kind: part.kind,
+                    controlPoint1: mapping(part.controlPoint1),
+                    controlPoint2: mapping(part.controlPoint2),
+                    endPoint: mapping(part.endPoint),
+                };
+                break;
+            case PathCommandType.QuadraticBezierTo:
+                return {
+                    kind: part.kind,
+                    controlPoint: mapping(part.controlPoint),
+                    endPoint: mapping(part.endPoint),
+                };
+                break;
+        }
+        const exhaustivenessCheck = part;
+        return exhaustivenessCheck;
+    }
     mapPoints(mapping) {
         const startPoint = mapping(this.startPoint);
         const newParts = [];
-        let exhaustivenessCheck;
         for (const part of this.parts) {
-            switch (part.kind) {
-                case PathCommandType.MoveTo:
-                case PathCommandType.LineTo:
-                    newParts.push({
-                        kind: part.kind,
-                        point: mapping(part.point),
-                    });
-                    break;
-                case PathCommandType.CubicBezierTo:
-                    newParts.push({
-                        kind: part.kind,
-                        controlPoint1: mapping(part.controlPoint1),
-                        controlPoint2: mapping(part.controlPoint2),
-                        endPoint: mapping(part.endPoint),
-                    });
-                    break;
-                case PathCommandType.QuadraticBezierTo:
-                    newParts.push({
-                        kind: part.kind,
-                        controlPoint: mapping(part.controlPoint),
-                        endPoint: mapping(part.endPoint),
-                    });
-                    break;
-                default:
-                    exhaustivenessCheck = part;
-                    return exhaustivenessCheck;
-            }
+            newParts.push(Path.mapPathCommand(part, mapping));
         }
         return new Path(startPoint, newParts);
     }
@@ -329,6 +331,56 @@ export default class Path {
             path: this,
         };
     }
+    /**
+     * @returns a Path that, when rendered, looks roughly equivalent to the given path.
+     */
+    static visualEquivalent(renderablePath, visibleRect) {
+        var _a, _b;
+        const path = Path.fromRenderable(renderablePath);
+        const strokeWidth = (_b = (_a = renderablePath.style.stroke) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0;
+        const onlyStroked = strokeWidth > 0 && renderablePath.style.fill.a === 0;
+        // Scale the expanded rect --- the visual equivalent is only close for huge strokes.
+        const expandedRect = visibleRect.grownBy(strokeWidth)
+            .transformedBoundingBox(Mat33.scaling2D(2, visibleRect.center));
+        // TODO: Handle simplifying very small paths.
+        if (expandedRect.containsRect(path.bbox.grownBy(strokeWidth))) {
+            return renderablePath;
+        }
+        const parts = [];
+        let startPoint = path.startPoint;
+        for (const part of path.parts) {
+            const partBBox = Path.computeBBoxForSegment(startPoint, part).grownBy(strokeWidth);
+            let endPoint;
+            if (part.kind === PathCommandType.LineTo || part.kind === PathCommandType.MoveTo) {
+                endPoint = part.point;
+            }
+            else {
+                endPoint = part.endPoint;
+            }
+            const intersectsVisible = partBBox.intersects(visibleRect);
+            if (intersectsVisible) {
+                // TODO: Can we trim parts of paths that intersect the visible rectangle?
+                parts.push(part);
+            }
+            else if (onlyStroked || part.kind === PathCommandType.MoveTo) {
+                // We're stroking (not filling) and the path doesn't intersect the bounding box.
+                // Don't draw it, but preserve the endpoints.
+                parts.push({
+                    kind: PathCommandType.MoveTo,
+                    point: endPoint,
+                });
+            }
+            else {
+                // Otherwise, we may be filling. Try to roughly preserve the filled region.
+                parts.push({
+                    kind: PathCommandType.LineTo,
+                    point: endPoint,
+                });
+            }
+            startPoint = endPoint;
+        }
+        return new Path(path.startPoint, parts).toRenderable(renderablePath.style);
+    }
     toString(useNonAbsCommands) {
         if (this.cachedStringVersion) {
             return this.cachedStringVersion;

package/dist/src/math/Vec3.js

@@ -65,7 +65,7 @@ export default class Vec3 {
         return Vec3.of(this.x + v.x, this.y + v.y, this.z + v.z);
     }
     minus(v) {
-        return this.plus(v.times(-1));
+        return Vec3.of(this.x - v.x, this.y - v.y, this.z - v.z);
     }
     dot(other) {
         return this.x * other.x + this.y * other.y + this.z * other.z;

package/dist/src/rendering/Display.js

@@ -70,7 +70,7 @@ export default class Display {
             },
             blockResolution: cacheBlockResolution,
             cacheSize: 600 * 600 * 4 * 90,
-            maxScale: 1.4,
+            maxScale: 1.3,
             // Require about 20 strokes with 4 parts each to cache an image in one of the
             // parts of the cache grid.
             minProportionalRenderTimePerCache: 20 * 4,

package/dist/src/rendering/renderers/AbstractRenderer.d.ts

@@ -1,3 +1,4 @@
+import Color4 from '../../Color4';
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
 import Mat33 from '../../math/Mat33';
 import Path, { PathCommand } from '../../math/Path';
@@ -41,8 +42,19 @@ export default abstract class AbstractRenderer {
     private flushPath;
     drawPath(path: RenderablePathSpec): void;
     drawRect(rect: Rect2, lineWidth: number, lineFill: RenderingStyle): void;
+    fillRect(rect: Rect2, fill: Color4): void;
     startObject(_boundingBox: Rect2, _clip?: boolean): void;
-    endObject(_loaderData?: LoadSaveDataTable): void;
+    /**
+     * Notes the end of an object.
+     * @param _loaderData - a map from strings to JSON-ifyable objects
+     * and contains properties attached to the object by whatever loader loaded the image. This
+     * is used to preserve attributes not supported by js-draw when loading/saving an image.
+     * Renderers may ignore this.
+     *
+     * @param _objectTags - a list of labels (e.g. `className`s) to be attached to the object.
+     * Renderers may ignore this.
+     */
+    endObject(_loaderData?: LoadSaveDataTable, _objectTags?: string[]): void;
     protected getNestingLevel(): number;
     abstract drawPoints(...points: Point2[]): void;
     canRenderFromWithoutDataLoss(_other: AbstractRenderer): boolean;

package/dist/src/rendering/renderers/AbstractRenderer.js

@@ -64,19 +64,34 @@ export default class AbstractRenderer {
             this.currentPaths.push(path);
         }
     }
-    // Draw a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill].
+    // Strokes a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill].
     // This is equivalent to `drawPath(Path.fromRect(...).toRenderable(...))`.
     drawRect(rect, lineWidth, lineFill) {
         const path = Path.fromRect(rect, lineWidth);
         this.drawPath(path.toRenderable(lineFill));
     }
-    // Note the start/end of an object with the given bounding box.
+    // Fills a rectangle.
+    fillRect(rect, fill) {
+        const path = Path.fromRect(rect);
+        this.drawPath(path.toRenderable({ fill }));
+    }
+    // Note the start of an object with the given bounding box.
     // Renderers are not required to support [clip]
     startObject(_boundingBox, _clip) {
         this.currentPaths = [];
         this.objectLevel++;
     }
-    endObject(_loaderData) {
+    /**
+     * Notes the end of an object.
+     * @param _loaderData - a map from strings to JSON-ifyable objects
+     * and contains properties attached to the object by whatever loader loaded the image. This
+     * is used to preserve attributes not supported by js-draw when loading/saving an image.
+     * Renderers may ignore this.
+     *
+     * @param _objectTags - a list of labels (e.g. `className`s) to be attached to the object.
+     * Renderers may ignore this.
+     */
+    endObject(_loaderData, _objectTags) {
         // Render the paths all at once
         this.flushPath();
         this.currentPaths = null;

package/dist/src/rendering/renderers/CanvasRenderer.d.ts

@@ -10,6 +10,7 @@ export default class CanvasRenderer extends AbstractRenderer {
     private ctx;
     private ignoreObjectsAboveLevel;
     private ignoringObject;
+    private currentObjectBBox;
     private minSquareCurveApproxDist;
     private minRenderSizeAnyDimen;
     private minRenderSizeBothDimens;
@@ -30,7 +31,7 @@ export default class CanvasRenderer extends AbstractRenderer {
     drawText(text: string, transform: Mat33, style: TextStyle): void;
     drawImage(image: RenderableImage): void;
     private clipLevels;
-    startObject(boundingBox: Rect2, clip: boolean): void;
+    startObject(boundingBox: Rect2, clip?: boolean): void;
     endObject(): void;
     drawPoints(...points: Point2[]): void;
     isTooSmallToRender(rect: Rect2): boolean;

package/dist/src/rendering/renderers/CanvasRenderer.js

@@ -1,5 +1,6 @@
 import Color4 from '../../Color4';
 import TextComponent from '../../components/TextComponent';
+import Path from '../../math/Path';
 import { Vec2 } from '../../math/Vec2';
 import AbstractRenderer from './AbstractRenderer';
 export default class CanvasRenderer extends AbstractRenderer {
@@ -8,6 +9,7 @@ export default class CanvasRenderer extends AbstractRenderer {
         this.ctx = ctx;
         this.ignoreObjectsAboveLevel = null;
         this.ignoringObject = false;
+        this.currentObjectBBox = null;
         this.clipLevels = [];
         this.setDraftMode(false);
     }
@@ -43,8 +45,8 @@ export default class CanvasRenderer extends AbstractRenderer {
         }
         else {
             this.minSquareCurveApproxDist = 0.5;
-            this.minRenderSizeBothDimens = 0.3;
-            this.minRenderSizeAnyDimen = 1e-5;
+            this.minRenderSizeBothDimens = 0.2;
+            this.minRenderSizeAnyDimen = 1e-6;
         }
     }
     displaySize() {
@@ -106,9 +108,15 @@ export default class CanvasRenderer extends AbstractRenderer {
         }
     }
     drawPath(path) {
+        var _a;
         if (this.ignoringObject) {
             return;
         }
+        // If part of a huge object, it might be worth trimming the path
+        if ((_a = this.currentObjectBBox) === null || _a === void 0 ? void 0 : _a.containsRect(this.getViewport().visibleRect)) {
+            // Try to trim/remove parts of the path outside of the bounding box.
+            path = Path.visualEquivalent(path, this.getViewport().visibleRect);
+        }
         super.drawPath(path);
     }
     drawText(text, transform, style) {
@@ -140,6 +148,7 @@ export default class CanvasRenderer extends AbstractRenderer {
             this.ignoringObject = true;
         }
         super.startObject(boundingBox);
+        this.currentObjectBBox = boundingBox;
         if (!this.ignoringObject && clip) {
             this.clipLevels.push(this.objectLevel);
             this.ctx.save();
@@ -158,6 +167,7 @@ export default class CanvasRenderer extends AbstractRenderer {
                 this.clipLevels.pop();
             }
         }
+        this.currentObjectBBox = null;
         super.endObject();
         // If exiting an object with a too-small-to-draw bounding box,
         if (this.ignoreObjectsAboveLevel !== null && this.getNestingLevel() <= this.ignoreObjectsAboveLevel) {

package/dist/src/rendering/renderers/SVGRenderer.d.ts

@@ -28,7 +28,7 @@ export default class SVGRenderer extends AbstractRenderer {
     drawText(text: string, transform: Mat33, style: TextStyle): void;
     drawImage(image: RenderableImage): void;
     startObject(boundingBox: Rect2): void;
-    endObject(loaderData?: LoadSaveDataTable): void;
+    endObject(loaderData?: LoadSaveDataTable, elemClassNames?: string[]): void;
     private unimplementedMessage;
     protected beginPath(_startPoint: Point2): void;
     protected endPath(_style: RenderingStyle): void;