js-draw 1.7.2 → 1.8.0

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

@@ -149,7 +149,7 @@ class CanvasRenderer extends AbstractRenderer_1.default {
             return;
         }
         // If part of a huge object, it might be worth trimming the path
-        const visibleRect = this.getViewport().visibleRect;
+        const visibleRect = this.getVisibleRect();
         if (this.currentObjectBBox?.containsRect(visibleRect)) {
             // Try to trim/remove parts of the path outside of the bounding box.
             path = (0, RenderablePathSpec_1.visualEquivalent)(path, visibleRect);
@@ -189,7 +189,7 @@ class CanvasRenderer extends AbstractRenderer_1.default {
         if (!this.ignoringObject && clip) {
             // Don't clip if it would only remove content already trimmed by
             // the edge of the screen.
-            const clippedIsOutsideScreen = boundingBox.containsRect(this.getViewport().visibleRect);
+            const clippedIsOutsideScreen = boundingBox.containsRect(this.getVisibleRect());
             if (!clippedIsOutsideScreen) {
                 this.clipLevels.push(this.objectLevel);
                 this.ctx.save();

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

@@ -59,16 +59,6 @@ export default class SVGRenderer extends AbstractRenderer {
     drawPoints(...points: Point2[]): void;
     drawSVGElem(elem: SVGElement): void;
     isTooSmallToRender(_rect: Rect2): boolean;
-    private visibleRectOverride;
-    /**
-     * Overrides the visible region returned by `getVisibleRect`.
-     *
-     * This is useful when the `viewport`'s transform has been modified,
-     * for example, to compensate for storing part of the image's
-     * transformation in an SVG property.
-     */
-    private overrideVisibleRect;
-    getVisibleRect(): Rect2;
     /**
      * Creates a new SVG element and `SVGRenerer` with `width`, `height`, `viewBox`,
      * and other metadata attributes set for the given `Viewport`.

package/dist/cjs/rendering/renderers/SVGRenderer.js

@@ -42,7 +42,6 @@ class SVGRenderer extends AbstractRenderer_1.default {
         this.textContainer = null;
         this.textContainerTransform = null;
         this.textParentStyle = defaultTextStyle;
-        this.visibleRectOverride = null;
         this.clear();
         this.addStyleSheet();
     }
@@ -345,19 +344,6 @@ class SVGRenderer extends AbstractRenderer_1.default {
     isTooSmallToRender(_rect) {
         return false;
     }
-    /**
-     * Overrides the visible region returned by `getVisibleRect`.
-     *
-     * This is useful when the `viewport`'s transform has been modified,
-     * for example, to compensate for storing part of the image's
-     * transformation in an SVG property.
-     */
-    overrideVisibleRect(newRect) {
-        this.visibleRectOverride = newRect;
-    }
-    getVisibleRect() {
-        return this.visibleRectOverride ?? super.getVisibleRect();
-    }
     /**
      * Creates a new SVG element and `SVGRenerer` with `width`, `height`, `viewBox`,
      * and other metadata attributes set for the given `Viewport`.

package/dist/cjs/testing/startPinchGesture.d.ts

@@ -0,0 +1,14 @@
+import type Editor from '../Editor';
+import { Point2 } from '@js-draw/math';
+/**
+ * Creates two pointers and sends the touch {@link InputEvtType.PointerDownEvt}s for them.
+ *
+ * Returns an object that allows continuing or ending the gesture.
+ *
+ * `initialRotation` should be in radians.
+ */
+declare const startPinchGesture: (editor: Editor, center: Point2, initialDistance: number, initialRotation: number) => {
+    update(center: Point2, distance: number, rotation: number): void;
+    end(): void;
+};
+export default startPinchGesture;

package/dist/cjs/testing/startPinchGesture.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const math_1 = require("@js-draw/math");
+const sendTouchEvent_1 = __importDefault(require("./sendTouchEvent"));
+const inputEvents_1 = require("../inputEvents");
+/**
+ * Creates two pointers and sends the touch {@link InputEvtType.PointerDownEvt}s for them.
+ *
+ * Returns an object that allows continuing or ending the gesture.
+ *
+ * `initialRotation` should be in radians.
+ */
+const startPinchGesture = (editor, center, initialDistance, initialRotation) => {
+    const computeTouchPoints = (center, distance, rotation) => {
+        const halfDisplacement = math_1.Mat33.zRotation(rotation).transformVec2(math_1.Vec2.of(0, distance / 2));
+        const point1 = center.plus(halfDisplacement);
+        const point2 = center.minus(halfDisplacement);
+        return [point1, point2];
+    };
+    let [touchPoint1, touchPoint2] = computeTouchPoints(center, initialDistance, initialRotation);
+    let firstPointer = (0, sendTouchEvent_1.default)(editor, inputEvents_1.InputEvtType.PointerDownEvt, touchPoint1);
+    let secondPointer = (0, sendTouchEvent_1.default)(editor, inputEvents_1.InputEvtType.PointerDownEvt, touchPoint2, [firstPointer]);
+    return {
+        update(center, distance, rotation) {
+            const eventType = inputEvents_1.InputEvtType.PointerMoveEvt;
+            const [newPoint1, newPoint2] = computeTouchPoints(center, distance, rotation);
+            touchPoint1 = newPoint1;
+            touchPoint2 = newPoint2;
+            firstPointer = (0, sendTouchEvent_1.default)(editor, eventType, newPoint1, [secondPointer]);
+            secondPointer = (0, sendTouchEvent_1.default)(editor, eventType, newPoint2, [firstPointer]);
+        },
+        end() {
+            (0, sendTouchEvent_1.default)(editor, inputEvents_1.InputEvtType.PointerUpEvt, touchPoint1, [secondPointer]);
+            (0, sendTouchEvent_1.default)(editor, inputEvents_1.InputEvtType.PointerUpEvt, touchPoint2);
+        },
+    };
+};
+exports.default = startPinchGesture;

package/dist/cjs/tools/PanZoom.d.ts

@@ -21,6 +21,9 @@ export default class PanZoom extends BaseTool {
     private editor;
     private mode;
     private transform;
+    private readonly initialRotationSnapAngle;
+    private readonly afterRotationStartSnapAngle;
+    private readonly pinchZoomStartThreshold;
     private startDist;
     private lastDist;
     private lastScreenCenter;
@@ -29,6 +32,7 @@ export default class PanZoom extends BaseTool {
     private initialTouchAngle;
     private initialViewportRotation;
     private isScaling;
+    private isRotating;
     private inertialScroller;
     private velocity;
     constructor(editor: Editor, mode: PanZoomMode, description: string);

package/dist/cjs/tools/PanZoom.js

@@ -71,12 +71,19 @@ class PanZoom extends BaseTool_1.default {
         this.editor = editor;
         this.mode = mode;
         this.transform = null;
+        // Constants
+        // initialRotationSnapAngle is larger than afterRotationStartSnapAngle to
+        // make it more difficult to start rotating (and easier to continue rotating).
+        this.initialRotationSnapAngle = 0.22; // radians
+        this.afterRotationStartSnapAngle = 0.07; // radians
+        this.pinchZoomStartThreshold = 1.08; // scale factor
         this.lastPointerDownTimestamp = 0;
         this.initialTouchAngle = 0;
         this.initialViewportRotation = 0;
         // Set to `true` only when scaling has started (if two fingers are down and have moved
         // far enough).
         this.isScaling = false;
+        this.isRotating = false;
         this.inertialScroller = null;
         this.velocity = null;
     }
@@ -118,6 +125,9 @@ class PanZoom extends BaseTool_1.default {
             this.initialTouchAngle = angle;
             this.initialViewportRotation = this.editor.viewport.getRotationAngle();
             this.isScaling = false;
+            // We're initially rotated if `initialViewportRotation` isn't near a multiple of pi/2.
+            // In other words, if sin(2 initialViewportRotation) is near zero.
+            this.isRotating = Math.abs(Math.sin(this.initialViewportRotation * 2)) > 1e-3;
             handlingGesture = true;
         }
         else if (pointers.length === 1 && ((this.mode & PanZoomMode.OneFingerTouchGestures && allAreTouch)
@@ -174,7 +184,9 @@ class PanZoom extends BaseTool_1.default {
         const roundedFullRotation = Math.round(fullRotation / snapToMultipleOf) * snapToMultipleOf;
         // The maximum angle for which we snap the given angle to a multiple of
         // `snapToMultipleOf`.
-        const maxSnapAngle = 0.07;
+        // Use a smaller snap angle if already rotated (to avoid pinch zoom gestures from
+        // starting rotation).
+        const maxSnapAngle = this.isRotating ? this.afterRotationStartSnapAngle : this.initialRotationSnapAngle;
         // Snap the rotation
         if (Math.abs(fullRotation - roundedFullRotation) < maxSnapAngle) {
             fullRotation = roundedFullRotation;
@@ -197,6 +209,11 @@ class PanZoom extends BaseTool_1.default {
         else {
             deltaRotation = this.toSnappedRotationDelta(angle);
         }
+        // If any rotation, make a note of this (affects rotation snap
+        // angles).
+        if (Math.abs(deltaRotation) > 1e-8) {
+            this.isRotating = true;
+        }
         this.updateVelocity(screenCenter);
         let scaleFactor = 1;
         if (this.isScaling) {
@@ -205,7 +222,9 @@ class PanZoom extends BaseTool_1.default {
         else {
             const initialScaleFactor = dist / this.startDist;
             // Only start scaling if scaling done so far exceeds some threshold.
-            if (initialScaleFactor > 1.05 || initialScaleFactor < 0.95) {
+            const upperBound = this.pinchZoomStartThreshold;
+            const lowerBound = 1 / this.pinchZoomStartThreshold;
+            if (initialScaleFactor > upperBound || initialScaleFactor < lowerBound) {
                 scaleFactor = initialScaleFactor;
                 this.isScaling = true;
             }

package/dist/cjs/version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    number: '1.7.2',
+    number: '1.8.0',
 };

package/dist/mjs/EventDispatcher.mjs

@@ -1,4 +1,5 @@
-// Code shared with Joplin (js-draw was originally intended to be part of Joplin).
+// Code shared with Joplin (from when it was MIT licensed)
+// (js-draw was originally intended to be part of Joplin).
 /**
  * Handles notifying listeners of events.
  *

package/dist/mjs/Viewport.d.ts

@@ -56,6 +56,8 @@ export declare class Viewport {
     /**
      * @returns the angle of the canvas in radians.
      * This is the angle by which the canvas is rotated relative to the screen.
+     *
+     * Returns an angle in the range $[-\pi, \pi]$ (the same range as {@link Vec3.angle}).
      */
     getRotationAngle(): number;
     /**

package/dist/mjs/Viewport.mjs

@@ -114,6 +114,8 @@ export class Viewport {
     /**
      * @returns the angle of the canvas in radians.
      * This is the angle by which the canvas is rotated relative to the screen.
+     *
+     * Returns an angle in the range $[-\pi, \pi]$ (the same range as {@link Vec3.angle}).
      */
     getRotationAngle() {
         return this.transform.transformVec3(Vec3.unitX).angle();

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

@@ -77,6 +77,15 @@ export default abstract class AbstractComponent {
      * {@link EditorImage}.
      */
     getSizingMode(): ComponentSizingMode;
+    /**
+     * **Optimization**
+     *
+     * Should return `true` if this component covers the entire `visibleRect`
+     * and would prevent anything below this component from being visible.
+     *
+     * Should return `false` otherwise.
+     */
+    occludesEverythingBelowWhenRenderedInRect(_visibleRect: Rect2): boolean;
     /** Called when this component is added to the given image. */
     onAddToImage(_image: EditorImage): void;
     onRemoveFromImage(): void;

package/dist/mjs/components/AbstractComponent.mjs

@@ -102,6 +102,17 @@ class AbstractComponent {
     getSizingMode() {
         return ComponentSizingMode.BoundingBox;
     }
+    /**
+     * **Optimization**
+     *
+     * Should return `true` if this component covers the entire `visibleRect`
+     * and would prevent anything below this component from being visible.
+     *
+     * Should return `false` otherwise.
+     */
+    occludesEverythingBelowWhenRenderedInRect(_visibleRect) {
+        return false;
+    }
     /** Called when this component is added to the given image. */
     onAddToImage(_image) { }
     onRemoveFromImage() { }

package/dist/mjs/components/Stroke.d.ts

@@ -49,6 +49,9 @@ export default class Stroke extends AbstractComponent implements RestyleableComp
     forceStyle(style: ComponentStyle, editor: Editor | null): void;
     intersects(line: LineSegment2): boolean;
     intersectsRect(rect: Rect2): boolean;
+    private simplifiedPath;
+    private computeSimplifiedPathFor;
+    occludesEverythingBelowWhenRenderedInRect(rect: Rect2): boolean;
     render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
     getProportionalRenderingTime(): number;
     private bboxForPart;

package/dist/mjs/components/Stroke.mjs

@@ -2,7 +2,7 @@ import { Path, Rect2 } from '@js-draw/math';
 import  { styleFromJSON, styleToJSON }  from '../rendering/RenderingStyle.mjs';
 import  AbstractComponent  from './AbstractComponent.mjs';
 import  { createRestyleComponentCommand }  from './RestylableComponent.mjs';
-import  { pathFromRenderable, pathToRenderable }  from '../rendering/RenderablePathSpec.mjs';
+import  { pathFromRenderable, pathToRenderable, simplifyPathToFullScreenOrEmpty }  from '../rendering/RenderablePathSpec.mjs';
 /**
  * Represents an {@link AbstractComponent} made up of one or more {@link Path}s.
  *
@@ -41,6 +41,9 @@ export default class Stroke extends AbstractComponent {
         // @internal
         // eslint-disable-next-line @typescript-eslint/prefer-as-const
         this.isRestylableComponent = true;
+        // A simplification of the path for a given visibleRect. Intended
+        // to help check for occlusion.
+        this.simplifiedPath = null;
         this.approximateRenderingTime = 0;
         this.parts = [];
         for (const section of parts) {
@@ -166,9 +169,60 @@ export default class Stroke extends AbstractComponent {
         }
         return super.intersectsRect(rect);
     }
+    computeSimplifiedPathFor(visibleRect) {
+        const simplifiedParts = [];
+        let occludes = false;
+        let skipSimplification = false;
+        for (const part of this.parts) {
+            if (skipSimplification
+                // Simplification currently only works for stroked paths
+                || !part.style.stroke
+                // One of the main purposes of this is to check for occlusion.
+                // We can't occlude things if the stroke is partially transparent.
+                || part.style.stroke.color.a < 0.99) {
+                simplifiedParts.push(part);
+                continue;
+            }
+            const mapping = simplifyPathToFullScreenOrEmpty(part, visibleRect);
+            if (mapping) {
+                simplifiedParts.push(mapping.path);
+                if (mapping.fullScreen) {
+                    occludes = true;
+                    skipSimplification = true;
+                }
+            }
+            else {
+                simplifiedParts.push(part);
+            }
+        }
+        return {
+            forVisibleRect: visibleRect,
+            parts: simplifiedParts,
+            occludes,
+        };
+    }
+    occludesEverythingBelowWhenRenderedInRect(rect) {
+        // Can't occlude if doesn't contain.
+        if (!this.getBBox().containsRect(rect)) {
+            return false;
+        }
+        if (!this.simplifiedPath || !this.simplifiedPath.forVisibleRect.eq(rect)) {
+            this.simplifiedPath = this.computeSimplifiedPathFor(rect);
+        }
+        return this.simplifiedPath.occludes;
+    }
     render(canvas, visibleRect) {
         canvas.startObject(this.getBBox());
-        for (const part of this.parts) {
+        // Can we use a cached simplified path for faster rendering?
+        let parts = this.parts;
+        if (visibleRect && this.simplifiedPath?.forVisibleRect?.containsRect(visibleRect)) {
+            parts = this.simplifiedPath.parts;
+        }
+        else {
+            // Save memory
+            this.simplifiedPath = null;
+        }
+        for (const part of parts) {
             const bbox = this.bboxForPart(part.path.bbox, part.style);
             if (visibleRect) {
                 if (!bbox.intersects(visibleRect)) {

package/dist/mjs/image/EditorImage.mjs

@@ -663,12 +663,28 @@ export class ImageNode {
             leaves = this.getLeaves();
         }
         sortLeavesByZIndex(leaves);
-        for (const leaf of leaves) {
+        // If some components hide others (and we're permitted to simplify,
+        // which is true in the case of visibleRect being defined), then only
+        // draw the non-hidden components:
+        let startIndex = 0;
+        if (visibleRect) {
+            for (let i = leaves.length - 1; i >= 1; i--) {
+                if (leaves[i].getContent()?.occludesEverythingBelowWhenRenderedInRect(visibleRect)) {
+                    startIndex = i;
+                    break;
+                }
+            }
+        }
+        for (let i = startIndex; i < leaves.length; i++) {
+            const leaf = leaves[i];
             // Leaves by definition have content
             leaf.getContent().render(renderer, visibleRect);
         }
         // Show debug information
         if (debugMode && visibleRect) {
+            if (startIndex !== 0) {
+                console.log('EditorImage: skipped ', startIndex, 'nodes due to occlusion');
+            }
             this.renderDebugBoundingBoxes(renderer, visibleRect);
         }
     }

package/dist/mjs/rendering/RenderablePathSpec.d.ts

@@ -6,11 +6,29 @@ interface RenderablePathSpec {
     style: RenderingStyle;
     path?: Path;
 }
+interface RenderablePathSpecWithPath extends RenderablePathSpec {
+    path: Path;
+}
 /** Converts a renderable path (a path with a `startPoint`, `commands`, and `style`). */
 export declare const pathFromRenderable: (renderable: RenderablePathSpec) => Path;
-export declare const pathToRenderable: (path: Path, style: RenderingStyle) => RenderablePathSpec;
+export declare const pathToRenderable: (path: Path, style: RenderingStyle) => RenderablePathSpecWithPath;
+interface RectangleSimplificationResult {
+    rectangle: Rect2;
+    path: RenderablePathSpecWithPath;
+    fullScreen: boolean;
+}
+/**
+ * Tries to simplify the given path to a fullscreen rectangle.
+ * Returns `null` on failure.
+ *
+ * @internal
+ */
+export declare const simplifyPathToFullScreenOrEmpty: (renderablePath: RenderablePathSpec, visibleRect: Rect2, options?: {
+    fastCheck: boolean;
+    expensiveCheck: boolean;
+}) => RectangleSimplificationResult | null;
 /**
  * @returns a Path that, when rendered, looks roughly equivalent to the given path.
  */
-export declare const visualEquivalent: (renderablePath: RenderablePathSpec, visibleRect: Rect2) => RenderablePathSpec;
+export declare const visualEquivalent: (renderablePath: RenderablePathSpec, visibleRect: Rect2) => RenderablePathSpecWithPath;
 export default RenderablePathSpec;

package/dist/mjs/rendering/RenderablePathSpec.mjs

@@ -1,4 +1,4 @@
-import { Mat33, Path, PathCommandType } from '@js-draw/math';
+import { Color4, Mat33, Path, PathCommandType, Rect2 } from '@js-draw/math';
 /** Converts a renderable path (a path with a `startPoint`, `commands`, and `style`). */
 export const pathFromRenderable = (renderable) => {
     if (renderable.path) {
@@ -15,33 +15,89 @@ export const pathToRenderable = (path, style) => {
     };
 };
 /**
- * @returns a Path that, when rendered, looks roughly equivalent to the given path.
+ * Fills the optional `path` field in `RenderablePathSpec`
+ * with `path` if not already filled
  */
-export const visualEquivalent = (renderablePath, visibleRect) => {
+const pathIncluded = (renderablePath, path) => {
+    if (renderablePath.path) {
+        return renderablePath;
+    }
+    return {
+        ...renderablePath,
+        path,
+    };
+};
+/**
+ * Tries to simplify the given path to a fullscreen rectangle.
+ * Returns `null` on failure.
+ *
+ * @internal
+ */
+export const simplifyPathToFullScreenOrEmpty = (renderablePath, visibleRect, options = { fastCheck: true, expensiveCheck: true }) => {
     const path = pathFromRenderable(renderablePath);
     const strokeWidth = renderablePath.style.stroke?.width ?? 0;
     const onlyStroked = strokeWidth > 0 && renderablePath.style.fill.a === 0;
     const styledPathBBox = path.bbox.grownBy(strokeWidth);
     // Are we close enough to the path that it fills the entire screen?
-    if (onlyStroked
-        && renderablePath.style.stroke
+    const isOnlyStrokedAndCouldFillScreen = (onlyStroked
         && strokeWidth > visibleRect.maxDimension
-        && styledPathBBox.containsRect(visibleRect)) {
+        && styledPathBBox.containsRect(visibleRect));
+    if (options.fastCheck && isOnlyStrokedAndCouldFillScreen && renderablePath.style.stroke) {
         const strokeRadius = strokeWidth / 2;
+        // Are we completely within the stroke?
         // Do a fast, but with many false negatives, check.
         for (const point of path.startEndPoints()) {
             // If within the strokeRadius of any point
             if (visibleRect.isWithinRadiusOf(strokeRadius, point)) {
-                return pathToRenderable(Path.fromRect(visibleRect), { fill: renderablePath.style.stroke.color });
+                return {
+                    rectangle: visibleRect,
+                    path: pathToRenderable(Path.fromRect(visibleRect), { fill: renderablePath.style.stroke.color }),
+                    fullScreen: true,
+                };
             }
         }
     }
+    // Try filtering again, but with slightly more expensive checks
+    if (options.expensiveCheck &&
+        isOnlyStrokedAndCouldFillScreen && renderablePath.style.stroke
+        && strokeWidth > visibleRect.maxDimension * 3) {
+        const signedDist = path.signedDistance(visibleRect.center, strokeWidth / 2);
+        const margin = strokeWidth / 6;
+        if (signedDist < -visibleRect.maxDimension / 2 - margin) {
+            return {
+                path: pathToRenderable(Path.fromRect(visibleRect), { fill: renderablePath.style.stroke.color }),
+                rectangle: visibleRect,
+                fullScreen: true,
+            };
+        }
+        else if (signedDist > visibleRect.maxDimension / 2 + margin) {
+            return {
+                path: pathToRenderable(Path.empty, { fill: Color4.transparent }),
+                rectangle: Rect2.empty,
+                fullScreen: false,
+            };
+        }
+    }
+    return null;
+};
+/**
+ * @returns a Path that, when rendered, looks roughly equivalent to the given path.
+ */
+export const visualEquivalent = (renderablePath, visibleRect) => {
+    const path = pathFromRenderable(renderablePath);
+    const strokeWidth = renderablePath.style.stroke?.width ?? 0;
+    const onlyStroked = strokeWidth > 0 && renderablePath.style.fill.a === 0;
+    const styledPathBBox = path.bbox.grownBy(strokeWidth);
+    let rectangleSimplification = simplifyPathToFullScreenOrEmpty(renderablePath, visibleRect, { fastCheck: true, expensiveCheck: false, });
+    if (rectangleSimplification) {
+        return rectangleSimplification.path;
+    }
     // Scale the expanded rect --- the visual equivalent is only close for huge strokes.
     const expandedRect = visibleRect.grownBy(strokeWidth)
         .transformedBoundingBox(Mat33.scaling2D(4, visibleRect.center));
     // TODO: Handle simplifying very small paths.
     if (expandedRect.containsRect(styledPathBBox)) {
-        return renderablePath;
+        return pathIncluded(renderablePath, path);
     }
     const parts = [];
     let startPoint = path.startPoint;
@@ -76,5 +132,11 @@ export const visualEquivalent = (renderablePath, visibleRect) => {
         }
         startPoint = endPoint;
     }
-    return pathToRenderable(new Path(path.startPoint, parts), renderablePath.style);
+    const newPath = new Path(path.startPoint, parts);
+    const newStyle = renderablePath.style;
+    rectangleSimplification = simplifyPathToFullScreenOrEmpty(renderablePath, visibleRect, { fastCheck: false, expensiveCheck: true, });
+    if (rectangleSimplification) {
+        return rectangleSimplification.path;
+    }
+    return pathToRenderable(newPath, newStyle);
 };

package/dist/mjs/rendering/caching/CacheRecord.mjs

@@ -47,8 +47,10 @@ export default class CacheRecord {
         return transform;
     }
     setRenderingRegion(drawTo) {
-        this.renderer.setTransform(
-        // Invert to map objects instead of the viewport
-        this.getTransform(drawTo));
+        const transform = this.getTransform(drawTo);
+        this.renderer.setTransform(transform);
+        // The visible region may be slightly larger than where we're actually drawing
+        // to (because of rounding).
+        this.renderer.overrideVisibleRect(drawTo.grownBy(1 / transform.getScaleFactor()));
     }
 }

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

@@ -20,6 +20,11 @@ export default abstract class AbstractRenderer {
     private selfTransform;
     private transformStack;
     protected constructor(viewport: Viewport);
+    /**
+     * this.canvasToScreen, etc. should be used instead of the corresponding
+     * methods on `Viewport`, because the viewport may not accurately reflect
+     * what is rendered.
+     */
     protected getViewport(): Viewport;
     abstract displaySize(): Vec2;
     abstract clear(): void;
@@ -73,5 +78,10 @@ export default abstract class AbstractRenderer {
     getCanvasToScreenTransform(): Mat33;
     canvasToScreen(vec: Vec2): Vec2;
     getSizeOfCanvasPixelOnScreen(): number;
+    private visibleRectOverride;
+    /**
+     * @internal
+     */
+    overrideVisibleRect(rect: Rect2 | null): void;
     getVisibleRect(): Rect2;
 }

package/dist/mjs/rendering/renderers/AbstractRenderer.mjs

@@ -15,8 +15,11 @@ export default class AbstractRenderer {
         this.objectLevel = 0;
         this.currentPaths = null;
     }
-    // this.canvasToScreen, etc. should be used instead of the corresponding
-    // methods on Viewport.
+    /**
+     * this.canvasToScreen, etc. should be used instead of the corresponding
+     * methods on `Viewport`, because the viewport may not accurately reflect
+     * what is rendered.
+     */
     getViewport() { return this.viewport; }
     setDraftMode(_draftMode) { }
     flushPath() {
@@ -158,12 +161,18 @@ export default class AbstractRenderer {
     getSizeOfCanvasPixelOnScreen() {
         return this.getCanvasToScreenTransform().transformVec3(Vec2.unitX).length();
     }
+    /**
+     * @internal
+     */
+    overrideVisibleRect(rect) {
+        this.visibleRectOverride = rect;
+    }
     // Returns the region in canvas space that is visible within the viewport this
     // canvas is rendering to.
     //
     // Note that in some cases this might not be the same as the `visibleRect` given
     // to components in their `render` method.
     getVisibleRect() {
-        return this.viewport.visibleRect;
+        return this.visibleRectOverride ?? this.viewport.visibleRect;
     }
 }

package/dist/mjs/rendering/renderers/CanvasRenderer.mjs

@@ -144,7 +144,7 @@ export default class CanvasRenderer extends AbstractRenderer {
             return;
         }
         // If part of a huge object, it might be worth trimming the path
-        const visibleRect = this.getViewport().visibleRect;
+        const visibleRect = this.getVisibleRect();
         if (this.currentObjectBBox?.containsRect(visibleRect)) {
             // Try to trim/remove parts of the path outside of the bounding box.
             path = visualEquivalent(path, visibleRect);
@@ -184,7 +184,7 @@ export default class CanvasRenderer extends AbstractRenderer {
         if (!this.ignoringObject && clip) {
             // Don't clip if it would only remove content already trimmed by
             // the edge of the screen.
-            const clippedIsOutsideScreen = boundingBox.containsRect(this.getViewport().visibleRect);
+            const clippedIsOutsideScreen = boundingBox.containsRect(this.getVisibleRect());
             if (!clippedIsOutsideScreen) {
                 this.clipLevels.push(this.objectLevel);
                 this.ctx.save();

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

@@ -59,16 +59,6 @@ export default class SVGRenderer extends AbstractRenderer {
     drawPoints(...points: Point2[]): void;
     drawSVGElem(elem: SVGElement): void;
     isTooSmallToRender(_rect: Rect2): boolean;
-    private visibleRectOverride;
-    /**
-     * Overrides the visible region returned by `getVisibleRect`.
-     *
-     * This is useful when the `viewport`'s transform has been modified,
-     * for example, to compensate for storing part of the image's
-     * transformation in an SVG property.
-     */
-    private overrideVisibleRect;
-    getVisibleRect(): Rect2;
     /**
      * Creates a new SVG element and `SVGRenerer` with `width`, `height`, `viewBox`,
      * and other metadata attributes set for the given `Viewport`.