From 434864670572e5296eaf2db698ff6c1062a9e077 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Wed, 17 May 2023 17:58:18 +0530 Subject: [PATCH] better types --- src/data/types.ts | 48 +++++++++---- src/element/newElement.ts | 38 ++++------ src/element/textElement.ts | 2 +- src/element/types.ts | 1 - src/excalidraw-app/index.tsx | 132 ++++++++++++++++++++++++++++++++++- 5 files changed, 179 insertions(+), 42 deletions(-) diff --git a/src/data/types.ts b/src/data/types.ts index b48addb175..4b86e4296e 100644 --- a/src/data/types.ts +++ b/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< - ElementConstructorOpts, - "x" | "y" + label?: { + text: string; + fontSize?: number; + fontFamily?: FontFamilyValues; + textAlign?: TextAlign; + verticalAlign?: VerticalAlign; + } & MarkOptional; + } & ElementConstructorOpts) + | ({ + type: Exclude< + typeof ELEMENTS_SUPPORTING_PROGRAMMATIC_API[number], + "text" >; - }) - | { - type: Exclude; - label?: { text: string } & MarkOptional< - ElementConstructorOpts, - "x" | "y" - >; - } + label?: { + text: string; + fontSize?: number; + fontFamily?: FontFamilyValues; + textAlign?: TextAlign; + verticalAlign?: VerticalAlign; + } & MarkOptional; + } & ElementConstructorOpts) + | ({ + type: "text"; + text: string; + } & ElementConstructorOpts) )[] | null; appState?: Readonly< diff --git a/src/element/newElement.ts b/src/element/newElement.ts index fc3b54b232..ad5efaaa45 100644 --- a/src/element/newElement.ts +++ b/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 - x: 0, - //@ts-ignore - y: 0, - //@ts-ignore - type: element.type, - //@ts-ignore + type, 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); } diff --git a/src/element/textElement.ts b/src/element/textElement.ts index 3069fd1b5f..e0419c81a2 100644 --- a/src/element/textElement.ts +++ b/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", diff --git a/src/element/types.ts b/src/element/types.ts index 531858e2ff..2e6b9c80d7 100644 --- a/src/element/types.ts +++ b/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"; diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx index 2fbd7b68e9..7dac7cd951 100644 --- a/src/excalidraw-app/index.tsx +++ b/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 (
{