marcel/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-11-12 00:34:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
David Luzar
2024-08-12 20:42:08 +02:00
committed by GitHub
parent 8420e1aa13
commit 4320a3cf41
4 changed files with 107 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
packages/excalidraw/components/App.tsx
View File

@@ -3595,7 +3595,7 @@ class App extends React.Component<AppProps, AppState> {
| {
fitToContent?: boolean;
fitToViewport?: never;
viewportZoomFactor?: never;
viewportZoomFactor?: number;
animate?: boolean;
duration?: number;
}
@@ -3860,6 +3860,43 @@ class App extends React.Component<AppProps, AppState> {
},
);
private getEditorUIOffsets = (): {
top: number;
right: number;
bottom: number;
left: number;
} => {
const toolbarBottom =
this.excalidrawContainerRef?.current
?.querySelector(".App-toolbar")
?.getBoundingClientRect()?.bottom ?? 0;
const sidebarWidth = Math.max(
this.excalidrawContainerRef?.current
?.querySelector(".default-sidebar")
?.getBoundingClientRect()?.width ?? 0,
);
const propertiesPanelWidth = Math.max(
this.excalidrawContainerRef?.current
?.querySelector(".App-menu__left")
?.getBoundingClientRect()?.width ?? 0,
0,
);
return getLanguage().rtl
? {
top: toolbarBottom,
right: propertiesPanelWidth,
bottom: 0,
left: sidebarWidth,
}
: {
top: toolbarBottom,
right: sidebarWidth,
bottom: 0,
left: propertiesPanelWidth,
};
};
// Input handling
private onKeyDown = withBatchedUpdates(
(event: React.KeyboardEvent | KeyboardEvent) => {
@@ -3920,6 +3957,31 @@ class App extends React.Component<AppProps, AppState> {
);
}
if (
this.flowChartCreator.pendingNodes?.length &&
!isElementCompletelyInViewport(
this.flowChartCreator.pendingNodes,
this.canvas.width / window.devicePixelRatio,
this.canvas.height / window.devicePixelRatio,
{
offsetLeft: this.state.offsetLeft,
offsetTop: this.state.offsetTop,
scrollX: this.state.scrollX,
scrollY: this.state.scrollY,
zoom: this.state.zoom,
},
this.scene.getNonDeletedElementsMap(),
this.getEditorUIOffsets(),
)
) {
this.scrollToContent(this.flowChartCreator.pendingNodes, {
animate: true,
duration: 300,
fitToContent: true,
viewportZoomFactor: 0.8,
});
}
return;
}
@@ -3955,7 +4017,7 @@ class App extends React.Component<AppProps, AppState> {
if (
nextNode &&
!isElementCompletelyInViewport(
nextNode,
[nextNode],
this.canvas.width / window.devicePixelRatio,
this.canvas.height / window.devicePixelRatio,
{
@@ -3966,6 +4028,7 @@ class App extends React.Component<AppProps, AppState> {
zoom: this.state.zoom,
},
this.scene.getNonDeletedElementsMap(),
this.getEditorUIOffsets(),
)
) {
this.scrollToContent(nextNode, {
@@ -4373,7 +4436,7 @@ class App extends React.Component<AppProps, AppState> {
if (
!isElementCompletelyInViewport(
firstNode,
[firstNode],
this.canvas.width / window.devicePixelRatio,
this.canvas.height / window.devicePixelRatio,
{
@@ -4384,6 +4447,7 @@ class App extends React.Component<AppProps, AppState> {
zoom: this.state.zoom,
},
this.scene.getNonDeletedElementsMap(),
this.getEditorUIOffsets(),
)
) {
this.scrollToContent(firstNode, {