@excalidraw/excalidraw 0.17.1-7441-0269e5a → 0.17.1-7441-4c9a6f4

package/dist/packages/excalidraw/renderer/renderSnaps.js

@@ -0,0 +1,114 @@
+const SNAP_COLOR_LIGHT = "#ff6b6b";
+const SNAP_COLOR_DARK = "#ff0000";
+const SNAP_WIDTH = 1;
+const SNAP_CROSS_SIZE = 2;
+export const renderSnaps = (context, appState) => {
+    if (!appState.snapLines.length) {
+        return;
+    }
+    // in dark mode, we need to adjust the color to account for color inversion.
+    // Don't change if zen mode, because we draw only crosses, we want the
+    // colors to be more visible
+    const snapColor = appState.theme === "light" || appState.zenModeEnabled
+        ? SNAP_COLOR_LIGHT
+        : SNAP_COLOR_DARK;
+    // in zen mode make the cross more visible since we don't draw the lines
+    const snapWidth = (appState.zenModeEnabled ? SNAP_WIDTH * 1.5 : SNAP_WIDTH) /
+        appState.zoom.value;
+    context.save();
+    context.translate(appState.scrollX, appState.scrollY);
+    for (const snapLine of appState.snapLines) {
+        if (snapLine.type === "pointer") {
+            context.lineWidth = snapWidth;
+            context.strokeStyle = snapColor;
+            drawPointerSnapLine(snapLine, context, appState);
+        }
+        else if (snapLine.type === "gap") {
+            context.lineWidth = snapWidth;
+            context.strokeStyle = snapColor;
+            drawGapLine(snapLine.points[0], snapLine.points[1], snapLine.direction, appState, context);
+        }
+        else if (snapLine.type === "points") {
+            context.lineWidth = snapWidth;
+            context.strokeStyle = snapColor;
+            drawPointsSnapLine(snapLine, context, appState);
+        }
+    }
+    context.restore();
+};
+const drawPointsSnapLine = (pointSnapLine, context, appState) => {
+    if (!appState.zenModeEnabled) {
+        const firstPoint = pointSnapLine.points[0];
+        const lastPoint = pointSnapLine.points[pointSnapLine.points.length - 1];
+        drawLine(firstPoint, lastPoint, context);
+    }
+    for (const point of pointSnapLine.points) {
+        drawCross(point, appState, context);
+    }
+};
+const drawPointerSnapLine = (pointerSnapLine, context, appState) => {
+    drawCross(pointerSnapLine.points[0], appState, context);
+    if (!appState.zenModeEnabled) {
+        drawLine(pointerSnapLine.points[0], pointerSnapLine.points[1], context);
+    }
+};
+const drawCross = ([x, y], appState, context) => {
+    context.save();
+    const size = (appState.zenModeEnabled ? SNAP_CROSS_SIZE * 1.5 : SNAP_CROSS_SIZE) /
+        appState.zoom.value;
+    context.beginPath();
+    context.moveTo(x - size, y - size);
+    context.lineTo(x + size, y + size);
+    context.moveTo(x + size, y - size);
+    context.lineTo(x - size, y + size);
+    context.stroke();
+    context.restore();
+};
+const drawLine = (from, to, context) => {
+    context.beginPath();
+    context.lineTo(...from);
+    context.lineTo(...to);
+    context.stroke();
+};
+const drawGapLine = (from, to, direction, appState, context) => {
+    // a horizontal gap snap line
+    // |–––––––||–––––––|
+    // ^    ^   ^       ^
+    // \    \   \       \
+    // (1)  (2) (3)     (4)
+    const FULL = 8 / appState.zoom.value;
+    const HALF = FULL / 2;
+    const QUARTER = FULL / 4;
+    if (direction === "horizontal") {
+        const halfPoint = [(from[0] + to[0]) / 2, from[1]];
+        // (1)
+        if (!appState.zenModeEnabled) {
+            drawLine([from[0], from[1] - FULL], [from[0], from[1] + FULL], context);
+        }
+        // (3)
+        drawLine([halfPoint[0] - QUARTER, halfPoint[1] - HALF], [halfPoint[0] - QUARTER, halfPoint[1] + HALF], context);
+        drawLine([halfPoint[0] + QUARTER, halfPoint[1] - HALF], [halfPoint[0] + QUARTER, halfPoint[1] + HALF], context);
+        if (!appState.zenModeEnabled) {
+            // (4)
+            drawLine([to[0], to[1] - FULL], [to[0], to[1] + FULL], context);
+            // (2)
+            drawLine(from, to, context);
+        }
+    }
+    else {
+        const halfPoint = [from[0], (from[1] + to[1]) / 2];
+        // (1)
+        if (!appState.zenModeEnabled) {
+            drawLine([from[0] - FULL, from[1]], [from[0] + FULL, from[1]], context);
+        }
+        // (3)
+        drawLine([halfPoint[0] - HALF, halfPoint[1] - QUARTER], [halfPoint[0] + HALF, halfPoint[1] - QUARTER], context);
+        drawLine([halfPoint[0] - HALF, halfPoint[1] + QUARTER], [halfPoint[0] + HALF, halfPoint[1] + QUARTER], context);
+        if (!appState.zenModeEnabled) {
+            // (4)
+            drawLine([to[0] - FULL, to[1]], [to[0] + FULL, to[1]], context);
+            // (2)
+            drawLine(from, to, context);
+        }
+    }
+};

package/dist/packages/excalidraw/renderer/roundRect.js

@@ -0,0 +1,28 @@
+/**
+ * https://stackoverflow.com/a/3368118
+ * Draws a rounded rectangle using the current state of the canvas.
+ * @param {CanvasRenderingContext2D} context
+ * @param {Number} x The top left x coordinate
+ * @param {Number} y The top left y coordinate
+ * @param {Number} width The width of the rectangle
+ * @param {Number} height The height of the rectangle
+ * @param {Number} radius The corner radius
+ */
+export const roundRect = (context, x, y, width, height, radius, strokeColor) => {
+    context.beginPath();
+    context.moveTo(x + radius, y);
+    context.lineTo(x + width - radius, y);
+    context.quadraticCurveTo(x + width, y, x + width, y + radius);
+    context.lineTo(x + width, y + height - radius);
+    context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+    context.lineTo(x + radius, y + height);
+    context.quadraticCurveTo(x, y + height, x, y + height - radius);
+    context.lineTo(x, y + radius);
+    context.quadraticCurveTo(x, y, x + radius, y);
+    context.closePath();
+    context.fill();
+    if (strokeColor) {
+        context.strokeStyle = strokeColor;
+    }
+    context.stroke();
+};

package/dist/packages/excalidraw/scene/Fonts.js

@@ -0,0 +1,71 @@
+import { isTextElement, refreshTextDimensions } from "../element";
+import { newElementWith } from "../element/mutateElement";
+import { isBoundToContainer } from "../element/typeChecks";
+import { getFontString } from "../utils";
+import { ShapeCache } from "./ShapeCache";
+export class Fonts {
+    scene;
+    onSceneUpdated;
+    constructor({ scene, onSceneUpdated, }) {
+        this.scene = scene;
+        this.onSceneUpdated = onSceneUpdated;
+    }
+    // it's ok to track fonts across multiple instances only once, so let's use
+    // a static member to reduce memory footprint
+    static loadedFontFaces = new Set();
+    /**
+     * if we load a (new) font, it's likely that text elements using it have
+     * already been rendered using a fallback font. Thus, we want invalidate
+     * their shapes and rerender. See #637.
+     *
+     * Invalidates text elements and rerenders scene, provided that at least one
+     * of the supplied fontFaces has not already been processed.
+     */
+    onFontsLoaded = (fontFaces) => {
+        if (
+        // bail if all fonts with have been processed. We're checking just a
+        // subset of the font properties (though it should be enough), so it
+        // can technically bail on a false positive.
+        fontFaces.every((fontFace) => {
+            const sig = `${fontFace.family}-${fontFace.style}-${fontFace.weight}`;
+            if (Fonts.loadedFontFaces.has(sig)) {
+                return true;
+            }
+            Fonts.loadedFontFaces.add(sig);
+            return false;
+        })) {
+            return false;
+        }
+        let didUpdate = false;
+        this.scene.mapElements((element) => {
+            if (isTextElement(element) && !isBoundToContainer(element)) {
+                ShapeCache.delete(element);
+                didUpdate = true;
+                return newElementWith(element, {
+                    ...refreshTextDimensions(element),
+                });
+            }
+            return element;
+        });
+        if (didUpdate) {
+            this.onSceneUpdated();
+        }
+    };
+    loadFontsForElements = async (elements) => {
+        const fontFaces = await Promise.all([
+            ...new Set(elements
+                .filter((element) => isTextElement(element))
+                .map((element) => element.fontFamily)),
+        ].map((fontFamily) => {
+            const fontString = getFontString({
+                fontFamily,
+                fontSize: 16,
+            });
+            if (!document.fonts?.check?.(fontString)) {
+                return document.fonts?.load?.(fontString);
+            }
+            return undefined;
+        }));
+        this.onFontsLoaded(fontFaces.flat().filter(Boolean));
+    };
+}

package/dist/packages/excalidraw/scene/Renderer.js

@@ -0,0 +1,65 @@
+import { isElementInViewport } from "../element/sizeHelpers";
+import { isImageElement } from "../element/typeChecks";
+import { cancelRender } from "../renderer/renderScene";
+import { memoize } from "../utils";
+export class Renderer {
+    scene;
+    constructor(scene) {
+        this.scene = scene;
+    }
+    getRenderableElements = (() => {
+        const getVisibleCanvasElements = ({ elements, zoom, offsetLeft, offsetTop, scrollX, scrollY, height, width, }) => {
+            return elements.filter((element) => isElementInViewport(element, width, height, {
+                zoom,
+                offsetLeft,
+                offsetTop,
+                scrollX,
+                scrollY,
+            }));
+        };
+        const getCanvasElements = ({ editingElement, elements, pendingImageElementId, }) => {
+            return elements.filter((element) => {
+                if (isImageElement(element)) {
+                    if (
+                    // => not placed on canvas yet (but in elements array)
+                    pendingImageElementId === element.id) {
+                        return false;
+                    }
+                }
+                // we don't want to render text element that's being currently edited
+                // (it's rendered on remote only)
+                return (!editingElement ||
+                    editingElement.type !== "text" ||
+                    element.id !== editingElement.id);
+            });
+        };
+        return memoize(({ zoom, offsetLeft, offsetTop, scrollX, scrollY, height, width, editingElement, pendingImageElementId, 
+        // unused but serves we cache on it to invalidate elements if they
+        // get mutated
+        versionNonce: _versionNonce, }) => {
+            const elements = this.scene.getNonDeletedElements();
+            const canvasElements = getCanvasElements({
+                elements,
+                editingElement,
+                pendingImageElementId,
+            });
+            const visibleElements = getVisibleCanvasElements({
+                elements: canvasElements,
+                zoom,
+                offsetLeft,
+                offsetTop,
+                scrollX,
+                scrollY,
+                height,
+                width,
+            });
+            return { canvasElements, visibleElements };
+        });
+    })();
+    // NOTE Doesn't destroy everything (scene, rc, etc.) because it may not be
+    // safe to break TS contract here (for upstream cases)
+    destroy() {
+        cancelRender();
+        this.getRenderableElements.clear();
+    }
+}

package/dist/packages/excalidraw/scene/Scene.js

