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

package/dist/excalidraw/element/textElement.js

@@ -1,7 +1,6 @@
-import { getFontString, arrayToMap, isTestEnv } from "../utils";
+import { getFontString, arrayToMap, isTestEnv, normalizeEOL } from "../utils";
 import { mutateElement } from "./mutateElement";
-import { ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO, ARROW_LABEL_WIDTH_FRACTION, BOUND_TEXT_PADDING, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, FONT_FAMILY, isSafari, TEXT_ALIGN, VERTICAL_ALIGN, } from "../constants";
-import Scene from "../scene/Scene";
+import { ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO, ARROW_LABEL_WIDTH_FRACTION, BOUND_TEXT_PADDING, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, FONT_FAMILY, TEXT_ALIGN, VERTICAL_ALIGN, } from "../constants";
 import { isTextElement } from ".";
 import { isBoundToContainer, isArrowElement } from "./typeChecks";
 import { LinearElementEditor } from "./linearElementEditor";
@@ -9,18 +8,16 @@ import { isTextBindableContainer } from "./typeChecks";
 import { getElementAbsoluteCoords } from ".";
 import { getSelectedElements } from "../scene";
 import { isHittingElementNotConsideringBoundingBox } from "./collision";
-import { resetOriginalContainerCache, updateOriginalContainerCache, } from "./textWysiwyg";
+import { resetOriginalContainerCache, updateOriginalContainerCache, } from "./containerCache";
 export const normalizeText = (text) => {
-    return (text
+    return (normalizeEOL(text)
         // replace tabs with spaces so they render and measure correctly
-        .replace(/\t/g, "        ")
-        // normalize newlines
-        .replace(/\r?\n|\r/g, "\n"));
+        .replace(/\t/g, "        "));
 };
