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

package/dist/packages/excalidraw/components/OverwriteConfirm/OverwriteConfirm.scss

@@ -0,0 +1,126 @@
+@import "../../css/variables.module.scss";
+
+.excalidraw {
+  .OverwriteConfirm {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+    isolation: isolate;
+
+    h3 {
+      margin: 0;
+
+      font-weight: 700;
+      font-size: 1.3125rem;
+      line-height: 130%;
+      align-self: flex-start;
+
+      color: var(--text-primary-color);
+    }
+
+    &__Description {
+      box-sizing: border-box;
+
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      width: 100%;
+      gap: 1rem;
+
+      @include isMobile {
+        flex-direction: column;
+        text-align: center;
+      }
+
+      padding: 2.5rem;
+
+      background: var(--color-danger-background);
+      border-radius: 0.5rem;
+
+      font-family: "Assistant";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 1rem;
+      line-height: 150%;
+
+      color: var(--color-danger-color);
+
+      &__spacer {
+        flex-grow: 1;
+      }
+
+      &__icon {
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 2.5rem;
+        background: var(--color-danger-icon-background);
+        width: 3.5rem;
+        height: 3.5rem;
+
+        padding: 0.75rem;
+
+        svg {
+          color: var(--color-danger-icon-color);
+          width: 1.5rem;
+          height: 1.5rem;
+        }
+      }
+
+      &.OverwriteConfirm__Description--color-warning {
+        background: var(--color-warning-background);
+        color: var(--color-warning-color);
+
+        .OverwriteConfirm__Description__icon {
+          background: var(--color-warning-icon-background);
+          flex: 0 0 auto;
+
+          svg {
+            color: var(--color-warning-icon-color);
+          }
+        }
+      }
+    }
+
+    &__Actions {
+      display: flex;
+      flex-direction: row;
+      align-items: stretch;
+      justify-items: stretch;
+      justify-content: center;
+      gap: 1.5rem;
+
+      @include isMobile {
+        flex-direction: column;
+      }
+
+      &__Action {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 1.5rem;
+        gap: 0.75rem;
+        flex-basis: 50%;
+        flex-grow: 0;
+
+        &__content {
+          height: 100%;
+          font-size: 0.875rem;
+          text-align: center;
+        }
+
+        h4 {
+          font-weight: 700;
+          font-size: 1.125rem;
+          line-height: 130%;
+
+          margin: 0;
+
+          color: var(--text-primary-color);
+        }
+      }
+    }
+  }
+}

package/dist/packages/excalidraw/components/OverwriteConfirm/OverwriteConfirmActions.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FilledButton } from "../FilledButton";
+import { useExcalidrawActionManager, useExcalidrawSetAppState } from "../App";
+import { actionSaveFileToDisk } from "../../actions";
+import { useI18n } from "../../i18n";
+import { actionChangeExportEmbedScene } from "../../actions/actionExport";
+export const Action = ({ title, children, actionLabel, onClick, }) => {
+    return (_jsxs("div", { className: "OverwriteConfirm__Actions__Action", children: [_jsx("h4", { children: title }), _jsx("div", { className: "OverwriteConfirm__Actions__Action__content", children: children }), _jsx(FilledButton, { variant: "outlined", color: "muted", label: actionLabel, size: "large", fullWidth: true, onClick: onClick })] }));
+};
+export const ExportToImage = () => {
+    const { t } = useI18n();
+    const actionManager = useExcalidrawActionManager();
+    const setAppState = useExcalidrawSetAppState();
+    return (_jsx(Action, { title: t("overwriteConfirm.action.exportToImage.title"), actionLabel: t("overwriteConfirm.action.exportToImage.button"), onClick: () => {
+            actionManager.executeAction(actionChangeExportEmbedScene, "ui", true);
+            setAppState({ openDialog: { name: "imageExport" } });
+        }, children: t("overwriteConfirm.action.exportToImage.description") }));
+};
+export const SaveToDisk = () => {
+    const { t } = useI18n();
+    const actionManager = useExcalidrawActionManager();
+    return (_jsx(Action, { title: t("overwriteConfirm.action.saveToDisk.title"), actionLabel: t("overwriteConfirm.action.saveToDisk.button"), onClick: () => {
+            actionManager.executeAction(actionSaveFileToDisk, "ui");
+        }, children: t("overwriteConfirm.action.saveToDisk.description") }));
+};
+const Actions = Object.assign(({ children }) => {
+    return _jsx("div", { className: "OverwriteConfirm__Actions", children: children });
+}, {
+    ExportToImage,
+    SaveToDisk,
+});
+export { Actions };

