@excalidraw/excalidraw 0.17.1-7441-e31f307 → 0.17.1-7441-4c9a6f4

package/dist/packages/excalidraw/history.js

@@ -0,0 +1,190 @@
+import { isLinearElement } from "./element/typeChecks";
+import { deepCopyElement } from "./element/newElement";
+const clearAppStatePropertiesForHistory = (appState) => {
+    return {
+        selectedElementIds: appState.selectedElementIds,
+        selectedGroupIds: appState.selectedGroupIds,
+        viewBackgroundColor: appState.viewBackgroundColor,
+        editingLinearElement: appState.editingLinearElement,
+        editingGroupId: appState.editingGroupId,
+        name: appState.name,
+    };
+};
+class History {
+    elementCache = new Map();
+    recording = true;
+    stateHistory = [];
+    redoStack = [];
+    lastEntry = null;
+    hydrateHistoryEntry({ appState, elements, }) {
+        return {
+            appState: JSON.parse(appState),
+            elements: elements.map((dehydratedExcalidrawElement) => {
+                const element = this.elementCache
+                    .get(dehydratedExcalidrawElement.id)
+                    ?.get(dehydratedExcalidrawElement.versionNonce);
+                if (!element) {
+                    throw new Error(`Element not found: ${dehydratedExcalidrawElement.id}:${dehydratedExcalidrawElement.versionNonce}`);
+                }
+                return element;
+            }),
+        };
+    }
+    dehydrateHistoryEntry({ appState, elements, }) {
+        return {
+            appState: JSON.stringify(appState),
+            elements: elements.map((element) => {
+                if (!this.elementCache.has(element.id)) {
+                    this.elementCache.set(element.id, new Map());
+                }
+                const versions = this.elementCache.get(element.id);
+                if (!versions.has(element.versionNonce)) {
+                    versions.set(element.versionNonce, deepCopyElement(element));
+                }
+                return {
+                    id: element.id,
+                    versionNonce: element.versionNonce,
+                };
+            }),
+        };
+    }
+    getSnapshotForTest() {
+        return {
+            recording: this.recording,
+            stateHistory: this.stateHistory.map((dehydratedHistoryEntry) => this.hydrateHistoryEntry(dehydratedHistoryEntry)),
+            redoStack: this.redoStack.map((dehydratedHistoryEntry) => this.hydrateHistoryEntry(dehydratedHistoryEntry)),
+        };
+    }
+    clear() {
+        this.stateHistory.length = 0;
+        this.redoStack.length = 0;
+        this.lastEntry = null;
+        this.elementCache.clear();
+    }
+    generateEntry = (appState, elements) => this.dehydrateHistoryEntry({
+        appState: clearAppStatePropertiesForHistory(appState),
+        elements: elements.reduce((elements, element) => {
+            if (isLinearElement(element) &&
+                appState.multiElement &&
+                appState.multiElement.id === element.id) {
+                // don't store multi-point arrow if still has only one point
+                if (appState.multiElement &&
+                    appState.multiElement.id === element.id &&
+                    element.points.length < 2) {
+                    return elements;
+                }
+                elements.push({
+                    ...element,
+                    // don't store last point if not committed
+                    points: element.lastCommittedPoint !==
+                        element.points[element.points.length - 1]
+                        ? element.points.slice(0, -1)
+                        : element.points,
+                });
+            }
+            else {
+                elements.push(element);
+            }
+            return elements;
+        }, []),
+    });
+    shouldCreateEntry(nextEntry) {
+        const { lastEntry } = this;
+        if (!lastEntry) {
+            return true;
+        }
+        if (nextEntry.elements.length !== lastEntry.elements.length) {
+            return true;
+        }
+        // loop from right to left as changes are likelier to happen on new elements
+        for (let i = nextEntry.elements.length - 1; i > -1; i--) {
+            const prev = nextEntry.elements[i];
+            const next = lastEntry.elements[i];
+            if (!prev ||
+                !next ||
+                prev.id !== next.id ||
+                prev.versionNonce !== next.versionNonce) {
+                return true;
+            }
+        }
+        // note: this is safe because entry's appState is guaranteed no excess props
+        let key;
+        for (key in nextEntry.appState) {
+            if (key === "editingLinearElement") {
+                if (nextEntry.appState[key]?.elementId ===
+                    lastEntry.appState[key]?.elementId) {
+                    continue;
+                }
+            }
+            if (key === "selectedElementIds" || key === "selectedGroupIds") {
+                continue;
+            }
+            if (nextEntry.appState[key] !== lastEntry.appState[key]) {
+                return true;
+            }
+        }
+        return false;
+    }
+    pushEntry(appState, elements) {
+        const newEntryDehydrated = this.generateEntry(appState, elements);
+        const newEntry = this.hydrateHistoryEntry(newEntryDehydrated);
+        if (newEntry) {
+            if (!this.shouldCreateEntry(newEntry)) {
+                return;
+            }
+            this.stateHistory.push(newEntryDehydrated);
+            this.lastEntry = newEntry;
+            // As a new entry was pushed, we invalidate the redo stack
+            this.clearRedoStack();
+        }
+    }
+    clearRedoStack() {
+        this.redoStack.splice(0, this.redoStack.length);
+    }
+    redoOnce() {
+        if (this.redoStack.length === 0) {
+            return null;
+        }
+        const entryToRestore = this.redoStack.pop();
+        if (entryToRestore !== undefined) {
+            this.stateHistory.push(entryToRestore);
+            return this.hydrateHistoryEntry(entryToRestore);
+        }
+        return null;
+    }
+    undoOnce() {
+        if (this.stateHistory.length === 1) {
+            return null;
+        }
+        const currentEntry = this.stateHistory.pop();
+        const entryToRestore = this.stateHistory[this.stateHistory.length - 1];
+        if (currentEntry !== undefined) {
+            this.redoStack.push(currentEntry);
+            return this.hydrateHistoryEntry(entryToRestore);
+        }
+        return null;
+    }
+    /**
+     * Updates history's `lastEntry` to latest app state. This is necessary
+     *  when doing undo/redo which itself doesn't commit to history, but updates
+     *  app state in a way that would break `shouldCreateEntry` which relies on
+     *  `lastEntry` to reflect last comittable history state.
+     * We can't update `lastEntry` from within history when calling undo/redo
+     *  because the action potentially mutates appState/elements before storing
+     *  it.
+     */
+    setCurrentState(appState, elements) {
+        this.lastEntry = this.hydrateHistoryEntry(this.generateEntry(appState, elements));
+    }
+    // Suspicious that this is called so many places. Seems error-prone.
+    resumeRecording() {
+        this.recording = true;
+    }
+    record(state, elements) {
+        if (this.recording) {
+            this.pushEntry(state, elements);
+            this.recording = false;
+        }
+    }
+}
+export default History;

