perf: improve rendering performance for Library (#6587)
* perf: improve rendering performance for Library * fix: return onDrag and onToggle functionality to Library Items * perf: cache exportToSvg output * fix: lint warning * fix: add onClick handler into LibraryUnit * feat: better spinner * fix: useCallback for getInsertedElements to fix linter error * feat: different batch size when svgs are cached * fix: library items alignment in row * feat: skeleton instead of spinner * fix: remove unused variables * feat: use css vars instead of hadcoded colors * feat: reverting skeleton, removing spinner * cleanup and unrelated refactor * change ROWS_RENDERED_PER_BATCH to 6 --------- Co-authored-by: dwelle <luzar.david@gmail.com>pull/6618/head
Arnost Pleskot
2 years ago
committed by
GitHub
parent
a4f05339aa
commit
7340c70a06
@ -0,0 +1,110 @@
|
||||
import React, { useEffect, useMemo, useState, useTransition } from "react";
|
||||
import { LibraryUnit } from "./LibraryUnit";
|
||||
import { LibraryItem } from "../types";
|
||||
import Stack from "./Stack";
|
||||
import clsx from "clsx";
|
||||
import { ExcalidrawElement, NonDeleted } from "../element/types";
|
||||
import { useAtom } from "jotai";
|
||||
import { libraryItemSvgsCache } from "../hooks/useLibraryItemSvg";
|
||||
|
||||
const ITEMS_PER_ROW = 4;
|
||||
const ROWS_RENDERED_PER_BATCH = 6;
|
||||
const CACHED_ROWS_RENDERED_PER_BATCH = 16;
|
||||
|
||||
type LibraryOrPendingItem = (
|
||||
| LibraryItem
|
||||
| /* pending library item */ {
|
||||
id: null;
|
||||
elements: readonly NonDeleted<ExcalidrawElement>[];
|
||||
}
|
||||
)[];
|
||||
|
||||
interface Props {
|
||||
items: LibraryOrPendingItem;
|
||||
onClick: (id: LibraryItem["id"] | null) => void;
|
||||
onItemSelectToggle: (id: LibraryItem["id"], event: React.MouseEvent) => void;
|
||||
onItemDrag: (id: LibraryItem["id"], event: React.DragEvent) => void;
|
||||
isItemSelected: (id: LibraryItem["id"] | null) => boolean;
|
||||
}
|
||||
|
||||
function LibraryRow({
|
||||
items,
|
||||
onItemSelectToggle,
|
||||
onItemDrag,
|
||||
isItemSelected,
|
||||
onClick,
|
||||
}: Props) {
|
||||
return (
|
||||
<Stack.Row className="library-menu-items-container__row">
|
||||
{items.map((item) => (
|
||||
<Stack.Col key={item.id}>
|
||||
<LibraryUnit
|
||||
elements={item?.elements}
|
||||
isPending={!item?.id && !!item?.elements}
|
||||
onClick={onClick}
|
||||
id={item?.id || null}
|
||||
selected={isItemSelected(item.id)}
|
||||
onToggle={onItemSelectToggle}
|
||||
onDrag={onItemDrag}
|
||||
/>
|
||||
</Stack.Col>
|
||||
))}
|
||||
</Stack.Row>
|
||||
);
|
||||
}
|
||||
|
||||
const EmptyLibraryRow = () => (
|
||||
<Stack.Row className="library-menu-items-container__row" gap={1}>
|
||||
<Stack.Col>
|
||||
<div className={clsx("library-unit")} />
|
||||
</Stack.Col>
|
||||
</Stack.Row>
|
||||
);
|
||||
|
||||
function LibraryMenuSection({
|
||||
items,
|
||||
onItemSelectToggle,
|
||||
onItemDrag,
|
||||
isItemSelected,
|
||||
onClick,
|
||||
}: Props) {
|
||||
const rows = Math.ceil(items.length / ITEMS_PER_ROW);
|
||||
const [, startTransition] = useTransition();
|
||||
const [index, setIndex] = useState(0);
|
||||
const [svgCache] = useAtom(libraryItemSvgsCache);
|
||||
|
||||
const rowsRenderedPerBatch = useMemo(() => {
|
||||
return svgCache.size === 0
|
||||
? ROWS_RENDERED_PER_BATCH
|
||||
: CACHED_ROWS_RENDERED_PER_BATCH;
|
||||
}, [svgCache]);
|
||||
|
||||
useEffect(() => {
|
||||
if (index < rows) {
|
||||
startTransition(() => {
|
||||
setIndex(index + rowsRenderedPerBatch);
|
||||
});
|
||||
}
|
||||
}, [index, rows, startTransition, rowsRenderedPerBatch]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{Array.from({ length: rows }).map((_, i) =>
|
||||
i < index ? (
|
||||
<LibraryRow
|
||||
key={i}
|
||||
items={items.slice(i * ITEMS_PER_ROW, (i + 1) * ITEMS_PER_ROW)}
|
||||
onItemSelectToggle={onItemSelectToggle}
|
||||
onItemDrag={onItemDrag}
|
||||
onClick={onClick}
|
||||
isItemSelected={isItemSelected}
|
||||
/>
|
||||
) : (
|
||||
<EmptyLibraryRow key={i} />
|
||||
),
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default LibraryMenuSection;
|
||||
@ -0,0 +1,59 @@
|
||||
import { atom, useAtom } from "jotai";
|
||||
import { useEffect, useState } from "react";
|
||||
import { COLOR_PALETTE } from "../colors";
|
||||
import { exportToSvg } from "../packages/utils";
|
||||
import { LibraryItem } from "../types";
|
||||
|
||||
export const libraryItemSvgsCache = atom<Map<LibraryItem["id"], SVGSVGElement>>(
|
||||
new Map(),
|
||||
);
|
||||
|
||||
const exportLibraryItemToSvg = async (elements: LibraryItem["elements"]) => {
|
||||
return await exportToSvg({
|
||||
elements,
|
||||
appState: {
|
||||
exportBackground: false,
|
||||
viewBackgroundColor: COLOR_PALETTE.white,
|
||||
},
|
||||
files: null,
|
||||
});
|
||||
};
|
||||
|
||||
export const useLibraryItemSvg = (
|
||||
id: LibraryItem["id"] | null,
|
||||
elements: LibraryItem["elements"] | undefined,
|
||||
): SVGSVGElement | undefined => {
|
||||
const [svgCache, setSvgCache] = useAtom(libraryItemSvgsCache);
|
||||
const [svg, setSvg] = useState<SVGSVGElement>();
|
||||
|
||||
useEffect(() => {
|
||||
if (elements) {
|
||||
if (id) {
|
||||
// Try to load cached svg
|
||||
const cachedSvg = svgCache.get(id);
|
||||
|
||||
if (cachedSvg) {
|
||||
setSvg(cachedSvg);
|
||||
} else {
|
||||
// When there is no svg in cache export it and save to cache
|
||||
(async () => {
|
||||
const exportedSvg = await exportLibraryItemToSvg(elements);
|
||||
|
||||
if (exportedSvg) {
|
||||
setSvgCache(svgCache.set(id, exportedSvg));
|
||||
setSvg(exportedSvg);
|
||||
}
|
||||
})();
|
||||
}
|
||||
} else {
|
||||
// When we have no id (usualy selected items from canvas) just export the svg
|
||||
(async () => {
|
||||
const exportedSvg = await exportLibraryItemToSvg(elements);
|
||||
setSvg(exportedSvg);
|
||||
})();
|
||||
}
|
||||
}
|
||||
}, [id, elements, svgCache, setSvgCache, setSvg]);
|
||||
|
||||
return svg;
|
||||
};
|
||||
Loading…
Reference in New Issue