xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #1121 from robintown/grid-performance

Browse source 
Improve the performance of dragging tiles in the large grid
This commit is contained in:
Robin 2023-06-16 12:55:15 -04:00 committed by GitHub
commit cabad628b4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/video-grid/NewVideoGrid.tsx
View file

@ -257,7 +257,7 @@ export const NewVideoGrid: FC<Props> = ({
enter: { opacity: 1, scale: 1, immediate: disableAnimations }, enter: { opacity: 1, scale: 1, immediate: disableAnimations },
update: ({ item, x, y, width, height }: Tile) => update: ({ item, x, y, width, height }: Tile) =>
item.id === dragState.current?.tileId item.id === dragState.current?.tileId
? {} ? null
: { : {
x, x,
y, y,
@ -281,10 +281,11 @@ export const NewVideoGrid: FC<Props> = ({
const { tileId, tileX, tileY, cursorX, cursorY } = dragState.current!; const { tileId, tileX, tileY, cursorX, cursorY } = dragState.current!;
const tile = tiles.find((t) => t.item.id === tileId)!; const tile = tiles.find((t) => t.item.id === tileId)!;
springRef.start((_i, controller) => { springRef.current
if ((controller.item as Tile).item.id === tileId) { .find((c) => (c.item as Tile).item.id === tileId)
if (endOfGesture) { ?.start(
return { endOfGesture
? {
scale: 1, scale: 1,
zIndex: 1, zIndex: 1,
shadow: 1, shadow: 1,
@ -296,9 +297,8 @@ export const NewVideoGrid: FC<Props> = ({
// Allow the tile's position to settle before pushing its // Allow the tile's position to settle before pushing its
// z-index back down // z-index back down
delay: (key) => (key === "zIndex" ? 500 : 0), delay: (key) => (key === "zIndex" ? 500 : 0),
}; }
} else { : {
return {
scale: 1.1, scale: 1.1,
zIndex: 2, zIndex: 2,
shadow: 15, shadow: 15,
@ -307,12 +307,8 @@ export const NewVideoGrid: FC<Props> = ({
immediate: immediate:
disableAnimations || disableAnimations ||
((key) => key === "zIndex" || key === "x" || key === "y"), ((key) => key === "zIndex" || key === "x" || key === "y"),
};
} }
} else { );
return {};
}
});
const overTile = tiles.find( const overTile = tiles.find(
(t) => (t) =>