js-draw 1.7.2 → 1.9.0

package/dist/cjs/rendering/Display.js

@@ -34,6 +34,7 @@ class Display {
         this.editor = editor;
         this.parent = parent;
         this.textRerenderOutput = null;
+        this.devicePixelRatio = window.devicePixelRatio ?? 1;
         /**
          * @returns the color at the given point on the dry ink renderer, or `null` if `screenPos`
          * 	is not on the display.
@@ -118,16 +119,29 @@ class Display {
             this.parent.appendChild(wetInkCanvas);
         }
         this.resizeSurfacesCallback = () => {
+            const expectedWidth = (canvas) => {
+                return Math.ceil(canvas.clientWidth * this.devicePixelRatio);
+            };
+            const expectedHeight = (canvas) => {
+                return Math.ceil(canvas.clientHeight * this.devicePixelRatio);
+            };
             const hasSizeMismatch = (canvas) => {
-                return canvas.clientHeight !== canvas.height || canvas.clientWidth !== canvas.width;
+                return expectedHeight(canvas) !== canvas.height || expectedWidth(canvas) !== canvas.width;
             };
             // Ensure that the drawing surfaces sizes match the
             // canvas' sizes to prevent stretching.
             if (hasSizeMismatch(dryInkCanvas) || hasSizeMismatch(wetInkCanvas)) {
-                dryInkCanvas.width = dryInkCanvas.clientWidth;
-                dryInkCanvas.height = dryInkCanvas.clientHeight;
-                wetInkCanvas.width = wetInkCanvas.clientWidth;
-                wetInkCanvas.height = wetInkCanvas.clientHeight;
+                dryInkCanvas.width = expectedWidth(dryInkCanvas);
+                dryInkCanvas.height = expectedHeight(dryInkCanvas);
+                wetInkCanvas.width = expectedWidth(wetInkCanvas);
+                wetInkCanvas.height = expectedHeight(wetInkCanvas);
+                // Ensure correct drawing operations on high-resolution screens.
+                // See
+                // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas#scaling_for_high_resolution_displays
+                wetInkCtx.resetTransform();
+                dryInkCtx.resetTransform();
+                dryInkCtx.scale(this.devicePixelRatio, this.devicePixelRatio);
+                wetInkCtx.scale(this.devicePixelRatio, this.devicePixelRatio);
                 this.editor.notifier.dispatch(types_1.EditorEventType.DisplayResized, {
                     kind: types_1.EditorEventType.DisplayResized,
                     newSize: math_1.Vec2.of(this.width, this.height),
@@ -136,7 +150,10 @@ class Display {
         };
         this.resizeSurfacesCallback();
         this.flattenCallback = () => {
+            dryInkCtx.save();
+            dryInkCtx.resetTransform();
             dryInkCtx.drawImage(wetInkCanvas, 0, 0);
+            dryInkCtx.restore();
         };
         this.getColorAt = (screenPos) => {
             const pixel = dryInkCtx.getImageData(screenPos.x, screenPos.y, 1, 1);
@@ -162,6 +179,23 @@ class Display {
         textRendererOutputContainer.replaceChildren(rerenderButton, this.textRerenderOutput);
         this.editor.createHTMLOverlay(textRendererOutputContainer);
     }
+    /**
+     * Sets the device-pixel-ratio.
+     *
+     * Intended for debugging. Users do not need to call this manually.
+     *
+     * @internal
+     */
+    setDevicePixelRatio(dpr) {
+        const minDpr = 0.001;
+        const maxDpr = 10;
+        if (isFinite(dpr) && dpr >= minDpr && dpr <= maxDpr && dpr !== this.devicePixelRatio) {
+            this.devicePixelRatio = dpr;
+            this.resizeSurfacesCallback?.();
+            return this.editor.queueRerender();
+        }
+        return undefined;
+    }
     /**
      * Rerenders the text-based display.
      * The text-based display is intended for screen readers and can be navigated to by pressing `tab`.

package/dist/cjs/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/cjs/rendering/RenderablePathSpec.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.visualEquivalent = exports.pathToRenderable = exports.pathFromRenderable = void 0;
+exports.visualEquivalent = exports.simplifyPathToFullScreenOrEmpty = exports.pathToRenderable = exports.pathFromRenderable = void 0;
 const math_1 = require("@js-draw/math");
 /** Converts a renderable path (a path with a `startPoint`, `commands`, and `style`). */
 const pathFromRenderable = (renderable) => {
@@ -20,33 +20,90 @@ const pathToRenderable = (path, style) => {
 };
 exports.pathToRenderable = pathToRenderable;
 /**
- * @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
  */
-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
+ */
+const simplifyPathToFullScreenOrEmpty = (renderablePath, visibleRect, options = { fastCheck: true, expensiveCheck: true }) => {
     const path = (0, exports.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 (0, exports.pathToRenderable)(math_1.Path.fromRect(visibleRect), { fill: renderablePath.style.stroke.color });
+                return {
+                    rectangle: visibleRect,
+                    path: (0, exports.pathToRenderable)(math_1.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: (0, exports.pathToRenderable)(math_1.Path.fromRect(visibleRect), { fill: renderablePath.style.stroke.color }),
+                rectangle: visibleRect,
+                fullScreen: true,
+            };
+        }
+        else if (signedDist > visibleRect.maxDimension / 2 + margin) {
+            return {
+                path: (0, exports.pathToRenderable)(math_1.Path.empty, { fill: math_1.Color4.transparent }),
+                rectangle: math_1.Rect2.empty,
+                fullScreen: false,
+            };
+        }
+    }
+    return null;
+};
+exports.simplifyPathToFullScreenOrEmpty = simplifyPathToFullScreenOrEmpty;
+/**
+ * @returns a Path that, when rendered, looks roughly equivalent to the given path.
+ */
+const visualEquivalent = (renderablePath, visibleRect) => {
+    const path = (0, exports.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 = (0, exports.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(math_1.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;
@@ -81,6 +138,12 @@ const visualEquivalent = (renderablePath, visibleRect) => {
         }
         startPoint = endPoint;
     }
-    return (0, exports.pathToRenderable)(new math_1.Path(path.startPoint, parts), renderablePath.style);
+    const newPath = new math_1.Path(path.startPoint, parts);
+    const newStyle = renderablePath.style;
+    rectangleSimplification = (0, exports.simplifyPathToFullScreenOrEmpty)(renderablePath, visibleRect, { fastCheck: false, expensiveCheck: true, });
+    if (rectangleSimplification) {
+        return rectangleSimplification.path;
+    }
+    return (0, exports.pathToRenderable)(newPath, newStyle);
 };
 exports.visualEquivalent = visualEquivalent;

package/dist/cjs/rendering/caching/CacheRecord.js

@@ -49,9 +49,11 @@ 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()));
     }
 }
 exports.default = CacheRecord;

