js-draw 1.3.1 → 1.4.1

package/dist/cjs/{EditorImage.d.ts → image/EditorImage.d.ts}

@@ -1,11 +1,11 @@
-import AbstractRenderer from './rendering/renderers/AbstractRenderer';
-import Viewport from './Viewport';
-import AbstractComponent from './components/AbstractComponent';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
+import Viewport from '../Viewport';
+import AbstractComponent from '../components/AbstractComponent';
 import { Rect2 } from '@js-draw/math';
-import RenderingCache from './rendering/caching/RenderingCache';
-import SerializableCommand from './commands/SerializableCommand';
-import EventDispatcher from './EventDispatcher';
-import Command from './commands/Command';
+import RenderingCache from '../rendering/caching/RenderingCache';
+import SerializableCommand from '../commands/SerializableCommand';
+import EventDispatcher from '../EventDispatcher';
+import Command from '../commands/Command';
 export declare const sortLeavesByZIndex: (leaves: Array<ImageNode>) => void;
 export declare enum EditorImageEventType {
     ExportViewportChanged = 0,
@@ -14,6 +14,13 @@ export declare enum EditorImageEventType {
 export type EditorImageNotifier = EventDispatcher<EditorImageEventType, {
     image: EditorImage;
 }>;
+/**
+ * A callback used to
+ * 1. pause the render process
+ * 2. observe progress through `componentsProcessed` and `totalComponents`
+ * 3. stop the render process early by returning `false`.
+ */
+export type PreRenderComponentCallback = (component: AbstractComponent, componentsProcessed: number, totalComponents: number) => Promise<boolean>;
 export default class EditorImage {
     private root;
     private background;
@@ -36,7 +43,21 @@ export default class EditorImage {
      * the viewport used by the `renderer` (if any).
      */
     render(renderer: AbstractRenderer, viewport: Viewport | null): void;
-    /** Renders all nodes, even ones not within the viewport. @internal */
+    /**
+     * Like {@link renderAll}, but can be stopped early and paused.
+     *
+     * **Note**: If the image is being edited during an async rendering, there is no
+     * guarantee that all nodes will be rendered correctly (some may be missing).
+     *
+     * @internal
+     */
+    renderAllAsync(renderer: AbstractRenderer, preRenderComponent: PreRenderComponentCallback): Promise<boolean>;
+    /**
+     * Renders all nodes, even ones not within the viewport.
+     *
+     * This can be slow for large images
+     * @internal
+     */
     renderAll(renderer: AbstractRenderer): void;
     /**
      * @returns all elements in the image, sorted by z-index. This can be slow for large images.
@@ -136,6 +157,7 @@ export declare class ImageNode {
     private rebalance;
     protected removeChild(child: ImageNode): void;
     remove(): void;
+    renderAllAsync(renderer: AbstractRenderer, preRenderComponent: PreRenderComponentCallback): Promise<boolean>;
     render(renderer: AbstractRenderer, visibleRect?: Rect2): void;
     renderDebugBoundingBoxes(renderer: AbstractRenderer, visibleRect: Rect2, depth?: number): void;
 }

package/dist/cjs/{EditorImage.js → image/EditorImage.js}

@@ -32,13 +32,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 var _a, _b, _c;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RootImageNode = exports.ImageNode = exports.EditorImageEventType = exports.sortLeavesByZIndex = void 0;
-const Viewport_1 = __importDefault(require("./Viewport"));
-const AbstractComponent_1 = __importStar(require("./components/AbstractComponent"));
+const Viewport_1 = __importDefault(require("../Viewport"));
+const AbstractComponent_1 = __importStar(require("../components/AbstractComponent"));
 const math_1 = require("@js-draw/math");
-const SerializableCommand_1 = __importDefault(require("./commands/SerializableCommand"));
-const EventDispatcher_1 = __importDefault(require("./EventDispatcher"));
-const assertions_1 = require("./util/assertions");
-const Command_1 = __importDefault(require("./commands/Command"));
+const SerializableCommand_1 = __importDefault(require("../commands/SerializableCommand"));
+const EventDispatcher_1 = __importDefault(require("../EventDispatcher"));
+const assertions_1 = require("../util/assertions");
+const Command_1 = __importDefault(require("../commands/Command"));
 // @internal Sort by z-index, low to high
 const sortLeavesByZIndex = (leaves) => {
     leaves.sort((a, b) => a.getContent().getZIndex() - b.getContent().getZIndex());
@@ -117,7 +117,27 @@ class EditorImage {
         this.background.render(renderer, viewport?.visibleRect);
         this.root.render(renderer, viewport?.visibleRect);
     }
-    /** Renders all nodes, even ones not within the viewport. @internal */
+    /**
+     * Like {@link renderAll}, but can be stopped early and paused.
+     *
+     * **Note**: If the image is being edited during an async rendering, there is no
+     * guarantee that all nodes will be rendered correctly (some may be missing).
+     *
+     * @internal
+     */
+    async renderAllAsync(renderer, preRenderComponent) {
+        const stoppedEarly = !(await this.background.renderAllAsync(renderer, preRenderComponent));
+        if (!stoppedEarly) {
+            return await this.root.renderAllAsync(renderer, preRenderComponent);
+        }
+        return false;
+    }
+    /**
+     * Renders all nodes, even ones not within the viewport.
+     *
+     * This can be slow for large images
+     * @internal
+     */
     renderAll(renderer) {
         this.render(renderer, null);
     }
@@ -640,6 +660,30 @@ class ImageNode {
         this.content = null;
         this.children = [];
     }
+    // Creates a (potentially incomplete) async rendering of this image.
+    // Returns false if stopped early
+    async renderAllAsync(renderer, 
+    // Used to pause/stop the renderer process
+    preRenderComponent) {
+        const leaves = this.getLeaves();
+        (0, exports.sortLeavesByZIndex)(leaves);
+        const totalLeaves = leaves.length;
+        for (let leafIndex = 0; leafIndex < totalLeaves; leafIndex++) {
+            const leaf = leaves[leafIndex];
+            const component = leaf.getContent();
+            // Even though leaf was originally a leaf, it might not be any longer --
+            // rendering is async and the tree can change during that time.
+            if (!component) {
+                continue;
+            }
+            const shouldContinue = await preRenderComponent(component, leafIndex, totalLeaves);
+            if (!shouldContinue) {
+                return false;
+            }
+            component.render(renderer, undefined);
+        }
+        return true;
+    }
     render(renderer, visibleRect) {
         let leaves;
         if (visibleRect) {

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/adjustExportedSVGSize.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const math_1 = require("@js-draw/math");
+// @internal
+const adjustExportedSVGSize = (svg, exportRect, options) => {
+    // Adjust the width/height as necessary
+    let width = exportRect.w;
+    let height = exportRect.h;
+    if (options?.minDimension && width < options.minDimension) {
+        const newWidth = options.minDimension;
+        height *= newWidth / (width || 1);
+        width = newWidth;
+    }
+    if (options?.minDimension && height < options.minDimension) {
+        const newHeight = options.minDimension;
+        width *= newHeight / (height || 1);
+        height = newHeight;
+    }
+    svg.setAttribute('width', (0, math_1.toRoundedString)(width));
+    svg.setAttribute('height', (0, math_1.toRoundedString)(height));
+};
+exports.default = adjustExportedSVGSize;

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

@@ -0,0 +1,8 @@
+import EditorImage, { PreRenderComponentCallback } from '../EditorImage';
+import { SVGSizingOptions } from './adjustExportedSVGSize';
+export interface SVGExportOptions extends SVGSizingOptions {
+    sanitize?: boolean;
+    minDimension?: number;
+}
+export declare const editorImageToSVGSync: (image: EditorImage, options: SVGExportOptions) => SVGSVGElement;
+export declare const editorImageToSVGAsync: (image: EditorImage, preRenderComponent: PreRenderComponentCallback, options: SVGExportOptions) => Promise<SVGElement>;

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

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 adjustExportedSVGSize_1 = __importDefault(require("./adjustExportedSVGSize"));
+const toSVGInternal = (image, renderFunction, options) => {
+    const importExportViewport = image.getImportExportViewport().getTemporaryClone();
+    // 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, () => {
+        if (image.getAutoresizeEnabled()) {
+            result.classList.add(SVGLoader_1.svgLoaderAutoresizeClassName);
+        }
+        else {
+            result.classList.remove(SVGLoader_1.svgLoaderAutoresizeClassName);
+        }
+        const exportRect = importExportViewport.visibleRect;
+        (0, adjustExportedSVGSize_1.default)(result, exportRect, options);
+        return result;
+    });
+    return result;
+};
+const editorImageToSVGSync = (image, options) => {
+    return toSVGInternal(image, (renderer, onComplete) => {
+        image.renderAll(renderer);
+        onComplete();
+    }, options);
+};
+exports.editorImageToSVGSync = editorImageToSVGSync;
+const editorImageToSVGAsync = (image, preRenderComponent, options) => {
+    return new Promise(resolve => {
+        toSVGInternal(image, async (renderer, onComplete) => {
+            await image.renderAllAsync(renderer, preRenderComponent);
+            const result = onComplete();
+            resolve(result);
+        }, options);
+    });
+};
+exports.editorImageToSVGAsync = editorImageToSVGAsync;

package/dist/cjs/image/lib.d.ts

@@ -0,0 +1 @@
+export { default as EditorImage } from './EditorImage';

package/dist/cjs/image/lib.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorImage = void 0;
+var EditorImage_1 = require("./EditorImage");
+Object.defineProperty(exports, "EditorImage", { enumerable: true, get: function () { return __importDefault(EditorImage_1).default; } });

package/dist/cjs/lib.d.ts

@@ -15,7 +15,7 @@
  * @packageDocumentation
  */
 import Editor, { EditorSettings } from './Editor';
-export { default as EditorImage } from './EditorImage';
+export * from './image/lib';
 export * from './types';
 export * from './inputEvents';
 export { default as getLocalizationTable, matchingLocalizationTable } from './localizations/getLocalizationTable';

package/dist/cjs/lib.js

@@ -33,11 +33,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HTMLToolbar = exports.AbstractToolbar = exports.Editor = exports.__js_draw__version = exports.UndoRedoHistory = exports.PointerDevice = exports.Pointer = exports.EventDispatcher = exports.Viewport = exports.SVGLoader = exports.matchingLocalizationTable = exports.getLocalizationTable = exports.EditorImage = void 0;
+exports.HTMLToolbar = exports.AbstractToolbar = exports.Editor = exports.__js_draw__version = exports.UndoRedoHistory = exports.PointerDevice = exports.Pointer = exports.EventDispatcher = exports.Viewport = exports.SVGLoader = exports.matchingLocalizationTable = exports.getLocalizationTable = void 0;
 const Editor_1 = __importDefault(require("./Editor"));
 exports.Editor = Editor_1.default;
-var EditorImage_1 = require("./EditorImage");
-Object.defineProperty(exports, "EditorImage", { enumerable: true, get: function () { return __importDefault(EditorImage_1).default; } });
+__exportStar(require("./image/lib"), exports);
 __exportStar(require("./types"), exports);
 __exportStar(require("./inputEvents"), exports);
 var getLocalizationTable_1 = require("./localizations/getLocalizationTable");

package/dist/cjs/localizations/comments.d.ts

@@ -0,0 +1,6 @@
+import { EditorLocalization } from '../localization';
+/**
+ * Comments to help translators create translations.
+ */
+declare const comments: Partial<Record<keyof EditorLocalization, string>>;
+export default comments;

package/dist/cjs/localizations/comments.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Comments to help translators create translations.
+ */
+const comments = {
+    dragAndDropHereOrBrowse: 'Uses {{curly braces}} to denote bold text',
+    closeSidebar: 'Currently used as an accessibilty label',
+};
+exports.default = comments;

package/dist/cjs/localizations/es.js

@@ -1,70 +1,90 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const localization_1 = require("../localization");
-// A partial Spanish localization.
+// A partial Spanish localization, created with /scripts/markdownTranslationFormToTs.ts
 const localization = {
     ...localization_1.defaultEditorLocalization,
-    // Strings for the main editor interface
-    // (see src/localization.ts)
-    loading: (percentage) => `Cargando: ${percentage}%...`,
-    imageEditor: 'Editor de dibujos',
-    undoAnnouncement: (commandDescription) => `${commandDescription} fue deshecho`,
-    redoAnnouncement: (commandDescription) => `${commandDescription} fue rehecho`,
-    undo: 'Deshace',
-    redo: 'Rehace',
-    // Strings for the toolbar
-    // (see src/toolbar/localization.ts)
     pen: 'Lapiz',
     eraser: 'Borrador',
     select: 'Selecciona',
-    thicknessLabel: 'Tamaño',
-    colorLabel: 'Color',
-    doneLoading: 'El cargado terminó',
-    fontLabel: 'Fuente: ',
-    anyDevicePanning: 'Mover la pantalla con todo dispotivo',
-    touchPanning: 'Mover la pantalla con un dedo',
-    touchPanTool: 'Instrumento de mover la pantalla con un dedo',
-    outlinedRectanglePen: 'Rectángulo con nada más que un borde',
-    filledRectanglePen: 'Rectángulo sin borde',
-    linePen: 'Línea',
-    arrowPen: 'Flecha',
-    roundedTipPen: 'Lapiz Redondeado',
-    selectPenTip: 'Forma de dibuja',
     handTool: 'Mover',
-    zoom: 'Zoom',
+    image: 'Imagen',
+    chooseFile: 'Seleccionar archivo',
+    cancel: 'Cancelar',
     resetView: 'Reiniciar vista',
+    thicknessLabel: 'Tamaño',
+    fontLabel: 'Fuente:',
+    textSize: 'Tamaño',
     resizeImageToSelection: 'Redimensionar la imagen a lo que está seleccionado',
     deleteSelection: 'Borra la selección',
     duplicateSelection: 'Duplica la selección',
+    exit: 'Salir',
+    save: 'Guardar',
+    undo: 'Deshace',
+    redo: 'Rehace',
+    selectPenTip: 'Punta',
+    selectShape: 'Forma',
     pickColorFromScreen: 'Selecciona un color de la pantalla',
     clickToPickColorAnnouncement: 'Haga un clic en la pantalla para seleccionar un color',
-    dropdownShown(toolName) {
-        return `Menú por ${toolName} es visible`;
-    },
-    dropdownHidden: function (toolName) {
-        return `Menú por ${toolName} fue ocultado`;
-    },
-    colorChangedAnnouncement: function (color) {
-        return `Color fue cambiado a ${color}`;
-    },
-    keyboardPanZoom: 'Mover la pantalla con el teclado',
-    penTool: function (penId) {
-        return `Lapiz ${penId}`;
-    },
+    documentProperties: 'Fondo',
+    backgroundColor: 'Color de fondo',
+    imageWidthOption: 'Ancho',
+    imageHeightOption: 'Alto',
+    toggleOverflow: 'Más',
+    touchPanning: 'Mover la pantalla con un dedo',
+    roundedTipPen: 'Lapiz Redondeado',
+    arrowPen: 'Flecha',
+    linePen: 'Línea',
+    outlinedRectanglePen: 'Rectángulo delineado',
+    filledRectanglePen: 'Rectángulo sin borde',
+    lockRotation: 'Bloquea rotación',
+    paste: 'Pegar',
+    closeSidebar: (toolName) => `Close sidebar for ${toolName}`,
+    dropdownShown: (toolName) => `Menú por ${toolName} es visible`,
+    dropdownHidden: (toolName) => { return `Menú por ${toolName} fue ocultado`; },
+    zoomLevel: (zoomPercent) => `Zoom: ${zoomPercent}%`,
+    colorChangedAnnouncement: (color) => { return `Color fue cambiado a ${color}`; },
+    imageSize: (size, units) => `Tamaño del imagen: ${size} ${units}`,
+    imageLoadError: (message) => `Error cargando imagen: ${message}`,
+    penTool: (penId) => { return `Lapiz ${penId}`; },
     selectionTool: 'Selecciona',
     eraserTool: 'Borrador',
+    touchPanTool: 'Instrumento de mover la pantalla con un dedo',
+    pipetteTool: 'Seleccione un color de la pantalla',
+    keyboardPanZoom: 'Mover la pantalla con el teclado',
     textTool: 'Texto',
     enterTextToInsert: 'Entra texto',
-    textSize: 'Tamaño',
+    findLabel: 'Buscar',
+    toNextMatch: 'Próxima',
+    closeDialog: 'Cerrar',
+    focusedFoundText: (matchIdx, totalMatches) => `Viewing match ${matchIdx} of ${totalMatches}`,
+    anyDevicePanning: 'Mover la pantalla con todo dispotivo',
+    copied: (count, description) => `Copied ${count} ${description}`,
+    pasted: (count, description) => `Pasted ${count} ${description}`,
+    toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
+    toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,
+    transformedElements: (elemCount) => `Transformed ${elemCount} element${elemCount === 1 ? '' : 's'}`,
+    resizeOutputCommand: (newSize) => `Resized image to ${newSize.w}x${newSize.h}`,
+    addElementAction: (componentDescription) => `Added ${componentDescription}`,
+    eraseAction: (componentDescription, numElems) => `Erased ${numElems} ${componentDescription}`,
+    duplicateAction: (componentDescription, numElems) => `Duplicated ${numElems} ${componentDescription}`,
+    unionOf: (actionDescription, actionCount) => `Union: ${actionCount} ${actionDescription}`,
+    inverseOf: (actionDescription) => `Inverse of ${actionDescription}`,
+    rotatedBy: (degrees) => `Rotated by ${Math.abs(degrees)} degrees ${degrees < 0 ? 'clockwise' : 'counter-clockwise'}`,
+    selectedElements: (count) => `Selected ${count} element${count === 1 ? '' : 's'}`,
+    filledBackgroundWithColor: (color) => `Filled background (${color})`,
+    text: (text) => `Text object: ${text}`,
+    imageNode: (label) => `Image: ${label}`,
+    restyledElement: (elementDescription) => `Restyled ${elementDescription}`,
+    pathNodeCount: (count) => `There are ${count} visible path objects.`,
+    textNodeCount: (count) => `There are ${count} visible text nodes.`,
+    imageNodeCount: (nodeCount) => `There are ${nodeCount} visible image nodes.`,
+    textNode: (content) => `Text: ${content}`,
     rerenderAsText: 'Redibuja la pantalla al texto',
-    lockRotation: 'Bloquea rotación',
-    image: 'Imagen',
-    imageSize: (size, units) => `Tamaño del imagen: ${size} ${units}`,
-    imageLoadError: (message) => `Error cargando imagen: ${message}`,
-    toggleOverflow: 'Más',
-    documentProperties: 'Fondo',
-    imageWidthOption: 'Ancho',
-    imageHeightOption: 'Alto',
-    backgroundColor: 'Color de fondo: '
+    loading: (percentage) => `Cargando: ${percentage}%...`,
+    imageEditor: 'Editor de dibujos',
+    doneLoading: 'El cargado terminó',
+    undoAnnouncement: (commandDescription) => `${commandDescription} fue deshecho`,
+    redoAnnouncement: (commandDescription) => `${commandDescription} fue rehecho`,
 };
 exports.default = localization;

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

@@ -1,4 +1,4 @@
-import { ImageNode } from '../../EditorImage';
+import { ImageNode } from '../../image/EditorImage';
 import Viewport from '../../Viewport';
 import AbstractRenderer from '../renderers/AbstractRenderer';
 import { CacheProps } from './types';

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

@@ -1,4 +1,4 @@
-import { ImageNode } from '../../EditorImage';
+import { ImageNode } from '../../image/EditorImage';
 import { Rect2 } from '@js-draw/math';
 import Viewport from '../../Viewport';
 import AbstractRenderer from '../renderers/AbstractRenderer';

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

@@ -1,7 +1,7 @@
 "use strict";
 // A cache record with sub-nodes.
 Object.defineProperty(exports, "__esModule", { value: true });
-const EditorImage_1 = require("../../EditorImage");
+const EditorImage_1 = require("../../image/EditorImage");
 const math_1 = require("@js-draw/math");
 // 3x3 divisions for each node.
 const cacheDivisionSize = 3;
@@ -44,11 +44,12 @@ class RenderingCacheNode {
     // Generates children, if missing.
     generateChildren() {
         if (this.instantiatedChildren.length === 0) {
-            const childRects = this.region.divideIntoGrid(cacheDivisionSize, cacheDivisionSize);
-            if (this.region.size.x === 0 || this.region.size.y === 0) {
+            if (this.region.size.x / cacheDivisionSize === 0 || this.region.size.y / cacheDivisionSize === 0) {
                 console.warn('Cache element has zero size! Not generating children.');
                 return;
             }
+            const childRects = this.region.divideIntoGrid(cacheDivisionSize, cacheDivisionSize);
+            console.assert(childRects.length === cacheDivisionSize * cacheDivisionSize, 'Warning: divideIntoGrid created the wrong number of subrectangles!');
             for (const rect of childRects) {
                 const child = new RenderingCacheNode(rect, this.cacheState);
                 child.parent = this;

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;