better types

src/data/types.ts

@@ -1,4 +1,10 @@
-import { ExcalidrawElement, ExcalidrawGenericElement } from "../element/types";
+import {
+  ExcalidrawElement,
+  ExcalidrawGenericElement,
+  FontFamilyValues,
+  TextAlign,
+  VerticalAlign,
+} from "../element/types";
 import {
   AppState,
   BinaryFiles,
@@ -8,7 +14,10 @@ import {
 import type { cleanAppStateForExport } from "../appState";
 import { VERSIONS } from "../constants";
 import { MarkOptional } from "../utility-types";
-import { ElementConstructorOpts } from "../element/newElement";
+import {
+  ElementConstructorOpts,
+  ELEMENTS_SUPPORTING_PROGRAMMATIC_API,
+} from "../element/newElement";
 
 export interface ExportedDataState {
   type: string;
@@ -38,18 +47,31 @@ export interface ImportedDataState {
   elements?:
     | readonly (
         | (ExcalidrawElement & {
-            label?: { text: string } & MarkOptional<
+            label?: {
-              ElementConstructorOpts,
+              text: string;
-              "x" | "y"
+              fontSize?: number;
+              fontFamily?: FontFamilyValues;
+              textAlign?: TextAlign;
+              verticalAlign?: VerticalAlign;
+            } & MarkOptional<ElementConstructorOpts, "x" | "y">;
+          } & ElementConstructorOpts)
+        | ({
+            type: Exclude<
+              typeof ELEMENTS_SUPPORTING_PROGRAMMATIC_API[number],
+              "text"
             >;
-          })
+            label?: {
-        | {
+              text: string;
-            type: Exclude<ExcalidrawGenericElement["type"], "selection">;
+              fontSize?: number;
-            label?: { text: string } & MarkOptional<
+              fontFamily?: FontFamilyValues;
-              ElementConstructorOpts,
+              textAlign?: TextAlign;
-              "x" | "y"
+              verticalAlign?: VerticalAlign;
-            >;
+            } & MarkOptional<ElementConstructorOpts, "x" | "y">;
-          }
+          } & ElementConstructorOpts)
+        | ({
+            type: "text";
+            text: string;
+          } & ElementConstructorOpts)
       )[]
     | null;
   appState?: Readonly<

src/element/newElement.ts

@@ -36,7 +36,7 @@ import {
   getBoundTextMaxWidth,
   getDefaultLineHeight,
   bindTextToContainer,
-  isValidTextContainer,
+  VALID_CONTAINER_TYPES,
 } from "./textElement";
 import {
   DEFAULT_ELEMENT_PROPS,
@@ -50,7 +50,7 @@ import { isArrowElement } from "./typeChecks";
 import { MarkOptional, Merge, Mutable } from "../utility-types";
 import { ImportedDataState } from "../data/types";
 
-const ELEMENTS_SUPPORTING_PROGRAMMATIC_API = [
+export const ELEMENTS_SUPPORTING_PROGRAMMATIC_API = [
   "rectangle",
   "ellipse",
   "diamond",
@@ -664,67 +664,53 @@ export const convertToExcalidrawElements = (
     return [];
   }
   elements.forEach((element) => {
-    if (!element) {
+    if (
+      !element ||
+      !ELEMENTS_SUPPORTING_PROGRAMMATIC_API.includes(element.type)
+    ) {
       return;
     }
-    if (isValidTextContainer(element) && element?.label?.text) {
+    //@ts-ignore
+    if (VALID_CONTAINER_TYPES.has(element.type) && element?.label?.text) {
       //@ts-ignore
       const elements = bindTextToContainer(element, element.label);
       res.push(...elements);
     } else {
       let excalidrawElement;
+      const { type, ...rest } = element;
       if (element.type === "text") {
         //@ts-ignore
         excalidrawElement = newTextElement({
-          //@ts-ignore
-          x: 0,
-          //@ts-ignore
-          y: 0,
           ...element,
         });
-      } else if (element.type === "arrow" || element.type === "line") {
+      } else if (type === "arrow" || type === "line") {
         excalidrawElement = newLinearElement({
-          //@ts-ignore
+          type,
-          x: 0,
-          //@ts-ignore
-          y: 0,
-          //@ts-ignore
-          type: element.type,
-          //@ts-ignore
           width: 200,
-          //@ts-ignore
           height: 24,
-          //@ts-ignore,
           endArrowhead: element.type === "arrow" ? "arrow" : null,
-          //@ts-ignore
           points: [
             [0, 0],
             [200, 0],
           ],
-          ...element,
+          ...rest,
         });
       } else {
         //@ts-ignore
         excalidrawElement = newElement({
-          x: 0,
-          y: 0,
-
           ...element,
           width:
-            //@ts-ignore
             element?.width ||
             (ELEMENTS_SUPPORTING_PROGRAMMATIC_API.includes(element.type)
               ? 100
               : 0),
           height:
-            //@ts-ignore
             element?.height ||
             (ELEMENTS_SUPPORTING_PROGRAMMATIC_API.includes(element.type)
               ? 100
               : 0),
         });
       }
-      //@ts-ignore
 
       res.push(excalidrawElement);
     }

src/element/textElement.ts

@@ -865,7 +865,7 @@ export const getTextBindableContainerAtPosition = (
   return isTextBindableContainer(hitElement, false) ? hitElement : null;
 };
 
-const VALID_CONTAINER_TYPES = new Set([
+export const VALID_CONTAINER_TYPES = new Set([
   "rectangle",
   "ellipse",
   "diamond",

src/element/types.ts

@@ -7,7 +7,6 @@ import {
   VERTICAL_ALIGN,
 } from "../constants";
 import { MarkNonNullable, MarkOptional, ValueOf } from "../utility-types";
-import { ElementConstructorOpts } from "./newElement";
 
 export type ChartType = "bar" | "line";
 export type FillStyle = "hachure" | "cross-hatch" | "solid" | "zigzag";

src/excalidraw-app/index.tsx

@@ -606,6 +606,136 @@ const ExcalidrawWrapper = () => {
 
   const isOffline = useAtomValue(isOfflineAtom);
 
+  const getInitialData = (): ExcalidrawInitialDataState => {
+    return {
+      scrollToContent: true,
+      //"type": "excalidraw/clipboard",
+      elements: [
+        // Test case with simple rectangle
+
+        {
+          type: "rectangle",
+          x: 10,
+          y: 10,
+        },
+        // Test case with simple ellipse
+        {
+          type: "ellipse",
+          x: 50,
+          y: 200,
+        },
+        // Test case with simple diamond
+        {
+          type: "diamond",
+          x: 120,
+          y: 20,
+        },
+        // Test case with simple text element
+        {
+          type: "text",
+          x: 300,
+          y: 100,
+          text: "HELLO",
+        },
+        // Test case with rectangle and some properties
+        {
+          type: "rectangle",
+          backgroundColor: "#4dabf7",
+          width: 500,
+          height: 200,
+          x: 100,
+          y: 200,
+        },
+        // Test case with arrow and some properties
+        {
+          type: "arrow",
+          strokeColor: "#099268",
+          strokeWidth: 2,
+          x: 100,
+          y: 20,
+        },
+        // Test case with rectangle text container
+        {
+          type: "rectangle",
+          x: 240,
+          y: 30,
+          label: {
+            text: "HELLO FROM RECT",
+          },
+        },
+        // Test case with ellipse text container
+        {
+          type: "ellipse",
+          x: 400,
+          y: 410,
+          label: {
+            text: "HELLO FROM ELLIPSE",
+          },
+        },
+        // Test case with diamond text container
+        {
+          type: "diamond",
+          x: 10,
+          y: 530,
+          label: {
+            text: "HELLO Text In Diamond",
+          },
+        },
+        // Test case with diamond text container and some properties
+        {
+          type: "diamond",
+          x: 199,
+          y: 123,
+          backgroundColor: "#fff3bf",
+          strokeWidth: 2,
+          label: {
+            text: "HELLO Text In Diamond\n with props",
+            strokeColor: "#099268",
+            fontSize: 20,
+          },
+        },
+        // Test case with simple arrow
+        {
+          type: "arrow",
+          x: -120,
+          y: 40,
+          label: { text: "HELLO FROM ARROW" },
+        },
+        // Test case with simple line
+        {
+          type: "line",
+          x: -202,
+          y: 70,
+        },
+        // Test case for labeled arrow
+        {
+          type: "arrow",
+          x: -190,
+          y: 169,
+          label: {
+            text: "HELLO LABELED ARROW",
+            strokeColor: "#099268",
+            fontSize: 20,
+          },
+        },
+        // Test case for container with label alignments
+        {
+          type: "rectangle",
+          x: -300,
+          y: 200,
+          width: 113.3515625,
+          height: 100,
+          strokeColor: "#495057",
+          label: {
+            text: "HELLO RECT",
+            fontSize: 13.5,
+            textAlign: "left",
+            verticalAlign: "top",
+          },
+        },
+      ],
+    };
+  };
   return (
     <div
       style={{ height: "100%" }}
@@ -616,7 +746,7 @@ const ExcalidrawWrapper = () => {
       <Excalidraw
         ref={excalidrawRefCallback}
         onChange={onChange}
-        initialData={initialStatePromiseRef.current.promise}
+        initialData={getInitialData()}
         isCollaborating={isCollaborating}
         onPointerUpdate={collabAPI?.onPointerUpdate}
         UIOptions={{