@excalidraw/excalidraw 0.17.1-550a388 → 0.17.1-62228e0

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

@@ -3,13 +3,14 @@ import { normalizeLink, toValidURL } from "../data/url";
 import { getElementAbsoluteCoords } from "../element";
 import { createPlaceholderEmbeddableLabel, getEmbedLink, } from "../element/embeddable";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { getBoundTextElement, getContainerElement, getLineHeightInPx, getVerticalOffset, } from "../element/textElement";
+import { getBoundTextElement, getContainerElement, getLineHeightInPx, } from "../element/textElement";
 import { isArrowElement, isIframeLikeElement, isInitializedImageElement, isTextElement, } from "../element/typeChecks";
 import { getContainingFrame } from "../frame";
 import { getCornerRadius, isPathALoop } from "../math";
 import { ShapeCache } from "../scene/ShapeCache";
 import { getFontFamilyString, isRTL, isTestEnv } from "../utils";
 import { getFreeDrawSvgPath, IMAGE_INVERT_FILTER } from "./renderElement";
+import { getVerticalOffset } from "../fonts";
 const roughSVGDrawWithPrecision = (rsvg, drawable, precision) => {
     if (typeof precision === "undefined") {
         return rsvg.draw(drawable);
@@ -361,8 +362,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/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;
@@ -10,6 +10,9 @@ declare class Scene {
     private static sceneMapByElement;
     private static sceneMapById;
     static mapElementToScene(elementKey: ElementKey, scene: Scene): void;
+    /**
+     * @deprecated pass down `app.scene` and use it directly
+     */
     static getScene(elementKey: ElementKey): Scene | null;
     private callbacks;
     private nonDeletedElements;
@@ -19,11 +22,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 +48,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 +63,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 = [];
@@ -47,6 +50,9 @@ class Scene {
             this.sceneMapById.set(elementKey.id, scene);
         }
     }
+    /**
+     * @deprecated pass down `app.scene` and use it directly
+     */
     static getScene(elementKey) {
         if (isIdKey(elementKey)) {
             return this.sceneMapById.get(elementKey) || null;
@@ -59,6 +65,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 +75,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 +91,9 @@ class Scene {
     getElementsIncludingDeleted() {
         return this.elements;
     }
+    getElementsMapIncludingDeleted() {
+        return this.elementsMap;
+    }
     getNonDeletedElements() {
         return this.nonDeletedElements;
     }
@@ -114,9 +130,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 +164,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 +188,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 +209,8 @@ class Scene {
         };
     }
     destroy() {
-        this.nonDeletedElements = [];
         this.elements = [];
+        this.nonDeletedElements = [];
         this.nonDeletedFramesLikes = [];
         this.frames = [];
         this.elementsMap.clear();
@@ -217,6 +235,7 @@ class Scene {
             element,
             ...this.elements.slice(index),
         ];
+        syncMovedIndices(nextElements, arrayToMap([element]));
         this.replaceAllElements(nextElements);
     }
     insertElementsAtIndex(elements, index) {
@@ -228,15 +247,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;
@@ -23,5 +23,6 @@ export declare const exportToSvg: (elements: readonly NonDeletedExcalidrawElemen
      */
     renderEmbeddables?: boolean;
     exportingFrame?: ExcalidrawFrameLikeElement | null;
+    skipInliningFonts?: true;
 }) => Promise<SVGSVGElement>;
 export declare const getExportSize: (elements: readonly NonDeletedExcalidrawElement[], exportPadding: number, scale: number) => [number, number];

package/dist/excalidraw/scene/export.js

@@ -1,16 +1,19 @@
 import rough from "roughjs/bin/rough";
-import { getCommonBounds, getElementAbsoluteCoords, } from "../element/bounds";
+import { getCommonBounds, getElementAbsoluteCoords } from "../element/bounds";
 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 { DEFAULT_EXPORT_PADDING, FRAME_STYLE, FONT_FAMILY, SVG_NS, THEME, THEME_FILTER, } from "../constants";
 import { getDefaultAppState } from "../appState";
 import { serializeAsJSON } from "../data/json";
 import { getInitializedImageElements, updateImageCache, } from "../element/image";
 import { getElementsOverlappingFrame, getFrameLikeElements, getFrameLikeTitle, getRootElements, } from "../frame";
 import { newTextElement } from "../element";
 import { newElementWith } from "../element/mutateElement";
-import { isFrameElement, isFrameLikeElement } from "../element/typeChecks";
+import { isFrameElement, isFrameLikeElement, isTextElement, } from "../element/typeChecks";
+import { syncInvalidIndices } from "../fractionalIndex";
 import { renderStaticScene } from "../renderer/staticScene";
+import { Fonts } from "../fonts";
+import { LOCAL_FONT_PROTOCOL } from "../fonts/metadata";
 const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
 const truncateText = (element, maxWidth) => {
     if (element.width <= maxWidth) {
@@ -60,7 +63,7 @@ const addFrameLabelsAsTextElements = (elements, opts) => {
             let textElement = newTextElement({
                 x: element.x,
                 y: element.y - FRAME_STYLE.nameOffsetY,
-                fontFamily: FONT_FAMILY.Assistant,
+                fontFamily: FONT_FAMILY.Helvetica,
                 fontSize: FRAME_STYLE.nameFontSize,
                 lineHeight: FRAME_STYLE.nameLineHeight,
                 strokeColor: opts.exportWithDarkMode
@@ -128,7 +131,7 @@ export const exportToCanvas = async (elements, appState, files, { exportBackgrou
         canvas,
         rc: rough.canvas(canvas),
         elementsMap: toBrandedType(arrayToMap(elementsForRender)),
-        allElementsMap: toBrandedType(arrayToMap(elements)),
+        allElementsMap: toBrandedType(arrayToMap(syncInvalidIndices(elements))),
         visibleElements: elementsForRender,
         scale,
         appState: {
@@ -139,7 +142,7 @@ export const exportToCanvas = async (elements, appState, files, { exportBackgrou
             scrollY: -minY + exportPadding,
             zoom: defaultAppState.zoom,
             shouldCacheIgnoreZoom: false,
-            theme: appState.exportWithDarkMode ? "dark" : "light",
+            theme: appState.exportWithDarkMode ? THEME.DARK : THEME.LIGHT,
         },
         renderConfig: {
             canvasBackgroundColor: viewBackgroundColor,
@@ -194,17 +197,6 @@ export const exportToSvg = async (elements, appState, files, opts) => {
     if (exportWithDarkMode) {
         svgRoot.setAttribute("filter", THEME_FILTER);
     }
-    let assetPath = "https://excalidraw.com/";
-    // Asset path needs to be determined only when using package
-    if (import.meta.env.VITE_IS_EXCALIDRAW_NPM_PACKAGE) {
-        assetPath =
-            window.EXCALIDRAW_ASSET_PATH ||
-                `https://unpkg.com/${import.meta.env.VITE_PKG_NAME}@${import.meta.env.PKG_VERSION}`;
-        if (assetPath?.startsWith("/")) {
-            assetPath = assetPath.replace("/", `${window.location.origin}/`);
-        }
-        assetPath = `${assetPath}/dist/excalidraw-assets/`;
-    }
     const offsetX = -minX + exportPadding;
     const offsetY = -minY + exportPadding;
     const frameElements = getFrameLikeElements(elements);
@@ -222,23 +214,42 @@ export const exportToSvg = async (elements, appState, files, opts) => {
           </rect>
         </clipPath>`;
     }
+    const fontFamilies = elements.reduce((acc, element) => {
+        if (isTextElement(element)) {
+            acc.add(element.fontFamily);
+        }
+        return acc;
+    }, new Set());
+    const fontFaces = opts?.skipInliningFonts
+        ? []
+        : await Promise.all(Array.from(fontFamilies).map(async (x) => {
+            const { fontFaces } = Fonts.registered.get(x) ?? {};
+            if (!Array.isArray(fontFaces)) {
+                console.error(`Couldn't find registered font-faces for font-family "${x}"`, Fonts.registered);
+                return;
+            }
+            return Promise.all(fontFaces
+                .filter((font) => font.url.protocol !== LOCAL_FONT_PROTOCOL)
+                .map(async (font) => {
+                try {
+                    const content = await font.getContent();
+                    return `@font-face {
+        font-family: ${font.fontFace.family};
+        src: url(${content});
+          }`;
+                }
+                catch (e) {
+                    console.error(`Skipped inlining font with URL "${font.url.toString()}"`, e);
+                    return "";
+                }
+            }));
+        }));
     svgRoot.innerHTML = `
   ${SVG_EXPORT_TAG}
   ${metadata}
   <defs>
     <style class="style-fonts">
-      @font-face {
-        font-family: "Virgil";
-        src: url("${assetPath}Virgil.woff2");
-      }
-      @font-face {
-        font-family: "Cascadia";
-        src: url("${assetPath}Cascadia.woff2");
-      }
-      @font-face {
-        font-family: "Assistant";
-        src: url("${assetPath}Assistant-Regular.woff2");
-      }
+      ${fontFaces.flat().filter(Boolean).join("\n")}
     </style>
     ${exportingFrameClipPath}
   </defs>

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

@@ -1,5 +1,5 @@
-import { AppState, PointerCoords, Zoom } from "../types";
-import { ExcalidrawElement } from "../element/types";
+import type { AppState, PointerCoords, Zoom } from "../types";
+import type { ExcalidrawElement } from "../element/types";
 export declare const centerScrollOn: ({ scenePoint, viewportDimensions, zoom, }: {
     scenePoint: PointerCoords;
     viewportDimensions: {

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

@@ -1,6 +1,6 @@
-import { InteractiveCanvasAppState } from "../types";
-import { ScrollBars } from "./types";
-import { ExcalidrawElement } from "../element/types";
+import type { InteractiveCanvasAppState } from "../types";
+import type { ScrollBars } from "./types";
+import type { 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/selection.d.ts

@@ -1,5 +1,5 @@
-import { ElementsMap, ElementsMapOrArray, ExcalidrawElement, NonDeletedExcalidrawElement } from "../element/types";
-import { AppState, InteractiveCanvasAppState } from "../types";
+import type { ElementsMap, ElementsMapOrArray, ExcalidrawElement, NonDeletedExcalidrawElement } from "../element/types";
+import type { AppState, InteractiveCanvasAppState } from "../types";
 /**
  * Frames and their containing elements are not to be selected at the same time.
  * Given an array of selected elements, if there are frames and their containing elements

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

@@ -1,8 +1,8 @@
 import type { RoughCanvas } from "roughjs/bin/canvas";
-import { Drawable } from "roughjs/bin/core";
-import { ExcalidrawElement, ExcalidrawTextElement, NonDeletedElementsMap, NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "../element/types";
-import { AppClassProperties, AppState, EmbedsValidationStatus, ElementsPendingErasure, InteractiveCanvasAppState, StaticCanvasAppState, SocketId, UserIdleState } from "../types";
-import { MakeBrand } from "../utility-types";
+import type { Drawable } from "roughjs/bin/core";
+import type { ExcalidrawElement, NonDeletedElementsMap, NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "../element/types";
+import type { AppClassProperties, AppState, EmbedsValidationStatus, ElementsPendingErasure, InteractiveCanvasAppState, StaticCanvasAppState, SocketId, UserIdleState, Device } from "../types";
+import type { MakeBrand } from "../utility-types";
 export type RenderableElementsMap = NonDeletedElementsMap & MakeBrand<"RenderableElementsMap">;
 export type StaticCanvasRenderConfig = {
     canvasBackgroundColor: AppState["viewBackgroundColor"];
@@ -33,7 +33,7 @@ export type InteractiveCanvasRenderConfig = {
     remotePointerUserStates: Map<SocketId, UserIdleState>;
     remotePointerUsernames: Map<SocketId, string>;
     remotePointerButton: Map<SocketId, string | undefined>;
-    selectionColor?: string;
+    selectionColor: string;
     renderScrollbars?: boolean;
 };
 export type RenderInteractiveSceneCallback = {
@@ -56,18 +56,17 @@ export type InteractiveSceneRenderConfig = {
     elementsMap: RenderableElementsMap;
     visibleElements: readonly NonDeletedExcalidrawElement[];
     selectedElements: readonly NonDeletedExcalidrawElement[];
+    allElementsMap: NonDeletedSceneElementsMap;
     scale: number;
     appState: InteractiveCanvasAppState;
     renderConfig: InteractiveCanvasRenderConfig;
+    device: Device;
     callback: (data: RenderInteractiveSceneCallback) => void;
 };
 export type SceneScroll = {
     scrollX: number;
     scrollY: number;
 };
-export interface Scene {
-    elements: ExcalidrawTextElement[];
-}
 export type ExportType = "png" | "clipboard" | "clipboard-svg" | "backend" | "svg";
 export type ScrollBars = {
     horizontal: {

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

@@ -1,4 +1,4 @@
-import { AppState, NormalizedZoomValue } from "../types";
+import type { AppState, NormalizedZoomValue } from "../types";
 export declare const getNormalizedZoom: (zoom: number) => NormalizedZoomValue;
 export declare const getStateForZoom: ({ viewportX, viewportY, nextZoom, }: {
     viewportX: number;

package/dist/excalidraw/shapes.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
+import { type GeometricShape } from "../utils/geometry/shape";
+import type { ElementsMap, ExcalidrawElement } from "./element/types";
 export declare const SHAPES: readonly [{
     readonly icon: JSX.Element;
     readonly value: "selection";
@@ -61,3 +63,8 @@ export declare const SHAPES: readonly [{
     readonly fillable: false;
 }];
 export declare const findShapeByKey: (key: string) => "text" | "image" | "selection" | "rectangle" | "diamond" | "ellipse" | "arrow" | "line" | "freedraw" | "eraser" | null;
+/**
+ * get the pure geometric shape of an excalidraw element
+ * which is then used for hit detection
+ */
+export declare const getElementShape: (element: ExcalidrawElement, elementsMap: ElementsMap) => GeometricShape;