@excalidraw/excalidraw 0.17.1-d2f67e6 → 0.17.1-e63dd02

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

@@ -1,7 +1,7 @@
-import type { ElementsMap, ExcalidrawElement, ExcalidrawElementType, ExcalidrawTextContainer, ExcalidrawTextElement, ExcalidrawTextElementWithContainer, FontFamilyValues, FontString, NonDeletedExcalidrawElement } from "./types";
+import type { ElementsMap, ExcalidrawElement, ExcalidrawElementType, ExcalidrawTextContainer, ExcalidrawTextElement, ExcalidrawTextElementWithContainer, FontString, NonDeletedExcalidrawElement } from "./types";
 import type { MaybeTransformHandleType } from "./transformHandles";
 import type { AppState } from "../types";
-import type { ExtractSetType, MakeBrand } from "../utility-types";
+import type { ExtractSetType } from "../utility-types";
 export declare const normalizeText: (text: string) => string;
 export declare const redrawTextBoundingBox: (textElement: ExcalidrawTextElement, container: ExcalidrawElement | null, elementsMap: ElementsMap, informMutation?: boolean) => void;
 export declare const bindTextToShapeAfterDuplication: (newElements: ExcalidrawElement[], oldElements: ExcalidrawElement[], oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>) => void;
@@ -26,12 +26,8 @@ export declare const detectLineHeight: (textElement: ExcalidrawTextElement) => n
  * aligning with the W3C spec.
  */
 export declare const getLineHeightInPx: (fontSize: ExcalidrawTextElement["fontSize"], lineHeight: ExcalidrawTextElement["lineHeight"]) => number;
-/**
- * Calculates vertical offset for a text with alphabetic baseline.
- */
-export declare const getVerticalOffset: (fontFamily: ExcalidrawTextElement["fontFamily"], fontSize: ExcalidrawTextElement["fontSize"], lineHeightPx: number) => number;
 export declare const getApproxMinLineHeight: (fontSize: ExcalidrawTextElement["fontSize"], lineHeight: ExcalidrawTextElement["lineHeight"]) => number;
-export declare const getTextWidth: (text: string, font: FontString) => number;
+export declare const getTextWidth: (text: string, font: FontString, forceAdvanceWidth?: true) => number;
 export declare const getTextHeight: (text: string, fontSize: number, lineHeight: ExcalidrawTextElement["lineHeight"]) => number;
 export declare const parseTokens: (text: string) => string[];
 export declare const wrapText: (text: string, font: FontString, maxWidth: number) => string;
