@excalidraw/excalidraw 0.17.1-d2f67e6 → 0.17.1-e63dd02

package/dist/excalidraw/components/App.js

@@ -11,7 +11,7 @@ import { actions } from "../actions/register";
 import { trackEvent } from "../analytics";
 import { getDefaultAppState, isEraserActive, isHandToolActive, } from "../appState";
 import { copyTextToSystemClipboard, parseClipboard } from "../clipboard";
-import { DEFAULT_FONT_SIZE } from "../constants";
+import { ARROW_TYPE } from "../constants";
 import { APP_NAME, CURSOR_TYPE, DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT, DEFAULT_VERTICAL_ALIGN, DRAGGING_THRESHOLD, ELEMENT_SHIFT_TRANSLATE_AMOUNT, ELEMENT_TRANSLATE_AMOUNT, ENV, EVENT, FRAME_STYLE, GRID_SIZE, IMAGE_MIME_TYPES, IMAGE_RENDER_TIMEOUT, isBrave, LINE_CONFIRM_THRESHOLD, MAX_ALLOWED_FILE_BYTES, MIME_TYPES, MQ_MAX_HEIGHT_LANDSCAPE, MQ_MAX_WIDTH_LANDSCAPE, MQ_MAX_WIDTH_PORTRAIT, MQ_RIGHT_SIDEBAR_MIN_WIDTH, POINTER_BUTTON, ROUNDNESS, SCROLL_TIMEOUT, TAP_TWICE_TIMEOUT, TEXT_TO_CENTER_SNAP_THRESHOLD, THEME, THEME_FILTER, TOUCH_CTX_MENU_TIMEOUT, VERTICAL_ALIGN, YOUTUBE_STATES, ZOOM_STEP, POINTER_EVENTS, TOOL_TYPE, EDITOR_LS_KEYS, isIOS, supportsResizeObserver, DEFAULT_COLLISION_THRESHOLD, DEFAULT_TEXT_ALIGN, } from "../constants";
 import { exportCanvas, loadFromBlob } from "../data";
 import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
