X6 icon indicating copy to clipboard operation
X6 copied to clipboard

群组不支持框选/多选节点嵌入

Open zzyyu opened this issue 2 years ago • 6 comments

Describe the bug

当使用框选/多选功能时,选择多个节点 将选择的多个节点移动到群组中,群组节点只会将鼠标移动的节点嵌入群组节点内 其它被选中的节点未自动嵌入

Your Example Website or App

https://codesandbox.io/s/vibrant-pare-yqc3if?file=/index.ts

Steps to Reproduce the Bug or Issue

  1. 将多个节点位置集中
  2. 选中/框选多个节点
  3. 移动框选中的子节点到群组节点内

Expected behavior

群组节点支持批量嵌入功能 embedding中的findParent、validate支持批量节点的验证

Screenshots or Videos

image

Platform

  • OS: [e.g. macOS, Windows, Linux]
  • Browser: [e.g. Chrome, Safari, Firefox]
  • Version: [e.g. 91.1]

Additional context

No response

zzyyu avatar May 31 '23 08:05 zzyyu

👋 @zzyyu

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

x6-bot[bot] avatar May 31 '23 08:05 x6-bot[bot]

Any progress on this?

PatrickChen928 avatar Nov 20 '23 09:11 PatrickChen928

Any progress on this?

huihui925 avatar May 08 '24 06:05 huihui925

我使用如下方法来支持框选节点嵌入。在实现的时候,我发现node.setParent方法失效,但是没花时间去尝试复现了,大家可以看下。

    embedding: {
      enabled: true,
      findParent({node}) {//拖动节点时,执行该函数
        const bbox = node.getBBox();
        //寻找节点的父节点
        const parentNodes = this.getNodes().filter((cell) => {
            const parentBbox = cell.getBBox();
            //如果节点的bbox和该群组节点的bbox相交,则群组节点是该节点的父节点
            if (bbox.isIntersectWithRect(parentBbox)) {
              const nodes = this.getSelectedCells();
              /**
               * 注:antV x6的框选节点功能不能把被框选的其他节点一同设置为子节点
               * 采用如下方法将当前框选的节点一并设置为群组节点的子节点
               * 有可能出现被框选的节点没有和群组节点相交,也被设置为子节点的情况
               * 但是用户已经框选一些节点并将其中一个节点拖进群组了,就认为他的目的就是一起设置
               * 下面删除parent也是一样
               */
              nodes.forEach((node) => {
                //不知道为啥,node.setParent(cell)不生效,只能用addChild
                cell.addChild(node);
                node.getData().parent = cell.id;
                //为了避免节点被群组节点遮罩,设为最顶层
                node.toFront();
              })
              return true;
          }
          return false;
        })
        //如果没有找到任何父节点,则删除该节点的parent属性(移出群组)
        if (parentNodes.length === 0) {
          const nodes = this.getSelectedCells();
          nodes.forEach((node) => {
            //由于node.setParent(null)不生效,而且parent.removeChild会直接删除节点
            //所以只能先过滤出删除后的子节点,再重新设置子节点
            const parent = node.getParent();
            if (parent) {
              parent.setChildren(parent.filterChild((child) => child !== node))
            }
          })
        }
        return parentNodes;
      },
    },

ADAM00o00 avatar May 16 '24 07:05 ADAM00o00

Any progress on this?

Ardanas avatar Sep 03 '24 06:09 Ardanas