package/dist/packages/excalidraw/hooks/useCallbackRefState.js

@@ -0,0 +1,6 @@
+import { useCallback, useState } from "react";
+export const useCallbackRefState = () => {
+    const [refValue, setRefValue] = useState(null);
+    const refCallback = useCallback((value) => setRefValue(value), []);
+    return [refValue, refCallback];
+};

package/dist/packages/excalidraw/hooks/useCreatePortalContainer.js

@@ -0,0 +1,32 @@
+import { useState, useLayoutEffect } from "react";
+import { useDevice, useExcalidrawContainer } from "../components/App";
+import { useUIAppState } from "../context/ui-appState";
+export const useCreatePortalContainer = (opts) => {
+    const [div, setDiv] = useState(null);
+    const device = useDevice();
+    const { theme } = useUIAppState();
+    const { container: excalidrawContainer } = useExcalidrawContainer();
+    useLayoutEffect(() => {
+        if (div) {
+            div.className = "";
+            div.classList.add("excalidraw", ...(opts?.className?.split(/\s+/) || []));
+            div.classList.toggle("excalidraw--mobile", device.editor.isMobile);
+            div.classList.toggle("theme--dark", theme === "dark");
+        }
+    }, [div, theme, device.editor.isMobile, opts?.className]);
+    useLayoutEffect(() => {
+        const container = opts?.parentSelector
+            ? excalidrawContainer?.querySelector(opts.parentSelector)
+            : document.body;
+        if (!container) {
+            return;
+        }
+        const div = document.createElement("div");
+        container.appendChild(div);
+        setDiv(div);
+        return () => {
+            container.removeChild(div);
+        };
+    }, [excalidrawContainer, opts?.parentSelector]);
+    return div;
+};

