js-draw 0.25.1 → 1.0.0

package/dist/cjs/rendering/Display.js

@@ -1,13 +1,15 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderingMode = void 0;
-var CanvasRenderer_1 = require("./renderers/CanvasRenderer");
-var types_1 = require("../types");
-var DummyRenderer_1 = require("./renderers/DummyRenderer");
-var Vec2_1 = require("../math/Vec2");
-var RenderingCache_1 = require("./caching/RenderingCache");
-var TextOnlyRenderer_1 = require("./renderers/TextOnlyRenderer");
-var Color4_1 = require("../Color4");
+const CanvasRenderer_1 = __importDefault(require("./renderers/CanvasRenderer"));
+const types_1 = require("../types");
+const DummyRenderer_1 = __importDefault(require("./renderers/DummyRenderer"));
+const math_1 = require("@js-draw/math");
+const RenderingCache_1 = __importDefault(require("./caching/RenderingCache"));
+const TextOnlyRenderer_1 = __importDefault(require("./renderers/TextOnlyRenderer"));
 var RenderingMode;
 (function (RenderingMode) {
     RenderingMode[RenderingMode["DummyRenderer"] = 0] = "DummyRenderer";
@@ -26,10 +28,9 @@ var RenderingMode;
  * const colorAtCenter = editor.display.getColorAt(center);
  * ```
  */
-var Display = /** @class */ (function () {
+class Display {
     /** @internal */
-    function Display(editor, mode, parent) {
-        var _this = this;
+    constructor(editor, mode, parent) {
         this.editor = editor;
         this.parent = parent;
         this.textRerenderOutput = null;
@@ -37,7 +38,7 @@ var Display = /** @class */ (function () {
          * @returns the color at the given point on the dry ink renderer, or `null` if `screenPos`
          * 	is not on the display.
          */
-        this.getColorAt = function (_screenPos) {
+        this.getColorAt = (_screenPos) => {
             return null;
         };
         if (mode === RenderingMode.CanvasRenderer) {
@@ -48,13 +49,13 @@ var Display = /** @class */ (function () {
             this.wetInkRenderer = new DummyRenderer_1.default(editor.viewport);
         }
         else {
-            throw new Error("Unknown rendering mode, ".concat(mode, "!"));
+            throw new Error(`Unknown rendering mode, ${mode}!`);
         }
         this.textRenderer = new TextOnlyRenderer_1.default(editor.viewport, editor.localization);
         this.initializeTextRendering();
-        var cacheBlockResolution = Vec2_1.Vec2.of(600, 600);
+        const cacheBlockResolution = math_1.Vec2.of(600, 600);
         this.cache = new RenderingCache_1.default({
-            createRenderer: function () {
+            createRenderer: () => {
                 if (mode === RenderingMode.DummyRenderer) {
                     return new DummyRenderer_1.default(editor.viewport);
                 }
@@ -63,14 +64,14 @@ var Display = /** @class */ (function () {
                 }
                 // Make the canvas slightly larger than each cache block to prevent
                 // seams.
-                var canvas = document.createElement('canvas');
+                const canvas = document.createElement('canvas');
                 canvas.width = cacheBlockResolution.x + 1;
                 canvas.height = cacheBlockResolution.y + 1;
-                var ctx = canvas.getContext('2d');
+                const ctx = canvas.getContext('2d');
                 return new CanvasRenderer_1.default(ctx, editor.viewport);
             },
-            isOfCorrectType: function (renderer) {
-                return _this.dryInkRenderer.canRenderFromWithoutDataLoss(renderer);
+            isOfCorrectType: (renderer) => {
+                return this.dryInkRenderer.canRenderFromWithoutDataLoss(renderer);
             },
             blockResolution: cacheBlockResolution,
             cacheSize: 600 * 600 * 4 * 90,
@@ -81,43 +82,33 @@ var Display = /** @class */ (function () {
             // Require about 105 strokes with 4 parts each to use the cache at all.
             minProportionalRenderTimeToUseCache: 105 * 4,
         });
-        this.editor.notifier.on(types_1.EditorEventType.DisplayResized, function (event) {
-            var _a;
+        this.editor.notifier.on(types_1.EditorEventType.DisplayResized, event => {
             if (event.kind !== types_1.EditorEventType.DisplayResized) {
                 throw new Error('Mismatched event.kinds!');
             }
-            (_a = _this.resizeSurfacesCallback) === null || _a === void 0 ? void 0 : _a.call(_this);
+            this.resizeSurfacesCallback?.();
         });
     }
-    Object.defineProperty(Display.prototype, "width", {
-        /**
-         * @returns the visible width of the display (e.g. how much
-         * space the display's element takes up in the x direction
-         * in the DOM).
-         */
-        get: function () {
-            return this.dryInkRenderer.displaySize().x;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Display.prototype, "height", {
-        get: function () {
-            return this.dryInkRenderer.displaySize().y;
-        },
-        enumerable: false,
-        configurable: true
-    });
+    /**
+     * @returns the visible width of the display (e.g. how much
+     * space the display's element takes up in the x direction
+     * in the DOM).
+     */
+    get width() {
+        return this.dryInkRenderer.displaySize().x;
+    }
+    get height() {
+        return this.dryInkRenderer.displaySize().y;
+    }
     /** @internal */
-    Display.prototype.getCache = function () {
+    getCache() {
         return this.cache;
-    };
-    Display.prototype.initializeCanvasRendering = function () {
-        var _this = this;
-        var dryInkCanvas = document.createElement('canvas');
-        var wetInkCanvas = document.createElement('canvas');
-        var dryInkCtx = dryInkCanvas.getContext('2d');
-        var wetInkCtx = wetInkCanvas.getContext('2d');
+    }
+    initializeCanvasRendering() {
+        const dryInkCanvas = document.createElement('canvas');
+        const wetInkCanvas = document.createElement('canvas');
+        const dryInkCtx = dryInkCanvas.getContext('2d');
+        const wetInkCtx = wetInkCanvas.getContext('2d');
         this.dryInkRenderer = new CanvasRenderer_1.default(dryInkCtx, this.editor.viewport);
         this.wetInkRenderer = new CanvasRenderer_1.default(wetInkCtx, this.editor.viewport);
         dryInkCanvas.className = 'dryInkCanvas';
@@ -126,8 +117,8 @@ var Display = /** @class */ (function () {
             this.parent.appendChild(dryInkCanvas);
             this.parent.appendChild(wetInkCanvas);
         }
-        this.resizeSurfacesCallback = function () {
-            var hasSizeMismatch = function (canvas) {
+        this.resizeSurfacesCallback = () => {
+            const hasSizeMismatch = (canvas) => {
                 return canvas.clientHeight !== canvas.height || canvas.clientWidth !== canvas.width;
             };
             // Ensure that the drawing surfaces sizes match the
@@ -137,86 +128,82 @@ var Display = /** @class */ (function () {
                 dryInkCanvas.height = dryInkCanvas.clientHeight;
                 wetInkCanvas.width = wetInkCanvas.clientWidth;
                 wetInkCanvas.height = wetInkCanvas.clientHeight;
-                _this.editor.notifier.dispatch(types_1.EditorEventType.DisplayResized, {
+                this.editor.notifier.dispatch(types_1.EditorEventType.DisplayResized, {
                     kind: types_1.EditorEventType.DisplayResized,
-                    newSize: Vec2_1.Vec2.of(_this.width, _this.height),
+                    newSize: math_1.Vec2.of(this.width, this.height),
                 });
             }
         };
         this.resizeSurfacesCallback();
-        this.flattenCallback = function () {
+        this.flattenCallback = () => {
             dryInkCtx.drawImage(wetInkCanvas, 0, 0);
         };
-        this.getColorAt = function (screenPos) {
-            var pixel = dryInkCtx.getImageData(screenPos.x, screenPos.y, 1, 1);
-            var data = pixel === null || pixel === void 0 ? void 0 : pixel.data;
+        this.getColorAt = (screenPos) => {
+            const pixel = dryInkCtx.getImageData(screenPos.x, screenPos.y, 1, 1);
+            const data = pixel?.data;
             if (data) {
-                var color = Color4_1.default.ofRGBA(data[0] / 255, data[1] / 255, data[2] / 255, data[3] / 255);
+                const color = math_1.Color4.ofRGBA(data[0] / 255, data[1] / 255, data[2] / 255, data[3] / 255);
                 return color;
             }
             return null;
         };
-    };
-    Display.prototype.initializeTextRendering = function () {
-        var _this = this;
-        var textRendererOutputContainer = document.createElement('div');
+    }
+    initializeTextRendering() {
+        const textRendererOutputContainer = document.createElement('div');
         textRendererOutputContainer.classList.add('textRendererOutputContainer');
-        var rerenderButton = document.createElement('button');
+        const rerenderButton = document.createElement('button');
         rerenderButton.classList.add('rerenderButton');
         rerenderButton.innerText = this.editor.localization.rerenderAsText;
         this.textRerenderOutput = document.createElement('div');
         this.textRerenderOutput.setAttribute('aria-live', 'polite');
-        rerenderButton.onclick = function () {
-            _this.rerenderAsText();
+        rerenderButton.onclick = () => {
+            this.rerenderAsText();
         };
         textRendererOutputContainer.replaceChildren(rerenderButton, this.textRerenderOutput);
         this.editor.createHTMLOverlay(textRendererOutputContainer);
-    };
+    }
     /**
      * Rerenders the text-based display.
      * The text-based display is intended for screen readers and can be navigated to by pressing `tab`.
      */
-    Display.prototype.rerenderAsText = function () {
+    rerenderAsText() {
         this.textRenderer.clear();
         this.editor.image.render(this.textRenderer, this.editor.viewport);
         if (this.textRerenderOutput) {
             this.textRerenderOutput.innerText = this.textRenderer.getDescription();
         }
-    };
+    }
     /**
      * Clears the main drawing surface and otherwise prepares for a rerender.
      *
      * @returns the dry ink renderer.
      */
-    Display.prototype.startRerender = function () {
-        var _a;
-        (_a = this.resizeSurfacesCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+    startRerender() {
+        this.resizeSurfacesCallback?.();
         this.dryInkRenderer.clear();
         return this.dryInkRenderer;
-    };
+    }
     /**
      * If `draftMode`, the dry ink renderer is configured to render
      * low-quality output.
      */
-    Display.prototype.setDraftMode = function (draftMode) {
+    setDraftMode(draftMode) {
         this.dryInkRenderer.setDraftMode(draftMode);
-    };
+    }
     /** @internal */
-    Display.prototype.getDryInkRenderer = function () {
+    getDryInkRenderer() {
         return this.dryInkRenderer;
-    };
+    }
     /**
      * @returns The renderer used for showing action previews (e.g. an unfinished stroke).
      * The `wetInkRenderer`'s surface is stacked above the `dryInkRenderer`'s.
      */
-    Display.prototype.getWetInkRenderer = function () {
+    getWetInkRenderer() {
         return this.wetInkRenderer;
-    };
+    }
     /** Re-renders the contents of the wetInkRenderer onto the dryInkRenderer. */
-    Display.prototype.flatten = function () {
-        var _a;
-        (_a = this.flattenCallback) === null || _a === void 0 ? void 0 : _a.call(this);
-    };
-    return Display;
-}());
+    flatten() {
+        this.flattenCallback?.();
+    }
+}
 exports.default = Display;

package/dist/cjs/rendering/RenderablePathSpec.d.ts

@@ -0,0 +1,15 @@
+import { Path, PathCommand, Point2, Rect2 } from '@js-draw/math';
+import RenderingStyle from './RenderingStyle';
+interface RenderablePathSpec {
+    startPoint: Point2;
+    commands: PathCommand[];
+    style: RenderingStyle;
+    path?: Path;
+}
+export declare const pathFromRenderable: (renderable: RenderablePathSpec) => Path;
+export declare const pathToRenderable: (path: Path, style: RenderingStyle) => RenderablePathSpec;
+/**
+ * @returns a Path that, when rendered, looks roughly equivalent to the given path.
+ */
+export declare const visualEquivalent: (renderablePath: RenderablePathSpec, visibleRect: Rect2) => RenderablePathSpec;
+export default RenderablePathSpec;

package/dist/cjs/rendering/RenderablePathSpec.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.visualEquivalent = exports.pathToRenderable = exports.pathFromRenderable = void 0;
+const math_1 = require("@js-draw/math");
+const pathFromRenderable = (renderable) => {
+    if (renderable.path) {
+        return renderable.path;
+    }
+    return new math_1.Path(renderable.startPoint, renderable.commands);
+};
+exports.pathFromRenderable = pathFromRenderable;
+const pathToRenderable = (path, style) => {
+    return {
+        startPoint: path.startPoint,
+        style,
+        commands: path.parts,
+        path,
+    };
+};
+exports.pathToRenderable = pathToRenderable;
+/**
+ * @returns a Path that, when rendered, looks roughly equivalent to the given path.
+ */
+const visualEquivalent = (renderablePath, visibleRect) => {
+    const path = (0, exports.pathFromRenderable)(renderablePath);
+    const strokeWidth = renderablePath.style.stroke?.width ?? 0;
+    const onlyStroked = strokeWidth > 0 && renderablePath.style.fill.a === 0;
+    // Scale the expanded rect --- the visual equivalent is only close for huge strokes.
+    const expandedRect = visibleRect.grownBy(strokeWidth)
+        .transformedBoundingBox(math_1.Mat33.scaling2D(4, visibleRect.center));
+    // TODO: Handle simplifying very small paths.
+    if (expandedRect.containsRect(path.bbox.grownBy(strokeWidth))) {
+        return renderablePath;
+    }
+    const parts = [];
+    let startPoint = path.startPoint;
+    for (const part of path.parts) {
+        const partBBox = math_1.Path.computeBBoxForSegment(startPoint, part).grownBy(strokeWidth);
+        let endPoint;
+        if (part.kind === math_1.PathCommandType.LineTo || part.kind === math_1.PathCommandType.MoveTo) {
+            endPoint = part.point;
+        }
+        else {
+            endPoint = part.endPoint;
+        }
+        const intersectsVisible = partBBox.intersects(visibleRect);
+        if (intersectsVisible) {
+            // TODO: Can we trim parts of paths that intersect the visible rectangle?
+            parts.push(part);
+        }
+        else if (onlyStroked || part.kind === math_1.PathCommandType.MoveTo) {
+            // We're stroking (not filling) and the path doesn't intersect the bounding box.
+            // Don't draw it, but preserve the endpoints.
+            parts.push({
+                kind: math_1.PathCommandType.MoveTo,
+                point: endPoint,
+            });
+        }
+        else {
+            // Otherwise, we may be filling. Try to roughly preserve the filled region.
+            parts.push({
+                kind: math_1.PathCommandType.LineTo,
+                point: endPoint,
+            });
+        }
+        startPoint = endPoint;
+    }
+    return (0, exports.pathToRenderable)(new math_1.Path(path.startPoint, parts), renderablePath.style);
+};
+exports.visualEquivalent = visualEquivalent;

package/dist/cjs/rendering/RenderingStyle.d.ts

@@ -1,4 +1,4 @@
-import Color4 from '../Color4';
+import { Color4 } from '@js-draw/math';
 interface RenderingStyle {
     readonly fill: Color4;
     readonly stroke?: {
@@ -12,7 +12,7 @@ export declare const cloneStyle: (style: RenderingStyle) => {
     stroke: {
         color: Color4;
         width: number;
-    };
+    } | undefined;
 };
 export declare const stylesEqual: (a: RenderingStyle, b: RenderingStyle) => boolean;
 export declare const styleToJSON: (style: RenderingStyle) => {
@@ -20,12 +20,12 @@ export declare const styleToJSON: (style: RenderingStyle) => {
     stroke: {
         color: string;
         width: number;
-    };
+    } | undefined;
 };
 export declare const styleFromJSON: (json: Record<string, any>) => {
     fill: Color4;
     stroke: {
         color: Color4;
         width: any;
-    };
+    } | undefined;
 };

package/dist/cjs/rendering/RenderingStyle.js

@@ -1,56 +1,46 @@
 "use strict";
-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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.styleFromJSON = exports.styleToJSON = exports.stylesEqual = exports.cloneStyle = void 0;
-var Color4_1 = require("../Color4");
-var cloneStyle = function (style) {
+const math_1 = require("@js-draw/math");
+const cloneStyle = (style) => {
     return {
         fill: style.fill,
-        stroke: style.stroke ? __assign({}, style.stroke) : undefined,
+        stroke: style.stroke ? {
+            ...style.stroke
+        } : undefined,
     };
 };
 exports.cloneStyle = cloneStyle;
-var stylesEqual = function (a, b) {
-    var _a, _b, _c, _d, _e, _f;
-    var result = a === b || (a.fill.eq(b.fill)
+const stylesEqual = (a, b) => {
+    const result = a === b || (a.fill.eq(b.fill)
         && (a.stroke == undefined) === (b.stroke == undefined)
-        && ((_d = (_b = (_a = a.stroke) === null || _a === void 0 ? void 0 : _a.color) === null || _b === void 0 ? void 0 : _b.eq((_c = b.stroke) === null || _c === void 0 ? void 0 : _c.color)) !== null && _d !== void 0 ? _d : true)
-        && ((_e = a.stroke) === null || _e === void 0 ? void 0 : _e.width) === ((_f = b.stroke) === null || _f === void 0 ? void 0 : _f.width));
+        && (a.stroke?.color?.eq(b.stroke?.color) ?? true)
+        && a.stroke?.width === b.stroke?.width);
     // Map undefined/null -> false
-    return result !== null && result !== void 0 ? result : false;
+    return result ?? false;
 };
 exports.stylesEqual = stylesEqual;
 // Returns an object that can be converted to a JSON string with
 // JSON.stringify.
-var styleToJSON = function (style) {
-    var stroke = !style.stroke ? undefined : {
+const styleToJSON = (style) => {
+    const stroke = !style.stroke ? undefined : {
         color: style.stroke.color.toHexString(),
         width: style.stroke.width,
     };
     return {
         fill: style.fill.toHexString(),
-        stroke: stroke,
+        stroke,
     };
 };
 exports.styleToJSON = styleToJSON;
-var styleFromJSON = function (json) {
-    var stroke = json.stroke ? {
-        color: Color4_1.default.fromHex(json.stroke.color),
+const styleFromJSON = (json) => {
+    const stroke = json.stroke ? {
+        color: math_1.Color4.fromHex(json.stroke.color),
         width: json.stroke.width,
     } : undefined;
     return {
-        fill: Color4_1.default.fromHex(json.fill),
-        stroke: stroke,
+        fill: math_1.Color4.fromHex(json.fill),
+        stroke,
     };
 };
 exports.styleFromJSON = styleFromJSON;

package/dist/cjs/rendering/TextRenderingStyle.d.ts

@@ -14,17 +14,17 @@ export interface TextRenderingStyle {
 export default TextRenderingStyle;
 export declare const cloneTextStyle: (style: TextRenderingStyle) => {
     renderingStyle: {
-        fill: import("../Color4").default;
+        fill: import("@js-draw/math").Color4;
         stroke: {
-            color: import("../Color4").default;
+            color: import("@js-draw/math").Color4;
             width: number;
-        };
+        } | undefined;
     };
     size: number;
     fontFamily: string;
-    fontWeight?: string;
-    fontStyle?: string;
-    fontVariant?: string;
+    fontWeight?: string | undefined;
+    fontStyle?: string | undefined;
+    fontVariant?: string | undefined;
 };
 export declare const textStyleFromJSON: (json: any) => TextRenderingStyle;
 export declare const textStyleToJSON: (style: TextRenderingStyle) => {
@@ -33,11 +33,11 @@ export declare const textStyleToJSON: (style: TextRenderingStyle) => {
         stroke: {
             color: string;
             width: number;
-        };
+        } | undefined;
     };
     size: number;
     fontFamily: string;
-    fontWeight?: string;
-    fontStyle?: string;
-    fontVariant?: string;
+    fontWeight?: string | undefined;
+    fontStyle?: string | undefined;
+    fontVariant?: string | undefined;
 };

package/dist/cjs/rendering/TextRenderingStyle.js

@@ -1,30 +1,22 @@
 "use strict";
-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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.textStyleToJSON = exports.textStyleFromJSON = exports.cloneTextStyle = void 0;
-var RenderingStyle_1 = require("./RenderingStyle");
-var cloneTextStyle = function (style) {
-    return __assign(__assign({}, style), { renderingStyle: (0, RenderingStyle_1.cloneStyle)(style.renderingStyle) });
+const RenderingStyle_1 = require("./RenderingStyle");
+const cloneTextStyle = (style) => {
+    return {
+        ...style,
+        renderingStyle: (0, RenderingStyle_1.cloneStyle)(style.renderingStyle),
+    };
 };
 exports.cloneTextStyle = cloneTextStyle;
-var textStyleFromJSON = function (json) {
+const textStyleFromJSON = (json) => {
     if (typeof json === 'string') {
         json = JSON.parse(json);
     }
     if (typeof (json.fontFamily) !== 'string') {
         throw new Error('Serialized textStyle missing string fontFamily attribute!');
     }
-    var style = {
+    const style = {
         renderingStyle: (0, RenderingStyle_1.styleFromJSON)(json.renderingStyle),
         size: json.size,
         fontWeight: json.fontWeight,
@@ -34,7 +26,10 @@ var textStyleFromJSON = function (json) {
     return style;
 };
 exports.textStyleFromJSON = textStyleFromJSON;
-var textStyleToJSON = function (style) {
-    return __assign(__assign({}, style), { renderingStyle: (0, RenderingStyle_1.styleToJSON)(style.renderingStyle) });
+const textStyleToJSON = (style) => {
+    return {
+        ...style,
+        renderingStyle: (0, RenderingStyle_1.styleToJSON)(style.renderingStyle),
+    };
 };
 exports.textStyleToJSON = textStyleToJSON;

package/dist/cjs/rendering/caching/CacheRecord.d.ts

@@ -1,5 +1,4 @@
-import Mat33 from '../../math/Mat33';
-import Rect2 from '../../math/shapes/Rect2';
+import { Mat33, Rect2 } from '@js-draw/math';
 import AbstractRenderer from '../renderers/AbstractRenderer';
 import { BeforeDeallocCallback, CacheState } from './types';
 export default class CacheRecord {

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

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var Mat33_1 = require("../../math/Mat33");
+const math_1 = require("@js-draw/math");
 // Represents a cached renderer/canvas
 // This is not a [CacheNode] -- it handles cached renderers and does not have sub-renderers.
-var CacheRecord = /** @class */ (function () {
-    function CacheRecord(onBeforeDeallocCallback, cacheState) {
+class CacheRecord {
+    constructor(onBeforeDeallocCallback, cacheState) {
         this.onBeforeDeallocCallback = onBeforeDeallocCallback;
         this.cacheState = cacheState;
         this.allocd = false;
@@ -14,24 +14,23 @@ var CacheRecord = /** @class */ (function () {
         this.lastUsedCycle = -1;
         this.allocd = true;
     }
-    CacheRecord.prototype.startRender = function () {
+    startRender() {
         this.lastUsedCycle = this.cacheState.currentRenderingCycle;
         if (!this.allocd) {
             throw new Error('Only alloc\'d canvases can be rendered to');
         }
         return this.renderer;
-    };
-    CacheRecord.prototype.dealloc = function () {
-        var _a;
-        (_a = this.onBeforeDeallocCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    dealloc() {
+        this.onBeforeDeallocCallback?.();
         this.allocd = false;
         this.onBeforeDeallocCallback = null;
         this.lastUsedCycle = 0;
-    };
-    CacheRecord.prototype.isAllocd = function () {
+    }
+    isAllocd() {
         return this.allocd;
-    };
-    CacheRecord.prototype.realloc = function (newDeallocCallback) {
+    }
+    realloc(newDeallocCallback) {
         if (this.allocd) {
             this.dealloc();
         }
@@ -39,21 +38,20 @@ var CacheRecord = /** @class */ (function () {
         this.onBeforeDeallocCallback = newDeallocCallback;
         this.lastUsedCycle = this.cacheState.currentRenderingCycle;
         this.allocCount++;
-    };
-    CacheRecord.prototype.getLastUsedCycle = function () {
+    }
+    getLastUsedCycle() {
         return this.lastUsedCycle;
-    };
+    }
     // Returns the transformation that maps [drawTo] to this' renderable region
     // (i.e. a [cacheProps.blockResolution]-sized rectangle with top left at (0, 0))
-    CacheRecord.prototype.getTransform = function (drawTo) {
-        var transform = Mat33_1.default.scaling2D(this.cacheState.props.blockResolution.x / drawTo.size.x).rightMul(Mat33_1.default.translation(drawTo.topLeft.times(-1)));
+    getTransform(drawTo) {
+        const transform = math_1.Mat33.scaling2D(this.cacheState.props.blockResolution.x / drawTo.size.x).rightMul(math_1.Mat33.translation(drawTo.topLeft.times(-1)));
         return transform;
-    };
-    CacheRecord.prototype.setRenderingRegion = function (drawTo) {
+    }
+    setRenderingRegion(drawTo) {
         this.renderer.setTransform(
         // Invert to map objects instead of the viewport
         this.getTransform(drawTo));
-    };
-    return CacheRecord;
-}());
+    }
+}
 exports.default = CacheRecord;

package/dist/cjs/rendering/caching/CacheRecordManager.d.ts

@@ -1,6 +1,6 @@
 import { BeforeDeallocCallback, CacheProps, CacheState } from './types';
 import CacheRecord from './CacheRecord';
-import Rect2 from '../../math/shapes/Rect2';
+import { Rect2 } from '@js-draw/math';
 export declare class CacheRecordManager {
     private cacheRecords;
     private maxCanvases;