@@ -42,7 +38,6 @@ export declare const charWidth: {
 export declare const getApproxMinLineWidth: (font: FontString, lineHeight: ExcalidrawTextElement["lineHeight"]) => number;
 export declare const getMinCharWidth: (font: FontString) => number;
 export declare const getMaxCharWidth: (font: FontString) => number;
-export declare const getApproxCharsToFitInWidth: (font: FontString, width: number) => number;
 export declare const getBoundTextElementId: (container: ExcalidrawElement | null) => string | null;
 export declare const getBoundTextElement: (element: ExcalidrawElement | null, elementsMap: ElementsMap) => ExcalidrawTextElementWithContainer | null;
 export declare const getContainerElement: (element: ExcalidrawTextElement | null, elementsMap: ElementsMap) => ExcalidrawTextContainer | null;
@@ -69,23 +64,5 @@ export declare const computeContainerDimensionForBoundText: (dimension: number,
 export declare const getBoundTextMaxWidth: (container: ExcalidrawElement, boundTextElement: ExcalidrawTextElement | null) => number;
 export declare const getBoundTextMaxHeight: (container: ExcalidrawElement, boundTextElement: ExcalidrawTextElementWithContainer) => number;
 export declare const isMeasureTextSupported: () => boolean;
-/** OS/2 sTypoAscender, https://learn.microsoft.com/en-us/typography/opentype/spec/os2#stypoascender */
-type sTypoAscender = number & MakeBrand<"sTypoAscender">;
-/** OS/2 sTypoDescender, https://learn.microsoft.com/en-us/typography/opentype/spec/os2#stypodescender */
-type sTypoDescender = number & MakeBrand<"sTypoDescender">;
-/**
- * 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 declare const FONT_METRICS: Record<number, {
-    unitsPerEm: number;
-    ascender: sTypoAscender;
-    descender: sTypoDescender;
-}>;
-export declare const getDefaultLineHeight: (fontFamily: FontFamilyValues) => number & {
-    _brand: "unitlessLineHeight";
-};
 export declare const getMinTextElementWidth: (font: FontString, lineHeight: ExcalidrawTextElement["lineHeight"]) => number;
 export {};

package/dist/excalidraw/element/textElement.js

@@ -1,6 +1,6 @@
 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, TEXT_ALIGN, VERTICAL_ALIGN, } from "../constants";
+import { ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO, ARROW_LABEL_WIDTH_FRACTION, BOUND_TEXT_PADDING, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, TEXT_ALIGN, VERTICAL_ALIGN, } from "../constants";
 import { isTextElement } from ".";
 import { isBoundToContainer, isArrowElement } from "./typeChecks";
 import { LinearElementEditor } from "./linearElementEditor";
@@ -201,41 +201,58 @@ 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;
 };
 let canvas;
-const getLineWidth = (text, font) => {
+/**
+ * @param forceAdvanceWidth use to force retrieve the "advance width" ~ `metrics.width`, instead of the actual boundind box width.
+ *
+ * > The advance width is the distance between the glyph's initial pen position and the next glyph's initial pen position.
+ *
+ * We need to use the advance width as that's the closest thing to the browser wrapping algo, hence using it for:
+ * - text wrapping
+ * - wysiwyg editor (+padding)
+ *
+ * Everything else should be based on the actual bounding box width.
+ *
+ * `Math.ceil` of the final width adds additional buffer which stabilizes slight wrapping incosistencies.
+ */
+const getLineWidth = (text, font, forceAdvanceWidth) => {
     if (!canvas) {
         canvas = document.createElement("canvas");
     }
     const canvas2dContext = canvas.getContext("2d");
     canvas2dContext.font = font;
-    const width = canvas2dContext.measureText(text).width;
+    const metrics = canvas2dContext.measureText(text);
+    const advanceWidth = metrics.width;
+    // retrieve the actual bounding box width if these metrics are available (as of now > 95% coverage)
+    if (!forceAdvanceWidth &&
+        window.TextMetrics &&
+        "actualBoundingBoxLeft" in window.TextMetrics.prototype &&
+        "actualBoundingBoxRight" in window.TextMetrics.prototype) {
+        // could be negative, therefore getting the absolute value
+        const actualWidth = Math.abs(metrics.actualBoundingBoxLeft) +
+            Math.abs(metrics.actualBoundingBoxRight);
+        // fallback to advance width if the actual width is zero, i.e. on text editing start
+        // or when actual width does not respect whitespace chars, i.e. spaces
+        // otherwise actual width should always be bigger
+        return Math.max(actualWidth, advanceWidth);
+    }
     // since in test env the canvas measureText algo
     // doesn't measure text and instead just returns number of
     // characters hence we assume that each letteris 10px
     if (isTestEnv()) {
-        return width * 10;
+        return advanceWidth * 10;
     }
-    return width;
+    return advanceWidth;
 };
-export const getTextWidth = (text, font) => {
+export const getTextWidth = (text, font, forceAdvanceWidth) => {
     const lines = splitIntoLines(text);
     let width = 0;
     lines.forEach((line) => {
-        width = Math.max(width, getLineWidth(line, font));
+        width = Math.max(width, getLineWidth(line, font, forceAdvanceWidth));
     });
     return width;
 };
@@ -269,7 +286,7 @@ export const wrapText = (text, font, maxWidth) => {
     }
     const lines = [];
     const originalLines = text.split("\n");
-    const spaceWidth = getLineWidth(" ", font);
+    const spaceAdvanceWidth = getLineWidth(" ", font, true);
     let currentLine = "";
     let currentLineWidthTillNow = 0;
     const push = (str) => {
@@ -281,18 +298,18 @@ export const wrapText = (text, font, maxWidth) => {
         currentLine = "";
         currentLineWidthTillNow = 0;
     };
-    originalLines.forEach((originalLine) => {
-        const currentLineWidth = getTextWidth(originalLine, font);
+    for (const originalLine of originalLines) {
+        const currentLineWidth = getLineWidth(originalLine, font, true);
         // Push the line if its <= maxWidth
         if (currentLineWidth <= maxWidth) {
             lines.push(originalLine);
-            return; // continue
+            continue;
         }
         const words = parseTokens(originalLine);
         resetParams();
         let index = 0;
         while (index < words.length) {
-            const currentWordWidth = getLineWidth(words[index], font);
+            const currentWordWidth = getLineWidth(words[index], font, true);
             // This will only happen when single word takes entire width
             if (currentWordWidth === maxWidth) {
                 push(words[index]);
@@ -306,20 +323,24 @@ export const wrapText = (text, font, maxWidth) => {
                 resetParams();
                 while (words[index].length > 0) {
                     const currentChar = String.fromCodePoint(words[index].codePointAt(0));
-                    const width = charWidth.calculate(currentChar, font);
-                    currentLineWidthTillNow += width;
+                    const line = currentLine + currentChar;
+                    // use advance width instead of the actual width as it's closest to the browser wapping algo
+                    // use width of the whole line instead of calculating individual chars to accomodate for kerning
+                    const lineAdvanceWidth = getLineWidth(line, font, true);
+                    const charAdvanceWidth = charWidth.calculate(currentChar, font);
+                    currentLineWidthTillNow = lineAdvanceWidth;
                     words[index] = words[index].slice(currentChar.length);
                     if (currentLineWidthTillNow >= maxWidth) {
                         push(currentLine);
                         currentLine = currentChar;
-                        currentLineWidthTillNow = width;
+                        currentLineWidthTillNow = charAdvanceWidth;
                     }
                     else {
-                        currentLine += currentChar;
+                        currentLine = line;
                     }
                 }
                 // push current line if appending space exceeds max width
-                if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
+                if (currentLineWidthTillNow + spaceAdvanceWidth >= maxWidth) {
                     push(currentLine);
                     resetParams();
                     // space needs to be appended before next word
@@ -329,7 +350,7 @@ export const wrapText = (text, font, maxWidth) => {
                 }
                 else if (!currentLine.endsWith("-")) {
                     currentLine += " ";
-                    currentLineWidthTillNow += spaceWidth;
+                    currentLineWidthTillNow += spaceAdvanceWidth;
                 }
                 index++;
             }
@@ -337,7 +358,7 @@ export const wrapText = (text, font, maxWidth) => {
                 // Start appending words in a line till max width reached
                 while (currentLineWidthTillNow < maxWidth && index < words.length) {
                     const word = words[index];
-                    currentLineWidthTillNow = getLineWidth(currentLine + word, font);
+                    currentLineWidthTillNow = getLineWidth(currentLine + word, font, true);
                     if (currentLineWidthTillNow > maxWidth) {
                         push(currentLine);
                         resetParams();
@@ -352,7 +373,7 @@ export const wrapText = (text, font, maxWidth) => {
                         currentLine += " ";
                     }
                     // Push the word if appending space exceeds max width
-                    if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
+                    if (currentLineWidthTillNow + spaceAdvanceWidth >= maxWidth) {
                         if (shouldAppendSpace) {
                             lines.push(currentLine.slice(0, -1));
                         }
@@ -370,7 +391,7 @@ export const wrapText = (text, font, maxWidth) => {
             currentLine = currentLine.slice(0, -1);
             push(currentLine);
         }
-    });
+    }
     return lines.join("\n");
 };
 export const charWidth = (() => {
@@ -381,7 +402,7 @@ export const charWidth = (() => {
             cachedCharWidth[font] = [];
         }
         if (!cachedCharWidth[font][ascii]) {
-            const width = getLineWidth(char, font);
+            const width = getLineWidth(char, font, true);
             cachedCharWidth[font][ascii] = width;
         }
         return cachedCharWidth[font][ascii];
@@ -420,32 +441,9 @@ export const getMaxCharWidth = (font) => {
     const cacheWithOutEmpty = cache.filter((val) => val !== undefined);
     return Math.max(...cacheWithOutEmpty);
 };
-export const getApproxCharsToFitInWidth = (font, width) => {
-    // Generally lower case is used so converting to lower case
-    const dummyText = DUMMY_TEXT.toLocaleLowerCase();
-    const batchLength = 6;
-    let index = 0;
-    let widthTillNow = 0;
-    let str = "";
-    while (widthTillNow <= width) {
-        const batch = dummyText.substr(index, index + batchLength);
-        str += batch;
-        widthTillNow += getLineWidth(str, font);
-        if (index === dummyText.length - 1) {
-            index = 0;
-        }
-        index = index + batchLength;
-    }
-    while (widthTillNow > width) {
-        str = str.substr(0, str.length - 1);
-        widthTillNow = getLineWidth(str, font);
-    }
-    return str.length;
-};
 export const getBoundTextElementId = (container) => {
     return container?.boundElements?.length
-        ? container?.boundElements?.filter((ele) => ele.type === "text")[0]?.id ||
-            null
+        ? container?.boundElements?.find((ele) => ele.type === "text")?.id || null
         : null;
 };
 export const getBoundTextElement = (element, elementsMap) => {
@@ -612,60 +610,6 @@ export const isMeasureTextSupported = () => {
     }));
     return width > 0;
 };
-/**
- * Unitless line height
- *
- * In previous versions we used `normal` line height, which browsers interpret
- * differently, and based on font-family and font-size.
- *
- * To make line heights consistent across browsers we hardcode the values for
- * each of our fonts based on most common average line-heights.
- * See https://github.com/excalidraw/excalidraw/pull/6360#issuecomment-1477635971
- * where the values come from.
- */
-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 Helvetica in WebKit and Blink.
-    [FONT_FAMILY.Helvetica]: 1.15,
-    // ~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];
-    }
-    return DEFAULT_LINE_HEIGHT[DEFAULT_FONT_FAMILY];
-};
 export const getMinTextElementWidth = (font, lineHeight) => {
     return measureText("", font, lineHeight).width + BOUND_TEXT_PADDING * 2;
 };

package/dist/excalidraw/element/textWysiwyg.js

@@ -2,7 +2,7 @@ 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 } from "../constants";
+import { CLASSES, isSafari } from "../constants";
 import { bumpVersion, mutateElement } from "./mutateElement";
 import { getBoundTextElementId, getContainerElement, getTextElementAngle, getTextWidth, normalizeText, redrawTextBoundingBox, wrapText, getBoundTextMaxHeight, getBoundTextMaxWidth, computeContainerDimensionForBoundText, computeBoundTextPosition, getBoundTextElement, } from "./textElement";
 import { actionDecreaseFontSize, actionIncreaseFontSize, } from "../actions/actionProperties";
@@ -50,10 +50,12 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
             let coordX = updatedTextElement.x;
             let coordY = updatedTextElement.y;
             const container = getContainerElement(updatedTextElement, app.scene.getNonDeletedElementsMap());
+            let width = updatedTextElement.width;
+            // set to element height by default since that's
+            // what is going to be used for unbounded text
+            let height = updatedTextElement.height;
             let maxWidth = updatedTextElement.width;
             let maxHeight = updatedTextElement.height;
-            let textElementWidth = updatedTextElement.width;
-            const textElementHeight = updatedTextElement.height;
             if (container && updatedTextElement.containerId) {
                 if (isArrowElement(container)) {
                     const boundTextCoords = LinearElementEditor.getBoundTextElementPosition(container, updatedTextElement, elementsMap);
@@ -74,8 +76,8 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
                 maxWidth = getBoundTextMaxWidth(container, updatedTextElement);
                 maxHeight = getBoundTextMaxHeight(container, updatedTextElement);
                 // autogrow container height if text exceeds
-                if (!isArrowElement(container) && textElementHeight > maxHeight) {
-                    const targetContainerHeight = computeContainerDimensionForBoundText(textElementHeight, container.type);
+                if (!isArrowElement(container) && height > maxHeight) {
+                    const targetContainerHeight = computeContainerDimensionForBoundText(height, container.type);
                     mutateElement(container, { height: targetContainerHeight });
                     return;
                 }
@@ -84,8 +86,8 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
                 // is reached when text is removed
                 !isArrowElement(container) &&
                     container.height > originalContainerData.height &&
-                    textElementHeight < maxHeight) {
-                    const targetContainerHeight = computeContainerDimensionForBoundText(textElementHeight, container.type);
+                    height < maxHeight) {
+                    const targetContainerHeight = computeContainerDimensionForBoundText(height, container.type);
                     mutateElement(container, { height: targetContainerHeight });
                 }
                 else {
@@ -109,22 +111,30 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
             }
             if (!container) {
                 maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value;
-                textElementWidth = Math.min(textElementWidth, maxWidth);
+                width = Math.min(width, maxWidth);
             }
             else {
-                textElementWidth += 0.5;
+                width += 0.5;
             }
+            // add 5% buffer otherwise it causes wysiwyg to jump
+            height *= 1.05;
+            const font = getFontString(updatedTextElement);
+            // adding left and right padding buffer, so that browser does not cut the glyphs (does not work in Safari)
+            const padding = !isSafari
+                ? Math.ceil(updatedTextElement.fontSize / 2)
+                : 0;
             // 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),
+                font,
                 // must be defined *after* font ¯\_(ツ)_/¯
                 lineHeight: updatedTextElement.lineHeight,
-                width: `${textElementWidth}px`,
-                height: `${textElementHeight}px`,
-                left: `${viewportX}px`,
+                width: `${width}px`,
+                height: `${height}px`,
+                left: `${viewportX - padding}px`,
                 top: `${viewportY}px`,
-                transform: getTransform(textElementWidth, textElementHeight, getTextElementAngle(updatedTextElement, container), appState, maxWidth, editorMaxHeight),
+                transform: getTransform(width, height, getTextElementAngle(updatedTextElement, container), appState, maxWidth, editorMaxHeight),
+                padding: `0 ${padding}px`,
                 textAlign,
                 verticalAlign,
                 color: updatedTextElement.strokeColor,
@@ -160,7 +170,6 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
         minHeight: "1em",
         backfaceVisibility: "hidden",
         margin: 0,
-        padding: 0,
         border: 0,
         outline: 0,
         resize: "none",
@@ -194,7 +203,7 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
             if (container) {
                 const boundTextElement = getBoundTextElement(container, app.scene.getNonDeletedElementsMap());
                 const wrappedText = wrapText(`${editable.value}${data}`, font, getBoundTextMaxWidth(container, boundTextElement));
-                const width = getTextWidth(wrappedText, font);
+                const width = getTextWidth(wrappedText, font, true);
                 editable.style.width = `${width}px`;
             }
         };
@@ -320,8 +329,10 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
             .reverse();
     };
     const stopEvent = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
+        if (event.target instanceof HTMLCanvasElement) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
     };
     // using a state variable instead of passing it to the handleSubmit callback
     // so that we don't need to create separate a callback for event handlers
@@ -393,45 +404,26 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
         // Also to handle cases such as picking a color which would trigger a blur
         // in that same tick.
         const target = event?.target;
-        const isTargetPickerTrigger = target instanceof HTMLElement &&
-            target.classList.contains("active-color");
+        const isPropertiesTrigger = target instanceof HTMLElement &&
+            target.classList.contains("properties-trigger");
         setTimeout(() => {
             editable.onblur = handleSubmit;
-            if (isTargetPickerTrigger) {
-                const callback = (mutationList, observer) => {
-                    const radixIsRemoved = mutationList.find((mutation) => mutation.removedNodes.length > 0 &&
-                        mutation.removedNodes[0].dataset
-                            ?.radixPopperContentWrapper !== undefined);
-                    if (radixIsRemoved) {
-                        // should work without this in theory
-                        // and i think it does actually but radix probably somewhere,
-                        // somehow sets the focus elsewhere
-                        setTimeout(() => {
-                            editable.focus();
-                        });
-                        observer.disconnect();
-                    }
-                };
-                const observer = new MutationObserver(callback);
-                observer.observe(document.querySelector(".excalidraw-container"), {
-                    childList: true,
-                });
-            }
             // case: clicking on the same property → no change → no update → no focus
-            if (!isTargetPickerTrigger) {
+            if (!isPropertiesTrigger) {
                 editable.focus();
             }
         });
     };
     // prevent blur when changing properties from the menu
     const onPointerDown = (event) => {
-        const isTargetPickerTrigger = event.target instanceof HTMLElement &&
-            event.target.classList.contains("active-color");
+        const target = event?.target;
+        const isPropertiesTrigger = target instanceof HTMLElement &&
+            target.classList.contains("properties-trigger");
         if (((event.target instanceof HTMLElement ||
             event.target instanceof SVGElement) &&
             event.target.closest(`.${CLASSES.SHAPE_ACTIONS_MENU}`) &&
             !isWritableElement(event.target)) ||
-            isTargetPickerTrigger) {
+            isPropertiesTrigger) {
             editable.onblur = null;
             window.addEventListener("pointerup", bindBlurEvent);
             // handle edge-case where pointerup doesn't fire e.g. due to user
@@ -439,7 +431,7 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
             window.addEventListener("blur", handleSubmit);
         }
         else if (event.target instanceof HTMLElement &&
-            !event.target.contains(editable) &&
+            event.target instanceof HTMLCanvasElement &&
             // Vitest simply ignores stopPropagation, capture-mode, or rAF
             // so without introducing crazier hacks, nothing we can do
             !isTestEnv()) {
@@ -457,8 +449,8 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
     // handle updates of textElement properties of editing element
     const unbindUpdate = Scene.getScene(element).onUpdate(() => {
         updateWysiwygStyle();
-        const isColorPickerActive = !!document.activeElement?.closest(".color-picker-content");
-        if (!isColorPickerActive) {
+        const isPopupOpened = !!document.activeElement?.closest(".properties-content");
+        if (!isPopupOpened) {
             editable.focus();
         }
     });

package/dist/excalidraw/element/transformHandles.js

@@ -1,6 +1,6 @@
 import { getElementAbsoluteCoords } from "./bounds";
 import { rotate } from "../math";
-import { isFrameLikeElement, isLinearElement } from "./typeChecks";
+import { isElbowArrow, isFrameLikeElement, isLinearElement, } from "./typeChecks";
 import { DEFAULT_TRANSFORM_HANDLE_SPACING, isAndroid, isIOS, } from "../constants";
 const transformHandleSizes = {
     mouse: 8,
@@ -116,7 +116,9 @@ export const getTransformHandles = (element, zoom, elementsMap, pointerType = "m
     // 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
-    if (element.locked) {
+    if (element.locked ||
+        // Elbow arrows cannot be rotated
+        isElbowArrow(element)) {
         return {};
     }
     if (element.type === "freedraw" || isLinearElement(element)) {
@@ -159,6 +161,9 @@ export const shouldShowBoundingBox = (elements, appState) => {
         return true;
     }
     const element = elements[0];
+    if (isElbowArrow(element)) {
+        return false;
+    }
     if (!isLinearElement(element)) {
         return true;
     }

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

@@ -1,6 +1,6 @@
 import type { ElementOrToolType } from "../types";
 import type { MarkNonNullable } from "../utility-types";
-import type { ExcalidrawElement, ExcalidrawTextElement, ExcalidrawEmbeddableElement, ExcalidrawLinearElement, ExcalidrawBindableElement, ExcalidrawFreeDrawElement, InitializedExcalidrawImageElement, ExcalidrawImageElement, ExcalidrawTextElementWithContainer, ExcalidrawTextContainer, ExcalidrawFrameElement, RoundnessType, ExcalidrawFrameLikeElement, ExcalidrawElementType, ExcalidrawIframeElement, ExcalidrawIframeLikeElement, ExcalidrawMagicFrameElement, ExcalidrawArrowElement } from "./types";
+import type { ExcalidrawElement, ExcalidrawTextElement, ExcalidrawEmbeddableElement, ExcalidrawLinearElement, ExcalidrawBindableElement, ExcalidrawFreeDrawElement, InitializedExcalidrawImageElement, ExcalidrawImageElement, ExcalidrawTextElementWithContainer, ExcalidrawTextContainer, ExcalidrawFrameElement, RoundnessType, ExcalidrawFrameLikeElement, ExcalidrawElementType, ExcalidrawIframeElement, ExcalidrawIframeLikeElement, ExcalidrawMagicFrameElement, ExcalidrawArrowElement, ExcalidrawElbowArrowElement, PointBinding, FixedPointBinding } from "./types";
 export declare const isInitializedImageElement: (element: ExcalidrawElement | null) => element is InitializedExcalidrawImageElement;
 export declare const isImageElement: (element: ExcalidrawElement | null) => element is ExcalidrawImageElement;
 export declare const isEmbeddableElement: (element: ExcalidrawElement | null | undefined) => element is ExcalidrawEmbeddableElement;
@@ -14,10 +14,12 @@ export declare const isFreeDrawElement: (element?: ExcalidrawElement | null) =>
 export declare const isFreeDrawElementType: (elementType: ExcalidrawElementType) => boolean;
 export declare const isLinearElement: (element?: ExcalidrawElement | null) => element is ExcalidrawLinearElement;
 export declare const isArrowElement: (element?: ExcalidrawElement | null) => element is ExcalidrawArrowElement;
+export declare const isElbowArrow: (element?: ExcalidrawElement) => element is ExcalidrawElbowArrowElement;
 export declare const isLinearElementType: (elementType: ElementOrToolType) => boolean;
 export declare const isBindingElement: (element?: ExcalidrawElement | null, includeLocked?: boolean) => element is ExcalidrawLinearElement;
 export declare const isBindingElementType: (elementType: ElementOrToolType) => boolean;
-export declare const isBindableElement: (element: ExcalidrawElement | null, includeLocked?: boolean) => element is ExcalidrawBindableElement;
+export declare const isBindableElement: (element: ExcalidrawElement | null | undefined, includeLocked?: boolean) => element is ExcalidrawBindableElement;
+export declare const isRectanguloidElement: (element?: ExcalidrawElement | null) => element is ExcalidrawBindableElement;
 export declare const isTextBindableContainer: (element: ExcalidrawElement | null, includeLocked?: boolean) => element is ExcalidrawTextContainer;
 export declare const isExcalidrawElement: (element: any) => element is ExcalidrawElement;
 export declare const hasBoundTextElement: (element: ExcalidrawElement | null) => element is MarkNonNullable<ExcalidrawBindableElement, "boundElements">;
@@ -30,3 +32,4 @@ export declare const getDefaultRoundnessTypeForElement: (element: ExcalidrawElem
 } | {
     type: 3;
 } | null;
+export declare const isFixedPointBinding: (binding: PointBinding) => binding is FixedPointBinding;

package/dist/excalidraw/element/typeChecks.js

@@ -40,6 +40,9 @@ export const isLinearElement = (element) => {
 export const isArrowElement = (element) => {
     return element != null && element.type === "arrow";
 };
+export const isElbowArrow = (element) => {
+    return isArrowElement(element) && element.elbowed;
+};
 export const isLinearElementType = (elementType) => {
     return (elementType === "arrow" || elementType === "line" // || elementType === "freedraw"
     );
@@ -65,6 +68,17 @@ export const isBindableElement = (element, includeLocked = true) => {
             element.type === "magicframe" ||
             (element.type === "text" && !element.containerId)));
 };
+export const isRectanguloidElement = (element) => {
+    return (element != null &&
+        (element.type === "rectangle" ||
+            element.type === "diamond" ||
+            element.type === "image" ||
+            element.type === "iframe" ||
+            element.type === "embeddable" ||
+            element.type === "frame" ||
+            element.type === "magicframe" ||
+            (element.type === "text" && !element.containerId)));
+};
 export const isTextBindableContainer = (element, includeLocked = true) => {
     return (element != null &&
         (!element.locked || includeLocked === true) &&
@@ -142,3 +156,6 @@ export const getDefaultRoundnessTypeForElement = (element) => {
     }
     return null;
 };
+export const isFixedPointBinding = (binding) => {
+    return binding.fixedPoint != null;
+};

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

@@ -1,6 +1,6 @@
 import type { Point } from "../types";
 import type { FONT_FAMILY, ROUNDNESS, TEXT_ALIGN, THEME, VERTICAL_ALIGN } from "../constants";
-import type { MakeBrand, MarkNonNullable, ValueOf } from "../utility-types";
+import type { MakeBrand, MarkNonNullable, Merge, ValueOf } from "../utility-types";
 import type { MagicCacheData } from "../data/magic";
 export type ChartType = "bar" | "line";
 export type FillStyle = "hachure" | "cross-hatch" | "solid" | "zigzag";
@@ -174,11 +174,16 @@ export type ExcalidrawTextContainer = ExcalidrawRectangleElement | ExcalidrawDia
 export type ExcalidrawTextElementWithContainer = {
     containerId: ExcalidrawTextContainer["id"];
 } & ExcalidrawTextElement;
+export type FixedPoint = [number, number];
 export type PointBinding = {
     elementId: ExcalidrawBindableElement["id"];
     focus: number;
     gap: number;
+    fixedPoint: FixedPoint | null;
 };
+export type FixedPointBinding = Merge<PointBinding, {
+    fixedPoint: FixedPoint;
+}>;
 export type Arrowhead = "arrow" | "bar" | "dot" | "circle" | "circle_outline" | "triangle" | "triangle_outline" | "diamond" | "diamond_outline";
 export type ExcalidrawLinearElement = _ExcalidrawElementBase & Readonly<{
     type: "line" | "arrow";
@@ -191,6 +196,12 @@ export type ExcalidrawLinearElement = _ExcalidrawElementBase & Readonly<{
 }>;
 export type ExcalidrawArrowElement = ExcalidrawLinearElement & Readonly<{
     type: "arrow";
+    elbowed: boolean;
+}>;
+export type ExcalidrawElbowArrowElement = Merge<ExcalidrawArrowElement, {
+    elbowed: true;
+    startBinding: FixedPointBinding | null;
+    endBinding: FixedPointBinding | null;
 }>;
 export type ExcalidrawFreeDrawElement = _ExcalidrawElementBase & Readonly<{
     type: "freedraw";