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

Fix isInside offset

Browse source
This commit is contained in:
Robert Long 2021-08-16 15:06:12 -07:00
parent 88eab794d0
commit e68c9bee4a
1 changed files with 29 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/GridDemo.jsx
View file

@ -4,16 +4,13 @@ import { useSprings, animated, useSpring } from "@react-spring/web";
import styles from "./GridDemo.module.css"; import styles from "./GridDemo.module.css";
import useMeasure from "react-use-measure"; import useMeasure from "react-use-measure";
function isInside([x, y], dragTile, targetTile) { function isInside([x, y], targetTile) {
const cursorX = dragTile.x + x;
const cursorY = dragTile.y + y;
const left = targetTile.x; const left = targetTile.x;
const top = targetTile.y; const top = targetTile.y;
const bottom = targetTile.y + targetTile.height; const bottom = targetTile.y + targetTile.height;
const right = targetTile.x + targetTile.width; const right = targetTile.x + targetTile.width;
if (cursorX < left || cursorX > right || cursorY < top || cursorY > bottom) { if (x < left || x > right || y < top || y > bottom) {
return false; return false;
} }
@ -148,8 +145,11 @@ export function GridDemo() {
...tiles, ...tiles,
{ stream: newStream, key: tileKey.current++, remove: false }, { stream: newStream, key: tileKey.current++, remove: false },
]; ];
const tilePositions = getTilePositions(newTiles, gridBounds);
return { tiles: newTiles, tilePositions }; return {
tiles: newTiles,
tilePositions: getTilePositions(newTiles, gridBounds),
};
}); });
}, [stream, gridBounds]); }, [stream, gridBounds]);
@ -169,7 +169,12 @@ export function GridDemo() {
setTimeout(() => { setTimeout(() => {
setTileState(({ tiles }) => { setTileState(({ tiles }) => {
const newTiles = tiles.filter((tile) => tile.key !== tileKey); const tileIndex = tiles.findIndex((tile) => tile.key === tileKey);
const newTiles = [...tiles];
newTiles.splice(tileIndex, 1);
tileOrderRef.current = tileOrderRef.current.filter(
(index) => index !== tileIndex
);
return { return {
tiles: newTiles, tiles: newTiles,
tilePositions: getTilePositions(newTiles, gridBounds), tilePositions: getTilePositions(newTiles, gridBounds),
@ -238,27 +243,29 @@ export function GridDemo() {
[tilePositions, tiles] [tilePositions, tiles]
); );
const bind = useDrag(({ args: [index], active, movement }) => { const bind = useDrag(({ args: [index], active, xy, movement }) => {
let order = tileOrderRef.current; let order = tileOrderRef.current;
const tileIndex = tileOrderRef.current[index]; const tileIndex = tileOrderRef.current[index];
const tilePosition = tilePositions[tileIndex];
const tile = tiles[tileIndex]; const tile = tiles[tileIndex];
// for (let i = 0; i < tileOrderRef.current.length; i++) { const cursorPosition = [xy[0] - gridBounds.left, xy[1] - gridBounds.top];
// if (i === index) {
// continue;
// }
// const hoverTileIndex = tileOrderRef.current[i]; for (let i = 0; i < tileOrderRef.current.length; i++) {
// const hoverTilePosition = tilePositions[hoverTileIndex]; if (i === index) {
continue;
}
// if (isInside(movement, tilePosition, hoverTilePosition)) { const hoverTileIndex = tileOrderRef.current[i];
// // const [toBeMoved] = order.splice(i, 1); const hoverTilePosition = tilePositions[hoverTileIndex];
// // order.splice(index, 0, toBeMoved);
// break; if (isInside(cursorPosition, hoverTilePosition)) {
// } // TODO: Figure out swapping
// } // order[i] = tileIndex;
// order[index] = i;
break;
}
}
if (active) { if (active) {
draggingTileRef.current = { draggingTileRef.current = {