@@ -0,0 +1,230 @@
+import { getNonDeletedElements, isNonDeletedElement } from "../element";
+import { isFrameLikeElement } from "../element/typeChecks";
+import { getSelectedElements } from "./selection";
+import { randomInteger } from "../random";
+const hashSelectionOpts = (opts) => {
+    const keys = ["includeBoundTextElement", "includeElementsInFrames"];
+    let hash = "";
+    for (const key of keys) {
+        hash += `${key}:${opts[key] ? "1" : "0"}`;
+    }
+    return hash;
+};
+const isIdKey = (elementKey) => {
+    if (typeof elementKey === "string") {
+        return true;
+    }
+    return false;
+};
+class Scene {
+    // ---------------------------------------------------------------------------
+    // static methods/props
+    // ---------------------------------------------------------------------------
+    static sceneMapByElement = new WeakMap();
+    static sceneMapById = new Map();
+    static mapElementToScene(elementKey, scene, 
+    /**
+     * needed because of frame exporting hack.
+     * elementId:Scene mapping will be removed completely, soon.
+     */
+    mapElementIds = true) {
+        if (isIdKey(elementKey)) {
+            if (!mapElementIds) {
+                return;
+            }
+            // for cases where we don't have access to the element object
+            // (e.g. restore serialized appState with id references)
+            this.sceneMapById.set(elementKey, scene);
+        }
+        else {
+            this.sceneMapByElement.set(elementKey, scene);
+            if (!mapElementIds) {
+                // if mapping element objects, also cache the id string when later
+                // looking up by id alone
+                this.sceneMapById.set(elementKey.id, scene);
+            }
+        }
+    }
+    static getScene(elementKey) {
+        if (isIdKey(elementKey)) {
+            return this.sceneMapById.get(elementKey) || null;
+        }
+        return this.sceneMapByElement.get(elementKey) || null;
+    }
+    // ---------------------------------------------------------------------------
+    // instance methods/props
+    // ---------------------------------------------------------------------------
+    callbacks = new Set();
+    nonDeletedElements = [];
+    elements = [];
+    nonDeletedFramesLikes = [];
+    frames = [];
+    elementsMap = new Map();
+    selectedElementsCache = {
+        selectedElementIds: null,
+        elements: null,
+        cache: new Map(),
+    };
+    versionNonce;
+    getElementsIncludingDeleted() {
+        return this.elements;
+    }
+    getNonDeletedElements() {
+        return this.nonDeletedElements;
+    }
+    getFramesIncludingDeleted() {
+        return this.frames;
+    }
+    getSelectedElements(opts) {
+        const hash = hashSelectionOpts(opts);
+        const elements = opts?.elements || this.nonDeletedElements;
+        if (this.selectedElementsCache.elements === elements &&
+            this.selectedElementsCache.selectedElementIds === opts.selectedElementIds) {
+            const cached = this.selectedElementsCache.cache.get(hash);
+            if (cached) {
+                return cached;
+            }
+        }
+        else if (opts?.elements == null) {
+            // if we're operating on latest scene elements and the cache is not
+            //  storing the latest elements, clear the cache
+            this.selectedElementsCache.cache.clear();
+        }
+        const selectedElements = getSelectedElements(elements, { selectedElementIds: opts.selectedElementIds }, opts);
+        // cache only if we're not using custom elements
+        if (opts?.elements == null) {
+            this.selectedElementsCache.selectedElementIds = opts.selectedElementIds;
+            this.selectedElementsCache.elements = this.nonDeletedElements;
+            this.selectedElementsCache.cache.set(hash, selectedElements);
+        }
+        return selectedElements;
+    }
+    getNonDeletedFramesLikes() {
+        return this.nonDeletedFramesLikes;
+    }
+    getElement(id) {
+        return this.elementsMap.get(id) || null;
+    }
+    getVersionNonce() {
+        return this.versionNonce;
+    }
+    getNonDeletedElement(id) {
+        const element = this.getElement(id);
+        if (element && isNonDeletedElement(element)) {
+            return element;
+        }
+        return null;
+    }
+    /**
+     * A utility method to help with updating all scene elements, with the added
+     * performance optimization of not renewing the array if no change is made.
+     *
+     * Maps all current excalidraw elements, invoking the callback for each
+     * element. The callback should either return a new mapped element, or the
+     * original element if no changes are made. If no changes are made to any
+     * element, this results in a no-op. Otherwise, the newly mapped elements
+     * are set as the next scene's elements.
+     *
+     * @returns whether a change was made
+     */
+    mapElements(iteratee) {
+        let didChange = false;
+        const newElements = this.elements.map((element) => {
+            const nextElement = iteratee(element);
+            if (nextElement !== element) {
+                didChange = true;
+            }
+            return nextElement;
+        });
+        if (didChange) {
+            this.replaceAllElements(newElements);
+        }
+        return didChange;
+    }
+    replaceAllElements(nextElements, mapElementIds = true) {
+        this.elements = nextElements;
+        const nextFrameLikes = [];
+        this.elementsMap.clear();
+        nextElements.forEach((element) => {
+            if (isFrameLikeElement(element)) {
+                nextFrameLikes.push(element);
+            }
+            this.elementsMap.set(element.id, element);
+            Scene.mapElementToScene(element, this);
+        });
+        this.nonDeletedElements = getNonDeletedElements(this.elements);
+        this.frames = nextFrameLikes;
+        this.nonDeletedFramesLikes = getNonDeletedElements(this.frames);
+        this.informMutation();
+    }
+    informMutation() {
+        this.versionNonce = randomInteger();
+        for (const callback of Array.from(this.callbacks)) {
+            callback();
+        }
+    }
+    addCallback(cb) {
+        if (this.callbacks.has(cb)) {
+            throw new Error();
+        }
+        this.callbacks.add(cb);
+        return () => {
+            if (!this.callbacks.has(cb)) {
+                throw new Error();
+            }
+            this.callbacks.delete(cb);
+        };
+    }
+    destroy() {
+        this.nonDeletedElements = [];
+        this.elements = [];
+        this.nonDeletedFramesLikes = [];
+        this.frames = [];
+        this.elementsMap.clear();
+        this.selectedElementsCache.selectedElementIds = null;
+        this.selectedElementsCache.elements = null;
+        this.selectedElementsCache.cache.clear();
+        Scene.sceneMapById.forEach((scene, elementKey) => {
+            if (scene === this) {
+                Scene.sceneMapById.delete(elementKey);
+            }
+        });
+        // done not for memory leaks, but to guard against possible late fires
+        // (I guess?)
+        this.callbacks.clear();
+    }
+    insertElementAtIndex(element, index) {
+        if (!Number.isFinite(index) || index < 0) {
+            throw new Error("insertElementAtIndex can only be called with index >= 0");
+        }
+        const nextElements = [
+            ...this.elements.slice(0, index),
+            element,
+            ...this.elements.slice(index),
+        ];
+        this.replaceAllElements(nextElements);
+    }
+    insertElementsAtIndex(elements, index) {
+        if (!Number.isFinite(index) || index < 0) {
+            throw new Error("insertElementAtIndex can only be called with index >= 0");
+        }
+        const nextElements = [
+            ...this.elements.slice(0, index),
+            ...elements,
+            ...this.elements.slice(index),
+        ];
+        this.replaceAllElements(nextElements);
+    }
+    addNewElement = (element) => {
+        if (element.frameId) {
+            this.insertElementAtIndex(element, this.getElementIndex(element.frameId));
+        }
+        else {
+            this.replaceAllElements([...this.elements, element]);
+        }
+    };
+    getElementIndex(elementId) {
+        return this.elements.findIndex((element) => element.id === elementId);
+    }
+}
+export default Scene;