Combo 配置项

id

一个 Combo 的唯一标识，必须是 string 类型，必须唯一。

parentId

该 Combo 的父 Combo 的 ID。

size

Combo 的最小大小，默认 'circle' 类型 Combo 的 size 为 20，'rect' 类型的为 [20, 5]。

padding

该 Combo 内边距。

style

该 Combo 的样式配置项，详见内置 Combo 配置文档。

label

该 Combo 的文本标签。

labelCfg

该 Combo 的文本标签样式配置项，详见内置 Combo 配置文档及各类型 Combo 的文档。

type

指定该 Combo 的类型，可以是内置 Combo 的类型名，也可以是自定义 Combo 的类型名。默认是 'circle'。

名称	描述	默认示例
circle	圆形： - size 是单个数字，表示直径 - 圆心位置对应 Combo 的位置 - color 字段默认在描边上生效 - 标签文本默认在 Combo 正上方 - 更多字段见 Circle Combo 教程 - Demo
rect	矩形： - size 是数组，例如：[100, 50] - 矩形的中心位置是 COmbo 的位置，而不是左上角 - color 字段默认在描边上生效 - 标签文本默认在 Combo 左上角 - 更多字段见 Rect Combo 教程 - Demo

内置 Combo 的特有属性

内置各个内置 Combo 的特有属性见 内置 Combo 目录下各文档。

元素通用方法

Item 是 F6 中绘图元素实例，目前包含节点和边的实例。对于实例的变更建议在 graph 上进行。

更新

item.update(model)

根据元素数据项，更新元素。

参数

其中参数 model 可包括以下属性，下面属性的详细描述参见 元素配置项：

用法

const model = {
  id: 'node',
  type: 'rect',
  label: 'node',
  style: {
    fill: 'red',
  },
};

item.update(model);

item.refresh()

刷新元素，包括更新元素位置，更新元素样式，清除之前的缓存。

一般在以下情况时，会刷新元素：

• item model 被改变；
• 边的位置发生改变，需要重新计算边。

用法

item.refresh();

item.updatePosition(cfg)

更新元素位置，避免整体重新绘制。

参数

用法

const cfg = {
  x: 100,
  y: 200,
};
// 由于 cfg 中存在 x 与 y，则下面操作将会使用 cfg 中的 x、y 坐标
item.updatePosition(cfg);

const cfg1 = {
  name: 'abc',
  dept: 'antv',
};
// 由于 cfg 中不存在 x 与 y，下面才做将会使用 item.getModel() 中的 x、y 坐标值
item.updatePosition(cfg1);

销毁

item.destroy()

销毁元素，主要包括停止动画、删除 group 中的所有元素、清空配置项、设置 destroyed 为 true 等操作。

用法

item.destroy();

通用

item.getBBox()

获取元素的包围盒。

返回值

• 返回值类型：Object。

返回值对象包括以下属性：

用法

item.getBBox();

item.getContainer()

获取元素的容器。

返回值

• 返回值类型：G.Group；
• 返回元素所在的 graphics group。

用法

// 获取元素的容器
const group = item.getContainer();

// 等价于
const group = item.get('group');

item.getKeyShape()

获取元素的关键形状，用于计算节点大小、连线截距等。

返回值

• 返回值类型：G.Shape；
• 返回元素的 keyShape。

用法

// 获取元素的 keyShape
const keyShape = item.getKeyShape();

// 等价于
const keyShape = item.get('keyShape');

item.getModel()

获取元素的数据模型。

返回值

• 返回值类型：Object；
• 返回元素的数据模型。

用法

// 获取元素的数据模型
const model = item.getModel();

// 等价于
const model = item.get('model');

item.getType()

获取元素的类型。

返回值

• 返回值类型：String；
• 返回元素的类型，可能是 'node' 或 'edge'。

用法

// 获取元素的类型
const type = item.getType();

// 等价于
const type = item.get('type');

item.enableCapture(enable)

是否拾取及触发该元素的交互事件。

参数

用法

// 不允许元素响应事件
item.enableCapture(false);

// 允许元素响应事件
item.enableCapture(true);

item.clearCache()