package/dist/packages/excalidraw/components/OverwriteConfirm/OverwriteConfirmState.js

@@ -0,0 +1,19 @@
+import { atom } from "jotai";
+import { jotaiStore } from "../../jotai";
+export const overwriteConfirmStateAtom = atom({
+    active: false,
+});
+export async function openConfirmModal({ title, description, actionLabel, color, }) {
+    return new Promise((resolve) => {
+        jotaiStore.set(overwriteConfirmStateAtom, {
+            active: true,
+            onConfirm: () => resolve(true),
+            onClose: () => resolve(false),
+            onReject: () => resolve(false),
+            title,
+            description,
+            actionLabel,
+            color,
+        });
+    });
+}

package/dist/packages/excalidraw/components/Paragraph.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Paragraph = (props) => {
+    return (_jsx("p", { className: "excalidraw__paragraph", style: props.style, children: props.children }));
+};

package/dist/packages/excalidraw/components/PasteChartDialog.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import oc from "open-color";
+import React, { useLayoutEffect, useRef, useState } from "react";
+import { trackEvent } from "../analytics";
+import { renderSpreadsheet } from "../charts";
+import { t } from "../i18n";
+import { exportToSvg } from "../scene/export";
+import { useApp } from "./App";
+import { Dialog } from "./Dialog";
+import "./PasteChartDialog.scss";
+const ChartPreviewBtn = (props) => {
+    const previewRef = useRef(null);
+    const [chartElements, setChartElements] = useState(null);
+    useLayoutEffect(() => {
+        if (!props.spreadsheet) {
+            return;
+        }
+        const elements = renderSpreadsheet(props.chartType, props.spreadsheet, 0, 0);
+        setChartElements(elements);
+        let svg;
+        const previewNode = previewRef.current;
+        (async () => {
+            svg = await exportToSvg(elements, {
+                exportBackground: false,
+                viewBackgroundColor: oc.white,
+            }, null);
+            svg.querySelector(".style-fonts")?.remove();
+            previewNode.replaceChildren();
+            previewNode.appendChild(svg);
+            if (props.selected) {
+                previewNode.parentNode.focus();
+            }
+        })();
+        return () => {
+            previewNode.replaceChildren();
+        };
+    }, [props.spreadsheet, props.chartType, props.selected]);
+    return (_jsx("button", { className: "ChartPreview", onClick: () => {
+            if (chartElements) {
+                props.onClick(props.chartType, chartElements);
+            }
+        }, children: _jsx("div", { ref: previewRef }) }));
+};
+export const PasteChartDialog = ({ setAppState, appState, onClose, }) => {
+    const { onInsertElements } = useApp();
+    const handleClose = React.useCallback(() => {
+        if (onClose) {
+            onClose();
+        }
+    }, [onClose]);
+    const handleChartClick = (chartType, elements) => {
+        onInsertElements(elements);
+        trackEvent("paste", "chart", chartType);
+        setAppState({
+            currentChartType: chartType,
+            pasteDialog: {
+                shown: false,
+                data: null,
+            },
+        });
+    };
+    return (_jsx(Dialog, { size: "small", onCloseRequest: handleClose, title: t("labels.pasteCharts"), className: "PasteChartDialog", autofocus: false, children: _jsxs("div", { className: "container", children: [_jsx(ChartPreviewBtn, { chartType: "bar", spreadsheet: appState.pasteDialog.data, selected: appState.currentChartType === "bar", onClick: handleChartClick }), _jsx(ChartPreviewBtn, { chartType: "line", spreadsheet: appState.pasteDialog.data, selected: appState.currentChartType === "line", onClick: handleChartClick })] }) }));
+};

