@excalidraw/excalidraw 0.17.1-1d71f84 → 0.17.1-1ed53b1

package/dist/excalidraw/history.js

@@ -1,190 +1,123 @@
-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 = [];
+import { Emitter } from "./emitter";
+export class HistoryChangedEvent {
+    isUndoStackEmpty;
+    isRedoStackEmpty;
+    constructor(isUndoStackEmpty = true, isRedoStackEmpty = true) {
+        this.isUndoStackEmpty = isUndoStackEmpty;
+        this.isRedoStackEmpty = isRedoStackEmpty;
+    }
+}
+export class History {
+    onHistoryChangedEmitter = new Emitter();
+    undoStack = [];
     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)),
-        };
+    get isUndoStackEmpty() {
+        return this.undoStack.length === 0;
+    }
+    get isRedoStackEmpty() {
+        return this.redoStack.length === 0;
     }
     clear() {
-        this.stateHistory.length = 0;
+        this.undoStack.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);
+    }
+    /**
+     * Record a local change which will go into the history
+     */
+    record(elementsChange, appStateChange) {
+        const entry = HistoryEntry.create(appStateChange, elementsChange);
+        if (!entry.isEmpty()) {
+            // we have the latest changes, no need to `applyLatest`, which is done within `History.push`
+            this.undoStack.push(entry.inverse());
+            if (!entry.elementsChange.isEmpty()) {
+                // don't reset redo stack on local appState changes,
+                // as a simple click (unselect) could lead to losing all the redo entries
+                // only reset on non empty elements changes!
+                this.redoStack.length = 0;
             }
-            return elements;
-        }, []),
-    });
-    shouldCreateEntry(nextEntry) {
-        const { lastEntry } = this;
-        if (!lastEntry) {
-            return true;
-        }
-        if (nextEntry.elements.length !== lastEntry.elements.length) {
-            return true;
+            this.onHistoryChangedEmitter.trigger(new HistoryChangedEvent(this.isUndoStackEmpty, this.isRedoStackEmpty));
         }
-        // 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;
+    }
+    undo(elements, appState, snapshot) {
+        return this.perform(elements, appState, snapshot, () => History.pop(this.undoStack), (entry) => History.push(this.redoStack, entry, elements));
+    }
+    redo(elements, appState, snapshot) {
+        return this.perform(elements, appState, snapshot, () => History.pop(this.redoStack), (entry) => History.push(this.undoStack, entry, elements));
+    }
+    perform(elements, appState, snapshot, pop, push) {
+        try {
+            let historyEntry = pop();
+            if (historyEntry === null) {
+                return;
             }
-        }
-        // 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;
+            let nextElements = elements;
+            let nextAppState = appState;
+            let containsVisibleChange = false;
+            // iterate through the history entries in case they result in no visible changes
+            while (historyEntry) {
+                try {
+                    [nextElements, nextAppState, containsVisibleChange] =
+                        historyEntry.applyTo(nextElements, nextAppState, snapshot);
                 }
+                finally {
+                    // make sure to always push / pop, even if the increment is corrupted
+                    push(historyEntry);
+                }
+                if (containsVisibleChange) {
+                    break;
+                }
+                historyEntry = pop();
             }
-            if (key === "selectedElementIds" || key === "selectedGroupIds") {
-                continue;
-            }
-            if (nextEntry.appState[key] !== lastEntry.appState[key]) {
-                return true;
-            }
+            return [nextElements, nextAppState];
         }
-        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();
+        finally {
+            // trigger the history change event before returning completely
+            // also trigger it just once, no need doing so on each entry
+            this.onHistoryChangedEmitter.trigger(new HistoryChangedEvent(this.isUndoStackEmpty, this.isRedoStackEmpty));
         }
     }
