@excalidraw/excalidraw 0.17.1-1d71f84 → 0.17.1-22b3927

package/dist/excalidraw/renderer/interactiveScene.js

@@ -1,18 +1,18 @@
-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";
-import { isFrameLikeElement, isLinearElement } from "../element/typeChecks";
+import { isFrameLikeElement, isLinearElement, isTextElement, } from "../element/typeChecks";
 const renderLinearElementPointHighlight = (context, appState, elementsMap) => {
     const { elementId, hoverPointIndex } = appState.selectedLinearElement;
     if (appState.editingLinearElement?.selectedPointsIndices?.includes(hoverPointIndex)) {
@@ -124,10 +124,11 @@ const renderBindingHighlightForSuggestedPointBinding = (context, suggestedBindin
         fillCircle(context, x, y, threshold);
     });
 };
-const renderSelectionBorder = (context, appState, elementProperties, padding = DEFAULT_TRANSFORM_HANDLE_SPACING * 2) => {
+const renderSelectionBorder = (context, appState, elementProperties) => {
     const { angle, elementX1, elementY1, elementX2, elementY2, selectionColors, cx, cy, dashed, activeEmbeddable, } = elementProperties;
     const elementWidth = elementX2 - elementX1;
     const elementHeight = elementY2 - elementY1;
+    const padding = DEFAULT_TRANSFORM_HANDLE_SPACING * 2;
     const linePadding = padding / appState.zoom.value;
     const lineWidth = 8 / appState.zoom.value;
     const spaceWidth = 4 / appState.zoom.value;
@@ -264,7 +265,23 @@ const renderTransformHandles = (context, renderConfig, appState, transformHandle
         }
     });
 };
-const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selectedElements, scale, appState, renderConfig, }) => {
+const renderTextBox = (text, context, appState, selectionColor) => {
+    context.save();
+    const padding = (DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / appState.zoom.value;
+    const width = text.width + padding * 2;
+    const height = text.height + padding * 2;
+    const cx = text.x + width / 2;
+    const cy = text.y + height / 2;
+    const shiftX = -(width / 2 + padding);
+    const shiftY = -(height / 2 + padding);
+    context.translate(cx + appState.scrollX, cy + appState.scrollY);
+    context.rotate(text.angle);
+    context.lineWidth = 1 / appState.zoom.value;
+    context.strokeStyle = selectionColor;
+    context.strokeRect(shiftX, shiftY, width, height);
+    context.restore();
+};
+const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selectedElements, allElementsMap, scale, appState, renderConfig, device, }) => {
     if (canvas === null) {
         return { atLeastOneVisibleElement: false, elementsMap };
     }
@@ -295,12 +312,18 @@ const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selecte
     // Paint selection element
     if (appState.selectionElement) {
         try {
-            renderSelectionElement(appState.selectionElement, context, appState);
+            renderSelectionElement(appState.selectionElement, context, appState, renderConfig.selectionColor);
         }
         catch (error) {
             console.error(error);
         }
     }
+    if (appState.editingElement && isTextElement(appState.editingElement)) {
+        const textElement = allElementsMap.get(appState.editingElement.id);
+        if (textElement && !textElement.autoResize) {
+            renderTextBox(textElement, context, appState, renderConfig.selectionColor);
+        }
+    }
     if (appState.isBindingEnabled) {
         appState.suggestedBindings
             .filter((binding) => binding != null)
@@ -403,8 +426,12 @@ 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");
-            if (!appState.viewModeEnabled && showBoundingBox) {
+            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 &&
+                // do not show transform handles when text is being edited
+                !isTextElement(appState.editingElement)) {
                 renderTransformHandles(context, renderConfig, appState, transformHandles, selectedElements[0].angle);
             }
         }
@@ -421,8 +448,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, InteractiveCanvasRenderConfig } 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 {
@@ -17,7 +17,7 @@ export interface ExcalidrawElementWithCanvas {
 }
 export declare const DEFAULT_LINK_SIZE = 14;
 export declare const elementWithCanvasCache: WeakMap<ExcalidrawElement, ExcalidrawElementWithCanvas>;
-export declare const renderSelectionElement: (element: NonDeletedExcalidrawElement, context: CanvasRenderingContext2D, appState: InteractiveCanvasAppState) => void;
+export declare const renderSelectionElement: (element: NonDeletedExcalidrawElement, context: CanvasRenderingContext2D, appState: InteractiveCanvasAppState, selectionColor: InteractiveCanvasRenderConfig["selectionColor"]) => void;
 export declare const renderElement: (element: NonDeletedExcalidrawElement, elementsMap: RenderableElementsMap, allElementsMap: NonDeletedSceneElementsMap, rc: RoughCanvas, context: CanvasRenderingContext2D, renderConfig: StaticCanvasRenderConfig, appState: StaticCanvasAppState) => void;
 export declare const pathsCache: WeakMap<ExcalidrawFreeDrawElement, Path2D>;
 export declare function generateFreeDrawShape(element: ExcalidrawFreeDrawElement): Path2D;

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;
         }
