feat: bind to mid point

packages/element/src/binding.ts

@@ -59,6 +59,7 @@ import {
   isFixedPointBinding,
   isFrameLikeElement,
   isLinearElement,
+  isRectangularElement,
   isRectanguloidElement,
   isTextElement,
 } from "./typeChecks";
@@ -66,6 +67,11 @@ import {
 import { aabbForElement, getElementShape, pointInsideBounds } from "./shapes";
 import { updateElbowArrowPoints } from "./elbowArrow";
 
+import {
+  deconstructDiamondElement,
+  deconstructRectanguloidElement,
+} from "./utils";
+
 import type { Scene } from "./Scene";
 
 import type { Bounds } from "./bounds";
@@ -85,6 +91,7 @@ import type {
   FixedPoint,
   FixedPointBinding,
   PointsPositionUpdates,
+  ExcalidrawRectanguloidElement,
 } from "./types";
 
 export type SuggestedBinding =
@@ -2223,3 +2230,434 @@ export const normalizeFixedPoint = <T extends FixedPoint | null>(
   }
   return fixedPoint as any as T extends null ? null : FixedPoint;
 };
+
+type Side =
+  | "top"
+  | "top-right"
+  | "right"
+  | "bottom-right"
+  | "bottom"
+  | "bottom-left"
+  | "left"
+  | "top-left";
+type ShapeType = "rectangle" | "ellipse" | "diamond";
+const getShapeType = (element: ExcalidrawBindableElement): ShapeType => {
+  if (element.type === "ellipse" || element.type === "diamond") {
+    return element.type;
+  }
+  return "rectangle";
+};
+
+interface SectorConfig {
+  // center angle of the sector in degrees
+  centerAngle: number;
+  // width of the sector in degrees
+  sectorWidth: number;
+  side: Side;
+}
+
+// Define sector configurations for different shape types
+const SHAPE_CONFIGS: Record<ShapeType, SectorConfig[]> = {
+  // rectangle: 15° corners, 75° edges
+  rectangle: [
+    { centerAngle: 0, sectorWidth: 75, side: "right" },
+    { centerAngle: 45, sectorWidth: 15, side: "bottom-right" },
+    { centerAngle: 90, sectorWidth: 75, side: "bottom" },
+    { centerAngle: 135, sectorWidth: 15, side: "bottom-left" },
+    { centerAngle: 180, sectorWidth: 75, side: "left" },
+    { centerAngle: 225, sectorWidth: 15, side: "top-left" },
+    { centerAngle: 270, sectorWidth: 75, side: "top" },
+    { centerAngle: 315, sectorWidth: 15, side: "top-right" },
+  ],
+
+  // diamond: 15° vertices, 75° edges
+  diamond: [
+    { centerAngle: 0, sectorWidth: 15, side: "right" },
+    { centerAngle: 45, sectorWidth: 75, side: "bottom-right" },
+    { centerAngle: 90, sectorWidth: 15, side: "bottom" },
+    { centerAngle: 135, sectorWidth: 75, side: "bottom-left" },
+    { centerAngle: 180, sectorWidth: 15, side: "left" },
+    { centerAngle: 225, sectorWidth: 75, side: "top-left" },
+    { centerAngle: 270, sectorWidth: 15, side: "top" },
+    { centerAngle: 315, sectorWidth: 75, side: "top-right" },
+  ],
+
+  // ellipse: 15° cardinal points, 75° diagonals
+  ellipse: [
+    { centerAngle: 0, sectorWidth: 15, side: "right" },
+    { centerAngle: 45, sectorWidth: 75, side: "bottom-right" },
+    { centerAngle: 90, sectorWidth: 15, side: "bottom" },
+    { centerAngle: 135, sectorWidth: 75, side: "bottom-left" },
+    { centerAngle: 180, sectorWidth: 15, side: "left" },
+    { centerAngle: 225, sectorWidth: 75, side: "top-left" },
+    { centerAngle: 270, sectorWidth: 15, side: "top" },
+    { centerAngle: 315, sectorWidth: 75, side: "top-right" },
+  ],
+};
+
+const getSectorBoundaries = (
+  config: SectorConfig[],
+): Array<{ start: number; end: number; side: Side }> => {
+  return config.map((sector, index) => {
+    const halfWidth = sector.sectorWidth / 2;
+    let start = sector.centerAngle - halfWidth;
+    let end = sector.centerAngle + halfWidth;
+
+    // normalize angles to [0, 360) range
+    start = ((start % 360) + 360) % 360;
+    end = ((end % 360) + 360) % 360;
+
+    return { start, end, side: sector.side };
+  });
+};
+
+// determine which side a point falls into using adaptive sectors
+const getShapeSideAdaptive = (
+  fixedPoint: FixedPoint,
+  shapeType: ShapeType,
+): Side => {
+  const [x, y] = fixedPoint;
+
+  // convert to centered coordinates
+  const centerX = x - 0.5;
+  const centerY = y - 0.5;
+
+  // calculate angle
+  let angle = Math.atan2(centerY, centerX);
+  if (angle < 0) {
+    angle += 2 * Math.PI;
+  }
+  const degrees = (angle * 180) / Math.PI;
+
+  // get sector configuration for this shape type
+  const config = SHAPE_CONFIGS[shapeType];
+  const boundaries = getSectorBoundaries(config);
+
+  // find which sector the angle falls into
+  for (const boundary of boundaries) {
+    if (boundary.start <= boundary.end) {
+      // Normal case: sector doesn't cross 0°
+      if (degrees >= boundary.start && degrees <= boundary.end) {
+        return boundary.side;
+      }
+    } else if (degrees >= boundary.start || degrees <= boundary.end) {
+      return boundary.side;
+    }
+  }
+
+  // fallback - find nearest sector center
+  let minDiff = Infinity;
+  let nearestSide = config[0].side;
+
+  for (const sector of config) {
+    let diff = Math.abs(degrees - sector.centerAngle);
+    // handle wraparound
+    if (diff > 180) {
+      diff = 360 - diff;
+    }
+
+    if (diff < minDiff) {
+      minDiff = diff;
+      nearestSide = sector.side;
+    }
+  }
+
+  return nearestSide;
+};
+
+export const getBindingSideMidPoint = (
+  binding: FixedPointBinding,
+  elementsMap: ElementsMap,
+) => {
+  const bindableElement = elementsMap.get(binding.elementId);
+  if (
+    !bindableElement ||
+    bindableElement.isDeleted ||
+    !isBindableElement(bindableElement)
+  ) {
+    return null;
+  }
+
+  const center = elementCenterPoint(bindableElement);
+  const shapeType = getShapeType(bindableElement);
+  const side = getShapeSideAdaptive(
+    normalizeFixedPoint(binding.fixedPoint),
+    shapeType,
+  );
+
+  // small offset to avoid precision issues in elbow
+  const OFFSET = 0.01;
+
+  if (bindableElement.type === "diamond") {
+    const [sides, corners] = deconstructDiamondElement(bindableElement);
+    const [topRight, bottomRight, bottomLeft, topLeft] = sides;
+
+    let x: number;
+    let y: number;
+    switch (side) {
+      case "left": {
+        // left vertex - use the center of the left corner curve
+        if (corners.length >= 3) {
+          const leftCorner = corners[2];
+          const midPoint = leftCorner[1];
+          x = midPoint[0] - OFFSET;
+          y = midPoint[1];
+        } else {
+          // fallback for non-rounded diamond
+          const midPoint = getMidPoint(bottomLeft[1], topLeft[0]);
+          x = midPoint[0] - OFFSET;
+          y = midPoint[1];
+        }
+        break;
+      }
+      case "right": {
+        if (corners.length >= 1) {
+          const rightCorner = corners[0];
+          const midPoint = rightCorner[1];
+          x = midPoint[0] + OFFSET;
+          y = midPoint[1];
+        } else {
+          const midPoint = getMidPoint(topRight[1], bottomRight[0]);
+          x = midPoint[0] + OFFSET;
+          y = midPoint[1];
+        }
+        break;
+      }
+      case "top": {
+        if (corners.length >= 4) {
+          const topCorner = corners[3];
+          const midPoint = topCorner[1];
+          x = midPoint[0];
+          y = midPoint[1] - OFFSET;
+        } else {
+          const midPoint = getMidPoint(topLeft[1], topRight[0]);
+          x = midPoint[0];
+          y = midPoint[1] - OFFSET;
+        }
+        break;
+      }
+      case "bottom": {
+        if (corners.length >= 2) {
+          const bottomCorner = corners[1];
+          const midPoint = bottomCorner[1];
+          x = midPoint[0];
+          y = midPoint[1] + OFFSET;
+        } else {
+          const midPoint = getMidPoint(bottomRight[1], bottomLeft[0]);
+          x = midPoint[0];
+          y = midPoint[1] + OFFSET;
+        }
+        break;
+      }
+      case "top-right": {
+        const midPoint = getMidPoint(topRight[0], topRight[1]);
+
+        x = midPoint[0] + OFFSET * 0.707;
+        y = midPoint[1] - OFFSET * 0.707;
+        break;
+      }
+      case "bottom-right": {
+        const midPoint = getMidPoint(bottomRight[0], bottomRight[1]);
+
+        x = midPoint[0] + OFFSET * 0.707;
+        y = midPoint[1] + OFFSET * 0.707;
+        break;
+      }
+      case "bottom-left": {
+        const midPoint = getMidPoint(bottomLeft[0], bottomLeft[1]);
+        x = midPoint[0] - OFFSET * 0.707;
+        y = midPoint[1] + OFFSET * 0.707;
+        break;
+      }
+      case "top-left": {
+        const midPoint = getMidPoint(topLeft[0], topLeft[1]);
+        x = midPoint[0] - OFFSET * 0.707;
+        y = midPoint[1] - OFFSET * 0.707;
+        break;
+      }
+      default: {
+        return null;
+      }
+    }
+
+    return pointRotateRads(pointFrom(x, y), center, bindableElement.angle);
+  }
+
+  if (bindableElement.type === "ellipse") {
+    const ellipseCenterX = bindableElement.x + bindableElement.width / 2;
+    const ellipseCenterY = bindableElement.y + bindableElement.height / 2;
+    const radiusX = bindableElement.width / 2;
+    const radiusY = bindableElement.height / 2;
+
+    let x: number;
+    let y: number;
+
+    switch (side) {
+      case "top": {
+        x = ellipseCenterX;
+        y = ellipseCenterY - radiusY - OFFSET;
+        break;
+      }
+      case "right": {
+        x = ellipseCenterX + radiusX + OFFSET;
+        y = ellipseCenterY;
+        break;
+      }
+      case "bottom": {
+        x = ellipseCenterX;
+        y = ellipseCenterY + radiusY + OFFSET;
+        break;
+      }
+      case "left": {
+        x = ellipseCenterX - radiusX - OFFSET;
+        y = ellipseCenterY;
+        break;
+      }
+      case "top-right": {
+        const angle = -Math.PI / 4;
+        const ellipseX = radiusX * Math.cos(angle);
+        const ellipseY = radiusY * Math.sin(angle);
+        x = ellipseCenterX + ellipseX + OFFSET * 0.707;
+        y = ellipseCenterY + ellipseY - OFFSET * 0.707;
+        break;
+      }
+      case "bottom-right": {
+        const angle = Math.PI / 4;
+        const ellipseX = radiusX * Math.cos(angle);
+        const ellipseY = radiusY * Math.sin(angle);
+        x = ellipseCenterX + ellipseX + OFFSET * 0.707;
+        y = ellipseCenterY + ellipseY + OFFSET * 0.707;
+        break;
+      }
+      case "bottom-left": {
+        const angle = (3 * Math.PI) / 4;
+        const ellipseX = radiusX * Math.cos(angle);
+        const ellipseY = radiusY * Math.sin(angle);
+        x = ellipseCenterX + ellipseX - OFFSET * 0.707;
+        y = ellipseCenterY + ellipseY + OFFSET * 0.707;
+        break;
+      }
+      case "top-left": {
+        const angle = (-3 * Math.PI) / 4;
+        const ellipseX = radiusX * Math.cos(angle);
+        const ellipseY = radiusY * Math.sin(angle);
+        x = ellipseCenterX + ellipseX - OFFSET * 0.707;
+        y = ellipseCenterY + ellipseY - OFFSET * 0.707;
+        break;
+      }
+      default: {
+        return null;
+      }
+    }
+
+    return pointRotateRads(pointFrom(x, y), center, bindableElement.angle);
+  }
+
+  if (isRectangularElement(bindableElement)) {
+    const [sides, corners] = deconstructRectanguloidElement(
+      bindableElement as ExcalidrawRectanguloidElement,
+    );
+    const [top, right, bottom, left] = sides;
+
+    let x: number;
+    let y: number;
+    switch (side) {
+      case "top": {
+        const midPoint = getMidPoint(top[0], top[1]);
+        x = midPoint[0];
+        y = midPoint[1] - OFFSET;
+        break;
+      }
+      case "right": {
+        const midPoint = getMidPoint(right[0], right[1]);
+        x = midPoint[0] + OFFSET;
+        y = midPoint[1];
+        break;
+      }
+      case "bottom": {
+        const midPoint = getMidPoint(bottom[0], bottom[1]);
+        x = midPoint[0];
+        y = midPoint[1] + OFFSET;
+        break;
+      }
+      case "left": {
+        const midPoint = getMidPoint(left[0], left[1]);
+        x = midPoint[0] - OFFSET;
+        y = midPoint[1];
+        break;
+      }
+      case "top-left": {
+        if (corners.length >= 1) {
+          const corner = corners[0];
+
+          const p1 = corner[0];
+          const p2 = corner[3];
+          const midPoint = getMidPoint(p1, p2);
+
+          x = midPoint[0] - OFFSET * 0.707;
+          y = midPoint[1] - OFFSET * 0.707;
+        } else {
+          x = bindableElement.x - OFFSET;
+          y = bindableElement.y - OFFSET;
+        }
+        break;
+      }
+      case "top-right": {
+        if (corners.length >= 2) {
+          const corner = corners[1];
+          const p1 = corner[0];
+          const p2 = corner[3];
+          const midPoint = getMidPoint(p1, p2);
+
+          x = midPoint[0] + OFFSET * 0.707;
+          y = midPoint[1] - OFFSET * 0.707;
+        } else {
+          x = bindableElement.x + bindableElement.width + OFFSET;
+          y = bindableElement.y - OFFSET;
+        }
+        break;
+      }
+      case "bottom-right": {
+        if (corners.length >= 3) {
+          const corner = corners[2];
+          const p1 = corner[0];
+          const p2 = corner[3];
+          const midPoint = getMidPoint(p1, p2);
+
+          x = midPoint[0] + OFFSET * 0.707;
+          y = midPoint[1] + OFFSET * 0.707;
+        } else {
+          x = bindableElement.x + bindableElement.width + OFFSET;
+          y = bindableElement.y + bindableElement.height + OFFSET;
+        }
+        break;
+      }
+      case "bottom-left": {
+        if (corners.length >= 4) {
+          const corner = corners[3];
+          const p1 = corner[0];
+          const p2 = corner[3];
+          const midPoint = getMidPoint(p1, p2);
+
+          x = midPoint[0] - OFFSET * 0.707;
+          y = midPoint[1] + OFFSET * 0.707;
+        } else {
+          x = bindableElement.x - OFFSET;
+          y = bindableElement.y + bindableElement.height + OFFSET;
+        }
+        break;
+      }
+      default: {
+        return null;
+      }
+    }
+
+    return pointRotateRads(pointFrom(x, y), center, bindableElement.angle);
+  }
+
+  return null;
+};
+
+const getMidPoint = (p1: GlobalPoint, p2: GlobalPoint): GlobalPoint => {
+  return pointFrom((p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2);
+};

packages/element/src/bounds.ts

@@ -33,7 +33,6 @@ import type { AppState } from "@excalidraw/excalidraw/types";
 
 import type { Mutable } from "@excalidraw/common/utility-types";
 
-import { generateRoughOptions } from "./Shape";
 import { ShapeCache } from "./ShapeCache";
 import { LinearElementEditor } from "./linearElementEditor";
 import { getBoundTextElement, getContainerElement } from "./textElement";
@@ -52,6 +51,8 @@ import {
   deconstructRectanguloidElement,
 } from "./utils";
 
+import { generateRoughOptions } from "./Shape";
+
 import type { Drawable, Op } from "roughjs/bin/core";
 import type { Point as RoughPoint } from "roughjs/bin/geometry";
 import type {

packages/element/src/elbowArrow.ts

@@ -22,8 +22,6 @@ import {
   isDevEnv,
 } from "@excalidraw/common";
 
-import { debugDrawBounds } from "@excalidraw/utils/visualdebug";
-
 import type { AppState } from "@excalidraw/excalidraw/types";
 
 import {

packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.tsx

@@ -2,6 +2,8 @@ import { useState, useRef, useEffect, useDeferredValue } from "react";
 
 import { EDITOR_LS_KEYS, debounce, isDevEnv } from "@excalidraw/common";
 
+import { isElbowArrow } from "@excalidraw/element";
+
 import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
 
 import { useApp } from "../App";
@@ -80,6 +82,19 @@ const MermaidToExcalidraw = ({
   );
 
   const onInsertToEditor = () => {
+    convertMermaidToExcalidraw({
+      canvasRef,
+      data,
+      mermaidToExcalidrawLib,
+      setError,
+      mermaidDefinition: deferredText,
+      useElbow: arrowType === "elbow",
+    }).catch((err) => {
+      if (isDevEnv()) {
+        console.error("Failed to parse mermaid definition", err);
+      }
+    });
+
     insertToEditor({
       app,
       data,

packages/excalidraw/components/TTDDialog/common.ts

@@ -89,6 +89,7 @@ export const convertMermaidToExcalidraw = async ({
     const { elements, files } = ret;
     setError(null);
 
+    // Store the converted elements (which now include adjusted elbow arrow points)
     data.current = {
       elements: convertToExcalidrawElements(elements, {
         regenerateIds: true,

packages/excalidraw/data/transform.ts

@@ -16,7 +16,11 @@ import {
   getLineHeight,
 } from "@excalidraw/common";
 
-import { bindLinearElement } from "@excalidraw/element";
+import {
+  bindLinearElement,
+  getBindingSideMidPoint,
+  isElbowArrow,
+} from "@excalidraw/element";
 import {
   newArrowElement,
   newElement,
@@ -31,8 +35,6 @@ import { isArrowElement } from "@excalidraw/element";
 
 import { syncInvalidIndices } from "@excalidraw/element";
 
-import { redrawTextBoundingBox } from "@excalidraw/element";
-
 import { LinearElementEditor } from "@excalidraw/element";
 
 import { getCommonBounds } from "@excalidraw/element";
@@ -62,6 +64,7 @@ import type {
 } from "@excalidraw/element/types";
 
 import type { MarkOptional } from "@excalidraw/common/utility-types";
+
 import { adjustBoundTextSize } from "../components/ConvertElementTypePopup";
 
 export type ValidLinearElement = {
@@ -244,6 +247,123 @@ const bindTextToContainer = (
   return [container, textElement] as const;
 };
 
+class ElementStore {
+  excalidrawElements = new Map<string, ExcalidrawElement>();
+
+  add = (ele?: ExcalidrawElement) => {
+    if (!ele) {
+      return;
+    }
+
+    this.excalidrawElements.set(ele.id, ele);
+  };
+
+  getElements = () => {
+    return syncInvalidIndices(Array.from(this.excalidrawElements.values()));
+  };
+
+  getElementsMap = () => {
+    return toBrandedType<NonDeletedSceneElementsMap>(
+      arrayToMap(this.getElements()),
+    );
+  };
+
+  getElement = (id: string) => {
+    return this.excalidrawElements.get(id);
+  };
+}
+
+const createBoundElement = (
+  binding: ValidLinearElement["start"] | ValidLinearElement["end"],
+  linearElement: ExcalidrawArrowElement,
+  edge: "start" | "end",
+  elementStore: ElementStore,
+): ExcalidrawElement | undefined => {
+  if (!binding) {
+    return undefined;
+  }
+
+  const width = binding?.width ?? DEFAULT_DIMENSION;
+  const height = binding?.height ?? DEFAULT_DIMENSION;
+
+  let existingElement;
+  if (binding.id) {
+    existingElement = elementStore.getElement(binding.id);
+    if (!existingElement) {
+      console.error(
+        `No element for ${edge} binding with id ${binding.id} found`,
+      );
+      return undefined;
+    }
+  }
+
+  const x =
+    binding.x ||
+    (edge === "start"
+      ? linearElement.x - width
+      : linearElement.x + linearElement.width);
+  const y = binding.y || linearElement.y - height / 2;
+  const elementType = existingElement ? existingElement.type : binding.type;
+
+  if (!elementType) {
+    return undefined;
+  }
+
+  if (elementType === "text") {
+    let text = "";
+    if (existingElement && existingElement.type === "text") {
+      text = existingElement.text;
+    } else if (binding.type === "text") {
+      text = binding.text;
+    }
+    if (!text) {
+      console.error(
+        `No text found for ${edge} binding text element for ${linearElement.id}`,
+      );
+      return undefined;
+    }
+    const textElement = newTextElement({
+      x,
+      y,
+      type: "text",
+      ...existingElement,
+      ...binding,
+      text,
+    });
+    // to position the text correctly when coordinates not provided
+    Object.assign(textElement, {
+      x:
+        binding.x ||
+        (edge === "start" ? linearElement.x - textElement.width : x),
+      y: binding.y || linearElement.y - textElement.height / 2,
+    });
+    return textElement;
+  }
+  switch (elementType) {
+    case "rectangle":
+    case "ellipse":
+    case "diamond": {
+      return newElement({
+        x,
+        y,
+        width,
+        height,
+        ...existingElement,
+        ...binding,
+        type: elementType,
+      });
+    }
+    default: {
+      assertNever(
+        elementType as never,
+        `Unhandled element ${edge} type "${elementType}"`,
+        true,
+      );
+      return undefined;
+    }
+  }
+};
+
 const bindLinearElementToElement = (
   linearElement: ExcalidrawArrowElement,
   start: ValidLinearElement["start"],
@@ -264,73 +384,15 @@ const bindLinearElementToElement = (
   });
 
   if (start) {
-    const width = start?.width ?? DEFAULT_DIMENSION;
+    startBoundElement = createBoundElement(
-    const height = start?.height ?? DEFAULT_DIMENSION;
+      start,
-
+      linearElement,
-    let existingElement;
+      "start",
-    if (start.id) {
+      elementStore,
-      existingElement = elementStore.getElement(start.id);
-      if (!existingElement) {
-        console.error(`No element for start binding with id ${start.id} found`);
-      }
-    }
-
-    const startX = start.x || linearElement.x - width;
-    const startY = start.y || linearElement.y - height / 2;
-    const startType = existingElement ? existingElement.type : start.type;
-
-    if (startType) {
-      if (startType === "text") {
-        let text = "";
-        if (existingElement && existingElement.type === "text") {
-          text = existingElement.text;
-        } else if (start.type === "text") {
-          text = start.text;
-        }
-        if (!text) {
-          console.error(
-            `No text found for start binding text element for ${linearElement.id}`,
     );
-        }
+    if (startBoundElement) {
-        startBoundElement = newTextElement({
+      elementStore.add(startBoundElement);
-          x: startX,
+      scene.replaceAllElements(elementStore.getElementsMap());
-          y: startY,
-          type: "text",
-          ...existingElement,
-          ...start,
-          text,
-        });
-        // to position the text correctly when coordinates not provided
-        Object.assign(startBoundElement, {
-          x: start.x || linearElement.x - startBoundElement.width,
-          y: start.y || linearElement.y - startBoundElement.height / 2,
-        });
-      } else {
-        switch (startType) {
-          case "rectangle":
-          case "ellipse":
-          case "diamond": {
-            startBoundElement = newElement({
-              x: startX,
-              y: startY,
-              width,
-              height,
-              ...existingElement,
-              ...start,
-              type: startType,
-            });
-            break;
-          }
-          default: {
-            assertNever(
-              linearElement as never,
-              `Unhandled element start type "${start.type}"`,
-              true,
-            );
-          }
-        }
-      }
-
       bindLinearElement(
         linearElement,
         startBoundElement as ExcalidrawBindableElement,
@@ -339,73 +401,17 @@ const bindLinearElementToElement = (
       );
     }
   }
+
   if (end) {
-    const height = end?.height ?? DEFAULT_DIMENSION;
+    endBoundElement = createBoundElement(
-    const width = end?.width ?? DEFAULT_DIMENSION;
+      end,
-
+      linearElement,
-    let existingElement;
+      "end",
-    if (end.id) {
+      elementStore,
-      existingElement = elementStore.getElement(end.id);
-      if (!existingElement) {
-        console.error(`No element for end binding with id ${end.id} found`);
-      }
-    }
-    const endX = end.x || linearElement.x + linearElement.width;
-    const endY = end.y || linearElement.y - height / 2;
-    const endType = existingElement ? existingElement.type : end.type;
-
-    if (endType) {
-      if (endType === "text") {
-        let text = "";
-        if (existingElement && existingElement.type === "text") {
-          text = existingElement.text;
-        } else if (end.type === "text") {
-          text = end.text;
-        }
-
-        if (!text) {
-          console.error(
-            `No text found for end binding text element for ${linearElement.id}`,
     );
-        }
+    if (endBoundElement) {
-        endBoundElement = newTextElement({
+      elementStore.add(endBoundElement);
-          x: endX,
+      scene.replaceAllElements(elementStore.getElementsMap());
-          y: endY,
-          type: "text",
-          ...existingElement,
-          ...end,
-          text,
-        });
-        // to position the text correctly when coordinates not provided
-        Object.assign(endBoundElement, {
-          y: end.y || linearElement.y - endBoundElement.height / 2,
-        });
-      } else {
-        switch (endType) {
-          case "rectangle":
-          case "ellipse":
-          case "diamond": {
-            endBoundElement = newElement({
-              x: endX,
-              y: endY,
-              width,
-              height,
-              ...existingElement,
-              ...end,
-              type: endType,
-            });
-            break;
-          }
-          default: {
-            assertNever(
-              linearElement as never,
-              `Unhandled element end type "${endType}"`,
-              true,
-            );
-          }
-        }
-      }
-
       bindLinearElement(
         linearElement,
         endBoundElement as ExcalidrawBindableElement,
@@ -415,7 +421,6 @@ const bindLinearElementToElement = (
     }
   }
 
-  // Safe check to early return for single point
   if (linearElement.points.length < 2) {
     return {
       linearElement,
@@ -424,7 +429,8 @@ const bindLinearElementToElement = (
     };
   }
 
-  // Update start/end points by 0.5 so bindings don't overlap with start/end bound element coordinates.
+  // update start/end points by 0.5 so bindings don't overlap with start/end bound element coordinates.
+  if (!isElbowArrow(linearElement)) {
     const endPointIndex = linearElement.points.length - 1;
     const delta = 0.5;
 
@@ -472,6 +478,7 @@ const bindLinearElementToElement = (
         points: newPoints,
       }),
     );
+  }
 
   return {
     linearElement,
@@ -480,31 +487,74 @@ const bindLinearElementToElement = (
   };
 };
 
-class ElementStore {
+const adjustElbowArrowPoints = (elements: ExcalidrawElement[]) => {
-  excalidrawElements = new Map<string, ExcalidrawElement>();
+  const elementsMap = arrayToMap(elements) as NonDeletedSceneElementsMap;
+  const scene = new Scene(elementsMap);
 
-  add = (ele?: ExcalidrawElement) => {
+  elements.forEach((element) => {
-    if (!ele) {
+    if (isElbowArrow(element) && (element.startBinding || element.endBinding)) {
-      return;
+      if (element.endBinding && element.endBinding.elementId) {
-    }
+        const midPoint = getBindingSideMidPoint(
-
+          element.endBinding,
-    this.excalidrawElements.set(ele.id, ele);
+          elementsMap,
-  };
-
-  getElements = () => {
-    return syncInvalidIndices(Array.from(this.excalidrawElements.values()));
-  };
-
-  getElementsMap = () => {
-    return toBrandedType<NonDeletedSceneElementsMap>(
-      arrayToMap(this.getElements()),
         );
-  };
 
-  getElement = (id: string) => {
+        const endBindableElement = elementsMap.get(
-    return this.excalidrawElements.get(id);
+          element.endBinding.elementId,
-  };
+        ) as ExcalidrawBindableElement;
+
+        if (midPoint) {
+          LinearElementEditor.movePoints(
+            element,
+            scene,
+            new Map([
+              [
+                element.points.length - 1,
+                {
+                  point: pointFrom(
+                    midPoint[0] - element.x,
+                    midPoint[1] - element.y,
+                  ),
+                  isDragging: true,
+                },
+              ],
+            ]),
+          );
         }
+      }
+
+      if (element.startBinding && element.startBinding.elementId) {
+        const midPoint = getBindingSideMidPoint(
+          element.startBinding,
+          elementsMap,
+        );
+
+        const startBindableElement = elementsMap.get(
+          element.startBinding.elementId,
+        ) as ExcalidrawBindableElement;
+
+        if (midPoint) {
+          LinearElementEditor.movePoints(
+            element,
+            scene,
+            new Map([
+              [
+                0,
+                {
+                  point: pointFrom(
+                    midPoint[0] - element.x,
+                    midPoint[1] - element.y,
+                  ),
+                  isDragging: true,
+                },
+              ],
+            ]),
+          );
+        }
+      }
+    }
+  });
+};
 
 export const convertToExcalidrawElements = (
   elementsSkeleton: ExcalidrawElementSkeleton[] | null,
@@ -561,6 +611,8 @@ export const convertToExcalidrawElements = (
       case "arrow": {
         const width = element.width || DEFAULT_LINEAR_ELEMENT_PROPS.width;
         const height = element.height || DEFAULT_LINEAR_ELEMENT_PROPS.height;
+
+        if (!opts?.useElbow) {
           excalidrawElement = newArrowElement({
             width,
             height,
@@ -570,11 +622,21 @@ export const convertToExcalidrawElements = (
             type: "arrow",
             elbowed: opts?.useElbow,
           });
-
           Object.assign(
             excalidrawElement,
             getSizeFromPoints(excalidrawElement.points),
           );
+        } else {
+          excalidrawElement = newArrowElement({
+            width,
+            height,
+            endArrowhead: "arrow",
+            ...element,
+            type: "arrow",
+            elbowed: opts?.useElbow,
+            roundness: null,
+          });
+        }
         break;
       }
       case "text": {
@@ -806,5 +868,12 @@ export const convertToExcalidrawElements = (
     }
   }
 
-  return elementStore.getElements();
+  const finalElements = elementStore.getElements();
+
+  // Adjust elbow arrow points now that all elements are in the scene
+  if (opts?.useElbow) {
+    adjustElbowArrowPoints(finalElements);
+  }
+
+  return finalElements;
 };