@logicflow/core 2.2.2 → 2.2.3-alpha.0

package/dist/docs/api/runtime-model/graphModel.zh.md

@@ -1,1153 +0,0 @@
----
-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();
-```