AntV X6常用功能记录

一、阻止节点拖拽

graph = new Graph({
    interacting: function () {
      // if (cellView.cell.getData().disableMove) {
      return { nodeMovable: false };
      // }
    },
});

二、放大/缩小

graph.zoom(factor, {
    minScale: 0.3,
    maxScale: 2,
    center: {
      x: '50%',
      y: '50%',
    },
});

三、重置大小

graph.zoomTo(1, {
    minScale: 0.3,
    maxScale: 2,
    center: {
      x: '50%',
      y: '50%',
    },
});

四、适应屏幕大小

graph.zoomToFit();

五、使用React组件作为Node节点

Graph.registerNode('task-node', {
  inherit: 'react-shape',
  width: 200,
  height: 50,
  component: <TaskComp />,
});

nodes = []
nodes.push({
    id: 'task' + index,
    shape: 'task-node',
    x: index * 265,
    y: 50,
    data: {
      ...item,
    },
});

graph.addNodes(nodes);