js-draw 0.23.1 → 0.24.0

package/dist/mjs/rendering/caching/RenderingCache.mjs

@@ -0,0 +1,48 @@
+import  Rect2  from '../../math/shapes/Rect2.mjs';
+import  RenderingCacheNode  from './RenderingCacheNode.mjs';
+import  { CacheRecordManager }  from './CacheRecordManager.mjs';
+var RenderingCache = /** @class */ (function () {
+    function RenderingCache(cacheProps) {
+        this.recordManager = new CacheRecordManager(cacheProps);
+        this.sharedState = {
+            props: cacheProps,
+            currentRenderingCycle: 0,
+            recordManager: this.recordManager,
+        };
+        this.recordManager.setSharedState(this.sharedState);
+    }
+    RenderingCache.prototype.render = function (screenRenderer, image, viewport) {
+        var _a;
+        var visibleRect = viewport.visibleRect;
+        this.sharedState.currentRenderingCycle++;
+        // If we can't use the cache,
+        if (!this.sharedState.props.isOfCorrectType(screenRenderer)) {
+            image.render(screenRenderer, visibleRect);
+            return;
+        }
+        if (!this.rootNode) {
+            // Adjust the node so that it has the correct aspect ratio
+            var res = this.sharedState.props.blockResolution;
+            var topLeft = visibleRect.topLeft;
+            this.rootNode = new RenderingCacheNode(new Rect2(topLeft.x, topLeft.y, res.x, res.y), this.sharedState);
+        }
+        while (!this.rootNode.region.containsRect(visibleRect)) {
+            this.rootNode = this.rootNode.generateParent();
+        }
+        this.rootNode = (_a = this.rootNode.smallestChildContaining(visibleRect)) !== null && _a !== void 0 ? _a : this.rootNode;
+        var visibleLeaves = image.getLeavesIntersectingRegion(viewport.visibleRect, function (rect) { return screenRenderer.isTooSmallToRender(rect); });
+        var approxVisibleRenderTime = 0;
+        for (var _i = 0, visibleLeaves_1 = visibleLeaves; _i < visibleLeaves_1.length; _i++) {
+            var leaf = visibleLeaves_1[_i];
+            approxVisibleRenderTime += leaf.getContent().getProportionalRenderingTime();
+        }
+        if (approxVisibleRenderTime > this.sharedState.props.minProportionalRenderTimeToUseCache) {
+            this.rootNode.renderItems(screenRenderer, [image], viewport);
+        }
+        else {
+            image.render(screenRenderer, visibleRect);
+        }
+    };
+    return RenderingCache;
+}());
+export default RenderingCache;

package/dist/mjs/rendering/caching/RenderingCache.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,29 @@
+import { ImageNode } from '../../EditorImage';
+import Rect2 from '../../math/shapes/Rect2';
+import Viewport from '../../Viewport';
+import AbstractRenderer from '../renderers/AbstractRenderer';
+import { CacheState } from './types';
+export default class RenderingCacheNode {
+    readonly region: Rect2;
+    private readonly cacheState;
+    private instantiatedChildren;
+    private parent;
+    private cachedRenderer;
+    private renderedIds;
+    private renderedMaxZIndex;
+    constructor(region: Rect2, cacheState: CacheState);
+    generateParent(): RenderingCacheNode;
+    private generateChildren;
+    private getChildren;
+    smallestChildContaining(rect: Rect2): RenderingCacheNode | null;
+    private renderingWouldBeHighEnoughResolution;
+    private allChildrenCanRender;
+    private computeSortedByLeafIds;
+    private idsOfIntersecting;
+    private allRenderedIdsIn;
+    private renderingIsUpToDate;
+    renderItems(screenRenderer: AbstractRenderer, items: ImageNode[], viewport: Viewport): void;
+    private isEmpty;
+    private onRegionDealloc;
+    private checkRep;
+}

package/dist/mjs/rendering/caching/RenderingCacheNode.mjs

