make type optional when id present

src/data/transform.ts

@@ -25,6 +25,7 @@ import {
   ExcalidrawBindableElement,
   ExcalidrawElement,
   ExcalidrawGenericElement,
+  ExcalidrawImageElement,
   ExcalidrawLinearElement,
   ExcalidrawTextElement,
 } from "../element/types";
@@ -132,23 +133,44 @@ const bindLinearElementToElement = (
   if (start) {
     const width = start?.width ?? DEFAULT_DIMENSION;
     const height = start?.height ?? DEFAULT_DIMENSION;
-    const existingElement = start.id
+    let existingElement;
-      ? excalidrawElements.get().find((ele) => ele?.id === start.id)
+    if (start.id) {
-      : undefined;
+      existingElement = excalidrawElements
+        .get()
+        .find((ele) => ele?.id === start.id) as Exclude<
+        ExcalidrawBindableElement,
+        ExcalidrawImageElement
+      >;
+      if (!existingElement) {
+        console.error(`No element for start binding with id ${start.id} found`);
+      }
+    }
+
     const startX = start.x || excliadrawLinearElement.x - width;
     const startY = start.y || excliadrawLinearElement.y - height / 2;
+    const startType = existingElement ? existingElement.type : start.type;
 
-    if (start.type === "text") {
+    if (startType) {
+      if (startType === "text") {
+        let text = "";
+        if (existingElement && existingElement.type === "text") {
+          text = existingElement.text;
+        } else if (start.type === "text") {
+          text = start.text;
+        }
         startBoundElement = newTextElement({
           x: startX,
           y: startY,
+          type: "text",
           ...existingElement,
           ...start,
+          text,
         });
         // to position the text correctly when coordinates not provided
         mutateElement(startBoundElement, {
           x: start.x || excliadrawLinearElement.x - startBoundElement.width,
-        y: start.y || excliadrawLinearElement.y - startBoundElement.height / 2,
+          y:
+            start.y || excliadrawLinearElement.y - startBoundElement.height / 2,
         });
       } else {
         startBoundElement = newElement({
@@ -158,6 +180,7 @@ const bindLinearElementToElement = (
           height,
           ...existingElement,
           ...start,
+          type: startType,
         });
       }
 
@@ -167,23 +190,43 @@ const bindLinearElementToElement = (
         "start",
       );
     }
+  }
   if (end) {
     const height = end?.height ?? DEFAULT_DIMENSION;
     const width = end?.width ?? DEFAULT_DIMENSION;
 
-    const existingElement = end.id
+    let existingElement;
-      ? excalidrawElements.get().find((ele) => ele?.id === end.id)
+    if (end.id) {
-      : undefined;
+      existingElement = excalidrawElements
+        .get()
+        .find((ele) => ele?.id === end.id) as Exclude<
+        ExcalidrawBindableElement,
+        ExcalidrawImageElement
+      >;
+      if (!existingElement) {
+        console.error(`No element for end binding with id ${end.id} found`);
+      }
+    }
     const endX =
       end.x || excliadrawLinearElement.x + excliadrawLinearElement.width;
     const endY = end.y || excliadrawLinearElement.y - height / 2;
+    const endType = existingElement ? existingElement.type : end.type;
 
-    if (end.type === "text") {
+    if (endType) {
+      if (endType === "text") {
+        let text = "";
+        if (existingElement && existingElement.type === "text") {
+          text = existingElement.text;
+        } else if (end.type === "text") {
+          text = end.text;
+        }
         endBoundElement = newTextElement({
           x: endX,
           y: endY,
+          type: "text",
           ...existingElement,
           ...end,
+          text,
         });
         // to position the text correctly when coordinates not provided
         mutateElement(endBoundElement, {
@@ -197,8 +240,10 @@ const bindLinearElementToElement = (
           height,
           ...existingElement,
           ...end,
+          type: endType,
         }) as ExcalidrawBindableElement;
       }
+    }
     bindLinearElement(
       excliadrawLinearElement,
       endBoundElement as ExcalidrawBindableElement,

src/data/types.ts

@@ -56,21 +56,6 @@ export type ValidLinearElement = {
   } & MarkOptional<ElementConstructorOpts, "x" | "y">;
   end?:
     | (
-        | {
-            type: Exclude<
-              ExcalidrawBindableElement["type"],
-              "image" | "selection" | "text"
-            >;
-            id?: ExcalidrawGenericElement["id"];
-          }
-        | ({
-            type: "text";
-            text: string;
-            id?: ExcalidrawTextElement["id"];
-          } & Partial<ExcalidrawTextElement>)
-      ) &
-        MarkOptional<ElementConstructorOpts, "x" | "y">;
-  start?:
         | (
             | {
                 type: Exclude<
@@ -79,11 +64,58 @@ export type ValidLinearElement = {
                 >;
                 id?: ExcalidrawGenericElement["id"];
               }
-        | ({
+            | {
+                id: ExcalidrawGenericElement["id"];
+                type?: Exclude<
+                  ExcalidrawBindableElement["type"],
+                  "image" | "selection" | "text"
+                >;
+              }
+          )
+        | ((
+            | {
                 type: "text";
                 text: string;
-            id?: ExcalidrawTextElement["id"];
+              }
-          } & Partial<ExcalidrawTextElement>)
+            | {
+                type?: "text";
+                id: ExcalidrawTextElement["id"];
+                text: string;
+              }
+          ) &
+            Partial<ExcalidrawTextElement>)
+      ) &
+        MarkOptional<ElementConstructorOpts, "x" | "y">;
+  start?:
+    | (
+        | (
+            | {
+                type: Exclude<
+                  ExcalidrawBindableElement["type"],
+                  "image" | "selection" | "text"
+                >;
+                id?: ExcalidrawGenericElement["id"];
+              }
+            | {
+                id: ExcalidrawGenericElement["id"];
+                type?: Exclude<
+                  ExcalidrawBindableElement["type"],
+                  "image" | "selection" | "text"
+                >;
+              }
+          )
+        | ((
+            | {
+                type: "text";
+                text: string;
+              }
+            | {
+                type?: "text";
+                id: ExcalidrawTextElement["id"];
+                text: string;
+              }
+          ) &
+            Partial<ExcalidrawTextElement>)
       ) &
         MarkOptional<ElementConstructorOpts, "x" | "y">;
 } & Partial<ExcalidrawLinearElement>;

src/packages/excalidraw/example/App.tsx

@@ -208,7 +208,7 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
             type: "arrow",
             x: 300,
             y: 150,
-            start: { type: "rectangle", id: "rect-1" },
+            start: { id: "rect-1" },
             end: { type: "ellipse" },
           },
           {