fix types

src/data/restore.ts

@@ -102,6 +102,7 @@ export const restoreElementWithProperties = <
   > &
     Partial<Pick<ExcalidrawElement, "type" | "x" | "y">>,
 ): T => {
+  console.log("ELEMENT", element.backgroundColor);
   const base: Pick<T, keyof ExcalidrawElement> & {
     [PRECEDING_ELEMENT_KEY]?: string;
   } = {

src/data/transform.ts

@@ -28,13 +28,10 @@ import {
   ExcalidrawGenericElement,
   ExcalidrawLinearElement,
   ExcalidrawTextElement,
-  FontFamilyValues,
-  TextAlign,
-  VerticalAlign,
 } from "../element/types";
 import { MarkOptional } from "../utility-types";
 import { getFontString } from "../utils";
-import { ImportedDataState } from "./types";
+import { ImportedDataState, ValidContainer, ValidLinearElement } from "./types";
 
 export const ELEMENTS_SUPPORTING_PROGRAMMATIC_API = [
   "rectangle",
@@ -46,12 +43,7 @@ export const ELEMENTS_SUPPORTING_PROGRAMMATIC_API = [
 ];
 
 const bindTextToContainer = (
-  containerProps:
+  containerProps: ValidContainer | ValidLinearElement,
-    | {
-        type:
-          | Exclude<ExcalidrawGenericElement["type"], "selection">
-          | ExcalidrawLinearElement["type"];
-      } & MarkOptional<ElementConstructorOpts, "x" | "y">,
   textProps: { text: string } & MarkOptional<ElementConstructorOpts, "x" | "y">,
 ) => {
   let container;
@@ -61,11 +53,7 @@ const bindTextToContainer = (
     container = newLinearElement({
       width,
       height,
-      //@ts-ignore
+      endArrowhead: "arrow",
-      type: containerProps.type,
-      //@ts-ignore,
-      endArrowhead: containerProps.type === "arrow" ? "arrow" : null,
-      //@ts-ignore
       points: [
         [0, 0],
         [width, height],
@@ -101,50 +89,7 @@ const bindTextToContainer = (
 };
 
 const bindLinearElementToElement = (
-  linearElement: {
+  linearElement: ValidLinearElement,
-    type: ExcalidrawLinearElement["type"];
-    x: number;
-    y: number;
-    label?: {
-      text: string;
-      fontSize?: number;
-      fontFamily?: FontFamilyValues;
-      textAlign?: TextAlign;
-      verticalAlign?: VerticalAlign;
-    } & MarkOptional<ElementConstructorOpts, "x" | "y">;
-    start?:
-      | (
-          | {
-              type: Exclude<
-                ExcalidrawBindableElement["type"],
-                "image" | "selection" | "text"
-              >;
-              id?: ExcalidrawGenericElement["id"];
-            }
-          | ({
-              type: "text";
-              text: string;
-              id?: ExcalidrawTextElement["id"];
-            } & Partial<ExcalidrawTextElement>)
-        ) &
-          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">;
-  } & Partial<ExcalidrawLinearElement>,
 ): {
   linearElement: ExcalidrawLinearElement;
   startBoundElement?: ExcalidrawElement;
@@ -257,9 +202,7 @@ const bindLinearElementToElement = (
   }
   return {
     linearElement: excliadrawLinearElement,
-    //@ts-ignore
     startBoundElement,
-    //@ts-ignore
     endBoundElement,
   };
 };
@@ -318,28 +261,37 @@ export const convertToExcalidrawElements = (
     while (excalidrawElements.hasElementWithId(elementId)) {
       elementId = regenerateId(elementId);
     }
-    const elementWithid = { ...element, id: elementId };
 
     if (!ELEMENTS_SUPPORTING_PROGRAMMATIC_API.includes(element.type)) {
       excalidrawElements.push(element as ExcalidrawElement);
 
       return;
     }
+    const elementWithid = { ...element, id: elementId };
+
+    if (
+      VALID_CONTAINER_TYPES.has(elementWithid.type) &&
       //@ts-ignore
-    if (VALID_CONTAINER_TYPES.has(element.type) && element?.label?.text) {
+      elementWithid?.label?.text
+    ) {
+      let [container, text] = bindTextToContainer(
         //@ts-ignore
-      let [container, text] = bindTextToContainer(elementWithid, element.label);
+        elementWithid,
+        //@ts-ignore
+        elementWithid.label,
+      );
       excalidrawElements.push(container);
       excalidrawElements.push(text);
-
       if (container.type === "arrow") {
+        const originalStart =
+          elementWithid.type === "arrow" ? elementWithid?.start : undefined;
+        const originalEnd =
+          elementWithid.type === "arrow" ? elementWithid?.end : undefined;
         const { linearElement, startBoundElement, endBoundElement } =
           bindLinearElementToElement({
             ...container,
-            //@ts-ignore
+            start: originalStart,
-            start: element?.start,
+            end: originalEnd,
-            //@ts-ignore
-            end: element?.end,
           });
         container = linearElement;
         excalidrawElements.push(linearElement);
@@ -348,12 +300,12 @@ export const convertToExcalidrawElements = (
       }
     } else {
       let excalidrawElement;
-      if (element.type === "text") {
+      if (elementWithid.type === "text") {
-        const fontFamily = element?.fontFamily || DEFAULT_FONT_FAMILY;
+        const fontFamily = elementWithid?.fontFamily || DEFAULT_FONT_FAMILY;
-        const fontSize = element?.fontSize || DEFAULT_FONT_SIZE;
+        const fontSize = elementWithid?.fontSize || DEFAULT_FONT_SIZE;
         const lineHeight =
-          element?.lineHeight || getDefaultLineHeight(fontFamily);
+          elementWithid?.lineHeight || getDefaultLineHeight(fontFamily);
-        const text = element.text ?? "";
+        const text = elementWithid.text ?? "";
         const normalizedText = normalizeText(text);
         const metrics = measureText(
           normalizedText,
@@ -369,34 +321,29 @@ export const convertToExcalidrawElements = (
         };
 
         excalidrawElements.push(excalidrawElement as ExcalidrawTextElement);
-      } else if (element.type === "arrow" || element.type === "line") {
+      } else if (elementWithid.type === "arrow") {
         const { linearElement, startBoundElement, endBoundElement } =
-          //@ts-ignore
           bindLinearElementToElement(elementWithid);
         excalidrawElements.push(linearElement);
         excalidrawElements.push(startBoundElement);
         excalidrawElements.push(endBoundElement);
-        //@ts-ignore
+        if (startBoundElement && !elementWithid?.start?.id) {
-        if (startBoundElement && !element.start.id) {
-          //@ts-ignore
           excalidrawElements.push(startBoundElement);
         }
-        //@ts-ignore
+        if (endBoundElement && !elementWithid?.end?.id) {
-        if (endBoundElement && !element.end.id) {
-          //@ts-ignore
           excalidrawElements.push(endBoundElement);
         }
       } else {
         excalidrawElement = {
           ...elementWithid,
           width:
-            element?.width ||
+            elementWithid?.width ||
-            (ELEMENTS_SUPPORTING_PROGRAMMATIC_API.includes(element.type)
+            (ELEMENTS_SUPPORTING_PROGRAMMATIC_API.includes(elementWithid.type)
               ? 100
               : 0),
           height:
-            element?.height ||
+            elementWithid?.height ||
-            (ELEMENTS_SUPPORTING_PROGRAMMATIC_API.includes(element.type)
+            (ELEMENTS_SUPPORTING_PROGRAMMATIC_API.includes(elementWithid.type)
               ? 100
               : 0),
         } as ExcalidrawGenericElement;

src/data/types.ts

@@ -1,8 +1,11 @@
 import {
   ExcalidrawBindableElement,
   ExcalidrawElement,
+  ExcalidrawFreeDrawElement,
   ExcalidrawGenericElement,
+  ExcalidrawImageElement,
   ExcalidrawLinearElement,
+  ExcalidrawSelectionElement,
   ExcalidrawTextElement,
   FontFamilyValues,
   TextAlign,
@@ -40,32 +43,7 @@ export type LegacyAppState = {
   isSidebarDocked: [boolean, "defaultSidebarDockedPreference"];
 };
 
-export interface ImportedDataState {
+export type ValidLinearElement = {
-  type?: string;
-  version?: number;
-  source?: string;
-  elements?:
-    | readonly (
-        | ExcalidrawElement
-        | ({
-            type: Exclude<ExcalidrawGenericElement["type"], "selection">;
-            id?: ExcalidrawGenericElement["id"];
-            label?: {
-              text: string;
-              fontSize?: number;
-              fontFamily?: FontFamilyValues;
-              textAlign?: TextAlign;
-              verticalAlign?: VerticalAlign;
-            } & MarkOptional<ElementConstructorOpts, "x" | "y">;
-          } & ElementConstructorOpts)
-        | ({
-            type: "text";
-            text: string;
-            x: number;
-            y: number;
-            id?: ExcalidrawTextElement["id"];
-          } & Partial<ExcalidrawTextElement>)
-        | ({
   type: ExcalidrawLinearElement["type"];
   x: number;
   y: number;
@@ -108,7 +86,42 @@ export interface ImportedDataState {
           } & Partial<ExcalidrawTextElement>)
       ) &
         MarkOptional<ElementConstructorOpts, "x" | "y">;
-          } & Partial<ExcalidrawLinearElement>)
+} & Partial<ExcalidrawLinearElement>;
+
+export type ValidContainer =
+  | {
+      type: Exclude<ExcalidrawGenericElement["type"], "selection">;
+      id?: ExcalidrawGenericElement["id"];
+      label?: {
+        text: string;
+        fontSize?: number;
+        fontFamily?: FontFamilyValues;
+        textAlign?: TextAlign;
+        verticalAlign?: VerticalAlign;
+      } & MarkOptional<ElementConstructorOpts, "x" | "y">;
+    } & ElementConstructorOpts;
+
+export interface ImportedDataState {
+  type?: string;
+  version?: number;
+  source?: string;
+  elements?:
+    | readonly (
+        | Extract<
+            ExcalidrawElement,
+            | ExcalidrawSelectionElement
+            | ExcalidrawImageElement
+            | ExcalidrawFreeDrawElement
+          >
+        | ValidContainer
+        | ValidLinearElement
+        | ({
+            type: "text";
+            text: string;
+            x: number;
+            y: number;
+            id?: ExcalidrawTextElement["id"];
+          } & Partial<ExcalidrawTextElement>)
       )[]
     | null;
   appState?: Readonly<