feat: canvas search (#8438)

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
This commit is contained in:
Ryan Di 2024-09-09 23:12:07 +08:00 committed by GitHub
parent 5a11c70714
commit 6959a363f0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
35 changed files with 1424 additions and 47 deletions

View file

@ -440,6 +440,7 @@ import {
FlowChartNavigator,
getLinkDirectionFromKey,
} from "../element/flowchart";
import { searchItemInFocusAtom } from "./SearchMenu";
import type { LocalPoint, Radians } from "../../math";
import { point, pointDistance, vector } from "../../math";
@ -548,6 +549,7 @@ class App extends React.Component<AppProps, AppState> {
public scene: Scene;
public fonts: Fonts;
public renderer: Renderer;
public visibleElements: readonly NonDeletedExcalidrawElement[];
private resizeObserver: ResizeObserver | undefined;
private nearestScrollableContainer: HTMLElement | Document | undefined;
public library: AppClassProperties["library"];
@ -555,7 +557,7 @@ class App extends React.Component<AppProps, AppState> {
public id: string;
private store: Store;
private history: History;
private excalidrawContainerValue: {
public excalidrawContainerValue: {
container: HTMLDivElement | null;
id: string;
};
@ -682,6 +684,7 @@ class App extends React.Component<AppProps, AppState> {
this.canvas = document.createElement("canvas");
this.rc = rough.canvas(this.canvas);
this.renderer = new Renderer(this.scene);
this.visibleElements = [];
this.store = new Store();
this.history = new History();
@ -1480,6 +1483,7 @@ class App extends React.Component<AppProps, AppState> {
newElementId: this.state.newElement?.id,
pendingImageElementId: this.state.pendingImageElementId,
});
this.visibleElements = visibleElements;
const allElementsMap = this.scene.getNonDeletedElementsMap();
@ -3800,7 +3804,7 @@ class App extends React.Component<AppProps, AppState> {
},
);
private getEditorUIOffsets = (): {
public getEditorUIOffsets = (): {
top: number;
right: number;
bottom: number;
@ -5973,6 +5977,16 @@ class App extends React.Component<AppProps, AppState> {
this.maybeCleanupAfterMissingPointerUp(event.nativeEvent);
this.maybeUnfollowRemoteUser();
if (this.state.searchMatches) {
this.setState((state) => ({
searchMatches: state.searchMatches.map((searchMatch) => ({
...searchMatch,
focus: false,
})),
}));
jotaiStore.set(searchItemInFocusAtom, null);
}
// since contextMenu options are potentially evaluated on each render,
// and an contextMenu action may depend on selection state, we must
// close the contextMenu before we update the selection on pointerDown
@ -6401,8 +6415,16 @@ class App extends React.Component<AppProps, AppState> {
}
isPanning = true;
// due to event.preventDefault below, container wouldn't get focus
// automatically
this.focusContainer();
// preventing defualt while text editing messes with cursor/focus
if (!this.state.editingTextElement) {
// preventing defualt while text editing messes with cursor/focus
// necessary to prevent browser from scrolling the page if excalidraw
// not full-page #4489
//
// as such, the above is broken when panning canvas while in wysiwyg
event.preventDefault();
}