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: improve library sidebar performance (#9060)

Browse source 
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
This commit is contained in:
Are 2025-01-30 14:41:08 +01:00 • committed by GitHub
parent bd1590fc74
commit 61e0bb83d0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 46 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

64
packages/excalidraw/components/LibraryMenu.tsx
View file

@ -1,4 +1,10 @@
import React, { useState, useCallback, useMemo, useRef } from "react";
import React, {
useState,
useCallback,
useMemo,
useRef,
useEffect,
} from "react";
import type Library from "../data/library";
import {
distributeLibraryItemsOnSquareGrid,
@ -150,27 +156,40 @@ const usePendingElementsMemo = (
appState: UIAppState,
elements: readonly NonDeletedExcalidrawElement[],
) => {
const create = () =>
getSelectedElements(elements, appState, {
includeBoundTextElement: true,
includeElementsInFrames: true,
});
const val = useRef(create());
const create = useCallback(
(appState: UIAppState, elements: readonly NonDeletedExcalidrawElement[]) =>
getSelectedElements(elements, appState, {
includeBoundTextElement: true,
includeElementsInFrames: true,
}),
[],
);
const val = useRef(create(appState, elements));
const prevAppState = useRef<UIAppState>(appState);
const prevElements = useRef(elements);
if (
!isShallowEqual(
appState.selectedElementIds,
prevAppState.current.selectedElementIds,
) ||
!isShallowEqual(elements, prevElements.current)
) {
val.current = create();
prevAppState.current = appState;
prevElements.current = elements;
}
return val.current;
const update = useCallback(() => {
if (
!isShallowEqual(
appState.selectedElementIds,
prevAppState.current.selectedElementIds,
) ||
!isShallowEqual(elements, prevElements.current)
) {
val.current = create(appState, elements);
prevAppState.current = appState;
prevElements.current = elements;
}
}, [create, appState, elements]);
return useMemo(
() => ({
update,
value: val.current,
}),
[update, val],
);
};
/**
@ -181,6 +200,7 @@ export const LibraryMenu = () => {
const { library, id, onInsertElements } = useApp();
const appProps = useAppProps();
const appState = useUIAppState();
const app = useApp();
const setAppState = useExcalidrawSetAppState();
const elements = useExcalidrawElements();
const [selectedItems, setSelectedItems] = useState<LibraryItem["id"][]>([]);
@ -203,9 +223,13 @@ export const LibraryMenu = () => {
});
}, [setAppState]);
useEffect(() => {
return app.onPointerUpEmitter.on(() => pendingElements.update());
}, [app, pendingElements]);
return (
<LibraryMenuContent
pendingElements={pendingElements}
pendingElements={pendingElements.value}
onInsertLibraryItems={onInsertLibraryItems}
onAddToLibrary={deselectItems}
setAppState={setAppState}