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

feat: smarter zooming when scrolling to match & only match on search/switch (#8488)

Browse source
This commit is contained in:
David Luzar 2024-09-10 21:26:01 +02:00 • committed by GitHub
parent d107215564
commit 72b7c937b1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 127 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

9
excalidraw-app/data/LocalData.ts
View file

@ -20,6 +20,7 @@ import {
get, get,
} from "idb-keyval"; } from "idb-keyval";
import { clearAppStateForLocalStorage } from "../../packages/excalidraw/appState"; import { clearAppStateForLocalStorage } from "../../packages/excalidraw/appState";
import { SEARCH_SIDEBAR } from "../../packages/excalidraw/constants";
import type { LibraryPersistedData } from "../../packages/excalidraw/data/library"; import type { LibraryPersistedData } from "../../packages/excalidraw/data/library";
import type { ImportedDataState } from "../../packages/excalidraw/data/types"; import type { ImportedDataState } from "../../packages/excalidraw/data/types";
import { clearElementsForLocalStorage } from "../../packages/excalidraw/element"; import { clearElementsForLocalStorage } from "../../packages/excalidraw/element";
@ -66,13 +67,19 @@ const saveDataStateToLocalStorage = (
appState: AppState, appState: AppState,
) => { ) => {
try { try {
const _appState = clearAppStateForLocalStorage(appState);
if (_appState.openSidebar?.name === SEARCH_SIDEBAR.name) {
_appState.openSidebar = null;
}
localStorage.setItem( localStorage.setItem(
STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS, STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS,
JSON.stringify(clearElementsForLocalStorage(elements)), JSON.stringify(clearElementsForLocalStorage(elements)),
); );
localStorage.setItem( localStorage.setItem(
STORAGE_KEYS.LOCAL_STORAGE_APP_STATE, STORAGE_KEYS.LOCAL_STORAGE_APP_STATE,
JSON.stringify(clearAppStateForLocalStorage(appState)), JSON.stringify(_appState),
); );
updateBrowserStateVersion(STORAGE_KEYS.VERSION_DATA_STATE); updateBrowserStateVersion(STORAGE_KEYS.VERSION_DATA_STATE);
} catch (error: any) { } catch (error: any) {

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

@ -21,17 +21,17 @@ import { useStable } from "../hooks/useStable";
import "./SearchMenu.scss"; import "./SearchMenu.scss";
const searchKeywordAtom = atom<string>(""); const searchQueryAtom = atom<string>("");
export const searchItemInFocusAtom = atom<number | null>(null); export const searchItemInFocusAtom = atom<number | null>(null);
const SEARCH_DEBOUNCE = 350; const SEARCH_DEBOUNCE = 350;
type SearchMatchItem = { type SearchMatchItem = {
textElement: ExcalidrawTextElement; textElement: ExcalidrawTextElement;
keyword: string; searchQuery: SearchQuery;
index: number; index: number;
preview: { preview: {
indexInKeyword: number; indexInSearchQuery: number;
previewText: string; previewText: string;
moreBefore: boolean; moreBefore: boolean;
moreAfter: boolean; moreAfter: boolean;
@ -49,19 +49,25 @@ type SearchMatches = {
items: SearchMatchItem[]; items: SearchMatchItem[];
}; };
type SearchQuery = string & { _brand: "SearchQuery" };
export const SearchMenu = () => { export const SearchMenu = () => {
const app = useApp(); const app = useApp();
const setAppState = useExcalidrawSetAppState(); const setAppState = useExcalidrawSetAppState();
const searchInputRef = useRef<HTMLInputElement>(null); const searchInputRef = useRef<HTMLInputElement>(null);
const [keyword, setKeyword] = useAtom(searchKeywordAtom, jotaiScope); const [inputValue, setInputValue] = useAtom(searchQueryAtom, jotaiScope);
const searchQuery = inputValue.trim() as SearchQuery;
const [isSearching, setIsSearching] = useState(false);
const [searchMatches, setSearchMatches] = useState<SearchMatches>({ const [searchMatches, setSearchMatches] = useState<SearchMatches>({
nonce: null, nonce: null,
items: [], items: [],
}); });
const searchedKeywordRef = useRef<string | null>(); const searchedQueryRef = useRef<SearchQuery | null>(null);
const lastSceneNonceRef = useRef<number | undefined>(); const lastSceneNonceRef = useRef<number | undefined>(undefined);
const [focusIndex, setFocusIndex] = useAtom( const [focusIndex, setFocusIndex] = useAtom(
searchItemInFocusAtom, searchItemInFocusAtom,
@ -70,19 +76,20 @@ export const SearchMenu = () => {
const elementsMap = app.scene.getNonDeletedElementsMap(); const elementsMap = app.scene.getNonDeletedElementsMap();
useEffect(() => { useEffect(() => {
const trimmedKeyword = keyword.trim(); if (isSearching) {
return;
}
if ( if (
trimmedKeyword !== searchedKeywordRef.current || searchQuery !== searchedQueryRef.current ||
app.scene.getSceneNonce() !== lastSceneNonceRef.current app.scene.getSceneNonce() !== lastSceneNonceRef.current
) { ) {
searchedKeywordRef.current = null; searchedQueryRef.current = null;
handleSearch(trimmedKeyword, app, (matchItems, index) => { handleSearch(searchQuery, app, (matchItems, index) => {
setSearchMatches({ setSearchMatches({
nonce: randomInteger(), nonce: randomInteger(),
items: matchItems, items: matchItems,
}); });
setFocusIndex(index); searchedQueryRef.current = searchQuery;
searchedKeywordRef.current = trimmedKeyword;
lastSceneNonceRef.current = app.scene.getSceneNonce(); lastSceneNonceRef.current = app.scene.getSceneNonce();
setAppState({ setAppState({
searchMatches: matchItems.map((searchMatch) => ({ searchMatches: matchItems.map((searchMatch) => ({
@ -94,7 +101,8 @@ export const SearchMenu = () => {
}); });
} }
}, [ }, [
keyword, isSearching,
searchQuery,
elementsMap, elementsMap,
app, app,
setAppState, setAppState,
@ -128,19 +136,35 @@ export const SearchMenu = () => {
} }
}; };
useEffect(() => {
setAppState((state) => {
return {
searchMatches: state.searchMatches.map((match, index) => {
if (index === focusIndex) {
return { ...match, focus: true };
}
return { ...match, focus: false };
}),
};
});
}, [focusIndex, setAppState]);
useEffect(() => { useEffect(() => {
if (searchMatches.items.length > 0 && focusIndex !== null) { if (searchMatches.items.length > 0 && focusIndex !== null) {
const match = searchMatches.items[focusIndex]; const match = searchMatches.items[focusIndex];
if (match) { if (match) {
const matchAsElement = newTextElement({ const matchAsElement = newTextElement({
text: match.keyword, text: match.searchQuery,
x: match.textElement.x + (match.matchedLines[0]?.offsetX ?? 0), x: match.textElement.x + (match.matchedLines[0]?.offsetX ?? 0),
y: match.textElement.y + (match.matchedLines[0]?.offsetY ?? 0), y: match.textElement.y + (match.matchedLines[0]?.offsetY ?? 0),
width: match.matchedLines[0]?.width, width: match.matchedLines[0]?.width,
height: match.matchedLines[0]?.height, height: match.matchedLines[0]?.height,
}); });
const isTextTiny =
match.textElement.fontSize * app.state.zoom.value < 12;
if ( if (
!isElementCompletelyInViewport( !isElementCompletelyInViewport(
[matchAsElement], [matchAsElement],
@ -155,45 +179,36 @@ export const SearchMenu = () => {
}, },
app.scene.getNonDeletedElementsMap(), app.scene.getNonDeletedElementsMap(),
app.getEditorUIOffsets(), app.getEditorUIOffsets(),
) ) ||
isTextTiny
) { ) {
let zoomOptions: Parameters<AppClassProperties["scrollToContent"]>[1];
if (isTextTiny && app.state.zoom.value >= 1) {
zoomOptions = { fitToViewport: true };
} else if (isTextTiny || app.state.zoom.value > 1) {
zoomOptions = { fitToContent: true };
}
app.scrollToContent(matchAsElement, { app.scrollToContent(matchAsElement, {
fitToContent: true,
animate: true, animate: true,
duration: 300, duration: 300,
...zoomOptions,
}); });
} }
const nextMatches = searchMatches.items.map((match, index) => {
if (index === focusIndex) {
return {
id: match.textElement.id,
focus: true,
matchedLines: match.matchedLines,
};
}
return {
id: match.textElement.id,
focus: false,
matchedLines: match.matchedLines,
};
});
setAppState({
searchMatches: nextMatches,
});
} }
} }
}, [app, focusIndex, searchMatches, setAppState]); }, [focusIndex, searchMatches, app]);
useEffect(() => { useEffect(() => {
return () => { return () => {
setFocusIndex(null); setFocusIndex(null);
searchedKeywordRef.current = null; searchedQueryRef.current = null;
lastSceneNonceRef.current = undefined; lastSceneNonceRef.current = undefined;
setAppState({ setAppState({
searchMatches: [], searchMatches: [],
}); });
setIsSearching(false);
}; };
}, [setAppState, setFocusIndex]); }, [setAppState, setFocusIndex]);
@ -276,12 +291,32 @@ export const SearchMenu = () => {
<div className="layer-ui__search-header"> <div className="layer-ui__search-header">
<TextField <TextField
className={CLASSES.SEARCH_MENU_INPUT_WRAPPER} className={CLASSES.SEARCH_MENU_INPUT_WRAPPER}
value={keyword} value={inputValue}
ref={searchInputRef} ref={searchInputRef}
placeholder={t("search.placeholder")} placeholder={t("search.placeholder")}
icon={searchIcon} icon={searchIcon}
onChange={(value) => { onChange={(value) => {
setKeyword(value); setInputValue(value);
setIsSearching(true);
const searchQuery = value.trim() as SearchQuery;
handleSearch(searchQuery, app, (matchItems, index) => {
setSearchMatches({
nonce: randomInteger(),
items: matchItems,
});
setFocusIndex(index);
searchedQueryRef.current = searchQuery;
lastSceneNonceRef.current = app.scene.getSceneNonce();
setAppState({
searchMatches: matchItems.map((searchMatch) => ({
id: searchMatch.textElement.id,
focus: false,
matchedLines: searchMatch.matchedLines,
})),
});
setIsSearching(false);
});
}} }}
selectOnRender selectOnRender
/> />
@ -319,8 +354,8 @@ export const SearchMenu = () => {
)} )}
{searchMatches.items.length === 0 && {searchMatches.items.length === 0 &&
keyword && searchQuery &&
searchedKeywordRef.current && ( searchedQueryRef.current && (
<div style={{ margin: "1rem auto" }}>{t("search.noMatch")}</div> <div style={{ margin: "1rem auto" }}>{t("search.noMatch")}</div>
)} )}
</div> </div>
@ -329,7 +364,7 @@ export const SearchMenu = () => {
matches={searchMatches} matches={searchMatches}
onItemClick={setFocusIndex} onItemClick={setFocusIndex}
focusIndex={focusIndex} focusIndex={focusIndex}
trimmedKeyword={keyword.trim()} searchQuery={searchQuery}
/> />
</div> </div>
); );
@ -337,19 +372,19 @@ export const SearchMenu = () => {
const ListItem = (props: { const ListItem = (props: {
preview: SearchMatchItem["preview"]; preview: SearchMatchItem["preview"];
trimmedKeyword: string; searchQuery: SearchQuery;
highlighted: boolean; highlighted: boolean;
onClick?: () => void; onClick?: () => void;
}) => { }) => {
const preview = [ const preview = [
props.preview.moreBefore ? "..." : "", props.preview.moreBefore ? "..." : "",
props.preview.previewText.slice(0, props.preview.indexInKeyword), props.preview.previewText.slice(0, props.preview.indexInSearchQuery),
props.preview.previewText.slice( props.preview.previewText.slice(
props.preview.indexInKeyword, props.preview.indexInSearchQuery,
props.preview.indexInKeyword + props.trimmedKeyword.length, props.preview.indexInSearchQuery + props.searchQuery.length,
), ),
props.preview.previewText.slice( props.preview.previewText.slice(
props.preview.indexInKeyword + props.trimmedKeyword.length, props.preview.indexInSearchQuery + props.searchQuery.length,
), ),
props.preview.moreAfter ? "..." : "", props.preview.moreAfter ? "..." : "",
]; ];
@ -380,7 +415,7 @@ interface MatchListProps {
matches: SearchMatches; matches: SearchMatches;
onItemClick: (index: number) => void; onItemClick: (index: number) => void;
focusIndex: number | null; focusIndex: number | null;
trimmedKeyword: string; searchQuery: SearchQuery;
} }
const MatchListBase = (props: MatchListProps) => { const MatchListBase = (props: MatchListProps) => {
@ -389,7 +424,7 @@ const MatchListBase = (props: MatchListProps) => {
{props.matches.items.map((searchMatch, index) => ( {props.matches.items.map((searchMatch, index) => (
<ListItem <ListItem
key={searchMatch.textElement.id + searchMatch.index} key={searchMatch.textElement.id + searchMatch.index}
trimmedKeyword={props.trimmedKeyword} searchQuery={props.searchQuery}
preview={searchMatch.preview} preview={searchMatch.preview}
highlighted={index === props.focusIndex} highlighted={index === props.focusIndex}
onClick={() => props.onItemClick(index)} onClick={() => props.onItemClick(index)}
@ -408,24 +443,27 @@ const areEqual = (prevProps: MatchListProps, nextProps: MatchListProps) => {
const MatchList = memo(MatchListBase, areEqual); const MatchList = memo(MatchListBase, areEqual);
const getMatchPreview = (text: string, index: number, keyword: string) => { const getMatchPreview = (
text: string,
index: number,
searchQuery: SearchQuery,
) => {
const WORDS_BEFORE = 2; const WORDS_BEFORE = 2;
const WORDS_AFTER = 5; const WORDS_AFTER = 5;
const substrBeforeKeyword = text.slice(0, index); const substrBeforeQuery = text.slice(0, index);
const wordsBeforeKeyword = substrBeforeKeyword.split(/\s+/); const wordsBeforeQuery = substrBeforeQuery.split(/\s+/);
// text = "small", keyword = "mall", not complete before // text = "small", query = "mall", not complete before
// text = "small", keyword = "smal", complete before // text = "small", query = "smal", complete before
const isKeywordCompleteBefore = substrBeforeKeyword.endsWith(" "); const isQueryCompleteBefore = substrBeforeQuery.endsWith(" ");
const startWordIndex = const startWordIndex =
wordsBeforeKeyword.length - wordsBeforeQuery.length -
WORDS_BEFORE - WORDS_BEFORE -
1 - 1 -
(isKeywordCompleteBefore ? 0 : 1); (isQueryCompleteBefore ? 0 : 1);
let wordsBeforeAsString = let wordsBeforeAsString =
wordsBeforeKeyword wordsBeforeQuery.slice(startWordIndex <= 0 ? 0 : startWordIndex).join(" ") +
.slice(startWordIndex <= 0 ? 0 : startWordIndex) (isQueryCompleteBefore ? " " : "");
.join(" ") + (isKeywordCompleteBefore ? " " : "");
const MAX_ALLOWED_CHARS = 20; const MAX_ALLOWED_CHARS = 20;
@ -434,21 +472,21 @@ const getMatchPreview = (text: string, index: number, keyword: string) => {
? wordsBeforeAsString.slice(-MAX_ALLOWED_CHARS) ? wordsBeforeAsString.slice(-MAX_ALLOWED_CHARS)
: wordsBeforeAsString; : wordsBeforeAsString;
const substrAfterKeyword = text.slice(index + keyword.length); const substrAfterQuery = text.slice(index + searchQuery.length);
const wordsAfter = substrAfterKeyword.split(/\s+/); const wordsAfter = substrAfterQuery.split(/\s+/);
// text = "small", keyword = "mall", complete after // text = "small", query = "mall", complete after
// text = "small", keyword = "smal", not complete after // text = "small", query = "smal", not complete after
const isKeywordCompleteAfter = !substrAfterKeyword.startsWith(" "); const isQueryCompleteAfter = !substrAfterQuery.startsWith(" ");
const numberOfWordsToTake = isKeywordCompleteAfter const numberOfWordsToTake = isQueryCompleteAfter
? WORDS_AFTER + 1 ? WORDS_AFTER + 1
: WORDS_AFTER; : WORDS_AFTER;
const wordsAfterAsString = const wordsAfterAsString =
(isKeywordCompleteAfter ? "" : " ") + (isQueryCompleteAfter ? "" : " ") +
wordsAfter.slice(0, numberOfWordsToTake).join(" "); wordsAfter.slice(0, numberOfWordsToTake).join(" ");
return { return {
indexInKeyword: wordsBeforeAsString.length, indexInSearchQuery: wordsBeforeAsString.length,
previewText: wordsBeforeAsString + keyword + wordsAfterAsString, previewText: wordsBeforeAsString + searchQuery + wordsAfterAsString,
moreBefore: startWordIndex > 0, moreBefore: startWordIndex > 0,
moreAfter: wordsAfter.length > numberOfWordsToTake, moreAfter: wordsAfter.length > numberOfWordsToTake,
}; };
@ -491,7 +529,7 @@ const normalizeWrappedText = (
const getMatchedLines = ( const getMatchedLines = (
textElement: ExcalidrawTextElement, textElement: ExcalidrawTextElement,
keyword: string, searchQuery: SearchQuery,
index: number, index: number,
) => { ) => {
const normalizedText = normalizeWrappedText( const normalizedText = normalizeWrappedText(
@ -522,9 +560,9 @@ const getMatchedLines = (
} }
let startIndex = index; let startIndex = index;
let remainingKeyword = textElement.originalText.slice( let remainingQuery = textElement.originalText.slice(
index, index,
index + keyword.length, index + searchQuery.length,
); );
const matchedLines: { const matchedLines: {
offsetX: number; offsetX: number;
@ -534,7 +572,7 @@ const getMatchedLines = (
}[] = []; }[] = [];
for (const lineIndexRange of lineIndexRanges) { for (const lineIndexRange of lineIndexRanges) {
if (remainingKeyword === "") { if (remainingQuery === "") {
break; break;
} }
@ -548,8 +586,8 @@ const getMatchedLines = (
startIndex - lineIndexRange.startIndex, startIndex - lineIndexRange.startIndex,
); );
const matchedWord = remainingKeyword.slice(0, matchCapacity); const matchedWord = remainingQuery.slice(0, matchCapacity);
remainingKeyword = remainingKeyword.slice(matchCapacity); remainingQuery = remainingQuery.slice(matchCapacity);
const offset = measureText( const offset = measureText(
textToStart, textToStart,
@ -608,11 +646,11 @@ const escapeSpecialCharacters = (string: string) => {
const handleSearch = debounce( const handleSearch = debounce(
( (
keyword: string, searchQuery: SearchQuery,
app: AppClassProperties, app: AppClassProperties,
cb: (matchItems: SearchMatchItem[], focusIndex: number | null) => void, cb: (matchItems: SearchMatchItem[], focusIndex: number | null) => void,
) => { ) => {
if (!keyword || keyword === "") { if (!searchQuery || searchQuery === "") {
cb([], null); cb([], null);
return; return;
} }
@ -626,20 +664,20 @@ const handleSearch = debounce(
const matchItems: SearchMatchItem[] = []; const matchItems: SearchMatchItem[] = [];
const regex = new RegExp(escapeSpecialCharacters(keyword), "gi"); const regex = new RegExp(escapeSpecialCharacters(searchQuery), "gi");
for (const textEl of texts) { for (const textEl of texts) {
let match = null; let match = null;
const text = textEl.originalText; const text = textEl.originalText;
while ((match = regex.exec(text)) !== null) { while ((match = regex.exec(text)) !== null) {
const preview = getMatchPreview(text, match.index, keyword); const preview = getMatchPreview(text, match.index, searchQuery);
const matchedLines = getMatchedLines(textEl, keyword, match.index); const matchedLines = getMatchedLines(textEl, searchQuery, match.index);
if (matchedLines.length > 0) { if (matchedLines.length > 0) {
matchItems.push({ matchItems.push({
textElement: textEl, textElement: textEl,
keyword, searchQuery,
preview, preview,
index: match.index, index: match.index,
matchedLines, matchedLines,