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

support binding arrow to text element

Browse source
This commit is contained in:
Aakansha Doshi 2023-05-25 22:56:50 +05:30
parent 7560b59900
commit afc98c2d47
2 changed files with 116 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

112
src/data/transform.ts
View file

@ -57,7 +57,7 @@ const bindTextToContainer = (
let container; let container;
if (containerProps.type === "arrow") { if (containerProps.type === "arrow") {
const width = containerProps.width || 300; const width = containerProps.width || 300;
const height = containerProps.height || 24; const height = containerProps.height || 0;
container = newLinearElement({ container = newLinearElement({
width, width,
height, height,
@ -111,17 +111,38 @@ const bindLinearElementToElement = (
textAlign?: TextAlign; textAlign?: TextAlign;
verticalAlign?: VerticalAlign; verticalAlign?: VerticalAlign;
} & MarkOptional<ElementConstructorOpts, "x" | "y">; } & MarkOptional<ElementConstructorOpts, "x" | "y">;
start?: { start?:
type: Exclude< | (
ExcalidrawBindableElement["type"], | {
"image" | "selection" | "text" type: Exclude<
>; ExcalidrawBindableElement["type"],
id?: ExcalidrawGenericElement["id"]; "image" | "selection" | "text"
} & MarkOptional<ElementConstructorOpts, "x" | "y">; >;
end?: { id?: ExcalidrawGenericElement["id"];
type: ExcalidrawGenericElement["type"]; }
id?: ExcalidrawGenericElement["id"]; | ({
} & MarkOptional<ElementConstructorOpts, "x" | "y">; type: "text";
text: string;
id?: ExcalidrawTextElement["id"];
} & Partial<ExcalidrawTextElement>)
) &
MarkOptional<ElementConstructorOpts, "x" | "y">;
end?:
| (
| {
type: Exclude<
ExcalidrawBindableElement["type"],
"image" | "selection" | "text"
>;
id?: ExcalidrawGenericElement["id"];
}
| ({
type: "text";
text: string;
id?: ExcalidrawTextElement["id"];
} & Partial<ExcalidrawTextElement>)
) &
MarkOptional<ElementConstructorOpts, "x" | "y">;
} & Partial<ExcalidrawLinearElement>, } & Partial<ExcalidrawLinearElement>,
): { ): {
linearElement: ExcalidrawLinearElement; linearElement: ExcalidrawLinearElement;
@ -163,14 +184,31 @@ const bindLinearElementToElement = (
const existingElement = start.id const existingElement = start.id
? excalidrawElements.get().find((ele) => ele?.id === start.id) ? excalidrawElements.get().find((ele) => ele?.id === start.id)
: undefined; : undefined;
startBoundElement = newElement({ const startX = start.x || excliadrawLinearElement.x - width;
x: start.x || excliadrawLinearElement.x - width, const startY = start.y || excliadrawLinearElement.y - height / 2;
y: start.y || excliadrawLinearElement.y - height / 2,
width, if (start.type === "text") {
height, startBoundElement = newTextElement({
...existingElement, x: startX,
...start, y: startY,
}); ...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( bindLinearElement(
excliadrawLinearElement, excliadrawLinearElement,
@ -180,18 +218,36 @@ const bindLinearElementToElement = (
} }
if (end) { if (end) {
const height = end?.height ?? 100; const height = end?.height ?? 100;
const width = end?.width ?? 100;
const existingElement = end.id const existingElement = end.id
? excalidrawElements.get().find((ele) => ele?.id === end.id) ? excalidrawElements.get().find((ele) => ele?.id === end.id)
: undefined; : undefined;
endBoundElement = newElement({ const endX =
x: end.x || excliadrawLinearElement.x + excliadrawLinearElement.width, end.x || excliadrawLinearElement.x + excliadrawLinearElement.width;
y: end.y || excliadrawLinearElement.y - height / 2, const endY = end.y || excliadrawLinearElement.y - height / 2;
width: end?.width ?? 100,
height,
...existingElement,
...end,
}) as ExcalidrawBindableElement;
if (end.type === "text") {
endBoundElement = newTextElement({
x: endX,
y: endY,
...existingElement,
...end,
});
// to position the text correctly when coordinates not provided
mutateElement(endBoundElement, {
y: end.y || excliadrawLinearElement.y - endBoundElement.height / 2,
});
} else {
endBoundElement = newElement({
x: endX,
y: endY,
width,
height,
...existingElement,
...end,
}) as ExcalidrawBindableElement;
}
bindLinearElement( bindLinearElement(
excliadrawLinearElement, excliadrawLinearElement,
endBoundElement as ExcalidrawBindableElement, endBoundElement as ExcalidrawBindableElement,

43
src/data/types.ts
View file

@ -73,17 +73,38 @@ export interface ImportedDataState {
textAlign?: TextAlign; textAlign?: TextAlign;
verticalAlign?: VerticalAlign; verticalAlign?: VerticalAlign;
} & MarkOptional<ElementConstructorOpts, "x" | "y">; } & MarkOptional<ElementConstructorOpts, "x" | "y">;
start?: { end?:
type: Exclude< | (
ExcalidrawBindableElement["type"], | {
"image" | "selection" | "text" type: Exclude<
>; ExcalidrawBindableElement["type"],
id?: ExcalidrawGenericElement["id"]; "image" | "selection" | "text"
} & MarkOptional<ElementConstructorOpts, "x" | "y">; >;
end?: { id?: ExcalidrawGenericElement["id"];
type: ExcalidrawGenericElement["type"]; }
id?: ExcalidrawGenericElement["id"]; | ({
} & MarkOptional<ElementConstructorOpts, "x" | "y">; type: "text";
text: string;
id?: ExcalidrawTextElement["id"];
} & Partial<ExcalidrawTextElement>)
) &
MarkOptional<ElementConstructorOpts, "x" | "y">;
start?:
| (
| {
type: Exclude<
ExcalidrawBindableElement["type"],
"image" | "selection" | "text"
>;
id?: ExcalidrawGenericElement["id"];
}
| ({
type: "text";
text: string;
id?: ExcalidrawTextElement["id"];
} & Partial<ExcalidrawTextElement>)
) &
MarkOptional<ElementConstructorOpts, "x" | "y">;
} & Partial<ExcalidrawLinearElement>) } & Partial<ExcalidrawLinearElement>)
)[] )[]
| null; | null;