allow multiple arrows to bind to single element

This commit is contained in:
Aakansha Doshi 2023-05-24 18:42:35 +05:30
parent 985318e960
commit 596edaea62

View file

@ -41,9 +41,11 @@ const bindTextToContainer = (
) => { ) => {
let container; let container;
if (containerProps.type === "arrow") { if (containerProps.type === "arrow") {
const width = containerProps.width || 300;
const height = containerProps.height || 24;
container = newLinearElement({ container = newLinearElement({
width: containerProps.width || 300, width,
height: containerProps.height || 24, height,
//@ts-ignore //@ts-ignore
type: containerProps.type, type: containerProps.type,
//@ts-ignore, //@ts-ignore,
@ -51,7 +53,7 @@ const bindTextToContainer = (
//@ts-ignore //@ts-ignore
points: [ points: [
[0, 0], [0, 0],
[300, 0], [width, height],
], ],
...containerProps, ...containerProps,
}); });
@ -106,7 +108,6 @@ const bindLinearElementToElement = (
id?: ExcalidrawGenericElement["id"]; id?: ExcalidrawGenericElement["id"];
} & MarkOptional<ElementConstructorOpts, "x" | "y">; } & MarkOptional<ElementConstructorOpts, "x" | "y">;
} & Partial<ExcalidrawLinearElement>, } & Partial<ExcalidrawLinearElement>,
elements: ImportedDataState["elements"],
): { ): {
linearElement: ExcalidrawLinearElement; linearElement: ExcalidrawLinearElement;
startBoundElement?: ExcalidrawElement; startBoundElement?: ExcalidrawElement;
@ -119,23 +120,20 @@ const bindLinearElementToElement = (
endArrowhead = linearElement.type === "arrow" ? "arrow" : null, endArrowhead = linearElement.type === "arrow" ? "arrow" : null,
...rest ...rest
} = linearElement; } = linearElement;
const width = linearElement.width || 300;
const height = linearElement.height || 24;
const excliadrawLinearElement = newLinearElement({ const excliadrawLinearElement = newLinearElement({
type, type,
width: 200, width,
height: 24, height,
points: [ points: [
[0, 0], [0, 0],
[200, 0], [width, height],
], ],
endArrowhead, endArrowhead,
...rest, ...rest,
}); });
if (!elements || !elements.length) {
return { linearElement: excliadrawLinearElement };
}
let startBoundElement; let startBoundElement;
let endBoundElement; let endBoundElement;
@ -148,7 +146,7 @@ const bindLinearElementToElement = (
const width = start?.width ?? 100; const width = start?.width ?? 100;
const height = start?.height ?? 100; const height = start?.height ?? 100;
const existingElement = start.id const existingElement = start.id
? elements.find((ele) => ele?.id === start.id) ? excalidrawElements.get().find((ele) => ele?.id === start.id)
: undefined; : undefined;
startBoundElement = newElement({ startBoundElement = newElement({
x: start.x || excliadrawLinearElement.x - width, x: start.x || excliadrawLinearElement.x - width,
@ -168,7 +166,7 @@ const bindLinearElementToElement = (
if (end) { if (end) {
const height = end?.height ?? 100; const height = end?.height ?? 100;
const existingElement = end.id const existingElement = end.id
? elements.find((ele) => ele?.id === end.id) ? excalidrawElements.get().find((ele) => ele?.id === end.id)
: undefined; : undefined;
endBoundElement = newElement({ endBoundElement = newElement({
x: end.x || excliadrawLinearElement.x + excliadrawLinearElement.width, x: end.x || excliadrawLinearElement.x + excliadrawLinearElement.width,
@ -249,16 +247,13 @@ export const convertToExcalidrawElements = (
if (container.type === "arrow") { if (container.type === "arrow") {
const { linearElement, startBoundElement, endBoundElement } = const { linearElement, startBoundElement, endBoundElement } =
bindLinearElementToElement( bindLinearElementToElement({
{
...container, ...container,
//@ts-ignore //@ts-ignore
start: element?.start, start: element?.start,
//@ts-ignore //@ts-ignore
end: element?.end, end: element?.end,
}, });
elements,
);
container = linearElement; container = linearElement;
excalidrawElements.push(linearElement); excalidrawElements.push(linearElement);
excalidrawElements.push(startBoundElement); excalidrawElements.push(startBoundElement);
@ -274,7 +269,7 @@ export const convertToExcalidrawElements = (
} else if (element.type === "arrow" || element.type === "line") { } else if (element.type === "arrow" || element.type === "line") {
const { linearElement, startBoundElement, endBoundElement } = const { linearElement, startBoundElement, endBoundElement } =
//@ts-ignore //@ts-ignore
bindLinearElementToElement(element, elements); bindLinearElementToElement(element);
excalidrawElements.push(linearElement); excalidrawElements.push(linearElement);
excalidrawElements.push(startBoundElement); excalidrawElements.push(startBoundElement);
excalidrawElements.push(endBoundElement); excalidrawElements.push(endBoundElement);