---
nav: API
group:
  title: 运行时 Model
  order: 3
title: graphModel
toc: content
order: 12
---

<style>
table td:first-of-type {
  word-break: normal;
}
</style>

graphModel 是 LogicFlow 中整个画布对应的 `model`。

LogicFlow 实例上的大多方法都是在 graphModel 上进行的简单封装。

可以通过以下几种方法获取到 graphModel

- 直接从 lf 属性中获取。`lf.graphModel`
- 自定义`model`的时候，从构造函数中获取，也可以在方法中从`this`中获取。

```tsx | pure
class CustomModel extends RectNodeModel {
  getNodeStyle() {
    const graphModel = this.graphModel
  }
}
```

- 自定义`view`的时候，从`props`中获取。

```tsx | pure
class CustomNode extends RectNode {
  getShape() {
    const { model, graphModel } = this.props
    // ...
  }
}
```

:::info{title=提示}
**注意**graphModel 上所有的属性都是只读，要想修改，请使用提供的对应方法进行修改。
:::

## 属性

| 属性                        | 类型                                          | 默认值 | 描述                                                                                             |
| :-------------------------- | :-------------------------------------------- | :----- | :----------------------------------------------------------------------------------------------- |
| width                       | `number`                                      |        | LogicFlow 画布宽度                                                                               |
| height                      | `number`                                      |        | LogicFlow 画布高度                                                                               |
| theme                       | `LogicFlow.Theme`                             |        | [详细 API](../logicflow-instance/theme.zh.md)                                                                       |
| animation                   | `boolean \| LFOptions.AnimationConfig`        | false  | 动画状态配置，是否已打开对应的动画                                                               |
| [eventCenter](#eventcenter) | `EventEmitter`                                |        | 事件中心, 可以通过这个对象向外部抛出事件                                                         |
| modelMap                    | `Map<string, BaseNodeModel \| BaseEdgeModel>` |        | 维护所有节点和边类型对应的 model                                                                 |
| [topElement](#topElement)   | `BaseNodeModel \| BaseEdgeModel`              |        | 位于当前画布顶部的元素                                                                           |
| idGenerator                 | `(type?: string) => string \| undefined`      |        | 自定义全局 id 生成器                                                                             |
| nodeMoveRules               | `Model.NodeMoveRule[]`                        | []     | 节点移动规则, 在节点移动的时候，会触发此数组中的所有规则判断                                     |
| customTrajectory            | `LFOptions.CustomAnchorLineProps`             |        | 获取自定义连线轨迹                                                                               |
| customTargetAnchor          | `LFOptions.customTargetAnchorType`            |        | 自定义锚点连接规则（手动连线落到节点时，决定使用哪个锚点）                                       |
| edgeGenerator               | `LFOptions.EdgeGeneratorType`                 |        | 节点间连线、连线变更时边的生成规则                                                               |
| edgeType                    | `string`                                      |        | 在图上操作创建边时，默认使用的边类型                                                             |
| nodes                       | `BaseNodeModel[]`                             | []     | 画布所有的节点对象                                                                               |
| edges                       | `BaseEdgeModel[]`                             | []     | 画布所有的连线对象                                                                               |
| fakeNode                    | `BaseNodeModel  \| null`                      | null   | 外部拖入节点进入画布的过程中，用 fakeNode 来和画布上正式的节点区分开                             |
| [overlapMode](#overlapmode) | `OverlapMode`                                 |        | 元素重合时堆叠模式；支持 静态模式: -1、默认模式(节点层级优先): 0、递增模式: 1、边层级优先模式: 2 |
| background                  | `false \| LFOptions.BackgroundConfig`         |        | 画布背景配置                                                                                     |
| transformModel              | `TransformModel`                              |        | 当前画布平移、缩放矩阵 `model`，API 见下文 [transformModel](#transformmodel) |
| editConfigModel             | `EditConfigModel`                             |        | 页面编辑基本配置对象，API 见下文 [editConfigModel](#editconfigmodel)；实例上的封装见 [编辑控制](../logicflow-instance/edit-config.zh.md) |
| gridSize                    | `number`                                      | 1      | 网格大小                                                                                         |
| partial                     | `boolean`                                     | false  | 是否开启局部渲染，当页面元素数量过多的时候，开启局部渲染会提高页面渲染性能                       |
| nodesMap                    | `GraphModel.NodesMapType`                     |        | 画布所有节点的构成的 `map`                                                                       |
| edgesMap                    | `GraphModel.EdgesMapType`                     |        | 画布所有边构成的 `map`                                                                           |
| modelsMap                   | `GraphModel.ModelsMapType`                    |        | 画布所有节点和边共同构成的 `map`                                                                 |
| selectNodes                 | `BaseNodeModel[]`                             |        | 画布中所有选中节点对象                                                                           |
| sortElements                | `array`                                       |        | 按照 zIndex 排序后的元素，基于zIndex对元素进行排序                                               |
| textEditElement             | `BaseNodeModel \| BaseEdgeModel`              |        | 当前被编辑的元素                                                                                 |
| selectElements              | `Map<string, BaseNodeModel \| BaseEdgeModel>` |        | 当前画布所有被选中的元素                                                                         |

### eventCenter<Badge>属性</Badge>

logicflow 内部的事件中心，可以通过这个对象向外部抛出事件。

示例

```tsx | pure
class UserTaskModel extends RectNodeModel {
  setAttributes() {
    this.menu = [
      {
        text: "详情",
        callback: (res) => {
          this.graphModel.eventCenter.emit("user:detail", res);
        },
      },
    ];
  }
}

// 监听
lf.on("user:detail", (res) => {});
```

### topElement<Badge>属性</Badge>

位于当前画布顶部的元素。<br>
此元素只在堆叠模式为默认模式下存在。
用于在默认模式下将之前的顶部元素恢复初始顺序。

### overlapMode<Badge>属性</Badge>

元素重合时堆叠模式<br>

- 值为 `-1`（STATIC）：选中不改变层级，`toFront` 无效；通过元素自身的 `zIndex` 控制顺序。
- 值为 `0`（DEFAULT）：节点始终位于边之上，渲染顺序为“先边后节点”。选中元素临时置顶，取消选中后恢复原有层级。
- 值为 `1`（INCREASE）：每次 `toFront` 都提升元素 zIndex，取消选中后仍保留提升的层级。
- 值为 `2`（EDGE_TOP）：边始终位于节点之上，渲染顺序为“先节点后边”。`toFront` 行为与默认模式一致（临时置顶，取消选中恢复）。

说明：只有在 `INCREASE` 与 `STATIC` 模式下，元素的 `zIndex` 才会持久化到图数据；`DEFAULT` 与 `EDGE_TOP` 模式下的层级由渲染时规则决定。

## transformModel

`graphModel.transformModel` 为 `TransformModel` 实例，控制画布的放大、缩小、平移。一般通过 `lf.graphModel.transformModel` 访问。

### zoom(zoomSize, point)

放大缩小画布。放大缩小的刻度是 `transformModel.ZOOM_SIZE`。

| 名称       | 类型                             | 默认值 | 说明                                                                                                                                            |
| ---------- | -------------------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| zoomSize   | `TransformModel.ZoomParamType`   | false  | 放大缩小的值，支持传入 0-n 之间的数字。小于 1 表示缩小，大于 1 表示放大。也支持传入 `true` 和 `false`，按内置刻度放大缩小 `number \| boolean` |
| point      | [`PointTuple`](../type/MainTypes.zh.md#pointtuple点坐标组) | 无     | 放大缩小基准点，可以理解为 transform-origin                                                                                                     |

```tsx | pure
const { transformModel } = lf.graphModel;
transformModel.zoom(true);
```

### resetZoom

重置 zoom。

```tsx | pure
const { transformModel } = lf.graphModel;
transformModel.resetZoom();
```

### translate(x, y)

移动画布。

| 名称 | 类型   | 默认值 | 说明          |
| ---- | ------ | ------ | ------------- |
| x    | number | 无     | 移动的 X 轴距离 |
| y    | number | 无     | 移动的 Y 轴距离 |

```tsx | pure
const { transformModel } = lf.graphModel;
transformModel.translate(100, 100);
```

### focusOn(targetX, targetY, width, height)

将图形移动到画布中心。

| 名称    | 类型   | 默认值 | 说明            |
| ------- | ------ | ------ | --------------- |
| targetX | number | 无     | 图形当前 x 坐标 |
| targetY | number | 无     | 图形当前 y 坐标 |
| width   | number | 无     | 画布宽          |
| height  | number | 无     | 画布高          |

```tsx | pure
const { transformModel, width, height } = lf.graphModel;
transformModel.focusOn(100, 100, width, height);
```

### HtmlPointToCanvasPoint <Badge>方法</Badge>

将 toolOverlay 点基于缩放转换为 canvasOverlay 层上的点。

参数:

| 名称  | 类型       | 必传 | 默认值 | 描述 |
| ----- | ---------- | ---- | ------ | ---- |
| point | PointTuple | true | 无     | 坐标 |

返回值: `PointTuple`

```js
const { transformModel } = lf.graphModel;
const point = transformModel.HtmlPointToCanvasPoint([100, 100]);
// 如果画布 x 轴平移了 +100，那么返回的值为 [0, 100]
```

### CanvasPointToHtmlPoint <Badge>方法</Badge>

将 canvasOverlay 层上的点基于缩放转换为 toolOverlay 上的点。

参数:

| 名称  | 类型       | 必传 | 默认值 | 描述 |
| ----- | ---------- | ---- | ------ | ---- |
| point | PointTuple | true | 无     | 坐标 |

返回值: `PointTuple`

```js
const { transformModel } = lf.graphModel;
const point = transformModel.CanvasPointToHtmlPoint([100, 100]);
// 如果画布 x 轴平移了 +100，那么返回的值为 [200, 100]
```

### updateTranslateLimits <Badge>方法</Badge>

更新画布可以移动范围。

入参：`limit: boolean | "vertical" | "horizontal" | [number, number, number, number]`

## editConfigModel

`graphModel.editConfigModel` 为 `EditConfigModel` 实例，维护画布编辑相关开关（缩放与滚轮、画布拖动、节点/边调整、锚点与选中外框、文本编辑与拖拽、多选键等）。一般通过 `lf.graphModel.editConfigModel` 访问。

LogicFlow 实例上的 `updateEditConfig`、`getEditConfig` 是对该 model 的封装，用法与示例见 [编辑控制](../logicflow-instance/edit-config.zh.md)。

各配置字段的含义与类型以 [IEditConfigType（编辑控制配置）](../type/MainTypes.zh.md#ieditconfigtype编辑控制配置) 为准；本节仅描述 `EditConfigModel` 上的方法。

### updateEditConfig(config)

按传入对象合并更新编辑配置。内部会经过 `computeConfig` 做静默模式、文本相关字段的联动合并。传入 `isSilentMode: true` 时会进入静默模式并暂存当前配置；传入 `isSilentMode: false` 时在退出静默模式时恢复暂存配置。

**签名**

```ts
updateEditConfig(config: Partial<IEditConfigType>): void
```

**参数**

| 名称   | 类型                         | 说明 |
| ------ | ---------------------------- | ---- |
| config | `Partial<IEditConfigType>` | 需要更新的键值，字段说明见类型字典 |

```ts
lf.graphModel.editConfigModel.updateEditConfig({ stopZoomGraph: true });
```

### getConfig()

返回当前生效的完整编辑配置（与 `IEditConfigType` 结构一致）。

**签名**

```ts
getConfig(): IEditConfigType
```

```ts
const cfg = lf.graphModel.editConfigModel.getConfig();
```

### updateTextMode(textMode)

更新全局 `textMode`，并同步节点、边的 `nodeTextMode` 与 `edgeTextMode`。

**签名**

```ts
updateTextMode(textMode: TextMode): void
```

**参数**

| 名称     | 类型       | 说明 |
| -------- | ---------- | ---- |
| textMode | `TextMode` | 文本模式，与构造选项中的 `textMode` 含义一致 |

```ts
import { TextMode } from '@logicflow/core';

lf.graphModel.editConfigModel.updateTextMode(TextMode.LABEL);
```

## 方法

### getAreaElement<Badge>方法</Badge>

获取指定区域内的所有元素

入参:

| 名称              | 类型       | 默认值 | 说明                       |
| ----------------- | ---------- | ------ | -------------------------- |
| leftTopPoint      | PointTuple | 无     | 区域左上方的点             |
| rightBottomPoint  | PointTuple | 无     | 区域右下角的点             |
| wholeEdge         | boolean    | 无     | 是否要整个边都在区域内部   |
| wholeNode         | boolean    | 无     | 是否要整个节点都在区域内部 |
| ignoreHideElement | boolean    | 无     | 是否忽略隐藏的节点         |

```tsx | pure
graphModel.getAreaElement([100, 100], [800, 800]);
```

### getModel<Badge>方法</Badge>

获取指定类型的 Model 构造函数

入参:

| 名称 | 类型   | 默认值 | 说明 |
| ---- | ------ | ------ | ---- |
| type | string | 无     | 类型 |

返回值: [NodeModel](./nodeModel.zh.md) 或 [EdgeModel](./edgeModel.zh.md)

```tsx | pure
graphModel.getModel("rect");
```

### getNodeModelById<Badge>方法</Badge>

根据节点 id 获取节点 model。

入参:

| 名称 | 类型   | 默认值 | 说明 |
| ---- | ------ | ------ | ---- |
| id   | string | 无     | 节点 id |

返回值: [NodeModel](./nodeModel.zh.md)

```tsx | pure
graphModel.getNodeModelById("node_1");
```

### getPointByClient<Badge>方法</Badge>

获取鼠标点击的位置在画布上的坐标

> 因为流程图所在的位置可以是页面任何地方,当内部事件需要获取触发事件时，其相对于画布左上角的位置需要事件触发位置减去画布相对于
> client 的位置。

入参:

| 名称  | 类型     | 默认值 | 说明      |
| ----- | -------- | ------ | --------- |
| point | Position | 无     | HTML 坐标 |

返回值:

| 名称                  | 类型     | 默认值 | 说明                                            |
| --------------------- | -------- | ------ | ----------------------------------------------- |
| domOverlayPosition    | Position | 无     | HTML 层坐标，一般控制组件的位置时使用此坐标     |
| canvasOverlayPosition | Position | 无     | Canvas 层坐标，一般节点、边的坐标是这一层的坐标 |

为什么要这个方法，为什么鼠标点击的同一个位置会产生两个不同的坐标？

因为画布存在缩放和平移。当移动了画布，在视觉上看起来，画布上的元素位置变了，但是在数据层面，画布上的节点和边位置是没有变化的。反过来举个例子：在一个宽高为
1000px \* 1000px 的画布中间有一个节点，这个节点的位置很可能是`{x: -999,y: -999}`,
因为平移过来的。但是当双击这个节点，我们需要在节点位置显示一个文本输入框的时候，因为输入框是在`domOverlay`
层，这一层不像`CanvasOverlay`
一样有缩放和平移，其宽高和画布宽高一致。所以这个文本输入框坐标应该是`{x: 500, y: 500}`。

我们再来看为什么要这个方法？

假设这个画布距离浏览器顶部距离为 100，左侧距离也为 100. 那么当用户点击画布中心的时候，js
监听点击函数拿到的位置应该是`{x: 600, y: 600}`,
这个时候调用这个方法，就可以得到 `canvasOverlayPosition` 为`{x: -999,y: -999}`，`domOverlayPosition`
为 `{x: 500, y: 500}`。开发者就可以基于这两个坐标进行自己需要的开发。比如在`domOverlayPosition`
位置显示一个菜单之类的。

```tsx | pure
graphModel.getPointByClient({ x: 200, y: 200 });
```

### isElementInArea<Badge>方法</Badge>

判断一个元素是否在指定矩形区域内。

入参:

| 名称      | 类型                   | 默认值 | 说明                         |
| --------- | ---------------------- | ------ | ---------------------------- |
| element   | NodeModel 或 EdgeModel | 无     | 元素的 model                 |
| lt        | PointTuple             | 无     | 左上角点                     |
| rb        | PointTuple             | 无     | 右下角点                     |
| wholeEdge | boolean                | true   | 边的起点和终点都在区域内才算 |
| wholeNode | boolean                | true   | 节点的box都在区域内才算      |

返回值: `boolean`

```tsx | pure
const node = {
  type: "rect",
  x: 300,
  y: 300,
};
graphModel.isElementInArea(node, [200, 200], [400, 400]);
```

### getAreaElements<Badge>方法</Badge>

获取指定区域内的所有元素

入参:

| 名称              | 类型       | 默认值 | 说明                         |
| ----------------- | ---------- | ------ | ---------------------------- |
| leftTopPoint      | PointTuple | 无     | 左上角点                     |
| rightBottomPoint  | PointTuple | 无     | 右下角点                     |
| ignoreHideElement | boolean    | false  | 忽略隐藏元素                 |
| wholeEdge         | boolean    | true   | 边的起点和终点都在区域内才算 |
| wholeNode         | boolean    | true   | 节点的box都在区域内才算      |

返回值: `LogicFlow.GraphElement[]`

### graphDataToModel<Badge>方法</Badge>

使用新的数据重新设置整个画布的元素

注意：将会清除画布上所有已有的节点和边

入参:

| 名称      | 类型            | 默认值 | 说明         |
| --------- | --------------- | ------ | ------------ |
| graphData | GraphConfigData | 无     | 图的基本数据 |

```tsx | pure
const graphData = {
  nodes: [
    {
      id: "node_id_1",
      type: "rect",
      x: 100,
      y: 100,
      text: { x: 100, y: 100, value: "节点1" },
      properties: {},
    },
    {
      id: "node_id_2",
      type: "circle",
      x: 200,
      y: 300,
      text: { x: 200, y: 300, value: "节点2" },
      properties: {},
    },
  ],
  edges: [
    {
      id: "edge_id",
      type: "polyline",
      sourceNodeId: "node_id_1",
      targetNodeId: "node_id_2",
      text: { x: 139, y: 200, value: "连线" },
      startPoint: { x: 100, y: 140 },
      endPoint: { x: 200, y: 250 },
      pointsList: [
        { x: 100, y: 140 },
        { x: 100, y: 200 },
        { x: 200, y: 200 },
        { x: 200, y: 250 },
      ],
      properties: {},
    },
  ],
};

graphModel.graphDataToModel(graphData);
```

### modelToGraphData<Badge>方法</Badge>

获取 graphModel 对应的原始数据

返回值: `GraphConfigData`

```tsx | pure
const graphData = graphModel.modelToGraphData();
console.log(graphData)
```

### modelToHistoryData<Badge>方法</Badge>

获取 history 记录的数据

返回值：false | HistoryData

```tsx | pure
const historyData = graphModel.modelToHistoryData();
console.log(historyData)
```

### getEdgeModelById<Badge>方法</Badge>

获取边的 Model

入参:

| 名称   | 类型   | 默认值 | 说明  |
| ------ | ------ | ------ | ----- |
| edgeId | string | 无     | 边 Id |

返回值: [EdgeModel](./edgeModel.zh.md)

```tsx | pure
const edgeModel = graphModel.getEdgeModelById('edge_id');
console.log(edgeModel)
```

### getElement<Badge>方法</Badge>

获取节点或者边的 Model

入参:

| 名称 | 类型   | 默认值 | 说明              |
| ---- | ------ | ------ | ----------------- |
| id   | string | 无     | 边 Id 或者节点 Id |

返回值: [EdgeModel](./edgeModel.zh.md) 或者 [NodeModel](nodeModel.zh.md)

```tsx | pure
const edgeModel = graphModel.getElement('edge_id');
console.log(edgeModel)
```

### getNodeEdges<Badge>方法</Badge>

获取指定节点上所有的边

入参:

| 名称   | 类型   | 默认值 | 说明    |
| ------ | ------ | ------ | ------- |
| nodeId | string | 无     | 节点 Id |

返回值: [EdgeModel](./edgeModel.zh.md)

```tsx | pure
const edgeModels = graphModel.getNodeEdges('node_id_1');
console.log(edgeModels)
```

### getSelectElements<Badge>方法</Badge>

获取选中的元素数据

入参:

| 名称          | 类型    | 默认值 | 说明                                                                                                               |
| ------------- | ------- | ------ | ------------------------------------------------------------------------------------------------------------------ |
| isIgnoreCheck | boolean | true   | 是否包括 sourceNode 和 targetNode 没有被选中的边,默认包括。 复制的时候不能包括此类边, 因为复制的时候不允许悬空的边 |

```tsx | pure
const elements = graphModel.getSelectElements(true);
console.log(elements)
```

### updateAttributes<Badge>方法</Badge>

修改对应元素 model 中的属性

:::warning{title=警告}
注意：此方法慎用，除非您对 logicflow 内部有足够的了解。<br>
大多数情况下，请使用 setProperties、updateText、changeNodeId 等方法。<br>
例如:直接使用此方法修改节点的 id,那么就是会导致连接到此节点的边的 sourceNodeId 出现找不到的情况。
:::

入参:

| 名称       | 类型   | 默认值 | 说明     |
| ---------- | ------ | ------ | -------- |
| id         | string | 无     | 节点 Id  |
| attributes | object | 无     | 元素属性 |

```tsx | pure
graphModel.updateAttributes("node_id_1", {
  radius: 4,
});
```

### getVirtualRectSize<Badge>方法</Badge>

获取图形区域虚拟矩形的大小及其中心位置

参数 `includeEdge: boolean = false`
返回值 `GraphModel.VirtualRectProps`

```tsx | pure
const virtualdata = graphModel.getVirtualRectSize();
console.log(virtualdata);
// virtualdata输出内容 : { width, height, x, y }
```

### changeNodeId<Badge>方法</Badge>

修改节点的 id， 如果不传新的 id，会内部自动创建一个。

入参:

| 名称  | 类型   | 默认值 | 说明    |
| ----- | ------ | ------ | ------- |
| oldId | string | 无     | 节点 Id |
| newId | string | 无     | 新的 Id |

```tsx | pure
graphModel.changeNodeId("node_id_1", "node_id_2");
```

### changeEdgeId<Badge>方法</Badge>

修改边的 id， 如果不传新的 id，会内部自动创建一个。

入参:

| 名称  | 类型   | 默认值 | 说明    |
| ----- | ------ | ------ | ------- |
| oldId | string | 无     | 节点 Id |
| newId | string | 无     | 新的 Id |

```tsx | pure
graphModel.changeEdgeId("edge_id_1", "edge_id_2");
```

### handleEdgeTextMove<Badge>方法</Badge>

移动边上的 Text

入参:

| 名称 | 类型          | 默认值 | 说明       |
| ---- | ------------- | ------ | ---------- |
| edge | BaseEdgeModel | 无     | 边 model   |
| x    | number        | 无     | x 轴坐标值 |
| y    | number        | 无     | y 轴坐标值 |

### toFront<Badge>方法</Badge>

将指定节点或者边放置在前面

在默认模式（以及 `EDGE_TOP` 模式）下，指定元素会被临时置顶（zIndex 设为较高值），当取消选中时恢复原有层级。

在递增模式下，指定元素的 zIndex 会提升到当前最大值 + 1，并在取消选中后仍保留提升的层级。

在静态模式下，此方法不生效。

入参:

| 名称 | 类型   | 默认值 | 说明            |
| ---- | ------ | ------ | --------------- |
| id   | string | 无     | 节点 id 或边 id |

```tsx | pure
graphModel.toFront("edge_id_1");
```

### setElementZIndex<Badge>方法</Badge>

设置元素的 zIndex.

注意：默认堆叠模式下，不建议使用此方法。

入参:

| 名称   | 类型                    | 默认值 | 说明                                    |
| ------ | ----------------------- | ------ | --------------------------------------- |
| id     | string                  | 无     | 节点 id 或边 id                         |
| zIndex | number\|'top'\|'bottom' | 无     | 可以传数字，也支持传入`top` 和 `bottom` |

```tsx | pure
graphModel.setElementZIndex("top");
```

### setElementStateById<Badge>方法</Badge>

设置元素的状态（在需要保证整个画布上所有的元素只有一个元素拥有某状态时，可以调用此方法）

入参:

| 名称              | 类型                          | 必传 | 默认值 | 说明                              |
| ----------------- | ----------------------------- | ---- | ------ | --------------------------------- |
| id                | string                        | ✅    | 无     | 节点 id 或边 id                   |
| state             | [`ElementState`](../type/MainTypes.zh.md#elementstate元素状态) | ✅    | 无     | 设置 Node \| Edge 等 model 的状态 |
| additionStateData | `Model.AdditionStateDataType` | -    | 无     | 传递的额外值                      |

使用：

```tsx | pure
graphModel.setElementStateById("node_1", 4);
```

### deleteNode<Badge>方法</Badge>

删除节点

入参:

| 名称 | 类型   | 默认值 | 说明    |
| ---- | ------ | ------ | ------- |
| id   | string | 无     | 节点 ID |

```tsx | pure
graphModel.deleteNode("node_1");
```

### addNode<Badge>方法</Badge>

添加节点

入参:

| 名称       | 类型       | 默认值 | 说明     |
| ---------- | ---------- | ------ | -------- |
| nodeConfig | NodeConfig | 无     | 节点配置 |

```tsx | pure
const nodeModel = graphModel.addNode({
  type: "rect",
  x: 300,
  y: 300,
});
```

### cloneNode<Badge>方法</Badge>

克隆节点

入参:

| 名称   | 类型   | 默认值 | 说明    |
| ------ | ------ | ------ | ------- |
| nodeId | string | 无     | 节点 id |

```tsx | pure
const nodeModel = graphModel.cloneNode("node_1");
```

### moveNode<Badge>方法</Badge>

移动节点

入参:

| 名称         | 类型    | 默认值 | 说明                 |
| ------------ | ------- | ------ | -------------------- |
| nodeId       | string  | 无     | 节点 id              |
| deltaX       | number  | 无     | 移动 x 轴距离        |
| deltaY       | number  | 无     | 移动 y 轴距离        |
| isIgnoreRule | boolean | false  | 是否忽略移动规则限制 |

```tsx | pure
graphModel.moveNode("node_1", 10, 10, true);
```

### moveNode2Coordinate<Badge>方法</Badge>

移动节点-绝对位置

入参:

| 名称         | 类型    | 默认值 | 说明                 |
| ------------ | ------- | ------ | -------------------- |
| nodeId       | string  | 无     | 节点 id              |
| x            | number  | 无     | 目标 x 坐标          |
| y            | number  | 无     | 目标 y 坐标          |
| isIgnoreRule | boolean | false  | 是否忽略移动规则限制 |

```tsx | pure
graphModel.moveNode2Coordinate("node_1", 100, 100, true);
```

### editText<Badge>方法</Badge>

显示节点、连线文本编辑框, 进入编辑状态

入参:

| 名称 | 类型   | 默认值 | 说明              |
| ---- | ------ | ------ | ----------------- |
| id   | string | 无     | 节点 id 或者边 id |

```tsx | pure
graphModel.editText("node_1");
```

:::info{title=注意}
当初始化 lf 实例的时候，传入的设置了文本不可编辑，这个时候 LogicFlow 内部不会监听事件去取消元素的编辑状态。这个时候需要自己手动监听,
然后使用`setElementState`方法取消文本编辑状态。
:::

### setElementState<Badge>方法</Badge>

设置元素的状态

入参:

| 名称 | 类型   | 默认值 | 说明                                                                           |
| ---- | ------ | ------ | ------------------------------------------------------------------------------ |
| type | number | 无     | 1 表示默认状态；2 表示文本编辑中；4 表示节点允许作为当前边的目标节点；5 表示节点不允许作为当前边的目标节点 |

例如在某些场景中，节点和连线都默认不允许编辑的。但是当某些操作后，就允许编辑了，这个时候可以通过此方法将元素从编辑状态设置为不可以编辑状态。

```tsx | pure
lf.on("node:dbclick", ({ data }) => {
  lf.graphModel.editText(data.id);
  lf.once("graph:transform,node:click,blank:click", () => {
    lf.graphModel.textEditElement.setElementState(1);
  });
});
```

### addEdge<Badge>方法</Badge>

添加边

入参:

| 名称       | 类型       | 默认值 | 说明   |
| ---------- | ---------- | ------ | ------ |
| edgeConfig | EdgeConfig | 无     | 边配置 |

```tsx | pure
const edgeModel = graphModel.addEdge({
  type: "polyline",
  sourceNodeId: "node_1",
  targetNodeId: "node_2",
});
```

### deleteEdgeBySourceAndTarget<Badge>方法</Badge>

删除边

入参:

| 名称         | 类型   | 默认值 | 说明        |
| ------------ | ------ | ------ | ----------- |
| sourceNodeId | string | 无     | 起点 id     |
| targetNodeId | string | 无     | 结束节点 ID |

```tsx | pure
graphModel.deleteEdgeBySourceAndTarget("node_1", "node_2");
```

### deleteEdgeById<Badge>方法</Badge>

基于边 Id 删除边

入参:

| 名称 | 类型   | 默认值 | 说明  |
| ---- | ------ | ------ | ----- |
| id   | string | 无     | 边 id |

```tsx | pure
graphModel.deleteEdgeById("edge_1");
```

### deleteEdgeBySource<Badge>方法</Badge>

删除指定节点为起点的所有边

入参:

| 名称 | 类型   | 默认值 | 说明      |
| ---- | ------ | ------ | --------- |
| id   | string | 无     | 边起点 id |

```tsx | pure
graphModel.deleteEdgeBySource("node_1");
```

### deleteEdgeByTarget<Badge>方法</Badge>

删除指定节点为目标点的所有边

入参:

| 名称 | 类型   | 默认值 | 说明        |
| ---- | ------ | ------ | ----------- |
| id   | string | 无     | 边目的点 id |

```tsx | pure
graphModel.deleteEdgeByTarget("node_1");
```

### updateText<Badge>方法</Badge>

设置指定元素的文案

```tsx | pure
graphModel.updateText("node_1", "hello world");
```

### selectNodeById<Badge>方法</Badge>

选中节点

入参:

| 名称     | 类型    | 默认值 | 说明     |
| -------- | ------- | ------ | -------- |
| id       | string  | 无     | 节点 id  |
| multiple | boolean | 无     | 是否多选 |

```tsx | pure
graphModel.selectNodeById("node_1", true);
```

### selectEdgeById<Badge>方法</Badge>

选中边

入参:

| 名称     | 类型    | 默认值 | 说明     |
| -------- | ------- | ------ | -------- |
| id       | string  | 无     | 节点 id  |
| multiple | boolean | 无     | 是否多选 |

```tsx | pure
graphModel.selectEdgeById("edge_1", true);
```

### selectElementById<Badge>方法</Badge>

选中节点和边

入参:

| 名称     | 类型    | 默认值 | 说明        |
| -------- | ------- | ------ | ----------- |
| id       | string  | 无     | 节点或边 id |
| multiple | boolean | 无     | 是否多选    |

```tsx | pure
graphModel.selectElementById("edge_1", true);
```

### clearSelectElements<Badge>方法</Badge>

取消所有被选中元素的选中状态

```tsx | pure
graphModel.clearSelectElements();
```

### moveNodes<Badge>方法</Badge>

批量移动节点，节点移动的时候，会动态计算所有节点与未移动节点的边位置

移动的节点之间的边会保持相对位置

参数

| 名称    | 类型     | 必传 | 默认值 | 描述            |
| :------ | :------- | :--- | :----- | :-------------- |
| nodeIds | string[] | ✅    | 无     | 所有节点 id     |
| deltaX  | number   | ✅    | 无     | 移动的 x 轴距离 |
| deltaY  | number   | ✅    | 无     | 移动的 y 轴距离 |

```tsx | pure
graphModel.moveNodes(["node_id", "node_2"], 10, 10);
```

### addNodeMoveRules<Badge>方法</Badge>

添加节点移动限制规则，在节点移动的时候触发。

如果方法返回 false, 则会阻止节点移动。

```tsx | pure
graphModel.addNodeMoveRules((nodeModel, x, y) => {
  if (nodeModel.properties.disabled) {
    return false;
  }
  return true;
});
```

### getNodeIncomingNode<Badge>方法</Badge>

获取节点所有的上一级节点

```tsx | pure
graphModel.getNodeIncomingNode = (nodeId: string): BaseNodeModel[] => {}
```

参数：

| 名称   | 类型   | 必传 | 默认值 | 描述    |
| :----- | :----- | :--- | :----- | :------ |
| nodeId | string | ✅    | -      | 节点 id |

### getNodeOutgoingNode<Badge>方法</Badge>

获取节点所有的下一级节点

```tsx | pure
graphModel.getNodeOutgoingNode = (nodeId: string): BaseNodeModel[] => {}
```

参数：

| 名称   | 类型   | 必传 | 默认值 | 描述    |
| :----- | :----- | :--- | :----- | :------ |
| nodeId | string | ✅    | -      | 节点 id |

### getNodeIncomingEdge<Badge>方法</Badge>

获取所有以此节点为终点的边

```tsx | pure
graphModel.getNodeIncomingEdge = (nodeId: string): BaseEdgeModel[] => {}
```

参数：

| 名称   | 类型   | 必传 | 默认值 | 描述    |
| :----- | :----- | :--- | :----- | :------ |
| nodeId | string | ✅    | -      | 节点 id |

### getNodeOutgoingEdge<Badge>方法</Badge>

获取所有以此节点为起点的边

```tsx | pure
graphModel.getNodeOutgoingEdge = (nodeId: string): BaseEdgeModel[] => {}
```

参数：

| 名称   | 类型   | 必传 | 默认值 | 描述    |
| :----- | :----- | :--- | :----- | :------ |
| nodeId | string | ✅    | -      | 节点 id |

### setDefaultEdgeType<Badge>方法</Badge>

修改默认边的类型

参数

| 名称 | 类型   | 必传 | 默认值 | 描述   |
| :--- | :----- | :--- | :----- | :----- |
| type | string | ✅    | 无     | 边类型 |

```tsx | pure
graphModel.setDefaultEdgeType("bezier");
```

### changeNodeType<Badge>方法</Badge>

修改指定节点的类型

参数

| 名称 | 类型   | 必传 | 默认值 | 描述     |
| :--- | :----- | :--- | :----- | :------- |
| id   | string | ✅    | 无     | 节点     |
| type | string | ✅    | 无     | 节点类型 |

```tsx | pure
graphModel.changeNodeType("node_1", "circle");
```

### changeEdgeType<Badge>方法</Badge>

修改指定边的类型

参数

| 名称 | 类型   | 必传 | 默认值 | 描述   |
| :--- | :----- | :--- | :----- | :----- |
| id   | string | ✅    | 无     | 节点   |
| type | string | ✅    | 无     | 边类型 |

```tsx | pure
graphModel.changeEdgeType("edge_1", "bezier");
```

### openEdgeAnimation<Badge>方法</Badge>

开启边动画开关

参数 edgeId: string

```tsx | pure
graphModel.openEdgeAnimation("edge_1");
```

### closeEdgeAnimation<Badge>方法</Badge>

关闭边动画开关

参数 edgeId: string

```tsx | pure
graphModel.closeEdgeAnimation("edge_1");
```

### setTheme<Badge>方法</Badge>

设置主题

```tsx | pure
graphModel.setTheme({
  rect: {
    fill: "red",
  },
});
```

### resize<Badge>方法</Badge>

重新设置画布的宽高

```tsx | pure
graphModel.resize(1000, 600);
```

### clearData<Badge>方法</Badge>

清空画布所有元素

```tsx | pure
graphModel.clearData();
```

### translateCenter<Badge>方法</Badge>

将图像整体移动到画布中心

```tsx | pure
graphModel.translateCenter();
```

### fitView<Badge>方法</Badge>

画布图形适应屏幕大小

参数
| 名称             | 类型   | 必传 | 默认值 | 描述               |
| :--------------- | :----- | :--- | :----- | :----------------- |
| verticalOffset   | number | -    | 20     | 距离盒子上下的距离 |
| horizontalOffset | number | -    | 20     | 距离盒子左右的距离 |

```tsx | pure
graphModel.fitView();
```