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(),
});
}
}

25
packages/excalidraw/components/SearchMenu.tsx
View file

@ -20,6 +20,7 @@ import { CLASSES, EVENT } from "../constants";
import { useStable } from "../hooks/useStable";
import "./SearchMenu.scss";
import { round } from "../../math";
const searchQueryAtom = atom<string>("");
export const searchItemInFocusAtom = atom<number | null>(null);
@ -154,16 +155,23 @@ export const SearchMenu = () => {
const match = searchMatches.items[focusIndex];
if (match) {
const zoomValue = app.state.zoom.value;
const matchAsElement = newTextElement({
text: match.searchQuery,
x: match.textElement.x + (match.matchedLines[0]?.offsetX ?? 0),
y: match.textElement.y + (match.matchedLines[0]?.offsetY ?? 0),
width: match.matchedLines[0]?.width,
height: match.matchedLines[0]?.height,
fontSize: match.textElement.fontSize,
fontFamily: match.textElement.fontFamily,
});
const FONT_SIZE_LEGIBILITY_THRESHOLD = 14;
const fontSize = match.textElement.fontSize;
const isTextTiny =
match.textElement.fontSize * app.state.zoom.value < 12;
fontSize * zoomValue < FONT_SIZE_LEGIBILITY_THRESHOLD;
if (
!isElementCompletelyInViewport(
@ -184,9 +192,17 @@ export const SearchMenu = () => {
) {
let zoomOptions: Parameters<AppClassProperties["scrollToContent"]>[1];
if (isTextTiny && app.state.zoom.value >= 1) {
zoomOptions = { fitToViewport: true };
} else if (isTextTiny || app.state.zoom.value > 1) {
if (isTextTiny) {
if (fontSize >= FONT_SIZE_LEGIBILITY_THRESHOLD) {
zoomOptions = { fitToContent: true };
} else {
zoomOptions = {
fitToViewport: true,
// calculate zoom level to make the fontSize ~equal to FONT_SIZE_THRESHOLD, rounded to nearest 10%
maxZoom: round(FONT_SIZE_LEGIBILITY_THRESHOLD / fontSize, 1),
};
}
} else {
zoomOptions = { fitToContent: true };
}
@ -194,6 +210,7 @@ export const SearchMenu = () => {
animate: true,
duration: 300,
...zoomOptions,
canvasOffsets: app.getEditorUIOffsets(),
});
}
}