更新或刷新等操作后，清除缓存。

用法

// 清除缓存
item.clearCache();

状态

item.show()

显示元素。只显示 item 自身，若需要在显示节点的同时显示相关边，应调用 graph.showItem(item)。

用法

item.show();

item.hide()

隐藏元素。只隐藏 item 自身，若需要在隐藏节点的同时隐藏相关边，应调用 graph.hideItem(item)。

用法

item.hide();

item.changeVisibility(visible)

更改元素是否显示。

参数

用法

// 显示元素
item.changeVisibility(true);

// 隐藏元素
item.changeVisibility(false);

item.isVisible()

查询元素显示状态。

返回值

• 返回值类型：Boolean；
• 返回值为 true，则表示当前元素处于显示状态，否则处于隐藏状态。

用法

const visible = item.isVisible();

item.toFront()

将元素的层级设置到最上层，即当有元素重叠时，将元素置于顶层。

用法

item.toFront();

item.toBack()

将元素的层级设置到最下层，即当有元素重叠时，将元素置于底层。

用法

item.toBack();

item.setState(state, enable)

更新元素的状态。

参数

用法

item.setState('selected', true);
item.setState('actived', false);

item.clearStates(states)

清除指定的状态，如果不传 states ，则默认清除第一个状态。

参数

用法

// 清除 'selected' 状态
item.clearStates('selected');

// 清除 'active' 与 'hover' 状态
item.clearStates(['actived', 'hover']);

item.getStates()

获取当前元素的所有状态。

返回值

• 返回值类型：Array；
• 返回当前元素的所有状态，是一个字符串数组，数组中值表示元素的状态。

用法

// 获取元素的所有状态
const states = item.getStates();

item.hasState(state)

判断元素是否具有某种指定的状态。

参数

返回值

• 返回值类型：Boolean；
• 返回值表示是否具有指定的状态，如果返回 true，则说明元素有指定的状态，否则没有。

用法

// 获取元素的 'hover' 状态值
const state = item.hasState('hover');

样式

item.getStateStyle(state)

获取元素指定状态的样式，返回的样式会将全局样式、默认样式和元素自定义样式合并。

参数

返回值

• 返回值类型：Object；
• 返回的样式会将全局样式、默认样式和元素自定义样式合并。

用法

// 获取元素的指定状态的样式
const style = item.getStateStyle('selected');

item.getOriginStyle()

获取元素 keyShape 的样式。

返回值

• 返回值类型：Object | undefined；
• 如果存在 keyShape ，则返回 keyShape 的样式，否则返回 undefined 。

用法

const style = item.getOriginStyle();

item.getCurrentStatesStyle()

获取当前元素的所有状态的样式。

返回值

• 返回值类型：Object；
• 返回值表示当前元素所有状态的样式。

用法

const styles = item.getCurrentStatesStyle();

Node 实例用方法（Combo 继承 Node）

Node 继承自 Item。所以 Item 上面的方法在 Node 实例中都可以调用。本文仅介绍 Node 类的通用方法，内置节点见 内置节点文档 和 demo，自定义节点见 自定义节点文档 和 demo。

node.lock()

锁定当前节点，锁定节点后，该节点不再响应拖动节点的事件。

提示：锁定节点后，拖动画布和缩放画布的操作依然对该节点有效。如果想在锁定节点后，不响应拖动画布和缩放的事件，需要自定义拖动画布和缩放的 Behavior，具体可参考 锁定节点不响应拖动画布的事件 和 锁定节点不响应缩放事件。

用法

const node = graph.findById('node');
node.lock();

node.unlock()

解锁锁定的节点。

用法

const node = graph.findById('node');
node.unlock();

node.hasLocked()

检测节点是否处于锁定状态。

返回值

• 返回值类型：Boolean；
• 返回 true 表示当前解锁处于锁定状态，否则表示未锁定。

用法

const node = graph.findById('node');
const hasLocked = node.hasLocked();

node.getNeighbors(type)

参数

返回值

• 返回值类型：Array；
• 返回值符合要求的节点实例数组。

用法

const neighbors = node.getNeighbors('source');

node.getEdges()

获取与当前节点有关联的所有边。

返回值

• 返回值类型：Edge[]；
• 返回边实例的集合。

用法

// 获取与 node 关联的所有边
const edges = node.getEdges();

node.getInEdges()

获取与当前节点关联的所有入边。

返回值

• 返回值类型：Edge[]；
• 返回入边实例的集合。

用法

// 获取与 node 关联的所有入边
const edges = node.getInEdges();

node.getOutEdges()

获取与当前节点关联的所有出边。

返回值

• 返回值类型：Edge[]；
• 返回出边实例的集合。

用法

// 获取与 node 关联的所有出边
const edges = node.getOutEdges();

node.getAnchorPoints()

获取节点上面定义的锚点。

返回值

• 返回值类型：Array；
• 返回值的数据结构：

[
  (0: {
    x: 100,
    y: 105,
    index: 0,
  }),
  (1: {
    x: 200,
    y: 105,
    index: 1,
  }),
];

用法

// 获取定义在节点上的锚点数据
const anchor = node.getAnchorPoints();

node.getLinkPoint(point)

获取距离指定坐标最近的一个锚点。

参数

返回值

• 返回值类型：Object；
• 返回值表示连接点的坐标 (x, y)，如果没有合适的锚点和连接点，则返回中心点。

用法

const point = {
  x: 100,
  y: 105,
};
// 获取连接点
const linkPoint = node.getLinkPoint(point);

node.getLinkPointByAnchor(index)

根据锚点索引获取连接点的 x、y 坐标。

参数

返回值

• 返回值类型：Object；
• 返回值表示连接点的坐标 (x, y)。

用法

// 获取定义在节点上的第一个锚点
const anchor = node.getLinkPointByAnchor(0);

node.addEdge(edge)

添加指定的边到当前节点上。

参数

用法

const edge = new Edge({
  // TODO
});
node.addEdge(edge);

node.removeEdge(edge)

移除与当前节点相关的指定边。

参数

用法

const edge = graph.findById('edge1');
node.removeEdge(edge);

Combo 实例方法

Combo 继承自 Node，具有 Node 的所有特性。本文仅介绍 Combo 类的通用方法，内置节点见 内置 Combo 文档 和 demo，自定义节点见 自定义 Combo 文档 和 demo。

combo.getChildren()

获取 Combo 中所有的子元素，包括 Combo 和 Node。

返回值

• 返回值为子 node 和 combo 的集合：{ nodes: INode[], combos: ICombo[] }

用法

const elements = combo.getChildren();

###combo. getNodes()

获取 Combo 中所有子节点。

返回值

• 返回值类型为 INode[]。

###combo. getCombos()

获取 Combo 中所有子 combo。

返回值

• 返回值类型为 ICombo[]。

###combo. addChild(item: INode | ICombo)

向 Combo 中添加子 Node 或子 Combo。

参数

返回值

• 类型： boolean；
• 含义：返回 true 表示添加成功。

用法

const node = graph.findById('node1');

// 如果返回结果为 true，则说明添加成功
const result = combo.addChild(node);

###combo. addNode(node: string | INode)

向 combo 中添加节点。

参数

返回值

• 类型： boolean；
• 含义：返回 true 表示添加成功。

###combo. addCombo(combo: ICombo)

向 combo 中添加 combo。

参数

返回值

• 类型： boolean；
• 含义：返回 true 表示添加成功。

###combo. removeChild(item: ICombo | INode)

移除子元素（子节点或子 combo）。

参数

返回值

• 类型： boolean；
• 含义：返回 true 表示移除成功。

###combo. removeCombo(combo: ICombo)

移除指定的子 combo。注意：移除后 combo 不再属于该父 Combo，但没有被删除。需要删除 combo 请调用 graph.removeItem

参数

返回值

• 类型： boolean；
• 含义：返回 true 表示移除成功。

###combo. removeNode(node: INode)

移除指定的子 Node。注意：移除后该节点不再属于该 Combo，但没有被删除。需要删除节点请调用 graph.removeItem

参数

返回值

• 类型： boolean；
• 含义：返回 true 表示移除成功。