[x6-plugin-selection]: When the canvas is scaled(graph enable panning), the highlight box will be out of place sometimes.

[gxy5202]

Describe the bug

See figure GIF below

As u can see, When the canvas is scaled, the highlight box will be out of place sometimes

Your Example Website or App

Sorry, because this is from company, i can't get the code.

Steps to Reproduce the Bug or Issue

1.enable graph panning.
2.use x6-plugin-selection.
3.select some nodes.
4.scale.

Expected behavior

I find the problem is because of the plugin's source code.

When called confirmUpdate function, plugin will remove the selection box then create a new box. This is not right.

And i change the code by adding a onlyUpdateSelectionBoxCss function, and drop the remove way. Problem is solved. But I'm not sure if this is ok?

+ protected  onlyUpdateSelectionBoxCss(cell: Cell, box: any) {
+    this.addCellSelectedClassName(cell)
+
+    if (this.canShowSelectionBox(cell)) {
+      const view = this.graph.renderer.findViewByCell(cell)
+      if (view) {
+        const bbox = view.getBBox({
+         useCellGeometry: true,
+        })
+
+        Dom.css(box, {
+          position: 'absolute',
+          left: bbox.x,
+          top: bbox.y,
+          width: bbox.width,
+          height: bbox.height,
+          pointerEvents: this.options.pointerEvents || 'auto',
+        })
+      }
+    }
+}

confirmUpdate() {
    if (this.boxCount) {
-     this.hide()
      for (let i = 0, len = this.$boxes.length; i < len; i += 1) {
        const box = this.$boxes[i]
        const cellId = Dom.attr(box, 'data-cell-id')
-       Dom.remove(box)
        const cell = this.collection.get(cellId)
        if (cell) {
-         this.createSelectionBox(cell)
+        this.onlyUpdateSelectionBoxCss(cell, box)
        }
      }

      this.updateContainer()
    }
    return 0
  }

Screenshots or Videos

No response

Platform

• OS: Windows
• Browser: Chrome
• Version: 116.0.5845.97

Additional context

No response

[cyrilluce]

我定位了一下，根因在于 this.$boxes 是getter，每次都会从 DOM 中动态获取；而这里遍历时又删除并在后方 append DOM，导致遍历时跳过了一些结点

[gxy5202]

我定位了一下，根因在于 this.$boxes 是getter，每次都会从 DOM 中动态获取；而这里遍历时又删除并在后方 append DOM，导致遍历时跳过了一些结点

我看了下代码，确实是，如果插入dom能保证原始顺序应该就没问题了。不过我有点疑惑，纯粹更新样式的话，根本不用删除再添加吧？

[wtjperi2003]

同样问题，下一版能修复下吗

[gxy5202]

同样问题，下一版能修复下吗

大佬已经修复了，等版本发布吧

[NewByVector]

已经发布了 https://www.yuque.com/antv/x6/twxkw4l2g4l2pv17

[x6-bot]

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.