@excalidraw/excalidraw 0.17.1-d2f67e6 → 0.17.1-e63dd02

package/dist/excalidraw/renderer/renderElement.js

@@ -6,10 +6,11 @@ import rough from "roughjs/bin/rough";
 import { getDefaultAppState } from "../appState";
 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 { getBoundTextElement, getContainerCoords, getContainerElement, getLineHeightInPx, getBoundTextMaxHeight, getBoundTextMaxWidth, } from "../element/textElement";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { getContainingFrame } from "../frame";
 import { ShapeCache } from "../scene/ShapeCache";
+import { getVerticalOffset } from "../fonts";
 // using a stronger invert (100% vs our regular 93%) and saturate
 // as a temp hack to make images in dark theme look closer to original
 // color scheme (it's still not quite there and the colors look slightly
@@ -24,7 +25,16 @@ const shouldResetImageFilter = (element, renderConfig, appState) => {
         !isPendingImageElement(element, renderConfig) &&
         renderConfig.imageCache.get(element.fileId)?.mimeType !== MIME_TYPES.svg);
 };
-const getCanvasPadding = (element) => element.type === "freedraw" ? element.strokeWidth * 12 : 20;
+const getCanvasPadding = (element) => {
+    switch (element.type) {
+        case "freedraw":
+            return element.strokeWidth * 12;
+        case "text":
+            return element.fontSize / 2;
+        default:
+            return 20;
+    }
+};
 export const getRenderOpacity = (element, containingFrame, elementsPendingErasure) => {
     // multiplying frame opacity with element opacity to combine them
     // (e.g. frame 50% and element 50% opacity should result in 25% opacity)
@@ -78,7 +88,7 @@ const generateElementCanvas = (element, elementsMap, zoom, renderConfig, appStat
     const { width, height, scale } = cappedElementCanvasSize(element, elementsMap, zoom);
     canvas.width = width;
     canvas.height = height;
-    let canvasOffsetX = 0;
+    let canvasOffsetX = -100;
     let canvasOffsetY = 0;
     if (isLinearElement(element) || isFreeDrawElement(element)) {
         const [x1, y1] = getElementAbsoluteCoords(element, elementsMap);
@@ -102,6 +112,45 @@ const generateElementCanvas = (element, elementsMap, zoom, renderConfig, appStat
     }
     drawElementOnCanvas(element, rc, context, renderConfig, appState);
     context.restore();
+    const boundTextElement = getBoundTextElement(element, elementsMap);
+    const boundTextCanvas = document.createElement("canvas");
+    const boundTextCanvasContext = boundTextCanvas.getContext("2d");
+    if (isArrowElement(element) && boundTextElement) {
+        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
+        // Take max dimensions of arrow canvas so that when canvas is rotated
+        // the arrow doesn't get clipped
+        const maxDim = Math.max(distance(x1, x2), distance(y1, y2));
+        boundTextCanvas.width =
+            maxDim * window.devicePixelRatio * scale + padding * scale * 10;
+        boundTextCanvas.height =
+            maxDim * window.devicePixelRatio * scale + padding * scale * 10;
+        boundTextCanvasContext.translate(boundTextCanvas.width / 2, boundTextCanvas.height / 2);
+        boundTextCanvasContext.rotate(element.angle);
+        boundTextCanvasContext.drawImage(canvas, -canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);
+        const [, , , , boundTextCx, boundTextCy] = getElementAbsoluteCoords(boundTextElement, elementsMap);
+        boundTextCanvasContext.rotate(-element.angle);
+        const offsetX = (boundTextCanvas.width - canvas.width) / 2;
+        const offsetY = (boundTextCanvas.height - canvas.height) / 2;
+        const shiftX = boundTextCanvas.width / 2 -
+            (boundTextCx - x1) * window.devicePixelRatio * scale -
+            offsetX -
+            padding * scale;
+        const shiftY = boundTextCanvas.height / 2 -
+            (boundTextCy - y1) * window.devicePixelRatio * scale -
+            offsetY -
+            padding * scale;
+        boundTextCanvasContext.translate(-shiftX, -shiftY);
+        // Clear the bound text area
+        boundTextCanvasContext.clearRect(-(boundTextElement.width / 2 + BOUND_TEXT_PADDING) *
+            window.devicePixelRatio *
+            scale, -(boundTextElement.height / 2 + BOUND_TEXT_PADDING) *
+            window.devicePixelRatio *
+            scale, (boundTextElement.width + BOUND_TEXT_PADDING * 2) *
+            window.devicePixelRatio *
+            scale, (boundTextElement.height + BOUND_TEXT_PADDING * 2) *
+            window.devicePixelRatio *
+            scale);
+    }
     return {
         element,
         canvas,
@@ -112,6 +161,8 @@ const generateElementCanvas = (element, elementsMap, zoom, renderConfig, appStat
         canvasOffsetY,
         boundTextElementVersion: getBoundTextElement(element, elementsMap)?.version || null,
         containingFrameOpacity: getContainingFrame(element, elementsMap)?.opacity || 100,
+        boundTextCanvas,
+        angle: element.angle,
     };
 };
 export const DEFAULT_LINK_SIZE = 14;
@@ -224,13 +275,21 @@ const generateElementWithCanvas = (element, elementsMap, renderConfig, appState)
     const shouldRegenerateBecauseZoom = prevElementWithCanvas &&
         prevElementWithCanvas.zoomValue !== zoom.value &&
         !appState?.shouldCacheIgnoreZoom;
-    const boundTextElementVersion = getBoundTextElement(element, elementsMap)?.version || null;
+    const boundTextElement = getBoundTextElement(element, elementsMap);
+    const boundTextElementVersion = boundTextElement?.version || null;
     const containingFrameOpacity = getContainingFrame(element, elementsMap)?.opacity || 100;
     if (!prevElementWithCanvas ||
         shouldRegenerateBecauseZoom ||
         prevElementWithCanvas.theme !== appState.theme ||
         prevElementWithCanvas.boundTextElementVersion !== boundTextElementVersion ||
-        prevElementWithCanvas.containingFrameOpacity !== containingFrameOpacity) {
+        prevElementWithCanvas.containingFrameOpacity !== containingFrameOpacity ||
+        // since we rotate the canvas when copying from cached canvas, we don't
+        // regenerate the cached canvas. But we need to in case of labels which are
+        // cached alongside the arrow, and we want the labels to remain unrotated
+        // with respect to the arrow.
+        (isArrowElement(element) &&
+            boundTextElement &&
+            element.angle !== prevElementWithCanvas.angle)) {
         const elementWithCanvas = generateElementCanvas(element, elementsMap, zoom, renderConfig, appState);
         elementWithCanvasCache.set(element, elementWithCanvas);
         return elementWithCanvas;
@@ -241,60 +300,21 @@ const drawElementFromCanvas = (elementWithCanvas, context, renderConfig, appStat
     const element = elementWithCanvas.element;
     const padding = getCanvasPadding(element);
     const zoom = elementWithCanvas.scale;
-    let [x1, y1, x2, y2] = getElementAbsoluteCoords(element, allElementsMap);
-    // Free draw elements will otherwise "shuffle" as the min x and y change
-    if (isFreeDrawElement(element)) {
-        x1 = Math.floor(x1);
-        x2 = Math.ceil(x2);
-        y1 = Math.floor(y1);
-        y2 = Math.ceil(y2);
-    }
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, allElementsMap);
     const cx = ((x1 + x2) / 2 + appState.scrollX) * window.devicePixelRatio;
     const cy = ((y1 + y2) / 2 + appState.scrollY) * window.devicePixelRatio;
     context.save();
     context.scale(1 / window.devicePixelRatio, 1 / window.devicePixelRatio);
     const boundTextElement = getBoundTextElement(element, allElementsMap);
     if (isArrowElement(element) && boundTextElement) {
-        const tempCanvas = document.createElement("canvas");
-        const tempCanvasContext = tempCanvas.getContext("2d");
-        // Take max dimensions of arrow canvas so that when canvas is rotated
-        // the arrow doesn't get clipped
-        const maxDim = Math.max(distance(x1, x2), distance(y1, y2));
-        tempCanvas.width =
-            maxDim * window.devicePixelRatio * zoom +
-                padding * elementWithCanvas.scale * 10;
-        tempCanvas.height =
-            maxDim * window.devicePixelRatio * zoom +
-                padding * elementWithCanvas.scale * 10;
-        const offsetX = (tempCanvas.width - elementWithCanvas.canvas.width) / 2;
-        const offsetY = (tempCanvas.height - elementWithCanvas.canvas.height) / 2;
-        tempCanvasContext.translate(tempCanvas.width / 2, tempCanvas.height / 2);
-        tempCanvasContext.rotate(element.angle);
-        tempCanvasContext.drawImage(elementWithCanvas.canvas, -elementWithCanvas.canvas.width / 2, -elementWithCanvas.canvas.height / 2, elementWithCanvas.canvas.width, elementWithCanvas.canvas.height);
-        const [, , , , boundTextCx, boundTextCy] = getElementAbsoluteCoords(boundTextElement, allElementsMap);
-        tempCanvasContext.rotate(-element.angle);
-        // Shift the canvas to the center of the bound text element
-        const shiftX = tempCanvas.width / 2 -
-            (boundTextCx - x1) * window.devicePixelRatio * zoom -
-            offsetX -
-            padding * zoom;
-        const shiftY = tempCanvas.height / 2 -
-            (boundTextCy - y1) * window.devicePixelRatio * zoom -
-            offsetY -
-            padding * zoom;
-        tempCanvasContext.translate(-shiftX, -shiftY);
-        // Clear the bound text area
-        tempCanvasContext.clearRect(-(boundTextElement.width / 2 + BOUND_TEXT_PADDING) *
-            window.devicePixelRatio *
-            zoom, -(boundTextElement.height / 2 + BOUND_TEXT_PADDING) *
-            window.devicePixelRatio *
-            zoom, (boundTextElement.width + BOUND_TEXT_PADDING * 2) *
-            window.devicePixelRatio *
-            zoom, (boundTextElement.height + BOUND_TEXT_PADDING * 2) *
-            window.devicePixelRatio *
-            zoom);
+        const offsetX = (elementWithCanvas.boundTextCanvas.width -
+            elementWithCanvas.canvas.width) /
+            2;
+        const offsetY = (elementWithCanvas.boundTextCanvas.height -
+            elementWithCanvas.canvas.height) /
+            2;
         context.translate(cx, cy);
-        context.drawImage(tempCanvas, (-(x2 - x1) / 2) * window.devicePixelRatio - offsetX / zoom - padding, (-(y2 - y1) / 2) * window.devicePixelRatio - offsetY / zoom - padding, tempCanvas.width / zoom, tempCanvas.height / zoom);
+        context.drawImage(elementWithCanvas.boundTextCanvas, (-(x2 - x1) / 2) * window.devicePixelRatio - offsetX / zoom - padding, (-(y2 - y1) / 2) * window.devicePixelRatio - offsetY / zoom - padding, elementWithCanvas.boundTextCanvas.width / zoom, elementWithCanvas.boundTextCanvas.height / zoom);
     }
     else {
         // we translate context to element center so that rotation and scale
@@ -386,7 +406,7 @@ export const renderElement = (element, elementsMap, allElementsMap, rc, context,
                 context.restore();
             }
             else {
-                const elementWithCanvas = generateElementWithCanvas(element, elementsMap, renderConfig, appState);
+                const elementWithCanvas = generateElementWithCanvas(element, allElementsMap, renderConfig, appState);
                 drawElementFromCanvas(elementWithCanvas, context, renderConfig, appState, allElementsMap);
             }
             break;
@@ -470,7 +490,7 @@ export const renderElement = (element, elementsMap, allElementsMap, rc, context,
                 // canvases)
             }
             else {
-                const elementWithCanvas = generateElementWithCanvas(element, elementsMap, renderConfig, appState);
+                const elementWithCanvas = generateElementWithCanvas(element, allElementsMap, renderConfig, appState);
                 const currentImageSmoothingStatus = context.imageSmoothingEnabled;
                 if (
                 // do not disable smoothing during zoom as blurry shapes look better

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);

package/dist/excalidraw/scene/Scene.js

@@ -170,9 +170,15 @@ class Scene {
             ? 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));
+        if (import.meta.env.DEV ||
+            import.meta.env.MODE === ENV.TEST ||
+            window?.DEBUG_FRACTIONAL_INDICES) {
+            validateFractionalIndices(_nextElements, {
+                // validate everything
+                includeBoundTextValidation: true,
+                // throw only in dev & test, to remain functional on `DEBUG_FRACTIONAL_INDICES`
+                shouldThrow: import.meta.env.DEV || import.meta.env.MODE === ENV.TEST,
+            });
         }
         this.elements = syncInvalidIndices(_nextElements);
         this.elementsMap.clear();

package/dist/excalidraw/scene/Shape.js

@@ -1,10 +1,10 @@
 import { getDiamondPoints, getArrowheadPoints } from "../element";
-import { isPathALoop, getCornerRadius } from "../math";
+import { isPathALoop, getCornerRadius, distanceSq2d } from "../math";
 import { generateFreeDrawShape } from "../renderer/renderElement";
 import { isTransparent, assertNever } from "../utils";
 import { simplify } from "points-on-curve";
 import { ROUGHNESS } from "../constants";
-import { isEmbeddableElement, isIframeElement, isIframeLikeElement, isLinearElement, } from "../element/typeChecks";
+import { isElbowArrow, isEmbeddableElement, isIframeElement, isIframeLikeElement, isLinearElement, } from "../element/typeChecks";
 import { canChangeRoundness } from "./comparisons";
 const getDashArrayDashed = (strokeWidth) => [8, 8 + strokeWidth];
 const getDashArrayDotted = (strokeWidth) => [1.5, 6 + strokeWidth];
@@ -261,9 +261,14 @@ export const _generateElementShape = (element, generator, { isExporting, canvasB
             // points array can be empty in the beginning, so it is important to add
             // initial position to it
             const points = element.points.length ? element.points : [[0, 0]];
-            // curve is always the first element
-            // this simplifies finding the curve for an element
-            if (!element.roundness) {
+            if (isElbowArrow(element)) {
+                shape = [
+                    generator.path(generateElbowArrowShape(points, 16), generateRoughOptions(element, true)),
+                ];
+            }
+            else if (!element.roundness) {
+                // curve is always the first element
+                // this simplifies finding the curve for an element
                 if (options.fill) {
                     shape = [generator.polygon(points, options)];
                 }
@@ -322,3 +327,49 @@ export const _generateElementShape = (element, generator, { isExporting, canvasB
         }
     }
 };
+const generateElbowArrowShape = (points, radius) => {
+    const subpoints = [];
+    for (let i = 1; i < points.length - 1; i += 1) {
+        const prev = points[i - 1];
+        const next = points[i + 1];
+        const corner = Math.min(radius, Math.sqrt(distanceSq2d(points[i], next)) / 2, Math.sqrt(distanceSq2d(points[i], prev)) / 2);
+        if (prev[0] < points[i][0] && prev[1] === points[i][1]) {
+            // LEFT
+            subpoints.push([points[i][0] - corner, points[i][1]]);
+        }
+        else if (prev[0] === points[i][0] && prev[1] < points[i][1]) {
+            // UP
+            subpoints.push([points[i][0], points[i][1] - corner]);
+        }
+        else if (prev[0] > points[i][0] && prev[1] === points[i][1]) {
+            // RIGHT
+            subpoints.push([points[i][0] + corner, points[i][1]]);
+        }
+        else {
+            subpoints.push([points[i][0], points[i][1] + corner]);
+        }
+        subpoints.push(points[i]);
+        if (next[0] < points[i][0] && next[1] === points[i][1]) {
+            // LEFT
+            subpoints.push([points[i][0] - corner, points[i][1]]);
+        }
+        else if (next[0] === points[i][0] && next[1] < points[i][1]) {
+            // UP
+            subpoints.push([points[i][0], points[i][1] - corner]);
+        }
+        else if (next[0] > points[i][0] && next[1] === points[i][1]) {
+            // RIGHT
+            subpoints.push([points[i][0] + corner, points[i][1]]);
+        }
+        else {
+            subpoints.push([points[i][0], points[i][1] + corner]);
+        }
+    }
+    const d = [`M ${points[0][0]} ${points[0][1]}`];
+    for (let i = 0; i < subpoints.length; i += 3) {
+        d.push(`L ${subpoints[i][0]} ${subpoints[i][1]}`);
+        d.push(`Q ${subpoints[i + 1][0]} ${subpoints[i + 1][1]}, ${subpoints[i + 2][0]} ${subpoints[i + 2][1]}`);
+    }
+    d.push(`L ${points[points.length - 1][0]} ${points[points.length - 1][1]}`);
+    return d.join(" ");
+};

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

@@ -5,6 +5,7 @@ export declare const hasStrokeColor: (type: ElementOrToolType) => boolean;
 export declare const hasStrokeWidth: (type: ElementOrToolType) => boolean;
 export declare const hasStrokeStyle: (type: ElementOrToolType) => boolean;
 export declare const canChangeRoundness: (type: ElementOrToolType) => boolean;
+export declare const toolIsArrow: (type: ElementOrToolType) => boolean;
 export declare const canHaveArrowheads: (type: ElementOrToolType) => boolean;
 export declare const getElementAtPosition: (elements: readonly NonDeletedExcalidrawElement[], isAtPositionFn: (element: NonDeletedExcalidrawElement) => boolean) => NonDeletedExcalidrawElement | null;
 export declare const getElementsAtPosition: (elements: readonly NonDeletedExcalidrawElement[], isAtPositionFn: (element: NonDeletedExcalidrawElement) => boolean) => NonDeletedExcalidrawElement[];

package/dist/excalidraw/scene/comparisons.js

@@ -25,10 +25,10 @@ export const hasStrokeStyle = (type) => type === "rectangle" ||
 export const canChangeRoundness = (type) => type === "rectangle" ||
     type === "iframe" ||
     type === "embeddable" ||
-    type === "arrow" ||
     type === "line" ||
     type === "diamond" ||
     type === "image";
+export const toolIsArrow = (type) => type === "arrow";
 export const canHaveArrowheads = (type) => type === "arrow";
 export const getElementAtPosition = (elements, isAtPositionFn) => {
     let hitElement = null;

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

@@ -8,7 +8,7 @@ export declare const exportToCanvas: (elements: readonly NonDeletedExcalidrawEle
 }, createCanvas?: (width: number, height: number) => {
     canvas: HTMLCanvasElement;
     scale: number;
-}) => Promise<HTMLCanvasElement>;
+}, loadFonts?: () => Promise<void>) => Promise<HTMLCanvasElement>;
 export declare const exportToSvg: (elements: readonly NonDeletedExcalidrawElement[], appState: {
     exportBackground: boolean;
     exportPadding?: number;
@@ -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

@@ -2,16 +2,17 @@ import rough from "roughjs/bin/rough";
 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, 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 { isFrameLikeElement, isTextElement } from "../element/typeChecks";
 import { syncInvalidIndices } from "../fractionalIndex";
 import { renderStaticScene } from "../renderer/staticScene";
+import { Fonts } from "../fonts";
 const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
 const truncateText = (element, maxWidth) => {
     if (element.width <= maxWidth) {
@@ -48,26 +49,18 @@ const truncateText = (element, maxWidth) => {
  */
 const addFrameLabelsAsTextElements = (elements, opts) => {
     const nextElements = [];
-    let frameIndex = 0;
-    let magicFrameIndex = 0;
     for (const element of elements) {
         if (isFrameLikeElement(element)) {
-            if (isFrameElement(element)) {
-                frameIndex++;
-            }
-            else {
-                magicFrameIndex++;
-            }
             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
                     ? FRAME_STYLE.nameColorDarkTheme
                     : FRAME_STYLE.nameColorLightTheme,
-                text: getFrameLikeTitle(element, isFrameElement(element) ? frameIndex : magicFrameIndex),
+                text: getFrameLikeTitle(element),
             });
             textElement.y -= textElement.height;
             textElement = truncateText(textElement, element.width);
@@ -106,7 +99,11 @@ export const exportToCanvas = async (elements, appState, files, { exportBackgrou
     canvas.width = width * appState.exportScale;
     canvas.height = height * appState.exportScale;
     return { canvas, scale: appState.exportScale };
+}, loadFonts = async () => {
+    await Fonts.loadFontsForElements(elements);
 }) => {
+    // load font faces before continuing, by default leverages browsers' [FontFace API](https://developer.mozilla.org/en-US/docs/Web/API/FontFace)
+    await loadFonts();
     const frameRendering = getFrameRenderingConfig(exportingFrame ?? null, appState.frameRendering ?? null);
     const elementsForRender = prepareElementsForRender({
         elements,
@@ -195,17 +192,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.VITE_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);
@@ -223,23 +209,35 @@ 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 { fonts, metadata } = Fonts.registered.get(x) ?? {};
+            if (!Array.isArray(fonts)) {
+                console.error(`Couldn't find registered fonts for font-family "${x}"`, Fonts.registered);
+                return;
+            }
+            if (metadata?.local) {
+                // don't inline local fonts
+                return;
+            }
+            return Promise.all(fonts.map(async (font) => `@font-face {
+        font-family: ${font.fontFace.family};
+        src: url(${await font.getContent()});
+          }`));
+        }));
     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/types.d.ts

@@ -1,6 +1,6 @@
 import type { RoughCanvas } from "roughjs/bin/canvas";
 import type { Drawable } from "roughjs/bin/core";
-import type { ExcalidrawElement, ExcalidrawTextElement, NonDeletedElementsMap, NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "../element/types";
+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">;
@@ -67,9 +67,6 @@ 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/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,9 @@ 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;
+export declare const getBoundTextShape: (element: ExcalidrawElement, elementsMap: ElementsMap) => GeometricShape | null;

package/dist/excalidraw/shapes.js

@@ -1,5 +1,11 @@
+import { getClosedCurveShape, getCurveShape, getEllipseShape, getFreedrawShape, getPolygonShape, } from "../utils/geometry/shape";
 import { ArrowIcon, DiamondIcon, EllipseIcon, EraserIcon, FreedrawIcon, ImageIcon, LineIcon, RectangleIcon, SelectionIcon, TextIcon, } from "./components/icons";
+import { getElementAbsoluteCoords } from "./element";
+import { shouldTestInside } from "./element/collision";
+import { LinearElementEditor } from "./element/linearElementEditor";
+import { getBoundTextElement } from "./element/textElement";
 import { KEYS } from "./keys";
+import { ShapeCache } from "./scene/ShapeCache";
 export const SHAPES = [
     {
         icon: SelectionIcon,
@@ -82,3 +88,54 @@ export const findShapeByKey = (key) => {
     });
     return shape?.value || null;
 };
+/**
+ * get the pure geometric shape of an excalidraw element
+ * which is then used for hit detection
+ */
+export const getElementShape = (element, elementsMap) => {
+    switch (element.type) {
+        case "rectangle":
+        case "diamond":
+        case "frame":
+        case "magicframe":
+        case "embeddable":
+        case "image":
+        case "iframe":
+        case "text":
+        case "selection":
+            return getPolygonShape(element);
+        case "arrow":
+        case "line": {
+            const roughShape = ShapeCache.get(element)?.[0] ??
+                ShapeCache.generateElementShape(element, null)[0];
+            const [, , , , cx, cy] = getElementAbsoluteCoords(element, elementsMap);
+            return shouldTestInside(element)
+                ? getClosedCurveShape(element, roughShape, [element.x, element.y], element.angle, [cx, cy])
+                : getCurveShape(roughShape, [element.x, element.y], element.angle, [
+                    cx,
+                    cy,
+                ]);
+        }
+        case "ellipse":
+            return getEllipseShape(element);
+        case "freedraw": {
+            const [, , , , cx, cy] = getElementAbsoluteCoords(element, elementsMap);
+            return getFreedrawShape(element, [cx, cy], shouldTestInside(element));
+        }
+    }
+};
+export const getBoundTextShape = (element, elementsMap) => {
+    const boundTextElement = getBoundTextElement(element, elementsMap);
+    if (boundTextElement) {
+        if (element.type === "arrow") {
+            return getElementShape({
+                ...boundTextElement,
+                // arrow's bound text accurate position is not stored in the element's property
+                // but rather calculated and returned from the following static method
+                ...LinearElementEditor.getBoundTextElementPosition(element, boundTextElement, elementsMap),
+            }, elementsMap);
+        }
+        return getElementShape(boundTextElement, elementsMap);
+    }
+    return null;
+};

package/dist/excalidraw/types.d.ts

@@ -119,6 +119,7 @@ export type StaticCanvasAppState = Readonly<_CommonCanvasAppState & {
     selectedElementsAreBeingDragged: AppState["selectedElementsAreBeingDragged"];
     gridSize: AppState["gridSize"];
     frameRendering: AppState["frameRendering"];
+    currentHoveredFontFamily: AppState["currentHoveredFontFamily"];
 }>;
 export type InteractiveCanvasAppState = Readonly<_CommonCanvasAppState & {
     activeEmbeddable: AppState["activeEmbeddable"];
@@ -205,7 +206,9 @@ export interface AppState {
     currentItemTextAlign: TextAlign;
     currentItemStartArrowhead: Arrowhead | null;
     currentItemEndArrowhead: Arrowhead | null;
+    currentHoveredFontFamily: FontFamilyValues | null;
     currentItemRoundness: StrokeRoundness;
+    currentItemArrowType: "sharp" | "round" | "elbow";
     viewBackgroundColor: string;
     scrollX: number;
     scrollY: number;
@@ -216,7 +219,7 @@ export interface AppState {
     isRotating: boolean;
     zoom: Zoom;
     openMenu: "canvas" | "shape" | null;
-    openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+    openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | null;
     openSidebar: {
         name: SidebarName;
         tab?: SidebarTabName;
@@ -350,7 +353,7 @@ export type OnUserFollowedPayload = {
 };
 export interface ExcalidrawProps {
     onChange?: (elements: readonly OrderedExcalidrawElement[], appState: AppState, files: BinaryFiles) => void;
-    initialData?: MaybePromise<ExcalidrawInitialDataState | null>;
+    initialData?: (() => MaybePromise<ExcalidrawInitialDataState | null>) | MaybePromise<ExcalidrawInitialDataState | null>;
     excalidrawAPI?: (api: ExcalidrawImperativeAPI) => void;
     isCollaborating?: boolean;
     onPointerUpdate?: (payload: {
@@ -390,6 +393,7 @@ export interface ExcalidrawProps {
     validateEmbeddable?: boolean | string[] | RegExp | RegExp[] | ((link: string) => boolean | undefined);
     renderEmbeddable?: (element: NonDeleted<ExcalidrawEmbeddableElement>, appState: AppState) => JSX.Element | null;
     aiEnabled?: boolean;
+    showDeprecatedFonts?: boolean;
 }
 export type SceneData = {
     elements?: ImportedDataState["elements"];
@@ -454,6 +458,7 @@ export type AppClassProperties = {
     device: App["device"];
     scene: App["scene"];
     syncActionResult: App["syncActionResult"];
+    fonts: App["fonts"];
     pasteFromClipboard: App["pasteFromClipboard"];
     id: App["id"];
     onInsertElements: App["onInsertElements"];
@@ -468,8 +473,8 @@ export type AppClassProperties = {
     setOpenDialog: App["setOpenDialog"];
     insertEmbeddableElement: App["insertEmbeddableElement"];
     onMagicframeToolSelect: App["onMagicframeToolSelect"];
-    getElementShape: App["getElementShape"];
     getName: App["getName"];
+    dismissLinearEditor: App["dismissLinearEditor"];
 };
 export type PointerDownState = Readonly<{
     origin: Readonly<{