support id as well for elements

src/data/types.ts

@@ -47,6 +47,7 @@ export interface ImportedDataState {
   elements?:
     | readonly (
         | (ExcalidrawElement & {
+            id?: ExcalidrawElement["id"];
             label?: {
               text: string;
               fontSize?: number;
@@ -60,6 +61,7 @@ export interface ImportedDataState {
               typeof ELEMENTS_SUPPORTING_PROGRAMMATIC_API[number],
               "text"
             >;
+            id?: ExcalidrawElement["id"];
             label?: {
               text: string;
               fontSize?: number;
@@ -82,11 +84,11 @@ export interface ImportedDataState {
               verticalAlign?: VerticalAlign;
             } & MarkOptional<ElementConstructorOpts, "x" | "y">;
             start?: {
-              type: ExcalidrawBindableElement["type"] & ElementConstructorOpts;
-            };
+              type: ExcalidrawBindableElement["type"];
+            } & MarkOptional<ElementConstructorOpts, "x" | "y">;
             end?: {
-              type: ExcalidrawBindableElement["type"] & ElementConstructorOpts;
-            };
+              type: ExcalidrawBindableElement["type"];
+            } & MarkOptional<ElementConstructorOpts, "x" | "y">;
           } & ElementConstructorOpts)
       )[]
     | null;

src/packages/excalidraw/example/App.tsx

@@ -187,6 +187,7 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
         [
           {
             type: "rectangle",
+            id: "rect-1",
             fillStyle: "hachure",
             strokeWidth: 1,
             strokeStyle: "solid",
@@ -203,6 +204,14 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
               value: 32,
             },
           },
+
+          {
+            type: "arrow",
+            x: -160,
+            y: 300,
+            start: { type: "rectangle", width: 300, height: 300 },
+            end: { type: "ellipse" },
+          },
         ],
         null,
       ),