smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-04-14 16:40:58 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

make type optional when id present

Browse source
This commit is contained in:
Aakansha Doshi 2023-06-12 11:53:10 +05:30
parent d9e6910df0
commit d76bc7890d
3 changed files with 157 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

155
src/data/transform.ts
View file

@ -25,6 +25,7 @@ import {
ExcalidrawBindableElement, ExcalidrawBindableElement,
ExcalidrawElement, ExcalidrawElement,
ExcalidrawGenericElement, ExcalidrawGenericElement,
ExcalidrawImageElement,
ExcalidrawLinearElement, ExcalidrawLinearElement,
ExcalidrawTextElement, ExcalidrawTextElement,
} from "../element/types"; } from "../element/types";
@ -132,72 +133,116 @@ const bindLinearElementToElement = (
if (start) { if (start) {
const width = start?.width ?? DEFAULT_DIMENSION; const width = start?.width ?? DEFAULT_DIMENSION;
const height = start?.height ?? DEFAULT_DIMENSION; const height = start?.height ?? DEFAULT_DIMENSION;
const existingElement = start.id let existingElement;
? excalidrawElements.get().find((ele) => ele?.id === start.id) if (start.id) {
: undefined; existingElement = excalidrawElements
const startX = start.x || excliadrawLinearElement.x - width; .get()
const startY = start.y || excliadrawLinearElement.y - height / 2; .find((ele) => ele?.id === start.id) as Exclude<
ExcalidrawBindableElement,
if (start.type === "text") { ExcalidrawImageElement
startBoundElement = newTextElement({ >;
x: startX, if (!existingElement) {
y: startY, console.error(`No element for start binding with id ${start.id} found`);
...existingElement, }
...start,
});
// to position the text correctly when coordinates not provided
mutateElement(startBoundElement, {
x: start.x || excliadrawLinearElement.x - startBoundElement.width,
y: start.y || excliadrawLinearElement.y - startBoundElement.height / 2,
});
} else {
startBoundElement = newElement({
x: startX,
y: startY,
width,
height,
...existingElement,
...start,
});
} }
bindLinearElement( const startX = start.x || excliadrawLinearElement.x - width;
excliadrawLinearElement, const startY = start.y || excliadrawLinearElement.y - height / 2;
startBoundElement as ExcalidrawBindableElement, const startType = existingElement ? existingElement.type : start.type;
"start",
); if (startType) {
if (startType === "text") {
let text = "";
if (existingElement && existingElement.type === "text") {
text = existingElement.text;
} else if (start.type === "text") {
text = start.text;
}
startBoundElement = newTextElement({
x: startX,
y: startY,
type: "text",
...existingElement,
...start,
text,
});
// to position the text correctly when coordinates not provided
mutateElement(startBoundElement, {
x: start.x || excliadrawLinearElement.x - startBoundElement.width,
y:
start.y || excliadrawLinearElement.y - startBoundElement.height / 2,
});
} else {
startBoundElement = newElement({
x: startX,
y: startY,
width,
height,
...existingElement,
...start,
type: startType,
});
}
bindLinearElement(
excliadrawLinearElement,
startBoundElement as ExcalidrawBindableElement,
"start",
);
}
} }
if (end) { if (end) {
const height = end?.height ?? DEFAULT_DIMENSION; const height = end?.height ?? DEFAULT_DIMENSION;
const width = end?.width ?? DEFAULT_DIMENSION; const width = end?.width ?? DEFAULT_DIMENSION;
const existingElement = end.id let existingElement;
? excalidrawElements.get().find((ele) => ele?.id === end.id) if (end.id) {
: undefined; existingElement = excalidrawElements
.get()
.find((ele) => ele?.id === end.id) as Exclude<
ExcalidrawBindableElement,
ExcalidrawImageElement
>;
if (!existingElement) {
console.error(`No element for end binding with id ${end.id} found`);
}
}
const endX = const endX =
end.x || excliadrawLinearElement.x + excliadrawLinearElement.width; end.x || excliadrawLinearElement.x + excliadrawLinearElement.width;
const endY = end.y || excliadrawLinearElement.y - height / 2; const endY = end.y || excliadrawLinearElement.y - height / 2;
const endType = existingElement ? existingElement.type : end.type;
if (end.type === "text") { if (endType) {
endBoundElement = newTextElement({ if (endType === "text") {
x: endX, let text = "";
y: endY, if (existingElement && existingElement.type === "text") {
...existingElement, text = existingElement.text;
...end, } else if (end.type === "text") {
}); text = end.text;
// to position the text correctly when coordinates not provided }
mutateElement(endBoundElement, { endBoundElement = newTextElement({
y: end.y || excliadrawLinearElement.y - endBoundElement.height / 2, x: endX,
}); y: endY,
} else { type: "text",
endBoundElement = newElement({ ...existingElement,
x: endX, ...end,
y: endY, text,
width, });
height, // to position the text correctly when coordinates not provided
...existingElement, mutateElement(endBoundElement, {
...end, y: end.y || excliadrawLinearElement.y - endBoundElement.height / 2,
}) as ExcalidrawBindableElement; });
} else {
endBoundElement = newElement({
x: endX,
y: endY,
width,
height,
...existingElement,
...end,
type: endType,
}) as ExcalidrawBindableElement;
}
} }
bindLinearElement( bindLinearElement(
excliadrawLinearElement, excliadrawLinearElement,

80
src/data/types.ts
View file

@ -56,34 +56,66 @@ export type ValidLinearElement = {
} & MarkOptional<ElementConstructorOpts, "x" | "y">; } & MarkOptional<ElementConstructorOpts, "x" | "y">;
end?: end?:
| ( | (
| { | (
type: Exclude< | {
ExcalidrawBindableElement["type"], type: Exclude<
"image" | "selection" | "text" ExcalidrawBindableElement["type"],
>; "image" | "selection" | "text"
id?: ExcalidrawGenericElement["id"]; >;
} id?: ExcalidrawGenericElement["id"];
| ({ }
type: "text"; | {
text: string; id: ExcalidrawGenericElement["id"];
id?: ExcalidrawTextElement["id"]; type?: Exclude<
} & Partial<ExcalidrawTextElement>) ExcalidrawBindableElement["type"],
"image" | "selection" | "text"
>;
}
)
| ((
| {
type: "text";
text: string;
}
| {
type?: "text";
id: ExcalidrawTextElement["id"];
text: string;
}
) &
Partial<ExcalidrawTextElement>)
) & ) &
MarkOptional<ElementConstructorOpts, "x" | "y">; MarkOptional<ElementConstructorOpts, "x" | "y">;
start?: start?:
| ( | (
| { | (
type: Exclude< | {
ExcalidrawBindableElement["type"], type: Exclude<
"image" | "selection" | "text" ExcalidrawBindableElement["type"],
>; "image" | "selection" | "text"
id?: ExcalidrawGenericElement["id"]; >;
} id?: ExcalidrawGenericElement["id"];
| ({ }
type: "text"; | {
text: string; id: ExcalidrawGenericElement["id"];
id?: ExcalidrawTextElement["id"]; type?: Exclude<
} & Partial<ExcalidrawTextElement>) ExcalidrawBindableElement["type"],
"image" | "selection" | "text"
>;
}
)
| ((
| {
type: "text";
text: string;
}
| {
type?: "text";
id: ExcalidrawTextElement["id"];
text: string;
}
) &
Partial<ExcalidrawTextElement>)
) & ) &
MarkOptional<ElementConstructorOpts, "x" | "y">; MarkOptional<ElementConstructorOpts, "x" | "y">;
} & Partial<ExcalidrawLinearElement>; } & Partial<ExcalidrawLinearElement>;

2
src/packages/excalidraw/example/App.tsx
View file

@ -208,7 +208,7 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
type: "arrow", type: "arrow",
x: 300, x: 300,
y: 150, y: 150,
start: { type: "rectangle", id: "rect-1" }, start: { id: "rect-1" },
end: { type: "ellipse" }, end: { type: "ellipse" },
}, },
{ {