package/dist/packages/excalidraw/hooks/useLibraryItemSvg.js

@@ -0,0 +1,62 @@
+import { atom, useAtom } from "jotai";
+import { useEffect, useState } from "react";
+import { COLOR_PALETTE } from "../colors";
+import { jotaiScope } from "../jotai";
+import { exportToSvg } from "../../utils/export";
+export const libraryItemSvgsCache = atom(new Map());
+const exportLibraryItemToSvg = async (elements) => {
+    return await exportToSvg({
+        elements,
+        appState: {
+            exportBackground: false,
+            viewBackgroundColor: COLOR_PALETTE.white,
+        },
+        files: null,
+        renderEmbeddables: false,
+    });
+};
+export const useLibraryItemSvg = (id, elements, svgCache) => {
+    const [svg, setSvg] = useState();
+    useEffect(() => {
+        if (elements) {
+            if (id) {
+                // Try to load cached svg
+                const cachedSvg = svgCache.get(id);
+                if (cachedSvg) {
+                    setSvg(cachedSvg);
+                }
+                else {
+                    // When there is no svg in cache export it and save to cache
+                    (async () => {
+                        const exportedSvg = await exportLibraryItemToSvg(elements);
+                        exportedSvg.querySelector(".style-fonts")?.remove();
+                        if (exportedSvg) {
+                            svgCache.set(id, exportedSvg);
+                            setSvg(exportedSvg);
+                        }
+                    })();
+                }
+            }
+            else {
+                // When we have no id (usualy selected items from canvas) just export the svg
+                (async () => {
+                    const exportedSvg = await exportLibraryItemToSvg(elements);
+                    setSvg(exportedSvg);
+                })();
+            }
+        }
+    }, [id, elements, svgCache, setSvg]);
+    return svg;
+};
+export const useLibraryCache = () => {
+    const [svgCache] = useAtom(libraryItemSvgsCache, jotaiScope);
+    const clearLibraryCache = () => svgCache.clear();
+    const deleteItemsFromLibraryCache = (items) => {
+        items.forEach((item) => svgCache.delete(item));
+    };
+    return {
+        clearLibraryCache,
+        deleteItemsFromLibraryCache,
+        svgCache,
+    };
+};

package/dist/packages/excalidraw/hooks/useOutsideClick.js