package/dist/packages/excalidraw/components/PasteChartDialog.scss

@@ -0,0 +1,46 @@
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  .PasteChartDialog {
+    @include isMobile {
+      .Island {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    .container {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      @include isMobile {
+        flex-direction: column;
+        justify-content: center;
+      }
+    }
+    .ChartPreview {
+      margin: 8px;
+      text-align: center;
+      width: 192px;
+      height: 128px;
+      border-radius: 2px;
+      padding: 1px;
+      border: 1px solid $oc-gray-4;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      div {
+        display: inline-block;
+      }
+      svg {
+        max-height: 120px;
+        max-width: 186px;
+      }
+      &:hover {
+        padding: 0;
+        border: 2px solid $oc-blue-5;
+      }
+    }
+  }
+}

package/dist/packages/excalidraw/components/PenModeButton.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./ToolIcon.scss";
+import clsx from "clsx";
+import { PenModeIcon } from "./icons";
+const DEFAULT_SIZE = "medium";
+export const PenModeButton = (props) => {
+    if (!props.penDetected) {
+        return null;
+    }
+    return (_jsxs("label", { className: clsx("ToolIcon ToolIcon__penMode", `ToolIcon_size_${DEFAULT_SIZE}`, {
+            "is-mobile": props.isMobile,
+        }), title: `${props.title}`, children: [_jsx("input", { className: "ToolIcon_type_checkbox", type: "checkbox", name: props.name, onChange: props.onChange, checked: props.checked, "aria-label": props.title }), _jsx("div", { className: "ToolIcon__icon", children: PenModeIcon })] }));
+};

package/dist/packages/excalidraw/components/Popover.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useEffect } from "react";
+import "./Popover.scss";
+import { unstable_batchedUpdates } from "react-dom";
+import { queryFocusableElements } from "../utils";
+import { KEYS } from "../keys";
+export const Popover = ({ children, left, top, onCloseRequest, fitInViewport = false, offsetLeft = 0, offsetTop = 0, viewportWidth = window.innerWidth, viewportHeight = window.innerHeight, }) => {
+    const popoverRef = useRef(null);
+    useEffect(() => {
+        const container = popoverRef.current;
+        if (!container) {
+            return;
+        }
+        // focus popover only if the caller didn't focus on something else nested
+        // within the popover, which should take precedence. Fixes cases
+        // like color picker listening to keydown events on containers nested
+        // in the popover.
+        if (!container.contains(document.activeElement)) {
+            container.focus();
+        }
+        const handleKeyDown = (event) => {
+            if (event.key === KEYS.TAB) {
+                const focusableElements = queryFocusableElements(container);
+                const { activeElement } = document;
+                const currentIndex = focusableElements.findIndex((element) => element === activeElement);
+                if (activeElement === container) {
+                    if (event.shiftKey) {
+                        focusableElements[focusableElements.length - 1]?.focus();
+                    }
+                    else {
+                        focusableElements[0].focus();
+                    }
+                    event.preventDefault();
+                    event.stopImmediatePropagation();
+                }
+                else if (currentIndex === 0 && event.shiftKey) {
+                    focusableElements[focusableElements.length - 1]?.focus();
+                    event.preventDefault();
+                    event.stopImmediatePropagation();
+                }
+                else if (currentIndex === focusableElements.length - 1 &&
+                    !event.shiftKey) {
+                    focusableElements[0]?.focus();
+                    event.preventDefault();
+                    event.stopImmediatePropagation();
+                }
+            }
+        };
+        container.addEventListener("keydown", handleKeyDown);
+        return () => container.removeEventListener("keydown", handleKeyDown);
+    }, []);
+    const lastInitializedPosRef = useRef(null);
+    // ensure the popover doesn't overflow the viewport
+    useLayoutEffect(() => {
+        if (fitInViewport && popoverRef.current && top != null && left != null) {
+            const container = popoverRef.current;
+            const { width, height } = container.getBoundingClientRect();
+            // hack for StrictMode so this effect only runs once for
+            // the same top/left position, otherwise
+            // we'd potentically reposition twice (once for viewport overflow)
+            // and once for top/left position afterwards
+            if (lastInitializedPosRef.current?.top === top &&
+                lastInitializedPosRef.current?.left === left) {
+                return;
+            }
+            lastInitializedPosRef.current = { top, left };
+            if (width >= viewportWidth) {
+                container.style.width = `${viewportWidth}px`;
+                container.style.left = "0px";
+                container.style.overflowX = "scroll";
+            }
+            else if (left + width - offsetLeft > viewportWidth) {
+                container.style.left = `${viewportWidth - width - 10}px`;
+            }
+            else {
+                container.style.left = `${left}px`;
+            }
+            if (height >= viewportHeight) {
+                container.style.height = `${viewportHeight - 20}px`;
+                container.style.top = "10px";
+                container.style.overflowY = "scroll";
+            }
+            else if (top + height - offsetTop > viewportHeight) {
+                container.style.top = `${viewportHeight - height}px`;
+            }
+            else {
+                container.style.top = `${top}px`;
+            }
+        }
+    }, [
+        top,
+        left,
+        fitInViewport,
+        viewportWidth,
+        viewportHeight,
+        offsetLeft,
+        offsetTop,
+    ]);
+    useEffect(() => {
+        if (onCloseRequest) {
+            const handler = (event) => {
+                if (!popoverRef.current?.contains(event.target)) {
+                    unstable_batchedUpdates(() => onCloseRequest(event));
+                }
+            };
+            document.addEventListener("pointerdown", handler, false);
+            return () => document.removeEventListener("pointerdown", handler, false);
+        }
+    }, [onCloseRequest]);
+    return (_jsx("div", { className: "popover", ref: popoverRef, tabIndex: -1, children: children }));
+};

