[Bug Report]: dynamic-group extension separate with its children when quick drag and release

[irelance]

What happened?

https://github.com/user-attachments/assets/031cc81d-456f-4571-acfc-000a2e9e6fcd

Core Version

2.0.6

Extension Version

2.0.10

Engine Version

No response

What browsers are you seeing the problem on?

Firefox, Chrome, Microsoft Edge

[boyongjiong]

😂😂 I have not reproduced this problem. Is there a similar problem in all kinds of browsers? or some of them

[irelance]

You need to quick drag and release to trigger this bug. Your gif is only dragging. (you need to release your Left Mouse Button) Yes, all of them (I don't know if safari has this problem, because I don't have mac).

[irelance]

Watch my video between 0:27 ~ 0:29, I click LMB (Left Mouse Button) start to drag and release LMB for 4 times.

[irelance]

Besides, If you use custom htmlnode this bug will become more obvious.

[wbccb]

I also found this problem, it should be the same problem https://github.com/didi/LogicFlow/issues/1949

DynamicGroup's parent movement is handled internally by onDragging() The movement of DynamicGroup's children is handled by MOUSEMOVE's dx and dy

Promise.resolve().then(() => {
  this.onDragging({
    deltaX,
    deltaY,
    event: e,
  })
  this.eventCenter?.emit(EventType[`${this.eventType}_MOUSEMOVE`], {
    deltaX,
    deltaY,
    e,
    data: this.data || elementData,
  })
  this.eventCenter?.emit(EventType[`${this.eventType}_DRAG`], {
    e,
    data: this.data || elementData,
  })
})

onDragging() uses event data to calculate dx and dy, which has a slight error with the final dx and dy of mousemove, causing the position movement of parent and children to be slightly disordered

Of course, autoExpand is another problem, the dx and dy changed by onDragging() are larger

---

• onDragging()->parent moveNodes()
• MOUSEMOVE event-> children moveNodes()

The unification of the dx and dy data of parent.moveNodes() and the dx and dy data emitted by the mousemove event should be the key point to approach this problem.

[ZivvW]

I also found this problem, it should be the same problem #1949

DynamicGroup's parent movement is handled internally by onDragging() The movement of DynamicGroup's children is handled by MOUSEMOVE's dx and dy

Promise.resolve().then(() => {
  this.onDragging({
    deltaX,
    deltaY,
    event: e,
  })
  this.eventCenter?.emit(EventType[`${this.eventType}_MOUSEMOVE`], {
    deltaX,
    deltaY,
    e,
    data: this.data || elementData,
  })
  this.eventCenter?.emit(EventType[`${this.eventType}_DRAG`], {
    e,
    data: this.data || elementData,
  })
})

onDragging() uses event data to calculate dx and dy, which has a slight error with the final dx and dy of mousemove, causing the position movement of parent and children to be slightly disordered

Of course, autoExpand is another problem, the dx and dy changed by onDragging() are larger

• onDragging()->parent moveNodes()
• MOUSEMOVE event-> children moveNodes()

The unification of the dx and dy data of parent.moveNodes() and the dx and dy data emitted by the mousemove event should be the key point to approach this problem.

maybe can fix in https://github.com/didi/LogicFlow/pull/1963 getMoveDistance can get parent real dx and dy