@@ -0,0 +1,67 @@
+import { useEffect } from "react";
+import { EVENT } from "../constants";
+export function useOutsideClick(ref, 
+/** if performance is of concern, memoize the callback */
+callback, 
+/**
+ * Optional callback which is called on every click.
+ *
+ * Should return `true` if click should be considered as inside the container,
+ * and `false` if it falls outside and should call the `callback`.
+ *
+ * Returning `true` overrides the default behavior and `callback` won't be
+ * called.
+ *
+ * Returning `undefined` will fallback to the default behavior.
+ */
+isInside) {
+    useEffect(() => {
+        function onOutsideClick(event) {
+            const _event = event;
+            if (!ref.current) {
+                return;
+            }
+            const isInsideOverride = isInside?.(_event, ref.current);
+            if (isInsideOverride === true) {
+                return;
+            }
+            else if (isInsideOverride === false) {
+                return callback(_event);
+            }
+            // clicked element is in the descenendant of the target container
+            if (ref.current.contains(_event.target) ||
+                // target is detached from DOM (happens when the element is removed
+                // on a pointerup event fired *before* this handler's pointerup is
+                // dispatched)
+                !document.documentElement.contains(_event.target)) {
+                return;
+            }
+            const isClickOnRadixPortal = _event.target.closest("[data-radix-portal]") ||
+                // when radix popup is in "modal" mode, it disables pointer events on
+                // the `body` element, so the target element is going to be the `html`
+                // (note: this won't work if we selectively re-enable pointer events on
+                // specific elements as we do with navbar or excalidraw UI elements)
+                (_event.target === document.documentElement &&
+                    document.body.style.pointerEvents === "none");
+            // if clicking on radix portal, assume it's a popup that
+            // should be considered as part of the UI. Obviously this is a terrible
+            // hack you can end up click on radix popups that outside the tree,
+            // but it works for most cases and the downside is minimal for now
+            if (isClickOnRadixPortal) {
+                return;
+            }
+            // clicking on a container that ignores outside clicks
+            if (_event.target.closest("[data-prevent-outside-click]")) {
+                return;
+            }
+            callback(_event);
+        }
+        // note: don't use `click` because it often reports incorrect `event.target`
+        document.addEventListener(EVENT.POINTER_DOWN, onOutsideClick);
+        document.addEventListener(EVENT.TOUCH_START, onOutsideClick);
+        return () => {
+            document.removeEventListener(EVENT.POINTER_DOWN, onOutsideClick);
+            document.removeEventListener(EVENT.TOUCH_START, onOutsideClick);
+        };
+    }, [ref, callback, isInside]);
+}

package/dist/packages/excalidraw/hooks/useScrollPosition.js

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+import { atom, useAtom } from "jotai";
+import throttle from "lodash.throttle";
+const scrollPositionAtom = atom(0);
+export const useScrollPosition = (elementRef) => {
+    const [scrollPosition, setScrollPosition] = useAtom(scrollPositionAtom);
+    useEffect(() => {
+        const { current: element } = elementRef;
+        if (!element) {
+            return;
+        }
+        const handleScroll = throttle(() => {
+            const { scrollTop } = element;
+            setScrollPosition(scrollTop);
+        }, 200);
+        element.addEventListener("scroll", handleScroll);
+        return () => {
+            handleScroll.cancel();
+            element.removeEventListener("scroll", handleScroll);
+        };
+    }, [elementRef, setScrollPosition]);
+    return scrollPosition;
+};

package/dist/packages/excalidraw/hooks/useStable.js

@@ -0,0 +1,6 @@
+import { useRef } from "react";
+export const useStable = (value) => {
+    const ref = useRef(value);
+    Object.assign(ref.current, value);
+    return ref.current;
+};

package/dist/packages/excalidraw/hooks/useTransition.js

@@ -0,0 +1,7 @@
+import React, { useCallback } from "react";
+/** noop polyfill for v17. Subset of API available */
+function useTransitionPolyfill() {
+    const startTransition = useCallback((callback) => callback(), []);
+    return [false, startTransition];
+}
+export const useTransition = React.useTransition || useTransitionPolyfill;

package/dist/packages/excalidraw/i18n.js

