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

62
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,38 +281,34 @@ 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, ? {
zIndex: 1, scale: 1,
shadow: 1, zIndex: 1,
x: tile.x, shadow: 1,
y: tile.y, x: tile.x,
width: tile.width, y: tile.y,
height: tile.height, width: tile.width,
immediate: disableAnimations || ((key) => key === "zIndex"), height: tile.height,
// Allow the tile's position to settle before pushing its immediate: disableAnimations || ((key) => key === "zIndex"),
// z-index back down // Allow the tile's position to settle before pushing its
delay: (key) => (key === "zIndex" ? 500 : 0), // z-index back down
}; delay: (key) => (key === "zIndex" ? 500 : 0),
} else { }
return { : {
scale: 1.1, scale: 1.1,
zIndex: 2, zIndex: 2,
shadow: 15, shadow: 15,
x: tileX, x: tileX,
y: tileY, y: tileY,
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) =>