Type updates to support fixed binding for simple arrows

packages/element/src/binding.ts

@@ -2356,16 +2356,18 @@ export const getGlobalFixedPointForBindableElement = (
 };
 
 export const getGlobalFixedPoints = (
-  arrow: ExcalidrawElbowArrowElement,
+  arrow: ExcalidrawArrowElement,
   elementsMap: ElementsMap,
 ): [GlobalPoint, GlobalPoint] => {
   const startElement =
     arrow.startBinding &&
+    isFixedPointBinding(arrow.startBinding) &&
     (elementsMap.get(arrow.startBinding.elementId) as
       | ExcalidrawBindableElement
       | undefined);
   const endElement =
     arrow.endBinding &&
+    isFixedPointBinding(arrow.endBinding) &&
     (elementsMap.get(arrow.endBinding.elementId) as
       | ExcalidrawBindableElement
       | undefined);

packages/element/src/mutateElement.ts

@@ -12,7 +12,7 @@ import { ShapeCache } from "./shape";
 
 import { updateElbowArrowPoints } from "./elbowArrow";
 
-import { isElbowArrow } from "./typeChecks";
+import { isElbowArrow, isFixedPointBinding } from "./typeChecks";
 
 import type {
   ElementsMap,
@@ -54,8 +54,8 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
     (Object.keys(updates).length === 0 || // normalization case
       typeof points !== "undefined" || // repositioning
       typeof fixedSegments !== "undefined" || // segment fixing
-      typeof startBinding !== "undefined" ||
-      typeof endBinding !== "undefined") // manual binding to element
+      isFixedPointBinding(startBinding) ||
+      isFixedPointBinding(endBinding)) // manual binding to element
   ) {
     updates = {
       ...updates,

packages/element/src/types.ts

@@ -323,8 +323,8 @@ export type ExcalidrawLinearElement = _ExcalidrawElementBase &
     type: "line" | "arrow";
     points: readonly LocalPoint[];
     lastCommittedPoint: LocalPoint | null;
-    startBinding: PointBinding | null;
-    endBinding: PointBinding | null;
+    startBinding: FixedPointBinding | PointBinding | null;
+    endBinding: FixedPointBinding | PointBinding | null;
     startArrowhead: Arrowhead | null;
     endArrowhead: Arrowhead | null;
   }>;
@@ -351,9 +351,9 @@ export type ExcalidrawElbowArrowElement = Merge<
   ExcalidrawArrowElement,
   {
     elbowed: true;
+    fixedSegments: readonly FixedSegment[] | null;
     startBinding: FixedPointBinding | null;
     endBinding: FixedPointBinding | null;
-    fixedSegments: readonly FixedSegment[] | null;
     /**
      * Marks that the 3rd point should be used as the 2nd point of the arrow in
      * order to temporarily hide the first segment of the arrow without losing

packages/element/tests/resize.test.tsx

@@ -27,6 +27,7 @@ import type {
   ExcalidrawElbowArrowElement,
   ExcalidrawFreeDrawElement,
   ExcalidrawLinearElement,
+  PointBinding,
 } from "../src/types";
 
 unmountComponent();
@@ -1023,8 +1024,20 @@ describe("multiple selection", () => {
       1 - move[0] / selectionWidth,
       1 - move[1] / selectionHeight,
     );
-    const leftArrowBinding = { ...leftBoundArrow.endBinding };
-    const rightArrowBinding = { ...rightBoundArrow.endBinding };
+    const leftArrowBinding: {
+      elementId: string;
+      gap?: number;
+      focus?: number;
+    } = {
+      ...leftBoundArrow.endBinding,
+    } as PointBinding;
+    const rightArrowBinding: {
+      elementId: string;
+      gap?: number;
+      focus?: number;
+    } = {
+      ...rightBoundArrow.endBinding,
+    } as PointBinding;
     delete rightArrowBinding.gap;
 
     UI.resize([rectangle, rightBoundArrow], "nw", move, {

packages/utils/src/index.ts

@@ -2,3 +2,4 @@ export * from "./export";
 export * from "./withinBounds";
 export * from "./bbox";
 export { getCommonBounds } from "@excalidraw/element";
+export * from "./visualdebug";