smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: improve canvas search scroll behavior further (#8491)

Browse source
This commit is contained in:
David Luzar 2024-09-11 18:01:18 +02:00 • committed by GitHub
parent b46ca0192b
commit fd39712ba6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 165 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -259,6 +259,7 @@ import type {
ElementsPendingErasure,
GenerateDiagramToCode,
NullableGridSize,
Offsets,
} from "../types";
import {
debounce,
@ -3232,6 +3233,7 @@ class App extends React.Component<AppProps, AppState> {
if (opts.fitToContent) {
this.scrollToContent(newElements, {
fitToContent: true,
canvasOffsets: this.getEditorUIOffsets(),
});
}
};
@ -3544,7 +3546,7 @@ class App extends React.Component<AppProps, AppState> {
target:
| ExcalidrawElement
| readonly ExcalidrawElement[] = this.scene.getNonDeletedElements(),
opts?:
opts?: (
| {
fitToContent?: boolean;
fitToViewport?: never;
@ -3561,7 +3563,12 @@ class App extends React.Component<AppProps, AppState> {
viewportZoomFactor?: number;
animate?: boolean;
duration?: number;
},
}
) & {
minZoom?: number;
maxZoom?: number;
canvasOffsets?: Offsets;
},
) => {
this.cancelInProgressAnimation?.();
@ -3574,10 +3581,13 @@ class App extends React.Component<AppProps, AppState> {
if (opts?.fitToContent || opts?.fitToViewport) {
const { appState } = zoomToFit({
canvasOffsets: opts.canvasOffsets,
targetElements,
appState: this.state,
fitToViewport: !!opts?.fitToViewport,
viewportZoomFactor: opts?.viewportZoomFactor,
minZoom: opts?.minZoom,
maxZoom: opts?.maxZoom,
});
zoom = appState.zoom;
scrollX = appState.scrollX;
@ -3805,40 +3815,42 @@ class App extends React.Component<AppProps, AppState> {
},
);
public getEditorUIOffsets = (): {
top: number;
right: number;
bottom: number;
left: number;
} => {
public getEditorUIOffsets = (): Offsets => {
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,
);
const sidebarRect = this.excalidrawContainerRef?.current
?.querySelector(".sidebar")
?.getBoundingClientRect();
const propertiesPanelRect = this.excalidrawContainerRef?.current
?.querySelector(".App-menu__left")
?.getBoundingClientRect();
const PADDING = 16;
return getLanguage().rtl
? {
top: toolbarBottom,
right: propertiesPanelWidth,
bottom: 0,
left: sidebarWidth,
top: toolbarBottom + PADDING,
right:
Math.max(
this.state.width -
(propertiesPanelRect?.left ?? this.state.width),
0,
) + PADDING,
bottom: PADDING,
left: Math.max(sidebarRect?.right ?? 0, 0) + PADDING,
}
: {
top: toolbarBottom,
right: sidebarWidth,
bottom: 0,
left: propertiesPanelWidth,
top: toolbarBottom + PADDING,
right: Math.max(
this.state.width -
(sidebarRect?.left ?? this.state.width) +
PADDING,
0,
),
bottom: PADDING,
left: Math.max(propertiesPanelRect?.right ?? 0, 0) + PADDING,
};
};
@ -3923,7 +3935,7 @@ class App extends React.Component<AppProps, AppState> {
animate: true,
duration: 300,
fitToContent: true,
viewportZoomFactor: 0.8,
canvasOffsets: this.getEditorUIOffsets(),
});
}
@ -3979,6 +3991,7 @@ class App extends React.Component<AppProps, AppState> {
this.scrollToContent(nextNode, {
animate: true,
duration: 300,
canvasOffsets: this.getEditorUIOffsets(),
});
}
}
@ -4411,6 +4424,7 @@ class App extends React.Component<AppProps, AppState> {
this.scrollToContent(firstNode, {
animate: true,
duration: 300,
canvasOffsets: this.getEditorUIOffsets(),
});
}
}