better types

This commit is contained in:
Aakansha Doshi 2023-05-17 17:58:18 +05:30
parent 81bee8acb8
commit 4348646705
5 changed files with 179 additions and 42 deletions

View file

@ -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, "x" | "y">;
} & ElementConstructorOpts)
| ({
type: Exclude<
typeof ELEMENTS_SUPPORTING_PROGRAMMATIC_API[number],
"text"
>;
})
| {
type: Exclude<ExcalidrawGenericElement["type"], "selection">;
label?: { text: string } & MarkOptional<
ElementConstructorOpts,
"x" | "y"
>;
}
label?: {
text: string;
fontSize?: number;
fontFamily?: FontFamilyValues;
textAlign?: TextAlign;
verticalAlign?: VerticalAlign;
} & MarkOptional<ElementConstructorOpts, "x" | "y">;
} & ElementConstructorOpts)
| ({
type: "text";
text: string;
} & ElementConstructorOpts)
)[]
| null;
appState?: Readonly<

View file

@ -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);
}

View file

@ -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",

View file

@ -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";

View file

@ -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={{