@@ -0,0 +1,137 @@
+import fallbackLangData from "./locales/en.json";
+import percentages from "./locales/percentages.json";
+import { jotaiScope, jotaiStore } from "./jotai";
+import { atom, useAtomValue } from "jotai";
+const COMPLETION_THRESHOLD = 85;
+export const defaultLang = { code: "en", label: "English" };
+export const languages = [
+    defaultLang,
+    ...[
+        { code: "ar-SA", label: "العربية", rtl: true },
+        { code: "bg-BG", label: "Български" },
+        { code: "ca-ES", label: "Català" },
+        { code: "cs-CZ", label: "Česky" },
+        { code: "de-DE", label: "Deutsch" },
+        { code: "el-GR", label: "Ελληνικά" },
+        { code: "es-ES", label: "Español" },
+        { code: "eu-ES", label: "Euskara" },
+        { code: "fa-IR", label: "فارسی", rtl: true },
+        { code: "fi-FI", label: "Suomi" },
+        { code: "fr-FR", label: "Français" },
+        { code: "gl-ES", label: "Galego" },
+        { code: "he-IL", label: "עברית", rtl: true },
+        { code: "hi-IN", label: "हिन्दी" },
+        { code: "hu-HU", label: "Magyar" },
+        { code: "id-ID", label: "Bahasa Indonesia" },
+        { code: "it-IT", label: "Italiano" },
+        { code: "ja-JP", label: "日本語" },
+        { code: "kab-KAB", label: "Taqbaylit" },
+        { code: "kk-KZ", label: "Қазақ тілі" },
+        { code: "ko-KR", label: "한국어" },
+        { code: "ku-TR", label: "Kurdî" },
+        { code: "lt-LT", label: "Lietuvių" },
+        { code: "lv-LV", label: "Latviešu" },
+        { code: "my-MM", label: "Burmese" },
+        { code: "nb-NO", label: "Norsk bokmål" },
+        { code: "nl-NL", label: "Nederlands" },
+        { code: "nn-NO", label: "Norsk nynorsk" },
+        { code: "oc-FR", label: "Occitan" },
+        { code: "pa-IN", label: "ਪੰਜਾਬੀ" },
+        { code: "pl-PL", label: "Polski" },
+        { code: "pt-BR", label: "Português Brasileiro" },
+        { code: "pt-PT", label: "Português" },
+        { code: "ro-RO", label: "Română" },
+        { code: "ru-RU", label: "Русский" },
+        { code: "sk-SK", label: "Slovenčina" },
+        { code: "sv-SE", label: "Svenska" },
+        { code: "sl-SI", label: "Slovenščina" },
+        { code: "tr-TR", label: "Türkçe" },
+        { code: "uk-UA", label: "Українська" },
+        { code: "zh-CN", label: "简体中文" },
+        { code: "zh-TW", label: "繁體中文" },
+        { code: "vi-VN", label: "Tiếng Việt" },
+        { code: "mr-IN", label: "मराठी" },
+    ]
+        .filter((lang) => percentages[lang.code] >=
+        COMPLETION_THRESHOLD)
+        .sort((left, right) => (left.label > right.label ? 1 : -1)),
+];
+const TEST_LANG_CODE = "__test__";
+if (import.meta.env.DEV) {
+    languages.unshift({ code: TEST_LANG_CODE, label: "test language" }, {
+        code: `${TEST_LANG_CODE}.rtl`,
+        label: "\u{202a}test language (rtl)\u{202c}",
+        rtl: true,
+    });
+}
+let currentLang = defaultLang;
+let currentLangData = {};
+export const setLanguage = async (lang) => {
+    currentLang = lang;
+    document.documentElement.dir = currentLang.rtl ? "rtl" : "ltr";
+    document.documentElement.lang = currentLang.code;
+    if (lang.code.startsWith(TEST_LANG_CODE)) {
+        currentLangData = {};
+    }
+    else {
+        try {
+            currentLangData = await import(`./locales/${currentLang.code}.json`);
+        }
+        catch (error) {
+            console.error(`Failed to load language ${lang.code}:`, error.message);
+            currentLangData = fallbackLangData;
+        }
+    }
+    jotaiStore.set(editorLangCodeAtom, lang.code);
+};
+export const getLanguage = () => currentLang;
+const findPartsForData = (data, parts) => {
+    for (let index = 0; index < parts.length; ++index) {
+        const part = parts[index];
+        if (data[part] === undefined) {
+            return undefined;
+        }
+        data = data[part];
+    }
+    if (typeof data !== "string") {
+        return undefined;
+    }
+    return data;
+};
+export const t = (path, replacement, fallback) => {
+    if (currentLang.code.startsWith(TEST_LANG_CODE)) {
+        const name = replacement
+            ? `${path}(${JSON.stringify(replacement).slice(1, -1)})`
+            : path;
+        return `\u{202a}[[${name}]]\u{202c}`;
+    }
+    const parts = path.split(".");
+    let translation = findPartsForData(currentLangData, parts) ||
+        findPartsForData(fallbackLangData, parts) ||
+        fallback;
+    if (translation === undefined) {
+        const errorMessage = `Can't find translation for ${path}`;
+        // in production, don't blow up the app on a missing translation key
+        if (import.meta.env.PROD) {
+            console.warn(errorMessage);
+            return "";
+        }
+        throw new Error(errorMessage);
+    }
+    if (replacement) {
+        for (const key in replacement) {
+            translation = translation.replace(`{{${key}}}`, String(replacement[key]));
+        }
+    }
+    return translation;
+};
+/** @private atom used solely to rerender components using `useI18n` hook */
+const editorLangCodeAtom = atom(defaultLang.code);
+// Should be used in components that fall under these cases:
+// - component is rendered as an <Excalidraw> child
+// - component is rendered internally by <Excalidraw>, but the component
+//   is memoized w/o being updated on `langCode`, `AppState`, or `UIAppState`
+export const useI18n = () => {
+    const langCode = useAtomValue(editorLangCodeAtom, jotaiScope);
+    return { t, langCode };
+};

