js-draw 1.4.0 → 1.4.1

package/dist/cjs/components/BackgroundComponent.js

@@ -219,6 +219,14 @@ class BackgroundComponent extends AbstractComponent_1.default {
         if (this.backgroundType === BackgroundType.None) {
             return;
         }
+        // If visibleRect is null, components should render everything.
+        // In that case, a full render is being done.
+        const mustRender = !visibleRect;
+        // If this.fillsScreen, the visibleRect needs to be known.
+        // Use the screen rect.
+        if (this.fillsScreen) {
+            visibleRect ??= canvas.getVisibleRect();
+        }
         const clip = this.backgroundType === BackgroundType.Grid;
         const contentBBox = this.getFullBoundingBox(visibleRect);
         canvas.startObject(contentBBox, clip);
@@ -226,13 +234,11 @@ class BackgroundComponent extends AbstractComponent_1.default {
             // 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(contentBBox);
-                if (intersection) {
-                    canvas.fillRect(intersection, this.mainColor);
-                }
+            const intersection = visibleRect?.intersection(contentBBox);
+            if (intersection) {
+                canvas.fillRect(intersection, this.mainColor);
             }
-            else {
+            else if (mustRender) {
                 canvas.fillRect(contentBBox, this.mainColor);
             }
         }

package/dist/cjs/components/SVGGlobalAttributesObject.d.ts

@@ -4,8 +4,8 @@ import AbstractComponent, { ComponentSizingMode } from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 type GlobalAttrsList = Array<[string, string | null]>;
 export default class SVGGlobalAttributesObject extends AbstractComponent {
-    private readonly attrs;
     protected contentBBox: Rect2;
+    private readonly attrs;
     constructor(attrs: GlobalAttrsList);
     render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
     intersects(_lineSegment: LineSegment2): boolean;
@@ -15,6 +15,6 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
     protected createClone(): SVGGlobalAttributesObject;
     description(localization: ImageComponentLocalization): string;
     protected serializeToJSON(): string | null;
-    static deserializeFromString(data: string): AbstractComponent;
+    static deserializeFromString(_data: string): AbstractComponent;
 }
 export {};

package/dist/cjs/components/SVGGlobalAttributesObject.js

@@ -38,10 +38,16 @@ const AbstractComponent_1 = __importStar(require("./AbstractComponent"));
 const componentKind = 'svg-global-attributes';
 // Stores global SVG attributes (e.g. namespace identifiers.)
 class SVGGlobalAttributesObject extends AbstractComponent_1.default {
+    // Does not modify `attrs`
     constructor(attrs) {
         super(componentKind);
-        this.attrs = attrs;
         this.contentBBox = math_1.Rect2.empty;
+        // Already stored/managed in `editor.image`.
+        const attrsManagedByRenderer = ['viewBox', 'width', 'height'];
+        // Only store attributes that aren't managed by other parts of the app.
+        this.attrs = attrs.filter(([attr, _value]) => {
+            return !attrsManagedByRenderer.includes(attr);
+        });
     }
     render(canvas, _visibleRect) {
         if (!(canvas instanceof SVGRenderer_1.default)) {
@@ -75,19 +81,9 @@ class SVGGlobalAttributesObject extends AbstractComponent_1.default {
     serializeToJSON() {
         return JSON.stringify(this.attrs);
     }
-    static deserializeFromString(data) {
-        const json = JSON.parse(data);
-        const attrs = [];
-        const numericAndSpaceContentExp = /^[ \t\n0-9.-eE]+$/;
-        // Don't deserialize all attributes, just those that should be safe.
-        for (const [key, val] of json) {
-            if (key === 'viewBox' || key === 'width' || key === 'height') {
-                if (val && numericAndSpaceContentExp.exec(val)) {
-                    attrs.push([key, val]);
-                }
-            }
-        }
-        return new SVGGlobalAttributesObject(attrs);
+    static deserializeFromString(_data) {
+        // To be safe, don't deserialize any attributes
+        return new SVGGlobalAttributesObject([]);
     }
 }
 exports.default = SVGGlobalAttributesObject;

package/dist/cjs/image/export/adjustExportedSVGSize.d.ts

@@ -0,0 +1,6 @@
+import { Rect2 } from '@js-draw/math';
+export type SVGSizingOptions = {
+    minDimension?: number;
+};
+declare const adjustExportedSVGSize: (svg: SVGElement, exportRect: Rect2, options: SVGSizingOptions) => void;
+export default adjustExportedSVGSize;

package/dist/cjs/image/export/{setExportedSVGSize.js → adjustExportedSVGSize.js}

@@ -2,13 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const math_1 = require("@js-draw/math");
 // @internal
-const setExportedSVGSize = (svg, viewport, options) => {
-    // Just show the main region
-    const rect = viewport.visibleRect;
-    svg.setAttribute('viewBox', [rect.x, rect.y, rect.w, rect.h].map(part => (0, math_1.toRoundedString)(part)).join(' '));
+const adjustExportedSVGSize = (svg, exportRect, options) => {
     // Adjust the width/height as necessary
-    let width = rect.w;
-    let height = rect.h;
+    let width = exportRect.w;
+    let height = exportRect.h;
     if (options?.minDimension && width < options.minDimension) {
         const newWidth = options.minDimension;
         height *= newWidth / (width || 1);
@@ -22,4 +19,4 @@ const setExportedSVGSize = (svg, viewport, options) => {
     svg.setAttribute('width', (0, math_1.toRoundedString)(width));
     svg.setAttribute('height', (0, math_1.toRoundedString)(height));
 };
-exports.default = setExportedSVGSize;
+exports.default = adjustExportedSVGSize;

package/dist/cjs/image/export/editorImageToSVG.d.ts

@@ -1,5 +1,5 @@
 import EditorImage, { PreRenderComponentCallback } from '../EditorImage';
-import { SVGSizingOptions } from './setExportedSVGSize';
+import { SVGSizingOptions } from './adjustExportedSVGSize';
 export interface SVGExportOptions extends SVGSizingOptions {
     sanitize?: boolean;
     minDimension?: number;

package/dist/cjs/image/export/editorImageToSVG.js

@@ -7,25 +7,39 @@ exports.editorImageToSVGAsync = exports.editorImageToSVGSync = void 0;
 const math_1 = require("@js-draw/math");
 const SVGRenderer_1 = __importDefault(require("../../rendering/renderers/SVGRenderer"));
 const SVGLoader_1 = require("../../SVGLoader");
-const setExportedSVGSize_1 = __importDefault(require("./setExportedSVGSize"));
+const adjustExportedSVGSize_1 = __importDefault(require("./adjustExportedSVGSize"));
 const toSVGInternal = (image, renderFunction, options) => {
     const importExportViewport = image.getImportExportViewport().getTemporaryClone();
-    const { element: result, renderer } = SVGRenderer_1.default.fromViewport(importExportViewport, options.sanitize ?? false);
-    const origTransform = importExportViewport.canvasToScreenTransform;
-    // Render with (0,0) at (0,0) — we'll handle translation with
-    // the viewBox property.
-    importExportViewport.resetTransform(math_1.Mat33.identity);
+    // If the rectangle has zero width or height, its size can't be increased
+    // -- set its size to the minimum.
+    if (options?.minDimension) {
+        const originalRect = importExportViewport.visibleRect;
+        let rect = originalRect;
+        if (rect.w <= 0) {
+            rect = new math_1.Rect2(rect.x, rect.y, options.minDimension, rect.h);
+        }
+        if (rect.h <= 0) {
+            rect = new math_1.Rect2(rect.x, rect.y, rect.w, options.minDimension);
+        }
+        if (!rect.eq(originalRect)) {
+            importExportViewport.updateScreenSize(rect.size);
+        }
+    }
+    const { element: result, renderer } = SVGRenderer_1.default.fromViewport(importExportViewport, {
+        sanitize: options.sanitize ?? false,
+        useViewBoxForPositioning: true,
+    });
     // Use a callback rather than async/await to allow this function to create
     // both sync and async render functions
     renderFunction(renderer, () => {
-        importExportViewport.resetTransform(origTransform);
         if (image.getAutoresizeEnabled()) {
             result.classList.add(SVGLoader_1.svgLoaderAutoresizeClassName);
         }
         else {
             result.classList.remove(SVGLoader_1.svgLoaderAutoresizeClassName);
         }
-        (0, setExportedSVGSize_1.default)(result, importExportViewport, options);
+        const exportRect = importExportViewport.visibleRect;
+        (0, adjustExportedSVGSize_1.default)(result, exportRect, options);
         return result;
     });
     return result;

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

@@ -73,4 +73,5 @@ export default abstract class AbstractRenderer {
     getCanvasToScreenTransform(): Mat33;
     canvasToScreen(vec: Vec2): Vec2;
     getSizeOfCanvasPixelOnScreen(): number;
+    getVisibleRect(): Rect2;
 }

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

@@ -160,5 +160,13 @@ class AbstractRenderer {
     getSizeOfCanvasPixelOnScreen() {
         return this.getCanvasToScreenTransform().transformVec3(math_1.Vec2.unitX).length();
     }
+    // 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;
+    }
 }
 exports.default = AbstractRenderer;

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

@@ -6,6 +6,15 @@ import TextRenderingStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 import RenderablePathSpec from '../RenderablePathSpec';
 export declare const renderedStylesheetId = "js-draw-style-sheet";
+type FromViewportOptions = {
+    sanitize?: boolean;
+    /**
+     * Rather than having the top left of the `viewBox` set to (0, 0),
+     * if `useViewBoxForPositioning` is `true`, the `viewBox`'s top left
+     * is based on the top left of the rendering viewport's `visibleRect`.
+     */
+    useViewBoxForPositioning?: boolean;
+};
 /**
  * Renders onto an `SVGElement`.
  *
@@ -50,8 +59,26 @@ export default class SVGRenderer extends AbstractRenderer {
     drawPoints(...points: Point2[]): void;
     drawSVGElem(elem: SVGElement): void;
     isTooSmallToRender(_rect: Rect2): boolean;
-    static fromViewport(viewport: Viewport, sanitize?: 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`.
+     *
+     * If `options` is a `boolean`, it is interpreted as whether to sanitize (not add unknown
+     * SVG entities to) the output.
+     */
+    static fromViewport(viewport: Viewport, options?: FromViewportOptions | boolean): {
         element: SVGSVGElement;
         renderer: SVGRenderer;
     };
 }
+export {};

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

@@ -42,6 +42,7 @@ class SVGRenderer extends AbstractRenderer_1.default {
         this.textContainer = null;
         this.textContainerTransform = null;
         this.textParentStyle = defaultTextStyle;
+        this.visibleRectOverride = null;
         this.clear();
         this.addStyleSheet();
     }
@@ -344,21 +345,71 @@ class SVGRenderer extends AbstractRenderer_1.default {
     isTooSmallToRender(_rect) {
         return false;
     }
-    // Creates a new SVG element and SVGRenerer with attributes set for the given Viewport.
-    static fromViewport(viewport, sanitize = true) {
+    /**
+     * 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`.
+     *
+     * If `options` is a `boolean`, it is interpreted as whether to sanitize (not add unknown
+     * SVG entities to) the output.
+     */
+    static fromViewport(viewport, options = true) {
+        let sanitize;
+        let useViewBoxForPositioning;
+        if (typeof options === 'boolean') {
+            sanitize = options;
+            useViewBoxForPositioning = false;
+        }
+        else {
+            sanitize = options.sanitize ?? true;
+            useViewBoxForPositioning = options.useViewBoxForPositioning ?? false;
+        }
         const svgNameSpace = 'http://www.w3.org/2000/svg';
         const result = document.createElementNS(svgNameSpace, 'svg');
-        const rect = viewport.getScreenRectSize();
+        const screenRectSize = viewport.getScreenRectSize();
+        const visibleRect = viewport.visibleRect;
+        let viewBoxComponents;
+        if (useViewBoxForPositioning) {
+            const exportRect = viewport.visibleRect;
+            viewBoxComponents = [
+                exportRect.x, exportRect.y, exportRect.w, exportRect.h,
+            ];
+            // Replace the viewport with a copy that has a modified transform.
+            // (Avoids modifying the original viewport).
+            viewport = viewport.getTemporaryClone();
+            // TODO: This currently discards any rotation information.
+            // Render with (0,0) at (0,0) -- the translation is handled by the viewBox.
+            viewport.resetTransform(math_1.Mat33.identity);
+        }
+        else {
+            viewBoxComponents = [0, 0, screenRectSize.x, screenRectSize.y];
+        }
         // rect.x -> size of rect in x direction, rect.y -> size of rect in y direction.
-        result.setAttribute('viewBox', [0, 0, rect.x, rect.y].map(part => (0, math_1.toRoundedString)(part)).join(' '));
-        result.setAttribute('width', (0, math_1.toRoundedString)(rect.x));
-        result.setAttribute('height', (0, math_1.toRoundedString)(rect.y));
+        result.setAttribute('viewBox', viewBoxComponents.map(part => (0, math_1.toRoundedString)(part)).join(' '));
+        result.setAttribute('width', (0, math_1.toRoundedString)(screenRectSize.x));
+        result.setAttribute('height', (0, math_1.toRoundedString)(screenRectSize.y));
         // Ensure the image can be identified as an SVG if downloaded.
         // See https://jwatt.org/svg/authoring/
         result.setAttribute('version', '1.1');
         result.setAttribute('baseProfile', 'full');
         result.setAttribute('xmlns', svgNameSpace);
-        return { element: result, renderer: new SVGRenderer(result, viewport, sanitize) };
+        const renderer = new SVGRenderer(result, viewport, sanitize);
+        if (!visibleRect.eq(viewport.visibleRect)) {
+            renderer.overrideVisibleRect(visibleRect);
+        }
+        return { element: result, renderer };
     }
 }
 exports.default = SVGRenderer;

package/dist/cjs/version.js

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

package/dist/mjs/components/BackgroundComponent.mjs

@@ -190,6 +190,14 @@ export default class BackgroundComponent extends AbstractComponent {
         if (this.backgroundType === BackgroundType.None) {
             return;
         }
+        // If visibleRect is null, components should render everything.
+        // In that case, a full render is being done.
+        const mustRender = !visibleRect;
+        // If this.fillsScreen, the visibleRect needs to be known.
+        // Use the screen rect.
+        if (this.fillsScreen) {
+            visibleRect ??= canvas.getVisibleRect();
+        }
         const clip = this.backgroundType === BackgroundType.Grid;
         const contentBBox = this.getFullBoundingBox(visibleRect);
         canvas.startObject(contentBBox, clip);
@@ -197,13 +205,11 @@ export default class BackgroundComponent extends AbstractComponent {
             // 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(contentBBox);
-                if (intersection) {
-                    canvas.fillRect(intersection, this.mainColor);
-                }
+            const intersection = visibleRect?.intersection(contentBBox);
+            if (intersection) {
+                canvas.fillRect(intersection, this.mainColor);
             }
-            else {
+            else if (mustRender) {
                 canvas.fillRect(contentBBox, this.mainColor);
             }
         }

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

@@ -4,8 +4,8 @@ import AbstractComponent, { ComponentSizingMode } from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 type GlobalAttrsList = Array<[string, string | null]>;
 export default class SVGGlobalAttributesObject extends AbstractComponent {
-    private readonly attrs;
     protected contentBBox: Rect2;
+    private readonly attrs;
     constructor(attrs: GlobalAttrsList);
     render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
     intersects(_lineSegment: LineSegment2): boolean;
@@ -15,6 +15,6 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
     protected createClone(): SVGGlobalAttributesObject;
     description(localization: ImageComponentLocalization): string;
     protected serializeToJSON(): string | null;
-    static deserializeFromString(data: string): AbstractComponent;
+    static deserializeFromString(_data: string): AbstractComponent;
 }
 export {};

package/dist/mjs/components/SVGGlobalAttributesObject.mjs

@@ -10,10 +10,16 @@ import  AbstractComponent, { ComponentSizingMode }  from './AbstractComponent.mj
 const componentKind = 'svg-global-attributes';
 // Stores global SVG attributes (e.g. namespace identifiers.)
 export default class SVGGlobalAttributesObject extends AbstractComponent {
+    // Does not modify `attrs`
     constructor(attrs) {
         super(componentKind);
-        this.attrs = attrs;
         this.contentBBox = Rect2.empty;
+        // Already stored/managed in `editor.image`.
+        const attrsManagedByRenderer = ['viewBox', 'width', 'height'];
+        // Only store attributes that aren't managed by other parts of the app.
+        this.attrs = attrs.filter(([attr, _value]) => {
+            return !attrsManagedByRenderer.includes(attr);
+        });
     }
     render(canvas, _visibleRect) {
         if (!(canvas instanceof SVGRenderer)) {
@@ -47,19 +53,9 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
     serializeToJSON() {
         return JSON.stringify(this.attrs);
     }
-    static deserializeFromString(data) {
-        const json = JSON.parse(data);
-        const attrs = [];
-        const numericAndSpaceContentExp = /^[ \t\n0-9.-eE]+$/;
-        // Don't deserialize all attributes, just those that should be safe.
-        for (const [key, val] of json) {
-            if (key === 'viewBox' || key === 'width' || key === 'height') {
-                if (val && numericAndSpaceContentExp.exec(val)) {
-                    attrs.push([key, val]);
-                }
-            }
-        }
-        return new SVGGlobalAttributesObject(attrs);
+    static deserializeFromString(_data) {
+        // To be safe, don't deserialize any attributes
+        return new SVGGlobalAttributesObject([]);
     }
 }
 AbstractComponent.registerComponent(componentKind, SVGGlobalAttributesObject.deserializeFromString);

package/dist/mjs/image/export/adjustExportedSVGSize.d.ts

@@ -0,0 +1,6 @@
+import { Rect2 } from '@js-draw/math';
+export type SVGSizingOptions = {
+    minDimension?: number;
+};
+declare const adjustExportedSVGSize: (svg: SVGElement, exportRect: Rect2, options: SVGSizingOptions) => void;
+export default adjustExportedSVGSize;

package/dist/mjs/image/export/{setExportedSVGSize.mjs → adjustExportedSVGSize.mjs}

@@ -1,12 +1,9 @@
 import { toRoundedString } from '@js-draw/math';
 // @internal
-const setExportedSVGSize = (svg, viewport, options) => {
-    // Just show the main region
-    const rect = viewport.visibleRect;
-    svg.setAttribute('viewBox', [rect.x, rect.y, rect.w, rect.h].map(part => toRoundedString(part)).join(' '));
+const adjustExportedSVGSize = (svg, exportRect, options) => {
     // Adjust the width/height as necessary
-    let width = rect.w;
-    let height = rect.h;
+    let width = exportRect.w;
+    let height = exportRect.h;
     if (options?.minDimension && width < options.minDimension) {
         const newWidth = options.minDimension;
         height *= newWidth / (width || 1);
@@ -20,4 +17,4 @@ const setExportedSVGSize = (svg, viewport, options) => {
     svg.setAttribute('width', toRoundedString(width));
     svg.setAttribute('height', toRoundedString(height));
 };
-export default setExportedSVGSize;
+export default adjustExportedSVGSize;

package/dist/mjs/image/export/editorImageToSVG.d.ts

@@ -1,5 +1,5 @@
 import EditorImage, { PreRenderComponentCallback } from '../EditorImage';
-import { SVGSizingOptions } from './setExportedSVGSize';
+import { SVGSizingOptions } from './adjustExportedSVGSize';
 export interface SVGExportOptions extends SVGSizingOptions {
     sanitize?: boolean;
     minDimension?: number;

package/dist/mjs/image/export/editorImageToSVG.mjs

@@ -1,25 +1,39 @@
-import { Mat33 } from '@js-draw/math';
+import { Rect2 } from '@js-draw/math';
 import  SVGRenderer  from '../../rendering/renderers/SVGRenderer.mjs';
 import  { svgLoaderAutoresizeClassName }  from '../../SVGLoader.mjs';
-import  setExportedSVGSize  from './setExportedSVGSize.mjs';
+import  adjustExportedSVGSize  from './adjustExportedSVGSize.mjs';
 const toSVGInternal = (image, renderFunction, options) => {
     const importExportViewport = image.getImportExportViewport().getTemporaryClone();
-    const { element: result, renderer } = SVGRenderer.fromViewport(importExportViewport, options.sanitize ?? false);
-    const origTransform = importExportViewport.canvasToScreenTransform;
-    // Render with (0,0) at (0,0) — we'll handle translation with
-    // the viewBox property.
-    importExportViewport.resetTransform(Mat33.identity);
+    // If the rectangle has zero width or height, its size can't be increased
+    // -- set its size to the minimum.
+    if (options?.minDimension) {
+        const originalRect = importExportViewport.visibleRect;
+        let rect = originalRect;
+        if (rect.w <= 0) {
+            rect = new Rect2(rect.x, rect.y, options.minDimension, rect.h);
+        }
+        if (rect.h <= 0) {
+            rect = new Rect2(rect.x, rect.y, rect.w, options.minDimension);
+        }
+        if (!rect.eq(originalRect)) {
+            importExportViewport.updateScreenSize(rect.size);
+        }
+    }
+    const { element: result, renderer } = SVGRenderer.fromViewport(importExportViewport, {
+        sanitize: options.sanitize ?? false,
+        useViewBoxForPositioning: true,
+    });
     // Use a callback rather than async/await to allow this function to create
     // both sync and async render functions
     renderFunction(renderer, () => {
-        importExportViewport.resetTransform(origTransform);
         if (image.getAutoresizeEnabled()) {
             result.classList.add(svgLoaderAutoresizeClassName);
         }
         else {
             result.classList.remove(svgLoaderAutoresizeClassName);
         }
-        setExportedSVGSize(result, importExportViewport, options);
+        const exportRect = importExportViewport.visibleRect;
+        adjustExportedSVGSize(result, exportRect, options);
         return result;
     });
     return result;

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

@@ -73,4 +73,5 @@ export default abstract class AbstractRenderer {
     getCanvasToScreenTransform(): Mat33;
     canvasToScreen(vec: Vec2): Vec2;
     getSizeOfCanvasPixelOnScreen(): number;
+    getVisibleRect(): Rect2;
 }

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

@@ -158,4 +158,12 @@ export default class AbstractRenderer {
     getSizeOfCanvasPixelOnScreen() {
         return this.getCanvasToScreenTransform().transformVec3(Vec2.unitX).length();
     }
+    // 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;
+    }
 }

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

@@ -6,6 +6,15 @@ import TextRenderingStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 import RenderablePathSpec from '../RenderablePathSpec';
 export declare const renderedStylesheetId = "js-draw-style-sheet";
+type FromViewportOptions = {
+    sanitize?: boolean;
+    /**
+     * Rather than having the top left of the `viewBox` set to (0, 0),
+     * if `useViewBoxForPositioning` is `true`, the `viewBox`'s top left
+     * is based on the top left of the rendering viewport's `visibleRect`.
+     */
+    useViewBoxForPositioning?: boolean;
+};
 /**
  * Renders onto an `SVGElement`.
  *
@@ -50,8 +59,26 @@ export default class SVGRenderer extends AbstractRenderer {
     drawPoints(...points: Point2[]): void;
     drawSVGElem(elem: SVGElement): void;
     isTooSmallToRender(_rect: Rect2): boolean;
-    static fromViewport(viewport: Viewport, sanitize?: 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`.
+     *
+     * If `options` is a `boolean`, it is interpreted as whether to sanitize (not add unknown
+     * SVG entities to) the output.
+     */
+    static fromViewport(viewport: Viewport, options?: FromViewportOptions | boolean): {
         element: SVGSVGElement;
         renderer: SVGRenderer;
     };
 }
+export {};