-export const splitIntoLines = (text) => {
+const splitIntoLines = (text) => {
     return normalizeText(text).split("\n");
 };
-export const redrawTextBoundingBox = (textElement, container) => {
+export const redrawTextBoundingBox = (textElement, container, elementsMap) => {
     let maxWidth = undefined;
     const boundTextUpdates = {
         x: textElement.x,
@@ -28,7 +25,6 @@ export const redrawTextBoundingBox = (textElement, container) => {
         text: textElement.text,
         width: textElement.width,
         height: textElement.height,
-        baseline: textElement.baseline,
     };
     boundTextUpdates.text = textElement.text;
     if (container) {
@@ -38,10 +34,9 @@ export const redrawTextBoundingBox = (textElement, container) => {
     const metrics = measureText(boundTextUpdates.text, getFontString(textElement), textElement.lineHeight);
     boundTextUpdates.width = metrics.width;
     boundTextUpdates.height = metrics.height;
-    boundTextUpdates.baseline = metrics.baseline;
     if (container) {
         const maxContainerHeight = getBoundTextMaxHeight(container, textElement);
-        const maxContainerWidth = getBoundTextMaxWidth(container);
+        const maxContainerWidth = getBoundTextMaxWidth(container, textElement);
         if (!isArrowElement(container) && metrics.height > maxContainerHeight) {
             const nextHeight = computeContainerDimensionForBoundText(metrics.height, container.type);
             mutateElement(container, { height: nextHeight });
@@ -55,21 +50,21 @@ export const redrawTextBoundingBox = (textElement, container) => {
             ...textElement,
             ...boundTextUpdates,
         };
-        const { x, y } = computeBoundTextPosition(container, updatedTextElement);
+        const { x, y } = computeBoundTextPosition(container, updatedTextElement, elementsMap);
         boundTextUpdates.x = x;
         boundTextUpdates.y = y;
     }
     mutateElement(textElement, boundTextUpdates);
 };
-export const bindTextToShapeAfterDuplication = (sceneElements, oldElements, oldIdToDuplicatedId) => {
-    const sceneElementMap = arrayToMap(sceneElements);
+export const bindTextToShapeAfterDuplication = (newElements, oldElements, oldIdToDuplicatedId) => {
+    const newElementsMap = arrayToMap(newElements);
     oldElements.forEach((element) => {
         const newElementId = oldIdToDuplicatedId.get(element.id);
         const boundTextElementId = getBoundTextElementId(element);
         if (boundTextElementId) {
             const newTextElementId = oldIdToDuplicatedId.get(boundTextElementId);
             if (newTextElementId) {
-                const newContainer = sceneElementMap.get(newElementId);
+                const newContainer = newElementsMap.get(newElementId);
                 if (newContainer) {
                     mutateElement(newContainer, {
                         boundElements: (element.boundElements || [])
@@ -81,7 +76,7 @@ export const bindTextToShapeAfterDuplication = (sceneElements, oldElements, oldI
                         }),
                     });
                 }
-                const newTextElement = sceneElementMap.get(newTextElementId);
+                const newTextElement = newElementsMap.get(newTextElementId);
                 if (newTextElement && isTextElement(newTextElement)) {
                     mutateElement(newTextElement, {
                         containerId: newContainer ? newElementId : null,
@@ -91,25 +86,23 @@ export const bindTextToShapeAfterDuplication = (sceneElements, oldElements, oldI
         }
     });
 };
-export const handleBindTextResize = (container, transformHandleType, shouldMaintainAspectRatio = false) => {
+export const handleBindTextResize = (container, elementsMap, transformHandleType, shouldMaintainAspectRatio = false) => {
     const boundTextElementId = getBoundTextElementId(container);
     if (!boundTextElementId) {
         return;
     }
     resetOriginalContainerCache(container.id);
-    let textElement = Scene.getScene(container).getElement(boundTextElementId);
+    const textElement = getBoundTextElement(container, elementsMap);
     if (textElement && textElement.text) {
         if (!container) {
             return;
         }
-        textElement = Scene.getScene(container).getElement(boundTextElementId);
         let text = textElement.text;
         let nextHeight = textElement.height;
         let nextWidth = textElement.width;
-        const maxWidth = getBoundTextMaxWidth(container);
+        const maxWidth = getBoundTextMaxWidth(container, textElement);
         const maxHeight = getBoundTextMaxHeight(container, textElement);
         let containerHeight = container.height;
-        let nextBaseLine = textElement.baseline;
         if (shouldMaintainAspectRatio ||
             (transformHandleType !== "n" && transformHandleType !== "s")) {
             if (text) {
@@ -118,7 +111,6 @@ export const handleBindTextResize = (container, transformHandleType, shouldMaint
             const metrics = measureText(text, getFontString(textElement), textElement.lineHeight);
             nextHeight = metrics.height;
             nextWidth = metrics.width;
-            nextBaseLine = metrics.baseline;
         }
         // increase height in case text element height exceeds
         if (nextHeight > maxHeight) {
@@ -140,20 +132,19 @@ export const handleBindTextResize = (container, transformHandleType, shouldMaint
             text,
             width: nextWidth,
             height: nextHeight,
-            baseline: nextBaseLine,
         });
         if (!isArrowElement(container)) {
-            mutateElement(textElement, computeBoundTextPosition(container, textElement));
+            mutateElement(textElement, computeBoundTextPosition(container, textElement, elementsMap));
         }
     }
 };
-export const computeBoundTextPosition = (container, boundTextElement) => {
+export const computeBoundTextPosition = (container, boundTextElement, elementsMap) => {
     if (isArrowElement(container)) {
-        return LinearElementEditor.getBoundTextElementPosition(container, boundTextElement);
+        return LinearElementEditor.getBoundTextElementPosition(container, boundTextElement, elementsMap);
     }
     const containerCoords = getContainerCoords(container);
     const maxContainerHeight = getBoundTextMaxHeight(container, boundTextElement);
-    const maxContainerWidth = getBoundTextMaxWidth(container);
+    const maxContainerWidth = getBoundTextMaxWidth(container, boundTextElement);
     let x;
     let y;
     if (boundTextElement.verticalAlign === VERTICAL_ALIGN.TOP) {
@@ -179,7 +170,6 @@ export const computeBoundTextPosition = (container, boundTextElement) => {
     }
     return { x, y };
 };
-// https://github.com/grassator/canvas-text-editor/blob/master/lib/FontMetrics.js
 export const measureText = (text, font, lineHeight) => {
     text = text
         .split("\n")
@@ -190,47 +180,7 @@ export const measureText = (text, font, lineHeight) => {
     const fontSize = parseFloat(font);
     const height = getTextHeight(text, fontSize, lineHeight);
     const width = getTextWidth(text, font);
-    const baseline = measureBaseline(text, font, lineHeight);
-    return { width, height, baseline };
-};
-export const measureBaseline = (text, font, lineHeight, wrapInContainer) => {
-    const container = document.createElement("div");
-    container.style.position = "absolute";
-    container.style.whiteSpace = "pre";
-    container.style.font = font;
-    container.style.minHeight = "1em";
-    if (wrapInContainer) {
-        container.style.overflow = "hidden";
-        container.style.wordBreak = "break-word";
-        container.style.whiteSpace = "pre-wrap";
-    }
-    container.style.lineHeight = String(lineHeight);
-    container.innerText = text;
-    // Baseline is important for positioning text on canvas
-    document.body.appendChild(container);
-    const span = document.createElement("span");
-    span.style.display = "inline-block";
-    span.style.overflow = "hidden";
-    span.style.width = "1px";
-    span.style.height = "1px";
-    container.appendChild(span);
-    let baseline = span.offsetTop + span.offsetHeight;
-    const height = container.offsetHeight;
-    if (isSafari) {
-        const canvasHeight = getTextHeight(text, parseFloat(font), lineHeight);
-        const fontSize = parseFloat(font);
-        // In Safari the font size gets rounded off when rendering hence calculating the safari height and shifting the baseline if it differs
-        // from the actual canvas height
-        const domHeight = getTextHeight(text, Math.round(fontSize), lineHeight);
-        if (canvasHeight > height) {
-            baseline += canvasHeight - domHeight;
-        }
-        if (height > canvasHeight) {
-            baseline -= domHeight - canvasHeight;
-        }
-    }
-    document.body.removeChild(container);
-    return baseline;
+    return { width, height };
 };
 /**
  * To get unitless line-height (if unknown) we can calculate it by dividing
@@ -249,6 +199,16 @@ export const detectLineHeight = (textElement) => {
 export const getLineHeightInPx = (fontSize, lineHeight) => {
     return fontSize * lineHeight;
 };
+/**
+ * Calculates vertical offset for a text with alphabetic baseline.
+ */
+export const getVerticalOffset = (fontFamily, fontSize, lineHeightPx) => {
+    const { unitsPerEm, ascender, descender } = FONT_METRICS[fontFamily] || FONT_METRICS[FONT_FAMILY.Helvetica];
+    const fontSizeEm = fontSize / unitsPerEm;
+    const lineGap = lineHeightPx - fontSizeEm * ascender + fontSizeEm * descender;
+    const verticalOffset = fontSizeEm * ascender + lineGap;
+    return verticalOffset;
+};
 // FIXME rename to getApproxMinContainerHeight
 export const getApproxMinLineHeight = (fontSize, lineHeight) => {
     return getLineHeightInPx(fontSize, lineHeight) + BOUND_TEXT_PADDING * 2;
@@ -486,42 +446,44 @@ export const getBoundTextElementId = (container) => {
             null
         : null;
 };
-export const getBoundTextElement = (element) => {
+export const getBoundTextElement = (element, elementsMap) => {
     if (!element) {
         return null;
     }
     const boundTextElementId = getBoundTextElementId(element);
     if (boundTextElementId) {
-        return (Scene.getScene(element)?.getElement(boundTextElementId) || null);
+        return (elementsMap.get(boundTextElementId) ||
+            null);
     }
     return null;
 };
-export const getContainerElement = (element) => {
+export const getContainerElement = (element, elementsMap) => {
     if (!element) {
         return null;
     }
     if (element.containerId) {
-        return Scene.getScene(element)?.getElement(element.containerId) || null;
+        return (elementsMap.get(element.containerId) ||
+            null);
     }
     return null;
 };
-export const getContainerCenter = (container, appState) => {
+export const getContainerCenter = (container, appState, elementsMap) => {
     if (!isArrowElement(container)) {
         return {
             x: container.x + container.width / 2,
             y: container.y + container.height / 2,
         };
     }
-    const points = LinearElementEditor.getPointsGlobalCoordinates(container);
+    const points = LinearElementEditor.getPointsGlobalCoordinates(container, elementsMap);
     if (points.length % 2 === 1) {
         const index = Math.floor(container.points.length / 2);
-        const midPoint = LinearElementEditor.getPointGlobalCoordinates(container, container.points[index]);
+        const midPoint = LinearElementEditor.getPointGlobalCoordinates(container, container.points[index], elementsMap);
         return { x: midPoint[0], y: midPoint[1] };
     }
     const index = container.points.length / 2 - 1;
-    let midSegmentMidpoint = LinearElementEditor.getEditorMidPoints(container, appState)[index];
+    let midSegmentMidpoint = LinearElementEditor.getEditorMidPoints(container, elementsMap, appState)[index];
     if (!midSegmentMidpoint) {
-        midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(container, points[index], points[index + 1], index + 1);
+        midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(container, points[index], points[index + 1], index + 1, elementsMap);
     }
     return { x: midSegmentMidpoint[0], y: midSegmentMidpoint[1] };
 };
@@ -543,34 +505,22 @@ export const getContainerCoords = (container) => {
         y: container.y + offsetY,
     };
 };
-export const getTextElementAngle = (textElement) => {
-    const container = getContainerElement(textElement);
+export const getTextElementAngle = (textElement, container) => {
     if (!container || isArrowElement(container)) {
         return textElement.angle;
     }
     return container.angle;
 };
-export const getBoundTextElementOffset = (boundTextElement) => {
-    const container = getContainerElement(boundTextElement);
-    if (!container || !boundTextElement) {
-        return 0;
-    }
+export const getBoundTextElementPosition = (container, boundTextElement, elementsMap) => {
     if (isArrowElement(container)) {
-        return BOUND_TEXT_PADDING * 8;
+        return LinearElementEditor.getBoundTextElementPosition(container, boundTextElement, elementsMap);
     }
-    return BOUND_TEXT_PADDING;
 };
-export const getBoundTextElementPosition = (container, boundTextElement) => {
-    if (isArrowElement(container)) {
-        return LinearElementEditor.getBoundTextElementPosition(container, boundTextElement);
-    }
-};
-export const shouldAllowVerticalAlign = (selectedElements) => {
+export const shouldAllowVerticalAlign = (selectedElements, elementsMap) => {
     return selectedElements.some((element) => {
-        const hasBoundContainer = isBoundToContainer(element);
-        if (hasBoundContainer) {
-            const container = getContainerElement(element);
-            if (isTextElement(element) && isArrowElement(container)) {
+        if (isBoundToContainer(element)) {
+            const container = getContainerElement(element, elementsMap);
+            if (isArrowElement(container)) {
                 return false;
             }
             return true;
@@ -578,12 +528,11 @@ export const shouldAllowVerticalAlign = (selectedElements) => {
         return false;
     });
 };
-export const suppportsHorizontalAlign = (selectedElements) => {
+export const suppportsHorizontalAlign = (selectedElements, elementsMap) => {
     return selectedElements.some((element) => {
-        const hasBoundContainer = isBoundToContainer(element);
-        if (hasBoundContainer) {
-            const container = getContainerElement(element);
-            if (isTextElement(element) && isArrowElement(container)) {
+        if (isBoundToContainer(element)) {
+            const container = getContainerElement(element, elementsMap);
+            if (isArrowElement(container)) {
                 return false;
             }
             return true;
@@ -591,7 +540,7 @@ export const suppportsHorizontalAlign = (selectedElements) => {
         return isTextElement(element);
     });
 };
-export const getTextBindableContainerAtPosition = (elements, appState, x, y) => {
+export const getTextBindableContainerAtPosition = (elements, appState, x, y, elementsMap) => {
     const selectedElements = getSelectedElements(elements, appState);
     if (selectedElements.length === 1) {
         return isTextBindableContainer(selectedElements[0], false)
@@ -604,9 +553,9 @@ export const getTextBindableContainerAtPosition = (elements, appState, x, y) =>
         if (elements[index].isDeleted) {
             continue;
         }
-        const [x1, y1, x2, y2] = getElementAbsoluteCoords(elements[index]);
+        const [x1, y1, x2, y2] = getElementAbsoluteCoords(elements[index], elementsMap);
         if (isArrowElement(elements[index]) &&
-            isHittingElementNotConsideringBoundingBox(elements[index], appState, null, [x, y])) {
+            isHittingElementNotConsideringBoundingBox(elements[index], appState, null, [x, y], elementsMap)) {
             hitElement = elements[index];
             break;
         }
@@ -638,7 +587,7 @@ export const computeContainerDimensionForBoundText = (dimension, containerType)
     }
     return dimension + padding;
 };
-export const getBoundTextMaxWidth = (container, boundTextElement = getBoundTextElement(container)) => {
+export const getBoundTextMaxWidth = (container, boundTextElement) => {
     const { width } = container;
     if (isArrowElement(container)) {
         const minWidth = (boundTextElement?.fontSize ?? DEFAULT_FONT_SIZE) *
@@ -702,12 +651,39 @@ const DEFAULT_LINE_HEIGHT = {
     // ~1.25 is the average for Virgil in WebKit and Blink.
     // Gecko (FF) uses ~1.28.
     [FONT_FAMILY.Virgil]: 1.25,
-    // ~1.15 is the average for Virgil in WebKit and Blink.
-    // Gecko if all over the place.
+    // ~1.15 is the average for Helvetica in WebKit and Blink.
     [FONT_FAMILY.Helvetica]: 1.15,
-    // ~1.2 is the average for Virgil in WebKit and Blink, and kinda Gecko too
+    // ~1.2 is the average for Cascadia in WebKit and Blink, and kinda Gecko too
     [FONT_FAMILY.Cascadia]: 1.2,
 };
+/**
+ * Hardcoded metrics for default fonts, read by https://opentype.js.org/font-inspector.html.
+ * For custom fonts, read these metrics from OS/2 table and extend this object.
+ *
+ * WARN: opentype does NOT open WOFF2 correctly, make sure to convert WOFF2 to TTF first.
+ */
+export const FONT_METRICS = {
+    [FONT_FAMILY.Virgil]: {
+        unitsPerEm: 1000,
+        ascender: 886,
+        descender: -374,
+    },
+    [FONT_FAMILY.Helvetica]: {
+        unitsPerEm: 2048,
+        ascender: 1577,
+        descender: -471,
+    },
+    [FONT_FAMILY.Cascadia]: {
+        unitsPerEm: 2048,
+        ascender: 1977,
+        descender: -480,
+    },
+    [FONT_FAMILY.Assistant]: {
+        unitsPerEm: 1000,
+        ascender: 1021,
+        descender: -287,
+    },
+};
 export const getDefaultLineHeight = (fontFamily) => {
     if (fontFamily in DEFAULT_LINE_HEIGHT) {
         return DEFAULT_LINE_HEIGHT[fontFamily];

package/dist/excalidraw/element/textWysiwyg.d.ts

@@ -1,10 +1,5 @@
-import { ExcalidrawElement, ExcalidrawTextElement, ExcalidrawTextContainer } from "./types";
+import { ExcalidrawElement, ExcalidrawTextElement } from "./types";
 import App from "../components/App";
-export declare const updateOriginalContainerCache: (id: ExcalidrawTextContainer["id"], height: ExcalidrawTextContainer["height"]) => {
-    height: ExcalidrawTextContainer["height"];
-};
-export declare const resetOriginalContainerCache: (id: ExcalidrawTextContainer["id"]) => void;
-export declare const getOriginalContainerHeightFromCache: (id: ExcalidrawTextContainer["id"]) => number | null;
 export declare const textWysiwyg: ({ id, onChange, onSubmit, getViewportCoords, element, canvas, excalidrawContainer, app, }: {
     id: ExcalidrawElement["id"];
     onChange?: ((text: string) => void) | undefined;

package/dist/excalidraw/element/textWysiwyg.js

@@ -2,13 +2,14 @@ import { CODES, KEYS } from "../keys";
 import { isWritableElement, getFontString, getFontFamilyString, isTestEnv, } from "../utils";
 import Scene from "../scene/Scene";
 import { isArrowElement, isBoundToContainer, isTextElement, } from "./typeChecks";
-import { CLASSES, isSafari } from "../constants";
+import { CLASSES } from "../constants";
 import { bumpVersion, mutateElement } from "./mutateElement";
-import { getBoundTextElementId, getContainerElement, getTextElementAngle, getTextWidth, normalizeText, redrawTextBoundingBox, wrapText, getBoundTextMaxHeight, getBoundTextMaxWidth, computeContainerDimensionForBoundText, detectLineHeight, computeBoundTextPosition, } from "./textElement";
+import { getBoundTextElementId, getContainerElement, getTextElementAngle, getTextWidth, normalizeText, redrawTextBoundingBox, wrapText, getBoundTextMaxHeight, getBoundTextMaxWidth, computeContainerDimensionForBoundText, computeBoundTextPosition, getBoundTextElement, } from "./textElement";
 import { actionDecreaseFontSize, actionIncreaseFontSize, } from "../actions/actionProperties";
 import { actionZoomIn, actionZoomOut } from "../actions/actionCanvas";
 import { LinearElementEditor } from "./linearElementEditor";
 import { parseClipboard } from "../clipboard";
+import { originalContainerCache, updateOriginalContainerCache, } from "./containerCache";
 const getTransform = (width, height, angle, appState, maxWidth, maxHeight) => {
     const { zoom } = appState;
     const degree = (180 * angle) / Math.PI;
@@ -22,20 +23,6 @@ const getTransform = (width, height, angle, appState, maxWidth, maxHeight) => {
     }
     return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)`;
 };
-const originalContainerCache = {};
-export const updateOriginalContainerCache = (id, height) => {
-    const data = originalContainerCache[id] || (originalContainerCache[id] = { height });
-    data.height = height;
-    return data;
-};
-export const resetOriginalContainerCache = (id) => {
-    if (originalContainerCache[id]) {
-        delete originalContainerCache[id];
-    }
-};
-export const getOriginalContainerHeightFromCache = (id) => {
-    return originalContainerCache[id]?.height ?? null;
-};
 export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element, canvas, excalidrawContainer, app, }) => {
     const textPropertiesUpdated = (updatedTextElement, editable) => {
         if (!editable.style.fontFamily || !editable.style.fontSize) {
@@ -58,10 +45,11 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
             return;
         }
         const { textAlign, verticalAlign } = updatedTextElement;
+        const elementsMap = app.scene.getNonDeletedElementsMap();
         if (updatedTextElement && isTextElement(updatedTextElement)) {
             let coordX = updatedTextElement.x;
             let coordY = updatedTextElement.y;
-            const container = getContainerElement(updatedTextElement);
+            const container = getContainerElement(updatedTextElement, app.scene.getNonDeletedElementsMap());
             let maxWidth = updatedTextElement.width;
             let maxHeight = updatedTextElement.height;
             let textElementWidth = updatedTextElement.width;
@@ -70,7 +58,7 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
             const textElementHeight = updatedTextElement.height;
             if (container && updatedTextElement.containerId) {
                 if (isArrowElement(container)) {
-                    const boundTextCoords = LinearElementEditor.getBoundTextElementPosition(container, updatedTextElement);
+                    const boundTextCoords = LinearElementEditor.getBoundTextElementPosition(container, updatedTextElement, elementsMap);
                     coordX = boundTextCoords.x;
                     coordY = boundTextCoords.y;
                 }
@@ -85,7 +73,7 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
                         originalContainerData = updateOriginalContainerCache(container.id, container.height);
                     }
                 }
-                maxWidth = getBoundTextMaxWidth(container);
+                maxWidth = getBoundTextMaxWidth(container, updatedTextElement);
                 maxHeight = getBoundTextMaxHeight(container, updatedTextElement);
                 // autogrow container height if text exceeds
                 if (!isArrowElement(container) && textElementHeight > maxHeight) {
@@ -103,7 +91,7 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
                     mutateElement(container, { height: targetContainerHeight });
                 }
                 else {
-                    const { y } = computeBoundTextPosition(container, updatedTextElement);
+                    const { y } = computeBoundTextPosition(container, updatedTextElement, elementsMap);
                     coordY = y;
                 }
             }
@@ -125,28 +113,17 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
                 maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value;
                 textElementWidth = Math.min(textElementWidth, maxWidth);
             }
-            else {
-                textElementWidth += 0.5;
-            }
-            let lineHeight = updatedTextElement.lineHeight;
-            // In Safari the font size gets rounded off when rendering hence calculating the line height by rounding off font size
-            if (isSafari) {
-                lineHeight = detectLineHeight({
-                    ...updatedTextElement,
-                    fontSize: Math.round(updatedTextElement.fontSize),
-                });
-            }
             // Make sure text editor height doesn't go beyond viewport
             const editorMaxHeight = (appState.height - viewportY) / appState.zoom.value;
             Object.assign(editable.style, {
                 font: getFontString(updatedTextElement),
                 // must be defined *after* font ¯\_(ツ)_/¯
-                lineHeight,
+                lineHeight: updatedTextElement.lineHeight,
                 width: `${textElementWidth}px`,
                 height: `${textElementHeight}px`,
                 left: `${viewportX}px`,
                 top: `${viewportY}px`,
-                transform: getTransform(textElementWidth, textElementHeight, getTextElementAngle(updatedTextElement), appState, maxWidth, editorMaxHeight),
+                transform: getTransform(textElementWidth, textElementHeight, getTextElementAngle(updatedTextElement, container), appState, maxWidth, editorMaxHeight),
                 textAlign,
                 verticalAlign,
                 color: updatedTextElement.strokeColor,
@@ -208,13 +185,14 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
             if (!data) {
                 return;
             }
-            const container = getContainerElement(element);
+            const container = getContainerElement(element, app.scene.getNonDeletedElementsMap());
             const font = getFontString({
                 fontSize: app.state.currentItemFontSize,
                 fontFamily: app.state.currentItemFontFamily,
             });
             if (container) {
-                const wrappedText = wrapText(`${editable.value}${data}`, font, getBoundTextMaxWidth(container));
+                const boundTextElement = getBoundTextElement(container, app.scene.getNonDeletedElementsMap());
+                const wrappedText = wrapText(`${editable.value}${data}`, font, getBoundTextMaxWidth(container, boundTextElement));
                 const width = getTextWidth(wrappedText, font);
                 editable.style.width = `${width}px`;
             }
@@ -357,7 +335,7 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
             return;
         }
         let text = editable.value;
-        const container = getContainerElement(updateElement);
+        const container = getContainerElement(updateElement, app.scene.getNonDeletedElementsMap());
         if (container) {
             text = updateElement.text;
             if (editable.value.trim()) {
@@ -380,7 +358,7 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
                     boundElements: container.boundElements?.filter((ele) => !isTextElement(ele)),
                 });
             }
-            redrawTextBoundingBox(updateElement, container);
+            redrawTextBoundingBox(updateElement, container, app.scene.getNonDeletedElementsMap());
         }
         onSubmit({
             text,

package/dist/excalidraw/element/transformHandles.d.ts

@@ -1,4 +1,4 @@
-import { ExcalidrawElement, NonDeletedExcalidrawElement, PointerType } from "./types";
+import { ElementsMap, ExcalidrawElement, NonDeletedExcalidrawElement, PointerType } from "./types";
 import { Bounds } from "./bounds";
 import { InteractiveCanvasAppState, Zoom } from "../types";
 export type TransformHandleDirection = "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se";
@@ -23,14 +23,14 @@ export declare const OMIT_SIDES_FOR_FRAME: {
 };
 export declare const getTransformHandlesFromCoords: ([x1, y1, x2, y2, cx, cy]: [number, number, number, number, number, number], angle: number, zoom: Zoom, pointerType: PointerType, omitSides?: {
     s?: boolean | undefined;
-    e?: boolean | undefined;
-    w?: boolean | undefined;
     n?: boolean | undefined;
+    w?: boolean | undefined;
+    e?: boolean | undefined;
     nw?: boolean | undefined;
     ne?: boolean | undefined;
     sw?: boolean | undefined;
     se?: boolean | undefined;
     rotation?: boolean | undefined;
 }, margin?: number) => TransformHandles;
-export declare const getTransformHandles: (element: ExcalidrawElement, zoom: Zoom, pointerType?: PointerType) => TransformHandles;
+export declare const getTransformHandles: (element: ExcalidrawElement, zoom: Zoom, elementsMap: ElementsMap, pointerType?: PointerType) => TransformHandles;
 export declare const shouldShowBoundingBox: (elements: readonly NonDeletedExcalidrawElement[], appState: InteractiveCanvasAppState) => boolean;

package/dist/excalidraw/element/transformHandles.js

@@ -2,7 +2,7 @@ import { getElementAbsoluteCoords } from "./bounds";
 import { rotate } from "../math";
 import { isTextElement } from ".";
 import { isFrameLikeElement, isLinearElement } from "./typeChecks";
-import { DEFAULT_SPACING } from "../renderer/renderScene";
+import { DEFAULT_TRANSFORM_HANDLE_SPACING } from "../constants";
 const transformHandleSizes = {
     mouse: 8,
     pen: 16,
@@ -55,7 +55,7 @@ export const getTransformHandlesFromCoords = ([x1, y1, x2, y2, cx, cy], angle, z
     const width = x2 - x1;
     const height = y2 - y1;
     const dashedLineMargin = margin / zoom.value;
-    const centeringOffset = (size - DEFAULT_SPACING * 2) / (2 * zoom.value);
+    const centeringOffset = (size - DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / (2 * zoom.value);
     const transformHandles = {
         nw: omitSides.nw
             ? undefined
@@ -98,7 +98,7 @@ export const getTransformHandlesFromCoords = ([x1, y1, x2, y2, cx, cy], angle, z
     }
     return transformHandles;
 };
-export const getTransformHandles = (element, zoom, pointerType = "mouse") => {
+export const getTransformHandles = (element, zoom, elementsMap, pointerType = "mouse") => {
     // so that when locked element is selected (especially when you toggle lock
     // via keyboard) the locked element is visually distinct, indicating
     // you can't move/resize
@@ -136,9 +136,9 @@ export const getTransformHandles = (element, zoom, pointerType = "mouse") => {
         };
     }
     const dashedLineMargin = isLinearElement(element)
-        ? DEFAULT_SPACING + 8
-        : DEFAULT_SPACING;
-    return getTransformHandlesFromCoords(getElementAbsoluteCoords(element, true), element.angle, zoom, pointerType, omitSides, dashedLineMargin);
+        ? DEFAULT_TRANSFORM_HANDLE_SPACING + 8
+        : DEFAULT_TRANSFORM_HANDLE_SPACING;
+    return getTransformHandlesFromCoords(getElementAbsoluteCoords(element, elementsMap, true), element.angle, zoom, pointerType, omitSides, dashedLineMargin);
 };
 export const shouldShowBoundingBox = (elements, appState) => {
     if (appState.editingLinearElement) {

package/dist/excalidraw/element/typeChecks.js

@@ -110,7 +110,10 @@ export const isBoundToContainer = (element) => {
         element.containerId !== null &&
         isTextElement(element));
 };
-export const isUsingAdaptiveRadius = (type) => type === "rectangle" || type === "embeddable" || type === "iframe";
+export const isUsingAdaptiveRadius = (type) => type === "rectangle" ||
+    type === "embeddable" ||
+    type === "iframe" ||
+    type === "image";
 export const isUsingProportionalRadius = (type) => type === "line" || type === "arrow" || type === "diamond";
 export const canApplyRoundnessTypeToElement = (roundnessType, element) => {
     if ((roundnessType === ROUNDNESS.ADAPTIVE_RADIUS ||