Flickering when dragging a group with an SVG in it

[lucafaggianelli]

I have a group element <g> containing several elements, there's always an <svg> and optionally other stuff. The drag and drop works but it flickers a lot and the drop position is not correct.

https://codepen.io/lucafaggianelli/pen/eYzVmxx?editors=0010

const draw = SVG().size(500, 500).addTo('body')
const table = draw.group()
  .svg(TABLE)
  .draggable()

Moreover I need to resize the loaded image inside the group and if I do that, the situation is worse as the element jump out of the window (literally :))

const table = draw.group()
  .svg(TABLE)
  .draggable()
  .last().size(100)

[Fuzzyma]

And I thought this plug-in was finally stable...
I'll look into it but it might take some time.

[lucafaggianelli]

Yes it seems a pretty delicate matter, when I drag the group only the inner svg is moved via x and y attrs, so I tried to make a custom drag logic applying a translation to the g element and situation is better but still buggy

[Fuzzyma]

This is actually the correct behavior because groups just inherit the position if it's content. So if you love the content the group moves. But obviously something is not working out here

[alexanderGerbik]

A possible work-around - move each element of the group manually:

let lastPoint;
group.draggable().on('dragstart', (e) => {
  lastPoint = e.detail.p;
}).on('dragmove', (e) => {
  e.preventDefault();
  const currentPoint = e.detail.p;
  const dx = currentPoint.x - lastPoint.x;
  const dy = currentPoint.y - lastPoint.y;
  // move each element of the group
  lastPoint = currentPoint;
})

[antonioaltamura]

is there any news about this?

[Fuzzyma]

Sorry for never getting back to this.
I looked into this, and this seemed to an inconsistent behavior with nested svgs in groups.
If you call draggable on the svg instead of the group it works.

Still a bug tho.

Working example:
https://codepen.io/fuzzyma/pen/OJYGvpM?editors=0010

[Fuzzyma]

Found a FF bug while working on this: https://bugzilla.mozilla.org/show_bug.cgi?id=1905012

But that doesnt seem to be the issue because the same behavior can be observed in chrome

[Fuzzyma]

Found a second FF bug while working on this which makes the fix really weird:
https://bugzilla.mozilla.org/show_bug.cgi?id=1905039