更新

addItem(type, model)

新增元素。

参数

用法

const model = {
  id: 'node',
  label: 'node',
  address: 'cq',
  x: 200,
  y: 150,
  style: {
    fill: 'blue',
  },
};
graph.addItem('node', model);
// 当type为group时候，model的数据结构如下：
const model = {
  groupId: 'xxx000999',
  nodes: ['123', '23'],
  type: 'rect',
  zIndex: 0,
  title: {
    text: '名称',
  },
};
graph.addItem('group', model);

add(type, model)

同 addItem(type, model)。

updateItem(item, model)

更新元素，包括更新数据、样式等。

参数

用法

const model = {
  id: 'node',
  label: 'node',
  address: 'cq',
  x: 200,
  y: 150,
  style: {
    fill: 'blue',
  },
};
// 通过ID查询节点实例
const item = graph.findById('node');
graph.updateItem(item, model);

update(item, model)

同updateItem(item, model)。

removeItem(item)

new删除元素，当 item 为 group ID 时候，则删除分组。

参数

用法

// 通过ID查询节点实例
const item = graph.findById('node');
graph.removeItem(item);

remove(item)

同 removeItem(item)。

refresh()

当源数据发生变更时，根据新数据刷新视图。

该方法无参数。

用法

graph.refresh();

refreshItem(item)

刷新指定元素。

参数

用法

// 通过ID查询节点实例
const item = graph.findById('node');
graph.refreshItem(item);

refreshPositions()

当节点位置发生变化时，刷新所有节点位置，并重计算边的位置。

该方法无参数。

用法

graph.refreshPositions();

paint()

仅重新绘制画布。当设置了元素样式或状态后，通过调用 paint() 方法，让修改生效。

该方法无参数。

用法

const item = e.item;
const graph = this.graph;
const autoPaint = graph.get('autoPaint');
graph.setAutoPaint(false);
graph.setItemState(item, 'selected', true);
graph.paint();
graph.setAutoPaint(autoPaint);

setAutoPaint(auto)

设置是否在更新/删除后自动重绘，一般搭配 paint() 方法使用。

参数

用法

const item = e.item;
const graph = this.graph;
const autoPaint = graph.get('autoPaint');
graph.setAutoPaint(false);
graph.setItemState(item, 'selected', true);
graph.paint();
graph.setAutoPaint(autoPaint);