@excalidraw/excalidraw 0.17.1-7441-8b04eb5 → 0.17.1-7500-ac247a0

package/dist/excalidraw/components/App.d.ts

@@ -61,6 +61,7 @@ declare class App extends React.Component<AppProps, AppState> {
     hitLinkElement?: NonDeletedExcalidrawElement;
     lastPointerDownEvent: React.PointerEvent<HTMLElement> | null;
     lastPointerUpEvent: React.PointerEvent<HTMLElement> | PointerEvent | null;
+    lastPointerMoveEvent: PointerEvent | null;
     lastViewportPosition: {
         x: number;
         y: number;
@@ -211,6 +212,8 @@ declare class App extends React.Component<AppProps, AppState> {
     onScrollChangeEmitter: Emitter<[scrollX: number, scrollY: number, zoom: Readonly<{
         value: import("../types").NormalizedZoomValue;
     }>]>;
+    missingPointerEventCleanupEmitter: Emitter<[event: PointerEvent | null]>;
+    onRemoveEventListenersEmitter: Emitter<[]>;
     constructor(props: AppProps);
     private onWindowMessage;
     private cacheEmbeddableRef;
@@ -258,9 +261,9 @@ declare class App extends React.Component<AppProps, AppState> {
     componentDidMount(): Promise<void>;
     componentWillUnmount(): void;
     private onResize;
-    private removeEventListeners;
     /** generally invoked only if fullscreen was invoked programmatically */
     private onFullscreenChange;
+    private removeEventListeners;
     private addEventListeners;
     componentDidUpdate(prevProps: AppProps, prevState: AppState): void;
     private renderInteractiveSceneCallback;
@@ -388,6 +391,11 @@ declare class App extends React.Component<AppProps, AppState> {
     private handleCanvasPointerUp;
     private maybeOpenContextMenuAfterPointerDownOnTouchDevices;
     private resetContextMenuTimer;
+    /**
+     * pointerup may not fire in certian cases (user tabs away...), so in order
+     * to properly cleanup pointerdown state, we need to fire any hanging
+     * pointerup handlers manually
+     */
     private maybeCleanupAfterMissingPointerUp;
     private handleCanvasPanUsingWheelOrSpaceDrag;
     private updateGestureOnPointerDown;

package/dist/excalidraw/components/App.js

@@ -11,7 +11,7 @@ import { actions } from "../actions/register";
 import { trackEvent } from "../analytics";
 import { getDefaultAppState, isEraserActive, isHandToolActive, } from "../appState";
 import { copyTextToSystemClipboard, parseClipboard, } from "../clipboard";
-import { APP_NAME, CURSOR_TYPE, DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT, DEFAULT_VERTICAL_ALIGN, DRAGGING_THRESHOLD, ELEMENT_READY_TO_ERASE_OPACITY, ELEMENT_SHIFT_TRANSLATE_AMOUNT, ELEMENT_TRANSLATE_AMOUNT, ENV, EVENT, FRAME_STYLE, GRID_SIZE, IMAGE_MIME_TYPES, IMAGE_RENDER_TIMEOUT, isAndroid, isBrave, LINE_CONFIRM_THRESHOLD, MAX_ALLOWED_FILE_BYTES, MIME_TYPES, MQ_MAX_HEIGHT_LANDSCAPE, MQ_MAX_WIDTH_LANDSCAPE, MQ_MAX_WIDTH_PORTRAIT, MQ_RIGHT_SIDEBAR_MIN_WIDTH, POINTER_BUTTON, ROUNDNESS, SCROLL_TIMEOUT, TAP_TWICE_TIMEOUT, TEXT_TO_CENTER_SNAP_THRESHOLD, THEME, THEME_FILTER, TOUCH_CTX_MENU_TIMEOUT, VERTICAL_ALIGN, YOUTUBE_STATES, ZOOM_STEP, POINTER_EVENTS, TOOL_TYPE, EDITOR_LS_KEYS, } from "../constants";
+import { APP_NAME, CURSOR_TYPE, DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT, DEFAULT_VERTICAL_ALIGN, DRAGGING_THRESHOLD, ELEMENT_READY_TO_ERASE_OPACITY, ELEMENT_SHIFT_TRANSLATE_AMOUNT, ELEMENT_TRANSLATE_AMOUNT, ENV, EVENT, FRAME_STYLE, GRID_SIZE, IMAGE_MIME_TYPES, IMAGE_RENDER_TIMEOUT, isBrave, LINE_CONFIRM_THRESHOLD, MAX_ALLOWED_FILE_BYTES, MIME_TYPES, MQ_MAX_HEIGHT_LANDSCAPE, MQ_MAX_WIDTH_LANDSCAPE, MQ_MAX_WIDTH_PORTRAIT, MQ_RIGHT_SIDEBAR_MIN_WIDTH, POINTER_BUTTON, ROUNDNESS, SCROLL_TIMEOUT, TAP_TWICE_TIMEOUT, TEXT_TO_CENTER_SNAP_THRESHOLD, THEME, THEME_FILTER, TOUCH_CTX_MENU_TIMEOUT, VERTICAL_ALIGN, YOUTUBE_STATES, ZOOM_STEP, POINTER_EVENTS, TOOL_TYPE, EDITOR_LS_KEYS, isIOS, } from "../constants";
 import { exportCanvas, loadFromBlob } from "../data";
 import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
 import { restore, restoreElements } from "../data/restore";
@@ -32,7 +32,7 @@ import { calculateScrollCenter, getElementsAtPosition, getElementsWithinSelectio
 import Scene from "../scene/Scene";
 import { getStateForZoom } from "../scene/zoom";
 import { findShapeByKey } from "../shapes";
-import { debounce, distance, getFontString, getNearestScrollableContainer, isInputLike, isToolIcon, isWritableElement, sceneCoordsToViewportCoords, tupleToCoors, viewportCoordsToSceneCoords, withBatchedUpdates, wrapEvent, withBatchedUpdatesThrottled, updateObject, updateActiveTool, getShortcutKey, isTransparent, easeToValuesRAF, muteFSAbortError, isTestEnv, easeOut, updateStable, } from "../utils";
+import { debounce, distance, getFontString, getNearestScrollableContainer, isInputLike, isToolIcon, isWritableElement, sceneCoordsToViewportCoords, tupleToCoors, viewportCoordsToSceneCoords, withBatchedUpdates, wrapEvent, withBatchedUpdatesThrottled, updateObject, updateActiveTool, getShortcutKey, isTransparent, easeToValuesRAF, muteFSAbortError, isTestEnv, easeOut, updateStable, addEventListener, } from "../utils";
 import { createSrcDoc, embeddableURLValidator, extractSrc, getEmbedLink, } from "../element/embeddable";
 import { ContextMenu, CONTEXT_MENU_SEPARATOR, } from "./ContextMenu";
 import LayerUI from "./LayerUI";
@@ -72,7 +72,7 @@ import { setEraserCursor, setCursor, resetCursor, setCursorForShape, } from "../
 import { Emitter } from "../emitter";
 import { ElementCanvasButtons } from "../element/ElementCanvasButtons";
 import { diagramToHTML } from "../data/magic";
-import { elementsOverlappingBBox, exportToBlob } from "../../utils/export";
+import { elementsOverlappingBBox, exportToBlob } from "../../utils/index";
 import { COLOR_PALETTE } from "../colors";
 import { ElementCanvasButton } from "./MagicButton";
 import { MagicIcon, copyIcon, fullscreenIcon } from "./icons";
@@ -166,6 +166,7 @@ class App extends React.Component {
     hitLinkElement;
     lastPointerDownEvent = null;
     lastPointerUpEvent = null;
+    lastPointerMoveEvent = null;
     lastViewportPosition = { x: 0, y: 0 };
     laserPathManager = new LaserPathManager(this);
     onChangeEmitter = new Emitter();
@@ -173,6 +174,8 @@ class App extends React.Component {
     onPointerUpEmitter = new Emitter();
     onUserFollowEmitter = new Emitter();
     onScrollChangeEmitter = new Emitter();
+    missingPointerEventCleanupEmitter = new Emitter();
+    onRemoveEventListenersEmitter = new Emitter();
     constructor(props) {
         super(props);
         const defaultAppState = getDefaultAppState();
@@ -1339,6 +1342,7 @@ class App extends React.Component {
         return false;
     };
     async componentDidMount() {
+        console.log("HELLO IS");
         this.unmounted = false;
         this.excalidrawContainerValue.container =
             this.excalidrawContainerRef.current;
@@ -1414,7 +1418,7 @@ class App extends React.Component {
         this.scene.destroy();
         this.library.destroy();
         this.laserPathManager.destroy();
-        this.onChangeEmitter.destroy();
+        this.onChangeEmitter.clear();
         ShapeCache.destroy();
         SnapCache.destroy();
         clearTimeout(touchTimeout);
@@ -1433,27 +1437,6 @@ class App extends React.Component {
         }
         this.setState({});
     });
-    removeEventListeners() {
-        document.removeEventListener(EVENT.POINTER_UP, this.removePointer);
-        document.removeEventListener(EVENT.COPY, this.onCopy);
-        document.removeEventListener(EVENT.PASTE, this.pasteFromClipboard);
-        document.removeEventListener(EVENT.CUT, this.onCut);
-        this.excalidrawContainerRef.current?.removeEventListener(EVENT.WHEEL, this.onWheel);
-        this.nearestScrollableContainer?.removeEventListener(EVENT.SCROLL, this.onScroll);
-        document.removeEventListener(EVENT.KEYDOWN, this.onKeyDown, false);
-        document.removeEventListener(EVENT.MOUSE_MOVE, this.updateCurrentCursorPosition, false);
-        document.removeEventListener(EVENT.KEYUP, this.onKeyUp);
-        window.removeEventListener(EVENT.RESIZE, this.onResize, false);
-        window.removeEventListener(EVENT.UNLOAD, this.onUnload, false);
-        window.removeEventListener(EVENT.BLUR, this.onBlur, false);
-        this.excalidrawContainerRef.current?.removeEventListener(EVENT.DRAG_OVER, this.disableEvent, false);
-        this.excalidrawContainerRef.current?.removeEventListener(EVENT.DROP, this.disableEvent, false);
-        document.removeEventListener(EVENT.GESTURE_START, this.onGestureStart, false);
-        document.removeEventListener(EVENT.GESTURE_CHANGE, this.onGestureChange, false);
-        document.removeEventListener(EVENT.GESTURE_END, this.onGestureEnd, false);
-        document.removeEventListener(EVENT.FULLSCREENCHANGE, this.onFullscreenChange);
-        window.removeEventListener(EVENT.MESSAGE, this.onWindowMessage, false);
-    }
     /** generally invoked only if fullscreen was invoked programmatically */
     onFullscreenChange = () => {
         if (
@@ -1465,41 +1448,39 @@ class App extends React.Component {
             });
         }
     };
+    removeEventListeners() {
+        this.onRemoveEventListenersEmitter.trigger();
+    }
     addEventListeners() {
+        // remove first as we can add event listeners multiple times
         this.removeEventListeners();
-        window.addEventListener(EVENT.MESSAGE, this.onWindowMessage, false);
-        document.addEventListener(EVENT.POINTER_UP, this.removePointer); // #3553
-        document.addEventListener(EVENT.COPY, this.onCopy);
-        this.excalidrawContainerRef.current?.addEventListener(EVENT.WHEEL, this.onWheel, { passive: false });
+        // -------------------------------------------------------------------------
+        //                        view+edit mode listeners
+        // -------------------------------------------------------------------------
         if (this.props.handleKeyboardGlobally) {
-            document.addEventListener(EVENT.KEYDOWN, this.onKeyDown, false);
+            this.onRemoveEventListenersEmitter.once(addEventListener(document, EVENT.KEYDOWN, this.onKeyDown, false));
         }
-        document.addEventListener(EVENT.KEYUP, this.onKeyUp, { passive: true });
-        document.addEventListener(EVENT.MOUSE_MOVE, this.updateCurrentCursorPosition);
+        this.onRemoveEventListenersEmitter.once(addEventListener(this.excalidrawContainerRef.current, EVENT.WHEEL, this.onWheel, { passive: false }), addEventListener(window, EVENT.MESSAGE, this.onWindowMessage, false), addEventListener(document, EVENT.POINTER_UP, this.removePointer), // #3553
+        addEventListener(document, EVENT.COPY, this.onCopy), addEventListener(document, EVENT.KEYUP, this.onKeyUp, { passive: true }), addEventListener(document, EVENT.MOUSE_MOVE, this.updateCurrentCursorPosition), 
         // rerender text elements on font load to fix #637 && #1553
-        document.fonts?.addEventListener?.("loadingdone", (event) => {
+        addEventListener(document.fonts, "loadingdone", (event) => {
             const loadedFontFaces = event.fontfaces;
             this.fonts.onFontsLoaded(loadedFontFaces);
-        });
+        }), 
         // Safari-only desktop pinch zoom
-        document.addEventListener(EVENT.GESTURE_START, this.onGestureStart, false);
-        document.addEventListener(EVENT.GESTURE_CHANGE, this.onGestureChange, false);
-        document.addEventListener(EVENT.GESTURE_END, this.onGestureEnd, false);
+        addEventListener(document, EVENT.GESTURE_START, this.onGestureStart, false), addEventListener(document, EVENT.GESTURE_CHANGE, this.onGestureChange, false), addEventListener(document, EVENT.GESTURE_END, this.onGestureEnd, false), addEventListener(window, EVENT.FOCUS, () => {
+            this.maybeCleanupAfterMissingPointerUp(null);
+        }));
         if (this.state.viewModeEnabled) {
             return;
         }
-        document.addEventListener(EVENT.FULLSCREENCHANGE, this.onFullscreenChange);
-        document.addEventListener(EVENT.PASTE, this.pasteFromClipboard);
-        document.addEventListener(EVENT.CUT, this.onCut);
+        // -------------------------------------------------------------------------
+        //                        edit-mode listeners only
+        // -------------------------------------------------------------------------
+        this.onRemoveEventListenersEmitter.once(addEventListener(document, EVENT.FULLSCREENCHANGE, this.onFullscreenChange), addEventListener(document, EVENT.PASTE, this.pasteFromClipboard), addEventListener(document, EVENT.CUT, this.onCut), addEventListener(window, EVENT.RESIZE, this.onResize, false), addEventListener(window, EVENT.UNLOAD, this.onUnload, false), addEventListener(window, EVENT.BLUR, this.onBlur, false), addEventListener(this.excalidrawContainerRef.current, EVENT.DRAG_OVER, this.disableEvent, false), addEventListener(this.excalidrawContainerRef.current, EVENT.DROP, this.disableEvent, false));
         if (this.props.detectScroll) {
-            this.nearestScrollableContainer = getNearestScrollableContainer(this.excalidrawContainerRef.current);
-            this.nearestScrollableContainer.addEventListener(EVENT.SCROLL, this.onScroll);
-        }
-        window.addEventListener(EVENT.RESIZE, this.onResize, false);
-        window.addEventListener(EVENT.UNLOAD, this.onUnload, false);
-        window.addEventListener(EVENT.BLUR, this.onBlur, false);
-        this.excalidrawContainerRef.current?.addEventListener(EVENT.DRAG_OVER, this.disableEvent, false);
-        this.excalidrawContainerRef.current?.addEventListener(EVENT.DROP, this.disableEvent, false);
+            this.onRemoveEventListenersEmitter.once(addEventListener(getNearestScrollableContainer(this.excalidrawContainerRef.current), EVENT.SCROLL, this.onScroll));
+        }
     }
     componentDidUpdate(prevProps, prevState) {
         this.updateEmbeddables();
@@ -1664,9 +1645,8 @@ class App extends React.Component {
         didTapTwice = false;
     }
     onTouchStart = (event) => {
-        // fix for Apple Pencil Scribble
-        // On Android, preventing the event would disable contextMenu on tap-hold
-        if (!isAndroid) {
+        // fix for Apple Pencil Scribble (do not prevent for other devices)
+        if (isIOS) {
             event.preventDefault();
         }
         if (!didTapTwice) {
@@ -1687,9 +1667,6 @@ class App extends React.Component {
             didTapTwice = false;
             clearTimeout(tappedTwiceTimer);
         }
-        if (isAndroid) {
-            event.preventDefault();
-        }
         if (event.touches.length === 2) {
             this.setState({
                 selectedElementIds: makeNextSelectedElementIds({}, this.state),
@@ -3021,6 +2998,7 @@ class App extends React.Component {
     };
     handleCanvasPointerMove = (event) => {
         this.savePointer(event.clientX, event.clientY, this.state.cursorButton);
+        this.lastPointerMoveEvent = event.nativeEvent;
         if (gesture.pointers.has(event.pointerId)) {
             gesture.pointers.set(event.pointerId, {
                 x: event.clientX,
@@ -3411,6 +3389,7 @@ class App extends React.Component {
         }
     }
     handleCanvasPointerDown = (event) => {
+        this.maybeCleanupAfterMissingPointerUp(event.nativeEvent);
         this.maybeUnfollowRemoteUser();
         // since contextMenu options are potentially evaluated on each render,
         // and an contextMenu action may depend on selection state, we must
@@ -3463,7 +3442,6 @@ class App extends React.Component {
             selection.removeAllRanges();
         }
         this.maybeOpenContextMenuAfterPointerDownOnTouchDevices(event);
-        this.maybeCleanupAfterMissingPointerUp(event);
         //fires only once, if pen is detected, penMode is enabled
         //the user can disable this by toggling the penMode button
         if (!this.state.penDetected && event.pointerType === "pen") {
@@ -3493,9 +3471,47 @@ class App extends React.Component {
             cursorButton: "down",
         });
         this.savePointer(event.clientX, event.clientY, "down");
+        if (event.button === POINTER_BUTTON.ERASER &&
+            this.state.activeTool.type !== TOOL_TYPE.eraser) {
+            this.setState({
+                activeTool: updateActiveTool(this.state, {
+                    type: TOOL_TYPE.eraser,
+                    lastActiveToolBeforeEraser: this.state.activeTool,
+                }),
+            }, () => {
+                this.handleCanvasPointerDown(event);
+                const onPointerUp = () => {
+                    unsubPointerUp();
+                    unsubCleanup?.();
+                    if (isEraserActive(this.state)) {
+                        this.setState({
+                            activeTool: updateActiveTool(this.state, {
+                                ...(this.state.activeTool.lastActiveTool || {
+                                    type: TOOL_TYPE.selection,
+                                }),
+                                lastActiveToolBeforeEraser: null,
+                            }),
+                        });
+                    }
+                };
+                const unsubPointerUp = addEventListener(window, EVENT.POINTER_UP, onPointerUp, {
+                    once: true,
+                });
+                let unsubCleanup;
+                // subscribe inside rAF lest it'd be triggered on the same pointerdown
+                // if we start erasing while coming from blurred document since
+                // we cleanup pointer events on focus
+                requestAnimationFrame(() => {
+                    unsubCleanup =
+                        this.missingPointerEventCleanupEmitter.once(onPointerUp);
+                });
+            });
+            return;
+        }
         // only handle left mouse button or touch
         if (event.button !== POINTER_BUTTON.MAIN &&
-            event.button !== POINTER_BUTTON.TOUCH) {
+            event.button !== POINTER_BUTTON.TOUCH &&
+            event.button !== POINTER_BUTTON.ERASER) {
             return;
         }
         // don't select while panning
@@ -3578,7 +3594,7 @@ class App extends React.Component {
         const onPointerUp = this.onPointerUpFromPointerDownHandler(pointerDownState);
         const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState);
         const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState);
-        lastPointerUp = onPointerUp;
+        this.missingPointerEventCleanupEmitter.once((_event) => onPointerUp(_event || event.nativeEvent));
         if (!this.state.viewModeEnabled || this.state.activeTool.type === "laser") {
             window.addEventListener(EVENT.POINTER_MOVE, onPointerMove);
             window.addEventListener(EVENT.POINTER_UP, onPointerUp);
@@ -3655,14 +3671,15 @@ class App extends React.Component {
         touchTimeout = 0;
         invalidateContextMenu = false;
     };
-    maybeCleanupAfterMissingPointerUp(event) {
-        if (lastPointerUp !== null) {
-            // Unfortunately, sometimes we don't get a pointerup after a pointerdown,
-            // this can happen when a contextual menu or alert is triggered. In order to avoid
-            // being in a weird state, we clean up on the next pointerdown
-            lastPointerUp(event);
-        }
-    }
+    /**
+     * pointerup may not fire in certian cases (user tabs away...), so in order
+     * to properly cleanup pointerdown state, we need to fire any hanging
+     * pointerup handlers manually
+     */
+    maybeCleanupAfterMissingPointerUp = (event) => {
+        lastPointerUp?.();
+        this.missingPointerEventCleanupEmitter.trigger(event).clear();
+    };
     // Returns whether the event is a panning
     handleCanvasPanUsingWheelOrSpaceDrag = (event) => {
         if (!(gesture.pointers.size <= 1 &&
@@ -3818,9 +3835,9 @@ class App extends React.Component {
             this.handlePointerMoveOverScrollbars(event, pointerDownState);
         });
         const onPointerUp = withBatchedUpdates(() => {
+            lastPointerUp = null;
             isDraggingScrollBar = false;
             setCursorForShape(this.interactiveCanvas, this.state);
-            lastPointerUp = null;
             this.setState({
                 cursorButton: "up",
             });
@@ -4789,6 +4806,7 @@ class App extends React.Component {
     }
     onPointerUpFromPointerDownHandler(pointerDownState) {
         return withBatchedUpdates((childEvent) => {
+            this.removePointer(childEvent);
             if (pointerDownState.eventListeners.onMove) {
                 pointerDownState.eventListeners.onMove.flush();
             }
@@ -4860,7 +4878,7 @@ class App extends React.Component {
                     }
                 }
             }
-            lastPointerUp = null;
+            this.missingPointerEventCleanupEmitter.clear();
             window.removeEventListener(EVENT.POINTER_MOVE, pointerDownState.eventListeners.onMove);
             window.removeEventListener(EVENT.POINTER_UP, pointerDownState.eventListeners.onUp);
             window.removeEventListener(EVENT.KEYDOWN, pointerDownState.eventListeners.onKeyDown);
@@ -5079,12 +5097,14 @@ class App extends React.Component {
                     });
                 }
             }
-            if (isEraserActive(this.state)) {
-                const draggedDistance = distance2d(this.lastPointerDownEvent.clientX, this.lastPointerDownEvent.clientY, this.lastPointerUpEvent.clientX, this.lastPointerUpEvent.clientY);
+            const pointerStart = this.lastPointerDownEvent;
+            const pointerEnd = this.lastPointerUpEvent || this.lastPointerMoveEvent;
+            if (isEraserActive(this.state) && pointerStart && pointerEnd) {
+                const draggedDistance = distance2d(pointerStart.clientX, pointerStart.clientY, pointerEnd.clientX, pointerEnd.clientY);
                 if (draggedDistance === 0) {
                     const scenePointer = viewportCoordsToSceneCoords({
-                        clientX: this.lastPointerUpEvent.clientX,
-                        clientY: this.lastPointerUpEvent.clientY,
+                        clientX: pointerEnd.clientX,
+                        clientY: pointerEnd.clientY,
                     }, this.state);
                     const hitElements = this.getElementsAtPosition(scenePointer.x, scenePointer.y);
                     hitElements.forEach((hitElement) => (pointerDownState.elementIdsToErase[hitElement.id] = {

package/dist/excalidraw/components/ImageExportDialog.js

@@ -7,7 +7,7 @@ import { canvasToBlob } from "../data/blob";
 import { nativeFileSystemSupported } from "../data/filesystem";
 import { t } from "../i18n";
 import { isSomeElementSelected } from "../scene";
-import { exportToCanvas } from "../../utils/export";
+import { exportToCanvas } from "../../utils/index";
 import { copyIcon, downloadIcon, helpIcon } from "./icons";
 import { Dialog } from "./Dialog";
 import { RadioGroup } from "./RadioGroup";

package/dist/excalidraw/components/PublishLibrary.js

@@ -4,7 +4,7 @@ import OpenColor from "open-color";
 import { Dialog } from "./Dialog";
 import { t } from "../i18n";
 import Trans from "./Trans";
-import { exportToCanvas, exportToSvg } from "../../utils/export";
+import { exportToCanvas, exportToSvg } from "../../utils/index";
 import { EDITOR_LS_KEYS, EXPORT_DATA_TYPES, EXPORT_SOURCE, MIME_TYPES, VERSIONS, } from "../constants";
 import { canvasToBlob, resizeImageFile } from "../data/blob";
 import { chunk } from "../utils";

package/dist/excalidraw/components/Sidebar/Sidebar.d.ts

@@ -22,7 +22,7 @@ export declare const SidebarInner: React.ForwardRefExoticComponent<Pick<{
     docked?: boolean | undefined;
     className?: string | undefined;
     __fallback?: boolean | undefined;
-} & Omit<React.RefAttributes<HTMLDivElement>, "onSelect">, "name" | "children" | "key" | "className" | "onDock" | "docked" | "onStateChange" | "__fallback"> & React.RefAttributes<HTMLDivElement>>;
+} & Omit<React.RefAttributes<HTMLDivElement>, "onSelect">, "name" | "children" | "key" | "className" | "__fallback" | "onDock" | "docked" | "onStateChange"> & React.RefAttributes<HTMLDivElement>>;
 export declare const Sidebar: React.ForwardRefExoticComponent<{
     name: string;
     children: React.ReactNode;

package/dist/excalidraw/components/dropdownMenu/common.d.ts

@@ -3,4 +3,4 @@ export declare const DropdownMenuContentPropsContext: React.Context<{
     onSelect?: ((event: Event) => void) | undefined;
 }>;
 export declare const getDropdownMenuItemClassName: (className?: string, selected?: boolean) => string;
-export declare const useHandleDropdownMenuItemClick: (origOnClick: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined, onSelect: ((event: Event) => void) | undefined) => (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => void;
+export declare const useHandleDropdownMenuItemClick: (origOnClick: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined, onSelect: ((event: Event) => void) | undefined) => (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>) => void;

package/dist/excalidraw/constants.d.ts

@@ -6,6 +6,7 @@ export declare const isAndroid: boolean;
 export declare const isFirefox: boolean;
 export declare const isChrome: boolean;
 export declare const isSafari: boolean;
+export declare const isIOS: boolean;
 export declare const isBrave: () => boolean;
 export declare const APP_NAME = "Excalidraw";
 export declare const DRAGGING_THRESHOLD = 10;
@@ -28,6 +29,7 @@ export declare const POINTER_BUTTON: {
     readonly WHEEL: 1;
     readonly SECONDARY: 2;
     readonly TOUCH: -1;
+    readonly ERASER: 5;
 };
 export declare const POINTER_EVENTS: {
     readonly enabled: "all";

package/dist/excalidraw/constants.js

@@ -8,6 +8,9 @@ export const isFirefox = "netscape" in window &&
     navigator.userAgent.indexOf("Gecko") > 1;
 export const isChrome = navigator.userAgent.indexOf("Chrome") !== -1;
 export const isSafari = !isChrome && navigator.userAgent.indexOf("Safari") !== -1;
+export const isIOS = /iPad|iPhone/.test(navigator.platform) ||
+    // iPadOS 13+
+    (navigator.userAgent.includes("Mac") && "ontouchend" in document);
 // keeping function so it can be mocked in test
 export const isBrave = () => navigator.brave?.isBrave?.name === "isBrave";
 export const APP_NAME = "Excalidraw";
@@ -31,6 +34,7 @@ export const POINTER_BUTTON = {
     WHEEL: 1,
     SECONDARY: 2,
     TOUCH: -1,
+    ERASER: 5,
 };
 export const POINTER_EVENTS = {
     enabled: "all",

package/dist/excalidraw/data/index.js

@@ -3,7 +3,7 @@ import { DEFAULT_EXPORT_PADDING, isFirefox, MIME_TYPES } from "../constants";
 import { getNonDeletedElements } from "../element";
 import { isFrameLikeElement } from "../element/typeChecks";
 import { t } from "../i18n";
-import { elementsOverlappingBBox } from "../../utils/export";
+import { elementsOverlappingBBox } from "../../utils/index";
 import { isSomeElementSelected, getSelectedElements } from "../scene";
 import { exportToCanvas, exportToSvg } from "../scene/export";
 import { cloneJSON } from "../utils";

package/dist/excalidraw/element/Hyperlink.d.ts

@@ -91,7 +91,7 @@ export declare const actionLink: {
                 tab?: string | undefined;
             } | null;
             openDialog: {
-                name: "imageExport" | "help" | "jsonExport";
+                name: "help" | "imageExport" | "jsonExport";
             } | {
                 name: "settings";
                 source: "settings" | "tool" | "generation";

package/dist/excalidraw/element/embeddable.d.ts

@@ -84,7 +84,7 @@ export declare const actionSetEmbeddableAsActiveTool: {
                 tab?: string | undefined;
             } | null;
             openDialog: {
-                name: "imageExport" | "help" | "jsonExport";
+                name: "help" | "imageExport" | "jsonExport";
             } | {
                 name: "settings";
                 source: "settings" | "tool" | "generation";

package/dist/excalidraw/element/linearElementEditor.d.ts

@@ -194,7 +194,7 @@ export declare class LinearElementEditor {
                 tab?: string | undefined;
             } | null;
             openDialog: {
-                name: "imageExport" | "help" | "jsonExport";
+                name: "help" | "imageExport" | "jsonExport";
             } | {
                 name: "settings";
                 source: "settings" | "tool" | "generation";

package/dist/excalidraw/emitter.d.ts

@@ -1,20 +1,16 @@
+import { UnsubscribeCallback } from "./types";
 type Subscriber<T extends any[]> = (...payload: T) => void;
 export declare class Emitter<T extends any[] = []> {
     subscribers: Subscriber<T>[];
-    value: T | undefined;
-    private updateOnChangeOnly;
-    constructor(opts?: {
-        initialState?: T;
-        updateOnChangeOnly?: boolean;
-    });
     /**
      * Attaches subscriber
      *
      * @returns unsubscribe function
      */
-    on(...handlers: Subscriber<T>[] | Subscriber<T>[][]): () => void;
+    on(...handlers: Subscriber<T>[] | Subscriber<T>[][]): UnsubscribeCallback;
+    once(...handlers: Subscriber<T>[] | Subscriber<T>[][]): UnsubscribeCallback;
     off(...handlers: Subscriber<T>[] | Subscriber<T>[][]): void;
-    trigger(...payload: T): any[];
-    destroy(): void;
+    trigger(...payload: T): this;
+    clear(): void;
 }
 export {};

package/dist/excalidraw/emitter.js

@@ -1,11 +1,5 @@
 export class Emitter {
     subscribers = [];
-    value;
-    updateOnChangeOnly;
-    constructor(opts) {
-        this.updateOnChangeOnly = opts?.updateOnChangeOnly ?? false;
-        this.value = opts?.initialState;
-    }
     /**
      * Attaches subscriber
      *
@@ -18,19 +12,25 @@ export class Emitter {
         this.subscribers.push(..._handlers);
         return () => this.off(_handlers);
     }
+    once(...handlers) {
+        const _handlers = handlers
+            .flat()
+            .filter((item) => typeof item === "function");
+        _handlers.push(() => detach());
+        const detach = this.on(..._handlers);
+        return detach;
+    }
     off(...handlers) {
         const _handlers = handlers.flat();
         this.subscribers = this.subscribers.filter((handler) => !_handlers.includes(handler));
     }
     trigger(...payload) {
-        if (this.updateOnChangeOnly && this.value === payload) {
-            return [];
+        for (const handler of this.subscribers) {
+            handler(...payload);
         }
-        this.value = payload;
-        return this.subscribers.map((handler) => handler(...payload));
+        return this;
     }
-    destroy() {
+    clear() {
         this.subscribers = [];
-        this.value = undefined;
     }
 }

package/dist/excalidraw/frame.js

@@ -7,7 +7,7 @@ import { getElementsWithinSelection, getSelectedElements } from "./scene";
 import { getElementsInGroup, selectGroupsFromGivenElements } from "./groups";
 import Scene from "./scene/Scene";
 import { getElementLineSegments } from "./element/bounds";
-import { doLineSegmentsIntersect } from "../utils/export";
+import { doLineSegmentsIntersect } from "../utils/index";
 import { isFrameElement, isFrameLikeElement } from "./element/typeChecks";
 // --------------------------- Frame State ------------------------------------
 export const bindElementsToFramesAfterDuplication = (nextElements, oldElements, oldIdToDuplicatedId) => {

package/dist/excalidraw/hooks/useLibraryItemSvg.js

@@ -2,7 +2,7 @@ import { atom, useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import { COLOR_PALETTE } from "../colors";
 import { jotaiScope } from "../jotai";
-import { exportToSvg } from "../../utils/export";
+import { exportToSvg } from "../../utils/index";
 export const libraryItemSvgsCache = atom(new Map());
 const exportLibraryItemToSvg = async (elements) => {
     return await exportToSvg({

package/dist/excalidraw/index.d.ts

@@ -11,11 +11,13 @@ export declare const Excalidraw: React.MemoExoticComponent<(props: ExcalidrawPro
 export { getSceneVersion, isInvisiblySmallElement, getNonDeletedElements, } from "./element";
 export { defaultLang, useI18n, languages } from "./i18n";
 export { restore, restoreAppState, restoreElements, restoreLibraryItems, } from "./data/restore";
-export { exportToCanvas, exportToBlob, exportToSvg, serializeAsJSON, serializeLibraryAsJSON, loadLibraryFromBlob, loadFromBlob, loadSceneOrLibraryFromBlob, getFreeDrawSvgPath, exportToClipboard, mergeLibraryItems, } from "../utils/export";
+export { exportToCanvas, exportToBlob, exportToSvg, exportToClipboard, } from "../utils/index";
+export { serializeAsJSON, serializeLibraryAsJSON } from "./data/json";
+export { loadLibraryFromBlob, loadFromBlob, loadSceneOrLibraryFromBlob, } from "./data/blob";
 export { isLinearElement } from "./element/typeChecks";
 export { FONT_FAMILY, THEME, MIME_TYPES } from "./constants";
 export { mutateElement, newElementWith, bumpVersion, } from "./element/mutateElement";
-export { parseLibraryTokensFromUrl, useHandleLibrary } from "./data/library";
+export { parseLibraryTokensFromUrl, useHandleLibrary, mergeLibraryItems, } from "./data/library";
 export { sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, } from "./utils";
 export { Sidebar } from "./components/Sidebar/Sidebar";
 export { Button } from "./components/Button";
@@ -30,5 +32,8 @@ export { TTDDialogTrigger } from "./components/TTDDialog/TTDDialogTrigger";
 export { normalizeLink } from "./data/url";
 export { zoomToFitBounds } from "./actions/actionCanvas";
 export { convertToExcalidrawElements } from "./data/transform";
-export { getCommonBounds, getVisibleSceneBounds } from "./element/bounds";
-export { elementsOverlappingBBox, isElementInsideBBox, elementPartiallyOverlapsWithOrContainsBBox, } from "../utils/export";
+export { getCommonBounds, getVisibleSceneBounds, getElementBounds, } from "./element/bounds";
+export { getDefaultAppState } from "./appState";
+export { isValueInRange, rotatePoint } from "./math";
+export { isArrowElement, isExcalidrawElement, isFreeDrawElement, isTextElement, } from "./element/typeChecks";
+export { getFreeDrawSvgPath } from "./renderer/renderElement";

package/dist/excalidraw/index.js

@@ -93,11 +93,13 @@ Excalidraw.displayName = "Excalidraw";
 export { getSceneVersion, isInvisiblySmallElement, getNonDeletedElements, } from "./element";
 export { defaultLang, useI18n, languages } from "./i18n";
 export { restore, restoreAppState, restoreElements, restoreLibraryItems, } from "./data/restore";
-export { exportToCanvas, exportToBlob, exportToSvg, serializeAsJSON, serializeLibraryAsJSON, loadLibraryFromBlob, loadFromBlob, loadSceneOrLibraryFromBlob, getFreeDrawSvgPath, exportToClipboard, mergeLibraryItems, } from "../utils/export";
+export { exportToCanvas, exportToBlob, exportToSvg, exportToClipboard, } from "../utils/index";
+export { serializeAsJSON, serializeLibraryAsJSON } from "./data/json";
+export { loadLibraryFromBlob, loadFromBlob, loadSceneOrLibraryFromBlob, } from "./data/blob";
 export { isLinearElement } from "./element/typeChecks";
 export { FONT_FAMILY, THEME, MIME_TYPES } from "./constants";
 export { mutateElement, newElementWith, bumpVersion, } from "./element/mutateElement";
-export { parseLibraryTokensFromUrl, useHandleLibrary } from "./data/library";
+export { parseLibraryTokensFromUrl, useHandleLibrary, mergeLibraryItems, } from "./data/library";
 export { sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, } from "./utils";
 export { Sidebar } from "./components/Sidebar/Sidebar";
 export { Button } from "./components/Button";
@@ -112,5 +114,8 @@ export { TTDDialogTrigger } from "./components/TTDDialog/TTDDialogTrigger";
 export { normalizeLink } from "./data/url";
 export { zoomToFitBounds } from "./actions/actionCanvas";
 export { convertToExcalidrawElements } from "./data/transform";
-export { getCommonBounds, getVisibleSceneBounds } from "./element/bounds";
-export { elementsOverlappingBBox, isElementInsideBBox, elementPartiallyOverlapsWithOrContainsBBox, } from "../utils/export";
+export { getCommonBounds, getVisibleSceneBounds, getElementBounds, } from "./element/bounds";
+export { getDefaultAppState } from "./appState";
+export { isValueInRange, rotatePoint } from "./math";
+export { isArrowElement, isExcalidrawElement, isFreeDrawElement, isTextElement, } from "./element/typeChecks";
+export { getFreeDrawSvgPath } from "./renderer/renderElement";

package/dist/excalidraw/scene/export.js

@@ -6,7 +6,7 @@ import { DEFAULT_EXPORT_PADDING, FONT_FAMILY, FRAME_STYLE, SVG_NS, THEME_FILTER,
 import { getDefaultAppState } from "../appState";
 import { serializeAsJSON } from "../data/json";
 import { getInitializedImageElements, updateImageCache, } from "../element/image";
-import { elementsOverlappingBBox } from "../../utils/export";
+import { elementsOverlappingBBox } from "../../utils/index";
 import { getFrameLikeElements, getFrameLikeTitle, getRootElements, } from "../frame";
 import { newTextElement } from "../element";
 import { newElementWith } from "../element/mutateElement";