package/dist/cjs/rendering/caching/CacheRecordManager.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CacheRecordManager = void 0;
 const CacheRecord_1 = __importDefault(require("./CacheRecord"));
-const debugMode = false;
 class CacheRecordManager {
     constructor(cacheProps) {
         // Fixed-size array: Cache blocks are assigned indicies into [cachedCanvases].
@@ -22,19 +21,19 @@ class CacheRecordManager {
             const record = new CacheRecord_1.default(onDealloc, this.cacheState);
             record.setRenderingRegion(drawTo);
             this.cacheRecords.push(record);
-            if (debugMode) {
+            if (this.cacheState.debugMode) {
                 console.log('[Cache] Cache spaces used: ', this.cacheRecords.length, ' of ', this.maxCanvases);
             }
             return record;
         }
         else {
             const lru = this.getLeastRecentlyUsedRecord();
-            if (debugMode) {
+            if (this.cacheState.debugMode) {
                 console.log('[Cache] Re-alloc. Times allocated: ', lru.allocCount, '\nLast used cycle: ', lru.getLastUsedCycle(), '\nCurrent cycle: ', this.cacheState.currentRenderingCycle);
             }
             lru.realloc(onDealloc);
             lru.setRenderingRegion(drawTo);
-            if (debugMode) {
+            if (this.cacheState.debugMode) {
                 console.log('[Cache] Now re-alloc\'d. Last used cycle: ', lru.getLastUsedCycle());
                 console.assert(lru['cacheState'] === this.cacheState, '[Cache] Unequal cache states! cacheState should be a shared object!');
             }

package/dist/cjs/rendering/caching/RenderingCache.d.ts

@@ -9,4 +9,5 @@ export default class RenderingCache {
     constructor(cacheProps: CacheProps);
     render(screenRenderer: AbstractRenderer, image: ImageNode, viewport: Viewport): void;
     getDebugInfo(): string;
+    setIsDebugMode(debugMode: boolean): void;
 }

package/dist/cjs/rendering/caching/RenderingCache.js

@@ -13,6 +13,7 @@ class RenderingCache {
             props: cacheProps,
             currentRenderingCycle: 0,
             recordManager: this.recordManager,
+            debugMode: false,
         };
         this.recordManager.setSharedState(this.sharedState);
     }
@@ -49,5 +50,8 @@ class RenderingCache {
     getDebugInfo() {
         return this.recordManager.getDebugInfo();
     }
+    setIsDebugMode(debugMode) {
+        this.sharedState.debugMode = debugMode;
+    }
 }
 exports.default = RenderingCache;

package/dist/cjs/rendering/caching/RenderingCacheNode.js

@@ -5,8 +5,6 @@ const EditorImage_1 = require("../../image/EditorImage");
 const math_1 = require("@js-draw/math");
 // 3x3 divisions for each node.
 const cacheDivisionSize = 3;
-// True: Show rendering updates.
-const debugMode = false;
 class RenderingCacheNode {
     constructor(region, cacheState) {
         this.region = region;
@@ -163,8 +161,8 @@ class RenderingCacheNode {
             items.forEach(item => item.render(screenRenderer, viewport.visibleRect));
             return;
         }
-        if (debugMode) {
-            screenRenderer.drawRect(this.region, 0.5 * viewport.getSizeOfPixelOnCanvas(), { fill: math_1.Color4.yellow });
+        if (this.cacheState.debugMode) {
+            screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: math_1.Color4.yellow });
         }
         // Could we render direclty from [this] or do we need to recurse?
         const couldRender = this.renderingWouldBeHighEnoughResolution(viewport);
@@ -199,7 +197,9 @@ class RenderingCacheNode {
                 }
                 let leafApproxRenderTime = 0;
                 for (const leaf of leavesByIds) {
-                    leafApproxRenderTime += leaf.getContent().getProportionalRenderingTime();
+                    if (!tooSmallToRender(leaf.getBBox())) {
+                        leafApproxRenderTime += leaf.getContent().getProportionalRenderingTime();
+                    }
                 }
                 // Is it worth it to render the items?
                 if (leafApproxRenderTime > this.cacheState.props.minProportionalRenderTimePerCache) {
@@ -235,26 +235,30 @@ class RenderingCacheNode {
                                     this.renderedMaxZIndex = zIndex;
                                 }
                             }
-                            if (debugMode) {
-                                screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: math_1.Color4.clay });
+                            if (this.cacheState.debugMode) {
+                                // Clay for adding new elements
+                                screenRenderer.drawRect(this.region, 2 * viewport.getSizeOfPixelOnCanvas(), { fill: math_1.Color4.clay });
                             }
                         }
                     }
-                    else if (debugMode) {
+                    else if (this.cacheState.debugMode) {
                         console.log('Decided on a full re-render. Reason: At least one of the following is false:', '\n leafIds.length > this.renderedIds.length: ', leafIds.length > this.renderedIds.length, '\n this.allRenderedIdsIn(leafIds): ', this.allRenderedIdsIn(leafIds), '\n this.renderedMaxZIndex !== null: ', this.renderedMaxZIndex !== null, '\n\nthis.rerenderedIds: ', this.renderedIds, ', leafIds: ', leafIds);
                     }
                     if (fullRerenderNeeded) {
                         thisRenderer = this.cachedRenderer.startRender();
                         thisRenderer.clear();
                         this.renderedMaxZIndex = null;
-                        for (const leaf of leaves) {
+                        const startIndex = (0, EditorImage_1.computeFirstIndexToRender)(leaves, this.region);
+                        for (let i = startIndex; i < leaves.length; i++) {
+                            const leaf = leaves[i];
                             const content = leaf.getContent();
                             this.renderedMaxZIndex ??= content.getZIndex();
                             this.renderedMaxZIndex = Math.max(this.renderedMaxZIndex, content.getZIndex());
                             leaf.render(thisRenderer, this.region);
                         }
-                        if (debugMode) {
-                            screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: math_1.Color4.red });
+                        if (this.cacheState.debugMode) {
+                            // Red for full rerender
+                            screenRenderer.drawRect(this.region, 3 * viewport.getSizeOfPixelOnCanvas(), { fill: math_1.Color4.red });
                         }
                     }
                     this.renderedIds = leafIds;
@@ -271,6 +275,10 @@ class RenderingCacheNode {
                         leaf.render(screenRenderer, this.region.intersection(viewport.visibleRect));
                     }
                     screenRenderer.endObject();
+                    if (this.cacheState.debugMode) {
+                        // Green for no cache needed render
+                        screenRenderer.drawRect(this.region, 2 * viewport.getSizeOfPixelOnCanvas(), { fill: math_1.Color4.green });
+                    }
                 }
             }
             else {

package/dist/cjs/rendering/caching/types.d.ts

@@ -16,4 +16,5 @@ export interface CacheState {
     currentRenderingCycle: number;
     props: CacheProps;
     recordManager: CacheRecordManager;
+    debugMode: boolean;
 }

package/dist/cjs/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/cjs/rendering/renderers/AbstractRenderer.js

@@ -17,8 +17,11 @@ 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() {
@@ -160,13 +163,19 @@ class AbstractRenderer {
     getSizeOfCanvasPixelOnScreen() {
         return this.getCanvasToScreenTransform().transformVec3(math_1.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;
     }
 }
 exports.default = AbstractRenderer;

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

@@ -82,7 +82,10 @@ class CanvasRenderer extends AbstractRenderer_1.default {
         return math_1.Vec2.of(this.ctx.canvas.clientWidth, this.ctx.canvas.clientHeight);
     }
     clear() {
+        this.ctx.save();
+        this.ctx.resetTransform();
         this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+        this.ctx.restore();
     }
     beginPath(startPoint) {
         startPoint = this.canvasToScreen(startPoint);
@@ -149,7 +152,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 +192,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);