@antv/x6 限制节点或者子节点的移动范围

1、先上个图，来自官方网站：https://x6.antv.antgroup.com/zh/examples/node/group/#restrict-movement

说明：图中的child只能在Parent的范围内进行移动，这个效果不错，在一些定制的场合中会用到。

2、代码：
 

import { Graph } from '@antv/x6'

const graph = new Graph({
  container: document.getElementById('container'),
  grid: true,
  translating: {
    restrict(view) {
      const cell = view.cell
      if (cell.isNode()) {
        const parent = cell.getParent()
        if (parent) {
          return parent.getBBox()
        }
      }

      return null
    },
  },
})

const child = graph.addNode({
  x: 120,
  y: 80,
  width: 80,
  height: 40,
  label: 'Child',
  zIndex: 10,
  attrs: {
    body: {
      stroke: 'none',
      fill: '#3199FF',
    },
    label: {
      fill: '#fff',
      fontSize: 12,
    },
  },
})

const parent = graph.addNode({
  x: 40,
  y: 40,
  width: 640,
  height: 160,
  zIndex: 1,
  label: 'Parent\n(try to move me)',
  attrs: {
    label: {
      refY: 120,
      fontSize: 12,
    },
    body: {
      fill: 'transparent',
      stroke: '#ffe7ba',
    },
  },
})

parent.addChild(child)

3、说明：

这个是指定节点的移动范围，更加方便，如果碰到了需要节点在某一个范围内进行移动，不出这个rect(x,y,width,height)的区域，只要定义的时候指定restrict = 矩形区域，就可以完成。