1

I'm trying to implement stepped positioning on canvas elements in KonvaJS. Here is the minimal, reproducible example I've created to see the problem better: https://codesandbox.io/s/autumn-wave-wkz4ut?file=/src/App.tsx

Everything is fine if the Stage is at position (0, 0). But once the Stage position is set to some arbitrary value (either set directly or by dragging the Stage), and the green Rect is dragged, there's a small movement that happens when letting go of the green Rect. This doesn't happen if the setX() and setY() functions aren't called in the onDragEnd prop of the Rect. In my project use case, this is necessary, so removing those calls is not an option.

It seems like the position given to the dragBoundFunc prop is not the same as the position given in the onDragEnd prop (through event.target.position()). Is this a bug? If it isn't, is there a way to retrieve the same position given to the dragBoundFunc? Thank you!

Edit: Thank you @lavrton for the answer! Seems I'm going about this the wrong way, I'll post the proper answer once I make it work on my side.

Devwulf
  • 370
  • 4
  • 11
  • Can you expand on 'a small movement' please ? – Vanquished Wombat Feb 23 '23 at 13:04
  • @VanquishedWombat There's an extra movement on the Rect that happens when you let go of the mouse button. Instead of stopping where you let it go, it moves a little bit more, kinda like inertia. This is more apparent if you drag and hold the Rect for a bit longer in one place then let go. – Devwulf Feb 23 '23 at 15:03
  • Could you modify your sample to maybe log the position while dragging and then when dropped and perhaps compute the difference? It will make it easier to absorb / understand issue and provide a possible test case for any solution. – Vanquished Wombat Feb 23 '23 at 18:58

1 Answers1

1

dragBoundFunc always works in absolute positions. It may not be comfortable in some situations. For most of the cases I recommend to use "drag" events only such as dragmove.

lavrton
  • 18,973
  • 4
  • 30
  • 63