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?