元素操作

阅读时间约 5 分钟

增删

graph.addItem(type, model, stack)

新增元素(节点和边)。

⚠️ 注意: 将会直接使用 model 对象作为新增元素的数据模型,F6 内部可能会对其增加或修改一些必要的字段。若不希望原始参数被修改,建议在使用深拷贝后的 model

参数

名称类型是否必选描述
typestringtrue元素类型,可选值为 'node''edge'
modelObjecttrue元素的数据模型,具体内容参见元素配置项
stackbooleanfalse操作是否入 undo & redo 栈,当实例化 Graph 时设置 enableStack 为 true 时,默认情况下会自动入栈,入栈以后,就支持 undo & redo 操作,如果不需要,则设置该参数为 false 即可

用法

const model = {
  id: 'node',
  label: 'node',
  address: 'cq',
  x: 200,
  y: 150,
  style: {
    fill: 'blue',
  },
};

graph.addItem('node', model);

graph.removeItem(item, stack)

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

参数

名称类型是否必选描述
itemstring / Objecttrue元素 ID 或元素实例
stackbooleanfalse操作是否入 undo & redo 栈,当实例化 Graph 时设置 enableStack 为 true 时,默认情况下会自动入栈,入栈以后,就支持 undo & redo 操作,如果不需要,则设置该参数为 false 即可

用法

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

// 该操作不会进入到 undo & redo 栈,即 redo & undo 操作会忽略该操作
graph.removeItem(item, false);

更新

graph.updateItem(item, model, stack)

更新元素,包括更新数据、样式等。若图上有 combo,使用该函数更新一个节点位置后,需要调用 updateCombo(combo) 以更新相关 combo 的位置。

参数

名称类型是否必选描述
itemstring / Objecttrue元素 ID 或元素实例
modelObjecttrue需要更新的数据模型,具体内容参见元素配置项
stackbooleanfalse操作是否入 undo & redo 栈,当实例化 Graph 时设置 enableStack 为 true 时,默认情况下会自动入栈,入栈以后,就支持 undo & redo 操作,如果不需要,则设置该参数为 false 即可

用法

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);

graph.refreshItem(item)

刷新指定元素。

参数

名称类型是否必选描述
itemstring / Objecttrue元素 ID 或元素实例

用法

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

graph.refreshPositions()

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

该方法无参数。

用法

graph.refreshPositions();

graph.updateCombos()

根据子元素(子节点与子 combo)的 bbox 更新所有 combos 的绘制,包括 combos 的位置和范围。

用法

// 更新所有 combos
graph.updateCombos();

graph.updateCombo(combo)

仅更新 combo 及其所有祖先 combo。建议在使用 graph.updateItem 来更新节点位置时,调用该方法以更新节点的祖先 combos。

参数

名称类型是否必选描述
combostring / ICombotrueCombo ID 或 Combo 实例

用法

// 更新了某个节点的位置
const node1 = graph.findById('node1');
graph.updateItem(node1, {
  x: 100,
  y: 100,
});
const comboId = node1.getModel().comboId;

// 更新 node1 所属的 combo 及其所有祖先 combo 的大小和位置
graph.updateCombo(comboId);

graph.updateComboTree(item, parentId)

更新 Combo 结构,例如移动子树等。

参数

名称类型是否必选描述
itemstring / INode / ICombotrue需要被更新的 Combo 或 节点 ID
parentIdstring / undefinedfalse新的父 combo ID,undefined 代表没有父 combo

用法

// 将 combo1 从父 combo 中移出,完成后同原父 combo 平级
graph.updateComboTree('combo1')

// 将 combo1 移动到 Combo2 下面,作为 Combo2 的子元素
graph.updateComboTree('combo1', 'combo2')

配置

graph.node(nodeFn)

设置各个节点样式及其他配置,以及在各个状态下节点的 KeyShape 的样式。

提示: 该方法必须在 render 之前调用,否则不起作用。

参数

名称类型是否必选描述
nodeFnFunctiontrue返回每个节点的配置

用法

graph.node((node) => {
  return {
    id: node.id,
    type: 'rect',
    style: {
      fill: 'blue',
    },
  };
});

graph.data(data);
graph.render();

graph.edge(edgeFn)

设置各个边样式及其他配置,以及在各个状态下节点的 KeyShape 的样式。

提示: 该方法必须在 render 之前调用,否则不起作用。

参数

名称类型是否必选描述
edgeFnFunctiontrue返回每条边的配置

用法

graph.edge((edge) => {
  return {
    id: edge.id,
    type: 'cubic-horizontal',
    style: {
      stroke: 'green',
    },
  };
});

graph.data(data);
graph.render();

graph.combo(comboFn)

设置各个 combo 样式及其他配置,以及在各个状态下节点的 KeyShape 的样式。

提示: 该方法必须在 render 之前调用,否则不起作用。

参数

名称类型是否必选描述
comboFnFunctiontrue返回每个 combo 的配置

用法

graph.combo((combo) => {
  return {
    id: combo.id,
    type: 'rect',
    style: {
      stroke: 'green',
    },
  };
});

graph.data(data);
graph.render();

显示/隐藏

graph.showItem(item, stack)

显示指定的元素。若 item 为节点,则相关边也会随之显示。而 item.show() 则将只显示自身。

参数

名称类型是否必选描述
itemstring / Objecttrue元素 ID 或元素实例
stackbooleanfalse操作是否入 undo & redo 栈,当实例化 Graph 时设置 enableStack 为 true 时,默认情况下会自动入栈,入栈以后,就支持 undo & redo 操作,如果不需要,则设置该参数为 false 即可

用法

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

// 等价于
graph.showItem('nodeId');

graph.hideItem(item, stack)

隐藏指定元素。若 item 为节点,则相关边也会随之隐藏。而 item.hide() 则将只隐藏自身。

参数

名称类型是否必选描述
itemstring / Objecttrue元素 ID 或元素实例
stackbooleanfalse操作是否入 undo & redo 栈,当实例化 Graph 时设置 enableStack 为 true 时,默认情况下会自动入栈,入栈以后,就支持 undo & redo 操作,如果不需要,则设置该参数为 false 即可

用法

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

// 等价于
graph.hideItem('nodeId');