support creating arrows and line

This commit is contained in:
Aakansha Doshi 2023-05-16 16:50:58 +05:30
parent d83860c747
commit fbf2d533c0
2 changed files with 28 additions and 7 deletions

View file

@ -48,8 +48,7 @@ export interface ImportedDataState {
label?: { text: string } & MarkOptional< label?: { text: string } & MarkOptional<
ElementConstructorOpts, ElementConstructorOpts,
"x" | "y" "x" | "y"
> & >;
MarkOptional<ElementConstructorOpts, "x" | "y">;
} }
)[] )[]
| null; | null;

View file

@ -55,6 +55,8 @@ const ELEMENTS_SUPPORTING_PROGRAMMATIC_API = [
"ellipse", "ellipse",
"diamond", "diamond",
"text", "text",
"arrow",
"line",
]; ];
export type ElementConstructorOpts = MarkOptional< export type ElementConstructorOpts = MarkOptional<
Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">, Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">,
@ -365,8 +367,8 @@ export const newFreeDrawElement = (
export const newLinearElement = ( export const newLinearElement = (
opts: { opts: {
type: ExcalidrawLinearElement["type"]; type: ExcalidrawLinearElement["type"];
startArrowhead: Arrowhead | null; startArrowhead?: Arrowhead | null;
endArrowhead: Arrowhead | null; endArrowhead?: Arrowhead | null;
points?: ExcalidrawLinearElement["points"]; points?: ExcalidrawLinearElement["points"];
} & ElementConstructorOpts, } & ElementConstructorOpts,
): NonDeleted<ExcalidrawLinearElement> => { ): NonDeleted<ExcalidrawLinearElement> => {
@ -376,8 +378,8 @@ export const newLinearElement = (
lastCommittedPoint: null, lastCommittedPoint: null,
startBinding: null, startBinding: null,
endBinding: null, endBinding: null,
startArrowhead: opts.startArrowhead, startArrowhead: opts.startArrowhead || null,
endArrowhead: opts.endArrowhead, endArrowhead: opts.endArrowhead || null,
}; };
}; };
@ -661,7 +663,6 @@ export const convertToExcalidrawElements = (
if (!elements) { if (!elements) {
return []; return [];
} }
console.log(elements, "ele ");
elements.forEach((element) => { elements.forEach((element) => {
if (!element) { if (!element) {
return; return;
@ -686,6 +687,27 @@ export const convertToExcalidrawElements = (
y: 0, y: 0,
...element, ...element,
}); });
} else if (element.type === "arrow" || element.type === "line") {
excalidrawElement = newLinearElement({
//@ts-ignore
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,
});
} else { } else {
//@ts-ignore //@ts-ignore
excalidrawElement = newElement({ excalidrawElement = newElement({