js-draw 0.25.1 → 1.0.0

package/dist/mjs/EditorImage.mjs

@@ -1,59 +1,34 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
     if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
     return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
+var _a, _b, _c;
 import  Viewport  from './Viewport.mjs';
 import  AbstractComponent  from './components/AbstractComponent.mjs';
-import  Rect2  from './math/shapes/Rect2.mjs';
+import { Rect2, Vec2, Mat33 } from '@js-draw/math';
 import  SerializableCommand  from './commands/SerializableCommand.mjs';
 import  EventDispatcher  from './EventDispatcher.mjs';
-import  { Vec2 }  from './math/Vec2.mjs';
-import  Mat33  from './math/Mat33.mjs';
 import  { assertIsNumber, assertIsNumberArray }  from './util/assertions.mjs';
 // @internal Sort by z-index, low to high
-export var sortLeavesByZIndex = function (leaves) {
-    leaves.sort(function (a, b) { return a.getContent().getZIndex() - b.getContent().getZIndex(); });
+export const sortLeavesByZIndex = (leaves) => {
+    leaves.sort((a, b) => a.getContent().getZIndex() - b.getContent().getZIndex());
 };
 export var EditorImageEventType;
 (function (EditorImageEventType) {
     EditorImageEventType[EditorImageEventType["ExportViewportChanged"] = 0] = "ExportViewportChanged";
 })(EditorImageEventType || (EditorImageEventType = {}));
 // Handles lookup/storage of elements in the image
-var EditorImage = /** @class */ (function () {
+class EditorImage {
     // @internal
-    function EditorImage() {
-        var _this = this;
+    constructor() {
+        this.componentCount = 0;
         this.root = new ImageNode();
         this.background = new ImageNode();
         this.componentsById = {};
         this.notifier = new EventDispatcher();
-        this.importExportViewport = new Viewport(function () {
-            _this.notifier.dispatch(EditorImageEventType.ExportViewportChanged, {
-                image: _this,
+        this.importExportViewport = new Viewport(() => {
+            this.notifier.dispatch(EditorImageEventType.ExportViewportChanged, {
+                image: this,
             });
         });
         // Default to a 500x500 image
@@ -61,96 +36,99 @@ var EditorImage = /** @class */ (function () {
     }
     // Returns all components that make up the background of this image. These
     // components are rendered below all other components.
-    EditorImage.prototype.getBackgroundComponents = function () {
-        var result = [];
-        var leaves = this.background.getLeaves();
+    getBackgroundComponents() {
+        const result = [];
+        const leaves = this.background.getLeaves();
         sortLeavesByZIndex(leaves);
-        for (var _i = 0, leaves_1 = leaves; _i < leaves_1.length; _i++) {
-            var leaf = leaves_1[_i];
-            var content = leaf.getContent();
+        for (const leaf of leaves) {
+            const content = leaf.getContent();
             if (content) {
                 result.push(content);
             }
         }
         return result;
-    };
+    }
     // Returns the parent of the given element, if it exists.
-    EditorImage.prototype.findParent = function (elem) {
-        var _b;
-        return (_b = this.background.getChildWithContent(elem)) !== null && _b !== void 0 ? _b : this.root.getChildWithContent(elem);
-    };
+    findParent(elem) {
+        return this.background.getChildWithContent(elem) ?? this.root.getChildWithContent(elem);
+    }
     // Forces a re-render of `elem` when the image is next re-rendered as a whole.
     // Does nothing if `elem` is not in this.
-    EditorImage.prototype.queueRerenderOf = function (elem) {
+    queueRerenderOf(elem) {
         // TODO: Make more efficient (e.g. increase IDs of all parents,
         // make cache take into account last modified time instead of IDs, etc.)
-        var parent = this.findParent(elem);
+        const parent = this.findParent(elem);
         if (parent) {
             parent.remove();
             this.addElementDirectly(elem);
         }
-    };
+    }
     /** @internal */
-    EditorImage.prototype.renderWithCache = function (screenRenderer, cache, viewport) {
+    renderWithCache(screenRenderer, cache, viewport) {
         this.background.render(screenRenderer, viewport.visibleRect);
         cache.render(screenRenderer, this.root, viewport);
-    };
+    }
     /**
      * Renders all nodes visible from `viewport` (or all nodes if `viewport = null`).
      *
      * `viewport` is used to improve rendering performance. If given, it must match
      * the viewport used by the `renderer` (if any).
      */
-    EditorImage.prototype.render = function (renderer, viewport) {
-        this.background.render(renderer, viewport === null || viewport === void 0 ? void 0 : viewport.visibleRect);
-        this.root.render(renderer, viewport === null || viewport === void 0 ? void 0 : viewport.visibleRect);
-    };
+    render(renderer, viewport) {
+        this.background.render(renderer, viewport?.visibleRect);
+        this.root.render(renderer, viewport?.visibleRect);
+    }
     /** Renders all nodes, even ones not within the viewport. @internal */
-    EditorImage.prototype.renderAll = function (renderer) {
+    renderAll(renderer) {
         this.render(renderer, null);
-    };
+    }
     /** @returns all elements in the image, sorted by z-index. This can be slow for large images. */
-    EditorImage.prototype.getAllElements = function () {
-        var leaves = this.root.getLeaves();
+    getAllElements() {
+        const leaves = this.root.getLeaves();
         sortLeavesByZIndex(leaves);
-        return leaves.map(function (leaf) { return 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. */
-    EditorImage.prototype.getElementsIntersectingRegion = function (region) {
-        var leaves = this.root.getLeavesIntersectingRegion(region);
+    getElementsIntersectingRegion(region) {
+        const leaves = this.root.getLeavesIntersectingRegion(region);
         sortLeavesByZIndex(leaves);
-        return leaves.map(function (leaf) { return leaf.getContent(); });
-    };
-    /** @internal */
-    EditorImage.prototype.onDestroyElement = function (elem) {
+        return leaves.map(leaf => leaf.getContent());
+    }
+    /** Called whenever an element is completely removed. @internal */
+    onDestroyElement(elem) {
+        this.componentCount--;
         delete this.componentsById[elem.getId()];
-    };
+    }
     /**
      * @returns the AbstractComponent with `id`, if it exists.
      *
      * @see {@link AbstractComponent.getId}
      */
-    EditorImage.prototype.lookupElement = function (id) {
-        var _b;
-        return (_b = this.componentsById[id]) !== null && _b !== void 0 ? _b : null;
-    };
-    EditorImage.prototype.addElementDirectly = function (elem) {
+    lookupElement(id) {
+        return this.componentsById[id] ?? null;
+    }
+    addElementDirectly(elem) {
         elem.onAddToImage(this);
+        this.componentCount++;
         this.componentsById[elem.getId()] = elem;
         // If a background component, add to the background. Else,
         // add to the normal component tree.
-        var parentTree = elem.isBackground() ? this.background : this.root;
+        const parentTree = elem.isBackground() ? this.background : this.root;
         return parentTree.addLeaf(elem);
-    };
-    EditorImage.prototype.removeElementDirectly = function (element) {
-        var container = this.findParent(element);
-        container === null || container === void 0 ? void 0 : container.remove();
+    }
+    removeElementDirectly(element) {
+        const container = this.findParent(element);
+        container?.remove();
         if (container) {
             this.onDestroyElement(element);
             return true;
         }
         return false;
-    };
+    }
     /**
      * Returns a command that adds the given element to the `EditorImage`.
      * If `applyByFlattening` is true, the content of the wet ink renderer is
@@ -158,155 +136,143 @@ var EditorImage = /** @class */ (function () {
      *
      * @see {@link Display.flatten}
      */
-    EditorImage.addElement = function (elem, applyByFlattening) {
-        if (applyByFlattening === void 0) { applyByFlattening = false; }
+    static addElement(elem, applyByFlattening = false) {
         return new EditorImage.AddElementCommand(elem, applyByFlattening);
-    };
+    }
     /** @see EditorImage.addElement */
-    EditorImage.prototype.addElement = function (elem, applyByFlattening) {
+    addElement(elem, applyByFlattening) {
         return EditorImage.addElement(elem, applyByFlattening);
-    };
+    }
     /**
      * @returns a `Viewport` for rendering the image when importing/exporting.
      */
-    EditorImage.prototype.getImportExportViewport = function () {
+    getImportExportViewport() {
         return this.importExportViewport;
-    };
-    EditorImage.prototype.setImportExportRect = function (imageRect) {
-        var importExportViewport = this.getImportExportViewport();
-        var origSize = importExportViewport.visibleRect.size;
-        var origTransform = importExportViewport.canvasToScreenTransform;
+    }
+    setImportExportRect(imageRect) {
+        const importExportViewport = this.getImportExportViewport();
+        const origSize = importExportViewport.visibleRect.size;
+        const origTransform = importExportViewport.canvasToScreenTransform;
         return new EditorImage.SetImportExportRectCommand(origSize, origTransform, imageRect);
-    };
-    var _a, _b, _c;
-    _a = EditorImage;
-    // A Command that can access private [EditorImage] functionality
-    EditorImage.AddElementCommand = (_b = /** @class */ (function (_super) {
-            __extends(class_1, _super);
-            // If [applyByFlattening], then the rendered content of this element
-            // is present on the display's wet ink canvas. As such, no re-render is necessary
-            // the first time this command is applied (the surfaces are joined instead).
-            function class_1(element, applyByFlattening) {
-                if (applyByFlattening === void 0) { applyByFlattening = false; }
-                var _this = _super.call(this, 'add-element') || this;
-                _this.element = element;
-                _this.applyByFlattening = applyByFlattening;
-                _this.serializedElem = null;
-                // FIXME: The serialized version of this command may be inaccurate if this is
-                //        serialized when this command is not on the top of the undo stack.
-                //
-                // Caching the element's serialized data leads to additional memory usage *and*
-                // sometimes incorrect behavior in collaborative editing.
-                _this.serializedElem = null;
-                if (isNaN(element.getBBox().area)) {
-                    throw new Error('Elements in the image cannot have NaN bounding boxes');
-                }
-                return _this;
+    }
+}
+_a = EditorImage;
+// A Command that can access private [EditorImage] functionality
+EditorImage.AddElementCommand = (_b = class extends SerializableCommand {
+        // If [applyByFlattening], then the rendered content of this element
+        // is present on the display's wet ink canvas. As such, no re-render is necessary
+        // the first time this command is applied (the surfaces are joined instead).
+        constructor(element, applyByFlattening = false) {
+            super('add-element');
+            this.element = element;
+            this.applyByFlattening = applyByFlattening;
+            this.serializedElem = null;
+            // FIXME: The serialized version of this command may be inaccurate if this is
+            //        serialized when this command is not on the top of the undo stack.
+            //
+            // Caching the element's serialized data leads to additional memory usage *and*
+            // sometimes incorrect behavior in collaborative editing.
+            this.serializedElem = null;
+            if (isNaN(element.getBBox().area)) {
+                throw new Error('Elements in the image cannot have NaN bounding boxes');
             }
-            class_1.prototype.apply = function (editor) {
-                editor.image.addElementDirectly(this.element);
-                if (!this.applyByFlattening) {
-                    editor.queueRerender();
-                }
-                else {
-                    this.applyByFlattening = false;
-                    editor.display.flatten();
-                }
-            };
-            class_1.prototype.unapply = function (editor) {
-                editor.image.removeElementDirectly(this.element);
+        }
+        apply(editor) {
+            editor.image.addElementDirectly(this.element);
+            if (!this.applyByFlattening) {
                 editor.queueRerender();
-            };
-            class_1.prototype.description = function (_editor, localization) {
-                return localization.addElementAction(this.element.description(localization));
-            };
-            class_1.prototype.serializeToJSON = function () {
-                var _b;
-                return {
-                    elemData: (_b = this.serializedElem) !== null && _b !== void 0 ? _b : this.element.serialize(),
-                };
-            };
-            return class_1;
-        }(SerializableCommand)),
-        __setFunctionName(_b, "AddElementCommand"),
-        (function () {
-            SerializableCommand.register('add-element', function (json, editor) {
-                var id = json.elemData.id;
-                var foundElem = editor.image.lookupElement(id);
-                var elem = foundElem !== null && foundElem !== void 0 ? foundElem : AbstractComponent.deserialize(json.elemData);
-                var result = new EditorImage.AddElementCommand(elem);
-                result.serializedElem = json.elemData;
-                return result;
-            });
-        })(),
-        _b);
-    // Handles resizing the background import/export region of the image.
-    EditorImage.SetImportExportRectCommand = (_c = /** @class */ (function (_super) {
-            __extends(class_2, _super);
-            function class_2(originalSize, originalTransform, finalRect) {
-                var _this = _super.call(this, EditorImage.SetImportExportRectCommand.commandId) || this;
-                _this.originalSize = originalSize;
-                _this.originalTransform = originalTransform;
-                _this.finalRect = finalRect;
-                return _this;
             }
-            class_2.prototype.apply = function (editor) {
-                var viewport = editor.image.getImportExportViewport();
-                viewport.updateScreenSize(this.finalRect.size);
-                viewport.resetTransform(Mat33.translation(this.finalRect.topLeft.times(-1)));
-                editor.queueRerender();
-            };
-            class_2.prototype.unapply = function (editor) {
-                var viewport = editor.image.getImportExportViewport();
-                viewport.updateScreenSize(this.originalSize);
-                viewport.resetTransform(this.originalTransform);
-                editor.queueRerender();
-            };
-            class_2.prototype.description = function (_editor, localization) {
-                return localization.resizeOutputCommand(this.finalRect);
+            else {
+                this.applyByFlattening = false;
+                editor.display.flatten();
+            }
+        }
+        unapply(editor) {
+            editor.image.removeElementDirectly(this.element);
+            editor.queueRerender();
+        }
+        description(_editor, localization) {
+            return localization.addElementAction(this.element.description(localization));
+        }
+        serializeToJSON() {
+            return {
+                elemData: this.serializedElem ?? this.element.serialize(),
             };
-            class_2.prototype.serializeToJSON = function () {
-                return {
-                    originalSize: this.originalSize.xy,
-                    originalTransform: this.originalTransform.toArray(),
-                    newRegion: {
-                        x: this.finalRect.x,
-                        y: this.finalRect.y,
-                        w: this.finalRect.w,
-                        h: this.finalRect.h,
-                    },
-                };
+        }
+    },
+    __setFunctionName(_b, "AddElementCommand"),
+    (() => {
+        SerializableCommand.register('add-element', (json, editor) => {
+            const id = json.elemData.id;
+            const foundElem = editor.image.lookupElement(id);
+            const elem = foundElem ?? AbstractComponent.deserialize(json.elemData);
+            const result = new EditorImage.AddElementCommand(elem);
+            result.serializedElem = json.elemData;
+            return result;
+        });
+    })(),
+    _b);
+// Handles resizing the background import/export region of the image.
+EditorImage.SetImportExportRectCommand = (_c = class extends SerializableCommand {
+        constructor(originalSize, originalTransform, finalRect) {
+            super(EditorImage.SetImportExportRectCommand.commandId);
+            this.originalSize = originalSize;
+            this.originalTransform = originalTransform;
+            this.finalRect = finalRect;
+        }
+        apply(editor) {
+            const viewport = editor.image.getImportExportViewport();
+            viewport.updateScreenSize(this.finalRect.size);
+            viewport.resetTransform(Mat33.translation(this.finalRect.topLeft.times(-1)));
+            editor.queueRerender();
+        }
+        unapply(editor) {
+            const viewport = editor.image.getImportExportViewport();
+            viewport.updateScreenSize(this.originalSize);
+            viewport.resetTransform(this.originalTransform);
+            editor.queueRerender();
+        }
+        description(_editor, localization) {
+            return localization.resizeOutputCommand(this.finalRect);
+        }
+        serializeToJSON() {
+            return {
+                originalSize: this.originalSize.xy,
+                originalTransform: this.originalTransform.toArray(),
+                newRegion: {
+                    x: this.finalRect.x,
+                    y: this.finalRect.y,
+                    w: this.finalRect.w,
+                    h: this.finalRect.h,
+                },
             };
-            return class_2;
-        }(SerializableCommand)),
-        __setFunctionName(_c, "SetImportExportRectCommand"),
-        _c.commandId = 'set-import-export-rect',
-        (function () {
-            var commandId = _c.commandId;
-            SerializableCommand.register(commandId, function (json, _editor) {
-                assertIsNumber(json.originalSize.x);
-                assertIsNumber(json.originalSize.y);
-                assertIsNumberArray(json.originalTransform);
-                assertIsNumberArray([
-                    json.newRegion.x,
-                    json.newRegion.y,
-                    json.newRegion.w,
-                    json.newRegion.h,
-                ]);
-                var originalSize = Vec2.ofXY(json.originalSize);
-                var originalTransform = new (Mat33.bind.apply(Mat33, __spreadArray([void 0], json.originalTransform, false)))();
-                var finalRect = new Rect2(json.newRegion.x, json.newRegion.y, json.newRegion.w, json.newRegion.h);
-                return new EditorImage.SetImportExportRectCommand(originalSize, originalTransform, finalRect);
-            });
-        })(),
-        _c);
-    return EditorImage;
-}());
+        }
+    },
+    __setFunctionName(_c, "SetImportExportRectCommand"),
+    _c.commandId = 'set-import-export-rect',
+    (() => {
+        const commandId = _c.commandId;
+        SerializableCommand.register(commandId, (json, _editor) => {
+            assertIsNumber(json.originalSize.x);
+            assertIsNumber(json.originalSize.y);
+            assertIsNumberArray(json.originalTransform);
+            assertIsNumberArray([
+                json.newRegion.x,
+                json.newRegion.y,
+                json.newRegion.w,
+                json.newRegion.h,
+            ]);
+            const originalSize = Vec2.ofXY(json.originalSize);
+            const originalTransform = new Mat33(...json.originalTransform);
+            const finalRect = new Rect2(json.newRegion.x, json.newRegion.y, json.newRegion.w, json.newRegion.h);
+            return new EditorImage.SetImportExportRectCommand(originalSize, originalTransform, finalRect);
+        });
+    })(),
+    _c);
 export default EditorImage;
 /** Part of the Editor's image. @internal */
-export var ImageNode = /** @class */ (function () {
-    function ImageNode(parent) {
-        if (parent === void 0) { parent = null; }
+export class ImageNode {
+    constructor(parent = null) {
         this.parent = parent;
         this.targetChildCount = 30;
         this.children = [];
@@ -314,77 +280,75 @@ export var ImageNode = /** @class */ (function () {
         this.content = null;
         this.id = ImageNode.idCounter++;
     }
-    ImageNode.prototype.getId = function () {
+    getId() {
         return this.id;
-    };
-    ImageNode.prototype.onContentChange = function () {
+    }
+    onContentChange() {
         this.id = ImageNode.idCounter++;
-    };
-    ImageNode.prototype.getContent = function () {
+    }
+    getContent() {
         return this.content;
-    };
-    ImageNode.prototype.getParent = function () {
+    }
+    getParent() {
         return this.parent;
-    };
-    ImageNode.prototype.getChildrenIntersectingRegion = function (region) {
-        return this.children.filter(function (child) {
+    }
+    getChildrenIntersectingRegion(region) {
+        return this.children.filter(child => {
             return child.getBBox().intersects(region);
         });
-    };
-    ImageNode.prototype.getChildrenOrSelfIntersectingRegion = function (region) {
+    }
+    getChildrenOrSelfIntersectingRegion(region) {
         if (this.content) {
             return [this];
         }
         return this.getChildrenIntersectingRegion(region);
-    };
+    }
     // Returns a list of `ImageNode`s with content (and thus no children).
-    ImageNode.prototype.getLeavesIntersectingRegion = function (region, isTooSmall) {
-        var result = [];
-        var current;
-        var workList = [];
+    getLeavesIntersectingRegion(region, isTooSmall) {
+        const result = [];
+        let current;
+        const workList = [];
         workList.push(this);
-        var toNext = function () {
+        const toNext = () => {
             current = undefined;
-            var next = workList.pop();
-            if (next && !(isTooSmall === null || isTooSmall === void 0 ? void 0 : isTooSmall(next.bbox))) {
+            const next = workList.pop();
+            if (next && !isTooSmall?.(next.bbox)) {
                 current = next;
                 if (current.content !== null && current.getBBox().intersection(region)) {
                     result.push(current);
                 }
-                workList.push.apply(workList, current.getChildrenIntersectingRegion(region));
+                workList.push(...current.getChildrenIntersectingRegion(region));
             }
         };
         while (workList.length > 0) {
             toNext();
         }
         return result;
-    };
+    }
     // Returns the child of this with the target content or `null` if no
     // such child exists.
-    ImageNode.prototype.getChildWithContent = function (target) {
-        var candidates = this.getLeavesIntersectingRegion(target.getBBox());
-        for (var _i = 0, candidates_1 = candidates; _i < candidates_1.length; _i++) {
-            var candidate = candidates_1[_i];
+    getChildWithContent(target) {
+        const candidates = this.getLeavesIntersectingRegion(target.getBBox());
+        for (const candidate of candidates) {
             if (candidate.getContent() === target) {
                 return candidate;
             }
         }
         return null;
-    };
+    }
     // Returns a list of leaves with this as an ancestor.
     // Like getLeavesInRegion, but does not check whether ancestors are in a given rectangle
-    ImageNode.prototype.getLeaves = function () {
+    getLeaves() {
         if (this.content) {
             return [this];
         }
-        var result = [];
-        for (var _i = 0, _b = this.children; _i < _b.length; _i++) {
-            var child = _b[_i];
-            result.push.apply(result, child.getLeaves());
+        const result = [];
+        for (const child of this.children) {
+            result.push(...child.getLeaves());
         }
         return result;
-    };
-    ImageNode.prototype.addLeaf = function (leaf) {
+    }
+    addLeaf(leaf) {
         this.onContentChange();
         if (this.content === null && this.children.length === 0) {
             this.content = leaf;
@@ -393,7 +357,7 @@ export var ImageNode = /** @class */ (function () {
         }
         if (this.content !== null) {
             console.assert(this.children.length === 0);
-            var contentNode = new ImageNode(this);
+            const contentNode = new ImageNode(this);
             contentNode.content = this.content;
             this.content = null;
             this.children.push(contentNode);
@@ -401,14 +365,14 @@ export var ImageNode = /** @class */ (function () {
         }
         // If this node is contained within the leaf, make this and the leaf
         // share a parent.
-        var leafBBox = leaf.getBBox();
+        const leafBBox = leaf.getBBox();
         if (leafBBox.containsRect(this.getBBox())) {
-            var nodeForNewLeaf = new ImageNode(this);
+            const nodeForNewLeaf = new ImageNode(this);
             if (this.children.length < this.targetChildCount) {
                 this.children.push(nodeForNewLeaf);
             }
             else {
-                var nodeForChildren = new ImageNode(this);
+                const nodeForChildren = new ImageNode(this);
                 nodeForChildren.children = this.children;
                 this.children = [nodeForNewLeaf, nodeForChildren];
                 nodeForChildren.recomputeBBox(true);
@@ -416,58 +380,55 @@ export var ImageNode = /** @class */ (function () {
             }
             return nodeForNewLeaf.addLeaf(leaf);
         }
-        var containingNodes = this.children.filter(function (child) { return 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
-            containingNodes.sort(function (a, b) { return a.getBBox().area - b.getBBox().area; });
+            containingNodes.sort((a, b) => a.getBBox().area - b.getBBox().area);
             // Choose the smallest child that contains the new element.
-            var result = containingNodes[0].addLeaf(leaf);
+            const result = containingNodes[0].addLeaf(leaf);
             result.rebalance();
             return result;
         }
-        var newNode = new ImageNode(this);
+        const newNode = new ImageNode(this);
         this.children.push(newNode);
         newNode.content = leaf;
         newNode.recomputeBBox(true);
         return newNode;
-    };
-    ImageNode.prototype.getBBox = function () {
+    }
+    getBBox() {
         return this.bbox;
-    };
+    }
     // Recomputes this' bounding box. If [bubbleUp], also recompute
     // this' ancestors bounding boxes. This also re-computes this' bounding box
     // in the z-direction (z-indicies).
-    ImageNode.prototype.recomputeBBox = function (bubbleUp) {
-        var _b;
-        var oldBBox = this.bbox;
+    recomputeBBox(bubbleUp) {
+        const oldBBox = this.bbox;
         if (this.content !== null) {
             this.bbox = this.content.getBBox();
         }
         else {
-            this.bbox = Rect2.union.apply(Rect2, this.children.map(function (child) { return child.getBBox(); }));
+            this.bbox = Rect2.union(...this.children.map(child => child.getBBox()));
         }
         if (bubbleUp && !oldBBox.eq(this.bbox)) {
-            (_b = this.parent) === null || _b === void 0 ? void 0 : _b.recomputeBBox(true);
+            this.parent?.recomputeBBox(true);
         }
-    };
-    ImageNode.prototype.updateParents = function (recursive) {
-        if (recursive === void 0) { recursive = false; }
-        for (var _i = 0, _b = this.children; _i < _b.length; _i++) {
-            var child = _b[_i];
+    }
+    updateParents(recursive = false) {
+        for (const child of this.children) {
             child.parent = this;
             if (recursive) {
                 child.updateParents(recursive);
             }
         }
-    };
-    ImageNode.prototype.rebalance = function () {
+    }
+    rebalance() {
         // If the current node is its parent's only child,
         if (this.parent && this.parent.children.length === 1) {
             console.assert(this.parent.content === null);
             console.assert(this.parent.children[0] === this);
             // Remove this' parent, if this' parent isn't the root.
-            var oldParent = this.parent;
+            const oldParent = this.parent;
             if (oldParent.parent !== null) {
                 oldParent.children = [];
                 this.parent = oldParent.parent;
@@ -482,23 +443,21 @@ export var ImageNode = /** @class */ (function () {
                 this.parent = null;
             }
         }
-    };
+    }
     // Remove this node and all of its children
-    ImageNode.prototype.remove = function () {
-        var _this = this;
-        var _b;
-        (_b = this.content) === null || _b === void 0 ? void 0 : _b.onRemoveFromImage();
+    remove() {
+        this.content?.onRemoveFromImage();
         if (!this.parent) {
             this.content = null;
             this.children = [];
             return;
         }
-        var oldChildCount = this.parent.children.length;
-        this.parent.children = this.parent.children.filter(function (node) {
-            return node !== _this;
+        const oldChildCount = this.parent.children.length;
+        this.parent.children = this.parent.children.filter(node => {
+            return node !== this;
         });
-        console.assert(this.parent.children.length === oldChildCount - 1, "".concat(oldChildCount - 1, " \u2260 ").concat(this.parent.children.length, " after removing all nodes equal to ").concat(this, ". Nodes should only be removed once."));
-        this.parent.children.forEach(function (child) {
+        console.assert(this.parent.children.length === oldChildCount - 1, `${oldChildCount - 1} ≠ ${this.parent.children.length} after removing all nodes equal to ${this}. Nodes should only be removed once.`);
+        this.parent.children.forEach(child => {
             child.rebalance();
         });
         this.parent.recomputeBBox(true);
@@ -506,22 +465,20 @@ export var ImageNode = /** @class */ (function () {
         this.content = null;
         this.parent = null;
         this.children = [];
-    };
-    ImageNode.prototype.render = function (renderer, visibleRect) {
-        var leaves;
+    }
+    render(renderer, visibleRect) {
+        let leaves;
         if (visibleRect) {
-            leaves = this.getLeavesIntersectingRegion(visibleRect, function (rect) { return renderer.isTooSmallToRender(rect); });
+            leaves = this.getLeavesIntersectingRegion(visibleRect, rect => renderer.isTooSmallToRender(rect));
         }
         else {
             leaves = this.getLeaves();
         }
         sortLeavesByZIndex(leaves);
-        for (var _i = 0, leaves_2 = leaves; _i < leaves_2.length; _i++) {
-            var leaf = leaves_2[_i];
+        for (const leaf of leaves) {
             // Leaves by definition have content
             leaf.getContent().render(renderer, visibleRect);
         }
-    };
-    ImageNode.idCounter = 0;
-    return ImageNode;
-}());
+    }
+}
+ImageNode.idCounter = 0;