exeDrag while dragging the shape applies dramatically

[aghArdeshir]

When dragging a shape, and in middle of drag, if I call exeDrag to move the shape by a pixel, the result would be HUGE changes. What I "guess" is happening by observing the behavior, looks like each call to exeDrag applies the delta from parameters, plus all the dragging user did by mouse. In the codeSandBox below, If you press "Arrow Down" the shape will be moved down only by one pixel. But if we call the same method to move shape by one pixel while dragging the shape, the shape moves drastically. Just start dragging the shape vertically. (and check the console to make sure how many times we are moving the shape by one pixel. It should not be this much dramatic)

CodeSandBox: https://codesandbox.io/p/sandbox/gallant-sun-tdk5lg?file=%2Fsrc%2Findex.js

[nichollascarter]

@aghArdeshir i still don't see the reason why exeDrag method should be used inside onMove callback?
Could you please describe the goal you follow?

[aghArdeshir]

Hi. Thanks for the quick reply.

The use case is "snapping". Suppose there is a line or there are two elements I want to snap the tops, or centers together when they are in a suitable distance (i.e. <20px). Like how Miro does snapping:
https://github.com/nichollascarter/subjx/assets/5755214/997e6704-2f6e-4007-b0f5-446dedb63b9c

I created another sandbox for the use case I have: https://codesandbox.io/p/sandbox/mystifying-heisenberg-3zxxdn?file=%2Fsrc%2Findex.js%3A31%2C13 which shows a message when I should snap. My strategy was to call exeDrag programmatically to compensate for the difference to move the element programmatically.

[nichollascarter]

@aghArdeshir got you. I don't think it's possible to emulate "snapping" this way. It's more like separate feature.
Anyway you can try to trigger exeDrag once your draggable element came in snapping area.

[aghArdeshir]

Thanks again for the reply.

Anyway you can try to trigger exeDrag once your draggable element came in snapping area.

I did not understand this part though. I created this third sandbox: https://codesandbox.io/p/sandbox/quizzical-water-9gtn9w?file=%2Fsrc%2Findex.js%3A24%2C85 which tries to snap the element. But the "jumping" of element does not actually snap it. When I ask it to exeDrag({dy: 20}), it is jumped by at least 100 px or so.

[nichollascarter]

@aghArdeshir yes, I see that strange behavior you described. I did not suppose if exeDrag will be used this way. I'll investigate this thoroughly.

[aghArdeshir]

This is how I "supposed" it might work and ended up calling exeDrag inside the onMoving callback:

• User keeps dragging the draggable shape around
• subjx takes care of where the shape is after transform and I get to know the information too (through storage object)
• Now when the shape comes in the distance for which I should "activate" snapping
• I calculate the distance and apply a "boost" to it. So user keeps dragging the shape, and then immediately I keep applying a new dx/dy for it. and because the callback and my programmatic boost/adjust happen in the same sync frame, user does not notice flickring.
• As user keeps dragging the shape, when the shape gets out of the snapping distance, I no longer keep adjusting the dx/dy programmatically, and then it follows user's mouse again.

Just sharing with you, so you know how I thought it should work after reading the docs.

[aghArdeshir]

Another API/Event suggestion that could help with this use case, would be a BEFORE_MOVING event, which calls a callback before each move/pixel, and the callback can return:

• a true to allow the move
• or false to prevent the move
• or new dx & dy
• or even new x & y (absolute)

This could be a more general purpose mechanism, by which the subjx itself could implement the axis feature, or changing axis dynamically while dragging. Imagine somebody is creating a maze game, and user dragging the shape, should change axis dynamically around corners without releasing the mouse)

or the snap feature could be implemented through this callback. or even, again, changing the snap dynamically while moving the shape (for whatever reason).

With such a callback, the snapping feature I had in mind could also be implemented easily (I guess)