@@ -0,0 +1,338 @@
+// A cache record with sub-nodes.
+import  Color4  from '../../Color4.mjs';
+import  { sortLeavesByZIndex }  from '../../EditorImage.mjs';
+import  Rect2  from '../../math/shapes/Rect2.mjs';
+// 3x3 divisions for each node.
+var cacheDivisionSize = 3;
+// True: Show rendering updates.
+var debugMode = false;
+var RenderingCacheNode = /** @class */ (function () {
+    function RenderingCacheNode(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.
+    RenderingCacheNode.prototype.generateParent = function () {
+        if (this.parent) {
+            return this.parent;
+        }
+        var parentRegion = Rect2.fromCorners(this.region.topLeft.minus(this.region.size), this.region.bottomRight.plus(this.region.size));
+        var parent = new RenderingCacheNode(parentRegion, this.cacheState);
+        parent.generateChildren();
+        // Ensure the new node is matches the middle child's region.
+        var checkTolerance = this.region.maxDimension / 100;
+        var 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.
+    RenderingCacheNode.prototype.generateChildren = function () {
+        if (this.instantiatedChildren.length === 0) {
+            var 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 (var _i = 0, childRects_1 = childRects; _i < childRects_1.length; _i++) {
+                var rect = childRects_1[_i];
+                var child = new RenderingCacheNode(rect, this.cacheState);
+                child.parent = this;
+                this.instantiatedChildren.push(child);
+            }
+        }
+        this.checkRep();
+    };
+    // Returns CacheNodes directly contained within this.
+    RenderingCacheNode.prototype.getChildren = function () {
+        this.checkRep();
+        this.generateChildren();
+        return this.instantiatedChildren;
+    };
+    RenderingCacheNode.prototype.smallestChildContaining = function (rect) {
+        var _a;
+        var largerThanChildren = rect.maxDimension > this.region.maxDimension / cacheDivisionSize;
+        if (!this.region.containsRect(rect) || largerThanChildren) {
+            return null;
+        }
+        for (var _i = 0, _b = this.getChildren(); _i < _b.length; _i++) {
+            var child = _b[_i];
+            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
+    RenderingCacheNode.prototype.renderingWouldBeHighEnoughResolution = function (viewport) {
+        // Determine how 1px in this corresponds to 1px on the canvas.
+        //  this.region.w is in canvas units. Thus,
+        var sizeOfThisPixelOnCanvas = this.region.w / this.cacheState.props.blockResolution.x;
+        var 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.
+    RenderingCacheNode.prototype.allChildrenCanRender = function (viewport, leavesSortedById) {
+        if (this.instantiatedChildren.length === 0) {
+            return false;
+        }
+        for (var _i = 0, _a = this.instantiatedChildren; _i < _a.length; _i++) {
+            var child = _a[_i];
+            if (!child.region.intersects(viewport.visibleRect)) {
+                continue;
+            }
+            if (!child.renderingIsUpToDate(this.idsOfIntersecting(leavesSortedById))) {
+                return false;
+            }
+        }
+        return true;
+    };
+    RenderingCacheNode.prototype.computeSortedByLeafIds = function (leaves) {
+        var ids = leaves.slice();
+        ids.sort(function (a, b) { return a.getId() - b.getId(); });
+        return ids;
+    };
+    // Returns a list of the ids of the nodes intersecting this
+    RenderingCacheNode.prototype.idsOfIntersecting = function (nodes) {
+        var result = [];
+        for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
+            var node = nodes_1[_i];
+            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.)
+    RenderingCacheNode.prototype.allRenderedIdsIn = function (sortedIds) {
+        if (this.renderedIds.length > sortedIds.length) {
+            return false;
+        }
+        for (var i = 0; i < this.renderedIds.length; i++) {
+            if (sortedIds[i] !== this.renderedIds[i]) {
+                return false;
+            }
+        }
+        return true;
+    };
+    RenderingCacheNode.prototype.renderingIsUpToDate = function (sortedIds) {
+        if (this.cachedRenderer === null || sortedIds.length !== this.renderedIds.length) {
+            return false;
+        }
+        return this.allRenderedIdsIn(sortedIds);
+    };
+    // Render all [items] within [viewport]
+    RenderingCacheNode.prototype.renderItems = function (screenRenderer, items, viewport) {
+        var _this = this;
+        var _a, _b;
+        if (!viewport.visibleRect.intersects(this.region)
+            || items.length === 0) {
+            return;
+        }
+        var newItems = [];
+        // Divide [items] until nodes are leaves or smaller than this
+        for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+            var item = items_1[_i];
+            var bbox = item.getBBox();
+            if (!bbox.intersects(this.region)) {
+                continue;
+            }
+            if (bbox.maxDimension >= this.region.maxDimension) {
+                newItems.push.apply(newItems, item.getChildrenOrSelfIntersectingRegion(this.region));
+            }
+            else {
+                newItems.push(item);
+            }
+        }
+        items = newItems;
+        // Can we cache at all?
+        if (!this.cacheState.props.isOfCorrectType(screenRenderer)) {
+            items.forEach(function (item) { return item.render(screenRenderer, viewport.visibleRect); });
+            return;
+        }
+        if (debugMode) {
+            screenRenderer.drawRect(this.region, 0.5 * viewport.getSizeOfPixelOnCanvas(), { fill: Color4.yellow });
+        }
+        // Could we render direclty from [this] or do we need to recurse?
+        var couldRender = this.renderingWouldBeHighEnoughResolution(viewport);
+        if (!couldRender) {
+            var _loop_1 = function (child) {
+                child.renderItems(screenRenderer, items.filter(function (item) {
+                    return item.getBBox().intersects(child.region);
+                }), viewport);
+            };
+            for (var _c = 0, _d = this.getChildren(); _c < _d.length; _c++) {
+                var child = _d[_c];
+                _loop_1(child);
+            }
+        }
+        else {
+            // Determine whether we already have rendered the items
+            var tooSmallToRender = function (rect) { return rect.w / _this.region.w < 1 / _this.cacheState.props.blockResolution.x; };
+            var leaves = [];
+            for (var _e = 0, items_2 = items; _e < items_2.length; _e++) {
+                var item = items_2[_e];
+                leaves.push.apply(leaves, item.getLeavesIntersectingRegion(this.region, tooSmallToRender));
+            }
+            sortLeavesByZIndex(leaves);
+            var leavesByIds = this.computeSortedByLeafIds(leaves);
+            // No intersecting leaves? No need to render
+            if (leavesByIds.length === 0) {
+                return;
+            }
+            var leafIds = leavesByIds.map(function (leaf) { return leaf.getId(); });
+            var thisRenderer = void 0;
+            if (!this.renderingIsUpToDate(leafIds)) {
+                if (this.allChildrenCanRender(viewport, leavesByIds)) {
+                    for (var _f = 0, _g = this.getChildren(); _f < _g.length; _f++) {
+                        var child = _g[_f];
+                        child.renderItems(screenRenderer, items, viewport);
+                    }
+                    return;
+                }
+                var leafApproxRenderTime = 0;
+                for (var _h = 0, leavesByIds_1 = leavesByIds; _h < leavesByIds_1.length; _h++) {
+                    var leaf = leavesByIds_1[_h];
+                    leafApproxRenderTime += leaf.getContent().getProportionalRenderingTime();
+                }
+                // Is it worth it to render the items?
+                if (leafApproxRenderTime > this.cacheState.props.minProportionalRenderTimePerCache) {
+                    var fullRerenderNeeded = true;
+                    if (!this.cachedRenderer) {
+                        this.cachedRenderer = this.cacheState.recordManager.allocCanvas(this.region, function () { return _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.
+                        var newLeaves = [];
+                        var minNewZIndex = null;
+                        for (var i = 0; i < leavesByIds.length; i++) {
+                            var leaf = leavesByIds[i];
+                            var content = leaf.getContent();
+                            var 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 (var i = 0; i < leaves.length; i++) {
+                                var leaf = leaves[i];
+                                var 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.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 (var _j = 0, leaves_1 = leaves; _j < leaves_1.length; _j++) {
+                            var leaf = leaves_1[_j];
+                            var 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.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.
+                    var pixelSize = viewport.getSizeOfPixelOnCanvas();
+                    var expandedRegion = new Rect2(this.region.x, this.region.y, this.region.w + pixelSize, this.region.h + pixelSize);
+                    var clip = true;
+                    screenRenderer.startObject(expandedRegion, clip);
+                    for (var _k = 0, leaves_2 = leaves; _k < leaves_2.length; _k++) {
+                        var leaf = leaves_2[_k];
+                        leaf.render(screenRenderer, this.region.intersection(viewport.visibleRect));
+                    }
+                    screenRenderer.endObject();
+                }
+            }
+            else {
+                thisRenderer = this.cachedRenderer.startRender();
+            }
+            if (thisRenderer) {
+                var transformMat = this.cachedRenderer.getTransform(this.region).inverse();
+                screenRenderer.renderFromOtherOfSameType(transformMat, thisRenderer);
+            }
+            // Can we clean up this' children? (Are they unused?)
+            if (this.instantiatedChildren.every(function (child) { return child.isEmpty(); })) {
+                this.instantiatedChildren = [];
+            }
+        }
+        this.checkRep();
+    };
+    // Returns true iff this/its children have no cached state.
+    RenderingCacheNode.prototype.isEmpty = function () {
+        if (this.cachedRenderer !== null) {
+            return false;
+        }
+        return this.instantiatedChildren.every(function (child) { return child.isEmpty(); });
+    };
+    RenderingCacheNode.prototype.onRegionDealloc = function () {
+        this.cachedRenderer = null;
+        if (this.isEmpty()) {
+            this.instantiatedChildren = [];
+        }
+    };
+    RenderingCacheNode.prototype.checkRep = function () {
+        if (this.instantiatedChildren.length !== cacheDivisionSize * cacheDivisionSize && this.instantiatedChildren.length !== 0) {
+            throw new Error("Repcheck: Wrong number of children. Got ".concat(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 (var _i = 0, _a = this.instantiatedChildren; _i < _a.length; _i++) {
+            var child = _a[_i];
+            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');
+        }
+    };
+    return RenderingCacheNode;
+}());
+export default RenderingCacheNode;

package/dist/mjs/rendering/caching/testUtils.mjs

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import  { Vec2 }  from '../../math/Vec2.mjs';
+import  DummyRenderer  from '../renderers/DummyRenderer.mjs';
+import  createEditor  from '../../testing/createEditor.mjs';
+import  RenderingCache  from './RenderingCache.mjs';
+// Override any default test options with [cacheOptions]
+export var createCache = function (onRenderAlloc, cacheOptions) {
+    var editor = createEditor();
+    var cache = new RenderingCache(__assign({ createRenderer: function () {
+            var renderer = new DummyRenderer(editor.viewport);
+            onRenderAlloc === null || onRenderAlloc === void 0 ? void 0 : onRenderAlloc(renderer);
+            return renderer;
+        }, isOfCorrectType: function (renderer) {
+            return renderer instanceof DummyRenderer;
+        }, blockResolution: Vec2.of(500, 500), cacheSize: 500 * 10 * 4, maxScale: 2, minProportionalRenderTimePerCache: 0, minProportionalRenderTimeToUseCache: 0 }, cacheOptions));
+    return {
+        cache: cache,
+        editor: editor
+    };
+};

package/dist/mjs/rendering/caching/types.mjs

@@ -0,0 +1 @@
+export {};

package/dist/mjs/rendering/localization.mjs

@@ -0,0 +1,9 @@
+export var defaultTextRendererLocalization = {
+    pathNodeCount: function (count) { return "There are ".concat(count, " visible path objects."); },
+    textNodeCount: function (count) { return "There are ".concat(count, " visible text nodes."); },
+    imageNodeCount: function (nodeCount) { return "There are ".concat(nodeCount, " visible image nodes."); },
+    textNode: function (content) { return "Text: ".concat(content); },
+    imageNode: function (label) { return "Image: ".concat(label); },
+    unlabeledImageNode: 'Unlabeled image',
+    rerenderAsText: 'Re-render as text',
+};

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

@@ -0,0 +1,85 @@
+import Color4 from '../../Color4';
+import { LoadSaveDataTable } from '../../components/AbstractComponent';
+import Mat33 from '../../math/Mat33';
+import Path, { PathCommand } from '../../math/shapes/Path';
+import Rect2 from '../../math/shapes/Rect2';
+import { Point2, Vec2 } from '../../math/Vec2';
+import Viewport from '../../Viewport';
+import RenderingStyle from '../RenderingStyle';
+import TextRenderingStyle from '../TextRenderingStyle';
+export interface RenderablePathSpec {
+    startPoint: Point2;
+    commands: PathCommand[];
+    style: RenderingStyle;
+    path?: Path;
+}
+export interface RenderableImage {
+    transform: Mat33;
+    image: HTMLImageElement | HTMLCanvasElement;
+    base64Url: string;
+    label?: string;
+}
+/**
+ * Abstract base class for renderers.
+ *
+ * @see {@link EditorImage.render}
+ */
+export default abstract class AbstractRenderer {
+    private viewport;
+    private selfTransform;
+    private transformStack;
+    protected constructor(viewport: Viewport);
+    protected getViewport(): Viewport;
+    abstract displaySize(): Vec2;
+    abstract clear(): void;
+    protected abstract beginPath(startPoint: Point2): void;
+    protected abstract endPath(style: RenderingStyle): void;
+    protected abstract lineTo(point: Point2): void;
+    protected abstract moveTo(point: Point2): void;
+    protected abstract traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2): void;
+    protected abstract traceQuadraticBezierCurve(controlPoint: Point2, endPoint: Point2): void;
+    abstract drawText(text: string, transform: Mat33, style: TextRenderingStyle): void;
+    abstract drawImage(image: RenderableImage): void;
+    abstract isTooSmallToRender(rect: Rect2): boolean;
+    setDraftMode(_draftMode: boolean): void;
+    protected objectLevel: number;
+    private currentPaths;
+    private flushPath;
+    /**
+     * Draws a styled path. If within an object started by {@link startObject},
+     * the resultant path may not be visible until {@link endObject} is called.
+     */
+    drawPath(path: RenderablePathSpec): void;
+    drawRect(rect: Rect2, lineWidth: number, lineFill: RenderingStyle): void;
+    /** Draws a filled rectangle. */
+    fillRect(rect: Rect2, fill: Color4): void;
+    /**
+     * This should be called whenever a new object is being drawn.
+     *
+     * @param _boundingBox The bounding box of the object to be drawn.
+     * @param _clip Whether content outside `_boundingBox` should be drawn. Renderers
+     *              that override this method are not required to support `_clip`.
+     */
+    startObject(_boundingBox: Rect2, _clip?: boolean): void;
+    /**
+     * 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?: LoadSaveDataTable, _objectTags?: string[]): void;
+    protected getNestingLevel(): number;
+    abstract drawPoints(...points: Point2[]): void;
+    canRenderFromWithoutDataLoss(_other: AbstractRenderer): boolean;
+    renderFromOtherOfSameType(_renderTo: Mat33, other: AbstractRenderer): void;
+    setTransform(transform: Mat33 | null): void;
+    pushTransform(transform: Mat33): void;
+    popTransform(): void;
+    getCanvasToScreenTransform(): Mat33;
+    canvasToScreen(vec: Vec2): Vec2;
+    getSizeOfCanvasPixelOnScreen(): number;
+}