From 016662a7f6b0ac479741043d754adf9034775d41 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Mon, 29 May 2023 13:53:19 +0530 Subject: [PATCH] fix types --- src/data/restore.ts | 1 + src/data/transform.ts | 121 ++++++++++++---------------------------- src/data/types.ts | 125 +++++++++++++++++++++++------------------- 3 files changed, 104 insertions(+), 143 deletions(-) diff --git a/src/data/restore.ts b/src/data/restore.ts index d9662a888c..ad909b7ece 100644 --- a/src/data/restore.ts +++ b/src/data/restore.ts @@ -102,6 +102,7 @@ export const restoreElementWithProperties = < > & Partial>, ): T => { + console.log("ELEMENT", element.backgroundColor); const base: Pick & { [PRECEDING_ELEMENT_KEY]?: string; } = { diff --git a/src/data/transform.ts b/src/data/transform.ts index 83532915b6..24fccf6d4c 100644 --- a/src/data/transform.ts +++ b/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: - | { - type: - | Exclude - | ExcalidrawLinearElement["type"]; - } & MarkOptional, + containerProps: ValidContainer | ValidLinearElement, textProps: { text: string } & MarkOptional, ) => { let container; @@ -61,11 +53,7 @@ const bindTextToContainer = ( container = newLinearElement({ width, height, - //@ts-ignore - type: containerProps.type, - //@ts-ignore, - endArrowhead: containerProps.type === "arrow" ? "arrow" : null, - //@ts-ignore + endArrowhead: "arrow", points: [ [0, 0], [width, height], @@ -101,50 +89,7 @@ const bindTextToContainer = ( }; const bindLinearElementToElement = ( - linearElement: { - type: ExcalidrawLinearElement["type"]; - x: number; - y: number; - label?: { - text: string; - fontSize?: number; - fontFamily?: FontFamilyValues; - textAlign?: TextAlign; - verticalAlign?: VerticalAlign; - } & MarkOptional; - start?: - | ( - | { - type: Exclude< - ExcalidrawBindableElement["type"], - "image" | "selection" | "text" - >; - id?: ExcalidrawGenericElement["id"]; - } - | ({ - type: "text"; - text: string; - id?: ExcalidrawTextElement["id"]; - } & Partial) - ) & - MarkOptional; - end?: - | ( - | { - type: Exclude< - ExcalidrawBindableElement["type"], - "image" | "selection" | "text" - >; - id?: ExcalidrawGenericElement["id"]; - } - | ({ - type: "text"; - text: string; - id?: ExcalidrawTextElement["id"]; - } & Partial) - ) & - MarkOptional; - } & Partial, + linearElement: ValidLinearElement, ): { 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; } - //@ts-ignore - if (VALID_CONTAINER_TYPES.has(element.type) && element?.label?.text) { + const elementWithid = { ...element, id: elementId }; + + if ( + VALID_CONTAINER_TYPES.has(elementWithid.type) && //@ts-ignore - let [container, text] = bindTextToContainer(elementWithid, element.label); + elementWithid?.label?.text + ) { + let [container, text] = bindTextToContainer( + //@ts-ignore + 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: element?.start, - //@ts-ignore - end: element?.end, + start: originalStart, + end: originalEnd, }); container = linearElement; excalidrawElements.push(linearElement); @@ -348,12 +300,12 @@ export const convertToExcalidrawElements = ( } } else { let excalidrawElement; - if (element.type === "text") { - const fontFamily = element?.fontFamily || DEFAULT_FONT_FAMILY; - const fontSize = element?.fontSize || DEFAULT_FONT_SIZE; + if (elementWithid.type === "text") { + const fontFamily = elementWithid?.fontFamily || DEFAULT_FONT_FAMILY; + const fontSize = elementWithid?.fontSize || DEFAULT_FONT_SIZE; const lineHeight = - element?.lineHeight || getDefaultLineHeight(fontFamily); - const text = element.text ?? ""; + elementWithid?.lineHeight || getDefaultLineHeight(fontFamily); + 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 && !element.start.id) { - //@ts-ignore + if (startBoundElement && !elementWithid?.start?.id) { excalidrawElements.push(startBoundElement); } - //@ts-ignore - if (endBoundElement && !element.end.id) { - //@ts-ignore + if (endBoundElement && !elementWithid?.end?.id) { excalidrawElements.push(endBoundElement); } } else { excalidrawElement = { ...elementWithid, width: - element?.width || - (ELEMENTS_SUPPORTING_PROGRAMMATIC_API.includes(element.type) + elementWithid?.width || + (ELEMENTS_SUPPORTING_PROGRAMMATIC_API.includes(elementWithid.type) ? 100 : 0), height: - element?.height || - (ELEMENTS_SUPPORTING_PROGRAMMATIC_API.includes(element.type) + elementWithid?.height || + (ELEMENTS_SUPPORTING_PROGRAMMATIC_API.includes(elementWithid.type) ? 100 : 0), } as ExcalidrawGenericElement; diff --git a/src/data/types.ts b/src/data/types.ts index 3e6599fa27..66e88f1041 100644 --- a/src/data/types.ts +++ b/src/data/types.ts @@ -1,8 +1,11 @@ import { ExcalidrawBindableElement, ExcalidrawElement, + ExcalidrawFreeDrawElement, ExcalidrawGenericElement, + ExcalidrawImageElement, ExcalidrawLinearElement, + ExcalidrawSelectionElement, ExcalidrawTextElement, FontFamilyValues, TextAlign, @@ -40,24 +43,78 @@ export type LegacyAppState = { isSidebarDocked: [boolean, "defaultSidebarDockedPreference"]; }; +export type ValidLinearElement = { + type: ExcalidrawLinearElement["type"]; + x: number; + y: number; + label?: { + text: string; + fontSize?: number; + fontFamily?: FontFamilyValues; + textAlign?: TextAlign; + verticalAlign?: VerticalAlign; + } & MarkOptional; + end?: + | ( + | { + type: Exclude< + ExcalidrawBindableElement["type"], + "image" | "selection" | "text" + >; + id?: ExcalidrawGenericElement["id"]; + } + | ({ + type: "text"; + text: string; + id?: ExcalidrawTextElement["id"]; + } & Partial) + ) & + MarkOptional; + start?: + | ( + | { + type: Exclude< + ExcalidrawBindableElement["type"], + "image" | "selection" | "text" + >; + id?: ExcalidrawGenericElement["id"]; + } + | ({ + type: "text"; + text: string; + id?: ExcalidrawTextElement["id"]; + } & Partial) + ) & + MarkOptional; +} & Partial; + +export type ValidContainer = + | { + type: Exclude; + id?: ExcalidrawGenericElement["id"]; + label?: { + text: string; + fontSize?: number; + fontFamily?: FontFamilyValues; + textAlign?: TextAlign; + verticalAlign?: VerticalAlign; + } & MarkOptional; + } & ElementConstructorOpts; + export interface ImportedDataState { type?: string; version?: number; source?: string; elements?: | readonly ( - | ExcalidrawElement - | ({ - type: Exclude; - id?: ExcalidrawGenericElement["id"]; - label?: { - text: string; - fontSize?: number; - fontFamily?: FontFamilyValues; - textAlign?: TextAlign; - verticalAlign?: VerticalAlign; - } & MarkOptional; - } & ElementConstructorOpts) + | Extract< + ExcalidrawElement, + | ExcalidrawSelectionElement + | ExcalidrawImageElement + | ExcalidrawFreeDrawElement + > + | ValidContainer + | ValidLinearElement | ({ type: "text"; text: string; @@ -65,50 +122,6 @@ export interface ImportedDataState { y: number; id?: ExcalidrawTextElement["id"]; } & Partial) - | ({ - type: ExcalidrawLinearElement["type"]; - x: number; - y: number; - label?: { - text: string; - fontSize?: number; - fontFamily?: FontFamilyValues; - textAlign?: TextAlign; - verticalAlign?: VerticalAlign; - } & MarkOptional; - end?: - | ( - | { - type: Exclude< - ExcalidrawBindableElement["type"], - "image" | "selection" | "text" - >; - id?: ExcalidrawGenericElement["id"]; - } - | ({ - type: "text"; - text: string; - id?: ExcalidrawTextElement["id"]; - } & Partial) - ) & - MarkOptional; - start?: - | ( - | { - type: Exclude< - ExcalidrawBindableElement["type"], - "image" | "selection" | "text" - >; - id?: ExcalidrawGenericElement["id"]; - } - | ({ - type: "text"; - text: string; - id?: ExcalidrawTextElement["id"]; - } & Partial) - ) & - MarkOptional; - } & Partial) )[] | null; appState?: Readonly<