js-draw 0.17.4 → 0.18.0

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

@@ -0,0 +1,214 @@
+"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;
+const CanvasRenderer_1 = __importDefault(require("./renderers/CanvasRenderer"));
+const types_1 = require("../types");
+const DummyRenderer_1 = __importDefault(require("./renderers/DummyRenderer"));
+const Vec2_1 = require("../math/Vec2");
+const RenderingCache_1 = __importDefault(require("./caching/RenderingCache"));
+const TextOnlyRenderer_1 = __importDefault(require("./renderers/TextOnlyRenderer"));
+const Color4_1 = __importDefault(require("../Color4"));
+var RenderingMode;
+(function (RenderingMode) {
+    RenderingMode[RenderingMode["DummyRenderer"] = 0] = "DummyRenderer";
+    RenderingMode[RenderingMode["CanvasRenderer"] = 1] = "CanvasRenderer";
+    // SVGRenderer is not supported by the main display
+})(RenderingMode = exports.RenderingMode || (exports.RenderingMode = {}));
+/**
+ * Handles `HTMLCanvasElement`s (or other drawing surfaces if being used) used to display the editor's contents.
+ *
+ * @example
+ * ```
+ * const editor = new Editor(document.body);
+ * const w = editor.display.width;
+ * const h = editor.display.height;
+ * const center = Vec2.of(w / 2, h / 2);
+ * const colorAtCenter = editor.display.getColorAt(center);
+ * ```
+ */
+class Display {
+    /** @internal */
+    constructor(editor, mode, parent) {
+        this.editor = editor;
+        this.parent = parent;
+        this.textRerenderOutput = null;
+        /**
+         * @returns the color at the given point on the dry ink renderer, or `null` if `screenPos`
+         * 	is not on the display.
+         */
+        this.getColorAt = (_screenPos) => {
+            return null;
+        };
+        if (mode === RenderingMode.CanvasRenderer) {
+            this.initializeCanvasRendering();
+        }
+        else if (mode === RenderingMode.DummyRenderer) {
+            this.dryInkRenderer = new DummyRenderer_1.default(editor.viewport);
+            this.wetInkRenderer = new DummyRenderer_1.default(editor.viewport);
+        }
+        else {
+            throw new Error(`Unknown rendering mode, ${mode}!`);
+        }
+        this.textRenderer = new TextOnlyRenderer_1.default(editor.viewport, editor.localization);
+        this.initializeTextRendering();
+        const cacheBlockResolution = Vec2_1.Vec2.of(600, 600);
+        this.cache = new RenderingCache_1.default({
+            createRenderer: () => {
+                if (mode === RenderingMode.DummyRenderer) {
+                    return new DummyRenderer_1.default(editor.viewport);
+                }
+                else if (mode !== RenderingMode.CanvasRenderer) {
+                    throw new Error('Unspported rendering mode');
+                }
+                // Make the canvas slightly larger than each cache block to prevent
+                // seams.
+                const canvas = document.createElement('canvas');
+                canvas.width = cacheBlockResolution.x + 1;
+                canvas.height = cacheBlockResolution.y + 1;
+                const ctx = canvas.getContext('2d');
+                return new CanvasRenderer_1.default(ctx, editor.viewport);
+            },
+            isOfCorrectType: (renderer) => {
+                return this.dryInkRenderer.canRenderFromWithoutDataLoss(renderer);
+            },
+            blockResolution: cacheBlockResolution,
+            cacheSize: 600 * 600 * 4 * 90,
+            maxScale: 1.3,
+            // Require about 20 strokes with 4 parts each to cache an image in one of the
+            // parts of the cache grid.
+            minProportionalRenderTimePerCache: 20 * 4,
+            // 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, event => {
+            var _a;
+            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);
+        });
+    }
+    /**
+     * @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 */
+    getCache() {
+        return this.cache;
+    }
+    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';
+        wetInkCanvas.className = 'wetInkCanvas';
+        if (this.parent) {
+            this.parent.appendChild(dryInkCanvas);
+            this.parent.appendChild(wetInkCanvas);
+        }
+        this.resizeSurfacesCallback = () => {
+            const hasSizeMismatch = (canvas) => {
+                return canvas.clientHeight !== canvas.height || canvas.clientWidth !== canvas.width;
+            };
+            // Ensure that the drawing surfaces sizes match the
+            // canvas' sizes to prevent stretching.
+            if (hasSizeMismatch(dryInkCanvas) || hasSizeMismatch(wetInkCanvas)) {
+                dryInkCanvas.width = dryInkCanvas.clientWidth;
+                dryInkCanvas.height = dryInkCanvas.clientHeight;
+                wetInkCanvas.width = wetInkCanvas.clientWidth;
+                wetInkCanvas.height = wetInkCanvas.clientHeight;
+                this.editor.notifier.dispatch(types_1.EditorEventType.DisplayResized, {
+                    kind: types_1.EditorEventType.DisplayResized,
+                    newSize: Vec2_1.Vec2.of(this.width, this.height),
+                });
+            }
+        };
+        this.resizeSurfacesCallback();
+        this.flattenCallback = () => {
+            dryInkCtx.drawImage(wetInkCanvas, 0, 0);
+        };
+        this.getColorAt = (screenPos) => {
+            const pixel = dryInkCtx.getImageData(screenPos.x, screenPos.y, 1, 1);
+            const data = pixel === null || pixel === void 0 ? void 0 : pixel.data;
+            if (data) {
+                const color = Color4_1.default.ofRGBA(data[0] / 255, data[1] / 255, data[2] / 255, data[3] / 255);
+                return color;
+            }
+            return null;
+        };
+    }
+    initializeTextRendering() {
+        const textRendererOutputContainer = document.createElement('div');
+        textRendererOutputContainer.classList.add('textRendererOutputContainer');
+        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 = () => {
+            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`.
+     */
+    rerenderAsText() {
+        this.textRenderer.clear();
+        this.editor.image.render(this.textRenderer, this.editor.viewport);
+        if (this.textRerenderOutput) {
+            this.textRerenderOutput.innerText = this.textRenderer.getDescription();
+        }
+    }
+    /**
+     * Clears the drawing surfaces and otherwise prepares for a rerender.
+     *
+     * @returns the dry ink renderer.
+     */
+    startRerender() {
+        var _a;
+        (_a = this.resizeSurfacesCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.wetInkRenderer.clear();
+        this.dryInkRenderer.clear();
+        return this.dryInkRenderer;
+    }
+    /**
+     * If `draftMode`, the dry ink renderer is configured to render
+     * low-quality output.
+     */
+    setDraftMode(draftMode) {
+        this.dryInkRenderer.setDraftMode(draftMode);
+    }
+    /** @internal */
+    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.
+     */
+    getWetInkRenderer() {
+        return this.wetInkRenderer;
+    }
+    /** Re-renders the contents of the wetInkRenderer onto the dryInkRenderer. */
+    flatten() {
+        var _a;
+        (_a = this.flattenCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+}
+exports.default = Display;

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

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

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textStyleToJSON = exports.textStyleFromJSON = exports.cloneTextStyle = void 0;
+const RenderingStyle_1 = require("./RenderingStyle");
+const cloneTextStyle = (style) => {
+    return Object.assign(Object.assign({}, style), { renderingStyle: (0, RenderingStyle_1.cloneStyle)(style.renderingStyle) });
+};
+exports.cloneTextStyle = cloneTextStyle;
+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!');
+    }
+    const style = {
+        renderingStyle: (0, RenderingStyle_1.styleFromJSON)(json.renderingStyle),
+        size: json.size,
+        fontWeight: json.fontWeight,
+        fontVariant: json.fontVariant,
+        fontFamily: json.fontFamily,
+    };
+    return style;
+};
+exports.textStyleFromJSON = textStyleFromJSON;
+const textStyleToJSON = (style) => {
+    return Object.assign(Object.assign({}, style), { renderingStyle: (0, RenderingStyle_1.styleToJSON)(style.renderingStyle) });
+};
+exports.textStyleToJSON = textStyleToJSON;

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

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Mat33_1 = __importDefault(require("../../math/Mat33"));
+// Represents a cached renderer/canvas
+// This is not a [CacheNode] -- it handles cached renderers and does not have sub-renderers.
+class CacheRecord {
+    constructor(onBeforeDeallocCallback, cacheState) {
+        this.onBeforeDeallocCallback = onBeforeDeallocCallback;
+        this.cacheState = cacheState;
+        this.allocd = false;
+        // For debugging
+        this.allocCount = 0;
+        this.renderer = cacheState.props.createRenderer();
+        this.lastUsedCycle = -1;
+        this.allocd = true;
+    }
+    startRender() {
+        this.lastUsedCycle = this.cacheState.currentRenderingCycle;
+        if (!this.allocd) {
+            throw new Error('Only alloc\'d canvases can be rendered to');
+        }
+        return this.renderer;
+    }
+    dealloc() {
+        var _a;
+        (_a = this.onBeforeDeallocCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.allocd = false;
+        this.onBeforeDeallocCallback = null;
+        this.lastUsedCycle = 0;
+    }
+    isAllocd() {
+        return this.allocd;
+    }
+    realloc(newDeallocCallback) {
+        if (this.allocd) {
+            this.dealloc();
+        }
+        this.allocd = true;
+        this.onBeforeDeallocCallback = newDeallocCallback;
+        this.lastUsedCycle = this.cacheState.currentRenderingCycle;
+        this.allocCount++;
+    }
+    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))
+    getTransform(drawTo) {
+        const transform = Mat33_1.default.scaling2D(this.cacheState.props.blockResolution.x / drawTo.size.x).rightMul(Mat33_1.default.translation(drawTo.topLeft.times(-1)));
+        return transform;
+    }
+    setRenderingRegion(drawTo) {
+        this.renderer.setTransform(
+        // Invert to map objects instead of the viewport
+        this.getTransform(drawTo));
+    }
+}
+exports.default = CacheRecord;

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

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CacheRecordManager = void 0;
+const CacheRecord_1 = __importDefault(require("./CacheRecord"));
+const debugMode = false;
+class CacheRecordManager {
+    constructor(cacheProps) {
+        // Fixed-size array: Cache blocks are assigned indicies into [cachedCanvases].
+        this.cacheRecords = [];
+        this.maxCanvases = Math.ceil(
+        // Assuming four components per pixel:
+        cacheProps.cacheSize / 4 / cacheProps.blockResolution.x / cacheProps.blockResolution.y);
+    }
+    setSharedState(state) {
+        this.cacheState = state;
+    }
+    allocCanvas(drawTo, onDealloc) {
+        if (this.cacheRecords.length < this.maxCanvases) {
+            const record = new CacheRecord_1.default(onDealloc, this.cacheState);
+            record.setRenderingRegion(drawTo);
+            this.cacheRecords.push(record);
+            if (debugMode) {
+                console.log('[Cache] Cache spaces used: ', this.cacheRecords.length, ' of ', this.maxCanvases);
+            }
+            return record;
+        }
+        else {
+            const lru = this.getLeastRecentlyUsedRecord();
+            if (debugMode) {
+                console.log('[Cache] Re-alloc. Times allocated: ', lru.allocCount, '\nLast used cycle: ', lru.getLastUsedCycle(), '\nCurrent cycle: ', this.cacheState.currentRenderingCycle);
+            }
+            lru.realloc(onDealloc);
+            lru.setRenderingRegion(drawTo);
+            if (debugMode) {
+                console.log('[Cache] Now re-alloc\'d. Last used cycle: ', lru.getLastUsedCycle());
+                console.assert(lru['cacheState'] === this.cacheState, '[Cache] Unequal cache states! cacheState should be a shared object!');
+            }
+            return lru;
+        }
+    }
+    // Returns null if there are no cache records. Returns an unalloc'd record if one exists.
+    getLeastRecentlyUsedRecord() {
+        this.cacheRecords.sort((a, b) => a.getLastUsedCycle() - b.getLastUsedCycle());
+        return this.cacheRecords[0];
+    }
+}
+exports.CacheRecordManager = CacheRecordManager;

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

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Rect2_1 = __importDefault(require("../../math/Rect2"));
+const RenderingCacheNode_1 = __importDefault(require("./RenderingCacheNode"));
+const CacheRecordManager_1 = require("./CacheRecordManager");
+class RenderingCache {
+    constructor(cacheProps) {
+        this.recordManager = new CacheRecordManager_1.CacheRecordManager(cacheProps);
+        this.sharedState = {
+            props: cacheProps,
+            currentRenderingCycle: 0,
+            recordManager: this.recordManager,
+        };
+        this.recordManager.setSharedState(this.sharedState);
+    }
+    render(screenRenderer, image, viewport) {
+        var _a;
+        const 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
+            const res = this.sharedState.props.blockResolution;
+            const topLeft = visibleRect.topLeft;
+            this.rootNode = new RenderingCacheNode_1.default(new Rect2_1.default(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;
+        const visibleLeaves = image.getLeavesIntersectingRegion(viewport.visibleRect, rect => screenRenderer.isTooSmallToRender(rect));
+        let approxVisibleRenderTime = 0;
+        for (const leaf of visibleLeaves) {
+            approxVisibleRenderTime += leaf.getContent().getProportionalRenderingTime();
+        }
+        if (approxVisibleRenderTime > this.sharedState.props.minProportionalRenderTimeToUseCache) {
+            this.rootNode.renderItems(screenRenderer, [image], viewport);
+        }
+        else {
+            image.render(screenRenderer, visibleRect);
+        }
+    }
+}
+exports.default = RenderingCache;