Drag and Drop in a scaled container with react-dnd - scale

Question

I've almost got this working in a codesandbox, but the drop accuracy still isn't quite right. I'm at a loss for what else to try.
Here is my container:
import update from "immutability-helper";
import { useCallback, useState } from "react";
import { useDrop } from "react-dnd";
import { DraggableBox } from "./DraggableBox.js";
import { ItemTypes } from "./ItemTypes.js";
import { snapToGrid as doSnapToGrid } from "./snapToGrid.js";
const styles = {
width: 300,
height: 300,
border: "1px solid black",
position: "relative",
transform: "scale(.8)"
};
export const Container = ({ snapToGrid }) => {
const [boxes, setBoxes] = useState({
a: { top: 20, left: 80, title: "Drag me around" },
b: { top: 180, left: 20, title: "Drag me too" }
});
const moveBox = useCallback(
(id, left, top) => {
setBoxes(
update(boxes, {
[id]: {
$merge: { left, top }
}
})
);
},
[boxes]
);
const [, drop] = useDrop(
() => ({
accept: ItemTypes.BOX,
drop(item, monitor) {
const delta = monitor.getDifferenceFromInitialOffset();
let left = item.left + delta.x;
let top = item.top + delta.y;
if (snapToGrid) {
[left, top] = doSnapToGrid(left, top);
}
moveBox(item.id, left, top);
return undefined;
}
}),
[moveBox]
);
return (
<div ref={drop} style={styles}>
{Object.keys(boxes).map((key) => (
<DraggableBox key={key} id={key} {...boxes[key]} />
))}
</div>
);
};
Here is my draggable box:
import { memo, useEffect } from 'react'
import { useDrag } from 'react-dnd'
import { getEmptyImage } from 'react-dnd-html5-backend'
import { Box } from './Box.js'
import { ItemTypes } from './ItemTypes.js'
function getStyles(left, top, isDragging) {
const transform = `translate3d(${left }px, ${top }px, 0)`
return {
position: 'absolute',
transform,
WebkitTransform: transform,
// IE fallback: hide the real node using CSS when dragging
// because IE will ignore our custom "empty image" drag preview.
opacity: isDragging ? 0 : 1,
height: isDragging ? 0 : '',
}
}
export const DraggableBox = memo(function DraggableBox(props) {
const { id, title, left, top } = props
const [{ isDragging }, drag, preview] = useDrag(
() => ({
type: ItemTypes.BOX,
item: { id, left, top, title },
collect: (monitor) => ({
isDragging: monitor.isDragging(),
}),
}),
[id, left, top, title],
)
useEffect(() => {
preview(getEmptyImage(), { captureDraggingState: true })
}, [])
return (
<div
ref={drag}
style={getStyles(left, top, isDragging)}
role="DraggableBox"
>
<Box title={title} />
</div>
)
})
Here is my custom drag layer:
import { useDragLayer } from "react-dnd";
import { BoxDragPreview } from "./BoxDragPreview.js";
import { ItemTypes } from "./ItemTypes.js";
import { snapToGrid } from "./snapToGrid.js";
const layerStyles = {
position: "fixed",
pointerEvents: "none",
zIndex: 100,
left: 0 ,
top: 0 ,
width: "100%",
height: "100%",
};
function getItemStyles(initialOffset, currentOffset, isSnapToGrid) {
if (!initialOffset || !currentOffset) {
return {
display: 'none',
}
}
let { x, y } = currentOffset
if (isSnapToGrid) {
x -= initialOffset.x
y -= initialOffset.y
;[x, y] = snapToGrid(x, y)
x += initialOffset.x
y += initialOffset.y
}
const transform = ` translate(${x }px, ${y }px)`
return {
transform,
WebkitTransform: transform,
}
}
export const CustomDragLayer = (props) => {
const {
itemType,
isDragging,
item,
initialOffset,
currentOffset,
delta
} = useDragLayer((monitor) => ({
item: monitor.getItem(),
itemType: monitor.getItemType(),
initialOffset: monitor.getInitialSourceClientOffset(),
currentOffset: monitor.getSourceClientOffset(),
delta: monitor.getDifferenceFromInitialOffset(),
isDragging: monitor.isDragging()
}));
function renderItem() {
switch (itemType) {
case ItemTypes.BOX:
return <BoxDragPreview title={item.title} />;
default:
return null;
}
}
if (!isDragging) {
return null;
}
return (
<div style={layerStyles}>
<div style={getItemStyles(initialOffset, currentOffset, props.snapToGrid)}>{renderItem()}</div>
</div>
);
};
And here is my box drag preview:
import { memo, useEffect, useState } from "react";
import { Box } from "./Box.js";
const styles = {
display: "inline-block",
transform: "scale(.8)",
transformOrigin: "top left"
};
export const BoxDragPreview = memo(function BoxDragPreview({ title }) {
const [tickTock, setTickTock] = useState(false);
useEffect(
function subscribeToIntervalTick() {
const interval = setInterval(() => setTickTock(!tickTock), 500);
return () => clearInterval(interval);
},
[tickTock]
);
return (
<div style={styles}>
<Box title={title} yellow={tickTock} preview />
</div>
);
});
I tried item.left + delta.x / scaleValue, but that was even less accurate than this example. Here is the url to the codesandbox.
https://codesandbox.io/s/dazzling-wozniak-2fvs81?file=/src/BoxDragPreview.js:0-616