package/dist/packages/excalidraw/index-node.d.ts

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

package/dist/packages/excalidraw/index-node.js

@@ -0,0 +1,73 @@
+import { exportToCanvas } from "./scene/export";
+import { getDefaultAppState } from "./appState";
+const { registerFont, createCanvas } = require("canvas");
+const elements = [
+    {
+        id: "eVzaxG3YnHhqjEmD7NdYo",
+        type: "diamond",
+        x: 519,
+        y: 199,
+        width: 113,
+        height: 115,
+        strokeColor: "#000000",
+        backgroundColor: "transparent",
+        fillStyle: "hachure",
+        strokeWidth: 1,
+        roughness: 1,
+        opacity: 100,
+        seed: 749612521,
+    },
+    {
+        id: "7W-iw5pEBPTU3eaCaLtFo",
+        type: "ellipse",
+        x: 552,
+        y: 238,
+        width: 49,
+        height: 44,
+        strokeColor: "#000000",
+        backgroundColor: "transparent",
+        fillStyle: "hachure",
+        strokeWidth: 1,
+        roughness: 1,
+        opacity: 100,
+        seed: 952056308,
+    },
+    {
+        id: "kqKI231mvTrcsYo2DkUsR",
+        type: "text",
+        x: 557.5,
+        y: 317.5,
+        width: 43,
+        height: 31,
+        strokeColor: "#000000",
+        backgroundColor: "transparent",
+        fillStyle: "hachure",
+        strokeWidth: 1,
+        roughness: 1,
+        opacity: 100,
+        seed: 1683771448,
+        text: "test",
+        font: "20px Virgil",
+        baseline: 22,
+    },
+];
+registerFont("./public/Virgil.woff2", { family: "Virgil" });
+registerFont("./public/Cascadia.woff2", { family: "Cascadia" });
+const canvas = exportToCanvas(elements, {
+    ...getDefaultAppState(),
+    offsetTop: 0,
+    offsetLeft: 0,
+    width: 0,
+    height: 0,
+}, {}, // files
+{
+    exportBackground: true,
+    viewBackgroundColor: "#ffffff",
+}, createCanvas);
+const fs = require("fs");
+const out = fs.createWriteStream("test.png");
+const stream = canvas.createPNGStream();
+stream.pipe(out);
+out.on("finish", () => {
+    console.info("test.png was created.");
+});

package/{types → dist/packages}/excalidraw/index.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import "./css/app.scss";
 import "./css/styles.scss";
-import "../../public/fonts.css";
+import "../../public/fonts/fonts.css";
 import { ExcalidrawProps } from "./types";
 import Footer from "./components/footer/FooterCenter";
 import MainMenu from "./components/main-menu/MainMenu";