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

perf: improve rendering performance for Library (#6587)

Browse source 
* 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>
This commit is contained in:
Arnost Pleskot 2023-05-24 16:40:20 +02:00 • committed by GitHub
parent a4f05339aa
commit 7340c70a06
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 295 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/LibraryUnit.tsx
View file

@ -1,12 +1,11 @@
import clsx from "clsx";
import { useEffect, useRef, useState } from "react";
import { useDevice } from "../components/App";
import { exportToSvg } from "../packages/utils";
import { LibraryItem } from "../types";
import "./LibraryUnit.scss";
import { CheckboxItem } from "./CheckboxItem";
import { PlusIcon } from "./icons";
import { COLOR_PALETTE } from "../colors";
import { useLibraryItemSvg } from "../hooks/useLibraryItemSvg";
export const LibraryUnit = ({
id,
@ -20,38 +19,30 @@ export const LibraryUnit = ({
id: LibraryItem["id"] | /** for pending item */ null;
elements?: LibraryItem["elements"];
isPending?: boolean;
onClick: () => void;
onClick: (id: LibraryItem["id"] | null) => void;
selected: boolean;
onToggle: (id: string, event: React.MouseEvent) => void;
onDrag: (id: string, event: React.DragEvent) => void;
}) => {
const ref = useRef<HTMLDivElement | null>(null);
const svg = useLibraryItemSvg(id, elements);
useEffect(() => {
const node = ref.current;
if (!node) {
return;
}
(async () => {
if (!elements) {
return;
}
const svg = await exportToSvg({
elements,
appState: {
exportBackground: false,
viewBackgroundColor: COLOR_PALETTE.white,
},
files: null,
});
if (svg) {
svg.querySelector(".style-fonts")?.remove();
node.innerHTML = svg.outerHTML;
})();
}
return () => {
node.innerHTML = "";
};
}, [elements]);
}, [elements, svg]);
const [isHovered, setIsHovered] = useState(false);
const isMobile = useDevice().isMobile;
@ -81,7 +72,7 @@ export const LibraryUnit = ({
if (id && event.shiftKey) {
onToggle(id, event);
} else {
onClick();
onClick(id);
}
}
: undefined