@@ -20,8 +20,8 @@ import { dragNewElement, dragSelectedElements, duplicateElement, getCommonBounds
 import { bindOrUnbindLinearElement, bindOrUnbindLinearElements, fixBindingsAfterDeletion, fixBindingsAfterDuplication, getHoveredElementForBinding, isBindingEnabled, isLinearElementSimpleAndAlreadyBound, maybeBindLinearElement, shouldEnableBindingForPointerEvent, updateBoundElements, getSuggestedBindingsForArrows, } from "../element/binding";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { mutateElement, newElementWith } from "../element/mutateElement";
-import { deepCopyElement, duplicateElements, newFrameElement, newFreeDrawElement, newEmbeddableElement, newMagicFrameElement, newIframeElement, } from "../element/newElement";
-import { hasBoundTextElement, isArrowElement, isBindingElement, isBindingElementType, isBoundToContainer, isFrameLikeElement, isImageElement, isEmbeddableElement, isInitializedImageElement, isLinearElement, isLinearElementType, isUsingAdaptiveRadius, isFrameElement, isIframeElement, isIframeLikeElement, isMagicFrameElement, isTextBindableContainer, } from "../element/typeChecks";
+import { deepCopyElement, duplicateElements, newFrameElement, newFreeDrawElement, newEmbeddableElement, newMagicFrameElement, newIframeElement, newArrowElement, } from "../element/newElement";
+import { hasBoundTextElement, isArrowElement, isBindingElement, isBindingElementType, isBoundToContainer, isFrameLikeElement, isImageElement, isEmbeddableElement, isInitializedImageElement, isLinearElement, isLinearElementType, isUsingAdaptiveRadius, isIframeElement, isIframeLikeElement, isMagicFrameElement, isTextBindableContainer, isElbowArrow, } from "../element/typeChecks";
 import { getCenter, getDistance } from "../gesture";
 import { editGroupForSelectedElement, getElementsInGroup, getSelectedGroupIdForElement, getSelectedGroupIds, isElementInGroup, isSelectedViaGroup, selectGroupsForSelectedElements, } from "../groups";
 import { History } from "../history";
@@ -32,8 +32,8 @@ import { distance2d, getCornerRadius, getGridPoint, isPathALoop, } from "../math
 import { calculateScrollCenter, getElementsWithinSelection, getNormalizedZoom, getSelectedElements, hasBackground, isSomeElementSelected, } from "../scene";
 import Scene from "../scene/Scene";
 import { getStateForZoom } from "../scene/zoom";
-import { findShapeByKey } from "../shapes";
-import { getClosedCurveShape, getCurveShape, getEllipseShape, getFreedrawShape, getPolygonShape, getSelectionBoxShape, } from "../../utils/geometry/shape";
+import { findShapeByKey, getBoundTextShape, getElementShape } from "../shapes";
+import { getSelectionBoxShape } from "../../utils/geometry/shape";
 import { isPointInShape } from "../../utils/collision";
 import { debounce, distance, getFontString, getNearestScrollableContainer, isInputLike, isToolIcon, isWritableElement, sceneCoordsToViewportCoords, tupleToCoors, viewportCoordsToSceneCoords, wrapEvent, updateObject, updateActiveTool, getShortcutKey, isTransparent, easeToValuesRAF, muteFSAbortError, isTestEnv, easeOut, updateStable, addEventListener, normalizeEOL, getDateTime, isShallowEqual, arrayToMap, } from "../utils";
 import { createSrcDoc, embeddableURLValidator, maybeParseEmbedSrc, getEmbedLink, } from "../element/embeddable";
@@ -45,12 +45,12 @@ import { dataURLToFile, generateIdFromFile, getDataURL, getFileFromEvent, ImageU
 import { getInitializedImageElements, loadHTMLImageElement, normalizeSVG, updateImageCache as _updateImageCache, } from "../element/image";
 import throttle from "lodash.throttle";
 import { fileOpen } from "../data/filesystem";
-import { bindTextToShapeAfterDuplication, getApproxMinLineHeight, getApproxMinLineWidth, getBoundTextElement, getContainerCenter, getContainerElement, getDefaultLineHeight, getLineHeightInPx, getMinTextElementWidth, isMeasureTextSupported, isValidTextContainer, measureText, wrapText, } from "../element/textElement";
+import { bindTextToShapeAfterDuplication, getApproxMinLineHeight, getApproxMinLineWidth, getBoundTextElement, getContainerCenter, getContainerElement, getLineHeightInPx, getMinTextElementWidth, isMeasureTextSupported, isValidTextContainer, measureText, wrapText, } from "../element/textElement";
 import { showHyperlinkTooltip, hideHyperlinkToolip, Hyperlink, } from "../components/hyperlink/Hyperlink";
 import { isLocalLink, normalizeLink, toValidURL } from "../data/url";
 import { shouldShowBoundingBox } from "../element/transformHandles";
 import { actionUnlockAllElements } from "../actions/actionElementLock";
-import { Fonts } from "../scene/Fonts";
+import { Fonts, getLineHeight } from "../fonts";
 import { getFrameChildren, isCursorInFrame, bindElementsToFramesAfterDuplication, addElementsToFrame, replaceAllElementsInFrame, removeElementsFromFrame, getElementsInResizingFrame, getElementsInNewFrame, getContainingFrame, elementOverlapsWithFrame, updateFrameMembershipOfSelectedElements, isElementInFrame, getFrameLikeTitle, getElementsOverlappingFrame, filterElementsEligibleAsFrameChildren, } from "../frame";
 import { excludeElementsInFramesFromSelection, makeNextSelectedElementIds, } from "../scene/selection";
 import { actionPaste } from "../actions/actionClipboard";
@@ -85,7 +85,7 @@ import { AnimatedTrail } from "../animated-trail";
 import { LaserTrails } from "../laser-trails";
 import { withBatchedUpdates, withBatchedUpdatesThrottled } from "../reactUtils";
 import { getRenderOpacity } from "../renderer/renderElement";
-import { hitElementBoundText, hitElementBoundingBoxOnly, hitElementItself, shouldTestInside, } from "../element/collision";
+import { hitElementBoundText, hitElementBoundingBoxOnly, hitElementItself, } from "../element/collision";
 import { textWysiwyg } from "../element/textWysiwyg";
 import { isOverScrollBars } from "../scene/scrollbars";
 import { syncInvalidIndices, syncMovedIndices } from "../fractionalIndex";
@@ -94,6 +94,7 @@ import { getShortcutFromShortcutName } from "../actions/shortcuts";
 import { actionTextAutoResize } from "../actions/actionTextAutoResize";
 import { getVisibleSceneBounds } from "../element/bounds";
 import { isMaybeMermaidDefinition } from "../mermaid";
+import { mutateElbowArrow } from "../element/routing";
 const AppContext = React.createContext(null);
 const AppPropsContext = React.createContext(null);
 const deviceContextInitialValue = {
@@ -166,8 +167,8 @@ class App extends React.Component {
     device = deviceContextInitialValue;
     excalidrawContainerRef = React.createRef();
     scene;
-    renderer;
     fonts;
+    renderer;
     resizeObserver;
     nearestScrollableContainer;
     library;
@@ -701,15 +702,7 @@ class App extends React.Component {
             return null;
         }
         const isDarkTheme = this.state.theme === THEME.DARK;
-        let frameIndex = 0;
-        let magicFrameIndex = 0;
         return this.scene.getNonDeletedFramesLikes().map((f) => {
-            if (isFrameElement(f)) {
-                frameIndex++;
-            }
-            else {
-                magicFrameIndex++;
-            }
             if (!isElementInViewport(f, this.canvas.width / window.devicePixelRatio, this.canvas.height / window.devicePixelRatio, {
                 offsetLeft: this.state.offsetLeft,
                 offsetTop: this.state.offsetTop,
@@ -727,7 +720,7 @@ class App extends React.Component {
                 this.setState({ editingFrame: null });
             };
             let frameNameJSX;
-            const frameName = getFrameLikeTitle(f, isFrameElement(f) ? frameIndex : magicFrameIndex);
+            const frameName = getFrameLikeTitle(f);
             if (f.id === this.state.editingFrame) {
                 const frameNameInEdit = frameName;
                 frameNameJSX = (_jsx("input", { autoFocus: true, value: frameNameInEdit, onChange: (e) => {
@@ -1181,6 +1174,13 @@ class App extends React.Component {
             keepOpenOnAlt: false,
         });
     };
+    dismissLinearEditor = () => {
+        setTimeout(() => {
+            this.setState({
+                editingLinearElement: null,
+            });
+        });
+    };
     syncActionResult = withBatchedUpdates((actionResult) => {
         if (this.unmounted || actionResult === false) {
             return;
@@ -1305,7 +1305,12 @@ class App extends React.Component {
         }
         let initialData = null;
         try {
-            initialData = (await this.props.initialData) || null;
+            if (typeof this.props.initialData === "function") {
+                initialData = (await this.props.initialData()) || null;
+            }
+            else {
+                initialData = (await this.props.initialData) || null;
+            }
             if (initialData?.libraryItems) {
                 this.library
                     .updateLibrary({
@@ -1353,17 +1358,17 @@ class App extends React.Component {
                 }),
             };
         }
-        // FontFaceSet loadingdone event we listen on may not always fire
-        // (looking at you Safari), so on init we manually load fonts for current
-        // text elements on canvas, and rerender them once done. This also
-        // seems faster even in browsers that do fire the loadingdone event.
-        this.fonts.loadFontsForElements(scene.elements);
         this.resetStore();
         this.resetHistory();
         this.syncActionResult({
             ...scene,
             storeAction: StoreAction.UPDATE,
         });
+        // FontFaceSet loadingdone event we listen on may not always
+        // fire (looking at you Safari), so on init we manually load all
+        // fonts and rerender scene text elements once done. This also
+        // seems faster even in browsers that do fire the loadingdone event.
+        this.fonts.loadSceneFonts();
     };
     isMobileBreakpoint = (width, height) => {
         return (width < MQ_MAX_WIDTH_PORTRAIT ||
@@ -1437,6 +1442,10 @@ class App extends React.Component {
                     configurable: true,
                     value: this.store,
                 },
+                fonts: {
+                    configurable: true,
+                    value: this.fonts,
+                },
             });
         }
         this.store.onStoreIncrementEmitter.on((increment) => {
@@ -1478,7 +1487,9 @@ class App extends React.Component {
         }
     }
     componentWillUnmount() {
+        window.launchQueue?.setConsumer(() => { });
         this.renderer.destroy();
+        this.scene.destroy();
         this.scene = new Scene();
         this.fonts = new Fonts({ scene: this.scene });
         this.renderer = new Renderer(this.scene);
@@ -1487,7 +1498,6 @@ class App extends React.Component {
         this.resizeObserver?.disconnect();
         this.unmounted = true;
         this.removeEventListeners();
-        this.scene.destroy();
         this.library.destroy();
         this.laserTrails.stop();
         this.eraserTrail.stop();
@@ -1540,7 +1550,7 @@ class App extends React.Component {
         // rerender text elements on font load to fix #637 && #1553
         addEventListener(document.fonts, "loadingdone", (event) => {
             const loadedFontFaces = event.fontfaces;
-            this.fonts.onFontsLoaded(loadedFontFaces);
+            this.fonts.onLoaded(loadedFontFaces);
         }), 
         // Safari-only desktop pinch zoom
         addEventListener(document, EVENT.GESTURE_START, this.onGestureStart, false), addEventListener(document, EVENT.GESTURE_CHANGE, this.onGestureChange, false), addEventListener(document, EVENT.GESTURE_END, this.onGestureEnd, false), addEventListener(window, EVENT.FOCUS, () => {
@@ -1665,7 +1675,7 @@ class App extends React.Component {
             multiElement != null &&
             isBindingEnabled(this.state) &&
             isBindingElement(multiElement, false)) {
-            maybeBindLinearElement(multiElement, this.state, tupleToCoors(LinearElementEditor.getPointAtIndexGlobalCoordinates(multiElement, -1, nonDeletedElementsMap)), this);
+            maybeBindLinearElement(multiElement, this.state, tupleToCoors(LinearElementEditor.getPointAtIndexGlobalCoordinates(multiElement, -1, nonDeletedElementsMap)), this.scene.getNonDeletedElementsMap(), this.scene.getNonDeletedElements());
         }
         this.store.commit(elementsMap, this.state);
         // Do not notify consumers if we're still loading the scene. Among other
@@ -1857,9 +1867,7 @@ class App extends React.Component {
             if (data.text && isMaybeMermaidDefinition(data.text)) {
                 const api = await import("@excalidraw/mermaid-to-excalidraw");
                 try {
-                    const { elements: skeletonElements, files } = await api.parseMermaidToExcalidraw(data.text, {
-                        fontSize: DEFAULT_FONT_SIZE,
-                    });
+                    const { elements: skeletonElements, files } = await api.parseMermaidToExcalidraw(data.text);
                     const elements = convertToExcalidrawElements(skeletonElements, {
                         regenerateIds: true,
                     });
@@ -2086,7 +2094,7 @@ class App extends React.Component {
             fontSize: textElementProps.fontSize,
             fontFamily: textElementProps.fontFamily,
         });
-        const lineHeight = getDefaultLineHeight(textElementProps.fontFamily);
+        const lineHeight = getLineHeight(textElementProps.fontFamily);
         const [x1, , x2] = getVisibleSceneBounds(this.state);
         // long texts should not go beyond 800 pixels in width nor should it go below 200 px
         const maxTextWidth = Math.max(Math.min((x2 - x1) * 0.5, 800), 200);
@@ -2101,11 +2109,11 @@ class App extends React.Component {
                     y: currentY,
                 });
                 let metrics = measureText(originalText, fontString, lineHeight);
-                const isTextWrapped = metrics.width > maxTextWidth;
-                const text = isTextWrapped
+                const isTextUnwrapped = metrics.width > maxTextWidth;
+                const text = isTextUnwrapped
                     ? wrapText(originalText, fontString, maxTextWidth)
                     : originalText;
-                metrics = isTextWrapped
+                metrics = isTextUnwrapped
                     ? measureText(text, fontString, lineHeight)
                     : metrics;
                 const startX = x - metrics.width / 2;
@@ -2117,7 +2125,7 @@ class App extends React.Component {
                     text,
                     originalText,
                     lineHeight,
-                    autoResize: !isTextWrapped,
+                    autoResize: !isTextUnwrapped,
                     frameId: topLayerFrame ? topLayerFrame.id : null,
                 });
                 acc.push(element);
@@ -2510,13 +2518,23 @@ class App extends React.Component {
             this.setState({ isBindingEnabled: false });
         }
         if (isArrowKey(event.key)) {
-            const step = (this.state.gridSize &&
-                (event.shiftKey
-                    ? ELEMENT_TRANSLATE_AMOUNT
-                    : this.state.gridSize)) ||
-                (event.shiftKey
-                    ? ELEMENT_SHIFT_TRANSLATE_AMOUNT
-                    : ELEMENT_TRANSLATE_AMOUNT);
+            const selectedElements = this.scene.getSelectedElements({
+                selectedElementIds: this.state.selectedElementIds,
+                includeBoundTextElement: true,
+                includeElementsInFrames: true,
+            });
+            const elbowArrow = selectedElements.find(isElbowArrow);
+            const step = elbowArrow
+                ? elbowArrow.startBinding || elbowArrow.endBinding
+                    ? 0
+                    : ELEMENT_TRANSLATE_AMOUNT
+                : (this.state.gridSize &&
+                    (event.shiftKey
+                        ? ELEMENT_TRANSLATE_AMOUNT
+                        : this.state.gridSize)) ||
+                    (event.shiftKey
+                        ? ELEMENT_SHIFT_TRANSLATE_AMOUNT
+                        : ELEMENT_TRANSLATE_AMOUNT);
             let offsetX = 0;
             let offsetY = 0;
             if (event.key === KEYS.ARROW_LEFT) {
@@ -2531,22 +2549,17 @@ class App extends React.Component {
             else if (event.key === KEYS.ARROW_DOWN) {
                 offsetY = step;
             }
-            const selectedElements = this.scene.getSelectedElements({
-                selectedElementIds: this.state.selectedElementIds,
-                includeBoundTextElement: true,
-                includeElementsInFrames: true,
-            });
             selectedElements.forEach((element) => {
                 mutateElement(element, {
                     x: element.x + offsetX,
                     y: element.y + offsetY,
                 });
-                updateBoundElements(element, this.scene.getNonDeletedElementsMap(), {
+                updateBoundElements(element, this.scene.getNonDeletedElementsMap(), this.scene, {
                     simultaneouslyUpdated: selectedElements,
                 });
             });
             this.setState({
-                suggestedBindings: getSuggestedBindingsForArrows(selectedElements, this),
+                suggestedBindings: getSuggestedBindingsForArrows(selectedElements.filter((element) => element.id !== elbowArrow?.id || step !== 0), this.scene.getNonDeletedElementsMap()),
             });
             event.preventDefault();
         }
@@ -2560,9 +2573,11 @@ class App extends React.Component {
                             this.state.editingLinearElement.elementId !==
                                 selectedElements[0].id) {
                             this.store.shouldCaptureIncrement();
-                            this.setState({
-                                editingLinearElement: new LinearElementEditor(selectedElement),
-                            });
+                            if (!isElbowArrow(selectedElement)) {
+                                this.setState({
+                                    editingLinearElement: new LinearElementEditor(selectedElement),
+                                });
+                            }
                         }
                     }
                 }
@@ -2599,6 +2614,15 @@ class App extends React.Component {
                 if (this.state.activeTool.type !== shape) {
                     trackEvent("toolbar", shape, `keyboard (${this.device.editor.isMobile ? "mobile" : "desktop"})`);
                 }
+                if (shape === "arrow" && this.state.activeTool.type === "arrow") {
+                    this.setState((prevState) => ({
+                        currentItemArrowType: prevState.currentItemArrowType === ARROW_TYPE.sharp
+                            ? ARROW_TYPE.round
+                            : prevState.currentItemArrowType === ARROW_TYPE.round
+                                ? ARROW_TYPE.elbow
+                                : ARROW_TYPE.sharp,
+                    }));
+                }
                 this.setActiveTool({ type: shape });
                 event.stopPropagation();
             }
@@ -2631,6 +2655,21 @@ class App extends React.Component {
                 event.stopPropagation();
             }
         }
+        if (!event[KEYS.CTRL_OR_CMD] &&
+            event.shiftKey &&
+            event.key.toLowerCase() === KEYS.F) {
+            const selectedElements = this.scene.getSelectedElements(this.state);
+            if (this.state.activeTool.type === "selection" &&
+                !selectedElements.length) {
+                return;
+            }
+            if (this.state.activeTool.type === "text" ||
+                selectedElements.find((element) => isTextElement(element) ||
+                    getBoundTextElement(element, this.scene.getNonDeletedElementsMap()))) {
+                event.preventDefault();
+                this.setState({ openPopup: "fontFamily" });
+            }
+        }
         if (event.key === KEYS.K && !event.altKey && !event[KEYS.CTRL_OR_CMD]) {
             if (this.state.activeTool.type === "laser") {
                 this.setActiveTool({ type: "selection" });
@@ -2685,7 +2724,7 @@ class App extends React.Component {
             this.setState({ isBindingEnabled: true });
         }
         if (isArrowKey(event.key)) {
-            bindOrUnbindLinearElements(this.scene.getSelectedElements(this.state).filter(isLinearElement), this, isBindingEnabled(this.state), this.state.selectedLinearElement?.selectedPointsIndices ?? []);
+            bindOrUnbindLinearElements(this.scene.getSelectedElements(this.state).filter(isLinearElement), this.scene.getNonDeletedElementsMap(), this.scene.getNonDeletedElements(), this.scene, isBindingEnabled(this.state), this.state.selectedLinearElement?.selectedPointsIndices ?? []);
             this.setState({ suggestedBindings: [] });
         }
     });
@@ -2855,7 +2894,7 @@ class App extends React.Component {
             onChange: withBatchedUpdates((nextOriginalText) => {
                 updateElement(nextOriginalText, false);
                 if (isNonDeletedElement(element)) {
-                    updateBoundElements(element, elementsMap);
+                    updateBoundElements(element, elementsMap, this.scene);
                 }
             }),
             onSubmit: withBatchedUpdates(({ viaKeyboard, nextOriginalText }) => {
@@ -2923,57 +2962,6 @@ class App extends React.Component {
         }
         return null;
     }
-    /**
-     * get the pure geometric shape of an excalidraw element
-     * which is then used for hit detection
-     */
-    getElementShape(element) {
-        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, this.scene.getNonDeletedElementsMap());
-                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, this.scene.getNonDeletedElementsMap());
-                return getFreedrawShape(element, [cx, cy], shouldTestInside(element));
-            }
-        }
-    }
-    getBoundTextShape(element) {
-        const boundTextElement = getBoundTextElement(element, this.scene.getNonDeletedElementsMap());
-        if (boundTextElement) {
-            if (element.type === "arrow") {
-                return this.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, this.scene.getNonDeletedElementsMap()),
-                });
-            }
-            return this.getElementShape(boundTextElement);
-        }
-        return null;
-    }
     getElementAtPosition(x, y, opts) {
         const allHitElements = this.getElementsAtPosition(x, y, opts?.includeBoundTextElement, opts?.includeLockedElements);
         if (allHitElements.length > 1) {
@@ -2991,7 +2979,7 @@ class App extends React.Component {
                 x,
                 y,
                 element: elementWithHighestZIndex,
-                shape: this.getElementShape(elementWithHighestZIndex),
+                shape: getElementShape(elementWithHighestZIndex, this.scene.getNonDeletedElementsMap()),
                 // when overlapping, we would like to be more precise
                 // this also avoids the need to update past tests
                 threshold: this.getElementHitThreshold() / 2,
@@ -3053,7 +3041,7 @@ class App extends React.Component {
             return isPointInShape([x, y], selectionShape);
         }
         // take bound text element into consideration for hit collision as well
-        const hitBoundTextOfElement = hitElementBoundText(x, y, this.getBoundTextShape(element));
+        const hitBoundTextOfElement = hitElementBoundText(x, y, getBoundTextShape(element, this.scene.getNonDeletedElementsMap()));
         if (hitBoundTextOfElement) {
             return true;
         }
@@ -3061,7 +3049,7 @@ class App extends React.Component {
             x,
             y,
             element,
-            shape: this.getElementShape(element),
+            shape: getElementShape(element, this.scene.getNonDeletedElementsMap()),
             threshold: this.getElementHitThreshold(),
             frameNameBound: isFrameLikeElement(element)
                 ? this.frameNameBoundsCache.get(element)
@@ -3088,7 +3076,7 @@ class App extends React.Component {
                     x,
                     y,
                     element: elements[index],
-                    shape: this.getElementShape(elements[index]),
+                    shape: getElementShape(elements[index], this.scene.getNonDeletedElementsMap()),
                     threshold: this.getElementHitThreshold(),
                 })) {
                 hitElement = elements[index];
@@ -3128,7 +3116,7 @@ class App extends React.Component {
             existingTextElement = this.getTextElementAtPosition(sceneX, sceneY);
         }
         const fontFamily = existingTextElement?.fontFamily || this.state.currentItemFontFamily;
-        const lineHeight = existingTextElement?.lineHeight || getDefaultLineHeight(fontFamily);
+        const lineHeight = existingTextElement?.lineHeight || getLineHeight(fontFamily);
         const fontSize = this.state.currentItemFontSize;
         if (!existingTextElement &&
             shouldBindToContainer &&
@@ -3228,7 +3216,9 @@ class App extends React.Component {
         if (selectedElements.length === 1 && isLinearElement(selectedElements[0])) {
             if (event[KEYS.CTRL_OR_CMD] &&
                 (!this.state.editingLinearElement ||
-                    this.state.editingLinearElement.elementId !== selectedElements[0].id)) {
+                    this.state.editingLinearElement.elementId !==
+                        selectedElements[0].id) &&
+                !isElbowArrow(selectedElements[0])) {
                 this.store.shouldCaptureIncrement();
                 this.setState({
                     editingLinearElement: new LinearElementEditor(selectedElements[0]),
@@ -3272,7 +3262,7 @@ class App extends React.Component {
                         x: sceneX,
                         y: sceneY,
                         element: container,
-                        shape: this.getElementShape(container),
+                        shape: getElementShape(container, this.scene.getNonDeletedElementsMap()),
                         threshold: this.getElementHitThreshold(),
                     })) {
                     const midPoint = getContainerCenter(container, this.state, this.scene.getNonDeletedElementsMap());
@@ -3446,7 +3436,7 @@ class App extends React.Component {
         }
         if (this.state.editingLinearElement &&
             !this.state.editingLinearElement.isDragging) {
-            const editingLinearElement = LinearElementEditor.handlePointerMove(event, scenePointerX, scenePointerY, this.state, this.scene.getNonDeletedElementsMap());
+            const editingLinearElement = LinearElementEditor.handlePointerMove(event, scenePointerX, scenePointerY, this.state, this.scene);
             if (editingLinearElement &&
                 editingLinearElement !== this.state.editingLinearElement) {
                 // Since we are reading from previous state which is not possible with
@@ -3508,7 +3498,9 @@ class App extends React.Component {
                 });
             }
             else {
-                const [gridX, gridY] = getGridPoint(scenePointerX, scenePointerY, event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);
+                const [gridX, gridY] = getGridPoint(scenePointerX, scenePointerY, event[KEYS.CTRL_OR_CMD] || isElbowArrow(multiElement)
+                    ? null
+                    : this.state.gridSize);
                 const [lastCommittedX, lastCommittedY] = multiElement?.lastCommittedPoint ?? [0, 0];
                 let dxFromLastCommitted = gridX - rx - lastCommittedX;
                 let dyFromLastCommitted = gridY - ry - lastCommittedY;
@@ -3523,16 +3515,29 @@ class App extends React.Component {
                 if (isPathALoop(points, this.state.zoom.value)) {
                     setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
                 }
-                // update last uncommitted point
-                mutateElement(multiElement, {
-                    points: [
+                if (isElbowArrow(multiElement)) {
+                    mutateElbowArrow(multiElement, this.scene, [
                         ...points.slice(0, -1),
                         [
                             lastCommittedX + dxFromLastCommitted,
                             lastCommittedY + dyFromLastCommitted,
                         ],
-                    ],
-                });
+                    ], undefined, undefined, {
+                        isDragging: true,
+                    });
+                }
+                else {
+                    // update last uncommitted point
+                    mutateElement(multiElement, {
+                        points: [
+                            ...points.slice(0, -1),
+                            [
+                                lastCommittedX + dxFromLastCommitted,
+                                lastCommittedY + dyFromLastCommitted,
+                            ],
+                        ],
+                    });
+                }
             }
             return;
         }
@@ -3553,8 +3558,9 @@ class App extends React.Component {
             if (this.state.selectedLinearElement) {
                 this.handleHoverSelectedLinearElement(this.state.selectedLinearElement, scenePointerX, scenePointerY);
             }
-            if (!this.state.selectedLinearElement ||
-                this.state.selectedLinearElement.hoverPointIndex === -1) {
+            if ((!this.state.selectedLinearElement ||
+                this.state.selectedLinearElement.hoverPointIndex === -1) &&
+                !(selectedElements.length === 1 && isElbowArrow(selectedElements[0]))) {
                 const elementWithTransformHandleType = getElementWithTransformHandleType(elements, this.state, scenePointerX, scenePointerY, this.state.zoom, event.pointerType, this.scene.getNonDeletedElementsMap(), this.device);
                 if (elementWithTransformHandleType &&
                     elementWithTransformHandleType.transformHandleType) {
@@ -3724,7 +3730,7 @@ class App extends React.Component {
                 x: scenePointerX,
                 y: scenePointerY,
                 element,
-                shape: this.getElementShape(element),
+                shape: getElementShape(element, this.scene.getNonDeletedElementsMap()),
             })) {
                 hoverPointIndex = LinearElementEditor.getPointIndexUnderCursor(element, elementsMap, this.state.zoom, scenePointerX, scenePointerY);
                 segmentMidPointHoveredCoords =
@@ -3737,7 +3743,10 @@ class App extends React.Component {
                 }
             }
             else if (this.hitElement(scenePointerX, scenePointerY, element)) {
-                setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE);
+                if (!isElbowArrow(element) ||
+                    !(element.startBinding || element.endBinding)) {
+                    setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE);
+                }
             }
             if (this.state.selectedLinearElement.hoverPointIndex !== hoverPointIndex) {
                 this.setState({
@@ -4150,10 +4159,13 @@ class App extends React.Component {
         const origin = viewportCoordsToSceneCoords(event, this.state);
         const selectedElements = this.scene.getSelectedElements(this.state);
         const [minX, minY, maxX, maxY] = getCommonBounds(selectedElements);
+        const isElbowArrowOnly = selectedElements.findIndex(isElbowArrow) === 0;
         return {
             origin,
             withCmdOrCtrl: event[KEYS.CTRL_OR_CMD],
-            originInGrid: tupleToCoors(getGridPoint(origin.x, origin.y, event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize)),
+            originInGrid: tupleToCoors(getGridPoint(origin.x, origin.y, event[KEYS.CTRL_OR_CMD] || isElbowArrowOnly
+                ? null
+                : this.state.gridSize)),
             scrollbars: isOverScrollBars(currentScrollBars, event.clientX - this.state.offsetLeft, event.clientY - this.state.offsetTop),
             // we need to duplicate because we'll be updating this state
             lastCoords: { ...origin },
@@ -4270,7 +4282,7 @@ class App extends React.Component {
             else {
                 if (this.state.selectedLinearElement) {
                     const linearElementEditor = this.state.editingLinearElement || this.state.selectedLinearElement;
-                    const ret = LinearElementEditor.handlePointerDown(event, this.state, this.store, pointerDownState.origin, linearElementEditor, this);
+                    const ret = LinearElementEditor.handlePointerDown(event, this.state, this.store, pointerDownState.origin, linearElementEditor, this.scene);
                     if (ret.hitElement) {
                         pointerDownState.hit.element = ret.hitElement;
                     }
@@ -4510,7 +4522,7 @@ class App extends React.Component {
             points: [[0, 0]],
             pressures,
         });
-        const boundElement = getHoveredElementForBinding(pointerDownState.origin, this);
+        const boundElement = getHoveredElementForBinding(pointerDownState.origin, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());
         this.scene.insertElement(element);
         this.setState({
             draggingElement: element,
@@ -4616,6 +4628,15 @@ class App extends React.Component {
                 this.actionManager.executeAction(actionFinalize);
                 return;
             }
+            // Elbow arrows cannot be created by putting down points
+            // only the start and end points can be defined
+            if (isElbowArrow(multiElement) && multiElement.points.length > 1) {
+                mutateElement(multiElement, {
+                    lastCommittedPoint: multiElement.points[multiElement.points.length - 1],
+                });
+                this.actionManager.executeAction(actionFinalize);
+                return;
+            }
             const { x: rx, y: ry, lastCommittedPoint } = multiElement;
             // clicking inside commit zone → finalize arrow
             if (multiElement.points.length > 1 &&
@@ -4651,25 +4672,46 @@ class App extends React.Component {
             const [startArrowhead, endArrowhead] = elementType === "arrow"
                 ? [currentItemStartArrowhead, currentItemEndArrowhead]
                 : [null, null];
-            const element = newLinearElement({
-                type: elementType,
-                x: gridX,
-                y: gridY,
-                strokeColor: this.state.currentItemStrokeColor,
-                backgroundColor: this.state.currentItemBackgroundColor,
-                fillStyle: this.state.currentItemFillStyle,
-                strokeWidth: this.state.currentItemStrokeWidth,
-                strokeStyle: this.state.currentItemStrokeStyle,
-                roughness: this.state.currentItemRoughness,
-                opacity: this.state.currentItemOpacity,
-                roundness: this.state.currentItemRoundness === "round"
-                    ? { type: ROUNDNESS.PROPORTIONAL_RADIUS }
-                    : null,
-                startArrowhead,
-                endArrowhead,
-                locked: false,
-                frameId: topLayerFrame ? topLayerFrame.id : null,
-            });
+            const element = elementType === "arrow"
+                ? newArrowElement({
+                    type: elementType,
+                    x: gridX,
+                    y: gridY,
+                    strokeColor: this.state.currentItemStrokeColor,
+                    backgroundColor: this.state.currentItemBackgroundColor,
+                    fillStyle: this.state.currentItemFillStyle,
+                    strokeWidth: this.state.currentItemStrokeWidth,
+                    strokeStyle: this.state.currentItemStrokeStyle,
+                    roughness: this.state.currentItemRoughness,
+                    opacity: this.state.currentItemOpacity,
+                    roundness: this.state.currentItemArrowType === ARROW_TYPE.round
+                        ? { type: ROUNDNESS.PROPORTIONAL_RADIUS }
+                        : // note, roundness doesn't have any effect for elbow arrows,
+                            // but it's best to set it to null as well
+                            null,
+                    startArrowhead,
+                    endArrowhead,
+                    locked: false,
+                    frameId: topLayerFrame ? topLayerFrame.id : null,
+                    elbowed: this.state.currentItemArrowType === ARROW_TYPE.elbow,
+                })
+                : newLinearElement({
+                    type: elementType,
+                    x: gridX,
+                    y: gridY,
+                    strokeColor: this.state.currentItemStrokeColor,
+                    backgroundColor: this.state.currentItemBackgroundColor,
+                    fillStyle: this.state.currentItemFillStyle,
+                    strokeWidth: this.state.currentItemStrokeWidth,
+                    strokeStyle: this.state.currentItemStrokeStyle,
+                    roughness: this.state.currentItemRoughness,
+                    opacity: this.state.currentItemOpacity,
+                    roundness: this.state.currentItemRoundness === "round"
+                        ? { type: ROUNDNESS.PROPORTIONAL_RADIUS }
+                        : null,
+                    locked: false,
+                    frameId: topLayerFrame ? topLayerFrame.id : null,
+                });
             this.setState((prevState) => {
                 const nextSelectedElementIds = {
                     ...prevState.selectedElementIds,
@@ -4682,7 +4724,7 @@ class App extends React.Component {
             mutateElement(element, {
                 points: [...element.points, [0, 0]],
             });
-            const boundElement = getHoveredElementForBinding(pointerDownState.origin, this);
+            const boundElement = getHoveredElementForBinding(pointerDownState.origin, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap(), isElbowArrow(element));
             this.scene.insertElement(element);
             this.setState({
                 draggingElement: element,
@@ -4892,7 +4934,7 @@ class App extends React.Component {
                 }
                 const didDrag = LinearElementEditor.handlePointDragging(event, this.state, pointerCoords.x, pointerCoords.y, (element, pointsSceneCoords) => {
                     this.maybeSuggestBindingsForLinearElementAtCoords(element, pointsSceneCoords);
-                }, linearElementEditor, this.scene.getNonDeletedElementsMap());
+                }, linearElementEditor, this.scene);
                 if (didDrag) {
                     pointerDownState.lastCoords.x = pointerCoords.x;
                     pointerDownState.lastCoords.y = pointerCoords.y;
@@ -4978,10 +5020,14 @@ class App extends React.Component {
                     // when we're editing the name of a frame, we want the user to be
                     // able to select and interact with the text input
                     !this.state.editingFrame &&
-                        dragSelectedElements(pointerDownState, selectedElements, dragOffset, this.state, this.scene, snapOffset, event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);
-                    this.setState({
-                        suggestedBindings: getSuggestedBindingsForArrows(selectedElements, this),
-                    });
+                        dragSelectedElements(pointerDownState, selectedElements, dragOffset, this.scene, snapOffset, event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);
+                    if (selectedElements.length !== 1 ||
+                        !isElbowArrow(selectedElements[0])) {
+                        this.setState({
+                            suggestedBindings: getSuggestedBindingsForArrows(selectedElements, this.scene.getNonDeletedElementsMap()),
+                        });
+                    }
+                    //}
                     // We duplicate the selected element if alt is pressed on pointer move
                     if (event.altKey && !pointerDownState.hit.hasBeenDuplicated) {
                         // Move the currently selected elements to the top of the z index stack, and
@@ -5074,6 +5120,11 @@ class App extends React.Component {
                         points: [...points, [dx, dy]],
                     });
                 }
+                else if (points.length > 1 && isElbowArrow(draggingElement)) {
+                    mutateElbowArrow(draggingElement, this.scene, [...points.slice(0, -1), [dx, dy]], [0, 0], undefined, {
+                        isDragging: true,
+                    });
+                }
                 else if (points.length === 2) {
                     mutateElement(draggingElement, {
                         points: [...points.slice(0, -1), [dx, dy]],
@@ -5217,7 +5268,7 @@ class App extends React.Component {
                     this.actionManager.executeAction(actionFinalize);
                 }
                 else {
-                    const editingLinearElement = LinearElementEditor.handlePointerUp(childEvent, this.state.editingLinearElement, this.state, this);
+                    const editingLinearElement = LinearElementEditor.handlePointerUp(childEvent, this.state.editingLinearElement, this.state, this.scene);
                     if (editingLinearElement !== this.state.editingLinearElement) {
                         this.setState({
                             editingLinearElement,
@@ -5236,11 +5287,11 @@ class App extends React.Component {
                     }
                 }
                 else {
-                    const linearElementEditor = LinearElementEditor.handlePointerUp(childEvent, this.state.selectedLinearElement, this.state, this);
+                    const linearElementEditor = LinearElementEditor.handlePointerUp(childEvent, this.state.selectedLinearElement, this.state, this.scene);
                     const { startBindingElement, endBindingElement } = linearElementEditor;
                     const element = this.scene.getElement(linearElementEditor.elementId);
                     if (isBindingElement(element)) {
-                        bindOrUnbindLinearElement(element, startBindingElement, endBindingElement, elementsMap);
+                        bindOrUnbindLinearElement(element, startBindingElement, endBindingElement, elementsMap, this.scene);
                     }
                     if (linearElementEditor !== this.state.selectedLinearElement) {
                         this.setState({
@@ -5328,7 +5379,7 @@ class App extends React.Component {
                 else if (pointerDownState.drag.hasOccurred && !multiElement) {
                     if (isBindingEnabled(this.state) &&
                         isBindingElement(draggingElement, false)) {
-                        maybeBindLinearElement(draggingElement, this.state, pointerCoords, this);
+                        maybeBindLinearElement(draggingElement, this.state, pointerCoords, this.scene.getNonDeletedElementsMap(), this.scene.getNonDeletedElements());
                     }
                     this.setState({ suggestedBindings: [], startBoundElement: null });
                     if (!activeTool.locked) {
@@ -5636,7 +5687,7 @@ class App extends React.Component {
                         x: pointerDownState.origin.x,
                         y: pointerDownState.origin.y,
                         element: hitElement,
-                        shape: this.getElementShape(hitElement),
+                        shape: getElementShape(hitElement, this.scene.getNonDeletedElementsMap()),
                         threshold: this.getElementHitThreshold(),
                         frameNameBound: isFrameLikeElement(hitElement)
                             ? this.frameNameBoundsCache.get(hitElement)
@@ -5685,7 +5736,7 @@ class App extends React.Component {
                 const linearElements = this.scene
                     .getSelectedElements(this.state)
                     .filter(isLinearElement);
-                bindOrUnbindLinearElements(linearElements, this, isBindingEnabled(this.state), this.state.selectedLinearElement?.selectedPointsIndices ?? []);
+                bindOrUnbindLinearElements(linearElements, this.scene.getNonDeletedElementsMap(), this.scene.getNonDeletedElements(), this.scene, isBindingEnabled(this.state), this.state.selectedLinearElement?.selectedPointsIndices ?? []);
             }
             if (activeTool.type === "laser") {
                 this.laserTrails.endPath();
@@ -6028,7 +6079,7 @@ class App extends React.Component {
         }
     };
     maybeSuggestBindingAtCursor = (pointerCoords) => {
-        const hoveredBindableElement = getHoveredElementForBinding(pointerCoords, this);
+        const hoveredBindableElement = getHoveredElementForBinding(pointerCoords, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());
         this.setState({
             suggestedBindings: hoveredBindableElement != null ? [hoveredBindableElement] : [],
         });
@@ -6043,7 +6094,7 @@ class App extends React.Component {
             return;
         }
         const suggestedBindings = pointerCoords.reduce((acc, coords) => {
-            const hoveredBindableElement = getHoveredElementForBinding(coords, this);
+            const hoveredBindableElement = getHoveredElementForBinding(coords, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap(), isArrowElement(linearElement) && isElbowArrow(linearElement));
             if (hoveredBindableElement != null &&
                 !isLinearElementSimpleAndAlreadyBound(linearElement, oppositeBindingBoundElement?.id, hoveredBindableElement)) {
                 acc.push(hoveredBindableElement);
@@ -6373,8 +6424,8 @@ class App extends React.Component {
         }
         if (transformElements(pointerDownState.originalElements, transformHandleType, selectedElements, this.scene.getElementsMapIncludingDeleted(), shouldRotateWithDiscreteAngle(event), shouldResizeFromCenter(event), selectedElements.some((element) => isImageElement(element))
             ? !shouldMaintainAspectRatio(event)
-            : shouldMaintainAspectRatio(event), resizeX, resizeY, pointerDownState.resize.center.x, pointerDownState.resize.center.y)) {
-            const suggestedBindings = getSuggestedBindingsForArrows(selectedElements, this);
+            : shouldMaintainAspectRatio(event), resizeX, resizeY, pointerDownState.resize.center.x, pointerDownState.resize.center.y, this.scene)) {
+            const suggestedBindings = getSuggestedBindingsForArrows(selectedElements, this.scene.getNonDeletedElementsMap());
             const elementsToHighlight = new Set();
             selectedFrames.forEach((frame) => {
                 getElementsInResizingFrame(this.scene.getNonDeletedElements(), frame, this.state, this.scene.getNonDeletedElementsMap()).forEach((element) => elementsToHighlight.add(element));
@@ -6611,6 +6662,12 @@ export const createTestHook = () => {
                     return this.app?.scene.replaceAllElements(syncInvalidIndices(elements));
                 },
             },
+            scene: {
+                configurable: true,
+                get() {
+                    return this.app?.scene;
+                },
+            },
         });
     }
 };