make image attributes optional and better ts check

src/data/transform.ts

@@ -134,7 +134,6 @@ export interface ExcalidrawProgrammaticAPI {
         | Extract<
             ExcalidrawElement,
             | ExcalidrawSelectionElement
-            | ExcalidrawImageElement
             | ExcalidrawFreeDrawElement
             | ExcalidrawFrameElement
           >
@@ -152,6 +151,11 @@ export interface ExcalidrawProgrammaticAPI {
             y: number;
             id?: ExcalidrawTextElement["id"];
           } & Partial<ExcalidrawTextElement>)
+        | ({
+            type: Extract<ExcalidrawImageElement["type"], "image">;
+            x: number;
+            y: number;
+          } & Partial<ExcalidrawImageElement>)
       )[]
     | null;
 }

src/packages/excalidraw/example/App.tsx

@@ -146,9 +146,7 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
         //@ts-ignore
         initialStatePromiseRef.current.promise.resolve({
           ...initialData,
-          elements: convertToExcalidrawElements(
+          elements: convertToExcalidrawElements(initialData.elements),
-            initialData.elements as ExcalidrawProgrammaticAPI["elements"],
-          ),
         });
         excalidrawAPI.addFiles(imagesArray);
       };

src/packages/excalidraw/example/initialData.tsx

@@ -1,17 +1,19 @@
-export default {
+import { ExcalidrawProgrammaticAPI } from "../../../data/transform";
-  elements: [
+import { FileId } from "../../../element/types";
+
+const elements: ExcalidrawProgrammaticAPI["elements"] = [
   {
     type: "rectangle",
     x: 10,
     y: 10,
-      strokeWidth: "2",
+    strokeWidth: 2,
   },
   {
     type: "diamond",
     x: 120,
     y: 20,
     backgroundColor: "#fff3bf",
-      strokeWidth: "2",
+    strokeWidth: 2,
     label: {
       text: "HELLO EXCALIDRAW",
       strokeColor: "#099268",
@@ -26,16 +28,17 @@ export default {
     start: { type: "rectangle" },
     end: { type: "ellipse" },
   },
-
   {
-      fileId: "rocket",
+    fileId: "rocket" as FileId,
     type: "image",
     x: 606.1042326312408,
     y: 153.57729779411773,
     width: 231.30325348751828,
     height: 231.64340533088227,
   },
-  ],
+];
+export default {
+  elements,
   appState: { viewBackgroundColor: "#AFEEEE", currentItemFontFamily: 1 },
   scrollToContent: true,
   libraryItems: [