[Draggable current drag lost during React re-render]

It's not really GSAP per se, it's its management of React behaviour, I should say.

As for React change detection, I will not enter this debate  usability, dx, performance ... pros and cons.

[Draggable current drag lost during React re-render]

Yh true, for some reason the way gsap operates confuses me. Thanks for you fast replies

[Draggable current drag lost during React re-render]

Silly mistake, my bad.

What if I actually needed a re-render, is there a way?

 

Edit :

I tried in my original code and it doesn't work. Yet I see no difference.

As I drag I want to update the viewbox of the parent svg. I made a simplified yet (I assume) correct example here : https://codesandbox.io/s/react-gsap-draggable-forked-ivt18?file=/index.js

Of course it's a dumb example I have some business logic around the viewbox update, it's just a more complex `onMove` function, nothing crazy.

[Draggable current drag lost during React re-render]

See case : https://codesandbox.io/s/react-gsap-draggable-forked-02s6z?file=/index.js

 

As you rotate, the rotation value is passed up in the hierarchy, triggering a refresh of the parent component, and therefore of the child component. All values are reset and the current dragging is interrupted.
This does not happen if the state is held in the Tile component itself, but I want to separate those concerns.

I also tried to memoized the component, but the drag is still lost.

 

Is there a way to recover the current dragging ?

[Collection of draggable, trigger on child]

Yes something like this.

I didn't want to loop because I was concerned about performance, thinking one draggable is better than many. I may have a few hundred elements.

[Collection of draggable, trigger on child]

I'm using Draggable.create(arrayOfElements, {...}) to make a set of SVG g elements draggable.

The trigger of each element is a child of said element. One trigger is supposed to drag one element.

 

So I tried { trigger: ".draggable" }. When I do that, any .draggable trigger the drag of all elements (from arrayOfElements) instead of its parent only.
I could of course create the drag on the children directly, but then I have to move everything else manually.

 

Should I do an instance of Draggable for each element instead of for the entire array ? Does that bring any performance issue ?