-    clearRedoStack() {
-        this.redoStack.splice(0, this.redoStack.length);
-    }
-    redoOnce() {
-        if (this.redoStack.length === 0) {
+    static pop(stack) {
+        if (!stack.length) {
             return null;
         }
-        const entryToRestore = this.redoStack.pop();
-        if (entryToRestore !== undefined) {
-            this.stateHistory.push(entryToRestore);
-            return this.hydrateHistoryEntry(entryToRestore);
+        const entry = stack.pop();
+        if (entry !== undefined) {
+            return entry;
         }
         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;
+    static push(stack, entry, prevElements) {
+        const updatedEntry = entry.inverse().applyLatestChanges(prevElements);
+        return stack.push(updatedEntry);
+    }
+}
+export class HistoryEntry {
+    appStateChange;
+    elementsChange;
+    constructor(appStateChange, elementsChange) {
+        this.appStateChange = appStateChange;
+        this.elementsChange = elementsChange;
+    }
+    static create(appStateChange, elementsChange) {
+        return new HistoryEntry(appStateChange, elementsChange);
+    }
+    inverse() {
+        return new HistoryEntry(this.appStateChange.inverse(), this.elementsChange.inverse());
+    }
+    applyTo(elements, appState, snapshot) {
+        const [nextElements, elementsContainVisibleChange] = this.elementsChange.applyTo(elements, snapshot.elements);
+        const [nextAppState, appStateContainsVisibleChange] = this.appStateChange.applyTo(appState, nextElements);
+        const appliedVisibleChanges = elementsContainVisibleChange || appStateContainsVisibleChange;
+        return [nextElements, nextAppState, appliedVisibleChanges];
     }
     /**
-     * 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.
+     * Apply latest (remote) changes to the history entry, creates new instance of `HistoryEntry`.
      */
-    setCurrentState(appState, elements) {
-        this.lastEntry = this.hydrateHistoryEntry(this.generateEntry(appState, elements));
+    applyLatestChanges(elements) {
+        const updatedElementsChange = this.elementsChange.applyLatestChanges(elements);
+        return HistoryEntry.create(this.appStateChange, updatedElementsChange);
     }
-    // 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;
-        }
+    isEmpty() {
+        return this.appStateChange.isEmpty() && this.elementsChange.isEmpty();
     }
 }
-export default History;

package/dist/excalidraw/hooks/useCreatePortalContainer.js

@@ -1,5 +1,6 @@
 import { useState, useLayoutEffect } from "react";
 import { useDevice, useExcalidrawContainer } from "../components/App";
+import { THEME } from "../constants";
 import { useUIAppState } from "../context/ui-appState";
 export const useCreatePortalContainer = (opts) => {
     const [div, setDiv] = useState(null);
@@ -11,7 +12,7 @@ export const useCreatePortalContainer = (opts) => {
             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.classList.toggle("theme--dark", theme === THEME.DARK);
         }
     }, [div, theme, device.editor.isMobile, opts?.className]);
     useLayoutEffect(() => {

package/dist/excalidraw/hooks/useEmitter.d.ts

@@ -0,0 +1,2 @@
+import type { Emitter } from "../emitter";
+export declare const useEmitter: <TEvent extends unknown>(emitter: Emitter<[TEvent]>, initialState: TEvent) => TEvent;

package/dist/excalidraw/hooks/useEmitter.js

@@ -0,0 +1,13 @@
+import { useEffect, useState } from "react";
+export const useEmitter = (emitter, initialState) => {
+    const [event, setEvent] = useState(initialState);
+    useEffect(() => {
+        const unsubscribe = emitter.on((event) => {
+            setEvent(event);
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, [emitter]);
+    return event;
+};

package/dist/excalidraw/hooks/useLibraryItemSvg.d.ts

@@ -1,4 +1,4 @@
-import { LibraryItem } from "../types";
+import type { LibraryItem } from "../types";
 export type SvgCache = Map<LibraryItem["id"], SVGSVGElement>;
 export declare const libraryItemSvgsCache: import("jotai").PrimitiveAtom<SvgCache> & {
     init: SvgCache;

package/dist/excalidraw/i18n.d.ts

@@ -1,5 +1,5 @@
 import fallbackLangData from "./locales/en.json";
-import { NestedKeyOf } from "./utility-types";
+import type { NestedKeyOf } from "./utility-types";
 export interface Language {
     code: string;
     label: string;

package/dist/excalidraw/index.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import "./css/app.scss";
 import "./css/styles.scss";
 import "../../public/fonts/fonts.css";
-import { ExcalidrawProps } from "./types";
+import type { ExcalidrawProps } from "./types";
 import Footer from "./components/footer/FooterCenter";
 import MainMenu from "./components/main-menu/MainMenu";
 import WelcomeScreen from "./components/welcome-screen/WelcomeScreen";
@@ -11,6 +11,7 @@ export declare const Excalidraw: React.MemoExoticComponent<(props: ExcalidrawPro
 export { getSceneVersion, hashElementsVersion, hashString, isInvisiblySmallElement, getNonDeletedElements, } from "./element";
 export { defaultLang, useI18n, languages } from "./i18n";
 export { restore, restoreAppState, restoreElements, restoreLibraryItems, } from "./data/restore";
+export { reconcileElements } from "./data/reconcile";
 export { exportToCanvas, exportToBlob, exportToSvg, exportToClipboard, } from "../utils/export";
 export { serializeAsJSON, serializeLibraryAsJSON } from "./data/json";
 export { loadFromBlob, loadSceneOrLibraryFromBlob, loadLibraryFromBlob, } from "./data/blob";
@@ -19,6 +20,7 @@ export { mergeLibraryItems, getLibraryItemsHash } from "./data/library";
 export { isLinearElement } from "./element/typeChecks";
 export { FONT_FAMILY, THEME, MIME_TYPES, ROUNDNESS, DEFAULT_LASER_COLOR, } from "./constants";
 export { mutateElement, newElementWith, bumpVersion, } from "./element/mutateElement";
+export { StoreAction } from "./store";
 export { parseLibraryTokensFromUrl, useHandleLibrary } from "./data/library";
 export { sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, } from "./utils";
 export { Sidebar } from "./components/Sidebar/Sidebar";

package/dist/excalidraw/index.js

@@ -98,6 +98,7 @@ Excalidraw.displayName = "Excalidraw";
 export { getSceneVersion, hashElementsVersion, hashString, isInvisiblySmallElement, getNonDeletedElements, } from "./element";
 export { defaultLang, useI18n, languages } from "./i18n";
 export { restore, restoreAppState, restoreElements, restoreLibraryItems, } from "./data/restore";
+export { reconcileElements } from "./data/reconcile";
 export { exportToCanvas, exportToBlob, exportToSvg, exportToClipboard, } from "../utils/export";
 export { serializeAsJSON, serializeLibraryAsJSON } from "./data/json";
 export { loadFromBlob, loadSceneOrLibraryFromBlob, loadLibraryFromBlob, } from "./data/blob";
@@ -106,6 +107,7 @@ export { mergeLibraryItems, getLibraryItemsHash } from "./data/library";
 export { isLinearElement } from "./element/typeChecks";
 export { FONT_FAMILY, THEME, MIME_TYPES, ROUNDNESS, DEFAULT_LASER_COLOR, } from "./constants";
 export { mutateElement, newElementWith, bumpVersion, } from "./element/mutateElement";
+export { StoreAction } from "./store";
 export { parseLibraryTokensFromUrl, useHandleLibrary } from "./data/library";
 export { sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, } from "./utils";
 export { Sidebar } from "./components/Sidebar/Sidebar";

package/dist/excalidraw/jotai.d.ts

@@ -1,4 +1,4 @@
-import { PrimitiveAtom } from "jotai";
+import type { PrimitiveAtom } from "jotai";
 export declare const jotaiScope: unique symbol;
 export declare const jotaiStore: {
     get: <Value>(atom: import("jotai").Atom<Value>) => Awaited<Value> | undefined;

package/dist/excalidraw/laser-trails.d.ts

@@ -1,5 +1,6 @@
-import { AnimatedTrail, Trail } from "./animated-trail";
-import { AnimationFrameHandler } from "./animation-frame-handler";
+import type { Trail } from "./animated-trail";
+import { AnimatedTrail } from "./animated-trail";
+import type { AnimationFrameHandler } from "./animation-frame-handler";
 import type App from "./components/App";
 export declare class LaserTrails implements Trail {
     private animationFrameHandler;

package/dist/excalidraw/locales/en.json

@@ -87,7 +87,7 @@
         "group": "Group selection",
         "ungroup": "Ungroup selection",
         "collaborators": "Collaborators",
-        "showGrid": "Show grid",
+        "toggleGrid": "Toggle grid",
         "addToLibrary": "Add to library",
         "removeFromLibrary": "Remove from library",
         "libraryLoadingMessage": "Loading library…",
@@ -110,6 +110,7 @@
         "showStroke": "Show stroke color picker",
         "showBackground": "Show background color picker",
         "toggleTheme": "Toggle light/dark theme",
+        "theme": "Theme",
         "personalLib": "Personal Library",
         "excalidrawLib": "Excalidraw Library",
         "decreaseFontSize": "Decrease font size",
@@ -128,7 +129,7 @@
         },
         "lineEditor": {
             "edit": "Edit line",
-            "exit": "Exit line editor"
+            "editArrow": "Edit arrow"
         },
         "elementLock": {
             "lock": "Lock",
@@ -180,6 +181,7 @@
         "fullScreen": "Full screen",
         "darkMode": "Dark mode",
         "lightMode": "Light mode",
+        "systemMode": "System mode",
         "zenMode": "Zen mode",
         "objectsSnapMode": "Snap to objects",
         "exitZenMode": "Exit zen mode",
@@ -560,6 +562,6 @@
             "noMatch": "No matching commands..."
         },
         "itemNotAvailable": "Command is not available...",
-        "shortcutHint": "For Command palette, use {{shortcutOne}} or {{shortcutTwo}}"
+        "shortcutHint": "For Command palette, use {{shortcut}}"
     }
 }

package/dist/excalidraw/math.d.ts

@@ -1,5 +1,5 @@
-import { Point, Zoom } from "./types";
-import { ExcalidrawElement, ExcalidrawLinearElement, NonDeleted } from "./element/types";
+import type { Point, Zoom } from "./types";
+import type { ExcalidrawElement, ExcalidrawLinearElement, NonDeleted } from "./element/types";
 export declare const rotate: (x: number, y: number, cx: number, cy: number, angle: number) => [number, number];
 export declare const rotatePoint: (point: readonly [number, number], center: readonly [number, number], angle: number) => [number, number];
 export declare const adjustXYWithRotation: (sides: {

package/dist/excalidraw/points.d.ts

@@ -1,4 +1,4 @@
-import { Point } from "./types";
+import type { Point } from "./types";
 export declare const getSizeFromPoints: (points: readonly Point[]) => {
     width: number;
     height: number;

package/dist/excalidraw/queue.d.ts

@@ -1,4 +1,4 @@
-import { MaybePromise } from "./utility-types";
+import type { MaybePromise } from "./utility-types";
 type Job<T, TArgs extends unknown[]> = (...args: TArgs) => MaybePromise<T>;
 export declare class Queue {
     private jobs;

package/dist/excalidraw/renderer/helpers.d.ts

@@ -1,5 +1,5 @@
-import { StaticCanvasAppState, AppState } from "../types";
-import { StaticCanvasRenderConfig } from "../scene/types";
+import type { StaticCanvasAppState, AppState } from "../types";
+import type { StaticCanvasRenderConfig } from "../scene/types";
 export declare const fillCircle: (context: CanvasRenderingContext2D, cx: number, cy: number, radius: number, stroke?: boolean) => void;
 export declare const getNormalizedCanvasDimensions: (canvas: HTMLCanvasElement, scale: number) => [number, number];
 export declare const bootstrapCanvas: ({ canvas, scale, normalizedWidth, normalizedHeight, theme, isExporting, viewBackgroundColor, }: {

package/dist/excalidraw/renderer/helpers.js

@@ -1,4 +1,4 @@
-import { THEME_FILTER } from "../constants";
+import { THEME, THEME_FILTER } from "../constants";
 export const fillCircle = (context, cx, cy, radius, stroke = true) => {
     context.beginPath();
     context.arc(cx, cy, radius, 0, Math.PI * 2);
@@ -15,7 +15,7 @@ export const bootstrapCanvas = ({ canvas, scale, normalizedWidth, normalizedHeig
     const context = canvas.getContext("2d");
     context.setTransform(1, 0, 0, 1, 0, 0);
     context.scale(scale, scale);
-    if (isExporting && theme === "dark") {
+    if (isExporting && theme === THEME.DARK) {
         context.filter = THEME_FILTER;
     }
     // Paint background

package/dist/excalidraw/renderer/interactiveScene.d.ts

@@ -1,4 +1,4 @@
-import { InteractiveSceneRenderConfig, RenderableElementsMap } from "../scene/types";
+import type { InteractiveSceneRenderConfig, RenderableElementsMap } from "../scene/types";
 /** throttled to animation framerate */
 export declare const renderInteractiveSceneThrottled: {
     (config: InteractiveSceneRenderConfig): void;
@@ -9,7 +9,7 @@ export declare const renderInteractiveSceneThrottled: {
  * Interactive scene is the ui-canvas where we render bounding boxes, selections
  * and other ui stuff.
  */
-export declare const renderInteractiveScene: <U extends ({ canvas, elementsMap, visibleElements, selectedElements, scale, appState, renderConfig, }: InteractiveSceneRenderConfig) => {
+export declare const renderInteractiveScene: <U extends ({ canvas, elementsMap, visibleElements, selectedElements, scale, appState, renderConfig, device, }: InteractiveSceneRenderConfig) => {
     atLeastOneVisibleElement: boolean;
     elementsMap: RenderableElementsMap;
     scrollBars?: undefined;

package/dist/excalidraw/renderer/interactiveScene.js

@@ -1,14 +1,14 @@
-import { getElementAbsoluteCoords, OMIT_SIDES_FOR_MULTIPLE_ELEMENTS, getTransformHandlesFromCoords, getTransformHandles, getCommonBounds, } from "../element";
+import { getElementAbsoluteCoords, getTransformHandlesFromCoords, getTransformHandles, getCommonBounds, } from "../element";
 import { roundRect } from "../renderer/roundRect";
 import { getScrollBars, SCROLLBAR_COLOR, SCROLLBAR_WIDTH, } from "../scene/scrollbars";
 import { renderSelectionElement } from "../renderer/renderElement";
 import { getClientColor, renderRemoteCursors } from "../clients";
 import { isSelectedViaGroup, getSelectedGroupIds, getElementsInGroup, selectGroupsFromGivenElements, } from "../groups";
-import { OMIT_SIDES_FOR_FRAME, shouldShowBoundingBox, } from "../element/transformHandles";
+import { getOmitSidesForDevice, shouldShowBoundingBox, } from "../element/transformHandles";
 import { arrayToMap, throttleRAF } from "../utils";
 import { DEFAULT_TRANSFORM_HANDLE_SPACING, FRAME_STYLE } from "../constants";
 import { renderSnaps } from "../renderer/renderSnaps";
-import { maxBindingGap } from "../element/collision";
+import { maxBindingGap } from "../element/binding";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bootstrapCanvas, fillCircle, getNormalizedCanvasDimensions, } from "./helpers";
 import oc from "open-color";
@@ -264,7 +264,7 @@ const renderTransformHandles = (context, renderConfig, appState, transformHandle
         }
     });
 };
-const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selectedElements, scale, appState, renderConfig, }) => {
+const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selectedElements, scale, appState, renderConfig, device, }) => {
     if (canvas === null) {
         return { atLeastOneVisibleElement: false, elementsMap };
     }
@@ -403,7 +403,8 @@ const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selecte
         context.translate(appState.scrollX, appState.scrollY);
         if (selectedElements.length === 1) {
             context.fillStyle = oc.white;
-            const transformHandles = getTransformHandles(selectedElements[0], appState.zoom, elementsMap, "mouse");
+            const transformHandles = getTransformHandles(selectedElements[0], appState.zoom, elementsMap, "mouse", // when we render we don't know which pointer type so use mouse,
+            getOmitSidesForDevice(device));
             if (!appState.viewModeEnabled && showBoundingBox) {
                 renderTransformHandles(context, renderConfig, appState, transformHandles, selectedElements[0].angle);
             }
@@ -421,8 +422,8 @@ const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selecte
             context.lineWidth = lineWidth;
             context.setLineDash(initialLineDash);
             const transformHandles = getTransformHandlesFromCoords([x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2], 0, appState.zoom, "mouse", isFrameSelected
-                ? OMIT_SIDES_FOR_FRAME
-                : OMIT_SIDES_FOR_MULTIPLE_ELEMENTS);
+                ? { ...getOmitSidesForDevice(device), rotation: true }
+                : getOmitSidesForDevice(device));
             if (selectedElements.some((element) => !element.locked)) {
                 renderTransformHandles(context, renderConfig, appState, transformHandles, 0);
             }

package/dist/excalidraw/renderer/renderElement.d.ts

@@ -1,7 +1,7 @@
-import { ExcalidrawElement, ExcalidrawTextElement, NonDeletedExcalidrawElement, ExcalidrawFreeDrawElement, ExcalidrawFrameLikeElement, NonDeletedSceneElementsMap } from "../element/types";
+import type { ExcalidrawElement, ExcalidrawTextElement, NonDeletedExcalidrawElement, ExcalidrawFreeDrawElement, ExcalidrawFrameLikeElement, NonDeletedSceneElementsMap } from "../element/types";
 import type { RoughCanvas } from "roughjs/bin/canvas";
-import { StaticCanvasRenderConfig, RenderableElementsMap } from "../scene/types";
-import { AppState, StaticCanvasAppState, InteractiveCanvasAppState, ElementsPendingErasure } from "../types";
+import type { StaticCanvasRenderConfig, RenderableElementsMap } from "../scene/types";
+import type { AppState, StaticCanvasAppState, InteractiveCanvasAppState, ElementsPendingErasure } from "../types";
 export declare const IMAGE_INVERT_FILTER = "invert(100%) hue-rotate(180deg) saturate(1.25)";
 export declare const getRenderOpacity: (element: ExcalidrawElement, containingFrame: ExcalidrawFrameLikeElement | null, elementsPendingErasure: ElementsPendingErasure) => number;
 export interface ExcalidrawElementWithCanvas {

package/dist/excalidraw/renderer/renderElement.js

@@ -4,7 +4,7 @@ import { distance, getFontString, isRTL } from "../utils";
 import { getCornerRadius, isRightAngle } from "../math";
 import rough from "roughjs/bin/rough";
 import { getDefaultAppState } from "../appState";
-import { BOUND_TEXT_PADDING, ELEMENT_READY_TO_ERASE_OPACITY, FRAME_STYLE, MIME_TYPES, } from "../constants";
+import { BOUND_TEXT_PADDING, ELEMENT_READY_TO_ERASE_OPACITY, FRAME_STYLE, MIME_TYPES, THEME, } from "../constants";
 import { getStroke } from "perfect-freehand";
 import { getBoundTextElement, getContainerCoords, getContainerElement, getLineHeightInPx, getBoundTextMaxHeight, getBoundTextMaxWidth, getVerticalOffset, } from "../element/textElement";
 import { LinearElementEditor } from "../element/linearElementEditor";
@@ -19,7 +19,7 @@ const defaultAppState = getDefaultAppState();
 const isPendingImageElement = (element, renderConfig) => isInitializedImageElement(element) &&
     !renderConfig.imageCache.has(element.fileId);
 const shouldResetImageFilter = (element, renderConfig, appState) => {
-    return (appState.theme === "dark" &&
+    return (appState.theme === THEME.DARK &&
         isInitializedImageElement(element) &&
         !isPendingImageElement(element, renderConfig) &&
         renderConfig.imageCache.get(element.fileId)?.mimeType !== MIME_TYPES.svg);
@@ -119,7 +119,7 @@ const IMAGE_PLACEHOLDER_IMG = document.createElement("img");
 IMAGE_PLACEHOLDER_IMG.src = `data:${MIME_TYPES.svg},${encodeURIComponent(`<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="image" class="svg-inline--fa fa-image fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#888" d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z"></path></svg>`)}`;
 const IMAGE_ERROR_PLACEHOLDER_IMG = document.createElement("img");
 IMAGE_ERROR_PLACEHOLDER_IMG.src = `data:${MIME_TYPES.svg},${encodeURIComponent(`<svg viewBox="0 0 668 668" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48ZM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56ZM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48Z" style="fill:#888;fill-rule:nonzero" transform="matrix(.81709 0 0 .81709 124.825 145.825)"/><path d="M256 8C119.034 8 8 119.033 8 256c0 136.967 111.034 248 248 248s248-111.034 248-248S392.967 8 256 8Zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676ZM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676Z" style="fill:#888;fill-rule:nonzero" transform="matrix(.30366 0 0 .30366 506.822 60.065)"/></svg>`)}`;
-const drawImagePlaceholder = (element, context, zoomValue) => {
+const drawImagePlaceholder = (element, context) => {
     context.fillStyle = "#E7E7E7";
     context.fillRect(0, 0, element.width, element.height);
     const imageMinWidthOrHeight = Math.min(element.width, element.height);
@@ -176,7 +176,7 @@ const drawElementOnCanvas = (element, rc, context, renderConfig, appState) => {
                 context.drawImage(img, 0 /* hardcoded for the selection box*/, 0, element.width, element.height);
             }
             else {
-                drawImagePlaceholder(element, context, appState.zoom.value);
+                drawImagePlaceholder(element, context);
             }
             break;
         }
@@ -352,7 +352,7 @@ export const renderElement = (element, elementsMap, allElementsMap, rc, context,
                 // TODO change later to only affect AI frames
                 if (isMagicFrameElement(element)) {
                     context.strokeStyle =
-                        appState.theme === "light" ? "#7affd7" : "#1d8264";
+                        appState.theme === THEME.LIGHT ? "#7affd7" : "#1d8264";
                 }
                 if (FRAME_STYLE.radius && context.roundRect) {
                     context.beginPath();

package/dist/excalidraw/renderer/renderSnaps.d.ts

@@ -1,2 +1,2 @@
-import { InteractiveCanvasAppState } from "../types";
+import type { InteractiveCanvasAppState } from "../types";
 export declare const renderSnaps: (context: CanvasRenderingContext2D, appState: InteractiveCanvasAppState) => void;