package/dist/packages/excalidraw/components/Popover.scss

@@ -0,0 +1,8 @@
+.excalidraw {
+  .popover {
+    position: absolute;
+    z-index: 10;
+    padding: 5px 0 5px;
+    outline: none;
+  }
+}

package/dist/packages/excalidraw/components/ProjectName.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./TextInput.scss";
+import { useState } from "react";
+import { focusNearestParent } from "../utils";
+import "./ProjectName.scss";
+import { useExcalidrawContainer } from "./App";
+import { KEYS } from "../keys";
+export const ProjectName = (props) => {
+    const { id } = useExcalidrawContainer();
+    const [fileName, setFileName] = useState(props.value);
+    const handleBlur = (event) => {
+        if (!props.ignoreFocus) {
+            focusNearestParent(event.target);
+        }
+        const value = event.target.value;
+        if (value !== props.value) {
+            props.onChange(value);
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === KEYS.ENTER) {
+            event.preventDefault();
+            if (event.nativeEvent.isComposing || event.keyCode === 229) {
+                return;
+            }
+            event.currentTarget.blur();
+        }
+    };
+    return (_jsxs("div", { className: "ProjectName", children: [_jsx("label", { className: "ProjectName-label", htmlFor: "filename", children: `${props.label}${props.isNameEditable ? "" : ":"}` }), props.isNameEditable ? (_jsx("input", { type: "text", className: "TextInput", onBlur: handleBlur, onKeyDown: handleKeyDown, id: `${id}-filename`, value: fileName, onChange: (event) => setFileName(event.target.value) })) : (_jsx("span", { className: "TextInput TextInput--readonly", id: `${id}-filename`, children: props.value }))] }));
+};

package/dist/packages/excalidraw/components/ProjectName.scss

@@ -0,0 +1,25 @@
+.ProjectName {
+  margin: auto;
+  display: flex;
+  align-items: center;
+
+  .TextInput {
+    height: calc(1rem - 3px);
+    width: 200px;
+    overflow: hidden;
+    text-align: center;
+    margin-left: 8px;
+    text-overflow: ellipsis;
+
+    &--readonly {
+      background: none;
+      border: none;
+      &:hover {
+        background: none;
+      }
+      width: auto;
+      max-width: 200px;
+      padding-left: 2px;
+    }
+  }
+}