Improve the performance of dragging tiles in the large grid
By only updating the one spring of the tile that's being interacted with
This commit is contained in:
		
					parent
					
						
							
								5510719fb2
							
						
					
				
			
			
				commit
				
					
						f4f454f58e
					
				
			
		
					 1 changed files with 29 additions and 33 deletions
				
			
		| 
						 | 
					@ -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) =>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue