js-draw 0.17.3 → 0.18.0

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

@@ -0,0 +1,326 @@
+"use strict";
+// A cache record with sub-nodes.
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Color4_1 = __importDefault(require("../../Color4"));
+const EditorImage_1 = require("../../EditorImage");
+const Rect2_1 = __importDefault(require("../../math/Rect2"));
+// 3x3 divisions for each node.
+const cacheDivisionSize = 3;
+// True: Show rendering updates.
+const debugMode = false;
+class RenderingCacheNode {
+    constructor(region, cacheState) {
+        this.region = region;
+        this.cacheState = cacheState;
+        // invariant: instantiatedChildren.length === 9
+        this.instantiatedChildren = [];
+        this.parent = null;
+        this.cachedRenderer = null;
+        // invariant: sortedInAscendingOrder(renderedIds)
+        this.renderedIds = [];
+        this.renderedMaxZIndex = null;
+    }
+    // Creates a previous layer of the cache tree and adds this as a child near the
+    // center of the previous layer's children.
+    // Returns this' parent if it already exists.
+    generateParent() {
+        if (this.parent) {
+            return this.parent;
+        }
+        const parentRegion = Rect2_1.default.fromCorners(this.region.topLeft.minus(this.region.size), this.region.bottomRight.plus(this.region.size));
+        const parent = new RenderingCacheNode(parentRegion, this.cacheState);
+        parent.generateChildren();
+        // Ensure the new node is matches the middle child's region.
+        const checkTolerance = this.region.maxDimension / 100;
+        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');
+        }
+        // Replace the middle child
+        parent.instantiatedChildren[middleChildIdx] = this;
+        this.parent = parent;
+        return parent;
+    }
+    // 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) {
+                console.warn('Cache element has zero size! Not generating children.');
+                return;
+            }
+            for (const rect of childRects) {
+                const child = new RenderingCacheNode(rect, this.cacheState);
+                child.parent = this;
+                this.instantiatedChildren.push(child);
+            }
+        }
+        this.checkRep();
+    }
+    // Returns CacheNodes directly contained within this.
+    getChildren() {
+        this.checkRep();
+        this.generateChildren();
+        return this.instantiatedChildren;
+    }
+    smallestChildContaining(rect) {
+        var _a;
+        const largerThanChildren = rect.maxDimension > this.region.maxDimension / cacheDivisionSize;
+        if (!this.region.containsRect(rect) || largerThanChildren) {
+            return null;
+        }
+        for (const child of this.getChildren()) {
+            if (child.region.containsRect(rect)) {
+                return (_a = child.smallestChildContaining(rect)) !== null && _a !== void 0 ? _a : child;
+            }
+        }
+        return null;
+    }
+    // => [true] iff [this] can be rendered without too much scaling
+    renderingWouldBeHighEnoughResolution(viewport) {
+        // Determine how 1px in this corresponds to 1px on the canvas.
+        //  this.region.w is in canvas units. Thus,
+        const sizeOfThisPixelOnCanvas = this.region.w / this.cacheState.props.blockResolution.x;
+        const sizeOfThisPixelOnScreen = viewport.getScaleFactor() * sizeOfThisPixelOnCanvas;
+        if (sizeOfThisPixelOnScreen > this.cacheState.props.maxScale) {
+            return false;
+        }
+        return true;
+    }
+    // => [true] if all children of this can be rendered from their caches.
+    allChildrenCanRender(viewport, leavesSortedById) {
+        if (this.instantiatedChildren.length === 0) {
+            return false;
+        }
+        for (const child of this.instantiatedChildren) {
+            if (!child.region.intersects(viewport.visibleRect)) {
+                continue;
+            }
+            if (!child.renderingIsUpToDate(this.idsOfIntersecting(leavesSortedById))) {
+                return false;
+            }
+        }
+        return true;
+    }
+    computeSortedByLeafIds(leaves) {
+        const ids = leaves.slice();
+        ids.sort((a, b) => a.getId() - b.getId());
+        return ids;
+    }
+    // Returns a list of the ids of the nodes intersecting this
+    idsOfIntersecting(nodes) {
+        const result = [];
+        for (const node of nodes) {
+            if (node.getBBox().intersects(this.region)) {
+                result.push(node.getId());
+            }
+        }
+        return result;
+    }
+    // Returns true iff all elems of this.renderedIds are in sortedIds.
+    // sortedIds should be sorted by z-index (or some other order, so long as they are
+    // sorted by the same thing as this.renderedIds.)
+    allRenderedIdsIn(sortedIds) {
+        if (this.renderedIds.length > sortedIds.length) {
+            return false;
+        }
+        for (let i = 0; i < this.renderedIds.length; i++) {
+            if (sortedIds[i] !== this.renderedIds[i]) {
+                return false;
+            }
+        }
+        return true;
+    }
+    renderingIsUpToDate(sortedIds) {
+        if (this.cachedRenderer === null || sortedIds.length !== this.renderedIds.length) {
+            return false;
+        }
+        return this.allRenderedIdsIn(sortedIds);
+    }
+    // Render all [items] within [viewport]
+    renderItems(screenRenderer, items, viewport) {
+        var _a, _b;
+        if (!viewport.visibleRect.intersects(this.region)
+            || items.length === 0) {
+            return;
+        }
+        const newItems = [];
+        // Divide [items] until nodes are leaves or smaller than this
+        for (const item of items) {
+            const bbox = item.getBBox();
+            if (!bbox.intersects(this.region)) {
+                continue;
+            }
+            if (bbox.maxDimension >= this.region.maxDimension) {
+                newItems.push(...item.getChildrenOrSelfIntersectingRegion(this.region));
+            }
+            else {
+                newItems.push(item);
+            }
+        }
+        items = newItems;
+        // Can we cache at all?
+        if (!this.cacheState.props.isOfCorrectType(screenRenderer)) {
+            items.forEach(item => item.render(screenRenderer, viewport.visibleRect));
+            return;
+        }
+        if (debugMode) {
+            screenRenderer.drawRect(this.region, 0.5 * viewport.getSizeOfPixelOnCanvas(), { fill: Color4_1.default.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 => {
+                    return item.getBBox().intersects(child.region);
+                }), viewport);
+            }
+        }
+        else {
+            // Determine whether we already have rendered the items
+            const tooSmallToRender = (rect) => rect.w / this.region.w < 1 / this.cacheState.props.blockResolution.x;
+            const leaves = [];
+            for (const item of items) {
+                leaves.push(...item.getLeavesIntersectingRegion(this.region, tooSmallToRender));
+            }
+            (0, EditorImage_1.sortLeavesByZIndex)(leaves);
+            const leavesByIds = this.computeSortedByLeafIds(leaves);
+            // No intersecting leaves? No need to render
+            if (leavesByIds.length === 0) {
+                return;
+            }
+            const leafIds = leavesByIds.map(leaf => leaf.getId());
+            let thisRenderer;
+            if (!this.renderingIsUpToDate(leafIds)) {
+                if (this.allChildrenCanRender(viewport, leavesByIds)) {
+                    for (const child of this.getChildren()) {
+                        child.renderItems(screenRenderer, items, viewport);
+                    }
+                    return;
+                }
+                let leafApproxRenderTime = 0;
+                for (const leaf of leavesByIds) {
+                    leafApproxRenderTime += leaf.getContent().getProportionalRenderingTime();
+                }
+                // Is it worth it to render the items?
+                if (leafApproxRenderTime > this.cacheState.props.minProportionalRenderTimePerCache) {
+                    let fullRerenderNeeded = true;
+                    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) {
+                        // 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 = [];
+                        let minNewZIndex = null;
+                        for (let i = 0; i < leavesByIds.length; i++) {
+                            const leaf = leavesByIds[i];
+                            const content = leaf.getContent();
+                            const zIndex = content.getZIndex();
+                            if (i >= this.renderedIds.length || leaf.getId() !== this.renderedIds[i]) {
+                                newLeaves.push(leaf);
+                                if (minNewZIndex === null || zIndex < minNewZIndex) {
+                                    minNewZIndex = zIndex;
+                                }
+                            }
+                        }
+                        if (minNewZIndex !== null && minNewZIndex > this.renderedMaxZIndex) {
+                            fullRerenderNeeded = false;
+                            thisRenderer = this.cachedRenderer.startRender();
+                            // Looping is faster than re-sorting.
+                            for (let i = 0; i < leaves.length; i++) {
+                                const leaf = leaves[i];
+                                const zIndex = leaf.getContent().getZIndex();
+                                if (zIndex > this.renderedMaxZIndex) {
+                                    leaf.render(thisRenderer, this.region);
+                                    this.renderedMaxZIndex = zIndex;
+                                }
+                            }
+                            if (debugMode) {
+                                screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: Color4_1.default.clay });
+                            }
+                        }
+                    }
+                    else if (debugMode) {
+                        console.log('Decided on a full re-render. Reason: At least one of the following is false:', '\n leafIds.length > this.renderedIds.length: ', leafIds.length > this.renderedIds.length, '\n this.allRenderedIdsIn(leafIds): ', this.allRenderedIdsIn(leafIds), '\n this.renderedMaxZIndex !== null: ', this.renderedMaxZIndex !== null, '\n\nthis.rerenderedIds: ', this.renderedIds, ', leafIds: ', leafIds);
+                    }
+                    if (fullRerenderNeeded) {
+                        thisRenderer = this.cachedRenderer.startRender();
+                        thisRenderer.clear();
+                        this.renderedMaxZIndex = null;
+                        for (const leaf of leaves) {
+                            const content = leaf.getContent();
+                            (_a = this.renderedMaxZIndex) !== null && _a !== void 0 ? _a : (this.renderedMaxZIndex = content.getZIndex());
+                            this.renderedMaxZIndex = Math.max(this.renderedMaxZIndex, content.getZIndex());
+                            leaf.render(thisRenderer, this.region);
+                        }
+                        if (debugMode) {
+                            screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: Color4_1.default.red });
+                        }
+                    }
+                    this.renderedIds = leafIds;
+                }
+                else {
+                    (_b = this.cachedRenderer) === null || _b === void 0 ? void 0 : _b.dealloc();
+                    // Slightly increase the clip region to prevent seams.
+                    // Divide by two because grownBy expands the rectangle on all sides.
+                    const pixelSize = viewport.getSizeOfPixelOnCanvas();
+                    const expandedRegion = new Rect2_1.default(this.region.x, this.region.y, this.region.w + pixelSize, this.region.h + pixelSize);
+                    const clip = true;
+                    screenRenderer.startObject(expandedRegion, clip);
+                    for (const leaf of leaves) {
+                        leaf.render(screenRenderer, this.region.intersection(viewport.visibleRect));
+                    }
+                    screenRenderer.endObject();
+                }
+            }
+            else {
+                thisRenderer = this.cachedRenderer.startRender();
+            }
+            if (thisRenderer) {
+                const transformMat = this.cachedRenderer.getTransform(this.region).inverse();
+                screenRenderer.renderFromOtherOfSameType(transformMat, thisRenderer);
+            }
+            // Can we clean up this' children? (Are they unused?)
+            if (this.instantiatedChildren.every(child => child.isEmpty())) {
+                this.instantiatedChildren = [];
+            }
+        }
+        this.checkRep();
+    }
+    // Returns true iff this/its children have no cached state.
+    isEmpty() {
+        if (this.cachedRenderer !== null) {
+            return false;
+        }
+        return this.instantiatedChildren.every(child => child.isEmpty());
+    }
+    onRegionDealloc() {
+        this.cachedRenderer = null;
+        if (this.isEmpty()) {
+            this.instantiatedChildren = [];
+        }
+    }
+    checkRep() {
+        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]) {
+            console.error(this.renderedIds);
+            throw new Error('Repcheck: First two ids are not in ascending order!');
+        }
+        for (const child of this.instantiatedChildren) {
+            if (child.parent !== this) {
+                throw new Error('Children should be linked to their parents!');
+            }
+        }
+        if (this.cachedRenderer && !this.cachedRenderer.isAllocd()) {
+            throw new Error('this\' cachedRenderer != null, but is dealloc\'d');
+        }
+    }
+}
+exports.default = RenderingCacheNode;

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

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCache = void 0;
+const Vec2_1 = require("../../math/Vec2");
+const DummyRenderer_1 = __importDefault(require("../renderers/DummyRenderer"));
+const createEditor_1 = __importDefault(require("../../testing/createEditor"));
+const RenderingCache_1 = __importDefault(require("./RenderingCache"));
+// Override any default test options with [cacheOptions]
+const createCache = (onRenderAlloc, cacheOptions) => {
+    const editor = (0, createEditor_1.default)();
+    const cache = new RenderingCache_1.default(Object.assign({ createRenderer() {
+            const renderer = new DummyRenderer_1.default(editor.viewport);
+            onRenderAlloc === null || onRenderAlloc === void 0 ? void 0 : onRenderAlloc(renderer);
+            return renderer;
+        },
+        isOfCorrectType(renderer) {
+            return renderer instanceof DummyRenderer_1.default;
+        }, blockResolution: Vec2_1.Vec2.of(500, 500), cacheSize: 500 * 10 * 4, maxScale: 2, minProportionalRenderTimePerCache: 0, minProportionalRenderTimeToUseCache: 0 }, cacheOptions));
+    return {
+        cache,
+        editor
+    };
+};
+exports.createCache = createCache;

