@excalidraw/excalidraw 0.17.1-7500-ac247a0 → 0.17.1-b7babe5

package/dist/excalidraw/scene/Renderer.js

@@ -1,50 +1,61 @@
 import { isElementInViewport } from "../element/sizeHelpers";
 import { isImageElement } from "../element/typeChecks";
-import { cancelRender } from "../renderer/renderScene";
-import { memoize } from "../utils";
+import { renderInteractiveSceneThrottled } from "../renderer/interactiveScene";
+import { renderStaticSceneThrottled } from "../renderer/staticScene";
+import { memoize, toBrandedType } from "../utils";
 export class Renderer {
     scene;
     constructor(scene) {
         this.scene = scene;
     }
     getRenderableElements = (() => {
-        const getVisibleCanvasElements = ({ elements, zoom, offsetLeft, offsetTop, scrollX, scrollY, height, width, }) => {
-            return elements.filter((element) => isElementInViewport(element, width, height, {
-                zoom,
-                offsetLeft,
-                offsetTop,
-                scrollX,
-                scrollY,
-            }));
+        const getVisibleCanvasElements = ({ elementsMap, zoom, offsetLeft, offsetTop, scrollX, scrollY, height, width, }) => {
+            const visibleElements = [];
+            for (const element of elementsMap.values()) {
+                if (isElementInViewport(element, width, height, {
+                    zoom,
+                    offsetLeft,
+                    offsetTop,
+                    scrollX,
+                    scrollY,
+                }, elementsMap)) {
+                    visibleElements.push(element);
+                }
+            }
+            return visibleElements;
         };
-        const getCanvasElements = ({ editingElement, elements, pendingImageElementId, }) => {
-            return elements.filter((element) => {
+        const getRenderableElements = ({ elements, editingElement, pendingImageElementId, }) => {
+            const elementsMap = toBrandedType(new Map());
+            for (const element of elements) {
                 if (isImageElement(element)) {
                     if (
                     // => not placed on canvas yet (but in elements array)
                     pendingImageElementId === element.id) {
-                        return false;
+                        continue;
                     }
                 }
                 // we don't want to render text element that's being currently edited
                 // (it's rendered on remote only)
-                return (!editingElement ||
+                if (!editingElement ||
                     editingElement.type !== "text" ||
-                    element.id !== editingElement.id);
-            });
+                    element.id !== editingElement.id) {
+                    elementsMap.set(element.id, element);
+                }
+            }
+            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, }) => {
             const elements = this.scene.getNonDeletedElements();
-            const canvasElements = getCanvasElements({
+            const elementsMap = getRenderableElements({
                 elements,
                 editingElement,
                 pendingImageElementId,
             });
             const visibleElements = getVisibleCanvasElements({
-                elements: canvasElements,
+                elementsMap,
                 zoom,
                 offsetLeft,
                 offsetTop,
@@ -53,13 +64,14 @@ export class Renderer {
                 height,
                 width,
             });
-            return { canvasElements, visibleElements };
+            return { elementsMap, visibleElements };
         });
     })();
     // NOTE Doesn't destroy everything (scene, rc, etc.) because it may not be
     // safe to break TS contract here (for upstream cases)
     destroy() {
-        cancelRender();
+        renderInteractiveSceneThrottled.cancel();
+        renderStaticSceneThrottled.cancel();
         this.getRenderableElements.clear();
     }
 }

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

@@ -1,4 +1,4 @@
-import { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted, ExcalidrawFrameLikeElement } from "../element/types";
+import { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted, ExcalidrawFrameLikeElement, ElementsMapOrArray } from "../element/types";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { AppState } from "../types";
 type ElementIdKey = InstanceType<typeof LinearElementEditor>["elementId"];
@@ -9,21 +9,19 @@ export type ExcalidrawElementsIncludingDeleted = readonly ExcalidrawElement[];
 declare class Scene {
     private static sceneMapByElement;
     private static sceneMapById;
-    static mapElementToScene(elementKey: ElementKey, scene: Scene, 
-    /**
-     * needed because of frame exporting hack.
-     * elementId:Scene mapping will be removed completely, soon.
-     */
-    mapElementIds?: boolean): void;
+    static mapElementToScene(elementKey: ElementKey, scene: Scene): void;
     static getScene(elementKey: ElementKey): Scene | null;
     private callbacks;
     private nonDeletedElements;
+    private nonDeletedElementsMap;
     private elements;
     private nonDeletedFramesLikes;
     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[];
     getFramesIncludingDeleted(): readonly ExcalidrawFrameLikeElement[];
@@ -34,7 +32,7 @@ declare class Scene {
          * scene state. This in effect will likely result in cache-miss, and
          * the cache won't be updated in this case.
          */
-        elements?: readonly ExcalidrawElement[];
+        elements?: ElementsMapOrArray;
         includeBoundTextElement?: boolean;
         includeElementsInFrames?: boolean;
     }): NonDeleted<ExcalidrawElement>[];
@@ -55,7 +53,7 @@ declare class Scene {
      * @returns whether a change was made
      */
     mapElements(iteratee: (element: ExcalidrawElement) => ExcalidrawElement): boolean;
-    replaceAllElements(nextElements: readonly ExcalidrawElement[], mapElementIds?: boolean): void;
+    replaceAllElements(nextElements: ElementsMapOrArray): void;
     informMutation(): void;
     addCallback(cb: SceneStateCallback): SceneStateCallbackRemover;
     destroy(): void;
@@ -63,5 +61,8 @@ declare class Scene {
     insertElementsAtIndex(elements: ExcalidrawElement[], index: number): void;
     addNewElement: (element: ExcalidrawElement) => void;
     getElementIndex(elementId: string): number;
+    getContainerElement: (element: (ExcalidrawElement & {
+        containerId: ExcalidrawElement["id"] | null;
+    }) | null) => ExcalidrawElement | null;
 }
 export default Scene;

package/dist/excalidraw/scene/Scene.js

@@ -1,7 +1,19 @@
-import { getNonDeletedElements, isNonDeletedElement } from "../element";
+import { isNonDeletedElement } from "../element";
 import { isFrameLikeElement } from "../element/typeChecks";
 import { getSelectedElements } from "./selection";
 import { randomInteger } from "../random";
+import { toBrandedType } from "../utils";
+const getNonDeletedElements = (allElements) => {
+    const elementsMap = new Map();
+    const elements = [];
+    for (const element of allElements) {
+        if (!element.isDeleted) {
+            elements.push(element);
+            elementsMap.set(element.id, element);
+        }
+    }
+    return { elementsMap, elements };
+};
 const hashSelectionOpts = (opts) => {
     const keys = ["includeBoundTextElement", "includeElementsInFrames"];
     let hash = "";
@@ -22,27 +34,17 @@ class Scene {
     // ---------------------------------------------------------------------------
     static sceneMapByElement = new WeakMap();
     static sceneMapById = new Map();
-    static mapElementToScene(elementKey, scene, 
-    /**
-     * needed because of frame exporting hack.
-     * elementId:Scene mapping will be removed completely, soon.
-     */
-    mapElementIds = true) {
+    static mapElementToScene(elementKey, scene) {
         if (isIdKey(elementKey)) {
-            if (!mapElementIds) {
-                return;
-            }
             // for cases where we don't have access to the element object
             // (e.g. restore serialized appState with id references)
             this.sceneMapById.set(elementKey, scene);
         }
         else {
             this.sceneMapByElement.set(elementKey, scene);
-            if (!mapElementIds) {
-                // if mapping element objects, also cache the id string when later
-                // looking up by id alone
-                this.sceneMapById.set(elementKey.id, scene);
-            }
+            // if mapping element objects, also cache the id string when later
+            // looking up by id alone
+            this.sceneMapById.set(elementKey.id, scene);
         }
     }
     static getScene(elementKey) {
@@ -56,16 +58,23 @@ class Scene {
     // ---------------------------------------------------------------------------
     callbacks = new Set();
     nonDeletedElements = [];
+    nonDeletedElementsMap = toBrandedType(new Map());
     elements = [];
     nonDeletedFramesLikes = [];
     frames = [];
-    elementsMap = new Map();
+    elementsMap = toBrandedType(new Map());
     selectedElementsCache = {
         selectedElementIds: null,
         elements: null,
         cache: new Map(),
     };
     versionNonce;
+    getElementsMapIncludingDeleted() {
+        return this.elementsMap;
+    }
+    getNonDeletedElementsMap() {
+        return this.nonDeletedElementsMap;
+    }
     getElementsIncludingDeleted() {
         return this.elements;
     }
@@ -141,20 +150,26 @@ class Scene {
         }
         return didChange;
     }
-    replaceAllElements(nextElements, mapElementIds = true) {
-        this.elements = nextElements;
+    replaceAllElements(nextElements) {
+        this.elements =
+            // ts doesn't like `Array.isArray` of `instanceof Map`
+            nextElements instanceof Array
+                ? nextElements
+                : Array.from(nextElements.values());
         const nextFrameLikes = [];
         this.elementsMap.clear();
-        nextElements.forEach((element) => {
+        this.elements.forEach((element) => {
             if (isFrameLikeElement(element)) {
                 nextFrameLikes.push(element);
             }
             this.elementsMap.set(element.id, element);
             Scene.mapElementToScene(element, this);
         });
-        this.nonDeletedElements = getNonDeletedElements(this.elements);
+        const nonDeletedElements = getNonDeletedElements(this.elements);
+        this.nonDeletedElements = nonDeletedElements.elements;
+        this.nonDeletedElementsMap = nonDeletedElements.elementsMap;
         this.frames = nextFrameLikes;
-        this.nonDeletedFramesLikes = getNonDeletedElements(this.frames);
+        this.nonDeletedFramesLikes = getNonDeletedElements(this.frames).elements;
         this.informMutation();
     }
     informMutation() {
@@ -226,5 +241,14 @@ class Scene {
     getElementIndex(elementId) {
         return this.elements.findIndex((element) => element.id === elementId);
     }
+    getContainerElement = (element) => {
+        if (!element) {
+            return null;
+        }
+        if (element.containerId) {
+            return this.getElement(element.containerId) || null;
+        }
+        return null;
+    };
 }
 export default Scene;

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

@@ -1,6 +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";
 export declare const generateRoughOptions: (element: ExcalidrawElement, continuousPath?: boolean) => Options;
 /**
  * Generates the roughjs shape for given element.
@@ -9,7 +10,8 @@ export declare const generateRoughOptions: (element: ExcalidrawElement, continuo
  *
  * @private
  */
-export declare const _generateElementShape: (element: Exclude<NonDeletedExcalidrawElement, ExcalidrawSelectionElement>, generator: RoughGenerator, { isExporting, canvasBackgroundColor, }: {
+export declare const _generateElementShape: (element: Exclude<NonDeletedExcalidrawElement, ExcalidrawSelectionElement>, generator: RoughGenerator, { isExporting, canvasBackgroundColor, embedsValidationStatus, }: {
     isExporting: boolean;
     canvasBackgroundColor: string;
+    embedsValidationStatus: EmbedsValidationStatus | null;
 }) => Drawable | Drawable[] | null;

package/dist/excalidraw/scene/Shape.js

@@ -84,9 +84,11 @@ export const generateRoughOptions = (element, continuousPath = false) => {
         }
     }
 };
-const modifyIframeLikeForRoughOptions = (element, isExporting) => {
+const modifyIframeLikeForRoughOptions = (element, isExporting, embedsValidationStatus) => {
     if (isIframeLikeElement(element) &&
-        (isExporting || (isEmbeddableElement(element) && !element.validated)) &&
+        (isExporting ||
+            (isEmbeddableElement(element) &&
+                embedsValidationStatus?.get(element.id) !== true)) &&
         isTransparent(element.backgroundColor) &&
         isTransparent(element.strokeColor)) {
         return {
@@ -204,7 +206,7 @@ const getArrowheadShapes = (element, shape, position, arrowhead, generator, opti
  *
  * @private
  */
-export const _generateElementShape = (element, generator, { isExporting, canvasBackgroundColor, }) => {
+export const _generateElementShape = (element, generator, { isExporting, canvasBackgroundColor, embedsValidationStatus, }) => {
     switch (element.type) {
         case "rectangle":
         case "iframe":
@@ -216,10 +218,10 @@ export const _generateElementShape = (element, generator, { isExporting, canvasB
                 const w = element.width;
                 const h = element.height;
                 const r = getCornerRadius(Math.min(w, h), element);
-                shape = generator.path(`M ${r} 0 L ${w - r} 0 Q ${w} 0, ${w} ${r} L ${w} ${h - r} Q ${w} ${h}, ${w - r} ${h} L ${r} ${h} Q 0 ${h}, 0 ${h - r} L 0 ${r} Q 0 0, ${r} 0`, generateRoughOptions(modifyIframeLikeForRoughOptions(element, isExporting), true));
+                shape = generator.path(`M ${r} 0 L ${w - r} 0 Q ${w} 0, ${w} ${r} L ${w} ${h - r} Q ${w} ${h}, ${w - r} ${h} L ${r} ${h} Q 0 ${h}, 0 ${h - r} L 0 ${r} Q 0 0, ${r} 0`, generateRoughOptions(modifyIframeLikeForRoughOptions(element, isExporting, embedsValidationStatus), true));
             }
             else {
-                shape = generator.rectangle(0, 0, element.width, element.height, generateRoughOptions(modifyIframeLikeForRoughOptions(element, isExporting), false));
+                shape = generator.rectangle(0, 0, element.width, element.height, generateRoughOptions(modifyIframeLikeForRoughOptions(element, isExporting, embedsValidationStatus), false));
             }
             return shape;
         }

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 } from "../types";
+import { AppState, EmbedsValidationStatus } from "../types";
 export declare class ShapeCache {
     private static rg;
     private static cache;
@@ -20,5 +20,6 @@ export declare class ShapeCache {
     static generateElementShape: <T extends import("../element/types").ExcalidrawRectangleElement | import("../element/types").ExcalidrawDiamondElement | import("../element/types").ExcalidrawEllipseElement | import("../element/types").ExcalidrawTextElement | import("../element/types").ExcalidrawLinearElement | import("../element/types").ExcalidrawFreeDrawElement | import("../element/types").ExcalidrawImageElement | import("../element/types").ExcalidrawFrameElement | import("../element/types").ExcalidrawMagicFrameElement | import("../element/types").ExcalidrawIframeElement | import("../element/types").ExcalidrawEmbeddableElement>(element: T, renderConfig: {
         isExporting: boolean;
         canvasBackgroundColor: AppState["viewBackgroundColor"];
+        embedsValidationStatus: EmbedsValidationStatus;
     } | null) => ((T["type"] extends keyof ElementShapes ? ElementShapes[T["type"]] | undefined : ElementShape | undefined) & ({} | null)) | (T["type"] extends keyof ElementShapes ? ElementShapes[T["type"]] : Drawable | null);
 }

package/dist/excalidraw/scene/ShapeCache.js

@@ -35,6 +35,7 @@ export class ShapeCache {
         const shape = _generateElementShape(element, ShapeCache.rg, renderConfig || {
             isExporting: false,
             canvasBackgroundColor: COLOR_PALETTE.white,
+            embedsValidationStatus: null,
         });
         ShapeCache.cache.set(element, shape);
         return shape;

package/dist/excalidraw/scene/comparisons.js

@@ -27,7 +27,8 @@ export const canChangeRoundness = (type) => type === "rectangle" ||
     type === "embeddable" ||
     type === "arrow" ||
     type === "line" ||
-    type === "diamond";
+    type === "diamond" ||
+    type === "image";
 export const canHaveArrowheads = (type) => type === "arrow";
 export const getElementAtPosition = (elements, isAtPositionFn) => {
     let hitElement = null;

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

@@ -18,6 +18,9 @@ export declare const exportToSvg: (elements: readonly NonDeletedExcalidrawElemen
     exportEmbedScene?: boolean;
     frameRendering?: AppState["frameRendering"];
 }, files: BinaryFiles | null, opts?: {
+    /**
+     * if true, all embeddables passed in will be rendered when possible.
+     */
     renderEmbeddables?: boolean;
     exportingFrame?: ExcalidrawFrameLikeElement | null;
 }) => Promise<SVGSVGElement>;

package/dist/excalidraw/scene/export.js

@@ -1,38 +1,17 @@
 import rough from "roughjs/bin/rough";
 import { getCommonBounds, getElementAbsoluteCoords, } from "../element/bounds";
-import { renderSceneToSvg, renderStaticScene } from "../renderer/renderScene";
-import { cloneJSON, distance, getFontString } from "../utils";
+import { renderSceneToSvg } from "../renderer/staticSvgScene";
+import { arrayToMap, distance, getFontString, toBrandedType } from "../utils";
 import { DEFAULT_EXPORT_PADDING, FONT_FAMILY, FRAME_STYLE, SVG_NS, THEME_FILTER, } from "../constants";
 import { getDefaultAppState } from "../appState";
 import { serializeAsJSON } from "../data/json";
 import { getInitializedImageElements, updateImageCache, } from "../element/image";
-import { elementsOverlappingBBox } from "../../utils/index";
-import { getFrameLikeElements, getFrameLikeTitle, getRootElements, } from "../frame";
+import { getElementsOverlappingFrame, getFrameLikeElements, getFrameLikeTitle, getRootElements, } from "../frame";
 import { newTextElement } from "../element";
 import { newElementWith } from "../element/mutateElement";
-import Scene from "./Scene";
 import { isFrameElement, isFrameLikeElement } from "../element/typeChecks";
+import { renderStaticScene } from "../renderer/staticScene";
 const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
-// getContainerElement and getBoundTextElement and potentially other helpers
-// depend on `Scene` which will not be available when these pure utils are
-// called outside initialized Excalidraw editor instance or even if called
-// from inside Excalidraw if the elements were never cached by Scene (e.g.
-// for library elements).
-//
-// As such, before passing the elements down, we need to initialize a custom
-// Scene instance and assign them to it.
-//
-// FIXME This is a super hacky workaround and we'll need to rewrite this soon.
-const __createSceneForElementsHack__ = (elements) => {
-    const scene = new Scene();
-    // we can't duplicate elements to regenerate ids because we need the
-    // orig ids when embedding. So we do another hack of not mapping element
-    // ids to Scene instances so that we don't override the editor elements
-    // mapping.
-    // We still need to clone the objects themselves to regen references.
-    scene.replaceAllElements(cloneJSON(elements), false);
-    return scene;
-};
 const truncateText = (element, maxWidth) => {
     if (element.width <= maxWidth) {
         return element;
@@ -109,11 +88,7 @@ const getFrameRenderingConfig = (exportingFrame, frameRendering) => {
 const prepareElementsForRender = ({ elements, exportingFrame, frameRendering, exportWithDarkMode, }) => {
     let nextElements;
     if (exportingFrame) {
-        nextElements = elementsOverlappingBBox({
-            elements,
-            bounds: exportingFrame,
-            type: "overlap",
-        });
+        nextElements = getElementsOverlappingFrame(elements, exportingFrame);
     }
     else if (frameRendering.enabled && frameRendering.name) {
         nextElements = addFrameLabelsAsTextElements(elements, {
@@ -131,8 +106,6 @@ export const exportToCanvas = async (elements, appState, files, { exportBackgrou
     canvas.height = height * appState.exportScale;
     return { canvas, scale: appState.exportScale };
 }) => {
-    const tempScene = __createSceneForElementsHack__(elements);
-    elements = tempScene.getNonDeletedElements();
     const frameRendering = getFrameRenderingConfig(exportingFrame ?? null, appState.frameRendering ?? null);
     const elementsForRender = prepareElementsForRender({
         elements,
@@ -154,7 +127,8 @@ export const exportToCanvas = async (elements, appState, files, { exportBackgrou
     renderStaticScene({
         canvas,
         rc: rough.canvas(canvas),
-        elements: elementsForRender,
+        elementsMap: toBrandedType(arrayToMap(elementsForRender)),
+        allElementsMap: toBrandedType(arrayToMap(elements)),
         visibleElements: elementsForRender,
         scale,
         appState: {
@@ -172,14 +146,14 @@ export const exportToCanvas = async (elements, appState, files, { exportBackgrou
             imageCache,
             renderGrid: false,
             isExporting: true,
+            // empty disables embeddable rendering
+            embedsValidationStatus: new Map(),
+            elementsPendingErasure: new Set(),
         },
     });
-    tempScene.destroy();
     return canvas;
 };
 export const exportToSvg = async (elements, appState, files, opts) => {
-    const tempScene = __createSceneForElementsHack__(elements);
-    elements = tempScene.getNonDeletedElements();
     const frameRendering = getFrameRenderingConfig(opts?.exportingFrame ?? null, appState.frameRendering ?? null);
     let { exportPadding = DEFAULT_EXPORT_PADDING, exportWithDarkMode = false, viewBackgroundColor, exportScale = 1, exportEmbedScene, } = appState;
     const { exportingFrame = null } = opts || {};
@@ -235,8 +209,9 @@ export const exportToSvg = async (elements, appState, files, opts) => {
     const offsetY = -minY + exportPadding;
     const frameElements = getFrameLikeElements(elements);
     let exportingFrameClipPath = "";
+    const elementsMap = arrayToMap(elements);
     for (const frame of frameElements) {
-        const [x1, y1, x2, y2] = getElementAbsoluteCoords(frame);
+        const [x1, y1, x2, y2] = getElementAbsoluteCoords(frame, elementsMap);
         const cx = (x2 - x1) / 2 - (frame.x - x1);
         const cy = (y2 - y1) / 2 - (frame.y - y1);
         exportingFrameClipPath += `<clipPath id=${frame.id}>
@@ -279,16 +254,21 @@ export const exportToSvg = async (elements, appState, files, opts) => {
         svgRoot.appendChild(rect);
     }
     const rsvg = rough.svg(svgRoot);
-    renderSceneToSvg(elementsForRender, rsvg, svgRoot, files || {}, {
+    const renderEmbeddables = opts?.renderEmbeddables ?? false;
+    renderSceneToSvg(elementsForRender, toBrandedType(arrayToMap(elementsForRender)), rsvg, svgRoot, files || {}, {
         offsetX,
         offsetY,
         isExporting: true,
         exportWithDarkMode,
-        renderEmbeddables: opts?.renderEmbeddables ?? false,
+        renderEmbeddables,
         frameRendering,
         canvasBackgroundColor: viewBackgroundColor,
+        embedsValidationStatus: renderEmbeddables
+            ? new Map(elementsForRender
+                .filter((element) => isFrameLikeElement(element))
+                .map((element) => [element.id, true]))
+            : new Map(),
     });
-    tempScene.destroy();
     return svgRoot;
 };
 // calculate smallest area to fit the contents in

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

@@ -1,4 +1,3 @@
-export { isOverScrollBars } from "./scrollbars";
 export { isSomeElementSelected, getElementsWithinSelection, getCommonAttributeOfSelectedElements, getSelectedElements, getTargetElements, } from "./selection";
 export { calculateScrollCenter } from "./scroll";
 export { hasBackground, hasStrokeWidth, hasStrokeStyle, canHaveArrowheads, canChangeRoundness, getElementAtPosition, getElementsAtPosition, } from "./comparisons";

package/dist/excalidraw/scene/index.js

@@ -1,4 +1,3 @@
-export { isOverScrollBars } from "./scrollbars";
 export { isSomeElementSelected, getElementsWithinSelection, getCommonAttributeOfSelectedElements, getSelectedElements, getTargetElements, } from "./selection";
 export { calculateScrollCenter } from "./scroll";
 export { hasBackground, hasStrokeWidth, hasStrokeStyle, canHaveArrowheads, canChangeRoundness, getElementAtPosition, getElementsAtPosition, } from "./comparisons";

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

@@ -1,6 +1,6 @@
-import { ExcalidrawElement } from "../element/types";
 import { InteractiveCanvasAppState } from "../types";
 import { ScrollBars } from "./types";
+import { ExcalidrawElement } from "../element/types";
 export declare const SCROLLBAR_MARGIN = 4;
 export declare const SCROLLBAR_WIDTH = 6;
 export declare const SCROLLBAR_COLOR = "rgba(0,0,0,0.3)";

package/dist/excalidraw/scene/scrollbars.js

@@ -5,7 +5,7 @@ export const SCROLLBAR_MARGIN = 4;
 export const SCROLLBAR_WIDTH = 6;
 export const SCROLLBAR_COLOR = "rgba(0,0,0,0.3)";
 export const getScrollBars = (elements, viewportWidth, viewportHeight, appState) => {
-    if (elements.length === 0) {
+    if (!elements.length) {
         return {
             horizontal: null,
             vertical: null,

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

@@ -1,4 +1,4 @@
-import { ExcalidrawElement, NonDeletedExcalidrawElement } from "../element/types";
+import { ElementsMap, ElementsMapOrArray, ExcalidrawElement, NonDeletedExcalidrawElement } from "../element/types";
 import { AppState, InteractiveCanvasAppState } from "../types";
 /**
  * Frames and their containing elements are not to be selected at the same time.
@@ -7,8 +7,8 @@ import { AppState, InteractiveCanvasAppState } from "../types";
  * @param selectedElements
  */
 export declare const excludeElementsInFramesFromSelection: <T extends ExcalidrawElement>(selectedElements: readonly T[]) => T[];
-export declare const getElementsWithinSelection: (elements: readonly NonDeletedExcalidrawElement[], selection: NonDeletedExcalidrawElement, excludeElementsInFrames?: boolean) => NonDeletedExcalidrawElement[];
-export declare const getVisibleAndNonSelectedElements: (elements: readonly NonDeletedExcalidrawElement[], selectedElements: readonly NonDeletedExcalidrawElement[], appState: AppState) => NonDeletedExcalidrawElement[];
+export declare const getElementsWithinSelection: (elements: readonly NonDeletedExcalidrawElement[], selection: NonDeletedExcalidrawElement, elementsMap: ElementsMap, excludeElementsInFrames?: boolean) => NonDeletedExcalidrawElement[];
+export declare const getVisibleAndNonSelectedElements: (elements: readonly NonDeletedExcalidrawElement[], selectedElements: readonly NonDeletedExcalidrawElement[], appState: AppState, elementsMap: ElementsMap) => NonDeletedExcalidrawElement[];
 export declare const isSomeElementSelected: {
     (elements: readonly NonDeletedExcalidrawElement[], appState: Pick<AppState, "selectedElementIds">): boolean;
     clearCache(): void;
@@ -18,11 +18,11 @@ export declare const isSomeElementSelected: {
  *  elements. If elements don't share the same value, returns `null`.
  */
 export declare const getCommonAttributeOfSelectedElements: <T>(elements: readonly NonDeletedExcalidrawElement[], appState: Pick<AppState, "selectedElementIds">, getAttribute: (element: ExcalidrawElement) => T) => T | null;
-export declare const getSelectedElements: (elements: readonly NonDeletedExcalidrawElement[], appState: Pick<InteractiveCanvasAppState, "selectedElementIds">, opts?: {
+export declare const getSelectedElements: (elements: ElementsMapOrArray, appState: Pick<InteractiveCanvasAppState, "selectedElementIds">, opts?: {
     includeBoundTextElement?: boolean;
     includeElementsInFrames?: boolean;
 }) => ExcalidrawElement[];
-export declare const getTargetElements: (elements: readonly NonDeletedExcalidrawElement[], appState: Pick<AppState, "selectedElementIds" | "editingElement">) => ExcalidrawElement[];
+export declare const getTargetElements: (elements: ElementsMapOrArray, appState: Pick<AppState, "selectedElementIds" | "editingElement">) => ExcalidrawElement[];
 /**
  * returns prevState's selectedElementids if no change from previous, so as to
  * retain reference identity for memoization

package/dist/excalidraw/scene/selection.js

@@ -23,13 +23,13 @@ export const excludeElementsInFramesFromSelection = (selectedElements) => {
         return true;
     });
 };
-export const getElementsWithinSelection = (elements, selection, excludeElementsInFrames = true) => {
-    const [selectionX1, selectionY1, selectionX2, selectionY2] = getElementAbsoluteCoords(selection);
+export const getElementsWithinSelection = (elements, selection, elementsMap, excludeElementsInFrames = true) => {
+    const [selectionX1, selectionY1, selectionX2, selectionY2] = getElementAbsoluteCoords(selection, elementsMap);
     let elementsInSelection = elements.filter((element) => {
-        let [elementX1, elementY1, elementX2, elementY2] = getElementBounds(element);
-        const containingFrame = getContainingFrame(element);
+        let [elementX1, elementY1, elementX2, elementY2] = getElementBounds(element, elementsMap);
+        const containingFrame = getContainingFrame(element, elementsMap);
         if (containingFrame) {
-            const [fx1, fy1, fx2, fy2] = getElementBounds(containingFrame);
+            const [fx1, fy1, fx2, fy2] = getElementBounds(containingFrame, elementsMap);
             elementX1 = Math.max(fx1, elementX1);
             elementY1 = Math.max(fy1, elementY1);
             elementX2 = Math.min(fx2, elementX2);
@@ -47,18 +47,18 @@ export const getElementsWithinSelection = (elements, selection, excludeElementsI
         ? excludeElementsInFramesFromSelection(elementsInSelection)
         : elementsInSelection;
     elementsInSelection = elementsInSelection.filter((element) => {
-        const containingFrame = getContainingFrame(element);
+        const containingFrame = getContainingFrame(element, elementsMap);
         if (containingFrame) {
-            return elementOverlapsWithFrame(element, containingFrame);
+            return elementOverlapsWithFrame(element, containingFrame, elementsMap);
         }
         return true;
     });
     return elementsInSelection;
 };
-export const getVisibleAndNonSelectedElements = (elements, selectedElements, appState) => {
+export const getVisibleAndNonSelectedElements = (elements, selectedElements, appState, elementsMap) => {
     const selectedElementsSet = new Set(selectedElements.map((element) => element.id));
     return elements.filter((element) => {
-        const isVisible = isElementInViewport(element, appState.width, appState.height, appState);
+        const isVisible = isElementInViewport(element, appState.width, appState.height, appState, elementsMap);
         return !selectedElementsSet.has(element.id) && isVisible;
     });
 };
@@ -94,17 +94,19 @@ export const getCommonAttributeOfSelectedElements = (elements, appState, getAttr
     return attributes.length === 1 ? attributes[0] : null;
 };
 export const getSelectedElements = (elements, appState, opts) => {
-    const selectedElements = elements.filter((element) => {
+    const selectedElements = [];
+    for (const element of elements.values()) {
         if (appState.selectedElementIds[element.id]) {
-            return element;
+            selectedElements.push(element);
+            continue;
         }
         if (opts?.includeBoundTextElement &&
             isBoundToContainer(element) &&
             appState.selectedElementIds[element?.containerId]) {
-            return element;
+            selectedElements.push(element);
+            continue;
         }
-        return null;
-    });
+    }
     if (opts?.includeElementsInFrames) {
         const elementsToInclude = [];
         selectedElements.forEach((element) => {