js-draw 1.21.3 → 1.23.1

package/dist/cjs/image/EditorImage.js

@@ -51,7 +51,20 @@ var EditorImageEventType;
 })(EditorImageEventType || (exports.EditorImageEventType = EditorImageEventType = {}));
 let debugMode = false;
 /**
- * Handles lookup/storage of elements in the image.
+ * @summary Handles lookup/storage of elements in the image.
+ *
+ * `js-draw` images are made up of a collection of {@link AbstractComponent}s (which
+ * includes {@link Stroke}s, {@link TextComponent}s, etc.). An `EditorImage`
+ * is the data structure that stores these components.
+ *
+ * Here's how to do a few common operations:
+ * - **Get all components in a {@link @js-draw/math!Rect2 | Rect2}**:
+ *    {@link EditorImage.getElementsIntersectingRegion}.
+ * - **Draw an `EditorImage` onto a canvas/SVG**: {@link EditorImage.render}.
+ * - **Adding a new component**: {@link EditorImage.addElement}.
+ *
+ * **Example**:
+ * [[include:doc-pages/inline-examples/image-add-and-lookup.md]]
  */
 class EditorImage {
     // @internal
@@ -110,10 +123,13 @@ class EditorImage {
         }
     }
     /**
-     * Renders all nodes visible from `viewport` (or all nodes if `viewport = null`).
+     * Renders this image to the given `renderer`.
      *
-     * `viewport` is used to improve rendering performance. If given, it must match
-     * the viewport used by the `renderer` (if any).
+     * If `viewport` is non-null, only components that can be seen from that viewport
+     * will be rendered. If `viewport` is `null`, **all** components are rendered.
+     *
+     * **Example**:
+     * [[include:doc-pages/inline-examples/canvas-renderer.md]]
      */
     render(renderer, viewport) {
         this.background.render(renderer, viewport?.visibleRect);
@@ -144,27 +160,34 @@ class EditorImage {
         this.render(renderer, null);
     }
     /**
-     * @returns all elements in the image, sorted by z-index. This can be slow for large images.
+     * @returns all elements in the image, sorted by z-index (low to high).
      *
-     * Does not include background elements. See {@link getBackgroundComponents}.
+     * This can be slow for large images. If you only need all elemenst in part of the image,
+     * consider using {@link getElementsIntersectingRegion} instead.
+     *
+     * **Note**: The result does not include background elements. See {@link getBackgroundComponents}.
      */
     getAllElements() {
         const leaves = this.root.getLeaves();
         (0, exports.sortLeavesByZIndex)(leaves);
-        return leaves.map(leaf => leaf.getContent());
+        return leaves.map((leaf) => leaf.getContent());
     }
     /** Returns the number of elements added to this image. @internal */
     estimateNumElements() {
         return this.componentCount;
     }
-    /** @returns a list of `AbstractComponent`s intersecting `region`, sorted by z-index. */
+    /**
+     * @returns a list of `AbstractComponent`s intersecting `region`, sorted by increasing z-index.
+     *
+     * Components in the background layer are only included if `includeBackground` is `true`.
+     */
     getElementsIntersectingRegion(region, includeBackground = false) {
         let leaves = this.root.getLeavesIntersectingRegion(region);
         if (includeBackground) {
             leaves = leaves.concat(this.background.getLeavesIntersectingRegion(region));
         }
         (0, exports.sortLeavesByZIndex)(leaves);
-        return leaves.map(leaf => leaf.getContent());
+        return leaves.map((leaf) => leaf.getContent());
     }
     /** Called whenever (just after) an element is completely removed. @internal */
     onDestroyElement(elem) {
@@ -504,8 +527,8 @@ const computeFirstIndexToRender = (sortedLeaves, visibleRect) => {
         for (let i = sortedLeaves.length - 1; i >= 1; i--) {
             if (
             // Check for occlusion
-            sortedLeaves[i].getBBox().containsRect(visibleRect)
-                && sortedLeaves[i].getContent()?.occludesEverythingBelowWhenRenderedInRect(visibleRect)) {
+            sortedLeaves[i].getBBox().containsRect(visibleRect) &&
+                sortedLeaves[i].getContent()?.occludesEverythingBelowWhenRenderedInRect(visibleRect)) {
                 startIndex = i;
                 break;
             }
@@ -541,7 +564,7 @@ class ImageNode {
     }
     // Override this to change how children are considered within a given region.
     getChildrenIntersectingRegion(region, isTooSmallFilter) {
-        return this.children.filter(child => {
+        return this.children.filter((child) => {
             const bbox = child.getBBox();
             return !isTooSmallFilter?.(bbox) && bbox.intersects(region);
         });
@@ -632,7 +655,7 @@ class ImageNode {
             }
             return nodeForNewLeaf.addLeaf(leaf);
         }
-        const containingNodes = this.children.filter(child => child.getBBox().containsRect(leafBBox));
+        const containingNodes = this.children.filter((child) => child.getBBox().containsRect(leafBBox));
         // Does the leaf already fit within one of the children?
         if (containingNodes.length > 0 && this.children.length >= this.targetChildCount) {
             // Sort the containers in ascending order by area
@@ -670,7 +693,7 @@ class ImageNode {
             this.bbox = this.content.getBBox();
         }
         else {
-            this.bbox = math_1.Rect2.union(...this.children.map(child => child.getBBox()));
+            this.bbox = math_1.Rect2.union(...this.children.map((child) => child.getBBox()));
         }
         if (bubbleUp && !oldBBox.eq(this.bbox)) {
             if (this.bbox.containsRect(oldBBox)) {
@@ -705,7 +728,7 @@ class ImageNode {
             const oldParent = this.parent;
             if (oldParent.parent !== null) {
                 const newParent = oldParent.parent;
-                newParent.children = newParent.children.filter(c => c !== oldParent);
+                newParent.children = newParent.children.filter((c) => c !== oldParent);
                 oldParent.parent = null;
                 oldParent.children = [];
                 this.parent = newParent;
@@ -777,11 +800,11 @@ class ImageNode {
     removeChild(child) {
         this.checkRep();
         const oldChildCount = this.children.length;
-        this.children = this.children.filter(node => {
+        this.children = this.children.filter((node) => {
             return node !== child;
         });
         console.assert(this.children.length === oldChildCount - 1, `${oldChildCount - 1} ≠ ${this.children.length} after removing all nodes equal to ${child}. Nodes should only be removed once.`);
-        this.children.forEach(child => {
+        this.children.forEach((child) => {
             child.rebalance();
         });
         this.recomputeBBox(true);
@@ -830,7 +853,7 @@ class ImageNode {
     render(renderer, visibleRect) {
         let leaves;
         if (visibleRect) {
-            leaves = this.getLeavesIntersectingRegion(visibleRect, rect => renderer.isTooSmallToRender(rect));
+            leaves = this.getLeavesIntersectingRegion(visibleRect, (rect) => renderer.isTooSmallToRender(rect));
         }
         else {
             leaves = this.getLeaves();
@@ -941,10 +964,8 @@ class RootImageNode extends ImageNode {
         };
         // Check whether the child is stored in the data/fullscreen
         // component arrays first.
-        this.dataComponents = this.dataComponents
-            .filter(checkTargetChild);
-        this.fullscreenChildren = this.fullscreenChildren
-            .filter(checkTargetChild);
+        this.dataComponents = this.dataComponents.filter(checkTargetChild);
+        this.fullscreenChildren = this.fullscreenChildren.filter(checkTargetChild);
         if (!removed) {
             super.removeChild(child);
         }

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

@@ -52,7 +52,7 @@ const editorImageToSVGSync = (image, options) => {
 };
 exports.editorImageToSVGSync = editorImageToSVGSync;
 const editorImageToSVGAsync = (image, preRenderComponent, options) => {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
         toSVGInternal(image, async (renderer, onComplete) => {
             await image.renderAllAsync(renderer, preRenderComponent);
             const result = onComplete();

package/dist/cjs/inputEvents.js

@@ -34,8 +34,8 @@ const keyPressEventFromHTMLEvent = (event) => {
 };
 exports.keyPressEventFromHTMLEvent = keyPressEventFromHTMLEvent;
 const isPointerEvt = (event) => {
-    return event.kind === InputEvtType.PointerDownEvt
-        || event.kind === InputEvtType.PointerMoveEvt
-        || event.kind === InputEvtType.PointerUpEvt;
+    return (event.kind === InputEvtType.PointerDownEvt ||
+        event.kind === InputEvtType.PointerMoveEvt ||
+        event.kind === InputEvtType.PointerUpEvt);
 };
 exports.isPointerEvt = isPointerEvt;

package/dist/cjs/lib.d.ts

@@ -18,7 +18,7 @@ import Editor, { EditorSettings } from './Editor';
 export * from './image/lib';
 export * from './types';
 export * from './inputEvents';
-export { default as getLocalizationTable, matchingLocalizationTable } from './localizations/getLocalizationTable';
+export { default as getLocalizationTable, matchingLocalizationTable, } from './localizations/getLocalizationTable';
 export * from './localization';
 export { default as SVGLoader } from './SVGLoader/SVGLoader';
 export { default as Viewport } from './Viewport';
@@ -36,7 +36,7 @@ export { default as UndoRedoHistory } from './UndoRedoHistory';
 export * from './util/lib';
 export { default as __js_draw__version } from './version';
 import AbstractToolbar from './toolbar/AbstractToolbar';
-export { Editor, EditorSettings, AbstractToolbar, };
+export { Editor, EditorSettings, AbstractToolbar };
 /**
  * Using the HTMLToolbar alias is deprecated. Use
  * `AbstractToolbar` instead.

package/dist/cjs/localizations/de.js

@@ -91,11 +91,11 @@ const localization = {
     textNodeCount: (count) => `Es gibt ${count} sichtbare Text-Knotenpunkte.`,
     textNode: (content) => `Text: ${content}`,
     imageNodeCount: (nodeCount) => `Es gibt ${nodeCount} sichtbare Bild-Knoten.`,
-    imageNode: label => `Bild: ${label}`,
+    imageNode: (label) => `Bild: ${label}`,
     unlabeledImageNode: 'Bild ohne Label',
     rerenderAsText: 'Als Text darstellen',
     accessibilityInputInstructions: 'Drücke ‚t‘, um den Inhalt des Ansichtsfensters als Text zu lesen. Verwende die Pfeiltasten, um die Ansicht zu verschieben, und klicke und ziehe, um Striche zu zeichnen. Drücke ‚w‘ zum Vergrößern und ‚s‘ zum Verkleinern der Ansicht.',
-    loading: percentage => `Laden ${percentage}%...`,
+    loading: (percentage) => `Laden ${percentage}%...`,
     doneLoading: 'Laden fertig',
     imageEditor: 'Bild-Editor',
     undoAnnouncement: (commandDescription) => `${commandDescription} rückgängig gemacht`,

package/dist/cjs/localizations/es.js

@@ -48,9 +48,13 @@ const localization = {
     selectionMenu__duplicate: 'Duplicar',
     closeSidebar: (toolName) => `Close sidebar for ${toolName}`,
     dropdownShown: (toolName) => `Menú por ${toolName} es visible`,
-    dropdownHidden: (toolName) => { return `Menú por ${toolName} fue ocultado`; },
+    dropdownHidden: (toolName) => {
+        return `Menú por ${toolName} fue ocultado`;
+    },
     zoomLevel: (zoomPercent) => `Zoom: ${zoomPercent}%`,
-    colorChangedAnnouncement: (color) => { return `Color fue cambiado a ${color}`; },
+    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) => `Lapiz ${penId}`,
@@ -67,7 +71,7 @@ const localization = {
     closeDialog: 'Cerrar',
     anyDevicePanning: 'Mover la pantalla con todo dispotivo',
     copied: (count) => `${count} cosas fueron copiados`,
-    pasted: (count) => count === 1 ? 'Pegado' : `${count} cosas fueron pegados`,
+    pasted: (count) => (count === 1 ? 'Pegado' : `${count} cosas fueron pegados`),
     toolEnabledAnnouncement: (toolName) => `${toolName} fue activado`,
     toolDisabledAnnouncement: (toolName) => `${toolName} fue desactivado`,
     resizeOutputCommand: (newSize) => `Tamaño de imagen fue cambiado a ${newSize.w}x${newSize.h}`,

package/dist/cjs/rendering/Display.js

@@ -85,7 +85,7 @@ class Display {
             // Require about 105 strokes with 4 parts each to use the cache at all.
             minProportionalRenderTimeToUseCache: 105 * 4,
         });
-        this.editor.notifier.on(types_1.EditorEventType.DisplayResized, event => {
+        this.editor.notifier.on(types_1.EditorEventType.DisplayResized, (event) => {
             if (event.kind !== types_1.EditorEventType.DisplayResized) {
                 throw new Error('Mismatched event.kinds!');
             }
@@ -123,10 +123,14 @@ class Display {
         }
         this.resizeSurfacesCallback = () => {
             const expectedWidth = (canvas) => {
-                return Math.ceil(canvas.clientWidth * this.devicePixelRatio);
+                const widthInPixels = Math.ceil(canvas.clientWidth * this.devicePixelRatio);
+                // Avoid setting the canvas width to zero -- doing so can cause errors when attempting
+                // to use the canvas:
+                return widthInPixels || canvas.width;
             };
             const expectedHeight = (canvas) => {
-                return Math.ceil(canvas.clientHeight * this.devicePixelRatio);
+                const heightInPixels = Math.ceil(canvas.clientHeight * this.devicePixelRatio);
+                return heightInPixels || canvas.height; // Zero-size canvases can cause errors.
             };
             const hasSizeMismatch = (canvas) => {
                 return expectedHeight(canvas) !== canvas.height || expectedWidth(canvas) !== canvas.width;

package/dist/cjs/rendering/RenderablePathSpec.js

@@ -42,15 +42,18 @@ const pathIncluded = (renderablePath, path) => {
  *
  * @internal
  */
-const simplifyPathToFullScreenOrEmpty = (renderablePath, visibleRect, options = { fastCheck: true, expensiveCheck: true }) => {
+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?
-    const isOnlyStrokedAndCouldFillScreen = (onlyStroked
-        && strokeWidth > visibleRect.maxDimension
-        && styledPathBBox.containsRect(visibleRect));
+    const isOnlyStrokedAndCouldFillScreen = onlyStroked &&
+        strokeWidth > visibleRect.maxDimension &&
+        styledPathBBox.containsRect(visibleRect);
     if (options.fastCheck && isOnlyStrokedAndCouldFillScreen && renderablePath.style.stroke) {
         const strokeRadius = strokeWidth / 2;
         // Are we completely within the stroke?
@@ -60,7 +63,9 @@ const simplifyPathToFullScreenOrEmpty = (renderablePath, visibleRect, options =
             if (visibleRect.isWithinRadiusOf(strokeRadius, point)) {
                 return {
                     rectangle: visibleRect,
-                    path: (0, exports.pathToRenderable)(math_1.Path.fromRect(visibleRect), { fill: renderablePath.style.stroke.color }),
+                    path: (0, exports.pathToRenderable)(math_1.Path.fromRect(visibleRect), {
+                        fill: renderablePath.style.stroke.color,
+                    }),
                     fullScreen: true,
                 };
             }
@@ -68,13 +73,16 @@ const simplifyPathToFullScreenOrEmpty = (renderablePath, visibleRect, options =
     }
     // Try filtering again, but with slightly more expensive checks
     if (options.expensiveCheck &&
-        isOnlyStrokedAndCouldFillScreen && renderablePath.style.stroke
-        && strokeWidth > visibleRect.maxDimension * 3) {
+        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 }),
+                path: (0, exports.pathToRenderable)(math_1.Path.fromRect(visibleRect), {
+                    fill: renderablePath.style.stroke.color,
+                }),
                 rectangle: visibleRect,
                 fullScreen: true,
             };
@@ -98,12 +106,16 @@ const visualEquivalent = (renderablePath, visibleRect) => {
     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, });
+    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)
+    const expandedRect = visibleRect
+        .grownBy(strokeWidth)
         .transformedBoundingBox(math_1.Mat33.scaling2D(4, visibleRect.center));
     // TODO: Handle simplifying very small paths.
     if (expandedRect.containsRect(styledPathBBox)) {
@@ -144,7 +156,10 @@ const visualEquivalent = (renderablePath, visibleRect) => {
     }
     const newPath = new math_1.Path(path.startPoint, parts);
     const newStyle = renderablePath.style;
-    rectangleSimplification = (0, exports.simplifyPathToFullScreenOrEmpty)(renderablePath, visibleRect, { fastCheck: false, expensiveCheck: true, });
+    rectangleSimplification = (0, exports.simplifyPathToFullScreenOrEmpty)(renderablePath, visibleRect, {
+        fastCheck: false,
+        expensiveCheck: true,
+    });
     if (rectangleSimplification) {
         return rectangleSimplification.path;
     }

package/dist/cjs/rendering/RenderingStyle.js

@@ -5,17 +5,20 @@ const math_1 = require("@js-draw/math");
 const cloneStyle = (style) => {
     return {
         fill: style.fill,
-        stroke: style.stroke ? {
-            ...style.stroke
-        } : undefined,
+        stroke: style.stroke
+            ? {
+                ...style.stroke,
+            }
+            : undefined,
     };
 };
 exports.cloneStyle = cloneStyle;
 const stylesEqual = (a, b) => {
-    const result = a === b || (a.fill.eq(b.fill)
-        && (a.stroke == undefined) === (b.stroke == undefined)
-        && (a.stroke?.color?.eq(b.stroke?.color) ?? true)
-        && a.stroke?.width === b.stroke?.width);
+    const result = a === b ||
+        (a.fill.eq(b.fill) &&
+            (a.stroke == undefined) === (b.stroke == undefined) &&
+            (a.stroke?.color?.eq(b.stroke?.color) ?? true) &&
+            a.stroke?.width === b.stroke?.width);
     // Map undefined/null -> false
     return result ?? false;
 };
@@ -23,10 +26,12 @@ exports.stylesEqual = stylesEqual;
 // Returns an object that can be converted to a JSON string with
 // JSON.stringify.
 const styleToJSON = (style) => {
-    const stroke = !style.stroke ? undefined : {
-        color: style.stroke.color.toHexString(),
-        width: style.stroke.width,
-    };
+    const stroke = !style.stroke
+        ? undefined
+        : {
+            color: style.stroke.color.toHexString(),
+            width: style.stroke.width,
+        };
     return {
         fill: style.fill.toHexString(),
         stroke,
@@ -34,10 +39,12 @@ const styleToJSON = (style) => {
 };
 exports.styleToJSON = styleToJSON;
 const styleFromJSON = (json) => {
-    const stroke = json.stroke ? {
-        color: math_1.Color4.fromHex(json.stroke.color),
-        width: json.stroke.width,
-    } : undefined;
+    const stroke = json.stroke
+        ? {
+            color: math_1.Color4.fromHex(json.stroke.color),
+            width: json.stroke.width,
+        }
+        : undefined;
     return {
         fill: math_1.Color4.fromHex(json.fill),
         stroke,

package/dist/cjs/rendering/TextRenderingStyle.js

@@ -14,7 +14,7 @@ const textStyleFromJSON = (json) => {
     if (typeof json === 'string') {
         json = JSON.parse(json);
     }
-    if (typeof (json.fontFamily) !== 'string') {
+    if (typeof json.fontFamily !== 'string') {
         throw new Error('Serialized textStyle missing string fontFamily attribute!');
     }
     const style = {

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

@@ -17,7 +17,7 @@ class CacheRecord {
     startRender() {
         this.lastUsedCycle = this.cacheState.currentRenderingCycle;
         if (!this.allocd) {
-            throw new Error('Only alloc\'d canvases can be rendered to');
+            throw new Error("Only alloc'd canvases can be rendered to");
         }
         return this.renderer;
     }

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

@@ -34,7 +34,7 @@ class CacheRecordManager {
             lru.realloc(onDealloc);
             lru.setRenderingRegion(drawTo);
             if (this.cacheState.debugMode) {
-                console.log('[Cache] Now re-alloc\'d. Last used cycle: ', lru.getLastUsedCycle());
+                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!');
             }
             return lru;

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

@@ -35,7 +35,7 @@ class RenderingCache {
             this.rootNode = this.rootNode.generateParent();
         }
         this.rootNode = this.rootNode.smallestChildContaining(visibleRect) ?? this.rootNode;
-        const visibleLeaves = image.getLeavesIntersectingRegion(viewport.visibleRect, rect => screenRenderer.isTooSmallToRender(rect));
+        const visibleLeaves = image.getLeavesIntersectingRegion(viewport.visibleRect, (rect) => screenRenderer.isTooSmallToRender(rect));
         let approxVisibleRenderTime = 0;
         for (const leaf of visibleLeaves) {
             approxVisibleRenderTime += leaf.getContent().getProportionalRenderingTime();

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

@@ -32,7 +32,7 @@ class RenderingCacheNode {
         const middleChildIdx = (parent.instantiatedChildren.length - 1) / 2;
         if (!parent.instantiatedChildren[middleChildIdx].region.eq(this.region, checkTolerance)) {
             console.error(parent.instantiatedChildren[middleChildIdx].region, '≠', this.region);
-            throw new Error('Logic error: [this] is not contained within its parent\'s center child');
+            throw new Error("Logic error: [this] is not contained within its parent's center child");
         }
         // Replace the middle child
         parent.instantiatedChildren[middleChildIdx] = this;
@@ -42,7 +42,8 @@ class RenderingCacheNode {
     // Generates children, if missing.
     generateChildren() {
         if (this.instantiatedChildren.length === 0) {
-            if (this.region.size.x / cacheDivisionSize === 0 || this.region.size.y / cacheDivisionSize === 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;
             }
@@ -137,8 +138,7 @@ class RenderingCacheNode {
     }
     // Render all [items] within [viewport]
     renderItems(screenRenderer, items, viewport) {
-        if (!viewport.visibleRect.intersects(this.region)
-            || items.length === 0) {
+        if (!viewport.visibleRect.intersects(this.region) || items.length === 0) {
             return;
         }
         // Divide [items] until nodes are smaller than this, or are leaves.
@@ -167,13 +167,15 @@ class RenderingCacheNode {
             return;
         }
         if (this.cacheState.debugMode) {
-            screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: math_1.Color4.yellow });
+            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);
         if (!couldRender) {
             for (const child of this.getChildren()) {
-                child.renderItems(screenRenderer, items.filter(item => {
+                child.renderItems(screenRenderer, items.filter((item) => {
                     return item.getBBox().intersects(child.region);
                 }), viewport);
             }
@@ -191,7 +193,7 @@ class RenderingCacheNode {
             if (leavesByIds.length === 0) {
                 return;
             }
-            const leafIds = leavesByIds.map(leaf => leaf.getId());
+            const leafIds = leavesByIds.map((leaf) => leaf.getId());
             let thisRenderer;
             if (!this.renderingIsUpToDate(leafIds)) {
                 if (this.allChildrenCanRender(viewport, leavesByIds)) {
@@ -212,7 +214,9 @@ class RenderingCacheNode {
                     if (!this.cachedRenderer) {
                         this.cachedRenderer = this.cacheState.recordManager.allocCanvas(this.region, () => this.onRegionDealloc());
                     }
-                    else if (leavesByIds.length > this.renderedIds.length && this.allRenderedIdsIn(leafIds) && this.renderedMaxZIndex !== null) {
+                    else if (leavesByIds.length > this.renderedIds.length &&
+                        this.allRenderedIdsIn(leafIds) &&
+                        this.renderedMaxZIndex !== null) {
                         // We often don't need to do a full re-render even if something's changed.
                         // Check whether we can just draw on top of the existing cache.
                         const newLeaves = [];
@@ -242,7 +246,9 @@ class RenderingCacheNode {
                             }
                             if (this.cacheState.debugMode) {
                                 // Clay for adding new elements
-                                screenRenderer.drawRect(this.region, 2 * viewport.getSizeOfPixelOnCanvas(), { fill: math_1.Color4.clay });
+                                screenRenderer.drawRect(this.region, 2 * viewport.getSizeOfPixelOnCanvas(), {
+                                    fill: math_1.Color4.clay,
+                                });
                             }
                         }
                     }
@@ -263,7 +269,9 @@ class RenderingCacheNode {
                         }
                         if (this.cacheState.debugMode) {
                             // Red for full rerender
-                            screenRenderer.drawRect(this.region, 3 * viewport.getSizeOfPixelOnCanvas(), { fill: math_1.Color4.red });
+                            screenRenderer.drawRect(this.region, 3 * viewport.getSizeOfPixelOnCanvas(), {
+                                fill: math_1.Color4.red,
+                            });
                         }
                     }
                     this.renderedIds = leafIds;
@@ -282,7 +290,9 @@ class RenderingCacheNode {
                     screenRenderer.endObject();
                     if (this.cacheState.debugMode) {
                         // Green for no cache needed render
-                        screenRenderer.drawRect(this.region, 2 * viewport.getSizeOfPixelOnCanvas(), { fill: math_1.Color4.green });
+                        screenRenderer.drawRect(this.region, 2 * viewport.getSizeOfPixelOnCanvas(), {
+                            fill: math_1.Color4.green,
+                        });
                     }
                 }
             }
@@ -294,7 +304,7 @@ class RenderingCacheNode {
                 screenRenderer.renderFromOtherOfSameType(transformMat, thisRenderer);
             }
             // Can we clean up this' children? (Are they unused?)
-            if (this.instantiatedChildren.every(child => child.isEmpty())) {
+            if (this.instantiatedChildren.every((child) => child.isEmpty())) {
                 this.instantiatedChildren = [];
             }
         }
@@ -305,7 +315,7 @@ class RenderingCacheNode {
         if (this.cachedRenderer !== null) {
             return false;
         }
-        return this.instantiatedChildren.every(child => child.isEmpty());
+        return this.instantiatedChildren.every((child) => child.isEmpty());
     }
     onRegionDealloc() {
         this.cachedRenderer = null;
@@ -314,7 +324,8 @@ class RenderingCacheNode {
         }
     }
     checkRep() {
-        if (this.instantiatedChildren.length !== cacheDivisionSize * cacheDivisionSize && this.instantiatedChildren.length !== 0) {
+        if (this.instantiatedChildren.length !== cacheDivisionSize * cacheDivisionSize &&
+            this.instantiatedChildren.length !== 0) {
             throw new Error(`Repcheck: Wrong number of children. Got ${this.instantiatedChildren.length}`);
         }
         if (this.renderedIds[1] !== undefined && this.renderedIds[0] >= this.renderedIds[1]) {
@@ -327,7 +338,7 @@ class RenderingCacheNode {
             }
         }
         if (this.cachedRenderer && !this.cachedRenderer.isAllocd()) {
-            throw new Error('this\' cachedRenderer != null, but is dealloc\'d');
+            throw new Error("this' cachedRenderer != null, but is dealloc'd");
         }
     }
 }

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

@@ -25,11 +25,11 @@ const createCache = (onRenderAlloc, cacheOptions) => {
         maxScale: 2,
         minProportionalRenderTimePerCache: 0,
         minProportionalRenderTimeToUseCache: 0,
-        ...cacheOptions
+        ...cacheOptions,
     });
     return {
         cache,
-        editor
+        editor,
     };
 };
 exports.createCache = createCache;

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

@@ -22,7 +22,9 @@ class AbstractRenderer {
      * methods on `Viewport`, because the viewport may not accurately reflect
      * what is rendered.
      */
-    getViewport() { return this.viewport; }
+    getViewport() {
+        return this.viewport;
+    }
     setDraftMode(_draftMode) { }
     flushPath() {
         if (!this.currentPaths) {

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

@@ -7,31 +7,8 @@ import RenderablePathSpec from '../RenderablePathSpec';
 /**
  * Renders onto a `CanvasRenderingContext2D`.
  *
- * @example
- * ```ts,runnable
- * import {Editor,CanvasRenderer} from 'js-draw';
- *
- * // Create an editor and load initial data -- don't add to the body (hidden editor).
- * const editor = new Editor(document.createElement('div'));
- * await editor.loadFromSVG('<svg><path d="m0,0 l100,5 l-50,60 l30,20 z" fill="green"/></svg>');
- * ---visible---
- * // Given some editor.
- * // Set up the canvas to be drawn onto.
- * const canvas = document.createElement('canvas');
- * const ctx = canvas.getContext('2d');
- *
- * // Ensure that the canvas can fit the entire rendering
- * const viewport = editor.image.getImportExportViewport();
- * canvas.width = viewport.getScreenRectSize().x;
- * canvas.height = viewport.getScreenRectSize().y;
- *
- * // Render editor.image onto the renderer
- * const renderer = new CanvasRenderer(ctx, viewport);
- * editor.image.render(renderer, viewport);
- *
- * // Add the rendered canvas to the document.
- * document.body.appendChild(canvas);
- * ```
+ * **Example**:
+ * [[include:doc-pages/inline-examples/canvas-renderer.md]]
  */
 export default class CanvasRenderer extends AbstractRenderer {
     private ctx;