package/dist/cjs/src/rendering/caching/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/{src → cjs/src}/rendering/lib.d.ts

@@ -1,3 +1,5 @@
 export { default as AbstractRenderer } from './renderers/AbstractRenderer';
 export { default as DummyRenderer } from './renderers/DummyRenderer';
+export { default as SVGRenderer } from './renderers/SVGRenderer';
+export { default as CanvasRenderer } from './renderers/CanvasRenderer';
 export { default as Display } from './Display';

package/dist/cjs/src/rendering/lib.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Display = exports.CanvasRenderer = exports.SVGRenderer = exports.DummyRenderer = exports.AbstractRenderer = void 0;
+var AbstractRenderer_1 = require("./renderers/AbstractRenderer");
+Object.defineProperty(exports, "AbstractRenderer", { enumerable: true, get: function () { return __importDefault(AbstractRenderer_1).default; } });
+var DummyRenderer_1 = require("./renderers/DummyRenderer");
+Object.defineProperty(exports, "DummyRenderer", { enumerable: true, get: function () { return __importDefault(DummyRenderer_1).default; } });
+var SVGRenderer_1 = require("./renderers/SVGRenderer");
+Object.defineProperty(exports, "SVGRenderer", { enumerable: true, get: function () { return __importDefault(SVGRenderer_1).default; } });
+var CanvasRenderer_1 = require("./renderers/CanvasRenderer");
+Object.defineProperty(exports, "CanvasRenderer", { enumerable: true, get: function () { return __importDefault(CanvasRenderer_1).default; } });
+var Display_1 = require("./Display");
+Object.defineProperty(exports, "Display", { enumerable: true, get: function () { return __importDefault(Display_1).default; } });

