feat: improve zoom-to-content when creating flowchart (#8368)

This commit is contained in:
David Luzar 2024-08-12 20:42:08 +02:00 committed by GitHub
parent 8420e1aa13
commit 4320a3cf41
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 107 additions and 30 deletions

View file

@ -738,6 +738,7 @@ export const getElementBounds = (
export const getCommonBounds = (
elements: readonly ExcalidrawElement[],
elementsMap?: ElementsMap,
): Bounds => {
if (!elements.length) {
return [0, 0, 0, 0];
@ -748,10 +749,11 @@ export const getCommonBounds = (
let minY = Infinity;
let maxY = -Infinity;
const elementsMap = arrayToMap(elements);
elements.forEach((element) => {
const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
const [x1, y1, x2, y2] = getElementBounds(
element,
elementsMap || arrayToMap(elements),
);
minX = Math.min(minX, x1);
minY = Math.min(minY, y1);
maxX = Math.max(maxX, x2);

View file

@ -3,7 +3,7 @@ import { mutateElement } from "./mutateElement";
import { isFreeDrawElement, isLinearElement } from "./typeChecks";
import { SHIFT_LOCKING_ANGLE } from "../constants";
import type { AppState, Zoom } from "../types";
import { getElementBounds } from "./bounds";
import { getCommonBounds, getElementBounds } from "./bounds";
import { viewportCoordsToSceneCoords } from "../utils";
// TODO: remove invisible elements consistently actions, so that invisible elements are not recorded by the store, exported, broadcasted or persisted
@ -56,7 +56,7 @@ export const isElementInViewport = (
};
export const isElementCompletelyInViewport = (
element: ExcalidrawElement,
elements: ExcalidrawElement[],
width: number,
height: number,
viewTransformations: {
@ -67,19 +67,25 @@ export const isElementCompletelyInViewport = (
scrollY: number;
},
elementsMap: ElementsMap,
padding?: Partial<{
top: number;
right: number;
bottom: number;
left: number;
}>,
) => {
const [x1, y1, x2, y2] = getElementBounds(element, elementsMap); // scene coordinates
const [x1, y1, x2, y2] = getCommonBounds(elements, elementsMap); // scene coordinates
const topLeftSceneCoords = viewportCoordsToSceneCoords(
{
clientX: viewTransformations.offsetLeft,
clientY: viewTransformations.offsetTop,
clientX: viewTransformations.offsetLeft + (padding?.left || 0),
clientY: viewTransformations.offsetTop + (padding?.top || 0),
},
viewTransformations,
);
const bottomRightSceneCoords = viewportCoordsToSceneCoords(
{
clientX: viewTransformations.offsetLeft + width,
clientY: viewTransformations.offsetTop + height,
clientX: viewTransformations.offsetLeft + width - (padding?.right || 0),
clientY: viewTransformations.offsetTop + height - (padding?.bottom || 0),
},
viewTransformations,
);