[antv x6] 限制节点/边是否可以移动，移动时返回父节点，限制节点的移动范围

533_2025-12-04 8:41

interacting 限制节点和边的交互

nodeMovable 限制是否可以移动

官方文档-限制节点和边的交互

embedding 移动时，返回父节点

官方文档-移动时，返回父节点

javascript 复制代码

 new Graph({
  ......,
  embedding: {
    enabled: true,
    findParent({ node }) {
      const bbox = node.getBBox()
      return this.getNodes().filter((node) => {
        const data = node.getData<{ parent: boolean }>()
        if (data && data.parent) {
          const targetBBox = node.getBBox()
          return bbox.isIntersectWithRect(targetBBox)
        }
        return false
      })
    },
  },
})

限制子节点的移动范围

官方文档-示例-限制子节点的移动范围
 官方文档-限制节点的移动范围

javascript 复制代码

new Graph({
  translating: {
    restrict: true, // 节点不能移动超出画布区域
  },
})

javascript 复制代码

// 指定一个节点的移动范围
const graph = new Graph({
  translating: {
    restrict: {
      x: 0,
      y: 0,
      width: 100,
      height: 100,
    },
  },
})

javascript 复制代码

// 不能超出父节点的范围
 new Graph({
  ......,
  translating: {
    restrict(view) {
      const cell = view.cell
      if (cell.isNode()) {
        const parent = cell.getParent()
        if (parent) {
          return parent.getBBox()
        }
      }
      return null
    },
  },
})