package/dist/cjs/src/rendering/localization.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultTextRendererLocalization = void 0;
+exports.defaultTextRendererLocalization = {
+    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}`,
+    imageNode: (label) => `Image: ${label}`,
+    unlabeledImageNode: 'Unlabeled image',
+    rerenderAsText: 'Re-render as text',
+};

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

@@ -0,0 +1,170 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Path_1 = __importStar(require("../../math/Path"));
+const Vec2_1 = require("../../math/Vec2");
+const RenderingStyle_1 = require("../RenderingStyle");
+class AbstractRenderer {
+    constructor(viewport) {
+        this.viewport = viewport;
+        // If null, this' transformation is linked to the Viewport
+        this.selfTransform = null;
+        this.transformStack = [];
+        this.objectLevel = 0;
+        this.currentPaths = null;
+    }
+    // this.canvasToScreen, etc. should be used instead of the corresponding
+    // methods on Viewport.
+    getViewport() { return this.viewport; }
+    setDraftMode(_draftMode) { }
+    flushPath() {
+        if (!this.currentPaths) {
+            return;
+        }
+        let lastStyle = null;
+        for (const path of this.currentPaths) {
+            const { startPoint, commands, style } = path;
+            if (!lastStyle || !(0, RenderingStyle_1.stylesEqual)(lastStyle, style)) {
+                if (lastStyle) {
+                    this.endPath(lastStyle);
+                }
+                this.beginPath(startPoint);
+                lastStyle = style;
+            }
+            else {
+                this.moveTo(startPoint);
+            }
+            for (const command of commands) {
+                if (command.kind === Path_1.PathCommandType.LineTo) {
+                    this.lineTo(command.point);
+                }
+                else if (command.kind === Path_1.PathCommandType.MoveTo) {
+                    this.moveTo(command.point);
+                }
+                else if (command.kind === Path_1.PathCommandType.CubicBezierTo) {
+                    this.traceCubicBezierCurve(command.controlPoint1, command.controlPoint2, command.endPoint);
+                }
+                else if (command.kind === Path_1.PathCommandType.QuadraticBezierTo) {
+                    this.traceQuadraticBezierCurve(command.controlPoint, command.endPoint);
+                }
+            }
+        }
+        if (lastStyle) {
+            this.endPath(lastStyle);
+        }
+    }
+    drawPath(path) {
+        // If we're being called outside of an object,
+        // we can't delay rendering
+        if (this.objectLevel === 0) {
+            this.currentPaths = [path];
+            this.flushPath();
+            this.currentPaths = null;
+        }
+        else {
+            // Otherwise, don't render paths all at once. This prevents faint lines between
+            // segments of the same stroke from being visible.
+            this.currentPaths.push(path);
+        }
+    }
+    // Strokes a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill].
+    // This is equivalent to `drawPath(Path.fromRect(...).toRenderable(...))`.
+    drawRect(rect, lineWidth, lineFill) {
+        const path = Path_1.default.fromRect(rect, lineWidth);
+        this.drawPath(path.toRenderable(lineFill));
+    }
+    // Fills a rectangle.
+    fillRect(rect, fill) {
+        const path = Path_1.default.fromRect(rect);
+        this.drawPath(path.toRenderable({ fill }));
+    }
+    // Note the start of an object with the given bounding box.
+    // Renderers are not required to support [clip]
+    startObject(_boundingBox, _clip) {
+        this.currentPaths = [];
+        this.objectLevel++;
+    }
+    /**
+     * Notes the end of an object.
+     * @param _loaderData - a map from strings to JSON-ifyable objects
+     * and contains properties attached to the object by whatever loader loaded the image. This
+     * is used to preserve attributes not supported by js-draw when loading/saving an image.
+     * Renderers may ignore this.
+     *
+     * @param _objectTags - a list of labels (e.g. `className`s) to be attached to the object.
+     * Renderers may ignore this.
+     */
+    endObject(_loaderData, _objectTags) {
+        // Render the paths all at once
+        this.flushPath();
+        this.currentPaths = null;
+        this.objectLevel--;
+        if (this.objectLevel < 0) {
+            throw new Error('More objects have ended than have been started (negative object nesting level)!');
+        }
+    }
+    getNestingLevel() {
+        return this.objectLevel;
+    }
+    // Returns true iff other can be rendered onto this without data loss.
+    canRenderFromWithoutDataLoss(_other) {
+        return false;
+    }
+    // MUST throw if other and this are not of the same base class.
+    renderFromOtherOfSameType(_renderTo, other) {
+        throw new Error(`Unable to render from ${other}: Not implemented`);
+    }
+    // Set a transformation to apply to things before rendering,
+    // replacing the viewport's transform.
+    setTransform(transform) {
+        this.selfTransform = transform;
+    }
+    pushTransform(transform) {
+        this.transformStack.push(this.selfTransform);
+        this.setTransform(this.getCanvasToScreenTransform().rightMul(transform));
+    }
+    popTransform() {
+        var _a;
+        if (this.transformStack.length === 0) {
+            throw new Error('Unable to pop more transforms than have been pushed!');
+        }
+        this.setTransform((_a = this.transformStack.pop()) !== null && _a !== void 0 ? _a : null);
+    }
+    // Get the matrix that transforms a vector on the canvas to a vector on this'
+    // rendering target.
+    getCanvasToScreenTransform() {
+        if (this.selfTransform) {
+            return this.selfTransform;
+        }
+        return this.viewport.canvasToScreenTransform;
+    }
+    canvasToScreen(vec) {
+        return this.getCanvasToScreenTransform().transformVec2(vec);
+    }
+    getSizeOfCanvasPixelOnScreen() {
+        return this.getCanvasToScreenTransform().transformVec3(Vec2_1.Vec2.unitX).length();
+    }
+}
+exports.default = AbstractRenderer;

package/dist/{src → cjs/src}/rendering/renderers/CanvasRenderer.d.ts

@@ -6,6 +6,26 @@ import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
 import TextStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
+/**
+ * Renders onto a `CanvasRenderingContext2D`.
+ *
+ * @example
+ * ```ts
+ * const editor = new Editor(document.body);
+ *
+ * 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);
+ * ```
+ */
 export default class CanvasRenderer extends AbstractRenderer {
     private ctx;
     private ignoreObjectsAboveLevel;
@@ -14,6 +34,11 @@ export default class CanvasRenderer extends AbstractRenderer {
     private minSquareCurveApproxDist;
     private minRenderSizeAnyDimen;
     private minRenderSizeBothDimens;
+    /**
+     * Creates a new `CanvasRenderer` that renders to the given rendering context.
+     * The `viewport` is used to determine the translation/rotation/scaling of the content
+     * to draw.
+     */
     constructor(ctx: CanvasRenderingContext2D, viewport: Viewport);
     private transformBy;
     canRenderFromWithoutDataLoss(other: AbstractRenderer): boolean;