@@ -323,7 +323,7 @@ const drawElementFromCanvas = (elementWithCanvas, context, renderConfig, appStat
     context.restore();
     // Clear the nested element we appended to the DOM
 };
-export const renderSelectionElement = (element, context, appState) => {
+export const renderSelectionElement = (element, context, appState, selectionColor) => {
     context.save();
     context.translate(element.x + appState.scrollX, element.y + appState.scrollY);
     context.fillStyle = "rgba(0, 0, 200, 0.04)";
@@ -334,7 +334,7 @@ export const renderSelectionElement = (element, context, appState) => {
     const offset = 0.5 / appState.zoom.value;
     context.fillRect(offset, offset, element.width, element.height);
     context.lineWidth = 1 / appState.zoom.value;
-    context.strokeStyle = " rgb(105, 101, 219)";
+    context.strokeStyle = selectionColor;
     context.strokeRect(offset, offset, element.width, element.height);
     context.restore();
 };
@@ -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;

package/dist/excalidraw/renderer/renderSnaps.js

@@ -1,3 +1,4 @@
+import { THEME } from "../constants";
 const SNAP_COLOR_LIGHT = "#ff6b6b";
 const SNAP_COLOR_DARK = "#ff0000";
 const SNAP_WIDTH = 1;
@@ -9,7 +10,7 @@ export const renderSnaps = (context, appState) => {
     // in dark mode, we need to adjust the color to account for color inversion.
     // Don't change if zen mode, because we draw only crosses, we want the
     // colors to be more visible
-    const snapColor = appState.theme === "light" || appState.zenModeEnabled
+    const snapColor = appState.theme === THEME.LIGHT || appState.zenModeEnabled
         ? SNAP_COLOR_LIGHT
         : SNAP_COLOR_DARK;
     // in zen mode make the cross more visible since we don't draw the lines

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

@@ -1,4 +1,4 @@
-import { StaticSceneRenderConfig } from "../scene/types";
+import type { StaticSceneRenderConfig } from "../scene/types";
 /** throttled to animation framerate */
 export declare const renderStaticSceneThrottled: {
     (config: StaticSceneRenderConfig): void;

package/dist/excalidraw/renderer/staticScene.js

@@ -1,12 +1,13 @@
 import { FRAME_STYLE } from "../constants";
 import { getElementAbsoluteCoords } from "../element";
 import { elementOverlapsWithFrame, getTargetFrame, isElementInFrame, } from "../frame";
-import { isEmbeddableElement, isIframeLikeElement, } from "../element/typeChecks";
+import { isEmbeddableElement, isIframeLikeElement, isTextElement, } from "../element/typeChecks";
 import { renderElement } from "../renderer/renderElement";
 import { createPlaceholderEmbeddableLabel } from "../element/embeddable";
 import { EXTERNAL_LINK_IMG, getLinkHandleFromCoords, } from "../components/hyperlink/helpers";
 import { bootstrapCanvas, getNormalizedCanvasDimensions } from "./helpers";
 import { throttleRAF } from "../utils";
+import { getBoundTextElement } from "../element/textElement";
 const strokeGrid = (context, gridSize, scrollX, scrollY, zoom, width, height) => {
     const BOLD_LINE_FREQUENCY = 5;
     let GridLineColor;
@@ -121,21 +122,31 @@ const _renderStaticScene = ({ canvas, rc, elementsMap, allElementsMap, visibleEl
         .forEach((element) => {
         try {
             const frameId = element.frameId || appState.frameToHighlight?.id;
+            if (isTextElement(element) &&
+                element.containerId &&
+                elementsMap.has(element.containerId)) {
+                // will be rendered with the container
+                return;
+            }
+            context.save();
             if (frameId &&
                 appState.frameRendering.enabled &&
                 appState.frameRendering.clip) {
-                context.save();
                 const frame = getTargetFrame(element, elementsMap, appState);
                 // TODO do we need to check isElementInFrame here?
                 if (frame && isElementInFrame(element, elementsMap, appState)) {
                     frameClip(frame, context, renderConfig, appState);
                 }
                 renderElement(element, elementsMap, allElementsMap, rc, context, renderConfig, appState);
-                context.restore();
             }
             else {
                 renderElement(element, elementsMap, allElementsMap, rc, context, renderConfig, appState);
             }
+            const boundTextElement = getBoundTextElement(element, elementsMap);
+            if (boundTextElement) {
+                renderElement(boundTextElement, elementsMap, allElementsMap, rc, context, renderConfig, appState);
+            }
+            context.restore();
             if (!isExporting) {
                 renderLinkIcon(element, context, appState, elementsMap);
             }

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

@@ -1,5 +1,5 @@
-import { RoughSVG } from "roughjs/bin/svg";
-import { NonDeletedExcalidrawElement } from "../element/types";
-import { RenderableElementsMap, SVGRenderConfig } from "../scene/types";
-import { BinaryFiles } from "../types";
+import type { RoughSVG } from "roughjs/bin/svg";
+import type { NonDeletedExcalidrawElement } from "../element/types";
+import type { RenderableElementsMap, SVGRenderConfig } from "../scene/types";
+import type { BinaryFiles } from "../types";
 export declare const renderSceneToSvg: (elements: readonly NonDeletedExcalidrawElement[], elementsMap: RenderableElementsMap, rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, renderConfig: SVGRenderConfig) => void;

package/dist/excalidraw/renderer/staticSvgScene.js

@@ -361,8 +361,18 @@ export const renderSceneToSvg = (elements, elementsMap, rsvg, svgRoot, files, re
         .filter((el) => !isIframeLikeElement(el))
         .forEach((element) => {
         if (!element.isDeleted) {
+            if (isTextElement(element) &&
+                element.containerId &&
+                elementsMap.has(element.containerId)) {
+                // will be rendered with the container
+                return;
+            }
             try {
                 renderElementToSvg(element, elementsMap, rsvg, svgRoot, files, element.x + renderConfig.offsetX, element.y + renderConfig.offsetY, renderConfig);
+                const boundTextElement = getBoundTextElement(element, elementsMap);
+                if (boundTextElement) {
+                    renderElementToSvg(boundTextElement, elementsMap, rsvg, svgRoot, files, boundTextElement.x + renderConfig.offsetX, boundTextElement.y + renderConfig.offsetY, renderConfig);
+                }
             }
             catch (error) {
                 console.error(error);

package/dist/excalidraw/scene/Fonts.d.ts

@@ -1,11 +1,9 @@
-import { ExcalidrawElement } from "../element/types";
+import type { ExcalidrawElement } from "../element/types";
 import type Scene from "./Scene";
 export declare class Fonts {
     private scene;
-    private onSceneUpdated;
-    constructor({ scene, onSceneUpdated, }: {
+    constructor({ scene }: {
         scene: Scene;
-        onSceneUpdated: () => void;
     });
     private static loadedFontFaces;
     /**

package/dist/excalidraw/scene/Fonts.js

@@ -1,15 +1,11 @@
-import { isTextElement, refreshTextDimensions } from "../element";
+import { isTextElement } from "../element";
 import { newElementWith } from "../element/mutateElement";
-import { getContainerElement } from "../element/textElement";
-import { isBoundToContainer } from "../element/typeChecks";
 import { getFontString } from "../utils";
 import { ShapeCache } from "./ShapeCache";
 export class Fonts {
     scene;
-    onSceneUpdated;
-    constructor({ scene, onSceneUpdated, }) {
+    constructor({ scene }) {
         this.scene = scene;
-        this.onSceneUpdated = onSceneUpdated;
     }
     // it's ok to track fonts across multiple instances only once, so let's use
     // a static member to reduce memory footprint
@@ -39,17 +35,15 @@ export class Fonts {
         }
         let didUpdate = false;
         this.scene.mapElements((element) => {
-            if (isTextElement(element) && !isBoundToContainer(element)) {
-                ShapeCache.delete(element);
+            if (isTextElement(element)) {
                 didUpdate = true;
-                return newElementWith(element, {
-                    ...refreshTextDimensions(element, getContainerElement(element, this.scene.getNonDeletedElementsMap()), this.scene.getNonDeletedElementsMap()),
-                });
+                ShapeCache.delete(element);
+                return newElementWith(element, {}, true);
             }
             return element;
         });
         if (didUpdate) {
-            this.onSceneUpdated();
+            this.scene.triggerUpdate();
         }
     };
     loadFontsForElements = async (elements) => {

package/dist/excalidraw/scene/Renderer.d.ts

@@ -1,6 +1,6 @@
-import { NonDeletedExcalidrawElement } from "../element/types";
-import { AppState } from "../types";
-import Scene from "./Scene";
+import type { NonDeletedExcalidrawElement } from "../element/types";
+import type { AppState } from "../types";
+import type Scene from "./Scene";
 export declare class Renderer {
     private scene;
     constructor(scene: Scene);
@@ -14,7 +14,7 @@ export declare class Renderer {
         width: AppState["width"];
         editingElement: AppState["editingElement"];
         pendingImageElementId: AppState["pendingImageElementId"];
-        versionNonce: ReturnType<InstanceType<typeof Scene>["getVersionNonce"]>;
+        sceneNonce: ReturnType<InstanceType<typeof Scene>["getSceneNonce"]>;
     }) => {
         elementsMap: Map<string, NonDeletedExcalidrawElement> & import("../utility-types").MakeBrand<"NonDeletedElementsMap"> & import("../utility-types").MakeBrand<"RenderableElementsMap">;
         visibleElements: readonly NonDeletedExcalidrawElement[];

package/dist/excalidraw/scene/Renderer.js

@@ -45,9 +45,8 @@ export class Renderer {
             return elementsMap;
         };
         return memoize(({ zoom, offsetLeft, offsetTop, scrollX, scrollY, height, width, editingElement, pendingImageElementId, 
-        // unused but serves we cache on it to invalidate elements if they
-        // get mutated
-        versionNonce: _versionNonce, }) => {
+        // cache-invalidation nonce
+        sceneNonce: _sceneNonce, }) => {
             const elements = this.scene.getNonDeletedElements();
             const elementsMap = getRenderableElements({
                 elements,

package/dist/excalidraw/scene/Scene.d.ts

@@ -1,6 +1,6 @@
-import { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted, ExcalidrawFrameLikeElement, ElementsMapOrArray } from "../element/types";
-import { LinearElementEditor } from "../element/linearElementEditor";
-import { AppState } from "../types";
+import type { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted, ExcalidrawFrameLikeElement, ElementsMapOrArray, OrderedExcalidrawElement, Ordered } from "../element/types";
+import type { LinearElementEditor } from "../element/linearElementEditor";
+import type { AppState } from "../types";
 type ElementIdKey = InstanceType<typeof LinearElementEditor>["elementId"];
 type ElementKey = ExcalidrawElement | ElementIdKey;
 type SceneStateCallback = () => void;
@@ -19,11 +19,18 @@ declare class Scene {
     private frames;
     private elementsMap;
     private selectedElementsCache;
-    private versionNonce;
-    getElementsMapIncludingDeleted(): Map<string, ExcalidrawElement> & import("../utility-types").MakeBrand<"SceneElementsMap">;
-    getNonDeletedElementsMap(): Map<string, NonDeletedExcalidrawElement> & import("../utility-types").MakeBrand<"NonDeletedSceneElementsMap">;
-    getElementsIncludingDeleted(): readonly ExcalidrawElement[];
-    getNonDeletedElements(): readonly NonDeletedExcalidrawElement[];
+    /**
+     * Random integer regenerated each scene update.
+     *
+     * Does not relate to elements versions, it's only a renderer
+     * cache-invalidation nonce at the moment.
+     */
+    private sceneNonce;
+    getSceneNonce(): number | undefined;
+    getNonDeletedElementsMap(): Map<string, Ordered<NonDeletedExcalidrawElement>> & import("../utility-types").MakeBrand<"NonDeletedSceneElementsMap">;
+    getElementsIncludingDeleted(): readonly OrderedExcalidrawElement[];
+    getElementsMapIncludingDeleted(): Map<string, Ordered<ExcalidrawElement>> & import("../utility-types").MakeBrand<"SceneElementsMap">;
+    getNonDeletedElements(): readonly Ordered<NonDeletedExcalidrawElement>[];
     getFramesIncludingDeleted(): readonly ExcalidrawFrameLikeElement[];
     getSelectedElements(opts: {
         selectedElementIds: AppState["selectedElementIds"];
@@ -38,7 +45,6 @@ declare class Scene {
     }): NonDeleted<ExcalidrawElement>[];
     getNonDeletedFramesLikes(): readonly NonDeleted<ExcalidrawFrameLikeElement>[];
     getElement<T extends ExcalidrawElement>(id: T["id"]): T | null;
-    getVersionNonce(): number | undefined;
     getNonDeletedElement(id: ExcalidrawElement["id"]): NonDeleted<ExcalidrawElement> | null;
     /**
      * A utility method to help with updating all scene elements, with the added
@@ -54,12 +60,13 @@ declare class Scene {
      */
     mapElements(iteratee: (element: ExcalidrawElement) => ExcalidrawElement): boolean;
     replaceAllElements(nextElements: ElementsMapOrArray): void;
-    informMutation(): void;
-    addCallback(cb: SceneStateCallback): SceneStateCallbackRemover;
+    triggerUpdate(): void;
+    onUpdate(cb: SceneStateCallback): SceneStateCallbackRemover;
     destroy(): void;
     insertElementAtIndex(element: ExcalidrawElement, index: number): void;
     insertElementsAtIndex(elements: ExcalidrawElement[], index: number): void;
-    addNewElement: (element: ExcalidrawElement) => void;
+    insertElement: (element: ExcalidrawElement) => void;
+    insertElements: (elements: ExcalidrawElement[]) => void;
     getElementIndex(elementId: string): number;
     getContainerElement: (element: (ExcalidrawElement & {
         containerId: ExcalidrawElement["id"] | null;

package/dist/excalidraw/scene/Scene.js

@@ -2,7 +2,10 @@ import { isNonDeletedElement } from "../element";
 import { isFrameLikeElement } from "../element/typeChecks";
 import { getSelectedElements } from "./selection";
 import { randomInteger } from "../random";
+import { syncInvalidIndices, syncMovedIndices, validateFractionalIndices, } from "../fractionalIndex";
+import { arrayToMap } from "../utils";
 import { toBrandedType } from "../utils";
+import { ENV } from "../constants";
 const getNonDeletedElements = (allElements) => {
     const elementsMap = new Map();
     const elements = [];
@@ -59,6 +62,7 @@ class Scene {
     callbacks = new Set();
     nonDeletedElements = [];
     nonDeletedElementsMap = toBrandedType(new Map());
+    // ideally all elements within the scene should be wrapped around with `Ordered` type, but right now there is no real benefit doing so
     elements = [];
     nonDeletedFramesLikes = [];
     frames = [];
@@ -68,9 +72,15 @@ class Scene {
         elements: null,
         cache: new Map(),
     };
-    versionNonce;
-    getElementsMapIncludingDeleted() {
-        return this.elementsMap;
+    /**
+     * Random integer regenerated each scene update.
+     *
+     * Does not relate to elements versions, it's only a renderer
+     * cache-invalidation nonce at the moment.
+     */
+    sceneNonce;
+    getSceneNonce() {
+        return this.sceneNonce;
     }
     getNonDeletedElementsMap() {
         return this.nonDeletedElementsMap;
@@ -78,6 +88,9 @@ class Scene {
     getElementsIncludingDeleted() {
         return this.elements;
     }
+    getElementsMapIncludingDeleted() {
+        return this.elementsMap;
+    }
     getNonDeletedElements() {
         return this.nonDeletedElements;
     }
@@ -114,9 +127,6 @@ class Scene {
     getElement(id) {
         return this.elementsMap.get(id) || null;
     }
-    getVersionNonce() {
-        return this.versionNonce;
-    }
     getNonDeletedElement(id) {
         const element = this.getElement(id);
         if (element && isNonDeletedElement(element)) {
@@ -151,12 +161,17 @@ class Scene {
         return didChange;
     }
     replaceAllElements(nextElements) {
-        this.elements =
-            // ts doesn't like `Array.isArray` of `instanceof Map`
-            nextElements instanceof Array
-                ? nextElements
-                : Array.from(nextElements.values());
+        const _nextElements = 
+        // ts doesn't like `Array.isArray` of `instanceof Map`
+        nextElements instanceof Array
+            ? nextElements
+            : Array.from(nextElements.values());
         const nextFrameLikes = [];
+        if (import.meta.env.DEV || import.meta.env.MODE === ENV.TEST) {
+            // throw on invalid indices in test / dev to potentially detect cases were we forgot to sync moved elements
+            validateFractionalIndices(_nextElements.map((x) => x.index));
+        }
+        this.elements = syncInvalidIndices(_nextElements);
         this.elementsMap.clear();
         this.elements.forEach((element) => {
             if (isFrameLikeElement(element)) {
@@ -170,15 +185,15 @@ class Scene {
         this.nonDeletedElementsMap = nonDeletedElements.elementsMap;
         this.frames = nextFrameLikes;
         this.nonDeletedFramesLikes = getNonDeletedElements(this.frames).elements;
-        this.informMutation();
+        this.triggerUpdate();
     }
-    informMutation() {
-        this.versionNonce = randomInteger();
+    triggerUpdate() {
+        this.sceneNonce = randomInteger();
         for (const callback of Array.from(this.callbacks)) {
             callback();
         }
     }
-    addCallback(cb) {
+    onUpdate(cb) {
         if (this.callbacks.has(cb)) {
             throw new Error();
         }
@@ -191,8 +206,8 @@ class Scene {
         };
     }
     destroy() {
-        this.nonDeletedElements = [];
         this.elements = [];
+        this.nonDeletedElements = [];
         this.nonDeletedFramesLikes = [];
         this.frames = [];
         this.elementsMap.clear();
@@ -217,6 +232,7 @@ class Scene {
             element,
             ...this.elements.slice(index),
         ];
+        syncMovedIndices(nextElements, arrayToMap([element]));
         this.replaceAllElements(nextElements);
     }
     insertElementsAtIndex(elements, index) {
@@ -228,15 +244,20 @@ class Scene {
             ...elements,
             ...this.elements.slice(index),
         ];
+        syncMovedIndices(nextElements, arrayToMap(elements));
         this.replaceAllElements(nextElements);
     }
-    addNewElement = (element) => {
-        if (element.frameId) {
-            this.insertElementAtIndex(element, this.getElementIndex(element.frameId));
-        }
-        else {
-            this.replaceAllElements([...this.elements, element]);
-        }
+    insertElement = (element) => {
+        const index = element.frameId
+            ? this.getElementIndex(element.frameId)
+            : this.elements.length;
+        this.insertElementAtIndex(element, index);
+    };
+    insertElements = (elements) => {
+        const index = elements[0].frameId
+            ? this.getElementIndex(elements[0].frameId)
+            : this.elements.length;
+        this.insertElementsAtIndex(elements, index);
     };
     getElementIndex(elementId) {
         return this.elements.findIndex((element) => element.id === elementId);

package/dist/excalidraw/scene/Shape.d.ts

@@ -1,7 +1,7 @@
 import type { Drawable, Options } from "roughjs/bin/core";
 import type { RoughGenerator } from "roughjs/bin/generator";
 import type { ExcalidrawElement, NonDeletedExcalidrawElement, ExcalidrawSelectionElement } from "../element/types";
-import { EmbedsValidationStatus } from "../types";
+import type { EmbedsValidationStatus } from "../types";
 export declare const generateRoughOptions: (element: ExcalidrawElement, continuousPath?: boolean) => Options;
 /**
  * Generates the roughjs shape for given element.

package/dist/excalidraw/scene/ShapeCache.d.ts

@@ -1,7 +1,7 @@
-import { Drawable } from "roughjs/bin/core";
-import { ExcalidrawElement } from "../element/types";
-import { ElementShape, ElementShapes } from "./types";
-import { AppState, EmbedsValidationStatus } from "../types";
+import type { Drawable } from "roughjs/bin/core";
+import type { ExcalidrawElement } from "../element/types";
+import type { ElementShape, ElementShapes } from "./types";
+import type { AppState, EmbedsValidationStatus } from "../types";
 export declare class ShapeCache {
     private static rg;
     private static cache;

package/dist/excalidraw/scene/comparisons.d.ts

@@ -1,5 +1,5 @@
-import { NonDeletedExcalidrawElement } from "../element/types";
-import { ElementOrToolType } from "../types";
+import type { NonDeletedExcalidrawElement } from "../element/types";
+import type { ElementOrToolType } from "../types";
 export declare const hasBackground: (type: ElementOrToolType) => boolean;
 export declare const hasStrokeColor: (type: ElementOrToolType) => boolean;
 export declare const hasStrokeWidth: (type: ElementOrToolType) => boolean;

package/dist/excalidraw/scene/export.d.ts

@@ -1,5 +1,5 @@
-import { ExcalidrawFrameLikeElement, NonDeletedExcalidrawElement } from "../element/types";
-import { AppState, BinaryFiles } from "../types";
+import type { ExcalidrawFrameLikeElement, NonDeletedExcalidrawElement } from "../element/types";
+import type { AppState, BinaryFiles } from "../types";
 export declare const exportToCanvas: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState, files: BinaryFiles, { exportBackground, exportPadding, viewBackgroundColor, exportingFrame, }: {
     exportBackground: boolean;
     exportPadding?: number | undefined;