fix: Bound arrow elements for distribute and wyswig updates (#10702)
* fix: update distributeElements to updateBoundElements Co-authored-by: Anvi Kudaraya <anvikudaraya417@gmail.com> * fix: apply updateBoundElements when bound text extends past container height Co-authored-by: Anvi Kudaraya <anvikudaraya417@gmail.com> --------- Co-authored-by: Anvi Kudaraya <anvikudaraya417@gmail.com>
This commit is contained in:
co-authored by
Anvi Kudaraya
parent
60759d314d
commit
28691e14b1
@@ -1,10 +1,12 @@
|
|||||||
import type { AppState } from "@excalidraw/excalidraw/types";
|
import type { AppState } from "@excalidraw/excalidraw/types";
|
||||||
|
|
||||||
|
import { updateBoundElements } from "./binding";
|
||||||
import { getCommonBoundingBox } from "./bounds";
|
import { getCommonBoundingBox } from "./bounds";
|
||||||
import { newElementWith } from "./mutateElement";
|
|
||||||
|
|
||||||
import { getSelectedElementsByGroup } from "./groups";
|
import { getSelectedElementsByGroup } from "./groups";
|
||||||
|
|
||||||
|
import type { Scene } from "./Scene";
|
||||||
|
|
||||||
import type { ElementsMap, ExcalidrawElement } from "./types";
|
import type { ElementsMap, ExcalidrawElement } from "./types";
|
||||||
|
|
||||||
export interface Distribution {
|
export interface Distribution {
|
||||||
@@ -17,6 +19,7 @@ export const distributeElements = (
|
|||||||
elementsMap: ElementsMap,
|
elementsMap: ElementsMap,
|
||||||
distribution: Distribution,
|
distribution: Distribution,
|
||||||
appState: Readonly<AppState>,
|
appState: Readonly<AppState>,
|
||||||
|
scene: Scene,
|
||||||
): ExcalidrawElement[] => {
|
): ExcalidrawElement[] => {
|
||||||
const [start, mid, end, extent] =
|
const [start, mid, end, extent] =
|
||||||
distribution.axis === "x"
|
distribution.axis === "x"
|
||||||
@@ -66,12 +69,16 @@ export const distributeElements = (
|
|||||||
translation[distribution.axis] = pos - box[mid];
|
translation[distribution.axis] = pos - box[mid];
|
||||||
}
|
}
|
||||||
|
|
||||||
return group.map((element) =>
|
return group.map((element) => {
|
||||||
newElementWith(element, {
|
const updatedElement = scene.mutateElement(element, {
|
||||||
x: element.x + translation.x,
|
x: element.x + translation.x,
|
||||||
y: element.y + translation.y,
|
y: element.y + translation.y,
|
||||||
}),
|
});
|
||||||
);
|
updateBoundElements(element, scene, {
|
||||||
|
simultaneouslyUpdated: group,
|
||||||
|
});
|
||||||
|
return updatedElement;
|
||||||
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -90,11 +97,15 @@ export const distributeElements = (
|
|||||||
pos += step;
|
pos += step;
|
||||||
pos += box[extent];
|
pos += box[extent];
|
||||||
|
|
||||||
return group.map((element) =>
|
return group.map((element) => {
|
||||||
newElementWith(element, {
|
const updatedElement = scene.mutateElement(element, {
|
||||||
x: element.x + translation.x,
|
x: element.x + translation.x,
|
||||||
y: element.y + translation.y,
|
y: element.y + translation.y,
|
||||||
}),
|
});
|
||||||
);
|
updateBoundElements(element, scene, {
|
||||||
|
simultaneouslyUpdated: group,
|
||||||
|
});
|
||||||
|
return updatedElement;
|
||||||
|
});
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -58,6 +58,7 @@ const distributeSelectedElements = (
|
|||||||
app.scene.getNonDeletedElementsMap(),
|
app.scene.getNonDeletedElementsMap(),
|
||||||
distribution,
|
distribution,
|
||||||
appState,
|
appState,
|
||||||
|
app.scene,
|
||||||
);
|
);
|
||||||
|
|
||||||
const updatedElementsMap = arrayToMap(updatedElements);
|
const updatedElementsMap = arrayToMap(updatedElements);
|
||||||
|
|||||||
@@ -14,6 +14,7 @@ import {
|
|||||||
|
|
||||||
import {
|
import {
|
||||||
originalContainerCache,
|
originalContainerCache,
|
||||||
|
updateBoundElements,
|
||||||
updateOriginalContainerCache,
|
updateOriginalContainerCache,
|
||||||
} from "@excalidraw/element";
|
} from "@excalidraw/element";
|
||||||
|
|
||||||
@@ -208,6 +209,7 @@ export const textWysiwyg = ({
|
|||||||
);
|
);
|
||||||
|
|
||||||
app.scene.mutateElement(container, { height: targetContainerHeight });
|
app.scene.mutateElement(container, { height: targetContainerHeight });
|
||||||
|
updateBoundElements(container, app.scene);
|
||||||
return;
|
return;
|
||||||
} else if (
|
} else if (
|
||||||
// autoshrink container height until original container height
|
// autoshrink container height until original container height
|
||||||
@@ -221,6 +223,7 @@ export const textWysiwyg = ({
|
|||||||
container.type,
|
container.type,
|
||||||
);
|
);
|
||||||
app.scene.mutateElement(container, { height: targetContainerHeight });
|
app.scene.mutateElement(container, { height: targetContainerHeight });
|
||||||
|
updateBoundElements(container, app.scene);
|
||||||
} else {
|
} else {
|
||||||
const { x, y } = computeBoundTextPosition(
|
const { x, y } = computeBoundTextPosition(
|
||||||
container,
|
container,
|
||||||
|
|||||||
Reference in New Issue
Block a user