Optimize calculating tile positions
This commit is contained in:
Robert Long
parent
6e7cc62c14
commit
7471e4b8c0
1 changed files with 129 additions and 201 deletions
330
src/GridDemo.jsx
330
src/GridDemo.jsx
|
|
@ -8,220 +8,148 @@ import useMeasure from "react-use-measure";
|
||||||
export function GridDemo() {
|
export function GridDemo() {
|
||||||
const tileKey = useRef(0);
|
const tileKey = useRef(0);
|
||||||
const [stream, setStream] = useState();
|
const [stream, setStream] = useState();
|
||||||
const [tiles, setTiles] = useState([]);
|
const [{ tiles, tilePositions }, setTileState] = useState({
|
||||||
const tilePositionsRef = useRef([]);
|
tiles: [],
|
||||||
|
tilePositions: [],
|
||||||
|
});
|
||||||
const draggingTileRef = useRef(null);
|
const draggingTileRef = useRef(null);
|
||||||
|
|
||||||
|
const [gridRef, gridBounds] = useMeasure();
|
||||||
|
|
||||||
|
const getTilePositions = useCallback((tiles, gridBounds) => {
|
||||||
|
const newTilePositions = [];
|
||||||
|
const tileCount = tiles.length;
|
||||||
|
const { width: gridWidth, height: gridHeight } = gridBounds;
|
||||||
|
const gap = 8;
|
||||||
|
|
||||||
|
if (tileCount > 0) {
|
||||||
|
const aspectRatio = gridWidth / gridHeight;
|
||||||
|
|
||||||
|
let columnCount, rowCount;
|
||||||
|
|
||||||
|
if (aspectRatio < 1) {
|
||||||
|
if (tileCount <= 4) {
|
||||||
|
columnCount = 1;
|
||||||
|
rowCount = tileCount;
|
||||||
|
} else if (tileCount <= 12) {
|
||||||
|
columnCount = 2;
|
||||||
|
rowCount = Math.ceil(tileCount / 2);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (tileCount === 1) {
|
||||||
|
columnCount = 1;
|
||||||
|
rowCount = 1;
|
||||||
|
} else if (tileCount === 2) {
|
||||||
|
columnCount = 2;
|
||||||
|
rowCount = 1;
|
||||||
|
} else if (tileCount <= 4) {
|
||||||
|
columnCount = 2;
|
||||||
|
rowCount = 2;
|
||||||
|
} else if (tileCount <= 6) {
|
||||||
|
columnCount = 3;
|
||||||
|
rowCount = 2;
|
||||||
|
} else if (tileCount <= 8) {
|
||||||
|
columnCount = 4;
|
||||||
|
rowCount = 2;
|
||||||
|
} else if (tileCount <= 10) {
|
||||||
|
columnCount = 5;
|
||||||
|
rowCount = 2;
|
||||||
|
} else if (tileCount <= 12) {
|
||||||
|
columnCount = 4;
|
||||||
|
rowCount = 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let tileHeight = Math.round(
|
||||||
|
(gridHeight - gap * (rowCount + 1)) / rowCount
|
||||||
|
);
|
||||||
|
let tileWidth = Math.round(
|
||||||
|
(gridWidth - gap * (columnCount + 1)) / columnCount
|
||||||
|
);
|
||||||
|
|
||||||
|
const tileAspectRatio = tileWidth / tileHeight;
|
||||||
|
|
||||||
|
if (tileAspectRatio > 16 / 9) {
|
||||||
|
tileWidth = (16 * tileHeight) / 9;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < tiles.length; i++) {
|
||||||
|
const verticalIndex = Math.floor(i / columnCount);
|
||||||
|
const top = verticalIndex * tileHeight + (verticalIndex + 1) * gap;
|
||||||
|
|
||||||
|
let rowItemCount;
|
||||||
|
|
||||||
|
if (verticalIndex + 1 === rowCount && tileCount % rowCount !== 0) {
|
||||||
|
rowItemCount = Math.floor(tileCount / rowCount);
|
||||||
|
} else {
|
||||||
|
rowItemCount = Math.ceil(tileCount / rowCount);
|
||||||
|
}
|
||||||
|
|
||||||
|
const horizontalIndex = i % columnCount;
|
||||||
|
const totalRowGapWidth = (rowItemCount + 1) * gap;
|
||||||
|
const totalRowTileWidth = rowItemCount * tileWidth;
|
||||||
|
const rowLeftMargin = Math.round(
|
||||||
|
(gridWidth - (totalRowTileWidth + totalRowGapWidth)) / 2
|
||||||
|
);
|
||||||
|
const left =
|
||||||
|
tileWidth * horizontalIndex +
|
||||||
|
rowLeftMargin +
|
||||||
|
(horizontalIndex + 1) * gap;
|
||||||
|
|
||||||
|
newTilePositions.push({
|
||||||
|
width: tileWidth,
|
||||||
|
height: tileHeight,
|
||||||
|
x: left,
|
||||||
|
y: top,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return newTilePositions;
|
||||||
|
}, []);
|
||||||
|
|
||||||
const startWebcam = useCallback(async () => {
|
const startWebcam = useCallback(async () => {
|
||||||
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
|
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
|
||||||
setStream(stream);
|
setStream(stream);
|
||||||
setTiles([{ stream, key: tileKey.current++ }]);
|
setTileState(() => {
|
||||||
}, []);
|
const tiles = [{ stream, key: tileKey.current++ }];
|
||||||
|
const tilePositions = getTilePositions(tiles, gridBounds);
|
||||||
|
return { tiles, tilePositions };
|
||||||
|
});
|
||||||
|
}, [gridBounds]);
|
||||||
|
|
||||||
const addTile = useCallback(() => {
|
const addTile = useCallback(() => {
|
||||||
const newStream = stream.clone();
|
const newStream = stream.clone();
|
||||||
setTiles((tiles) => [
|
|
||||||
...tiles,
|
setTileState(({ tiles }) => {
|
||||||
{ stream: newStream, key: tileKey.current++ },
|
const newTiles = [
|
||||||
]);
|
...tiles,
|
||||||
}, [stream]);
|
{ stream: newStream, key: tileKey.current++ },
|
||||||
|
];
|
||||||
|
const tilePositions = getTilePositions(newTiles, gridBounds);
|
||||||
|
return { tiles: newTiles, tilePositions };
|
||||||
|
});
|
||||||
|
}, [stream, gridBounds]);
|
||||||
|
|
||||||
const removeTile = useCallback(() => {
|
const removeTile = useCallback(() => {
|
||||||
setTiles((tiles) => {
|
setTiles(({ tiles }) => {
|
||||||
const newArr = [...tiles];
|
const newTiles = [...tiles];
|
||||||
newArr.pop();
|
newTiles.pop();
|
||||||
return newArr;
|
const tilePositions = getTilePositions(newTiles, gridBounds);
|
||||||
|
return { tiles: newTiles, tilePositions };
|
||||||
});
|
});
|
||||||
}, []);
|
}, [gridBounds]);
|
||||||
|
|
||||||
const [gridRef, gridBounds] = useMeasure();
|
useEffect(() => {
|
||||||
|
setTileState(({ tiles }) => ({
|
||||||
// useEffect(() => {
|
tiles,
|
||||||
// const newTilePositions = [];
|
tilePositions: getTilePositions(tiles, gridBounds),
|
||||||
// const tileCount = tiles.length;
|
}));
|
||||||
// const { width: gridWidth, height: gridHeight } = gridBounds;
|
}, [gridBounds]);
|
||||||
// const gap = 8;
|
|
||||||
|
|
||||||
// if (tileCount > 0) {
|
|
||||||
// const aspectRatio = gridWidth / gridHeight;
|
|
||||||
|
|
||||||
// let columnCount, rowCount;
|
|
||||||
|
|
||||||
// if (aspectRatio < 1) {
|
|
||||||
// if (tileCount <= 4) {
|
|
||||||
// columnCount = 1;
|
|
||||||
// rowCount = tileCount;
|
|
||||||
// } else if (tileCount <= 12) {
|
|
||||||
// columnCount = 2;
|
|
||||||
// rowCount = Math.ceil(tileCount / 2);
|
|
||||||
// }
|
|
||||||
// } else {
|
|
||||||
// if (tileCount === 1) {
|
|
||||||
// columnCount = 1;
|
|
||||||
// rowCount = 1;
|
|
||||||
// } else if (tileCount === 2) {
|
|
||||||
// columnCount = 2;
|
|
||||||
// rowCount = 1;
|
|
||||||
// } else if (tileCount <= 4) {
|
|
||||||
// columnCount = 2;
|
|
||||||
// rowCount = 2;
|
|
||||||
// } else if (tileCount <= 6) {
|
|
||||||
// columnCount = 3;
|
|
||||||
// rowCount = 2;
|
|
||||||
// } else if (tileCount <= 8) {
|
|
||||||
// columnCount = 4;
|
|
||||||
// rowCount = 2;
|
|
||||||
// } else if (tileCount <= 10) {
|
|
||||||
// columnCount = 5;
|
|
||||||
// rowCount = 2;
|
|
||||||
// } else if (tileCount <= 12) {
|
|
||||||
// columnCount = 4;
|
|
||||||
// rowCount = 3;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// let tileHeight = Math.round(
|
|
||||||
// (gridHeight - gap * (rowCount + 1)) / rowCount
|
|
||||||
// );
|
|
||||||
// let tileWidth = Math.round(
|
|
||||||
// (gridWidth - gap * (columnCount + 1)) / columnCount
|
|
||||||
// );
|
|
||||||
|
|
||||||
// const tileAspectRatio = tileWidth / tileHeight;
|
|
||||||
|
|
||||||
// if (tileAspectRatio > 16 / 9) {
|
|
||||||
// tileWidth = (16 * tileHeight) / 9;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// for (let i = 0; i < tiles.length; i++) {
|
|
||||||
// const verticalIndex = Math.floor(i / columnCount);
|
|
||||||
// const top = verticalIndex * tileHeight + (verticalIndex + 1) * gap;
|
|
||||||
|
|
||||||
// let rowItemCount;
|
|
||||||
|
|
||||||
// if (verticalIndex + 1 === rowCount && tileCount % rowCount !== 0) {
|
|
||||||
// rowItemCount = Math.floor(tileCount / rowCount);
|
|
||||||
// } else {
|
|
||||||
// rowItemCount = Math.ceil(tileCount / rowCount);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const horizontalIndex = i % columnCount;
|
|
||||||
// const totalRowGapWidth = (rowItemCount + 1) * gap;
|
|
||||||
// const totalRowTileWidth = rowItemCount * tileWidth;
|
|
||||||
// const rowLeftMargin = Math.round(
|
|
||||||
// (gridWidth - (totalRowTileWidth + totalRowGapWidth)) / 2
|
|
||||||
// );
|
|
||||||
// const left =
|
|
||||||
// tileWidth * horizontalIndex +
|
|
||||||
// rowLeftMargin +
|
|
||||||
// (horizontalIndex + 1) * gap;
|
|
||||||
|
|
||||||
// newTilePositions.push({
|
|
||||||
// width: tileWidth,
|
|
||||||
// height: tileHeight,
|
|
||||||
// x: left,
|
|
||||||
// y: top,
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// tilePositionsRef.current = newTilePositions;
|
|
||||||
|
|
||||||
// console.log("update tile positions", newTilePositions);
|
|
||||||
// }, [gridBounds, tiles]);
|
|
||||||
|
|
||||||
const animate = useCallback(
|
const animate = useCallback(
|
||||||
(index) => {
|
(index) => {
|
||||||
const newTilePositions = [];
|
const tilePosition = tilePositions[index];
|
||||||
const tileCount = tiles.length;
|
|
||||||
const { width: gridWidth, height: gridHeight } = gridBounds;
|
|
||||||
const gap = 8;
|
|
||||||
|
|
||||||
if (tileCount > 0) {
|
|
||||||
const aspectRatio = gridWidth / gridHeight;
|
|
||||||
|
|
||||||
let columnCount, rowCount;
|
|
||||||
|
|
||||||
if (aspectRatio < 1) {
|
|
||||||
if (tileCount <= 4) {
|
|
||||||
columnCount = 1;
|
|
||||||
rowCount = tileCount;
|
|
||||||
} else if (tileCount <= 12) {
|
|
||||||
columnCount = 2;
|
|
||||||
rowCount = Math.ceil(tileCount / 2);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (tileCount === 1) {
|
|
||||||
columnCount = 1;
|
|
||||||
rowCount = 1;
|
|
||||||
} else if (tileCount === 2) {
|
|
||||||
columnCount = 2;
|
|
||||||
rowCount = 1;
|
|
||||||
} else if (tileCount <= 4) {
|
|
||||||
columnCount = 2;
|
|
||||||
rowCount = 2;
|
|
||||||
} else if (tileCount <= 6) {
|
|
||||||
columnCount = 3;
|
|
||||||
rowCount = 2;
|
|
||||||
} else if (tileCount <= 8) {
|
|
||||||
columnCount = 4;
|
|
||||||
rowCount = 2;
|
|
||||||
} else if (tileCount <= 10) {
|
|
||||||
columnCount = 5;
|
|
||||||
rowCount = 2;
|
|
||||||
} else if (tileCount <= 12) {
|
|
||||||
columnCount = 4;
|
|
||||||
rowCount = 3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let tileHeight = Math.round(
|
|
||||||
(gridHeight - gap * (rowCount + 1)) / rowCount
|
|
||||||
);
|
|
||||||
let tileWidth = Math.round(
|
|
||||||
(gridWidth - gap * (columnCount + 1)) / columnCount
|
|
||||||
);
|
|
||||||
|
|
||||||
const tileAspectRatio = tileWidth / tileHeight;
|
|
||||||
|
|
||||||
if (tileAspectRatio > 16 / 9) {
|
|
||||||
tileWidth = (16 * tileHeight) / 9;
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let i = 0; i < tiles.length; i++) {
|
|
||||||
const verticalIndex = Math.floor(i / columnCount);
|
|
||||||
const top = verticalIndex * tileHeight + (verticalIndex + 1) * gap;
|
|
||||||
|
|
||||||
let rowItemCount;
|
|
||||||
|
|
||||||
if (verticalIndex + 1 === rowCount && tileCount % rowCount !== 0) {
|
|
||||||
rowItemCount = Math.floor(tileCount / rowCount);
|
|
||||||
} else {
|
|
||||||
rowItemCount = Math.ceil(tileCount / rowCount);
|
|
||||||
}
|
|
||||||
|
|
||||||
const horizontalIndex = i % columnCount;
|
|
||||||
const totalRowGapWidth = (rowItemCount + 1) * gap;
|
|
||||||
const totalRowTileWidth = rowItemCount * tileWidth;
|
|
||||||
const rowLeftMargin = Math.round(
|
|
||||||
(gridWidth - (totalRowTileWidth + totalRowGapWidth)) / 2
|
|
||||||
);
|
|
||||||
const left =
|
|
||||||
tileWidth * horizontalIndex +
|
|
||||||
rowLeftMargin +
|
|
||||||
(horizontalIndex + 1) * gap;
|
|
||||||
|
|
||||||
newTilePositions.push({
|
|
||||||
width: tileWidth,
|
|
||||||
height: tileHeight,
|
|
||||||
x: left,
|
|
||||||
y: top,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
tilePositionsRef.current = newTilePositions;
|
|
||||||
const tilePosition = tilePositionsRef.current[index];
|
|
||||||
const draggingTile = draggingTileRef.current;
|
const draggingTile = draggingTileRef.current;
|
||||||
const dragging =
|
const dragging =
|
||||||
draggingTileRef.current && index === draggingTileRef.current.index;
|
draggingTileRef.current && index === draggingTileRef.current.index;
|
||||||
|
|
@ -247,10 +175,10 @@ export function GridDemo() {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[tiles, gridBounds]
|
[tilePositions]
|
||||||
);
|
);
|
||||||
|
|
||||||
const [springs, api] = useSprings(tiles.length, animate, [tiles, gridBounds]);
|
const [springs, api] = useSprings(tiles.length, animate, [tilePositions]);
|
||||||
|
|
||||||
const bind = useDrag(({ args: [index], active, movement: [x, y] }) => {
|
const bind = useDrag(({ args: [index], active, movement: [x, y] }) => {
|
||||||
if (active) {
|
if (active) {
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue