Another example of Groups not following mouse on drag

Environments

• Moveable Component version: 0.42.0

Previous issues, that didn’t solve my issue:

• https://github.com/daybrush/moveable/issues/137
• https://github.com/daybrush/moveable/issues/318
• https://github.com/daybrush/moveable/issues/545
• https://github.com/daybrush/moveable/issues/408

In pretty much all of these issues, you suggest that the Moveable should have a rootContainer that has no transformations. If I set it to document.body it doesn’t fix the onDragGroup issue. I use #canvas as a selector - it has no transformations and is a parent of the <Rescaled /> container.

My setup:

1. Canvas- a working area, that is scaled down with CSS’s transform.
2. Boxes - Draggable elements within the Canvas. You can add boxes from the Add button, top right.
3. Selecto - click or highlight area to select boxes. Selected boxes could be dragged.
4. Guidelines - I dynamically create guidelines - the sides of the Canvas and the sides of the non-selected boxes. My guidelines are coordnates within the Canvas.

Reproduction sandbox:

https://codesandbox.io/s/elegant-northcutt-3jp4cj?file=/src/Editor.jsx

I’m sorry that my reproduction might not be exactly “minimal”, but I think it’s simple enough. The Editor.jsx is the important file.

Steps to reproduce:

1. There are two boxes that are spawned by default, for the sake of the example.
2. Click on a single box to select it. Now, you can drag it. It follows the mouse properly.
3. Highlight two boxes with Selecto - drag and area with the mouse, or by holding down shift. Now, you have a group. Try dragging the group around.
4. Bug: The group is being dragged a shorter distance than the mouse distance. The onDragGroup handler calls the exact same handler as onDrag.

Video

https://user-images.githubusercontent.com/19570004/201682663-a516960f-4842-4531-b106-72601c0581ed.mp4

[xyj367]

@joshmarnold

I have the same problem. After studying your codesandbox you provided, it is found that adding zoom={1 / store.scaleFactor} rootContainer={document.body} can solve the problem.

[joshmarnold]

@xyj367 Thanks! This did appear to work. For posterity, I did the following:

1. Set the zoom property on the Moveable component equal to 1/scale
2. Set Selecto dragContainer equal to containerRef. conatinerRef is attached to container of boxes.

Note that I’m also using Selecto as well which adds complexity.