js-draw 1.21.3 → 1.23.1

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

@@ -45,7 +45,7 @@ export const editorImageToSVGSync = (image, options) => {
     }, options);
 };
 export 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/mjs/inputEvents.mjs

@@ -29,7 +29,7 @@ export const keyPressEventFromHTMLEvent = (event) => {
     return keyEventFromHTMLEvent(InputEvtType.KeyPressEvent, event);
 };
 export 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);
 };

package/dist/mjs/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/mjs/lib.mjs

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

package/dist/mjs/localization.mjs

@@ -1,6 +1,6 @@
 import  { defaultCommandLocalization }  from './commands/localization.mjs';
-import  { defaultComponentLocalization }  from './components/localization.mjs';
-import  { defaultTextRendererLocalization }  from './rendering/localization.mjs';
+import  { defaultComponentLocalization, }  from './components/localization.mjs';
+import  { defaultTextRendererLocalization, }  from './rendering/localization.mjs';
 import  { defaultToolbarLocalization }  from './toolbar/localization.mjs';
 import  { defaultToolLocalization }  from './tools/localization.mjs';
 export const defaultEditorLocalization = {

package/dist/mjs/localizations/de.mjs

@@ -89,11 +89,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/mjs/localizations/es.mjs

@@ -46,9 +46,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}`,
@@ -65,7 +69,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/mjs/rendering/Display.mjs

@@ -79,7 +79,7 @@ export default class Display {
             // Require about 105 strokes with 4 parts each to use the cache at all.
             minProportionalRenderTimeToUseCache: 105 * 4,
         });
-        this.editor.notifier.on(EditorEventType.DisplayResized, event => {
+        this.editor.notifier.on(EditorEventType.DisplayResized, (event) => {
             if (event.kind !== EditorEventType.DisplayResized) {
                 throw new Error('Mismatched event.kinds!');
             }
@@ -117,10 +117,14 @@ export default 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/mjs/rendering/RenderablePathSpec.mjs

@@ -37,15 +37,18 @@ const pathIncluded = (renderablePath, path) => {
  *
  * @internal
  */
-export const simplifyPathToFullScreenOrEmpty = (renderablePath, visibleRect, options = { fastCheck: true, expensiveCheck: true }) => {
+export const simplifyPathToFullScreenOrEmpty = (renderablePath, visibleRect, options = {
+    fastCheck: true,
+    expensiveCheck: true,
+}) => {
     const path = pathFromRenderable(renderablePath);
     const strokeWidth = renderablePath.style.stroke?.width ?? 0;
     const onlyStroked = strokeWidth > 0 && renderablePath.style.fill.a === 0;
     const styledPathBBox = path.bbox.grownBy(strokeWidth);
     // Are we close enough to the path that it fills the entire screen?
-    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?
@@ -55,7 +58,9 @@ export const simplifyPathToFullScreenOrEmpty = (renderablePath, visibleRect, opt
             if (visibleRect.isWithinRadiusOf(strokeRadius, point)) {
                 return {
                     rectangle: visibleRect,
-                    path: pathToRenderable(Path.fromRect(visibleRect), { fill: renderablePath.style.stroke.color }),
+                    path: pathToRenderable(Path.fromRect(visibleRect), {
+                        fill: renderablePath.style.stroke.color,
+                    }),
                     fullScreen: true,
                 };
             }
@@ -63,13 +68,16 @@ export const simplifyPathToFullScreenOrEmpty = (renderablePath, visibleRect, opt
     }
     // 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: pathToRenderable(Path.fromRect(visibleRect), { fill: renderablePath.style.stroke.color }),
+                path: pathToRenderable(Path.fromRect(visibleRect), {
+                    fill: renderablePath.style.stroke.color,
+                }),
                 rectangle: visibleRect,
                 fullScreen: true,
             };
@@ -92,12 +100,16 @@ export 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 = simplifyPathToFullScreenOrEmpty(renderablePath, visibleRect, { fastCheck: true, expensiveCheck: false, });
+    let rectangleSimplification = simplifyPathToFullScreenOrEmpty(renderablePath, visibleRect, {
+        fastCheck: true,
+        expensiveCheck: false,
+    });
     if (rectangleSimplification) {
         return rectangleSimplification.path;
     }
     // Scale the expanded rect --- the visual equivalent is only close for huge strokes.
-    const expandedRect = visibleRect.grownBy(strokeWidth)
+    const expandedRect = visibleRect
+        .grownBy(strokeWidth)
         .transformedBoundingBox(Mat33.scaling2D(4, visibleRect.center));
     // TODO: Handle simplifying very small paths.
     if (expandedRect.containsRect(styledPathBBox)) {
@@ -138,7 +150,10 @@ export const visualEquivalent = (renderablePath, visibleRect) => {
     }
     const newPath = new Path(path.startPoint, parts);
     const newStyle = renderablePath.style;
-    rectangleSimplification = simplifyPathToFullScreenOrEmpty(renderablePath, visibleRect, { fastCheck: false, expensiveCheck: true, });
+    rectangleSimplification = simplifyPathToFullScreenOrEmpty(renderablePath, visibleRect, {
+        fastCheck: false,
+        expensiveCheck: true,
+    });
     if (rectangleSimplification) {
         return rectangleSimplification.path;
     }

package/dist/mjs/rendering/RenderingStyle.mjs

@@ -2,36 +2,43 @@ import { Color4 } from '@js-draw/math';
 export const cloneStyle = (style) => {
     return {
         fill: style.fill,
-        stroke: style.stroke ? {
-            ...style.stroke
-        } : undefined,
+        stroke: style.stroke
+            ? {
+                ...style.stroke,
+            }
+            : undefined,
     };
 };
 export 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;
 };
 // Returns an object that can be converted to a JSON string with
 // JSON.stringify.
 export 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,
     };
 };
 export const styleFromJSON = (json) => {
-    const stroke = json.stroke ? {
-        color: Color4.fromHex(json.stroke.color),
-        width: json.stroke.width,
-    } : undefined;
+    const stroke = json.stroke
+        ? {
+            color: Color4.fromHex(json.stroke.color),
+            width: json.stroke.width,
+        }
+        : undefined;
     return {
         fill: Color4.fromHex(json.fill),
         stroke,

package/dist/mjs/rendering/TextRenderingStyle.mjs

@@ -10,7 +10,7 @@ export 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/mjs/rendering/caching/CacheRecord.mjs

@@ -15,7 +15,7 @@ export default 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/mjs/rendering/caching/CacheRecordManager.mjs

@@ -28,7 +28,7 @@ export 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/mjs/rendering/caching/RenderingCache.mjs

@@ -30,7 +30,7 @@ export default 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/mjs/rendering/caching/RenderingCacheNode.mjs

@@ -30,7 +30,7 @@ export default 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;
@@ -40,7 +40,8 @@ export default 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;
             }
@@ -135,8 +136,7 @@ export default 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.
@@ -165,13 +165,15 @@ export default class RenderingCacheNode {
             return;
         }
         if (this.cacheState.debugMode) {
-            screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: Color4.yellow });
+            screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), {
+                fill: 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);
             }
@@ -189,7 +191,7 @@ export default 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)) {
@@ -210,7 +212,9 @@ export default 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 = [];
@@ -240,7 +244,9 @@ export default class RenderingCacheNode {
                             }
                             if (this.cacheState.debugMode) {
                                 // Clay for adding new elements
-                                screenRenderer.drawRect(this.region, 2 * viewport.getSizeOfPixelOnCanvas(), { fill: Color4.clay });
+                                screenRenderer.drawRect(this.region, 2 * viewport.getSizeOfPixelOnCanvas(), {
+                                    fill: Color4.clay,
+                                });
                             }
                         }
                     }
@@ -261,7 +267,9 @@ export default class RenderingCacheNode {
                         }
                         if (this.cacheState.debugMode) {
                             // Red for full rerender
-                            screenRenderer.drawRect(this.region, 3 * viewport.getSizeOfPixelOnCanvas(), { fill: Color4.red });
+                            screenRenderer.drawRect(this.region, 3 * viewport.getSizeOfPixelOnCanvas(), {
+                                fill: Color4.red,
+                            });
                         }
                     }
                     this.renderedIds = leafIds;
@@ -280,7 +288,9 @@ export default class RenderingCacheNode {
                     screenRenderer.endObject();
                     if (this.cacheState.debugMode) {
                         // Green for no cache needed render
-                        screenRenderer.drawRect(this.region, 2 * viewport.getSizeOfPixelOnCanvas(), { fill: Color4.green });
+                        screenRenderer.drawRect(this.region, 2 * viewport.getSizeOfPixelOnCanvas(), {
+                            fill: Color4.green,
+                        });
                     }
                 }
             }
@@ -292,7 +302,7 @@ export default 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 = [];
             }
         }
@@ -303,7 +313,7 @@ export default 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;
@@ -312,7 +322,8 @@ export default 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]) {
@@ -325,7 +336,7 @@ export default 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/mjs/rendering/caching/testUtils.mjs

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

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

@@ -20,7 +20,9 @@ export default 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/mjs/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;

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

@@ -5,31 +5,8 @@ import  { visualEquivalent }  from '../RenderablePathSpec.mjs';
 /**
  * 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 {
     /**
@@ -131,8 +108,8 @@ export default class CanvasRenderer extends AbstractRenderer {
         // Approximate the curve if small enough.
         const delta1 = p2.minus(p1);
         const delta2 = p3.minus(p2);
-        if (delta1.magnitudeSquared() < this.minSquareCurveApproxDist
-            && delta2.magnitudeSquared() < this.minSquareCurveApproxDist) {
+        if (delta1.magnitudeSquared() < this.minSquareCurveApproxDist &&
+            delta2.magnitudeSquared() < this.minSquareCurveApproxDist) {
             this.ctx.lineTo(p3.x, p3.y);
         }
         else {
@@ -225,7 +202,8 @@ export default class CanvasRenderer extends AbstractRenderer {
             }
         }
         // If exiting an object with a too-small-to-draw bounding box,
-        if (this.ignoreObjectsAboveLevel !== null && this.getNestingLevel() <= this.ignoreObjectsAboveLevel) {
+        if (this.ignoreObjectsAboveLevel !== null &&
+            this.getNestingLevel() <= this.ignoreObjectsAboveLevel) {
             this.ignoreObjectsAboveLevel = null;
             this.ignoringObject = false;
         }

package/dist/mjs/rendering/renderers/DummyRenderer.mjs

@@ -99,7 +99,7 @@ export default class DummyRenderer extends AbstractRenderer {
         this.renderedPathCount += other.renderedPathCount;
         this.lastFillStyle = other.lastFillStyle;
         this.lastPoint = other.lastPoint;
-        this.pointBuffer.push(...other.pointBuffer.map(point => {
+        this.pointBuffer.push(...other.pointBuffer.map((point) => {
             return transform.transformVec2(point);
         }));
     }