Free Layout Demo [查看在线演示](/examples/free-layout/free-layout-simple.html)
Fixed Layout Demo [查看在线演示](/examples/fixed-layout/fixed-layout-simple.html)
Free Layout Demo Simple [查看在线演示](/examples/free-layout/free-layout-simple.html)
Fixed Layout Demo Simple [查看在线演示](/examples/fixed-layout/fixed-layout-simple.html)
3. 查看安装的目录名称
- 使用 Free Layout Demo 模板创建的项目，目录名称为 `demo-free-layout`
- 使用 Free Layout Demo Simple 模板创建的项目，目录名称为 `demo-free-layout-simple`
- 使用 Fixed Layout Demo 模板创建的项目，目录名称为 `demo-fixed-layout`
- 使用 Fixed Layout Demo Simple 模板创建的项目，目录名称为 `demo-fixed-layout-simple`
4. 进入项目目录
```sh
cd [project-name]
```
5. 安装依赖
name="title">` 渲染标题字段。
3. 初始化数据与渲染
- 在 `initial-data.ts` 中，为每个节点设置 `data.title`（如 `Start Node`、`Custom Node A/B/C`、`End Node`）。
- `NodeRender` 中的 `form?.render()` 会将表单内容渲染进节点外壳，展示各节点的标题。
> 预期效果:
>
> • 画布包含 `start`、多个 `custom` 与 `end` 节点，连接关系与初始数据一致。
>
> • 每个节点显示其 `title`；选中节点时可扩展为展示更多表单字段与交互。
>
> • 撤销/重做快捷键可用，可通过删除、移动节点操作进行验证。
## Step.7 - 创建工具栏
1. 引入工具栏组件
- 在 `App.tsx` 中引入 ``，与 `` 同级放置于 `FreeLayoutEditorProvider` 内，使其能够访问编辑器上下文与工具方法。
2. 通过工具方法操控画布
- 使用 `usePlaygroundTools()` 获取画布操作方法：`zoomin/zoomout`、`fitView`、`autoLayout`、`switchLineType` 等。
- 切换连线样式：通过 `switchLineType` 在 `LineType.BEZIER`（贝塞尔）与 `LineType.LINE_CHART`（折线）之间切换。
- 实时显示缩放比例：读取 `tools.zoom`，展示当前画布缩放百分比。
3. 接入撤销/重做状态
- 使用 `useClientContext()` 获取 `history`，并监听 `history.undoRedoService.onChange` 更新 `canUndo/canRedo` 按钮状态。
- 在 `use-editor-props.tsx` 中确保开启历史：`history.enable = true` 与 `history.enableChangeNode = true`，使撤销/重做对节点数据变化生效。
5. 扩展组件（可选）
- Minimap：通过自定义 `MinimapRender` 容器样式将缩略图固定在右下角，提升定位效率。
- AddNode：提供快速新增节点按钮，通过 `WorkflowDocument.createWorkflowNodeByType` 在画布中心创建并选中节点。
> 预期效果:
>
> • 页面右下角出现工具栏，支持 ZoomIn/ZoomOut、FitView、AutoLayout 等常用操作，实时显示缩放比例。
>
> • 可切换连线样式（贝塞尔/折线），撤销/重做按钮会随历史状态自动启用/禁用。
>
> • 搭配 Minimap 与 AddNode 组件，形成完整的编辑工具区，操作更高效。
## Step.8 - 了解更多
了解更多自由布局用法：
- [加载与保存](/guide/free-layout/load)
- [节点](/guide/free-layout/node)
- [线条](/guide/free-layout/line)
- [端口](/guide/free-layout/port)
- [子画布](/guide/free-layout/sub-canvas)
了解 FlowGram.AI 更多功能：
- [表单](/guide/form/form)
- [变量](/guide/variable/basic)
- [物料](/materials/introduction)
- [运行时](/guide/runtime/introduction)
---
url: /guide/getting-started/fixed-layout.md
---
# 固定布局
import {
PackageManagerTabs
// @ts-ignore
} from '@theme';
import { FixedLayoutCodePreview } from '@components/code-preview';
import step1 from '@components/fixed-examples/step-1.tsx?raw';
import step2 from '@components/fixed-examples/step-2.tsx?raw';
import step3 from '@components/fixed-examples/step-3.tsx?raw';
import step4 from '@components/fixed-examples/step-4.tsx?raw';
import step5App from '@components/fixed-examples/step-5/app.tsx?raw';
import step5UseEditorProps from '@components/fixed-examples/step-5/use-editor-props.tsx?raw';
import step5InitialData from '@components/fixed-examples/step-5/initial-data.ts?raw';
import step5NodeRegistries from '@components/fixed-examples/step-5/node-registries.tsx?raw';
import step5NodeRender from '@components/fixed-examples/step-5/node-render.tsx?raw';
import step5Adder from '@components/fixed-examples/step-5/adder.tsx?raw';
import step6App from '@components/fixed-examples/step-6/app.tsx?raw';
import step6UseEditorProps from '@components/fixed-examples/step-6/use-editor-props.tsx?raw';
import step6InitialData from '@components/fixed-examples/step-6/initial-data.ts?raw';
import step6NodeRegistries from '@components/fixed-examples/step-6/node-registries.tsx?raw';
import step6NodeRender from '@components/fixed-examples/step-6/node-render.tsx?raw';
import step6Adder from '@components/fixed-examples/step-6/adder.tsx?raw';
import step7App from '@components/fixed-examples/step-7/app.tsx?raw';
import step7UseEditorProps from '@components/fixed-examples/step-7/use-editor-props.tsx?raw';
import step7InitialData from '@components/fixed-examples/step-7/initial-data.ts?raw';
import step7NodeRegistries from '@components/fixed-examples/step-7/node-registries.tsx?raw';
import step7NodeRender from '@components/fixed-examples/step-7/node-render.tsx?raw';
import step7Adder from '@components/fixed-examples/step-7/adder.tsx?raw';
import step7Tools from '@components/fixed-examples/step-7/tools.tsx?raw';
import step7Minimap from '@components/fixed-examples/step-7/minimap.tsx?raw';
## Step.0 - 安装依赖
1. 安装编辑器包
2. 安装 styled-components（若尚未安装）
## Step.1 - 引入画布组件
1. 引入样式文件，确保基础样式生效：
```tsx
import '@flowgram.ai/fixed-layout-editor/index.css';
```
2. 使用 `FixedLayoutEditorProvider` 提供编辑器上下文，`EditorRenderer` 负责渲染画布；并通过 `materials.components` 引入默认的固定布局 Semi 组件集：
```tsx
const FlowGramApp = () => (
);
```
3. 其余文件保持默认导出即可。
> 预期效果：页面加载后仅展示一个空白画布，无任何节点或连线。
## Step.2 - 实现节点组件
1. 导入节点渲染相关 API：
- `useNodeRender`：获取节点上下文（如拖拽、悬停、高亮、表单等）。
- `FlowNodeEntity`：节点实体类型，用于声明 `NodeRender` 的 props。
2. 创建 `NodeRender` 组件，自定义节点尺寸与样式，并接入拖拽与表单渲染：
```tsx
import { useNodeRender, FlowNodeEntity } from '@flowgram.ai/fixed-layout-editor';
export const NodeRender = ({ node }: { node: FlowNodeEntity }) => {
const { onMouseEnter, onMouseLeave, startDrag, form, dragging, activated } = useNodeRender();
return (
{ startDrag(e); e.stopPropagation(); }}
style={{ width: 280, minHeight: 88, background: '#fff', borderRadius: 8, opacity: dragging ? 0.3 : 1, /* ... */ }}
>
{form?.render()}
);
};
```
3. 在 `FixedLayoutEditorProvider` 中注册：
- `materials.renderDefaultNode` 指定默认节点渲染器为 `NodeRender`。
- `nodeRegistries` 声明可用节点类型（示例为 `custom`）。
- `initialData` 提供一个初始节点，类型为 `custom`。
> 预期效果：画布中出现一个可拖拽的自定义样式节点。
## Step.3 - 自定义添加节点组件与删除节点按钮
1. 为节点添加删除按钮
- 在 `NodeRender` 中通过 `useClientContext()` 获取 `ctx`，点击按钮调用 `ctx.operation.deleteNode(node)` 删除当前节点。
- 注意阻止事件冒泡：`e.stopPropagation()`，避免干扰画布的选择/拖拽行为。
```tsx
const ctx = useClientContext();
```
2. 自定义添加节点组件 `Adder`
- 使用 `useService(FlowOperationService)` 与 `usePlayground()` 封装 `handleAdd` 方法：在指定节点之后插入一个新节点，并滚动到视图中心。
- 基于 `hoverActivated` 切换 UI：悬停时显示加号与更大的点击区域；只读模式下不显示。
```tsx
const { handleAdd } = useAddNode();
const Adder = ({ from, hoverActivated }) => (
handleAdd({ type: 'custom', id: `custom_${Date.now()}` }, from)}>
{hoverActivated ? + : null}
);
```
3. 在 `materials.components` 中注册 `Adder`
- 通过 `FlowRendererKey.ADDER` 覆盖默认的“添加节点”渲染器。
```tsx
materials={{
renderDefaultNode: NodeRender,
components: { ...defaultFixedSemiMaterials, [FlowRendererKey.ADDER]: Adder },
}}
```
4. 初始化数据与视图适配
- `initialData` 提供基础流程：`start -> custom -> end`。
- 在 `onAllLayersRendered` 中调用 `fitView`，让画布自动适配内容：
```tsx
onAllLayersRendered={(ctx) => {
setTimeout(() => {
ctx.playground.config.fitView(ctx.document.root.bounds.pad(30));
}, 10);
}}
```
> 预期效果：
>
> • 画布展示一个由 `start`、`custom`、`end` 组成的基础流程，视图自动居中/缩放到合适范围。
>
> • 鼠标悬停到可添加位置时出现圆形加号按钮，点击即可在当前节点之后新增一个 `custom` 节点，并自动滚动到新节点。
>
> • 每个节点右上角显示“×”删除按钮，点击可删除该节点（只读模式下隐藏添加组件）。
## Step.4 - 引入插件
:::info
- `@flowgram.ai/minimap-plugin`：迷你地图插件，提供画布的小地图视图。
:::
1. 安装插件依赖
2. 从对应包导入插件创建函数：
- `createMinimapPlugin` 用于生成画布缩略图。
3. 在 `FixedLayoutEditorProvider` 的 `plugins` 属性中注册插件：
```tsx
plugins={() => [
createMinimapPlugin({
enableDisplayAllNodes: true,
})
]}
```
> 预期效果:
>
> • 画布右上角出现可拖拽/缩放的迷你地图，点击或拖拽缩略图可快速定位主画布。
>
> • 启用 `enableDisplayAllNodes: true` 后，迷你地图会显示所有节点，方便在流程较长时快速导航。
## Step.5 - 拆分文件
为避免单个文件代码行数过长，我们需要将原本集中在一个组件中的编辑器配置、节点渲染、初始化数据等拆分为独立文件，便于维护、复用与协作。
```sh
- use-editor-props.tsx # 画布配置（集中管理 Provider 的 props）
- node-render.tsx # 节点渲染（含删除按钮）
- initial-data.ts # 初始化数据（start/custom/end）
- node-registries.tsx # 节点注册（示例仅注册 'custom'）
- adder.tsx # 自定义添加节点组件（点击新增 custom 节点）
- App.tsx # 画布入口（挂载 EditorRenderer）
```
文件职责说明
- `use-editor-props.tsx`：集中管理 FixedLayoutEditorProvider 的所有 props（插件、视图适配、材料、节点注册与初始数据）：
- `plugins`：注册迷你地图插件 `createMinimapPlugin({ enableDisplayAllNodes: true })`。
- `onAllLayersRendered`：渲染完成后调用 `fitView`，让画布自动适配内容。
- `materials`：
- `renderDefaultNode` 指定默认节点渲染器为 `NodeRender`。
- `components` 合并 `defaultFixedSemiMaterials`，并用 `[FlowRendererKey.ADDER]: Adder` 覆盖默认添加器。
- `nodeRegistries` 与 `initialData` 分别来自独立文件。
- `node-render.tsx`：定义自定义节点渲染器 `NodeRender`，设置节点外观并通过 `form?.render()` 渲染内部表单；同时在右上角提供“×”删除按钮（`useClientContext().operation.deleteNode(node)`）。
- `initial-data.ts`：提供基础流程的初始数据，包含 `start -> custom -> end` 三个节点。
- `node-registries.tsx`：声明节点类型集合（示例为仅注册 `'custom'`）。
- `adder.tsx`：实现自定义添加节点组件 `Adder`，悬停时显示加号；点击时通过 `FlowOperationService.addFromNode` 在当前节点之后新增一个 `custom` 节点，并调用 `scrollToView` 自动定位新节点。
- `App.tsx`：应用入口，从 `useEditorProps` 获取配置并挂载 `EditorRenderer`。
> 预期效果：通过拆分文件，代码结构更清晰、职责更明确，后续扩展与团队协作更容易；界面效果与上一节一致（基础流程、删除按钮与添加节点组件可用，且含迷你地图与自动视图适配）。
## Step.6 - 接入表单与历史记录
1. 节点注册与扩展
- `condition`：通过 `extend: 'dynamicSplit'` 将其扩展为“分支节点”，并在 `onAdd()` 中返回默认 `blocks`（多分支）。
- `custom`：普通节点，在 `onAdd()` 中为其设置默认 `data.title` 与 `data.content`。
- 可选的 `meta` 配置项可控制节点行为（是否可拖拽、选择、删除、复制、添加等）。
2. 启用表单与历史
在 `use-editor-props.tsx` 中：
- `nodeEngine.enable = true`：开启节点引擎，允许为节点类型配置 `formMeta`。
- `history.enable = true` 与 `history.enableChangeNode = true`：启用撤销/重做，并监听节点数据变化（例如表单字段变更）。
- `history.onApply(ctx)`：在应用历史记录后触发，可用于自动保存（示例中打印 `ctx.document.toJSON()`）。
- `getNodeDefaultRegistry(type)`：为未显式注册的类型提供默认配置：
- `meta.defaultExpanded = true`：默认展开节点的内部内容区域。
- `formMeta.render`：渲染表单。本示例通过 ` name="title">` 与 ` name="content">` 分别展示标题与一个可编辑输入框。
```tsx
getNodeDefaultRegistry(type) {
return {
type,
meta: { defaultExpanded: true },
formMeta: {
render: () => (
<>
name="title">{({ field }) => {field.value}
}
name="content">
),
},
};
}
```
3. 初始化数据与渲染
- 在 `initial-data.ts` 中，包含一个 `start` 节点、一个带三条分支的 `condition` 节点（其中一条分支包含 `custom`，另一条为 `break`，还有一条为空），以及一个 `end` 节点。
- 各节点携带 `data.title` 与 `data.content`，`NodeRender` 中的 `form?.render()` 会将这些表单字段渲染到节点外壳内。
- `Adder` 组件点击后新增 `custom` 节点，默认 `title: 'New Custom Node'` 与 `content: 'Custom Node Content'`。
> 预期效果:
>
> • 画布包含 `start`、`condition`（三分支）与 `end`，各节点显示其 `title` 与 `content`；可通过 `Adder` 在流程中快速新增 `custom` 节点。
>
> • 撤销/重做快捷键可用，节点移动、添加、删除以及表单输入变更都会纳入历史记录；触发历史应用时将执行示例中的自动保存回调。
>
> • 分支节点的展开区域默认打开，便于查看与编辑内部内容。
## Step.7 - 创建工具栏
1. 引入工具栏与迷你地图组件
- 在 `App.tsx` 中引入并渲染 `` 与自定义 ``，与 `` 同级放置于 `FixedLayoutEditorProvider` 内，使其能够访问编辑器上下文与画布操作方法。
2. 通过工具方法操控画布
- 使用 `usePlaygroundTools()` 获取画布操作方法：`zoomin/zoomout`、`fitView`、`changeLayout` 等。
- 实时显示缩放比例：通过 `tools.zoom` 读取当前画布缩放并展示百分比。
3. 接入撤销/重做状态
- 使用 `useClientContext()` 获取 `history`，并监听 `history.undoRedoService.onChange` 更新工具栏中的 `Undo/Redo` 可用态。
- 在 `use-editor-props.tsx` 中确保开启历史：`history.enable = true` 与 `history.enableChangeNode = true`，使撤销/重做对节点数据与布局变更生效。
4. 自定义迷你地图（可选）
- 使用 `MinimapRender` 并自定义容器样式，将缩略图固定在左下角，避免遮挡主要交互区域。
- 在 `use-editor-props.tsx` 中为迷你地图插件传入：`disableLayer: true` 与 `canvasStyle`（`canvasWidth/canvasHeight/canvasPadding`），获得紧凑的缩略图尺寸与边距。
5. 保持前述功能
- `NodeRender` 继续通过 `form?.render()` 渲染表单字段，并提供删除按钮；`Adder` 支持一键新增 `custom` 节点；`node-registries.tsx` 中维持 `condition/custom` 类型注册；`initial-data.ts` 中包含 `start → condition(三分支) → end` 的示例流程。
> 预期效果:
>
> • 画面左下角出现工具栏，支持 `ZoomIn/ZoomOut`、`FitView`、`ChangeLayout` 等常用操作，并实时显示缩放比例；`Undo/Redo` 按钮会根据历史状态联动更新。
>
> • 左下角同时展示自定义样式的迷你地图，可点击/拖拽缩略图快速定位主画布；结合工具栏形成完整的编辑工具区，操作更高效。
## Step.8 - 了解更多
了解更多固定布局用法
- [加载与保存](/guide/fixed-layout/load)
- [节点](/guide/fixed-layout/node)
- [复合节点](/guide/fixed-layout/composite-nodes)
了解 FlowGram.AI 更多功能
- [表单](/guide/form/form)
- [变量](/guide/variable/basic)
- [物料](/materials/introduction)
---
url: /guide/free-layout/load.md
---
# 加载与保存
画布的数据通过 [WorkflowDocument](/api/core/workflow-document.html) 来存储
## 画布数据
:::note 文档数据基本结构:
- nodes `array` 节点列表, 支持嵌套
- edges `array` 边列表
:::
:::note 节点数据基本结构:
- id: `string` 节点唯一标识, 必须保证唯一
- meta: `object` 节点的 ui 配置信息，如自由布局的 `position` 信息放这里
- type: `string | number` 节点类型，会和 `nodeRegistries` 中的 `type` 对应
- data: `object` 节点表单数据, 业务可自定义
- blocks: `array` 节点的分支, 采用 `block` 更贴近 `Gramming`, 目前会存子画布的节点
- edges: `array` 子画布的边数据
:::
:::note 边数据基本结构:
- sourceNodeID: `string` 开始节点 id
- targetNodeID: `string` 目标节点 id
- sourcePortID?: `string | number` 开始端口 id, 缺省则采用开始节点的默认端口
- targetPortID?: `string | number` 目标端口 id, 缺省则采用目标节点的默认端口
:::
```tsx pure title="initial-data.ts"
import { WorkflowJSON } from '@flowgram.ai/free-layout-editor';
export const initialData: WorkflowJSON = {
nodes: [
{
id: 'start_0',
type: 'start',
meta: {
position: { x: 0, y: 0 },
},
data: {
title: 'Start',
content: 'Start content'
},
},
{
id: 'node_0',
type: 'custom',
meta: {
position: { x: 400, y: 0 },
},
data: {
title: 'Custom',
content: 'Custom node content'
},
},
{
id: 'end_0',
type: 'end',
meta: {
position: { x: 800, y: 0 },
},
data: {
title: 'End',
content: 'End content'
},
},
],
edges: [
{
sourceNodeID: 'start_0',
targetNodeID: 'node_0',
},
{
sourceNodeID: 'node_0',
targetNodeID: 'end_0',
},
],
};
```
## 加载
- 通过 initialData 加载
```tsx pure
import { FreeLayoutEditorProvider, FreeLayoutPluginContext, EditorRenderer } from '@flowgram.ai/free-layout-editor'
function App({ data }) {
return (
)
}
```
- 通过 ref 动态加载
```tsx pure
import { FreeLayoutEditorProvider, FreeLayoutPluginContext, EditorRenderer } from '@flowgram.ai/free-layout-editor'
function App() {
const ref = useRef();
useEffect(async () => {
const data = await request('https://xxxx/getJSON')
ref.current.document.fromJSON(data)
setTimeout(() => {
// 加载后触发画布的 fitview 让节点自动居中
ref.current.document.fitView()
}, 100)
}, [])
return (
)
}
```
- 动态重载画布所有数据 (会产生 redo/undo/onContentChange )
```tsx pure
import { FreeLayoutEditorProvider, FreeLayoutPluginContext, EditorRenderer } from '@flowgram.ai/free-layout-editor'
function App({ data }) {
const ref = useRef();
useEffect(() => {
// ctx.operation 支持 diff 重新加载画布数据并可通过 undo 撤销
ref.current.operation.fromJSON(data)
setTimeout(() => {
// 加载后触发画布的 fitview 让节点自动居中
ref.current.document.fitView()
}, 10)
}, [data])
return (
)
}
```
- 批量添加节点和线条
```tsx pure
ctx.document.batchAddFromJSON({
nodes: [...],
edges: [...]
}, {
// 可选，如果要添加到子画布中用这个
parent: loopNode
})
```
## 监听变化并自动保存
```tsx pure
import { FreeLayoutEditorProvider, FreeLayoutPluginContext, EditorRenderer } from '@flowgram.ai/free-layout-editor'
import { debounce } from 'lodash-es'
function App() {
const ref = useRef();
useEffect(() => {
// 监听画布变化 延迟 1 秒 保存数据, 避免画布频繁更新
const toDispose = ref.current.document.onContentChange(debounce(() => {
// 通过 toJSON 获取画布最新的数据
request('https://xxxx/save', {
data: ref.current.document.toJSON()
})
}, 1000))
return () => toDispose.dispose()
}, [])
return (
)
}
```
---
url: /guide/free-layout/node.md
---
# 节点
节点通过 [FlowNodeEntity](/api/core/flow-node-entity.html) 定义
## 节点核心 API
- id: `string` 节点 id
- flowNodeType: `string` | `number` 节点类型
- bounds: `Rectangle` 获取节点的 x，y，width，height, 等价于 `transform.bounds`
- blocks: `FlowNodeEntity[]` 获取子节点 (如 Loop)
- parent: `FlowNodeEntity | undefined` 获取父节点
- document: [WorkflowDocument](/api/core/workflow-document.html) 文档链接
- transform: [FlowNodeTransformData](https://flowgram.ai/auto-docs/document/classes/FlowNodeTransformData.html) 获取节点的 transform 矩阵数据
- renderData: [FlowNodeRenderData](https://flowgram.ai/auto-docs/document/classes/FlowNodeRenderData.html) 获取节点的渲染数据, 包含渲染状态等
- form: [NodeFormProps](https://flowgram.ai/auto-docs/editor/interfaces/NodeFormProps.html) 获取节点的表单数据, 等价于 [getNodeForm](/api/utils/get-node-form.html)
- scope: [FlowNodeScope](https://flowgram.ai/auto-docs/editor/interfaces/FlowNodeScope) 变量作用域
- privateScope: [FlowNodeScope](https://flowgram.ai/auto-docs/editor/interfaces/FlowNodeScope) 变量私有作用域
- lines: [WorkflowNodeLinesData](https://flowgram.ai/auto-docs/free-layout-core/classes/WorkflowNodeLinesData.html) 自由布局线条数据
- ports: [WorkflowNodePortsData](https://flowgram.ai/auto-docs/free-layout-core/classes/WorkflowNodePortsData.html) 自由布局端口数据
- getNodeRegistry(): [WorkflowNodeRegistry](https://flowgram.ai/auto-docs/free-layout-core/interfaces/WorkflowNodeRegistry) 获取节点注册器
- getService(): 获取 [IOC](/guide/concepts/ioc.html) 服务，如 `node.getService(HistoryService)`
- getExtInfo(): 获取节点扩展数据, 如 `node.getExtInfo<{ test: string }>()`
- updateExtInfo(): 更新节点扩展数据, 如 `node.updateExtInfo<{ test: string }>({ test: 'test' })`
- dispose(): 销毁节点
- toJSON(): json 序列化
## 节点数据
通过 `node.toJSON()` 可以获取
:::note 基本结构:
- id: `string` 节点唯一标识, 必须保证唯一
- meta: `object` 节点的 ui 配置信息，如自由布局的 `position` 信息放这里
- type: `string | number` 节点类型，会和 `nodeRegistries` 中的 `type` 对应
- data: `object` 节点表单数据, 业务可自定义
- blocks: `array` 节点的分支, 采用 `block` 更贴近 `Gramming` 自由布局布局场景会用在子画布的子节点
- edges: `array` 子画布的边数据
:::
```ts pure
const nodeData: FlowNodeJSON = {
id: 'xxxx',
type: 'condition',
data: {
title: 'MyCondition',
desc: 'xxxxx'
},
}
```
## 节点定义
在自由布局场景，节点定义用于声明节点的初始化位置/大小，端口，表单渲染等。
```tsx pure title="node-registries.tsx"
import { WorkflowNodeRegistry, ValidateTrigger } from '@flowgram.ai/free-layout-editor';
/**
* You can customize your own node registry
* 你可以自定义节点的注册器
*/
export const nodeRegistries: WorkflowNodeRegistry[] = [
{
type: 'start',
meta: {
isStart: true, // 标记为开始节点
deleteDisable: true, // 开始节点不能删除
copyDisable: true, // 开始节点不能复制
defaultPorts: [{ type: 'output' }], // 用于定义节点的输入和输出端口, 开始节点只有输出端口
// useDynamicPort: true, // 用于动态端口，会寻找 data-port-id 和 data-port-type 属性的 dom 作为端口
},
/**
* 配置节点表单的校验及渲染,
* 注：validate 采用数据和渲染分离，保证节点即使不渲染也能对数据做校验
*/
formMeta: {
validateTrigger: ValidateTrigger.onChange,
validate: {
title: ({ value }) => (value ? undefined : 'Title is required'),
},
/**
* Render form
*/
render: () => (
<>
{({ field }) => {field.value}
}
{({ field }) => }
)
},
},
{
type: 'end',
meta: {
deleteDisable: true,
copyDisable: true,
defaultPorts: [{ type: 'input' }],
},
formMeta: {
// ...
}
},
{
type: 'custom',
meta: {
},
formMeta: {
// ...
},
defaultPorts: [{ type: 'output' }, { type: 'input' }], // 普通节点有两个端口
},
];
```
## 当前渲染节点获取
通过 [useNodeRender](/api/hooks/use-node-render.html) 获取节点相关方法
```tsx pure
function BaseNode() {
const { id, type, data, updateData, node } = useNodeRender()
}
```
## 获取当前节点的输入/输出节点或线条
```ts pure
// 获取当前节点的输入节点（通过连接线计算）
node.lines.inputNodes
// 获取所有输入节点 （会往上递归获取所有）
node.lines.allInputNodes
// 获取输出节点
node.lines.outputNodes
// 获取所有输出节点
node.lines.allOutputNodes
// 输入线条 (包含 isDrawing 或 isHidden 的线条)
node.lines.inputLines
// 输出线条 (包含 isDrawing 或 isHidden 的线条)
node.lines.outputLines
// 所有线条 (不包含 isDrawing 或 isHidden 的线条)
node.lines.availableLines
```
## 创建节点
- 通过 [WorkflowDocument](/api/core/workflow-document.html) 创建
```ts pure
const ctx = useClientContext()
ctx.document.createWorkflowNode({
id: 'xxx', // 要保证画布内唯一
type: 'custom',
meta: {
/**
* 如果不传入，则默认在画布中间创建
* 如果要通过鼠标位置获取 position (如点击画布任意位置创建节点)，可通过 `ctx.playground.config.getPosFromMouseEvent(mouseEvent)` 转换
*/
position: { x: 100, y: 100 } //
},
data: {}, // 表单相关数据
blocks: [], // 子画布的节点
edges: [] // 子画布的边
})
```
- 通过 WorkflowDragService 创建, 见[自由布局基础用法](/examples/free-layout/free-layout-simple.html)
```ts pure
const dragService = useService(WorkflowDragService);
// 这里的 mouseEvent 会自动转成 画布的 position
dragService.startDragCard(nodeType, mouseEvent, {
id: 'xxxx',
data: {}, // 表单相关数据
blocks: [], // 子画布的节点
edges: [] // 子画布的边
})
```
## 删除节点
通过 `node.dispose` 删除节点
```tsx pure
function BaseNode({ node }) {
function onClick() {
node.dispose()
}
return (
)
}
```
## 更新节点 data 数据
- 通过 [useNodeRender](/api/hooks/use-node-render.html) 或 [node.form](https://flowgram.ai/auto-docs/editor/interfaces/NodeFormProps.html) 获取节点的 data 数据
```tsx pure
function BaseNode() {
const { node, form } = useNodeRender();
// 1. form.values 对应节点的 data 数据
// 2. form.setValueIn('title', 'xxxx') 修改 data.title
// 3. form.getValueIn('title') 获取 data.title
// 4. form.updateFormValues({ ... }) 更新表单所有数据
function onChange(e) {
form.setValueIn('title', e.target.value)
}
return
}
```
- 通过 Field 更新表单数据, 详细见 [表单的使用](/guide/form/form.html)
```tsx pure
function FormRender() {
return (
)
}
```
## 更新节点的 extInfo 数据
extInfo 用于存储 一些 ui 状态, 如果未开启节点引擎，节点的 data 数据会默认存到 extInfo 里
```tsx pure
function BaseNode({ node }) {
const times = node.getExtInfo()?.times || 0
function onClick() {
node.updateExtInfo({ times: times ++ })
}
return (
Click Times: {times}
)
}
```
---
url: /guide/free-layout/line.md
---
# 线条
- [WorkflowLinesManager](https://github.com/bytedance/flowgram.ai/blob/main/packages/canvas-engine/free-layout-core/src/workflow-lines-manager.ts) 管理所有的线条
- [WorkflowNodeLinesData](https://github.com/bytedance/flowgram.ai/blob/main/packages/canvas-engine/free-layout-core/src/entity-datas/workflow-node-lines-data.ts) 节点上连接的线条管理
- [WorkflowLineEntity](https://github.com/bytedance/flowgram.ai/blob/main/packages/canvas-engine/free-layout-core/src/entities/workflow-line-entity.ts) 线条实体
## 获取所有线条的实体
```ts pure
const allLines = ctx.document.linesManager.getAllLines() // 线条实体 包含 from/to 分别代表线条连接的节点
```
## 创建/删除线条
```ts pure
// from和 to 为对应要连线的节点id， fromPort, toPort 为 端口 id, 如果节点为单个端口可以不指定
const line = ctx.document.linesManager.createLine({ from, to, fromPort, toPort })
// 删除线条
line.dispose()
```
## 导出线条数据
:::note 线条基本结构:
- sourceNodeID: `string` 开始节点 id
- targetNodeID: `string` 目标节点 id
- sourcePortID?: `string | number` 开始端口 id, 缺省则采用开始节点的默认端口
- targetPortID?: `string | number` 目标端口 id, 缺省则采用目标节点的默认端口
:::
```ts pure
const json = ctx.document.linesManager.toJSON()
```
## 获取当前节点的输入/输出节点或线条
```ts pure
// 获取当前节点的输入节点（通过连接线计算）
node.lines.inputNodes
// 获取所有输入节点 （会往上递归获取所有）
node.lines.allInputNodes
// 获取输出节点
node.lines.outputNodes
// 获取所有输出节点
node.lines.allOutputNodes
// 输入线条 (包含 isDrawing 或 isHidden 的线条)
node.lines.inputLines
// 输出线条 (包含 isDrawing 或 isHidden 的线条)
node.lines.outputLines
// 所有线条 (不包含 isDrawing 或 isHidden 的线条)
node.lines.availableLines
```
## 线条配置
我们提供丰富的线条配置参数, 给 `FreeLayoutEditorProvider`, 详细见 [FreeLayoutProps](https://github.com/bytedance/flowgram.ai/blob/main/packages/client/free-layout-editor/src/preset/free-layout-props.ts)
```tsx pure
interface FreeLayoutProps {
/**
* 线条颜色配置
*/
lineColor?: LineColor;
/**
* 判断线条是否标红
* @param ctx
* @param fromPort
* @param toPort
* @param lines
*/
isErrorLine?: (ctx: FreeLayoutPluginContext, fromPort: WorkflowPortEntity, toPort: WorkflowPortEntity | undefined, lines: WorkflowLinesManager) => boolean;
/**
* 判断端口是否标红
* @param ctx
* @param port
*/
isErrorPort?: (ctx: FreeLayoutPluginContext, port: WorkflowPortEntity) => boolean;
/**
* 判断端口是否禁用
* @param ctx
* @param port
*/
isDisabledPort?: (ctx: FreeLayoutPluginContext, port: WorkflowPortEntity) => boolean;
/**
* 判断线条箭头是否反转
* @param ctx
* @param line
*/
isReverseLine?: (ctx: FreeLayoutPluginContext, line: WorkflowLineEntity) => boolean;
/**
* 判断线条是否隐藏箭头
* @param ctx
* @param line
*/
isHideArrowLine?: (ctx: FreeLayoutPluginContext, line: WorkflowLineEntity) => boolean;
/**
* 判断线条是否展示流动效果
* @param ctx
* @param line
*/
isFlowingLine?: (ctx: FreeLayoutPluginContext, line: WorkflowLineEntity) => boolean;
/**
* 判断线条是否禁用
* @param ctx
* @param line
*/
isDisabledLine?: (ctx: FreeLayoutPluginContext, line: WorkflowLineEntity) => boolean;
/**
* 拖拽线条结束
* @param ctx
* @param params
*/
onDragLineEnd?: (ctx: FreeLayoutPluginContext, params: onDragLineEndParams) => Promise;
/**
* 设置线条渲染器类型
* @param ctx
* @param line
*/
setLineRenderType?: (ctx: FreeLayoutPluginContext, line: WorkflowLineEntity) => LineRenderType | undefined;
/**
* 设置线条样式
* @param ctx
* @param line
*/
setLineClassName?: (ctx: FreeLayoutPluginContext, line: WorkflowLineEntity) => string | undefined;
/**
* 是否允许创建线条
* @param ctx
* @param fromPort - 开始点
* @param toPort - 目标点
*/
canAddLine?: (ctx: FreeLayoutPluginContext, fromPort: WorkflowPortEntity, toPort: WorkflowPortEntity, lines: WorkflowLinesManager, silent?: boolean) => boolean;
/**
*
* 是否允许删除线条
* @param ctx
* @param line - 目标线条
* @param newLineInfo - 新的线条信息
* @param silent - 如果为false，可以加 toast 弹窗
*/
canDeleteLine?: (ctx: FreeLayoutPluginContext, line: WorkflowLineEntity, newLineInfo?: Required, silent?: boolean) => boolean;
/**
* 是否允许重置线条
* @param ctx
* @param oldLine - 原来的线条
* @param newLineInfo - 新的线条信息
* @param lines - 线条管理器
*/
canResetLine?: (ctx: FreeLayoutPluginContext, oldLine: WorkflowLineEntity, newLineInfo: WorkflowLinePortInfo, lines: WorkflowLinesManager ) => boolean;
}
```
### 1. 线条 ui 属性配置
- 修改 UIState
```tsx pure
/**
* more: https://github.com/bytedance/flowgram.ai/blob/main/packages/canvas-engine/free-layout-core/src/entities/workflow-line-entity.ts#L41
*/
line.updateUIState({
lockedColor: 'blue',
strokeWidth: 2,
strokeWidthSelected: 3,
className: 'xxx',
style: {}
})
```
- 不同线条指定特定的颜色 (优先级最高)
```tsx pure
ctx.document.linesManager.getAllLines().forEach(line => {
if (line.from.flowNodeType === 'start') {
line.lockedColor = 'blue'
} else if (line.to.flowNodeType === 'end') {
line.lockedColor = 'yellow'
}
})
```
- 全局颜色配置
```tsx pure
function App() {
const editorProps: FreeLayoutProps = {
lineColor: {
hidden: 'transparent',
default: '#4d53e8',
drawing: '#5DD6E3',
hovered: '#37d0ff',
selected: '#37d0ff',
error: 'red',
},
// ...others
}
return (
)
}
```
### 2.让单个输出端口只能连一条线
```tsx pure
function App() {
const editorProps: FreeLayoutProps = {
/*
* Check whether the line can be added
* 判断是否连线
*/
canAddLine(ctx, fromPort, toPort) {
// not the same node
if (fromPort.node === toPort.node) {
return false;
}
// 控制线条添加数目
if (fromPort.availableLines.length >= 1) {
return false
}
return true;
},
// ...others
}
return (
)
}
```
### 3.连接到空白地方添加节点
代码见自由布局最佳实践
```tsx pure
function App() {
const editorProps: FreeLayoutProps = {
/**
* Drag the end of the line to create an add panel (feature optional)
* 拖拽线条结束需要创建一个添加面板 （功能可选）
*/
async onDragLineEnd(ctx, params) {
const { fromPort, toPort, mousePos, line, originLine } = params;
if (originLine || !line) {
return;
}
if (toPort) {
return;
}
// 这里可以根据 mousePos 打开添加面板
await ctx.get(WorkflowNodePanelService).call({
fromPort,
toPort: undefined,
panelPosition: mousePos,
enableBuildLine: true,
panelProps: {
enableNodePlaceholder: true,
enableScrollClose: true,
},
});
},
// ...others
}
return (
)
}
```
### 4.自定义箭头渲染器
你可以通过注册自定义的箭头渲染器来完全自定义线条的箭头样式。
```tsx pure
import {
FlowRendererKey,
type ArrowRendererProps,
useEditorProps
} from '@flowgram.ai/free-layout-editor';
// 1. 创建自定义箭头组件
function CustomArrowRenderer({ id, pos, reverseArrow, strokeWidth, vertical, hide }: ArrowRendererProps) {
if (hide) return null;
const size = 8;
const rotation = reverseArrow
? (vertical ? 270 : 180)
: (vertical ? 90 : 0);
return (
);
}
// 2. 在编辑器中注册自定义箭头
function App() {
const materials = {
components: {
[FlowRendererKey.ARROW_RENDERER]: CustomArrowRenderer,
},
};
const editorProps = useEditorProps({
materials,
// ...其他配置
});
return (
);
}
```
**高级用法**：根据线条状态动态渲染不同的箭头样式：
```tsx pure
function AdvancedArrowRenderer({ id, pos, reverseArrow, strokeWidth, vertical, hide, line }: ArrowRendererProps) {
if (hide) return null;
const size = 8;
const rotation = reverseArrow
? (vertical ? 270 : 180)
: (vertical ? 90 : 0);
// 根据线条状态选择不同的箭头样式
let arrowPath: string;
let fillColor: string;
if (line?.hasError) {
// 错误状态：红色感叹号箭头
arrowPath = `M0,0 L${-size},-${size/2} L${-size},${size/2} Z`;
fillColor = '#ff4d4f';
} else if (line?.processing) {
// 处理中状态：蓝色圆形箭头
arrowPath = `M0,0 m-${size/2},0 a${size/2},${size/2} 0 1,0 ${size},0 a${size/2},${size/2} 0 1,0 -${size},0`;
fillColor = '#1890ff';
} else {
// 默认状态：标准三角形箭头
arrowPath = `M0,0 L${-size},-${size/2} L${-size},${size/2} Z`;
fillColor = 'currentColor';
}
return (
);
}
```
**ArrowRendererProps 接口**：
```ts pure
interface ArrowRendererProps {
id: string; // 箭头唯一标识符
pos: { x: number; y: number }; // 箭头位置
reverseArrow: boolean; // 是否反转箭头方向
strokeWidth: number; // 线条粗细
vertical: boolean; // 是否为垂直线条
hide: boolean; // 是否隐藏箭头
line?: WorkflowLineEntity; // 线条实体（可用于获取状态）
}
```
## 在线条上添加 Label
代码见自由布局最佳实践
```ts pure
import { createFreeLinesPlugin } from '@flowgram.ai/free-lines-plugin';
const editorProps = {
plugins: () => [
/**
* Line render plugin
* 连线渲染插件
*/
createFreeLinesPlugin({
renderInsideLine: LineAddButton,
}),
]
}
```
## 节点监听自身的连线变化并刷新
```tsx pure
import {
useRefresh,
WorkflowNodeLinesData,
} from '@flowgram.ai/free-layout-editor';
function NodeRender({ node }) {
const refresh = useRefresh()
const linesData = node.get(WorkflowNodeLinesData)
useEffect(() => {
const dispose = linesData.onDataChange(() => refresh())
return () => dispose.dispose()
}, [])
return xxxx
}
```
## 监听所有线条的连线变化
这个场景用于当希望在外部组件监听线条连接情况
```ts pure
import { useEffect } from 'react'
import { WorkflowLinesManager, useRefresh } from '@flowgram.ai/free-layout-editor'
function SomeReact() {
const refresh = useRefresh()
const linesManager = useService(WorkflowLinesManager)
useEffect(() => {
const dispose = linesManager.onAvailableLinesChange(() => refresh())
return () => dispose.dispose()
}, [])
console.log(ctx.document.linesManager.getAllLines())
}
```
---
url: /guide/free-layout/port.md
---
# 端口
- [WorkflowNodePortsData](https://github.com/bytedance/flowgram.ai/blob/main/packages/canvas-engine/free-layout-core/src/entity-datas/workflow-node-ports-data.ts) 管理节点的所有端口信息
- [WorkflowPortEntity](https://github.com/bytedance/flowgram.ai/blob/main/packages/canvas-engine/free-layout-core/src/entities/workflow-port-entity.ts) 端口实例
- [WorkflowPortRender](https://github.com/bytedance/flowgram.ai/blob/main/packages/plugins/free-lines-plugin/src/components/workflow-port-render/index.tsx) 端口渲染组件
## 定义端口
节点声明添加 `defaultPorts` , 如 `{ type: 'input', location: 'left' }`, 则会在节点左侧加入输入端口
```ts pure
// Port 接口
export interface WorkflowPort {
/**
* 没有代表 默认连接点，默认 input 类型 为最左边中心，output 类型为最右边中心
*/
portID?: string | number;
/**
* 输入或者输出点
*/
type: 'input' | 'output';
/**
* 端口位置
*/
location?: 'left' | 'top' | 'right' | 'bottom';
/**
* 端口位置配置
* @example
* // bottom-center
* {
* left: '50%',
* bottom: 0
* }
* // right-center
* {
* right: 0,
* top: '50%'
* }
*/
locationConfig?: { left?: string | number, top?: string | number, right?: string | number, bottom?: string | number}
/**
* 相对于 location 的偏移
*/
offset?: IPoint;
/**
* 端口热区大小
*/
size?: { width: number; height: number };
/**
* 禁用端口
*/
disabled?: boolean;
}
```
```ts pure title="node-registries.ts"
{
type: 'start',
meta: {
defaultPorts: [{ type: 'output', location: 'right' }, { type: 'input', location: 'left' }]
},
}
```
## 动态端口
节点声明添加 `useDynamicPort` , 当设置为 true 则会到节点dom 上寻找 data-port-id 和 data-port-type 属性的 dom 作为端口
```ts pure title="node-registries.ts"
{
type: 'condition',
meta: {
defaultPorts: [{ type: 'input'}]
useDynamicPort: true
},
}
```
```tsx pure
/**
* 动态端口通过 querySelectorAll('[data-port-id]') 查找端口位置
*/
function BaseNode() {
return (
)
}
```
## 垂直端口
```typescript pure
export const nodeRegsistries = [
{
type: 'chain',
meta: {
defaultPorts: [
{ type: 'input' },
{ type: 'output' },
{
portID: 'p4',
location: 'bottom',
locationConfig: { left: '33%', bottom: 0 },
type: 'output',
},
{
portID: 'p5',
location: 'bottom',
locationConfig: { left: '66%', bottom: 0 },
type: 'output',
},
],
},
},
{
type: 'tool',
meta: {
defaultPorts: [{ location: 'top', type: 'input' }],
},
},
]
```
## 更新端口数据
- 静态端口更新
```ts pure
// 可以根据表单数据调用这个方法更新静态端口数据
node.ports.updateAllPorts([
{ type: 'output', location: 'right', locationConfig: { left: '33%', bottom: 0 }},
{ type: 'input', location: 'left', locationConfig: { left: '66%', bottom: 0 }}
])
```
- 动态端口更新
```ts pure
// 刷新并同步节点 dom 中的端口数据
node.ports.updateDynamicPorts()
```
## 监听表单变化并更新端口数据
下边 condition 节点通过 [表单effect](/guide/form/form.html) 监听 `portKeys` 数据并更新端口数据, 详细见 [Demo](/examples/free-layout/free-layout-simple.html)
```tsx pure title="node-registries.ts"
import {
Field,
DataEvent,
EffectFuncProps,
WorkflowPorts
} from '@flowgram.ai/free-layout-editor';
const CONDITION_ITEM_HEIGHT = 30
const conditionNodeRegistry = {
type: 'condition',
meta: {
defaultPorts: [{ type: 'input' }],
},
formMeta: {
effect: {
/**
* Listen for "portsKeys" changes and update ports
*/
portKeys: [{
event: DataEvent.onValueInitOrChange,
effect: ({ value, context }: EffectFuncProps, FormData>) => {
const { node } = context
const defaultPorts: WorkflowPorts = [{ type: 'input'}]
const newPorts: WorkflowPorts = value.map((portID: string, i: number) => ({
type: 'output',
portID,
location: 'right',
locationConfig: {
right: 0,
top: (i + 1) * CONDITION_ITEM_HEIGHT
}
}))
node.ports.updateAllPorts([...defaultPorts, ...newPorts])
},
}],
},
render: () => (
<>
name="title">
{({ field }) => {field.value}
}
> name="portKeys">
{({ field: { value, onChange }, }) => {
return (
)
}}
),
},
}
```
## 端口渲染
端口最终通过 `WorkflowPortRender` 组件渲染，支持自定义 style, 或者业务基于源码重新实现该组件, 参考 [自由布局最佳实践 - 节点渲染](https://github.com/bytedance/flowgram.ai/blob/main/apps/demo-free-layout/src/components/base-node/node-wrapper.tsx)
## 自定义端口颜色
可以通过向 `WorkflowPortRender` 传递颜色 props 来自定义端口颜色：
- `primaryColor` - 激活状态颜色（linked/hovered）
- `secondaryColor` - 默认状态颜色
- `errorColor` - 错误状态颜色
- `backgroundColor` - 背景颜色
```tsx pure
import { WorkflowPortRender, useNodeRender } from '@flowgram.ai/free-layout-editor';
function BaseNode() {
const { ports } = useNodeRender();
return (
)
}
```
## 获取端口数据
```ts pure
const { ports } = node
console.log(ports.inputPorts) // 获取当前节点的所有输入端口
console.log(ports.outputPorts) // 获取当前节点的所有输出端口
console.log(ports.inputPorts.map(port => port.availableLines)) // 通过端口找到连接的线条
ports.updateDynamicPorts() // 当动态端口修改了 dom 结构或位置，可以通过该方法手动刷新端口位置(dom 渲染有延迟，最好在 useEffect 或者 setTimeout 执行)
```
## 端口双向连接
```ts pure title="node-registries.ts"
{
type: 'twoway',
meta: {
defaultPorts: [
// input 和 output 端口 可以叠加
{ type: 'input', portID: 'input-left', location: 'left' },
{ type: 'output', portID: 'output-left', location: 'left' },
{ type: 'input', portID: 'input-right', location: 'right' },
{ type: 'output', portID: 'output-right', location: 'right' },
],
},
},
```
---
url: /guide/free-layout/sub-canvas.md
---
# 子画布
详细代码见 [自由布局最佳实践](/examples/free-layout/free-feature-overview.html)
## 添加子画布插件
```tsx pure
import { createContainerNodePlugin } from '@flowgram.ai/free-container-plugin';
function App() {
const editorProps = {
plugins: () => [
createContainerNodePlugin({}),
]
// ..others
}
return (
)
}
```
## 定义子画布节点
```tsx pure
import { SubCanvasRender } from '@flowgram.ai/free-container-plugin';
export const LoopNodeRegistry: FlowNodeRegistry = {
type: 'loop',
info: {
icon: iconLoop,
description:
'Used to repeatedly execute a series of tasks by setting the number of iterations and logic.',
},
meta: {
/**
* 子画布标记
*/
isContainer: true,
/**
* 子画布默认大小设置
*/
size: {
width: 560,
height: 400,
},
/**
* 子画布 padding 设置
*/
padding: () => ({ // 容器 padding 设置
top: 150,
bottom: 100,
left: 100,
right: 100,
}),
/**
* 控制子画布内的节点选中状态
*/
selectable(node: WorkflowNodeEntity, mousePos?: PositionSchema): boolean {
if (!mousePos) {
return true;
}
const transform = node.getData(FlowNodeTransformData);
// 鼠标开始时所在位置不包括当前节点时才可选中
return !transform.bounds.contains(mousePos.x, mousePos.y);
},
},
formMeta: {
render: () => (
{ /* others */ }
)
}
}
```
---
url: /guide/fixed-layout/load.md
---
# 加载与保存
画布的数据通过 [FlowDocument](/api/core/flow-document.html) 来存储
## 画布数据格式
画布文档数据采用树形结构，支持嵌套
:::note 文档数据基本结构:
- nodes `array` 节点列表, 支持嵌套
:::
:::note 节点数据基本结构:
- id: `string` 节点唯一标识, 必须保证唯一
- meta: `object` 节点的 ui 配置信息，如自由布局的 `position` 信息放这里
- type: `string | number` 节点类型，会和 `nodeRegistries` 中的 `type` 对应
- data: `object` 节点表单数据
- blocks: `array` 节点的分支, 采用 `block` 更贴近 `Gramming`
:::
```tsx pure title="initial-data.tsx"
import { FlowDocumentJSON } from '@flowgram.ai/fixed-layout-editor';
/**
* 配置流程数据，数据为 blocks 嵌套的格式
*/
export const initialData: FlowDocumentJSON = {
nodes: [
// 开始节点
{
id: 'start_0',
type: 'start',
data: {
title: 'Start',
content: 'start content'
},
blocks: [],
},
// 分支节点
{
id: 'condition_0',
type: 'condition',
data: {
title: 'Condition'
},
blocks: [
{
id: 'branch_0',
type: 'block',
data: {
title: 'Branch 0',
content: 'branch 1 content'
},
blocks: [
{
id: 'custom_0',
type: 'custom',
data: {
title: 'Custom',
content: 'custrom content'
},
},
],
},
{
id: 'branch_1',
type: 'block',
data: {
title: 'Branch 1',
content: 'branch 1 content'
},
blocks: [],
},
],
},
// 结束节点
{
id: 'end_0',
type: 'end',
data: {
title: 'End',
content: 'end content'
},
},
],
};
```
## 加载
- 通过 initialData 加载
```tsx pure
import { FixedLayoutEditorProvider, FixedLayoutPluginContext, EditorRenderer } from '@flowgram.ai/fixed-layout-editor'
function App({ data }) {
return (
)
}
```
- 通过 ref 动态加载
```tsx pure
import { FixedLayoutEditorProvider, FixedLayoutPluginContext, EditorRenderer } from '@flowgram.ai/fixed-layout-editor'
function App() {
const ref = useRef();
useEffect(async () => {
const data = await request('https://xxxx/getJSON')
ref.current.document.fromJSON(data)
setTimeout(() => {
// 加载后触发画布的 fitview 让节点自动居中
ref.current.playground.config.fitView(ref.current.document.root.bounds.pad(30));
}, 100)
}, [])
return (
)
}
```
- 动态 reload 数据
```tsx pure
import { FixedLayoutEditorProvider, FixedLayoutPluginContext, EditorRenderer } from '@flowgram.ai/fixed-layout-editor'
function App({ data }) {
const ref = useRef();
useEffect(async () => {
// 当 data 变化时候重新加载画布数据
await ref.current.document.fromJSON(data)
setTimeout(() => {
// 加载后触发画布的 fitview 让节点自动居中
ref.current.playground.config.fitView(ref.current.document.root.bounds.pad(30));
}, 100)
}, [data])
return (
)
}
```
## 监听变化并自动保存
```tsx pure
import { FixedLayoutEditorProvider, FixedLayoutPluginContext, EditorRenderer } from '@flowgram.ai/fixed-layout-editor'
import { debounce } from 'lodash-es'
function App() {
const ref = useRef();
useEffect(() => {
// 监听画布变化 延迟 1 秒 保存数据, 避免画布频繁更新
const toDispose = ref.current.history.onApply(debounce(() => {
// 通过 toJSON 获取画布最新的数据
request('https://xxxx/save', {
data: ref.current.document.toJSON()
})
}, 1000))
return () => toDispose.dispose()
}, [])
return (
)
}
```
---
url: /guide/fixed-layout/node.md
---
# 节点
节点通过 [FlowNodeEntity](/api/core/flow-node-entity.html) 定义
## 节点核心 API
- id: `string` 节点 id
- flowNodeType: `string` | `number` 节点类型
- bounds: `Rectangle` 获取节点的 x，y，width，height, 等价于 `transform.bounds`
- blocks: `FlowNodeEntity[]` 获取子节点 (如 Loop)
- collapsedChildren: `FlowNodeEntity[]` 获取子节点, 包含折叠的子节点
- allCollapsedChildren: `FlowNodeEntity[]` 获取所有子节点，包括所有折叠的子节点
- children: `FlowNodeEntity[]` 获取子节点, 不包含折叠的子节点
- pre: `FlowNodeEntity | undefined` 获取上一个节点
- next: `FlowNodeEntity | undefined` 获取下一个节点
- parent: `FlowNodeEntity | undefined` 获取父节点
- originParent: `FlowNodeEntity | undefined` 获取原始父节点, 这个用于固定布局分支的第一个节点(orderIcon) 找到整个虚拟分支
- allChildren: `FlowNodeEntity[]` 获取所有子节点, 不包含折叠的子节点
- document: [FlowDocument](/api/core/flow-document.html) 文档链接
- transform: [FlowNodeTransformData](https://flowgram.ai/auto-docs/document/classes/FlowNodeTransformData.html) 获取节点的 transform 矩阵数据
- renderData: [FlowNodeRenderData](https://flowgram.ai/auto-docs/document/classes/FlowNodeRenderData.html) 获取节点的渲染数据, 包含渲染状态等
- form: [NodeFormProps](https://flowgram.ai/auto-docs/editor/interfaces/NodeFormProps.html) 获取节点的表单数据, 等价于 [getNodeForm](/api/utils/get-node-form.html)
- scope: [FlowNodeScope](https://flowgram.ai/auto-docs/editor/interfaces/FlowNodeScope) 变量作用域
- privateScope: [FlowNodeScope](https://flowgram.ai/auto-docs/editor/interfaces/FlowNodeScope) 变量私有作用域
- getNodeRegistry(): [FlowNodeRegistry](https://flowgram.ai/auto-docs/document/interfaces/FlowNodeRegistry-1) 获取节点注册器
- getService(): 获取 [IOC](/guide/concepts/ioc.html) 服务，如 `node.getService(HistoryService)`
- getExtInfo(): 获取节点扩展数据, 如 `node.getExtInfo<{ test: string }>()`
- updateExtInfo(): 更新节点扩展数据, 如 `node.updateExtInfo<{ test: string }>({ test: 'test' })`
- dispose(): 销毁节点
- toJSON(): json 序列化
## 节点数据
通过 `node.toJSON()` 可以获取
:::note 基本结构:
- id: `string` 节点唯一标识, 必须保证唯一
- meta: `object` 节点的 ui 配置信息，如自由布局的 `position` 信息放这里
- type: `string | number` 节点类型，会和 `nodeRegistries` 中的 `type` 对应
- data: `object` 节点表单数据, 业务可自定义
- blocks: `array` 节点的分支, 采用 `block` 更贴近 `Gramming`
:::
```ts pure
const nodeData: FlowNodeJSON = {
id: 'xxxx',
type: 'condition',
data: {
title: 'MyCondition',
desc: 'xxxxx'
},
}
```
## 节点定义
声明节点可以用于确定节点的类型及渲染方式
```tsx pure
import { FlowNodeRegistry, ValidateTrigger } from '@flowgram.ai/fixed-layout-editor';
/**
* 自定义节点注册
*/
export const nodeRegistries: FlowNodeRegistry[] = [
{
/**
* 自定义节点类型
*/
type: 'condition',
/**
* 自定义节点扩展:
* - loop: 扩展为循环节点
* - start: 扩展为开始节点
* - dynamicSplit: 扩展为分支节点
* - end: 扩展为结束节点
* - tryCatch: 扩展为 tryCatch 节点
* - default: 扩展为普通节点 (默认)
*/
extend: 'dynamicSplit',
/**
* 节点配置信息
*/
meta: {
// isStart: false, // 是否为开始节点
// isNodeEnd: false, // 是否为结束节点，结束节点后边无法再添加节点
// draggable: false, // 是否可拖拽，如开始节点和结束节点无法拖拽
// selectable: false, // 触发器等开始节点不能被框选
// deleteDisable: true, // 禁止删除
// copyDisable: true, // 禁止copy
// addDisable: true, // 禁止添加
},
/**
* 配置节点表单的校验及渲染,
* 注：validate 采用数据和渲染分离，保证节点即使不渲染也能对数据做校验
*/
formMeta: {
validateTrigger: ValidateTrigger.onChange,
validate: {
title: ({ value }) => (value ? undefined : 'Title is required'),
},
/**
* Render form
*/
render: () => (
<>
{({ field }) => {field.value}
}
{({ field }) => }
)
},
},
];
```
## 当前渲染节点获取
通过 [useNodeRender](/api/hooks/use-node-render.html) 获取节点相关方法
```tsx pure
function BaseNode() {
const { id, type, data, updateData, node } = useNodeRender()
}
```
## 创建节点
通过 [FlowOperationService](/api/services/flow-operation-service.html) 创建
- 添加节点
```ts pure
const ctx = useClientContext()
ctx.operation.addNode({
id: 'xxx', // 要保证画布内唯一
type: 'custom',
meta: {},
data: {}, // 表单相关数据
blocks: [], // 子节点
parent: someParent // 父亲节点，分支会用到
})
```
- 在指定节点之后添加
```ts pure
const ctx = useClientContext()
ctx.operation.addFromNode(targetNode, {
id: 'xxx', // 要保证画布内唯一
type: 'custom',
meta: {},
data: {}, // 表单相关数据
blocks: [], // 子节点
})
```
- 添加分支节点 （用于条件分支）
```ts pure
const ctx = useClientContext()
ctx.operation.addBlock(parentNode, {
id: 'xxx', // 要保证画布内唯一
type: 'block',
meta: {},
data: {}, // 表单相关数据
blocks: [], // 子节点
})
```
## 删除节点
```tsx pure
function BaseNode({ node }) {
const ctx = useClientContext()
function onClick() {
ctx.operation.deleteNode(node)
}
return (
)
}
```
## 更新节点 data 数据
- 通过 [useNodeRender](/api/hooks/use-node-render.html) 或 [node.form](https://flowgram.ai/auto-docs/editor/interfaces/NodeFormProps.html) 获取节点的 data 数据
```tsx pure
function BaseNode() {
const { node, form } = useNodeRender();
// 1. form.values 对应节点的 data 数据
// 2. form.setValueIn('title', 'xxxx') 修改 data.title
// 3. form.getValueIn('title') 获取 data.title
// 4. form.updateFormValues({ ... }) 更新表单所有数据
function onChange(e) {
form.setValueIn('title', e.target.value)
}
return
}
```
- 通过 Field 更新表单数据, 详细见 [表单的使用](/guide/form/form.html)
```tsx pure
function FormRender() {
return (
)
}
```
## 更新节点的 extInfo 数据
extInfo 用于存储 一些 ui 状态, 如果未开启节点引擎，节点的 data 数据会默认存到 extInfo 里
```tsx pure
function BaseNode({ node }) {
const times = node.getExtInfo()?.times || 0
function onClick() {
node.updateExtInfo({ times: times ++ })
}
return (
Click Times: {times}
)
}
```
---
url: /guide/fixed-layout/composite-nodes.md
---
# 复合节点
复合节点由多个节点组合，并支持自定义线条，如 分支节点、Loop 节点、TryCatch 节点:
## 使用
```ts pure title="node-registries.ts"
import { FlowNodeRegistry } from '@flowgram.ai/fixed-layout-editor';
/**
* 节点注册
*/
export const nodeRegistries: FlowNodeRegistry[] = [
{
type: 'yourCustomNodeType',
extend: 'dynamicSplit',
},
];
```
## 内置的复合节点
import { CompositeNodesPreview } from '../../../../components';
---
url: /guide/form/form.md
---
# 节点表单
## 术语
| 节点表单 |
特指流程节点内的表单或点击节点展开的表单，关联节点数据。 |
| 节点引擎 |
FlowGram.ai 内置的引擎之一，它核心维护了节点数据的增删查改，并提供渲染、校验、副作用、画布或变量联动等能力， 除此之外，它还提供节点错误捕获渲染、无内容时的 placeholder 渲染等能力，见以下章节例子。 |
## 快速开始
### 开启节点引擎
[> API Detail](https://github.com/bytedance/flowgram.ai/blob/main/packages/client/editor/src/preset/editor-props.ts#L54)
```tsx pure title="use-editor-props.ts" {3}
// EditorProps
{
nodeEngine: {
/**
* 需要开启节点引擎才能使用
*/
enable: true;
materials: {
/**
* 节点内部报错的渲染组件
*/
nodeErrorRender?: NodeErrorRender;
/**
* 节点无内容时的渲染组件
*/
nodePlaceholderRender?: NodePlaceholderRender;
}
}
}
```
### 配置表单
`formMeta` 是节点表单唯一配置入口，配置在每个节点的NodeRegistry 上。
[> node-registries.ts](https://github.com/bytedance/flowgram.ai/blob/main/apps/demo-fixed-layout-simple/src/node-registries.ts)
```tsx pure title="node-registries.ts"
import { FlowNodeRegistry, ValidateTrigger } from '@flowgram.ai/fixed-layout-editor';
export const nodeRegistries: FlowNodeRegistry[] = [
{
type: 'start',
/**
* 配置节点表单的校验及渲染
*/
formMeta: {
/**
* 配置校验在数据变更时触发
*/
validateTrigger: ValidateTrigger.onChange,
/**
* 配置校验规则， 'content' 为字段路径，以下配置值对该路径下的数据进行校验。
*
* 也可支持动态函数写法, 用于根据 values 生成校验器:
* validate: (values, ctx) => ({ content: () => {}, })
*/
validate: {
content: ({ value }) => (value ? undefined : 'Content is required'),
},
/**
* 配置表单渲染
*/
render: () => (
<>
name="title">
{({ field }) => {field.value}
}
name="content">
{({ field, fieldState }) => (
<>
{fieldState?.invalid && }
)}
)
},
}
]
```
[> 表单写法的基础例子](/examples/node-form/basic.html)
### 渲染表单
[> base-node.tsx](https://github.com/bytedance/flowgram.ai/blob/main/apps/demo-fixed-layout-simple/src/components/base-node.tsx)
```tsx pure title="base-node.tsx"
export const BaseNode = () => {
/**
* 提供节点渲染相关的方法
*/
const { form } = useNodeRender()
return (
{
// 表单渲染通过 formMeta 生成
form?.render()
}
)
};
```
## 核心概念
### FormMeta
在 `NodeRegistry` 中，我们通过`formMeta` 来配置节点表单, 它遵循以下API。
[> FormMeta API](https://github.com/bytedance/flowgram.ai/blob/main/packages/node-engine/node/src/types.ts#L89)
这里特别说明, 节点表单与通用表单有一个很大的区别，它的数据逻辑（如校验、数据变更后的副作用等）需要在表单不渲染的情况下依然生效，我们称 数据与渲染分离
。所以这些数据逻辑需要配置在formMeta 中的非render 字段中，保证不渲染情况下节点引擎也可以调用到这些逻辑, 而通用表单引擎（如react-hook-form）则没有这个限制, 校验可以直接写在react组件中。
### FormMeta.render (渲染)
`render` 字段用于配置表单的渲染逻辑
`render: (props: FormRenderProps) => React.ReactElement;`
[> FormRenderProps](https://github.com/bytedance/flowgram.ai/blob/main/packages/node-engine/form/src/types/form.ts#L91)
返回的 react 组件可使用以下表单组件和模型：
#### Field (组件)
`Field` 是表单字段的 React 高阶组件，封装了表单字段的通用逻辑，如数据与状态的注入，组件的刷新等。其核心必填参数为 `name`, 用于声明表单项的路径，在一个表单中具有唯一性。
[> Field Props API](https://github.com/bytedance/flowgram.ai/blob/main/packages/node-engine/form/src/types/field.ts#L106)
Field 的渲染部分，支持三种写法，如下:
```tsx pure
const render = () => (
);
```
``` ts pure
interface FieldRenderProps {
// Field 实例
field: Field;
// Field 状态（响应式）
fieldState: Readonly;
// Form 状态
formState: Readonly;
}
```
[> FieldRenderProps API](https://github.com/bytedance/flowgram.ai/blob/main/packages/node-engine/form/src/types/field.ts#L125)
#### Field (模型)
`Field` 实例通常通过render props 传入（如上例子），或通过 `useCurrentField` hook 获取。它包含表单字段在渲染层面的常见API。
注意: `Field` 是一个渲染模型，仅提供一般组件需要的API, 如 `value` `onChange` `onFocus` `onBlur`，如果是数据相关的API 请使用 `Form` 模型实例，如 `form.setValueIn(name, value)` 设置某字段的值。
[> Field 模型 API](https://github.com/bytedance/flowgram.ai/blob/main/packages/node-engine/form/src/types/field.ts#L34)
#### FieldArray (组件)
`FieldArray` 是数组类型字段的 React 高阶组件，封装了数组类型字段的通用逻辑，如数据与状态的注入，组件的刷新，以及数组项的遍历等。其核心必填参数为 `name`, 用于声明该表单项的路径，在一个表单中具有唯一性。
`FieldArray` 的基础用法可以参照以下例子:
[> 数组例子](https://flowgram.ai/examples/node-form/array.html)
#### FieldArray (模型)
`FieldArray` 继承于 `Field` ，是数组类型字段在渲染层的模型，除了包含渲染层的常见API，还包含数组的基本操作如 `FieldArray.map`, `FieldArray.remove`, `FieldArray.append` 等。API 的使用方法也可见上述[数组例子](https://flowgram.ai/examples/node-form/array.html)。
[> FieldArray 模型 API](https://github.com/bytedance/flowgram.ai/blob/main/packages/node-engine/form/src/types/field.ts#L69)
#### Form(组件)
`Form` 组件是表单的最外层高阶组件，上述 `Field` `FieldArray` 等能力仅在该高阶组件下可以使用。节点表单的渲染已经将`` 封装到了引擎内部，所以用户无需关注，可以直接在`render` 返回的 react 组件中直接使用 `Field`。但如果用户需要独立使用表单引擎，或者在节点之外独立再渲染一次表单，需要自行在表单内容外包上`Form`组件。
#### Form(模型)
`Form` 实例可通过`render` 函数的入参获得， 也可通过 hook `useForm` 获取，见[例子](#useform)。它是表单核心模型门面，用户可以通过Form 实例操作表单数据、监听变更、触发校验等。
[> Form 模型 API](https://github.com/bytedance/flowgram.ai/blob/main/packages/node-engine/form/src/types/form.ts#L58)
### 校验
基于[FormMeta](#formmeta)章节中提到的"数据与渲染分离"概念，校验逻辑需配置在 `FormMeta` 全局, 并通过路径匹配方式声明校验逻辑所作用的表单项，如下例子。
路径支持模糊匹配，见[路径](#路径)章节。
```tsx pure
export const renderValidateExample = ({ form }: FormRenderProps) => (
<>
{({ field: { value, onChange }, fieldState }: FieldRenderProps) => (
<>
)}
) => (
<>
)}
/>
);
export const VALIDATE_EXAMPLE: FormMeta = {
render: renderValidateExample,
// 校验时机配置
validateTrigger: ValidateTrigger.onChange,
/*
* 也可支持动态函数写法, 用于根据 values 生成校验器:
* validate: (values, ctx) => ({ a: () => '', b: () => '', c, () => '' })
*/
validate: {
// 单纯校验值
a: ({ value }) => (value.length > 5 ? '最大长度为5' : undefined),
// 校验依赖其他表单项的值
b: ({ value, formValues }) => {
if (formValues.a) {
return undefined;
} else {
return value ? 'undefined' : 'a 存在时 b 必填';
}
},
// 校验依赖节点或画布信息
c: ({ value, formValues, context }) => {
const { node， playgroundContext } = context;
// 此处逻辑省略
},
},
};
```
#### 校验时机
`validateTrigger` 建议配置 `ValidateTrigger.onChange` 即数据变更时校验，如果配置 `ValidateTrigger.onBlur`, 校验只会在组件blur事件触发时触发。那么当节点表单不渲染的情况下，就算是数据变更了，也不会触发校验。
#### 主动触发校验
1. 主动触发整个表单的校验
```tsx pure
const form = useForm()
form.validate()
```
2. 主动触发单个表单项校验
```tsx pure
const validate = useFieldValidate(name)
validate()
```
`name` 不传则默认获取当前 `` 标签下的 `Field` 的 `validate`, 通过传 `name` 可获取 `` 下任意 `Field`。
### 路径
1. 表单路径以`.`为层级分隔符， 如 `a.b.c` 指向数据 `{a:{b:{c:1}}}` 下的 `1`
2. 路径支持模糊匹配，在校验和副作用配置中会使用到。如下例子。通常在数组场景中使用较多。
注意：* 仅代表下钻一级
| `arr.*` |
`arr` 字段的所有一级子项 |
| `arr.x.*` |
`arr.x` 的所有一级子项 |
| `arr.*.x` |
`arr` 所有一级子项下的 `x` |
### 副作用 (effect)
副作用是节点表单特有的概念，指在节点数据发生变更时需要执行的副作用。同样，遵循 "数据与渲染分离" 的原则，副作用和校验相似，也配置在 `FormMeta` 全局。
- 通过 key value 形式配置，key 表示表单项路径匹配规则，支持模糊匹配，value 为作用在该路径上的effect。
- value 为数组，即支持一个表单项有多个effect。
```tsx pur
export const EFFECT_EXAMPLE: FormMeta = {
...
effect: {
['a.b']: [
{
event: DataEvent.onValueChange,
effect: ({ value }: EffectFuncProps) => {
console.log('a.b value changed:', value);
},
},
],
['arr.*']:[
{
event: DataEvent.onValueInit,
effect: ({ value, name }: EffectFuncProps) => {
console.log(name + ' value init:', value);
},
},
]
}
};
```
``` tsx pur
interface EffectFuncProps {
name: FieldName;
value: TFieldValue;
prevValue?: TFieldValue;
formValues: TFormValues;
form: IForm;
context: NodeContext;
}
```
[Effect 相关 API](https://github.com/bytedance/flowgram.ai/blob/main/packages/node-engine/node/src/types.ts#L54)
#### 副作用时机
| `DataEvent.onValueChange` |
数据变更时触发 |
| `DataEvent.onValueInit` |
数据初始化时触发 |
| `DataEvent.onValueInitOrChange` |
数据初始化和变更时都会触发 |
### 联动
[> 联动例子](/examples/node-form/dynamic.html)
## hooks
### 节点表单内
以下hook 可在节点表单内部使用
#### useCurrentField
`() => Field`
该 hook 需要在Field 标签内部使用
```tsx pur
const field = useCurrentField()
```
[> Field 模型 API](https://github.com/bytedance/flowgram.ai/blob/main/packages/node-engine/form/src/types/field.ts#L34)
#### useCurrentFieldState
`() => FieldState`
该 hook 需要在Field 标签内部使用
```tsx pur
const fieldState = useCurrentFieldState()
```
[> FieldState API](https://github.com/bytedance/flowgram.ai/blob/main/packages/node-engine/form/src/types/field.ts#L158)
#### useFieldValidate
`(name?: FieldName) => () => Promise`
如果需要主动触发字段的校验，可以使用该hook 获取到 Field 的 validate 函数。
`name` 为 Field 的路径，不传则默认获取当前 `` 下的validate
```tsx pur
const validate = useFieldValidate()
validate()
```
#### useForm
`() => Form`
用于获取 Form 实例。
注意，该hook 在 `render` 函数第一层不生效，仅在 `render` 函数内的 react 组件内部才可使用。`render` 函数的入参中已经传入了 `form: Form`, 可以直接使用。
1. 在 render 函数第一层直接使用 `props.form`
```tsx pur
const formMeta = {
render: ({form}) =>
{form.getValueIn('my.path')}
}
```
2. 在组件内部可使用 `useForm`
```tsx pur
const formMeta = {
render: () =>
}
// MySelect.tsx
...
const form = useForm()
const valueNeeded = form.getValueIn('my.other.path')
...
```
注意：Form 的 api 不具备任何响应式能力，若需监听某字段值，可使用 [useWatch](#usewatch)
#### useWatch
`(name: FieldName) => TValue`
该 hook 和上述 `useForm` 相似, 在 `render` 函数返回组件的第一层不生效，仅在封装过的组件内部可用。如果需要在 `render` 根级别使用，可以对 `render` 返回的内容做一层组件封装。
```tsx pur
{
render: () =>
}
// A.tsx
...
const b = useWatch('b')
// do something with b
...
```
### 节点表单外
以下 hook 用于在节点表单外部，如画布全局、相邻节点上需要去监听某个节点表单的数据或状态。通常需要传入 `node: FlowNodeEntity` 作为参数
#### useWatchFormValues
监听 node 内整个表单的值
`(node: FlowNodeEntity) => TFormValues | undefined`
```tsx pur
const values = useWatchFormValues(node)
```
#### useWatchFormValueIn
监听 node 内某个表单项的值
`(node: FlowNodeEntity，name: string) => TFormValues | undefined`
```tsx pur
const value = useWatchFormValueIn(node, name)
```
#### useWatchFormState
监听 node 内表单的状态
`(node: FlowNodeEntity) => FormState | undefined`
```tsx pur
const formState = useWatchFormState(node)
```
#### useWatchFormErrors
监听 node 内表单的 Errors
`(node: FlowNodeEntity) => Errors | undefined`
```tsx pur
const errors = useWatchFormErrors(node)
```
#### useWatchFormWarnings
监听 node 内表单的 Warnings
`(node: FlowNodeEntity) => Warnings | undefined`
```tsx pur
const warnings = useWatchFormErrors(node)
```
---
url: /guide/form/without-form.md
---
# 不使用表单
当节点引擎不开启，节点的 data 数据会存在 `node.getExtInfo` 中, 如下
```tsx pure
export const useEditorProps = () => {
return {
// ...
nodeEngine: {
enable: false, // 不开启节点引擎，则无法使用 form
},
history: {
enable: true,
enableChangeNode: false // 不再监听表单数据变化
},
materials: {
/**
* Render Node
*/
renderDefaultNode: ({ node }: WorkflowNodeProps) => {
return (
node.updateExtInfo({ title: e.target.value})}/>
);
},
},
// /...
}
}
```
---
url: /guide/form/form-materials.md
---
# 官方表单物料
文档已迁移到：[物料](/materials/introduction.html)
---
url: /guide/variable/basic.md
---
# 介绍
:::warning
本文档的变量引擎属于 FlowGram **设计态**，和运行态的变量引擎不同。
:::
## 阅读路径
- 在这里先建立「变量是什么」以及「为什么需要变量引擎」的整体心智。
- 接下来建议直接上手：[输出变量](./variable-output.mdx) → [消费变量](./variable-consume.mdx)，先学会如何在节点中产出变量，再去读取。
- 当在实践中遇到作用域或类型等疑问时，再回到[核心概念](./concept.mdx)查阅详细术语。
## 什么是变量？
想象一下，你在搭建一个复杂的乐高模型，每个模块都需要精确地连接在一起。在工作流（Workflow）的世界里，**变量**就扮演着类似“连接件”的角色。它们是用来在不同节点之间传递信息的“信使”。
简单来说，变量就是一个带名字的容器，你可以往里面装各种东西，比如用户的输入、计算结果，或者从某个地方获取的数据。
一个变量通常由三部分组成：
- **名字（唯一标识符）**：类似个人姓名，用于准确定位某个变量。例如 `userName`、`orderId`。
- **值**：容器里装的东西。它可以是数字 `123`，文字 `"Hello FlowGram!"`，或者一个开关状态 `true` / `false`。
- **类型**：规定了这个容器能装哪种东西。比如，有的只能装数字，有的只能装文字。
---
举个例子，在一个“智能问答”流程中：
1. **`WebSearch` 节点**：负责上网搜索，然后把搜到的知识（比如“今天天气怎么样？”的答案）放进一个名为 `natural_language_desc` 的变量里。
2. **`LLM` 节点**：它会接过 `natural_language_desc` 这个“信使”，读取里面的内容，然后用更自然、更友好的方式回答用户。
3. 在这个过程中，`natural_language_desc` 的类型就是“字符串”，因为它装的是文字内容。
### 设计态定义 vs. 运行态取值
在**设计态**（绘制流程时），我们只需要确定变量的**定义**：名字、类型以及可选的元信息。变量引擎会把这些定义管理成结构化的数据。
到了**运行态**，FlowGram 会依据这些定义为每次执行赋值。因此在设计时，先关注结构与约束；在运行时，所有节点就能依赖这些定义稳定地读写实际数据。
## 为什么需要变量引擎？
随着工作流复杂度的提升，变量的数量和管理难度也随之增加。
为了应对这一挑战，FlowGram 提供了强大的**变量引擎**。
它如同一位专业的“数据管家”，能够系统化地管理所有变量，确保数据流的清晰与稳定。
启用变量引擎将为您带来以下核心优势：
作用域约束：精准的数据访问控制
变量引擎能够精确控制每个变量的有效范围（即作用域）。如同为不同房间配置专属钥匙，它确保了变量只在预期的节点中被访问，从而有效避免了数据污染和意外的逻辑错误。
`Start` 节点定义的 `query` 变量，在它后面的 `LLM` 和 `End` 节点都能轻松访问。
`LLM` 节点处于 `Condition` 分支，等同于位于独立空间；外部的 `End` 节点无法访问其 `result` 变量。
变量结构透视：轻松洞悉复杂数据
当变量结构较复杂（例如包含多层嵌套的对象）时，变量引擎支持逐层展开，便于定位每一项数据。
下图展示了所有节点的输出变量与层级关系，便于整体审视变量结构。
类型自动推导：心有灵犀一点通
无需为每个变量逐一指定类型，变量引擎可依据上下文自动完成推导。
例如，当 `Start` 节点中 `arr` 变量的类型发生变更时，`Batch` 节点输出的 `item` 类型也会自动同步更新，确保了类型的一致性。
:::tip
建议先把变量读写跑通；当你需要深入理解作用域链、AST、声明、表达式等底层模型时，再阅读[变量概念](./concept.mdx)。
:::
## 如何开启变量引擎？
您可以通过简单的配置来启用变量引擎，以体验其强大的功能。
[> 查看 API 详情](https://flowgram.ai/auto-docs/editor/interfaces/VariablePluginOptions.html)
```tsx pure title="use-editor-props.ts" {3}
// 在 EditorProps 中开启变量引擎
{
variableEngine: {
// 设置为 true 即可开启变量引擎
enable: true
}
}
```
## 接下来可以看看（推荐顺序）
- [输出变量](./variable-output.mdx)：先学会在节点、插件、全局作用域中产出变量。
- [消费变量](./variable-consume.mdx)：再学习如何在节点、UI 中安全读取变量。
- [变量概念](./concept.mdx)：最后回顾作用域、AST、声明、类型等核心名词。
---
url: /guide/variable/variable-output.md
---
# 输出变量
我们主要将输出变量分为三类：
1. **输出节点变量**：通常作为该节点的产出，供后续节点使用。
2. **输出节点私有变量**：输出变量仅限于节点内部（包括子节点），不能被外部节点访问。
3. **输出全局变量**：贯穿整个流程，任何节点都可以读取，适合存放一些公共状态或配置。
:::info{title="阅读指引"}
- 读完[变量介绍](./basic.mdx)后，可先从这里开始，通过实践搞清楚「变量是如何被产出的」。
- 若你从表单配置出发，优先阅读「方式一：通过表单副作用同步」；若需要运行时动态创建变量，请看插件或 UI 相关章节。
- 文中所有示例均使用了 `ASTFactory`，可先对照[变量概念 - AST 小节](./concept#ast-) 理解 AST 的概念。
:::
## 输出节点变量
输出节点变量与当前节点的生命周期绑定：节点创建时变量诞生，节点删除时变量消失。（详见：[节点作用域](./concept#节点作用域)）
我们通常有三种方式来输出节点变量：
:::info{title="如何选择方式"}
- 变量定义源于表单配置 → 方式一。
- 变量在运行时根据逻辑生成或批量同步 → 方式二。
- UI 里直接写变量只作临时调试，正式环境请避免使用方式三。
:::
### 方式一：通过表单副作用同步
[表单副作用](/guide/form/form#副作用-effect) 通常在节点的 `form-meta.ts` 文件中进行配置，是定义节点输出变量最常见的方式。
:::info{title="适用场景"}
- 节点的变量模型可以从表单项推导出来。
:::
#### `provideJsonSchemaOutputs`
若节点所需输出变量的结构与 [JSON Schema](https://json-schema.org/) 结构匹配，即可使用官方提供的 `provideJsonSchemaOutputs` 副作用物料。
详见文档： [provideJsonSchemaOutputs](/materials/effects/provide-json-schema-outputs)
#### `createEffectFromVariableProvider`
`provideJsonSchemaOutputs` 只适配 `JsonSchema`。如果你想要定义自己的一套 Schema，那么就需要自定义表单的副作用。
:::note
FlowGram 提供了 `createEffectFromVariableProvider`，只需要定义一个 `parse`函数，就可以自定义自己的变量同步副作用：
- `parse` 会在表单值初始化和更新时被调用
- `parse` 的输入为当前字段的表单的值
- `parse` 的输出为变量 AST
:::
下面这个例子中，我们为表单的两个字段 `path.to.value` 和 `path.to.value2` 分别创建了输出变量：
```tsx pure title="form-meta.ts" {26-37,40-56}
import {
createEffectFromVariableProvider,
ASTFactory,
type ASTNodeJSON
} from '@flowgram.ai/fixed-layout-editor';
export function createTypeFromValue(typeValue: string): ASTNodeJSON | undefined {
switch (typeValue) {
case 'string':
return ASTFactory.createString();
case 'number':
return ASTFactory.createNumber();
case 'boolean':
return ASTFactory.createBoolean();
case 'integer':
return ASTFactory.createInteger();
default:
return;
}
}
export const formMeta = {
effect: {
// Create first variable
// = node.scope.setVar('path.to.value', ASTFactory.createVariableDeclaration(parse(v)))
'path.to.value': createEffectFromVariableProvider({
// parse form value to variable
parse(v: string, { node }) {
return [{
meta: {
title: `Your Output Variable Title`,
},
key: `uid_${node.id}`,
type: createTypeFromValue(v)
}]
}
}),
// Create second variable
// = node.scope.setVar('path.to.value2', ASTFactory.createVariableDeclaration(parse(v)))
'path.to.value2': createEffectFromVariableProvider({
// parse form value to variable
parse(v: { name: string; typeValue: string }[], { node }) {
return {
meta: {
title: `Second Output Variable For ${node.form.getValueIn("title")}`,
},
key: `uid_${node.id}_2`,
type: ASTFactory.createObject({
properties: v.map(_item => ASTFactory.createProperty({
key: _item.name,
type: createTypeFromValue(_item.typeValue)
}))
})
}
}
}),
},
render: () => (
// ...
)
}
```
:::tip
如果你的协议比较复杂，不知道如何解析为 AST，不妨参考下官方物料中 Json Schema 转换为 AST 的实现：[JsonSchemaUtils.schemaToAST](https://github.com/bytedance/flowgram.ai/blob/main/packages/variable-engine/json-schema/src/json-schema/utils.ts)
:::
:::warning
使用 VariableSelector 官方物料进行变量选择时，**当前节点定义的每个输出变量都会作为独立的树节点显示**，而非默认按节点进行分组。参考 [VariableSelector 物料文档](/materials/components/variable-selector)
:::
#### 多个表单字段同步到一个变量上
如果多个字段同步到一个变量，就需要用到 `createEffectFromVariableProvider` 的 `namespace` 字段，将多个字段的变量数据同步到同一个命名空间上。
```tsx pure title="form-meta.ts" {11}
import {
createEffectFromVariableProvider,
ASTFactory,
} from '@flowgram.ai/fixed-layout-editor';
/**
* 从 form 拿到多个字段的信息
*/
const variableSyncEffect = createEffectFromVariableProvider({
// 必须添加，确保不同字段的副作用，同步到同一个命名空间上
namespace: 'your_namespace',
// 将表单值解析为变量
parse(_, { form, node }) {
// 注意：form 字段要求 flowgram 版本 > 0.5.5, 之前的版本可以通过 node.form 获取
return [{
meta: {
title: `Title_${form.getValueIn('path.to.value')}_${form.getValueIn('path.to.value2')}`,
},
key: `uid_${node.id}`,
type: ASTFactory.createCustomType({ typeName: "CustomVariableType" })
}]
}
})
export const formMeta = {
effect: {
'path.to.value': variableSyncEffect,
'path.to.value2': variableSyncEffect,
},
render: () => (
// ...
)
}
```
#### 在副作用中使用 `node.scope` API
如果 `createEffectFromVariableProvider` 不能满足你的需求，你也可以直接在表单副作用中使用 `node.scope` API，进行更加灵活多变的变量操作。
:::note
`node.scope` 会返回一个节点的变量作用域（Scope）对象，这个对象上挂载了几个核心方法：
- `setVar(variable)`: 设置一个变量。
- `setVar(namespace, variable)`: 在指定的命名空间下设置一个变量。
- `getVar()`: 获取所有变量。
- `getVar(namespace)`: 获取指定命名空间下的变量。
- `clearVar()`: 清空所有变量。
- `clearVar(namespace)`: 清空指定命名空间下的变量。
:::
```tsx pure title="form-meta.tsx" {10-18,29-38}
import { Effect } from '@flowgram.ai/editor';
export const formMeta = {
effect: {
'path.to.value': [{
event: DataEvent.onValueInitOrChange,
effect: ((params) => {
const { context, value } = params;
context.node.scope.setVar(
ASTFactory.createVariableDeclaration({
meta: {
title: `Title_${value}`,
},
key: `uid_${context.node.id}`,
type: ASTFactory.createString(),
})
)
console.log("查看生成的变量", context.node.scope.getVar())
}) as Effect,
}],
'path.to.value2': [{
event: DataEvent.onValueInitOrChange,
effect: ((params) => {
const { context, value } = params;
context.node.scope.setVar(
'namespace_2',
ASTFactory.createVariableDeclaration({
meta: {
title: `Title_${value}`,
},
key: `uid_${context.node.id}_2`,
type: ASTFactory.createNumber(),
})
)
console.log("查看生成的变量", context.node.scope.getVar('namespace_2'))
}) as Effect,
}],
},
render: () => (
// ...
)
}
```
### 方式二：通过插件同步变量
除了在表单中静态配置，我们还可以在插件（Plugin）中，通过 `node.scope` 更新自由动态地操作节点的变量。
:::info{title="适用场景"}
- 需要跨多个节点批量创建或调整变量。
- 需要在画布初始化阶段自动补齐默认变量。
:::
#### 指定节点的 Scope 进行更新
下面的例子演示了如何在插件的 `onInit`生命周期中，获取开始节点的 `Scope`，并对它的变量进行一系列操作。
```tsx pure title="sync-variable-plugin.tsx" {10-22}
import {
FlowDocument,
definePluginCreator,
PluginCreator,
} from '@flowgram.ai/fixed-layout-editor';
export const createSyncVariablePlugin: PluginCreator =
definePluginCreator({
onInit(ctx, options) {
const startNode = ctx.get(FlowDocument).getNode('start_0');
const startScope = startNode.scope!
// Set Variable For Start Scope
startScope.setVar(
ASTFactory.createVariableDeclaration({
meta: {
title: `Your Output Variable Title`,
},
key: `uid`,
type: ASTFactory.createString(),
})
)
}
})
```
#### 在 onNodeCreate 同步变量
下面的例子演示了如何通过 `onNodeCreate` 获取到新创建节点的 Scope，并通过监听 `node.form.onFormValuesChange` 实现变量的同步操作。
```tsx pure title="sync-variable-plugin.tsx" {10,29}
import {
FlowDocument,
definePluginCreator,
PluginCreator,
} from '@flowgram.ai/fixed-layout-editor';
export const createSyncVariablePlugin: PluginCreator =
definePluginCreator({
onInit(ctx, options) {
ctx.get(FlowDocument).onNodeCreate(({ node }) => {
const syncVariable = (title: string) => {
node.scope?.setVar(
ASTFactory.createVariableDeclaration({
key: `uid_${node.id}`,
meta: {
title,
icon: iconVariable,
},
type: ASTFactory.createString(),
})
);
};
if (node.form) {
// sync variable on init
syncVariable(node.form.getValueIn('title'));
// listen to form values change
node.form?.onFormValuesChange(({ values, name }) => {
// title field changed
if (name.match(/^title/)) {
syncVariable(values[name]);
}
});
}
});
}
})
```
### 方式三：在 UI 中同步变量（不推荐）
:::warning
直接在 UI 中同步变量（方式三）是一种 **非常不推荐** 的做法。它会打破**数据和渲染分离**的原则，会导致数据和渲染之间的紧密耦合，可能会导致：
- 关闭节点侧边栏，就无法触发变量同步，导致数据和渲染之间的不一致。
- 画布如果开启了只渲染视图内可见节点的性能优化，如果节点不在视图内，则联动逻辑会失效
:::
下面的例子演示了如何在 `formMeta.render` 中，通过 `useCurrentScope` 事件，同步更新变量。
```tsx pure title="form-meta.ts" {13}
import {
createEffectFromVariableProvider,
ASTFactory,
} from '@flowgram.ai/fixed-layout-editor';
/**
* 从 form 拿到多个字段的信息
*/
const FormRender = () => {
/**
* 获取到当前作用域，用于后续设置变量
*/
const scope = useCurrentScope()
return <>
{
scope.setVar(
ASTFactory.createVariableDeclaration({
meta: {
title: values.title,
},
key: `uid`,
type: ASTFactory.createString(),
})
)
}}
/>
}
export const formMeta = {
render: () =>
}
```
## 输出节点私有变量
私有变量是指只能在当前节点及其子节点中访问的变量。（详见：[节点私有作用域](./concept#节点私有作用域)）
:::tip
判断是否要使用私有作用域的小诀窍：变量内容只为节点内部实现服务，并不希望暴露给下游节点时，就放到 `node.privateScope`。
:::
下面只列举其中两种方式，其他方式可以根据[输出节点变量](#输出节点变量)的方式类推。
### 方式一：`createEffectFromVariableProvider`
`createEffectFromVariableProvider` 提供了参数 `scope`，用于指定变量的作用域。
- `scope` 设置为 `private` 时，变量的作用域为当前节点的私有作用域 `node.privateScope`
- `scope` 设置为 `public` 时，变量的作用域为当前节点的作用域 `node.scope`
```tsx pure title="form-meta.ts" {11}
import {
createEffectFromVariableProvider,
ASTFactory,
} from '@flowgram.ai/fixed-layout-editor';
export const formMeta = {
effect: {
// Create variable in privateScope
// = node.privateScope.setVar('path.to.value', ASTFactory.createVariableDeclaration(parse(v)))
'path.to.value': createEffectFromVariableProvider({
scope: 'private',
// parse form value to variable
parse(v: string, { node }) {
return [{
meta: {
title: `Private_${v}`,
},
key: `uid_${node.id}_locals`,
type: ASTFactory.createBoolean(),
}]
}
}),
},
render: () => (
// ...
)
}
```
### 方式二：`node.privateScope`
`node.privateScope` 的 API 设计得和节点作用域（`node.scope`）几乎一模一样，都提供了 `setVar`、`getVar`、`clearVar`等方法，并且同样支持命名空间（namespace）。详情可以参考 [`node.scope`](#在副作用中使用-nodescope-api)。
```tsx pure title="form-meta.tsx" {10-18}
import { Effect } from '@flowgram.ai/editor';
export const formMeta = {
effect: {
'path.to.value': [{
event: DataEvent.onValueInitOrChange,
effect: ((params) => {
const { context, value } = params;
context.node.privateScope.setVar(
ASTFactory.createVariableDeclaration({
meta: {
title: `Your Private Variable Title`,
},
key: `uid_${context.node.id}`,
type: ASTFactory.createInteger(),
})
)
console.log("查看生成的变量", context.node.privateScope.getVar())
}) as Effect,
}],
},
render: () => (
// ...
)
}
```
## 输出全局变量
全局变量就像是整个流程的“共享内存”，任何节点、任何插件都可以访问和修改它。它非常适合用来存储一些贯穿始终的状态，比如用户信息、环境配置等等。（详见：[全局作用域](./concept#全局作用域)）
:::info{title="何时选用全局作用域"}
- 变量在多个流程节点甚至插件中被复用。
- 变量与具体节点解耦，例如环境配置、用户上下文。
- 需要在流程初始化阶段就写入，后续节点只需读取。
:::
和节点变量类似，我们也有两种主要的方式来获取全局变量的作用域（`GlobalScope`）。
### 方式一：在插件中获取
在插件的上下文中（`ctx`），我们可以直接“注入”`GlobalScope` 的实例：
```tsx pure title="global-variable-plugin.tsx" {10-20}
import {
GlobalScope,
definePluginCreator,
PluginCreator
} from '@flowgram.ai/fixed-layout-editor';
export const createGlobalVariablePlugin: PluginCreator =
definePluginCreator({
onInit(ctx, options) {
const globalScope = ctx.get(GlobalScope)
globalScope.setVar(
ASTFactory.createVariableDeclaration({
meta: {
title: `Your Output Variable Title`,
},
key: `your_variable_global_unique_key`,
type: ASTFactory.createString(),
})
)
}
})
```
### 方式二：在 UI 中获取
如果你想在画布的 React 组件中与全局变量交互，可以使用 `useService` 这个 Hook 来获取 `GlobalScope` 的实例：
```tsx pure title="global-variable-component.tsx" {7}
import {
GlobalScope,
useService,
} from '@flowgram.ai/fixed-layout-editor';
function GlobalVariableComponent() {
const globalScope = useService(GlobalScope)
// ...
const handleChange = (v: string) => {
globalScope.setVar(
ASTFactory.createVariableDeclaration({
meta: {
title: `Your Output Variable Title`,
},
key: `uid_${v}`,
type: ASTFactory.createString(),
})
)
}
return
}
```
### 全局作用域的 API
`GlobalScope` 的 API 设计得和节点作用域（`node.scope`）几乎一模一样，都提供了 `setVar`、`getVar`、`clearVar` 等方法，并且同样支持命名空间（namespace）。详情可以参考 [`node.scope`](#在副作用中使用-nodescope-api)。
下面是一个在插件中操作全局变量的综合示例：
```tsx pure title="sync-variable-plugin.tsx" {11-39}
import {
GlobalScope,
} from '@flowgram.ai/fixed-layout-editor';
// ...
onInit(ctx, options) {
const globalScope = ctx.get(GlobalScope);
// 1. Create, Update, Read, Delete Variable in GlobalScope
globalScope.setVar(
ASTFactory.createVariableDeclaration({
meta: {
title: `Your Output Variable Title`,
},
key: `your_variable_global_unique_key`,
type: ASTFactory.createString(),
})
)
console.log(globalScope.getVar())
globalScope.clearVar()
// 2. Create, Update, Read, Delete Variable in GlobalScope's namespace: 'namespace_1'
globalScope.setVar(
'namespace_1',
ASTFactory.createVariableDeclaration({
meta: {
title: `Your Output Variable Title 2`,
},
key: `uid_2`,
type: ASTFactory.createString(),
})
)
console.log(globalScope.getVar('namespace_1'))
globalScope.clearVar('namespace_1')
// ...
}
```
详见：[Class: GlobalScope](https://flowgram.ai/auto-docs/editor/classes/GlobalScope.html)
---
url: /guide/variable/variable-consume.md
---
# 消费变量
在 FlowGram 中，当一个节点想要使用到前序节点的变量，就需要消费变量。
:::info{title="阅读提示"}
- 建议先完成[输出变量](./variable-output.mdx)，确保知道变量是如何被产出的；本篇作为第二站，专注于「如何拿到变量」。
- 如果想快速看看变量选择器的效果，可先用用 [VariableSelector](#variableselector)；若需要在代码里拿到变量列表，再继续阅读后续 API 章节。
- 本文示例默认使用「节点作用域」。涉及节点私有或全局作用域时，可随时参考[核心概念 - 画布中的变量](./concept#画布中的变量)补充理解。
:::
## `VariableSelector`
为了让你能更轻松地在应用中集成变量选择的功能，官方物料提供了 `VariableSelector` 组件。
详见文档： [VariableSelector](/materials/components/variable-selector)
## 获取可访问的变量树
在画布的节点中，我们常常需要获取**当前作用域下可用的变量**，并将它们以树形结构展示出来，方便用户进行选择和操作。
:::info{title="常见需求拆解"}
- **仅需要展示变量列表** → `useAvailableVariables`
- **需要展示并响应对象/数组的下钻字段** → `ASTMatch` + 递归渲染
- **需要精准订阅指定变量/监听变化** → 直接操作 `scope.available`
:::
### `useAvailableVariables`
`useAvailableVariables` 是一个轻量级的 Hook，它直接返回当前作用域可用的变量数组 (`VariableDeclaration[]`)。
```tsx pure title="use-variable-tree.tsx" {7}
import {
type BaseVariableField,
useAvailableVariables,
} from '@flowgram.ai/fixed-layout-editor';
// .... 在 React 组件或 Hook 中
const availableVariables = useAvailableVariables();
const renderVariable = (variable: BaseVariableField) => {
// 这里可以根据你的需求渲染每个变量
// ....
}
return availableVariables.map(renderVariable);
// ....
```
### 获取 Object 类型变量的下钻
当变量的类型是 `Object` 时，我们往往需要能够“下钻”到它的内部，获取其属性。`ASTMatch.isObject` 方法可以帮助我们判断一个变量类型是否为对象。如果是，我们就可以递归地渲染它的 `properties`。
:::tip
变量树的每一层其实都是「声明」(`BaseVariableField`)。在对象场景下，`properties` 就是下一级声明数组。
:::
```tsx pure title="use-variable-tree.tsx" {12}
import {
type BaseVariableField,
ASTMatch,
} from '@flowgram.ai/fixed-layout-editor';
// ....
const renderVariable = (variable: BaseVariableField) => ({
title: variable.meta?.title,
key: variable.key,
// 只有 Object 类型的变量才可以下钻
children: ASTMatch.isObject(variable.type) ? variable.type.properties.map(renderVariable) : [],
});
// ....
```
### 获取 Array 类型变量的下钻
与 `Object` 类型类似，当遇到 `Array` 类型的变量时，我们也希望能展示它的内部结构。对于数组，我们通常关心的是其元素的类型。`ASTMatch.isArray` 可以判断变量类型是否为数组。值得注意的是，数组的元素类型可能是任意的，甚至可能是另一个数组。因此，我们需要一个递归的辅助函数 `getTypeChildren` 来处理这种情况。
```tsx pure title="use-variable-tree.tsx" {13,16}
import {
type BaseVariableField,
type BaseType,
ASTMatch,
} from '@flowgram.ai/fixed-layout-editor';
// ....
const getTypeChildren = (type?: BaseType): BaseVariableField[] => {
if (!type) return [];
// 获取 Object 的属性
if (ASTMatch.isObject(type)) return type.properties;
// 递归获取 Array 的元素类型
if (ASTMatch.isArray(type)) return getTypeChildren(type.items);
return [];
};
const renderVariable = (variable: BaseVariableField) => ({
title: variable.meta?.title,
key: variable.key,
children: getTypeChildren(variable.type).map(renderVariable),
});
// ....
```
## `scope.available`
`scope.available` 是变量系统的核心之一，可以对 **作用域内可用变量** 进行更加高级的变量获取和监听动作。
:::info{title="何时直接用 scope.available？"}
- 需要通过 keyPath 精确读取或校验变量。
- 需要在 Hook 之外（如插件、服务）操作变量可见性。
- 需要订阅变量变化但不希望整个列表刷新。
:::
### `useScopeAvailable`
`useScopeAvailable` 能够在 React 中直接返回 `scope.available`
```tsx
import { useScopeAvailable } from '@flowgram.ai/free-layout-editor';
const available = useScopeAvailable();
// available 对象上包含了变量列表和其他 API
console.log(available.variables);
// 获取单个变量
console.log(available.getByKeyPath(['start_0', 'xxx']));
// 监听单个变量的变化
available.trackByKeyPath(['start_0', 'xxx'], () => {
// ...
})
```
:::info{title="与 useAvailableVariables 的主要区别"}
* **返回值不同**：`useAvailableVariables` 直接返回变量数组，而 `useScopeAvailable` 返回的是一个包含了 `variables` 属性以及其他方法的 `ScopeAvailableData` 对象。
* **适用场景**：当你需要对变量进行更复杂的操作，比如通过 `trackByKeyPath` 追踪单个变量的变化时，`useScopeAvailable` 是你的不二之选。
:::
:::warning{title="useScopeAvailable 会在可用变量变化时自动刷新"}
如果不想自动刷新，可以通过 autoRefresh 参数关闭：
```tsx
useScopeAvailable({ autoRefresh: false })
```
:::
### `getByKeyPath`
通过`getByKeyPath` 可以在当前作用域的可访问变量中获取特定变量字段（包括嵌套在 Object 或 Array 中的变量）
```tsx {6,13-17}
import { useScopeAvailable } from '@flowgram.ai/fixed-layout-editor';
import { useEffect, useState } from 'react';
function VariableDisplay({ keyPath }: { keyPath:string[] }) {
const available = useScopeAvailable();
const variableField = available.getByKeyPath(keyPath)
return {variableField.meta?.title}
;
}
```
`getByKeyPath` 也尝尝用于变量校验中，如：
```tsx
const validateVariableInNode = (keyPath: string, node: FlowNodeEntity) => {
// 校验变量能否被当前节点所访问
return Boolean(node.scope.available.getByKeyPath(keyPath))
}
```
### `trackByKeyPath`
当你只关心某个特定变量字段（包括嵌套在 Object 或 Array 中的变量）的变化时，`trackByKeyPath` 能让你精准地“订阅”这个变量的更新，而不会因为其他不相关变量的变化导致组件重新渲染，从而实现更精细的性能优化。
:::tip
配合 `autoRefresh: false` 使用时，可以避免大范围刷新，只在订阅的变量变化时手动更新组件状态。
:::
```tsx {6,13-18}
import { useScopeAvailable } from '@flowgram.ai/fixed-layout-editor';
import { useEffect, useState } from 'react';
function UserNameDisplay() {
// 关闭 autoRefresh 能力，防止任意变量变化触发重渲染
const available = useScopeAvailable({ autoRefresh: false });
const [userName, setUserName] = useState('');
useEffect(() => {
// 定义我们要追踪的变量路径
const keyPath = ['user', 'name'];
// 开始追踪！
const disposable = available.trackByKeyPath(keyPath, (nameField) => {
// 当 user.name 变量字段变化时，这个回调函数会被触发
// nameField 就是那个变化的变量字段，我们可以从中获取最新的默认值
setUserName(nameField?.meta.default || '');
});
// 组件卸载时取消追踪，避免内存泄漏
return () => disposable.dispose();
}, [available]); // 依赖项是 available 对象
return User Name: {userName}
;
}
```
### 整体监听 API
除了 `trackByKeyPath`，`ScopeAvailableData` 还提供了一套整体变量变化的事件监听 API，让你能够更精细地控制变量变化的响应逻辑。
这在处理一些复杂的、需要手动管理订阅的场景时非常有用。
下面我们通过一个表格来详细对比这三个核心的监听 API：
| API & 回调参数 | 触发时机 | 核心区别与适用场景 |
| :--- | :--- | :--- |
| `onVariableListChange: (variables: VariableDeclaration[]) => void` | 当可用变量的**列表结构**发生变化时。 | **只关心列表本身**。比如，上游节点新增/删除了一个输出变量，导致可用变量的总数或成员发生了变化。它不关心变量内部和下钻的改变。适用于需要根据变量列表的有无或数量来更新 UI 的场景。 |
| `onAnyVariableChange: (changedVariable: VariableDeclaration) => void` | 当列表中**任意一个**变量的**类型，元数据和下钻字段**发生变化时。 | **只关心变量定义的更新**。比如，用户修改了一个输出变量的类型。它不关心列表结构的变化。适用于需要对任何一个变量的内容变化做出反应的场景。 |
| `onListOrAnyVarChange: (variables: VariableDeclaration[]) => void` | 以上两种情况**任意一种**发生时。 | **最全面的监听**，是前两者的结合。无论是列表结构变化，还是任何一个变量的变化，都会触发。适用于需要对任何可能的变化都进行响应的“兜底”场景。 |
让我们通过一个具体的例子来看看如何在组件中使用这些 API。
```tsx {5,9-11,14-16,19-22}
import { useScopeAvailable } from '@flowgram.ai/fixed-layout-editor';
import { useEffect } from 'react';
function AdvancedListenerComponent() {
const available = useScopeAvailable({ autoRefresh: false });
useEffect(() => {
// 1. 监听列表结构变化
const listChangeDisposable = available.onVariableListChange((variables) => {
console.log('可用变量列表的结构变了！新的列表长度是：', variables.length);
});
// 2. 监听任意变量的变化
const valueChangeDisposable = available.onAnyVariableChange((changedVariable) => {
console.log(`变量 '${changedVariable.keyPath.join('.')}' 的定义变了`);
});
// 3. 监听所有变化（结构或单个变量内部）
const allChangesDisposable = available.onListOrAnyVarChange((variables) => {
console.log('变量列表或其中某个变量发生了变化！');
// 注意：这里的回调参数是完整的变量列表，而不是单个变化的变量
});
// 在组件卸载时，务必清理所有的监听器，防止内存泄漏
return () => {
listChangeDisposable.dispose();
valueChangeDisposable.dispose();
allChangesDisposable.dispose();
};
}, [available]);
return 请在控制台查看变量变化的日志...
;
}
```
:::warning
这些 API 返回的都是一个 `Disposable` 对象。为了避免内存泄漏和不必要的计算，你必须在 `useEffect` 的清理函数中调用其 `dispose()` 方法来取消监听。
:::
## 获取当前作用域的输出变量
### `useOutputVariables`
`useOutputVariables` 可以获取**当前作用域的输出变量**，并在输出变量列表或者下钻变化时**自动触发刷新**。
```tsx
const variables = useOutputVariables();
```
:::tip
useOutputVariables 在 flowgram@0.5.6 之后的版本提供，如果版本较早，可以通过以下代码实现获取：
```tsx
const scope = useCurrentScope();
const refresh = useRefresh();
useEffect(() => {
const disposable = scope.output.onListOrAnyVarChange(() => {
refresh();
});
return () => disposable.dispose();
}, [])
const variables = scope.variables;
```
:::
## 其余 API
### 获取当前作用域
可以通过 [`useCurrentScope`](https://flowgram.ai/auto-docs/editor/functions/useCurrentScope) 获取当前的作用域。
```tsx
const scope = useCurrentScope()
scope.output.variables
scope.available
```
### 设定当前作用域
可以通过 [`ScopeProvider`](https://flowgram.ai/auto-docs/editor/functions/ScopeProvider) 设定当前作用域。
```tsx
// set the scope of current node
// set to private scope of current node
```
---
url: /guide/variable/concept.md
---
# 概念
:::tip
建议先完成[输出变量](./variable-output.mdx)→[消费变量](./variable-consume.mdx)的动手实践，再回到本文作为参考手册。我们通过 🌟 标记出可**优先掌握**的概念。
:::
## 阅读路径
- 可以先快速浏览下方术语导航，确认自己要查的名词是否在其中。
- 阅读「核心概念」关系图，建立变量、作用域、AST 的整体框架。
- 按需跳转到对应小节，结合当前遇到的问题查阅细节，不必顺序阅读。
:::info{title="📖 术语快速查询"}
- **概念本体**
- [变量](#变量) 🌟：流程设计阶段定义出来、运行时才求值的数据容器。
- [作用域](#作用域-) 🌟：变量的容器，同时维护与其他作用域的依赖关系。
- [AST](#ast-) 🌟：作用域内变量信息的结构化存储方式。
- **AST 相关**
- [ASTNode](#astnode)：AST 树中的节点，表示一段变量信息。
- [ASTNodeJSON](#astnodejson)：ASTNode 的 JSON 序列化形式。
- [声明](#声明) 🌟：标识符 + 定义，变量引擎的最小信息单元。
- [类型](#类型) 🌟：用于约束变量值范围的定义。
- [表达式](#表达式)：输入若干变量后计算得到新变量。
- **作用域关系**
- [作用域链](#作用域链)：决定一个作用域能引用哪些其他作用域。
- [依赖作用域](#依赖作用域)：当前作用域可读取的上游作用域集合。
- [覆盖作用域](#覆盖作用域)：可以访问当前作用域输出变量的下游集合。
- [节点作用域](#节点作用域) 🌟：节点公开的变量集合。
- [节点私有作用域](#节点私有作用域)：仅限节点自身与子节点访问的变量。
- [全局作用域](#全局作用域)：所有节点都可读的共享变量。
:::
## 核心概念
变量引擎核心概念可以通过下图串起来理解：
:::info{title="读图重点"}
- 绿色节点代表「信息是什么」，如变量、类型、表达式。
- 红色节点代表「信息怎么存」，即 AST 节点。
- 紫色节点代表「信息放在哪」，即作用域。
- 虚线节点及线条代表「信息怎么流动」，即作用域链。
:::
为了降低抽象程度，可以先记住一个真实案例：
> 「批处理节点」读取「上游 HTTP 节点」的数组输出 → 遍历得到 `item` → 在子节点里继续使用 `item`。
这个过程涉及的所有名词都在下文出现，阅读时可随时对照。
### 变量
变量是在设计态定义、在运行态求值的数据容器。进一步了解可参考 [变量介绍](./basic.mdx)。
:::warning{title="⚠️ 变量在设计和运行中的关注点不同"}
**在流程设计中，变量只关注定义，不关注值**。变量的值在流程的[运行时](/guide/runtime/introduction)才会被动态计算。
:::
### 作用域 🌟
作用域（Scope）是一种**容器**：容器内聚合了一系列**变量信息**，同时维护了**与其他作用域的依赖关系**。一句话概括：作用域决定「谁可以访问哪些变量」。
作用域的范围可以根据业务场景的不同约定，常见的三类如下：
| 场景 | 示例 |
| :--- | :--- |
| 流程里节点可以约定为作用域 | 
|
| 全局变量侧边栏也可以约定为作用域 | 
|
| 界面编辑里组件（含变量）可以约定为作用域 | 
|
:::warning{title="为什么 FlowGram 要在节点之外，新抽象一个作用域的概念？"}
1. 节点 ≠ 作用域：同一个节点可能需要拆分成公开作用域与私有作用域。
2. 存在与节点无关的作用域，如面向全局的变量抽屉。
3. 部分节点需要多层作用域（例：循环的私有作用域），节点概念不足以描述。
:::
### AST 🌟
作用域通过 `AST` 存储变量信息。可以把它当作「变量信息」的树形结构：每个节点描述一个声明、类型或表达式。
:::tip
通过 `scope.ast` 可以访问作用域内的 `AST` 树，从而对变量信息进行 CRUD 操作。
:::
#### ASTNode
`ASTNode` 是变量引擎中用于**存储变量信息**的**基本信息单元**。它可以为各种**变量信息建模**：
- **声明**：如 `VariableDeclaration` ，用于声明新变量。
- **类型**：如 `StringType`，用于表示 String 类型。
- **表达式**：如 `KeyPathExpression`，用于对变量的引用。
:::info{title="ASTNode 具有以下特点"}
- **树状结构**: `ASTNode` 可以嵌套形成树（`AST`），表示复杂的变量结构。
- **序列化**: `ASTNode` 可以与 JSON 格式（`ASTNodeJSON`）相互转换，以便存储或传输。
- **可扩展**: 可以通过扩展 `ASTNode` 基类来添加新功能。
- **响应式**: `ASTNode` 值的变化会触发事件，从而实现响应式编程模式。
:::
#### ASTNodeJSON
`ASTNodeJSON` 是 `ASTNode` 的**纯 JSON 序列化**表示。通常我们会在设计端构造它，再交由变量引擎实例化。
最关键的字段是 `kind`，用于表示 `ASTNode` 的类型：
```tsx
/**
* 相当于 JavaScript 代码：
* `var var_index: string`
*/
{
kind: 'VariableDeclaration',
key: 'var_index',
type: { kind: 'StringType' },
}
```
用户在使用变量引擎时，通过 `ASTNodeJSON` 描述变量信息，然后通过变量引擎**实例化**为 `ASTNode`，并将其添加到作用域中。
```tsx
/**
* 通过 scope.setVar 方法，将 ASTNodeJSON 实例化为 ASTNode，并添加到作用域中
*/
const variableDeclaration: VariableDeclaration = scope.setVar({
kind: 'VariableDeclaration',
key: 'var_index',
type: { kind: 'StringType' },
});
/**
* ASTNodeJSON 实例化为 ASTNode 之后，可以进行响应式监听
*/
variableDeclaration.onTypeChange((newType) => {
console.log('变量类型变化了', newType);
})
```
:::info{title="概念比对"}
`ASTNodeJSON` 和 `ASTNode` 的关系，类似于 React 中 `JSX` 和 `VDOM` 的关系
- `ASTNodeJSON` 通过变量引擎实例化为 `ASTNode`
- `JSX` 通过 React 引擎实例化为 `VDOM`
:::
:::warning{title="❓ 为什么不用 Json Schema"}
[`Json Schema`](https://json-schema.org/) 是一种用于描述 JSON 数据结构的格式：
- `Json Schema` 只描述了变量的类型信息，而 `ASTNodeJSON` 还可以包含变量的其他信息（如：变量的初始值）。
- `ASTNodeJSON` 可以通过变量引擎实例化为 `ASTNode`，从而实现响应式监听等能力。
- `Json Schema` 擅长描述 Json 的类型，而 `ASTNodeJSON` 可以通过自定义扩展定义行为更复杂的信息。
在技术选型上，`变量引擎内核`需要更强大的扩展与表达能力，因此需要用 `ASTNodeJSON` 来描述更丰富更复杂的变量信息，如：通过定义变量的初始值，实现变量类型的动态推导 + 自动联动。
不过 `Json Schema` 作为业界通用的 JSON 类型描述格式，在易用性、跨团队沟通以及生态（如 ajv、zod）上更有优势。因此我们在[**物料库**](/materials/introduction)中大量使用了 Json Schema，来降低大家的上手成本。
:::
:::tip
变量引擎提供了 `ASTFactory`，可以**类型安全**地创建 `ASTNodeJSON`:
```tsx
import { ASTFactory } from '@flowgram/editor';
/**
* 类型安全地创建 VariableDeclaration ASTNodeJSON
*
* 等价于：
* {
* kind: 'VariableDeclaration',
* key: 'var_index',
* type: { kind: 'StringType' },
* }
*/
ASTFactory.createVariableDeclaration({
key: 'var_index',
type: { kind: 'StringType' },
});
```
:::
### 声明 🌟
声明 = 标识符（Key） + 定义（Definition）。在设计态中，声明是一种存储标识符与变量信息的 `ASTNode`，是变量系统的最小「可被引用」单元。
- 标识符（Key）：访问声明的索引。
- 定义（Definition）：声明定义的信息。如：变量的定义 = 类型 + 右值。
:::info{title="举例：JavaScript 中的声明"}
**变量声明** = 标识符 + 变量定义（类型 + 初始值）
```javascript
/**
* 标识符：some_var
* 变量定义：类型为 number，初始值为 10
*/
const some_var: number = 10;
```
**函数声明** = 标识符 + 函数定义（函数入参出参 + 函数体实现）
```javascript
/**
* 标识符：add
* 函数定义：入参为两个 number 类型的变量 a, b，出参为 number 类型的变量
*/
function add(a: number, b: number): number {
return a + b;
}
```
**结构体声明** = 标识符 + 结构体定义（字段 + 类型）
```javascript
/**
* 标识符：Point
* 结构体定义：字段为 x, y，类型均为 number
*/
interface Point {
x: number;
y: number;
}
```
:::
:::tip{title="标识符的作用"}
- `标识符`是声明的**索引**，用于访问声明中的`定义`。
- 举例：编程语言在编译时，通过`标识符`找到变量的类型`定义`，从而可以进行类型检查。
:::
变量引擎目前只提供了**变量字段声明**（`BaseVariableField`），并基于此扩展了**变量声明**（`VariableDeclaration`）和**属性声明**（`Property`）两种声明。
- 变量字段声明（`BaseVariableField`）= 标识符 + 变量字段定义（类型 + 元信息 + 初始值）
- 变量声明（`VariableDeclaration`）= **全局唯一**标识符 + 变量定义（类型 + 元信息 + 初始值 + 作用域内排序）
- 属性声明（`Property`）= **Object 内唯一**标识符 + 属性定义（类型 + 元信息 + 初始值）
### 类型 🌟
类型用于**约束变量值的范围**。在设计态中，类型也是一种 `ASTNode`。理解类型有助于掌握「变量能装什么」以及「表达式返回什么」。
变量引擎内置了 JSON 的**基础类型**：
- `StringType`：字符串
- `IntegerType`：整数
- `NumberType`：浮点数
- `BooleanType`：布尔值
- `ObjectType`：对象，可下钻 `Property` 声明。
- `ArrayType`：数组，可下钻其他类型。
同时新增了：
- `MapType`：键值对，键和值都可以进行类型定义。
- `CustomType`：由用户进行自定义扩展，如日期、时间、文件类型等。
### 表达式
表达式**输入 0 个或者多个变量**，并通过特定方式进行计算，返回一个新的**变量**。设计态只描述「依赖了谁」和「推导出的类型」，运行态负责真正的值计算。
```mermaid
graph LR
输入变量_1 --输入--> 表达式
输入变量_2 --输入--> 表达式
表达式 --返回--> 输出变量
style 表达式 stroke:#333,stroke-width:3px;
```
而在**设计态**中，表达式是一种 `ASTNode`，建模中我们只需关注：
- 表达式**使用了哪些变量声明** ?
- 表达式的**返回类型**是怎么推导的 ?
```mermaid
graph LR
变量声明_1 --输入--> 设计态中的表达式
变量声明_2 --输入--> 设计态中的表达式
设计态中的表达式 --推导--> 返回类型
style 设计态中的表达式 stroke:#333,stroke-width:3px;
```
:::info{title="举例：设计态中表达式的推导"}
假设我们有一个用 JavaScript 代码描述的表达式 `ref_var + 1`
表达式**使用了哪些变量声明** ?
- `ref_var` 标识符对应的变量声明
表达式的**返回类型**是怎么推导的 ?
- `ref_var` 的类型为 `IntegerType`，则 `ref_var + 1` 的返回类型为 `IntegerType`
- `ref_var` 的类型为 `NumberType`，则 `ref_var + 1` 的返回类型为 `NumberType`
- `ref_var` 的类型为 `StringType`，则 `ref_var + 1` 的返回类型为 `StringType`
:::
:::info{title="举例：变量引擎如何实现类型推导 + 联动"}
图中展示了一个常见的例子：批处理节点引用前序节点的输出变量，对其进行遍历处理，得到一个 item 变量。其中 item 的变量类型会随着前序节点输出变量的类型而自动变化。
这个例子的 ASTNodeJSON 可表示为：
```tsx
ASTFactory.createVariableDeclaration({
key: 'item',
initializer: ASTFactory.createEnumerateExpression({
enumerateFor: ASTFactory.createKeyPathExpression({
keyPath: ['start_0', 'arr']
})
})
})
```
变量的推导链路如下：
```mermaid
graph LR
Array_String["Array<String>"]
Ref_Var["类型为 \n Array<String> \n 的变量"]
VariableDeclaration --初始值--> EnumerateExpression
KeyPathExpression --引用--> Ref_Var
KeyPathExpression --返回类型--> Array_String
EnumerateExpression --遍历--> KeyPathExpression
EnumerateExpression --返回类型--> String
VariableDeclaration -.推导的类型.-> String
Array_String -.遍历提取子类型.-> String
Ref_Var -.类型.-> Array_String
```
:::
### 作用域链
作用域链（Scope Chain）定义了**一个作用域可以引用哪些作用域的变量**。可以把它理解成「可读变量的白名单」。变量引擎提供了抽象类，具体业务可以根据实际编排形式实现自定义的作用域链。
变量引擎内置了**自由布局作用域链**和**固定布局作用域链**两种作用域链实现。
#### 依赖作用域
`依赖作用域` = 当前作用域可以访问哪些作用域的输出变量。
可以通过 `scope.depScopes` 访问作用域的`依赖作用域`。
#### 覆盖作用域
`覆盖作用域` = 哪些作用域可以访问当前作用域的输出变量。
可以通过 `scope.coverScopes` 访问作用域的`覆盖作用域`。
## 画布中的变量
FlowGram 在画布中定义了以下几种特殊的作用域：
### 节点作用域 🌟
又称`节点公开作用域`，作用域可以访问**上游节点**的`节点作用域`的变量，同时其输出变量声明也可以被**下游节点**的`节点作用域`访问。
`节点作用域` 可以通过 `node.scope` 来设置和获取，它的作用域链关系如下图所示：
```mermaid
graph BT
subgraph 当前节点
子节点_1.scope
子节点_2.scope
当前节点.scope
end
子节点_1.scope -.依赖.-> 上游节点.scope
子节点_2.scope -.依赖.-> 上游节点.scope
当前节点.scope -.依赖.-> 上游节点.scope
下游节点.scope -.依赖.-> 上游节点.scope
下游节点.scope -.依赖.-> 当前节点.scope
下游节点.scope -.-|"❌ 不可访问"| 子节点_1.scope
下游节点.scope -.-|"❌ 不可访问"| 子节点_2.scope
linkStyle 5 stroke:red,stroke-width:2px
linkStyle 6 stroke:red,stroke-width:2px
style 当前节点.scope fill:#f9f,stroke:#333,stroke-width:3px
```
:::warning
在默认的作用域逻辑中，子节点的 `节点作用域` 输出变量不可被**父节点的下游节点** 访问。
:::
### 节点私有作用域
`节点私有作用域`的输出变量只能在**当前节点**的`节点作用域`及其**子节点**的`节点作用域`中访问。类似编程语言中`私有变量`的概念。
`节点私有作用域` 可以通过 `node.privateScope` 来设置和获取，它的作用域链关系如下图所示：
```mermaid
graph BT
subgraph 当前节点
子节点_1.scope -.依赖.-> 当前节点.privateScope
当前节点.scope -.依赖.-> 当前节点.privateScope
子节点_2.scope -.依赖.-> 当前节点.privateScope
end
当前节点 -.都依赖.-> 上游节点.scope
下游节点.scope -.依赖.-> 当前节点.scope
下游节点.scope -.依赖.-> 上游节点.scope
style 当前节点.privateScope fill:#f9f,stroke:#333,stroke-width:3px
style 当前节点.scope stroke:#333,stroke-width:3px
```
### 全局作用域
`全局作用域`的变量能被**所有节点作用域和节点私有作用域**访问，但是**自身不依赖其他作用域**。适用于配置、常量、环境变量等公共信息。
全局作用域的设置方式详见[输出全局变量](./variable-output#输出全局变量)，他的作用域链关系如下图所示：
```mermaid
graph RL
subgraph 当前节点
子节点_1.scope
子节点_2.scope
当前节点.scope
当前节点.privateScope
end
当前节点.scope -.依赖.-> 全局作用域
上游节点.scope -.依赖.-> 全局作用域
下游节点.scope -.依赖.-> 全局作用域
当前节点.privateScope -.依赖.-> 全局作用域
子节点_1.scope -.依赖.-> 全局作用域
子节点_2.scope -.依赖.-> 全局作用域
style 当前节点.scope stroke:#333,stroke-width:3px
style 全局作用域 fill:#f9f,stroke:#333,stroke-width:3px
```
## 整体架构
变量引擎设计上遵循 DIP（依赖反转）原则，按照代码稳定性、抽象层次以及与业务的距离分为三层：
### 变量抽象层
抽象层是最稳定的一层，定义了 `ASTNode`、`Scope`、`ScopeChain` 等核心接口，为上层实现提供扩展约束。
### 变量实现层
这一层包含更贴近业务的实现，易随产品演化调整。引擎内置了一批稳定的 `ASTNode` 节点和 `ScopeChain` 实现；当业务需要时，可以通过依赖注入注册新的节点或覆盖已有实现。
### 变量物料层
最外层通过外观模式（Facade）提升易用性，将复杂能力封装成「物料」给使用者直接复用。
- 变量物料的使用详见：[物料](/materials/introduction)
---
url: /guide/variable/custom-scope-chain.md
---
# 作用域链
:::info{title="阅读前提"}
- 建议先完成[输出变量](./variable-output.mdx)、[消费变量](./variable-consume.mdx)的实践。
- 如果对作用域概念还不够熟悉，可先回顾[核心概念 - 作用域链](./concept#作用域链)。
:::
## 默认作用域链逻辑
详见：[画布中的作用域](./concept#画布中的变量)
## 在 `editor-props` 中定制
作用域的定制逻辑，通常在 `editor-props` 中，通过 `variableEngine.chainConfig` 定制。
```tsx pure title="use-editor-props.tsx" {6-8}
// ...
{
// ...
variableEngine: {
enable: true,
chainConfig: {
// 作用域链逻辑定制
}
}
// ...
}
// ...
```
### 子节点能否被后续节点依赖
**默认情况下，子节点是不可以被父节点的后续节点依赖的**。
如果需要定制这个逻辑，需要在 `variableEngine.chainConfig.isNodeChildrenPrivate` 中配置。
```tsx pure title="use-editor-props.tsx" {8-15}
{
variableEngine: {
enable: true,
chainConfig: {
/**
* 定制：子节点是否可以被父节点的后续节点依赖
*/
isNodeChildrenPrivate(node) {
// 当命中用户某类自定义节点时，允许其子节点被后续节点依赖
if (node.flowNodeType === 'Your_Custom_Type') {
return false;
}
// 否则：默认不允许子节点被后续节点依赖
return true;
},
}
}
}
```
---
url: /guide/plugin/background-plugin.md
---
# @flowgram.ai/background-plugin
背景插件用于自定义画布的背景效果，支持点阵背景、Logo显示和新拟态(Neumorphism)视觉效果。
## 背景配置
背景插件通过 `@flowgram.ai/background-plugin`(内置) 提供，配置项包括：
### 基础配置
```ts pure
{
// 背景颜色
backgroundColor: '#1a1a1a',
// 点的颜色
dotColor: '#ffffff',
// 点的大小(像素)
dotSize: 1,
// 网格间距(像素)
gridSize: 20,
// 点的透明度(0-1)
dotOpacity: 0.5,
// 点的填充颜色
dotFillColor: '#ffffff'
}
```
### Logo配置
支持文本和图片两种Logo类型：
```ts pure
{
logo: {
// Logo文本
text: 'FLOWGRAM.AI',
// 图片URL (可选，优先级高于文本)
imageUrl: 'https://example.com/logo.png',
// 位置：'center' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
position: 'center',
// 大小
size: 200,
// 透明度(0-1)
opacity: 0.25,
// 颜色
color: '#ffffff',
// 字体
fontFamily: 'Arial, sans-serif',
// 字体粗细
fontWeight: 'bold',
// 自定义偏移量
offset: { x: 0, y: 0 }
}
}
```
### 新拟态效果
新拟态(Neumorphism)是一种现代化的视觉设计风格，通过双层柔和阴影创造立体感：
```ts pure
{
logo: {
neumorphism: {
// 启用新拟态效果
enabled: true,
// 文字颜色
textColor: '#E0E0E0',
// 高光阴影颜色
lightShadowColor: 'rgba(255,255,255,0.9)',
// 暗色阴影颜色
darkShadowColor: 'rgba(0,0,0,0.15)',
// 阴影偏移距离
shadowOffset: 6,
// 阴影模糊半径
shadowBlur: 12,
// 阴影强度
intensity: 0.6,
// 凸起效果(true=凸起, false=凹陷)
raised: true
}
}
}
```
## 使用示例
```tsx pure
// 在编辑器配置中直接使用 background 属性
const editorProps = {
// 背景配置
background: {
// 深色主题背景
backgroundColor: '#1a1a1a',
dotColor: '#ffffff',
dotSize: 1,
gridSize: 20,
dotOpacity: 0.3,
// 品牌Logo
logo: {
text: 'FLOWGRAM.AI',
position: 'center',
size: 200,
opacity: 0.25,
color: '#ffffff',
fontFamily: 'Arial, sans-serif',
fontWeight: 'bold',
// 新拟态效果
neumorphism: {
enabled: true,
textColor: '#E0E0E0',
lightShadowColor: 'rgba(255,255,255,0.9)',
darkShadowColor: 'rgba(0,0,0,0.15)',
shadowOffset: 6,
shadowBlur: 12,
intensity: 0.6,
raised: true
}
}
}
}
```
## 预设样式
### 经典黑色主题
```tsx pure
const editorProps = {
background: {
backgroundColor: '#1a1a1a',
dotColor: '#ffffff',
dotSize: 1,
gridSize: 20,
dotOpacity: 0.3,
logo: {
text: '您的品牌',
position: 'center',
size: 200,
opacity: 0.25,
color: '#ffffff',
neumorphism: {
enabled: true,
textColor: '#E0E0E0',
lightShadowColor: 'rgba(255,255,255,0.9)',
darkShadowColor: 'rgba(0,0,0,0.15)',
shadowOffset: 6,
shadowBlur: 12,
intensity: 0.6,
raised: true
}
}
}
}
```
### 简约白色主题
```tsx pure
const editorProps = {
background: {
backgroundColor: '#ffffff',
dotColor: '#000000',
dotSize: 1,
gridSize: 20,
dotOpacity: 0.1,
logo: {
text: '您的品牌',
position: 'center',
size: 200,
opacity: 0.1,
color: '#000000'
}
}
}
```
## 注意事项
1. **颜色搭配**：确保Logo颜色与背景色有足够的对比度
2. **透明度设置**：Logo透明度不宜过高，以免影响内容可读性
3. **新拟态效果**：需要合理调整阴影参数，过强的效果可能分散注意力
4. **性能考虑**：复杂的阴影效果可能影响渲染性能，建议在低端设备上适当简化
## 类型定义
```ts
interface BackgroundLayerOptions {
/** 网格间距，默认 20px */
gridSize?: number;
/** 点的大小，默认 1px */
dotSize?: number;
/** 点的颜色，默认 "#eceeef" */
dotColor?: string;
/** 点的透明度，默认 0.5 */
dotOpacity?: number;
/** 背景颜色，默认透明 */
backgroundColor?: string;
/** 点的填充颜色，默认与stroke颜色相同 */
dotFillColor?: string;
/** Logo 配置 */
logo?: {
/** Logo 文本内容 */
text?: string;
/** Logo 图片 URL */
imageUrl?: string;
/** Logo 位置，默认 'center' */
position?: 'center' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
/** Logo 大小，默认 'medium' */
size?: 'small' | 'medium' | 'large' | number;
/** Logo 透明度，默认 0.1 */
opacity?: number;
/** Logo 颜色（仅文本），默认 "#cccccc" */
color?: string;
/** Logo 字体家族（仅文本），默认 'Arial, sans-serif' */
fontFamily?: string;
/** Logo 字体粗细（仅文本），默认 'normal' */
fontWeight?: 'normal' | 'bold' | 'lighter' | number;
/** 自定义偏移 */
offset?: { x: number; y: number };
/** 新拟态效果配置 */
neumorphism?: {
/** 启用新拟态效果 */
enabled: boolean;
/** 文字颜色 */
textColor?: string;
/** 高光阴影颜色 */
lightShadowColor?: string;
/** 暗色阴影颜色 */
darkShadowColor?: string;
/** 阴影偏移距离 */
shadowOffset?: number;
/** 阴影模糊半径 */
shadowBlur?: number;
/** 阴影强度 */
intensity?: number;
/** 凸起效果(true=凸起, false=凹陷) */
raised?: boolean;
};
};
}
```
---
url: /guide/plugin/minimap-plugin.md
---
# @flowgram.ai/minimap-plugin
import { PackageManagerTabs } from '@theme';
## EditorProps
```ts pure
import { createMinimapPlugin } from '@flowgram.ai/minimap-plugin'
{
plugins: () => [
/**
* Minimap plugin
*/
createMinimapPlugin({
disableLayer: true,
enableDisplayAllNodes: true,
canvasStyle: {
canvasWidth: 182,
canvasHeight: 102,
canvasPadding: 50,
canvasBackground: 'rgba(245, 245, 245, 1)',
canvasBorderRadius: 10,
viewportBackground: 'rgba(235, 235, 235, 1)',
viewportBorderRadius: 4,
viewportBorderColor: 'rgba(201, 201, 201, 1)',
viewportBorderWidth: 1,
viewportBorderDashLength: 2,
nodeColor: 'rgba(255, 255, 255, 1)',
nodeBorderRadius: 2,
nodeBorderWidth: 0.145,
nodeBorderColor: 'rgba(6, 7, 9, 0.10)',
overlayColor: 'rgba(255, 255, 255, 0)',
},
}),
]
}
```
## 缩略图组件
```tsx pure
import { MinimapRender } from '@flowgram.ai/minimap-plugin';
export const Minimap = () => {
return (
);
};
```
---
url: /guide/plugin/export-plugin.md
---
# @flowgram.ai/export-plugin
import { PackageManagerTabs } from '@theme';
导出插件提供了将工作流导出为图片（PNG、JPEG、SVG）或数据文件（JSON、YAML）的功能。
## 快速开始
1. 安装
2. 注册插件
```tsx pure
import { createDownloadPlugin } from '@flowgram.ai/export-plugin';
const editorProps = useMemo(() => ({
plugins: () => [createDownloadPlugin({})]
}), []);
return (
)
```
## 配置项
```ts pure
createDownloadPlugin({
// 自定义导出文件名
// 默认: `flowgram-${nanoid(5)}.${format}`
getFilename: (format) => `my-workflow.${format}`,
// 导出图片时添加的水印 SVG
// 水印会显示在图片右下角
watermarkSVG: '',
})
```
## 支持的导出格式
```ts pure
import { FlowDownloadFormat } from '@flowgram.ai/export-plugin'
// 图片格式
FlowDownloadFormat.PNG // PNG 图片
FlowDownloadFormat.JPEG // JPEG 图片
FlowDownloadFormat.SVG // SVG 矢量图
// 数据格式
FlowDownloadFormat.JSON // JSON 数据
FlowDownloadFormat.YAML // YAML 数据
```
## 使用 FlowDownloadService
在组件中使用 `FlowDownloadService` 来触发导出：
```tsx pure
import { useService } from '@flowgram.ai/free-layout-editor';
import { FlowDownloadService, FlowDownloadFormat } from '@flowgram.ai/export-plugin';
export const ExportButton = () => {
const downloadService = useService(FlowDownloadService);
const handleExportPNG = async () => {
await downloadService.download({ format: FlowDownloadFormat.PNG });
};
const handleExportJSON = async () => {
await downloadService.download({ format: FlowDownloadFormat.JSON });
};
return (
);
};
```
## 监听下载状态
```tsx pure
import { useEffect, useState } from 'react';
import { useService } from '@flowgram.ai/free-layout-editor';
import { FlowDownloadService } from '@flowgram.ai/export-plugin';
export const DownloadStatus = () => {
const downloadService = useService(FlowDownloadService);
const [downloading, setDownloading] = useState(false);
useEffect(() => {
const disposer = downloadService.onDownloadingChange((value) => {
setDownloading(value);
});
return () => disposer.dispose();
}, [downloadService]);
return downloading ? 正在导出... : null;
};
```
## 类型定义
```ts pure
import { FlowDownloadFormat } from '@flowgram.ai/export-plugin';
interface DownloadServiceOptions {
// 自定义导出文件名的函数
getFilename?: (format: FlowDownloadFormat) => string;
// 导出图片时的水印 SVG 字符串
watermarkSVG?: string;
}
interface WorkflowDownloadParams {
// 导出格式
format: FlowDownloadFormat;
}
enum FlowDownloadFormat {
JSON = 'json',
YAML = 'yaml',
PNG = 'png',
JPEG = 'jpeg',
SVG = 'svg',
}
```
---
url: /guide/plugin/panel-manager-plugin.md
---
import { PackageManagerTabs } from '@theme';
# @flowgram.ai/panel-manager-plugin
管理各类面板的插件。
## 功能
- 基于该插件可以低成本的在画布的右侧和底部以 React 组件形式接入自定义面板
- 无需复杂的样式适配，底层自动计算面板的限位和布局
- 自动管理面板队列的出入
## 快速开始
1. 安装
2. 注册插件
插件的注册方法和 flowgram 的其他插件基本相同，只需要保证不要重复创建以及最终传入到对应的 LayoutEditorProvider 即可
```tsx
import { createPanelManagerPlugin } from '@flowgram.ai/panel-manager-plugin';
const editorProps = useMemo(() => ({
plugins: () => [createPanelManagerPlugin({})]
}), []);
return (
)
```
3. 注册面板组件
面板的注册需要唯一的 `key` 以及返回 ReactNode 的渲染函数 `render`
这里以节点表单面板为例：
```tsx pure
import { type PanelFactory } from '@flowgram.ai/panel-manager-plugin';
export const NODE_FORM_PANEL = 'node-form-panel';
export const nodeFormPanelFactory: PanelFactory = {
key: NODE_FORM_PANEL,
defaultSize: 400,
render: (props: NodeFormPanelProps) =>
}
```
将定义好的对象传入插件中：
```ts pure
createPanelManagerPlugin({
factories: [nodeFormPanelFactory],
getPopupContainer: (ctx) => ctx.playground.node.parentNode,
autoResize: true
})
```
4. 打开/关闭面板
面板的打开关闭通过 PanelManager 的实例控制：
```ts
import { PanelManager } from '@flowgram.ai/panel-manager-plugin';
class NodeFormService {
@inject(PanelManager): panelManager: PanelManager;
openPanel(nodeId: string) {
this.panelManager.open(NODE_FORM_PANEL, 'right', {
props: {
nodeId
}
})
}
closePanel() {
this.panelManager.close(NODE_FORM_PANEL)
}
}
```
除此之外也可以在 react 组件中以 hook 的方式获取实例：
```tsx
import { usePanelManager } from '@flowgram.ai/panel-manager-plugin';
const panelManager = usePanelManager();
```
---
url: /guide/plugin/free-auto-layout-plugin.md
---
import { PackageManagerTabs } from '@theme';
# @flowgram.ai/free-auto-layout-plugin
基于 Dagre 算法的自动布局插件，为自由布局画布提供智能的节点排列功能。
## 功能
- 基于 Dagre 有向图布局算法，自动计算节点的最优位置
- 支持多种布局方向（从左到右、从上到下等）
- 可配置节点间距、边距等布局参数
- 支持嵌套容器的递归布局
- 提供动画效果和视图自适应功能
- 与历史记录系统集成，支持撤销/重做操作
## 快速开始
1. 安装
2. 注册插件
插件的注册方法和 flowgram 的其他插件基本相同，只需要保证不要重复创建以及最终传入到对应的 FreeLayoutEditorProvider 即可
```tsx
import { createFreeAutoLayoutPlugin } from '@flowgram.ai/free-auto-layout-plugin';
const editorProps = useMemo(() => ({
plugins: () => [
createFreeAutoLayoutPlugin({
layoutConfig: {
rankdir: 'LR', // 布局方向：从左到右
nodesep: 100, // 节点间距
ranksep: 100, // 层级间距
}
})
]
}), []);
return (
)
```
3. 在 React 组件中使用
也可以通过工具类在组件中触发自动布局：
```tsx
import { WorkflowAutoLayoutTool } from '@flowgram.ai/free-layout-editor';
const AutoLayoutButton = () => {
const tools = usePlaygroundTools();
const playground = usePlayground();
const handleAutoLayout = async () => {
await tools.autoLayout({
enableAnimation: true, // 启用动画效果
animationDuration: 1000, // 动画持续时间
disableFitView: false, // 布局后自动适应视图
});
}
return (
);
};
```
4. 使用自动布局服务
通过依赖注入获取 AutoLayoutService 实例来执行布局：
```tsx
import { AutoLayoutService } from '@flowgram.ai/free-auto-layout-plugin';
class MyLayoutService {
@inject(AutoLayoutService)
private autoLayoutService: AutoLayoutService;
async performAutoLayout() {
await this.autoLayoutService.layout({
enableAnimation: true, // 启用动画效果
animationDuration: 1000, // 动画持续时间
disableFitView: false, // 布局后自动适应视图
});
}
}
```
## 配置选项
### LayoutConfig
布局算法的配置参数：
```typescript
interface LayoutConfig {
/** 布局方向 */
rankdir?: 'TB' | 'BT' | 'LR' | 'RL';
/** 对齐方式 */
align?: 'UL' | 'UR' | 'DL' | 'DR';
/** 同层节点间距 */
nodesep?: number;
/** 边的间距 */
edgesep?: number;
/** 层级间距 */
ranksep?: number;
/** 水平边距 */
marginx?: number;
/** 垂直边距 */
marginy?: number;
/** 环路处理算法 */
acyclicer?: string;
/** 排序算法 */
ranker?: 'network-simplex' | 'tight-tree' | 'longest-path';
}
```
### LayoutOptions
布局执行时的选项：
```typescript
interface LayoutOptions {
/** 容器节点，默认为根节点 */
containerNode?: WorkflowNodeEntity;
/** 获取跟随节点的函数 */
getFollowNode?: GetFollowNode;
/** 禁用自动适应视图 */
disableFitView?: boolean;
/** 启用动画效果 */
enableAnimation?: boolean;
/** 动画持续时间（毫秒） */
animationDuration?: number;
/** 节点过滤函数，用于控制哪些节点参与布局计算 */
filterNode?: (params: { node: WorkflowNodeEntity; parent?: WorkflowNodeEntity }) => boolean;
}
```
## 布局算法
### Dagre 算法
插件基于 Dagre 库实现，这是一个专门用于有向图布局的 JavaScript 库。算法特点：
- **分层布局**：将节点按照依赖关系分为不同层级
- **最小交叉**：尽量减少连线的交叉
- **均匀分布**：在满足约束的前提下均匀分布节点
### 布局流程
1. **图构建**：将工作流节点和连线转换为 Dagre 图结构
2. **层级计算**：根据节点依赖关系计算层级（rank）
3. **顺序优化**：在每个层级内优化节点顺序以减少交叉
4. **位置计算**：计算每个节点的最终坐标位置
5. **动画执行**：如果启用动画，平滑过渡到新位置
## 高级用法
### 自定义跟随节点
可以通过 `getFollowNode` 函数自定义节点的跟随关系：
```typescript
const layoutOptions: LayoutOptions = {
getFollowNode: (node: LayoutNode) => {
// 返回应该跟随当前节点的节点ID
if (node.flowNodeType === 'comment') {
return getNearestNode(node);
}
return undefined;
}
};
await tools.autoLayout(layoutOptions);
```
### 节点过滤
可以通过 `filterNode` 函数控制哪些节点参与布局计算：
```typescript
const layoutOptions: LayoutOptions = {
filterNode: ({ node, parent }) => {
// 过滤掉特定类型的节点
if (node.flowNodeType === 'comment') {
return false;
}
// 根据父节点条件过滤
if (parent && parent.flowNodeType.type === 'group') {
return false;
}
return true; // 默认包含所有节点
}
};
// 使用过滤选项执行布局
await tools.autoLayout(layoutOptions);
```
### 仅对指定容器布局
插件支持对指定容器进行递归布局，会自动处理容器内部的节点排列：
```typescript
// 对特定容器执行布局
await autoLayoutService.layout({
containerNode: specificContainerNode,
enableAnimation: true,
});
```
## 常见问题
### Q: 如何在初始化时触发自动布局?
A: 在画布渲染完成后调用 `ctx.tool.autoLayout()` 方法即可触发自动布局。
```typescript
const editorProps = useMemo(() => ({
onAllLayersRendered: (ctx) => {
ctx.tool.autoLayout({
enableAnimation: false, // 初始化时自动布局禁用动画，可优化用户体验
}
);
}
}), []);
```
### Q: 如何实现自定义布局方向？
A: 方法一：在 EditorProps 中注册 AutoLayout 插件，通过 `rankdir` 参数控制布局方向：
```typescript
import { createFreeAutoLayoutPlugin } from '@flowgram.ai/free-auto-layout-plugin';
const editorProps = useMemo(() => ({
plugins: () => [
createFreeAutoLayoutPlugin({
layoutConfig: {
rankdir: 'TB', // 从上到下
// rankdir: 'LR', // 从左到右（默认）
// rankdir: 'RL', // 从右到左
// rankdir: 'BT', // 从下到上
}
})
]
}), []);
```
方法二：在调用 `autoLayout` 方法时，通过 `layoutConfig` 参数传递布局配置：
```typescript
const tools = usePlaygroundTools();
const playground = usePlayground();
const handleAutoLayout = async () => {
await tools.autoLayout({
layoutConfig: {
rankdir: 'TB', // 从上到下
// rankdir: 'LR', // 从左到右（默认）
// rankdir: 'RL', // 从右到左
// rankdir: 'BT', // 从下到上
}
});
}
```
### Q: 布局动画卡顿怎么优化？
A: 对于复杂工作流，建议禁用动画或减少动画时长：
```typescript
layoutOptions: {
enableAnimation: false, // 禁用动画
// 或者
animationDuration: 150, // 减少动画时长
}
```
---
url: /guide/plugin/free-stack-plugin.md
---
import { PackageManagerTabs } from '@theme';
# @flowgram.ai/free-stack-plugin
层级管理插件，为自由布局画布提供节点和连线的 z-index 层级控制功能。
## 功能
- 智能计算节点和连线的层级关系，避免遮挡问题
- 支持选中节点自动置顶显示
- 支持悬停节点和连线的高亮显示
- 可自定义节点排序规则，控制同层级节点的渲染顺序
- 自动处理父子节点的层级关系
- 支持连线的智能层级管理，确保连线可见性
- 实时响应节点选择、悬停和实体变化事件
## 快速开始
1. 安装
2. 注册插件
插件的注册方法和 flowgram 的其他插件基本相同，只需要保证不要重复创建以及最终传入到对应的 FreeLayoutEditorProvider 即可
```tsx
import { createFreeStackPlugin } from '@flowgram.ai/free-stack-plugin';
const editorProps = useMemo(() => ({
plugins: () => [
createFreeStackPlugin()
]
}), []);
return (
)
```
3. 自定义节点排序
可以通过 `sortNodes` 函数自定义同层级节点的排序规则：
```tsx
import { createFreeStackPlugin } from '@flowgram.ai/free-stack-plugin';
import { WorkflowNodeType } from './nodes/constants';
const editorProps = useMemo(() => ({
plugins: () => [
createFreeStackPlugin({
sortNodes: (nodes) => {
const commentNodes = [];
const otherNodes = [];
// 将注释节点和其他节点分开
nodes.forEach((node) => {
if (node.flowNodeType === WorkflowNodeType.Comment) {
commentNodes.push(node);
} else {
otherNodes.push(node);
}
});
// 注释节点渲染在底层，其他节点在上层
return [...commentNodes, ...otherNodes];
},
})
]
}), []);
```
## 配置选项
### FreeStackPluginOptions
插件的配置选项：
```typescript
interface FreeStackPluginOptions {
/** 自定义节点排序函数 */
sortNodes?: (nodes: WorkflowNodeEntity[]) => WorkflowNodeEntity[];
}
```
### sortNodes 函数
用于自定义同层级节点的排序规则：
```typescript
type SortNodesFunction = (nodes: WorkflowNodeEntity[]) => WorkflowNodeEntity[];
```
**参数说明：**
- `nodes`: 需要排序的节点数组
- **返回值**: 排序后的节点数组
**使用场景：**
- 将特定类型的节点（如注释）放在底层
- 按照业务优先级排序节点
- 按照创建时间或其他属性排序
## 层级管理算法
### 基础层级计算
插件使用智能算法计算每个节点和连线的层级：
1. **基础层级**：从 `BASE_Z_INDEX`（默认为 8）开始计算
2. **节点层级**：根据节点的嵌套关系和排序规则计算
3. **连线层级**：确保连线不被节点遮挡，同时处理特殊情况
### 层级提升规则
以下情况会触发层级提升：
- **选中节点**：选中的节点会被提升到顶层
- **悬停元素**：悬停的节点或连线会被高亮显示
- **正在绘制的连线**：绘制中的连线会置于顶层
- **父子关系连线**：父子节点间的连线会优先显示
### 层级计算流程
1. **初始化**：清除缓存，计算基础参数
2. **节点索引**：建立节点索引映射
3. **选中节点处理**：标记选中节点的父级关系
4. **层级分配**：递归处理节点层级
5. **连线处理**：计算连线层级，确保可见性
6. **样式应用**：将计算结果应用到 DOM 元素
## 高级用法
### 复杂排序规则
可以实现复杂的节点排序逻辑：
```typescript
const sortNodes = (nodes: WorkflowNodeEntity[]) => {
return nodes.sort((a, b) => {
// 1. 按节点类型优先级排序
const typeOrder = {
[WorkflowNodeType.Comment]: 0,
[WorkflowNodeType.Start]: 1,
[WorkflowNodeType.End]: 2,
// ... 其他类型
};
const aOrder = typeOrder[a.flowNodeType] ?? 999;
const bOrder = typeOrder[b.flowNodeType] ?? 999;
if (aOrder !== bOrder) {
return aOrder - bOrder;
}
// 2. 按创建时间排序
return a.createTime - b.createTime;
});
};
```
## 常见问题
### Q: 如何让特定类型的节点始终在底层？
A: 通过 `sortNodes` 函数将这些节点排在数组前面：
```typescript
const sortNodes = (nodes) => {
const backgroundNodes = nodes.filter(node =>
node.flowNodeType === WorkflowNodeType.Comment
);
const foregroundNodes = nodes.filter(node =>
node.flowNodeType !== WorkflowNodeType.Comment
);
return [...backgroundNodes, ...foregroundNodes];
};
```
### Q: 如何禁用自动层级管理？
A: 目前插件没有提供禁用选项，如果需要完全自定义层级管理，建议不使用此插件，直接在节点组件中设置 z-index。
### Q: 性能优化建议？
A: 插件已经内置了性能优化：
- 使用防抖机制减少计算频率
- 只在必要时重新计算层级
- 使用 Map 数据结构提高查找效率
对于大型画布（超过 1000 个节点），建议：
- 简化 `sortNodes` 函数的逻辑
- 避免在排序函数中进行复杂计算
---
url: /guide/advanced/zoom-scroll.md
---
# 画布滚动和缩放
[> 详细用法参考 Playground](/api/core/playground.html)
---
url: /guide/advanced/history.md
---
# 历史记录
Undo/Redo 是 FlowGram.AI 的一个插件，在 @flowgram.ai/fixed-layout-editor 和 @flowgram.ai/free-layout-editor 两种模式的编辑器中均有提供该功能。
## 1. 快速开始
[> Demo Detail](https://github.com/bytedance/flowgram.ai/blob/main/apps/demo-fixed-layout/src/hooks/use-editor-props.ts#L125)
### 1.1. 开启 history
使用 Undo/Redo 功能前需要先引入编辑器，以固定布局编辑器为例。
1. package.json 添加依赖
```tsx pure title="use-editor-props.tsx" {4}
export function useEditorProps() {
return useMemo(
() => ({
history: {
enable: true,
enableChangeNode: true // Listen Node engine data change
}
})
)
}
```
开启之后将获得以下能力：
| 简介 |
描述 |
自由布局 |
固定布局 |
| Undo/Redo 快捷键 |
画布上使用 Cmd/Ctrl + Z 触发 Undo |
✅ |
✅ |
| 画布上使用 Cmd/Ctrl + Shift + Z 触发 Redo |
✅ |
✅ |
| 画布节点操作支持undo/redo |
增删节点 |
✅ |
✅ |
| 增删连线 |
✅ |
❌ |
| 移动节点 |
✅ |
✅ |
| 增删分支 |
❌ |
✅ |
| 移动分支 |
❌ |
✅ |
| 添加分组 |
❌ |
✅ |
| 取消分组 |
❌ |
✅ |
| 画布批量操作 |
删除节点 |
✅ |
✅ |
| 移动节点 |
✅ |
✅ |
### 1.2. 关闭 history
如果某些系统触发的数据变更不希望被undo redo监听到，可以主动关掉 历史服务 操作完数据再重新启动
```tsx pure
const { history } = useClientContext();
history.stop()
// 做一些不希望被捕获的操作， 这些变更不会被记录到操作栈
...
history.start()
```
### 1.3. History Undo/Redo 合并
```tsx pure
const { history } = useClientContext();
history.startTransaction();
// 这里的 任意操作都会被合并成一个
...
history.endTransaction();
```
### 1.4. Undo/Redo 调用
一般 Undo/Redo 会在界面上提供两个按钮入口，点击了能触发 Undo 和 Redo，按钮本身需要有是否可以 Undo/Redo 的状态。
```tsx pure
export function useUndoRedo(): UndoRedo {
const { history } = useClientContext();
const [canUndo, setCanUndo] = useState(false);
const [canRedo, setCanRedo] = useState(false);
useEffect(() => {
const toDispose = history.undoRedoService.onChange(() => {
setCanUndo(history.canUndo());
setCanRedo(history.canRedo());
});
return () => {
toDispose.dispose();
};
}, []);
return {
canUndo,
canRedo,
undo: () => history.undo(),
redo: () => history.redo(),
};
}
```
## 2. 功能扩展
### 2.1. 操作注册
操作通过 operationMetas 去注册操作
```tsx pure title="use-editor-props.tsx"
...
history={{
enable: true,
operationMetas: [
{
type: 'addNode',
apply: () => { console.log('addNode')},
inverse: (op) => ({ type: 'deleteNode', value: op.value })
}
]
}}
```
`OperationMeta` 核心定义如下
- `type` 是操作的唯一标识
- `inverse` 是一个函数，该函数返回当前操作的逆操作
- `apply` 是操作被触发的时候执行的逻辑
```tsx pure
export interface OperationMeta {
/**
* 操作类型 需要唯一
*/
type: string;
/**
* 将一个操作转换成另一个逆操作， 如insert转成delete
* @param op 操作
* @returns 逆操作
*/
inverse: (op: Operation) => Operation;
/**
* 执行操作
* @param operation 操作
*/
apply(operation: Operation, source: any): void | Promise;
}
```
假设我要做增删节点支持 Undo/Redo 的功能，我就需要添加两个操作
```tsx pure
{
type: 'addNode',
inverse: op => ({ ...op, type: 'deleteNode' }),
apply(op, ctx) {
document = ctx.get(Document)
document.addNode(op.value)
},
}
```
```tsx pure
{
type: 'deleteNode',
inverse: op => ({ ...op, type: 'addNode' }),
apply(op, ctx) {
document = ctx.get(Document)
document.deleteNode(op.value.id)
},
}
```
### 2.2. 操作合并
operationMeta 支持 shouldMerge 来自定义合并策略，如果频繁触发的操作可以进行合并
:::warning shouldMerge 返回
- 返回 false 代表不合并
- 返回 true 代表合并进一个操作栈元素
- 返回 Operation 代表合并成一个操作
:::
以下示例是一个合并 500ms 内对同一个字段编辑进行合并
```tsx pure
{
type: 'changeData',
inverse: op => ({ ...op, type: 'changeData' }),
apply(op, ctx) {},
shouldMerge: (op, prev, element) => {
// 合并500ms内的操作
if (Date.now() - element.getTimestamp() < 500) {
if (
op.type === prev.type && // 相同类型
op.value.id === prev.value.id && // 相同节点
op.value?.path === prev.value?.path // 相同路径
) {
return {
type: op.type,
value: {
...op.value,
value: op.value.value,
oldValue: prev.value.oldValue,
},
};
}
}
return false;
}
}
```
### 2.3. 操作执行
1. 单操作执行
通过 pushOperation 触发, 如下示例使用方在业务中触发刚刚定义的操作
```tsx pure
function handleAddNode () {
const { history } = useClientContext()
history.pushOperation({
type: 'addNode',
value: {
name: 'xx'
id: 'xxx'
}
})
}
```
2. 批量执行
通过 transact 调用的函数中所有执行的操作都会被合并进一个栈元素， undo/redo 的时候会被一起执行
如下是实现了一个批量删除的例子：
```tsx pure
function deleteNodes(nodes: FlowNodeEntity[]) {
const { history } = useClientContext()
history.transact(() => {
nodes.forEach(node => {
history.pushOperation({
type: OperationType.deleteNode,
value: {
fromId: fromNode.id,
data: node.data,
},
});
});
});
}
```
### 2.4. 撤销重做
1. 撤销重做
撤销执行 history.undo 方法
重做执行 history.redo 方法
```tsx pure
function undo() {
const { history } = useClientContext();
history.undo();
}
function redo() {
const { history } = useClientContext();
history.redo();
}
```
2. 监听撤销重做
监听 undoRedoService.onChange 的 onChange 事件即可
如下是一个 undo/redo 触发后路由对应操作的uri（选中对应节点或表单项）
```tsx pure
function listenHistoryChange() {
const { history } = useClientContext();
history.undoRedoService.onChange(
({ type, element }) => {
if (type === UndoRedoChangeType.PUSH) {
return;
}
const op = element.getLastOperation();
if (!op) {
return;
}
if (op.uri) {
// goto somewhere
}
},
)
}
```
### 2.5. 操作历史
1. 查看刷新
可以通过 HistoryStack.items 获得历史记录， 通过监听 HistoryStack.onChange 事件来刷新界面
```tsx pure
import React from 'react';
export function HistoryList() {
const { historyStack } = useService(HistoryManager)
const { refresh } = useRefresh()
let items = historyManager.historyStack.items;
useEffect(() => {
const disposable = historyStack.onChange(() => {
refresh()
])
return () => {
disposable.dispose()
}
}, [])
return (
);
}
```
2. 持久化
持久化是通过 history-storage 插件实现
- databaseName： 数据库名称
- resourceStorageLimit： 资源存储限制数量
引入 @flowgram.ai/history-storage 包后，可使用该插件
```tsx pure
import { createHistoryStoragePlugin } from '@flowgram.ai/history-storage';
createHistoryStoragePlugin({
databaseName: 'your-history',
resourceStorageLimit: 50,
}),
```
通过 useStorageHistoryItems 查询数据库列表
```tsx pure
import {
useStorageHistoryItems,
} from '@flowgram.ai/history-storage';
export const HistoryList = () => {
const { uri } = useCurrentWidget();
const { items } = useStorageHistoryItems(
storage,
uri.withoutQuery().toString(),
);
return <>
{ JSON.stringify(items) }
}
```
## 3. API 列表
### 3.1. [OperationMeta](https://flowgram.ai/auto-docs/fixed-history-plugin/interfaces/OperationMeta.html)
操作元数据，用以定义一个操作
### 3.2. [Operation](https://flowgram.ai/auto-docs/fixed-history-plugin/interfaces/Operation.html)
操作数据，通过 type 和 OperationMeta 关联
### 3.3. [OperationService](https://flowgram.ai/auto-docs/fixed-history-plugin/classes/OperationService.html)
[onApply](https://flowgram.ai/auto-docs/fixed-history-plugin/classes/OperationService.html#onapply)
想监听某个触发的操作可以使用onApply
```tsx pure
useService(OperationService).onApply((op: Operation) => {
console.log(op)
// 此处可以根据type执行自己的业务逻辑
})
```
### 3.4. [HistoryService](https://flowgram.ai/auto-docs/fixed-history-plugin/classes/HistoryService.html)
History 模块核心 API 暴露的Service
### 3.5. [UndoRedoService](https://flowgram.ai/auto-docs/fixed-history-plugin/classes/UndoRedoService.html)
管理 UndoRedo 栈的服务
### 3.6. [HistoryStack](https://flowgram.ai/auto-docs/fixed-history-plugin/classes/HistoryStack.html)
历史栈，监听所有 push undo redo 操作，并记录到栈里面
### 3.7. [HistoryDatabase](https://flowgram.ai/auto-docs/history-storage/classes/HistoryDatabase.html)
持久化数据库操作
---
url: /guide/advanced/shortcuts.md
---
# 快捷键
## 自定义快捷键
```ts pure
// 添加到 EditorProps
{
shortcuts(shortcutsRegistry, ctx) {
// 按住 cmmand + a，选中所有节点
shortcutsRegistry.addHandlers({
commandId: 'selectAll',
shortcuts: ['meta a', 'ctrl a'],
isEnabled: (...args) => true,
execute(...args) {
const allNodes = ctx.document.getAllNodes();
ctx.playground.selectionService.selection = allNodes;
},
});
},
}
```
## 通过 CommandService 调用快捷键
```ts pure
const commandService = useService(CommandService)
/**
* 调用命令服务, args 参数会透传给 execute 和 isEnabled
*/
commandService.executeCommand('selectAll', ...args)
// OR
ctx.get(CommandService).executeCommand('selectAll', ...args)
```
---
url: /guide/advanced/custom-service.md
---
# 自定义 Service
业务中需要抽象出单例服务便于插件化管理
```tsx pure
import { useMemo } from 'react';
import { FlowDocument, type FixedLayoutProps, inject, injectable } from '@flowgram.ai/fixed-layout-editor'
/**
* Docs: https://inversify.io/docs/introduction/getting-started/
* Warning: Use decorator legacy
* // rsbuild.config.ts
* {
* source: {
* decorators: {
* version: 'legacy'
* }
* }
* }
* Usage:
* 1.
* const myService = useService(MyService)
* myService.save()
* 2.
* const myService = useClientContext().get(MyService)
* 3.
* const myService = node.getService(MyService)
*/
@injectable()
class MyService {
// 依赖注入单例模块
@inject(FlowDocument) flowDocument: FlowDocument
// ...
}
function BaseNode() {
const mySerivce = useService(MyService)
}
export function useEditorProps(
): FixedLayoutProps {
return useMemo(
() => ({
// ....other props
onBind: ({ bind }) => {
bind(MyService).toSelf().inSingletonScope()
},
materials: {
renderDefaultNode: BaseNode
}
}),
[],
);
}
```
---
url: /guide/advanced/custom-layer.md
---
# 自定义 Layer
我们将画布拆分成多个 Layer，实现交互分层的思想，便于插件化管理，详细见 [画布引擎](/guide/concepts/canvas-engine.html)
1. 通过 `observeEntityDatas` `observeEntities` `observeEntity` 监听画布节点任意数据模块的更新
2. 通过 `onZoom` `onScroll` `onViewportChange` 等监听画布的缩放或者滚动
3. 通过 `render` 往画布中插入 react 元素, 如绘制 svg 线条
## 创建 Layer
```tsx pure
import { FreeLayoutPluginContext, inject, injectable, FlowNodeEntity, FlowNodeTransformData, FlowNodeFormData } from '@flowgram.ai/free-layout-editor'
@injectable()
export class MyLayer extends Layer {
@inject(FreeLayoutPluginContext) ctx: FreeLayoutPluginContext
// 可以监听节点的宽高位置变化
@observeEntityDatas(FlowNodeEntity, FlowNodeTransformData) transformDatas: FlowNodeTransformData[];
// 可以监听表单数据变化，连线数据可以存在表单里
@observeEntityDatas(FlowNodeEntity, FlowNodeFormData) formDatas: FlowNodeFormData[];
onReady() {
// 也可以添加样式
// zIndex可以控制是否要盖在节点, 节点默认是 10，大于 10 则在节点上边
this.node.style.zIndex = 11;
}
onZoom(scale) {
// 跟着画布缩放
this.node.style.transform = `scale(${scale})`;
}
render() {
return {...}
}
}
```
## 加入到画布
- 通过 use-editor-props
```ts pure
{
onInit: (ctx) => {
ctx.playground.registerLayer(MyLayer)
}
}
```
- 通过插件添加
```tsx pure
import { FreeLayoutPluginContext } from '@flowgram.ai/free-layout-editor'
export const createMyPlugin = definePluginCreator<{}, FreeLayoutPluginContext>({
onInit: (ctx, opts) => {
ctx.playground.registerLayer(MyLayer)
},
});
```
## Layer 生命周期说明
```ts
interface Layer {
/**
* 初始化时候触发
*/
onReady?(): void;
/**
* playground 大小变化时候会触发
*/
onResize?(size: PipelineDimension): void;
/**
* playground focus 时候触发
*/
onFocus?(): void;
/**
* playground blur 时候触发
*/
onBlur?(): void;
/**
* 监听缩放
*/
onZoom?(scale: number): void;
/**
* 监听滚动
*/
onScroll?(scroll: { scrollX: number; scrollY: number }): void;
/**
* viewport 更新触发
*/
onViewportChange?(): void;
/**
* readonly 或 disable 状态变化
* @param state
*/
onReadonlyOrDisabledChange?(state: { disabled: boolean; readonly: boolean }): void;
/**
* 数据更新自动触发react render，如果不提供则不会调用react渲染
*/
render?(): JSX.Element
}
```
---
url: /guide/advanced/custom-plugin.md
---
# 自定义插件
## 插件的生命周期说明
```tsx pure
/**
* from: https://github.com/bytedance/flowgram.ai/blob/main/packages/canvas-engine/core/src/plugin/plugin.ts
*/
import { ContainerModule, interfaces } from 'inversify';
export interface PluginBindConfig {
bind: interfaces.Bind;
unbind: interfaces.Unbind;
isBound: interfaces.IsBound;
rebind: interfaces.Rebind;
}
export interface PluginConfig {
/**
* 插件 IOC 注册, 等价于 containerModule
* @param ctx
*/
onBind?: (bindConfig: PluginBindConfig, opts: Opts) => void;
/**
* 画布注册阶段
*/
onInit?: (ctx: CTX, opts: Opts) => void;
/**
* 画布准备阶段，一般用于 dom 事件注册等
*/
onReady?: (ctx: CTX, opts: Opts) => void;
/**
* 画布销毁阶段
*/
onDispose?: (ctx: CTX, opts: Opts) => void;
/**
* 画布所有 layer 渲染结束
*/
onAllLayersRendered?: (ctx: CTX, opts: Opts) => void;
/**
* IOC 模块，用于更底层的插件扩展
*/
containerModules?: interfaces.ContainerModule[];
}
```
## 创建插件
```tsx pure
/**
* 如果希望插件固定布局和自由布局都能使用， 请只用
* import { definePluginCreator } from '@flowgram.ai/core'
*/
import { definePluginCreator, FixedLayoutPluginContext } from '@flowgram.ai/fixed-layout-editor'
export interface MyPluginOptions {
opt1: string;
}
export const createMyPlugin = definePluginCreator({
onBind: (bindConfig, opts) => {
// 注册 IOC 模块, Service 如何定义 见 自定义 Service
bindConfig.bind(MyService).toSelf().inSingletonScope()
},
onInit: (ctx, opts) => {
// 插件配置
console.log(opts.opt1)
// ctx 对应 FixedLayoutPluginContext 或者 FreeLayoutPluginContext
console.log(ctx.document)
console.log(ctx.playground)
console.log(ctx.get(MyService)) // 获取 IOC 模块
},
});
```
## 添加插件
```tsx pure title="use-editor-props.ts"
// EditorProps
{
plugins: () => [
createMyPlugin({
opt1: 'xxx'
})
]
}
```
---
url: /guide/concepts/index.md
---
# 概念
- CanvasEngine：画布引擎负责绘制“点-线”构成的图, 保障大规模节点时的流畅性
- NodeEngine: 节点引擎提供 渲染、校验、数据修改等表单能力
- VariableEngine: 变量引擎引入作用域模型, 抽象各业务场景的变量
- Material: 物料库包含默认 ICON 等 UI, 业务接入后可覆盖扩展
---
url: /guide/concepts/canvas-engine.md
---
# 画布引擎
## Playground
画布引擎底层会提供一套自己的坐标系, 主要由 Playground 驱动
```ts
interface Playground {
node: HTMLDivElement // 画布挂载的dom节点
toReactComponent() // 渲染为react 节点
readonly: boolean // 只读模式
config: PlaygroundConfigEntity // 包含 zoom，scroll 等画布数据
}
// hook 快速获取
const { playground } = useClientContext()
```
## Layer
:::warning P.S.
- 渲染层在底层建立了一套自己的坐标系，基于这个坐标系实现模拟滚动、缩放等逻辑，在算viewport时候节点也需要转换到该坐标系上
- 渲染按画布被拆分成多个层 (Layer)，分层设计是基于ECS的数据切割思想，不同 Layer 只监听自己想要的数据，独立渲染不干扰，Layer 可以理解为ECS的 System，即最终Entity数据消费的地方
- Layer 实现了类mobx的observer响应式动态依赖收集，数据更新会触发 autorun或render
:::
- Layer 生命周期
```ts
interface Layer {
/**
* 初始化时候触发
*/
onReady?(): void;
/**
* playground 大小变化时候会触发
*/
onResize?(size: PipelineDimension): void;
/**
* playground focus 时候触发
*/
onFocus?(): void;
/**
* playground blur 时候触发
*/
onBlur?(): void;
/**
* 监听缩放
*/
onZoom?(scale: number): void;
/**
* 监听滚动
*/
onScroll?(scroll: { scrollX: number; scrollY: number }): void;
/**
* viewport 更新触发
*/
onViewportChange?(): void;
/**
* readonly 或 disable 状态变化
* @param state
*/
onReadonlyOrDisabledChange?(state: { disabled: boolean; readonly: boolean }): void;
/**
* 数据更新自动触发react render，如果不提供则不会调用react渲染
*/
render?(): JSX.Element
}
```
Layer的定位其实和 Unity 游戏引擎 提供的 [MonoBehaviour](https://docs.unity3d.com/ScriptReference/MonoBehaviour.html) 类似， Unity 游戏引擎的脚本扩展都是基于这个，可以认为是最核心的设计，底层也是基于 C# 提供的反射 (Reflection) 能力的依赖注入
```c#
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class MyMonoBehavior : MonoBehaviour
{
void Awake()
{
Debug.Log("Awake method is always called before application starts.");
}
void Start()
{
Debug.Log("Start method is always called after Awake().");
}
void Update()
{
Debug.Log("Update method is called in every frame.");
}
}
```
- Layer 的响应式更新
```ts
export class DemoLayer extends Layer {
// 任意的inversify模块 的注入
@inject(FlowDocument) document: FlowDocument
// 监听单个Entity
@observeEntity(SomeEntity) entity: SomeEntity
// 监听多个Entity
@observeEntities(SomeEntity) entities: SomeEntity[]
// 监听 Entity的数据块（ECS - Component）变化
@observeEntityDatas(SomeEntity, SomeEntityData) transforms: SomeEntityData[]
autorun() {}
render() {
return
}
}
```
## FlowNodeEntity
- 节点是一颗树, 包含子节点 (blocks) 和父亲节点, 节点采用 ECS 架构
```ts
inteface FlowNodeEntity {
id： string
blocks: FlowNodeEntity[]
pre?: FlowNodeEntity
next?: FlowNodeEntity
parent?: FlowNodeEntity
collapsed: boolean // 是否展开
getData(dataRegistry): NodeEntityData
addData(dataRegistry)
}
```
## FlowNodeTransformData 节点的位置及大小数据
```ts
class FlowNodeTransformData {
localTransform: Matrix, // 相对偏移, 只相对于同一个Block的上一个Sibling节点的偏移
worldTransform: Matrix, // 绝对偏移, 相对于Parent和Sibling节点叠加后的偏移
delta：Point // 居中居左偏移, 和Matrix独立，每个节点自己控制
getSize(): Size, // 由自己(独立节点) 或者 子分支节点宽高间距计算得出
getBounds(): Rectangle // 由worldMatix及 size 计算得出, 用于最终渲染，该范围也可用于确定高亮选中区域
inputPoint(): Point // 输入点位置，一般是Block的第一个节点的中上位置(居中布局)
outputPoint(): Point // 输出点位置，默认是节点中下位置，但条件分支，是由内置结束节点等具体逻辑判断得出
// ...others
}
```
## FlowNodeRenderData 节点内容渲染数据
```ts
class FlowNodeRenderData {
node: HTMLDivElement // 当前节点的dom
expanded：boolean // 是否展开
activated： boolean // 是否激活
hidden： boolean // 是否隐藏
// ...others
}
```
## FlowDocument
```ts
interface FLowDocument {
root: FlowNodeEntity // 画布的根节点
fromJSON(data): void // 导入数据
toJSON(): FlowDocumentJSON // 导出数据
addNode(type: string, meta: any): FlowNodeEntity // 添加节点
travese(fn: (node: flowNodeEntity) => void, startNode = this.root) // 遍历
}
```
---
url: /guide/concepts/node-engine.md
---
# 节点引擎
节点引擎 NodeEngine 是一个流程节点逻辑的书写框架，让业务专注于业务自身的渲染与数据逻辑，无需关注画布以及节点间联动的底层api。与此同时，节点引擎沉淀了最佳的节点书写范式，帮助业务解决流程业务中可能遇到的各种问题， 如数据逻辑与渲染耦合等。
节点引擎是可选启用的。如果你不存在以下这些复杂的节点逻辑，可以选择不启用节点引擎，自己维护节点数据与渲染。复杂节点逻辑如：1）节点不渲染也能校验或触发数据副作用；2）节点间联动丰富；3）redo/undo; 等等。
## 基础概念
FlowNodeEntity
流程节点模型。
FlowNodeRegistry
流程节点的静态配置。
FormMeta
节点引擎的静态配置。 配置在 FlowNodeRegistry 中的 formMeta 字段。
Form
节点引擎中的表单。它维护节点的数据并提供渲染、校验、副作用等能力。他的模型 FormModel 提供节点数据的访问和修改及触发校验等能力。
Field
节点表单中的某个渲染字段。注意， Form 已经提供了数据层的逻辑，Field 更多是一个渲染层的模型，它仅在表单字段渲染后才存在。
validate
表单校验。通常有对单个字段的校验也有整体表单校验。
effect
表单数据的副作用。通常指在表单数据发生一些事件时要触发特定逻辑。 如在某字段的数据变更时要同步一些信息到某个store，这个可以被称为一个effect。
FormPlugin
表单插件。可以配置在formMeta 中，插件可以对表单进行一系列深度操作。如变量插件。
---
url: /guide/concepts/ecs.md
---
# ECS
## 为什么需要 ECS
:::warning ECS （Entity-Component-System）
适合解耦大的数据对象，常用于游戏，游戏的每个角色（Entity）数据都非常庞大，需要拆分成如物理引擎相关数据、皮肤相关、角色属性等 (多个 Component)，供不同的子系统（System）消费。流程的数据结构复杂，很适合用ECS做拆解
:::
## 方案对比
我们对比两个数据方案：
### 1. ReduxStore 方案
```jsx pure
const store = () => ({
nodes: [{
position: any
form: any
data3: any
}],
edges: []
})
function Playground() {
const { nodes } = useStore(store)
return nodes.map(node => )
}
```
优点：
- 中心化数据管理使用简单
缺点：
- 中心化数据管理无法精确更新，带来性能瓶颈
- 扩展性差，节点新增一个数据，都耦合到一个 大JSON 里
### 2. ECS 方案
备注：
- NodeData 对应的是 ECS - Component
- Layer 对应 ECS - System
```jsx pure
/**
* 画布文档数据
*/
class FlowDocument {
/**
* * 节点数据定义, 节点创建时候会把数据实例化
*/
nodeDefines: [
NodePositionData,
NodeFormData,
NodeLineData
]
nodeEntities: Entity[] = []
}
/**
* 节点
*/
class FlowNodeEntity {
id: string // 只有id 不带数据
getData: (dataId: string) => EntityData
}
// 渲染线条
class LinesLayer {
/**
* 内部通过 node.getData(NodeLineData) 获取对应的数据，下同
*/
@observeEntityData(FlowNodeEntity, NodeLineData) lines: NodeLineData[]
render() {
// 渲染线条
return this.lines.map(line => )
}
}
// 渲染节点位置
class NodePositionsLayer {
@observeEntityData(FlowNodeEntity, NodePositionData) positions: NodePositionData[]
render() {
// 渲染位置及排版
}
}
// 渲染节点表单
class NodeFormsLayer {
@observeEntityData(FlowNodeEntity, NodeFormData) contents: NodeFormData[]
render() {
// 渲染节点内容
}
}
/**
* 画布实例，通过 Layer 分层渲染
*/
class Playground {
layers: [
LinesLayer, // 线条渲染
NodePositionsLayer, // 位置渲染
NodeFormsLayer // 内容渲染
]，
render() {
// 画布分层渲染
return this.layers.map(layer => layer.render())
}
}
```
优点：
- 节点数据拆开来单独控制渲染，性能可做到精确更新
- 扩展性强，新增一个节点数据，则新增一个 XXXData + XXXLayer
缺点：
- 有一定学习成本
---
url: /guide/concepts/ioc.md
---
# IOC
## 为什么需要 IOC
:::warning 几个概念
- 控制反转： Inversion of Control， 是面向对象中的一种设计原则，可以用来降低代码模块之间的耦合度，其中最常见的方式叫做依赖注入（Dependency Injection，简称DI）
- 领域逻辑：Domain Logic，也可以叫 业务逻辑（Business Logic），这些业务逻辑与特定的产品功能相关
- 面向切面编程：AOP （Aspect-Oriented Programming），最核心的设计原则是将软件系统拆分为公用逻辑 (横切，有贯穿的意味) 和 领域逻辑 （纵切）的多个个方面 (Aspect)，横切部分可以被所有的 纵切 部分 “按需消费”
:::
回答这个问题之前先了解切面编程，切面编程目的是将领域逻辑的粒度拆的更细，横切部分可被纵切 “按需消费” ，横切和纵切的连接也叫 织入 (Weaving)，而 IOC 就是扮演 Weaving 注入到纵切的角色
理想的切面编程
```ts
- myAppliation 提供业务逻辑
- service 特定的业务逻辑服务
- customDomainLogicService
- contributionImplement 钩子的注册实例化
- MyApplicationContributionImpl
- component 业务组件
- core 提供通用逻辑
- model 通用模型
- contribution 钩子接口
- LifecycleContribution 应用的生命周期
- CommandContribution
- service 公用的service的服务
- CommandService
- ClipboardService
- component 公用的组件
```
```ts
// IOC 的注入
@injectable()
export class CustomDomainLogicService {
@inject(FlowContextService) protected flowContextService: FlowContextService;
@inject(CommandService) protected commandService: CommandService;
@inject(SelectionService) protected selectionService: SelectionService;
}
// IOC 的接口声明
interface LifecycleContribution {
onInit(): void
onStart(): void
onDispose(): void
}
// IOC 的接口实现
@injectable()
export class MyApplicationContributionImpl implements LifecycleContribution {
onStart(): void {
// 特定的业务逻辑代码
}
}
// 手动挂在到生命周期钩子
bind(LifecycleContribution).toService(MyApplicationContributionImpl)
```
:::warning IOC是切面编程的一种手段，引入后，底层模块可以以接口形式暴露给外部注册，带来的好处：
- 实现微内核 + 插件化的设计，实现插件的可插拔按需消费
- 可以让包拆得更干净，实现 feature 式的拆包
:::
---
url: /guide/concepts/reactflow.md
---
# 对比 ReactFlow
[Reactflow](https://reactflow.dev/) 是很优秀的开源项目，架构及代码清晰，但偏流程渲染引擎的底层架构 (Node、Edge、Handle)，需要在上层开发大量功能才能适配复杂场景(如 固定布局，需要对数据建模写布局算法), 高级功能收费。
相比 Reactflow，FlowGram 的目标是提供流程编辑一整套开箱即用的解决方案。
- 下边是 Reactflow 官方提供的 pro 收费能力
| 付费功能 | FlowGram 是否支持 | 未来计划支持 |
|----------------------------------|------------------------|--------------|
| 分组 | 支持 | |
| redo/undo | 支持 | |
| copy/paste | 支持 | |
| HelpLines 辅助线 | 支持 | |
| 自定义节点及形状 | 支持 | |
| 自定义线条 | 支持 | |
| AutoLayout，自动布局整理 | 支持 | |
| ForceLayout，节点排斥效果 | 不支持 | No |
| Expand/Collapse | 支持 | |
| Collaborative 多人协同 | 不支持 | Yes |
| WorkflowBuilder 相当于固定布局完整案例 | 支持 | |
- Reactflow 事件都是绑定在原子化的 dom 节点上，且内置，交互定制成本高，需要理解它的源码才能深度开发，如下，在画布缩放很小时候无法选到点位
|
由于 事件是绑定在 svg 上，svg 在缩放后很容易点不到
|
FlowGram 的事件是一种全局监听 mousemove 变化，并通过计算及 Threshold 大致确定位置，即使缩放很小也能点到, 同时支持线条重连
|
---
url: /guide/runtime/introduction.md
---
# FlowGram Runtime 介绍
**⚠️ 目前为早期开发阶段**
- API 接口可能会有变更，不保证向后兼容
- 目前只支持 nodejs 运行时，且只支持自由布局
本文档将介绍 FlowGram Runtime 的基本概念、设计理念和核心功能，帮助业务接入方开发者了解和使用这个工作流运行时引擎的参考实现。
## 什么是 FlowGram Runtime
FlowGram Runtime 是一个工作流运行时引擎的参考实现，旨在为业务接入方开发者提供运行时参考。能够解析和执行基于图结构的工作流，支持多种节点类型，包括 Start、End、LLM、Condition、Loop 等。
### 项目定位与目标
FlowGram Runtime **定位为 demo 而非 SDK**，主要目标是：
- 提供工作流运行时的设计和实现参考
- 展示如何构建和扩展工作流引擎
- 为开发者提供可以直接学习和修改的代码基础
- 支持快速原型开发和概念验证
作为参考实现，FlowGram Runtime 不会作为包发布，开发者需要 fork 代码库后，根据自己的业务场景和需求进行修改和扩展。
## 核心概念
### 工作流 (Workflow)
工作流是由节点和边组成的有向图，描述了一系列任务的执行顺序和逻辑关系。在 FlowGram Runtime 中，工作流使用 JSON 格式定义，包含节点和边两部分。
工作流定义示例：
```json
{
"nodes": [
{ "id": "start", "type": "Start", "meta": {}, "data": {} },
{ "id": "llm", "type": "LLM", "meta": {}, "data": { "systemPrompt": "你是助手", "userPrompt": "{{start.input}}" } },
{ "id": "end", "type": "End", "meta": {}, "data": {} }
],
"edges": [
{ "sourceNodeID": "start", "targetNodeID": "llm" },
{ "sourceNodeID": "llm", "targetNodeID": "end" }
]
}
```
### 节点 (Node)
节点是工作流中的基本执行单元，每个节点代表一个特定的操作或任务。FlowGram Runtime 支持多种节点类型，包括：
- **Start 节点**：工作流的起点，提供工作流输入
- **End 节点**：工作流的终点，收集工作流输出
- **LLM 节点**：调用大型语言模型，支持系统提示词和用户提示词
- **Condition 节点**：根据条件选择不同执行分支，支持多种比较操作符
- **Loop 节点**：对数组中的每个元素执行相同操作，支持子工作流
每个节点包含 ID、类型、元数据和数据等信息，不同类型的节点具有不同的配置选项和行为。
### 边 (Edge)
边定义了节点之间的连接关系，表示数据和控制流的传递方向。每条边包含源节点、目标节点和可选的源端口信息。
边的定义决定了工作流的执行路径和数据流向，是构建复杂工作流逻辑的基础。
### 执行引擎 (Engine)
执行引擎负责解析工作流定义，按照定义的逻辑顺序执行各个节点，并处理节点间的数据流转。是 FlowGram Runtime 的核心组件，管理整个工作流的生命周期。
## 技术架构
FlowGram Runtime 采用领域驱动设计（DDD）架构，将系统分为多个领域：
- **文档 (Document)**：工作流定义的数据结构，包括节点和边的模型
- **引擎 (Engine)**：工作流执行的核心逻辑，负责工作流的解析和调度
- **执行器 (Executor)**：负责执行各类节点的具体逻辑，如 LLM 调用、条件判断等
- **状态 (State)**：维护工作流执行过程中的状态信息，包括执行历史和当前状态
- **变量 (Variable)**：管理工作流执行过程中的变量数据，支持变量的存储和访问
### 技术栈
FlowGram Runtime JS 版本基于以下技术栈构建：
- **TypeScript**：提供类型安全和现代 JavaScript 特性
- **LangChain**：集成大型语言模型和相关工具
- **OpenAI API**：提供 AI 模型调用能力
- **Fastify**：高性能的 Web 框架，用于 HTTP API 服务
- **tRPC**：类型安全的 API 框架
### 模块组成
项目由三个核心模块组成：
1. **js-core**：核心运行时库，包含工作流引擎、节点执行器和状态管理
2. **interface**：接口定义，定义了 API 和数据模型
3. **nodejs**：NodeJS 服务实现，提供 HTTP API 和服务管理
## 当前开发状态和限制 ⚠️
FlowGram Runtime 目前处于早期开发阶段，有以下状态和限制：
### 开发状态
- 核心功能已经实现，包括工作流引擎、基本节点类型和主要 API
- 基本的 LLM 集成已完成，支持与 OpenAI 和 LangChain 的集成
- 提供了基本的错误处理和状态管理机制
- 包含测试用例和示例工作流，但文档相对有限
### 已知限制
- **API 不稳定**：API 接口可能会有变更，不保证向后兼容
- **功能不完善**：部分功能尚未完全实现，如 ServerInfo API 和 Validation API
- **错误处理**：错误处理机制不够完善，某些边缘情况可能导致异常
- **存储机制**：当前存储机制较为简单，不适合生产环境的持久化需求
- **安全机制**：缺乏完善的安全机制，如认证、授权和输入验证
## 未来开发计划
FlowGram Runtime 的未来发展计划包括：
### 多语言支持
目前只有 JavaScript/TypeScript 版本，计划开发：
- **Python 版本**：适用于数据科学和机器学习场景
- **Go 版本**：适用于高性能服务端场景
### 功能增强
- 支持固定布局
- 增加更多节点类型：代码节点、意图识别节点、批处理节点、终止循环节点、继续循环节点、HTTP节点
- 完善错误处理和异常恢复机制
- 完善的服务端校验接口，包括 schema 校验和输入校验等
- 支持 `Docker` 运行
### 试运行优化
- 试运行支持输入表单
- 试运行输入参数校验
- 单节点调试
---
url: /guide/runtime/quick-start.md
---
# 快速开始
本文档将帮助您快速上手使用 FlowGram Runtime，包括环境准备、安装配置、创建和运行工作流等内容。通过本指南，您将能够在短时间内搭建起自己的工作流运行环境并运行第一个工作流示例。
## 获取代码
由于 FlowGram Runtime 定位为 demo 而非 SDK，不会作为 npm 包发布，您需要通过以下步骤来获取和使用：
### 方式一：Fork 仓库（推荐）
1. 访问 FlowGram Runtime 的代码仓库
2. 点击 "Fork" 按钮创建您自己的仓库副本
3. 克隆您 fork 的仓库到本地
### 方式二：直接克隆 flowgram 仓库
如果您只是想尝试使用而不需要提交更改，可以直接克隆原始仓库：
```bash
git clone git@github.com:bytedance/flowgram.ai.git
cd flowgram.ai
```
## 环境准备
在开始使用 FlowGram Runtime 之前，请确保您的开发环境满足以下要求：
- **Node.js**：版本 18.x 或更高版本（推荐使用 LTS 版本）
```bash
nvm install lts/hydrogen
nvm alias default lts/hydrogen # set default node version
nvm use lts/hydrogen
```
- **包管理器**：pnpm 9+ 与 rush 5+
```bash
npm i -g pnpm@10.6.5 @microsoft/rush@5.150.0
```
## 安装依赖和项目设置
获取代码后，需要安装依赖并进行基本设置：
1. **安装项目依赖**
```bash
rush install
```
2. **构建项目**
```bash
rush build
```
## 启动服务
1. **进入运行时目录**
```bash
cd packages/runtime/nodejs
```
2. **启动 nodejs 服务器**
```bash
npm run dev
```
如果一切正常，你能在控制台看到以下输出：
```
> Listen Port: 4000
> Server Address: http://localhost:4000
> API Docs: http://localhost:4000/docs
```
3. **验证服务运行**
在命令行支持 cURL 请求
```bash
curl --location 'http://localhost:4000/api/task/run' \
--header 'Content-Type: application/json' \
--data '{
"inputs": {
"test_input": "Hello FlowGram!"
},
"schema": "{\"nodes\":[{\"id\":\"start_0\",\"type\":\"start\",\"meta\":{\"position\":{\"x\":180,\"y\":0}},\"data\":{\"title\":\"Start\",\"outputs\":{\"type\":\"object\",\"properties\":{\"test_input\":{\"key\":4,\"name\":\"test_input\",\"isPropertyRequired\":true,\"type\":\"string\",\"extra\":{\"index\":0}}},\"required\":[\"test_input\"]}}},{\"id\":\"end_0\",\"type\":\"end\",\"meta\":{\"position\":{\"x\":640,\"y\":0}},\"data\":{\"title\":\"End\",\"inputsValues\":{\"test_output\":{\"type\":\"ref\",\"content\":[\"start_0\",\"test_input\"]}},\"inputs\":{\"type\":\"object\",\"properties\":{\"test_output\":{\"type\":\"string\"}}}}}],\"edges\":[{\"sourceNodeID\":\"start_0\",\"targetNodeID\":\"end_0\"}]}"
}'
```
此时服务所在的命令行应该会有如下输出：
```
> POST TaskRun - taskID: xxxx-xxxx-xxxx-xxxx
{ test_input: 'Hello FlowGram!' }
> LOG Task finished: xxxx-xxxx-xxxx-xxxx
{ test_output: 'Hello FlowGram!' }
```
## 接入到 FlowGram 编辑器（Web 前端）
在 `editorProps` 配置中修改 runtime 为 server 模式，并配置服务地址
```ts
createRuntimePlugin({
// mode: 'browser', // 移除这一行
mode: 'server',
serverConfig: {
domain: 'localhost',
port: 4000,
protocol: 'http',
},
})
```
## 编译服务
1. **进入运行时目录**
```bash
cd packages/runtime/nodejs
```
2. **编译服务**
```bash
npm run build
```
2. **启动 nodejs 服务器**
```bash
node dist/index.js
```
---
url: /guide/runtime/schema.md
---
# Workflow Schema
本文档详细介绍了 Workflow 的 Schema 结构。Workflow Schema 是定义工作流程的核心配置，描述了节点，以及边的配置。
## 基本结构
一个完整的 Workflow Schema 包含以下主要部分：
```typescript
interface WorkflowSchema {
nodes: WorkflowNodeSchema[];
edges: WorkflowEdgeSchema[];
}
```
## 节点 Schema
节点是工作流中的基本单元，每个节点都有其特定的类型和配置：
```typescript
interface WorkflowNodeSchema {
id: string; // 节点唯一标识符
type: T; // 节点类型
meta: WorkflowNodeMetaSchema; // 节点元数据
data: D & { // 节点数据
title?: string; // 节点标题
inputsValues?: Record; // 输入值
inputs?: IJsonSchema; // 输入模式定义
outputs?: IJsonSchema; // 输出模式定义
[key: string]: any; // 其他自定义数据
};
blocks?: WorkflowNodeSchema[]; // 子节点（用于复合节点）
edges?: WorkflowEdgeSchema[]; // 子节点之间的连接
}
```
### 节点元数据
```typescript
interface WorkflowNodeMetaSchema {
position: PositionSchema; // 节点在画布中的位置
}
```
## 边 Schema
边定义了节点之间的连接关系：
```typescript
interface WorkflowEdgeSchema {
sourceNodeID: string; // 源节点ID
targetNodeID: string; // 目标节点ID
sourcePortID?: string; // 源节点端口ID（可选）
targetPortID?: string; // 目标节点端口ID（可选）
}
```
## 值类型
Workflow 支持多种值类型：
```typescript
enum WorkflowVariableType {
String = 'string', // 字符串
Integer = 'integer', // 整数
Number = 'number', // 数字
Boolean = 'boolean', // 布尔值
Object = 'object', // 对象
Array = 'array', // 数组
Null = 'null' // 空值
}
```
### 流程值
在节点的输入值中，支持以下几种类型：
```typescript
type IFlowValue =
| IFlowConstantValue // 常量值
| IFlowRefValue // 引用值
| IFlowExpressionValue // 表达式值
| IFlowTemplateValue; // 模板值
```
每种类型的具体定义：
```typescript
interface IFlowConstantValue {
type: 'constant';
content?: string | number | boolean;
}
interface IFlowRefValue {
type: 'ref';
content?: string[];
}
interface IFlowExpressionValue {
type: 'expression';
content?: string;
}
interface IFlowTemplateValue {
type: 'template';
content?: string;
}
```
## JSON Schema
节点的输入输出定义使用 JSON Schema 格式：
```typescript
interface IJsonSchema {
type: T; // 数据类型
default?: any; // 默认值
title?: string; // 标题
description?: string; // 描述
enum?: (string | number)[]; // 枚举值
properties?: Record>; // 对象属性
additionalProperties?: IJsonSchema; // 额外属性
items?: IJsonSchema; // 数组项定义
required?: string[]; // 必需字段
$ref?: string; // 引用
extra?: { // 额外配置
index?: number; // 索引
weak?: boolean; // 弱类型比较
formComponent?: string; // 表单组件
[key: string]: any;
};
}
```
---
url: /guide/runtime/node.md
---
# 内置节点
本文档详细介绍FlowGram Runtime中的节点系统，包括节点的基本概念、现有节点类型及其用法，以及如何创建自定义节点。
现有节点：
- 开始节点
- 结束节点
- LLM节点
- 条件节点
- 循环节点
> 后续会支持代码节点、意图识别节点、批处理节点、终止循环节点、继续循环节点、HTTP节点
## 节点概述
### 节点在FlowGram Runtime中的作用
节点是FlowGram工作流的基本执行单元，每个节点代表一个特定的操作或功能。FlowGram工作流本质上是由多个节点通过边连接形成的有向图，描述了任务的执行流程。节点系统的核心职责包括：
1. **执行特定操作**：每种类型的节点都有其特定的功能，如启动工作流、调用LLM模型、执行条件判断等
2. **处理输入输出**：节点接收输入数据，执行操作后产生输出数据
3. **控制执行流程**：通过条件节点和循环节点控制工作流的执行路径
### INodeExecutor接口介绍
所有节点执行器都必须实现`INodeExecutor`接口，该接口定义了节点执行器的基本结构：
```typescript
interface INodeExecutor {
// 节点类型，用于标识不同种类的节点
type: string;
// 执行方法，处理节点的具体逻辑
execute(context: ExecutionContext): Promise;
}
```
其中：
- `type`：节点类型标识符，如'start'、'end'、'llm'等
- `execute`：节点执行方法，接收执行上下文，返回执行结果
### 节点执行流程
节点的执行流程如下：
1. **准备阶段**：
- 从执行上下文中获取节点的输入数据
- 验证输入数据是否符合要求
2. **执行阶段**：
- 执行节点特定的业务逻辑
- 处理可能出现的异常情况
3. **完成阶段**：
- 生成节点的输出数据
- 更新节点状态
- 返回执行结果
工作流引擎会根据节点间的连接关系，按顺序调度节点的执行。对于特殊节点（如条件节点和循环节点），引擎会根据节点的执行结果决定下一步的执行路径。
## 现有节点详细介绍
FlowGram Runtime目前实现了五种类型的节点：Start、End、LLM、Condition和Loop。下面将详细介绍每种节点的功能、配置和使用示例。
### 开始节点 `Start`
#### 功能
Start节点是工作流的起始节点，用于接收工作流的输入数据并开始工作流的执行。每个工作流必须有且只有一个Start节点。
#### 配置选项
| 选项 | 类型 | 必填 | 描述 |
|------|------|------|------|
| outputs | JSONSchema | 是 | 定义工作流的输入数据结构 |
#### 使用示例
```json
{
"id": "start_0",
"type": "start",
"data": {
"title": "开始节点",
"outputs": {
"type": "object",
"properties": {
"prompt": {
"type": "string",
"description": "用户输入的提示词"
}
},
"required": ["prompt"]
}
}
}
```
在这个例子中，Start节点定义了工作流需要一个名为`prompt`的字符串类型输入。
### 结束节点 `End`
#### 功能
End节点是工作流的结束节点，用于收集工作流的输出数据并结束工作流的执行。每个工作流必须有至少一个End节点。
#### 配置选项
| 选项 | 类型 | 必填 | 描述 |
|------|------|------|------|
| inputs | JSONSchema | 是 | 定义工作流的输出数据结构 |
| inputsValues | `Record` | 是 | 定义工作流的输出数据值，可以是引用或常量 |
#### 使用示例
```json
{
"id": "end_0",
"type": "end",
"data": {
"title": "结束节点",
"inputs": {
"type": "object",
"properties": {
"result": {
"type": "string",
"description": "工作流的输出结果"
}
}
},
"inputsValues": {
"result": {
"type": "ref",
"content": ["llm_0", "result"]
}
}
}
}
```
在这个例子中，End节点定义了工作流的输出包含一个名为`result`的字符串，其值引用自ID为`llm_0`的节点的`result`输出。
### LLM节点 `LLM`
#### 功能
LLM节点用于调用大型语言模型执行自然语言处理任务，是FlowGram工作流中最常用的节点类型之一。
#### 配置选项
| 选项 | 类型 | 必填 | 描述 |
|------|------|------|------|
| modelName | string | 是 | 模型名称，如"gpt-3.5-turbo" |
| apiKey | string | 是 | API密钥 |
| apiHost | string | 是 | API主机地址 |
| temperature | number | 是 | 温度参数，控制输出的随机性 |
| systemPrompt | string | 否 | 系统提示词，设置AI助手的角色和行为 |
| prompt | string | 是 | 用户提示词，即向AI提出的问题或请求 |
#### 使用示例
```json
{
"id": "llm_0",
"type": "llm",
"data": {
"title": "LLM节点",
"inputsValues": {
"modelName": {
"type": "constant",
"content": "gpt-3.5-turbo"
},
"apiKey": {
"type": "constant",
"content": "sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
},
"apiHost": {
"type": "constant",
"content": "https://api.openai.com/v1"
},
"temperature": {
"type": "constant",
"content": 0.7
},
"systemPrompt": {
"type": "constant",
"content": "你是一个有帮助的助手。"
},
"prompt": {
"type": "ref",
"content": ["start_0", "prompt"]
}
},
"inputs": {
"type": "object",
"required": ["modelName", "apiKey", "apiHost", "temperature", "prompt"],
"properties": {
"modelName": { "type": "string" },
"apiKey": { "type": "string" },
"apiHost": { "type": "string" },
"temperature": { "type": "number" },
"systemPrompt": { "type": "string" },
"prompt": { "type": "string" }
}
},
"outputs": {
"type": "object",
"properties": {
"result": { "type": "string" }
}
}
}
}
```
在这个例子中，LLM节点使用gpt-3.5-turbo模型，温度参数为0.7，系统提示词设置为"你是一个有帮助的助手"，用户提示词引用自Start节点的输入。
### 条件节点 `Condition`
#### 功能
Condition节点用于根据条件选择不同的执行分支，实现工作流的条件逻辑。
#### 配置选项
| 选项 | 类型 | 必填 | 描述 |
|------|------|------|------|
| conditions | Array | 是 | 条件数组，每个条件包含key和value |
条件value的结构：
| 选项 | 类型 | 必填 | 描述 |
|------|------|------|------|
| left | ValueSchema | 是 | 左值，可以是引用或常量 |
| operator | string | 是 | 操作符，如"eq"、"gt"等 |
| right | ValueSchema | 是 | 右值，可以是引用或常量 |
支持的操作符：
| 操作符 | 描述 | 适用类型 |
|--------|------|----------|
| eq | 等于 | 所有类型 |
| neq | 不等于 | 所有类型 |
| gt | 大于 | 数字、字符串 |
| gte | 大于等于 | 数字、字符串 |
| lt | 小于 | 数字、字符串 |
| lte | 小于等于 | 数字、字符串 |
| includes | 包含 | 字符串、数组 |
| startsWith | 以...开始 | 字符串 |
| endsWith | 以...结束 | 字符串 |
#### 使用示例
```json
{
"id": "condition_0",
"type": "condition",
"data": {
"title": "条件节点",
"conditions": [
{
"key": "if_true",
"value": {
"left": {
"type": "ref",
"content": ["start_0", "value"]
},
"operator": "gt",
"right": {
"type": "constant",
"content": 10
}
}
},
{
"key": "if_false",
"value": {
"left": {
"type": "ref",
"content": ["start_0", "value"]
},
"operator": "lte",
"right": {
"type": "constant",
"content": 10
}
}
}
]
}
}
```
在这个例子中，条件节点定义了两个分支：当Start节点的value输出大于10时走"if_true"分支，否则走"if_false"分支。
### 循环节点 `Loop`
#### 功能
Loop节点用于对数组中的每个元素执行相同的操作，实现工作流的循环逻辑。
#### 配置选项
| 选项 | 类型 | 必填 | 描述 |
|------|------|------|------|
| loopFor | ValueSchema | 是 | 要迭代的数组，通常是一个引用 |
| loopOutputs | `Record` | 是 | 循环输出，引用子节点的变量 |
| blocks | `Array` | 是 | 循环体内的节点数组 |
#### 使用示例
```json
{
"id": "loop_0",
"type": "loop",
"data": {
"title": "循环节点",
"loopFor": {
"type": "ref",
"content": ["start_0", "items"]
},
"loopOutputs": {
"results": {
"type": "ref",
"content": ["llm_1", "result"]
}
}
},
"blocks": [
{
"id": "llm_1",
"type": "llm",
"data": {
"inputsValues": {
"prompt": {
"type": "ref",
"content": ["loop_0_locals", "item"]
}
}
}
}
]
}
```
在这个例子中，循环节点对Start节点的items输出（假设是一个数组）进行迭代，对每个元素调用一个LLM节点。在循环体内，可以通过`loop_0_locals.item`引用当前迭代的元素，循环输出可引用LLM节点输出作为循环节点的输出。
## 如何新增自定义节点
FlowGram Runtime设计为可扩展的，允许开发者添加自定义节点类型。以下是实现和注册自定义节点的步骤。
### 实现INodeExecutor接口的步骤
1. **创建节点执行器类**：
```typescript
import { ExecutionContext, ExecutionResult, INodeExecutor } from '@flowgram.ai/runtime-interface';
export class CustomNodeExecutor implements INodeExecutor {
// 定义节点类型
public type = 'custom';
// 实现execute方法
public async execute(context: ExecutionContext): Promise {
// 1. 从上下文中获取输入
const inputs = context.inputs as CustomNodeInputs;
// 2. 验证输入
if (!inputs.requiredParam) {
throw new Error('必需参数缺失');
}
// 3. 执行节点逻辑
const result = await this.processCustomLogic(inputs);
// 4. 返回输出
return {
outputs: {
result: result
}
};
}
// 自定义处理逻辑
private async processCustomLogic(inputs: CustomNodeInputs): Promise {
// 实现自定义逻辑
return `处理结果: ${inputs.requiredParam}`;
}
}
// 定义输入接口
interface CustomNodeInputs {
requiredParam: string;
optionalParam?: number;
}
```
2. **处理异常情况**：
```typescript
public async execute(context: ExecutionContext): Promise {
try {
const inputs = context.inputs as CustomNodeInputs;
// 验证输入
if (!inputs.requiredParam) {
throw new Error('必需参数缺失');
}
// 执行节点逻辑
const result = await this.processCustomLogic(inputs);
return {
outputs: {
result: result
}
};
} catch (error) {
// 处理异常
console.error('节点执行失败:', error);
throw error; // 或者返回特定的错误输出
}
}
```
### 注册自定义节点的方法
将自定义节点执行器添加到FlowGram Runtime的节点执行器注册表中：
```typescript
import { WorkflowRuntimeNodeExecutors } from './nodes';
import { CustomNodeExecutor } from './nodes/custom';
// 注册自定义节点执行器
WorkflowRuntimeNodeExecutors.push(new CustomNodeExecutor());
```
### 自定义节点开发最佳实践
1. **明确节点职责**：
- 每个节点应该有明确的单一职责
- 避免在一个节点中实现多个不相关的功能
2. **输入验证**：
- 在执行节点逻辑前验证所有必需的输入
- 提供清晰的错误信息，便于调试
3. **异常处理**：
- 捕获并处理可能的异常情况
- 避免让未处理的异常导致整个工作流崩溃
4. **性能考虑**：
- 对于耗时操作，考虑实现超时机制
- 避免阻塞主线程的长时间同步操作
5. **可测试性**：
- 设计节点时考虑单元测试的便利性
- 将核心逻辑与外部依赖分离，便于模拟测试
6. **文档和注释**：
- 为自定义节点提供详细的文档
- 在代码中添加必要的注释，特别是复杂逻辑部分
### 自定义节点示例
下面是一个完整的自定义HTTP请求节点示例，用于发送HTTP请求并处理响应：
```typescript
import { ExecutionContext, ExecutionResult, INodeExecutor } from '@flowgram.ai/runtime-interface';
import axios from 'axios';
// 定义HTTP节点的输入接口
interface HTTPNodeInputs {
url: string;
method: 'GET' | 'POST' | 'PUT' | 'DELETE';
headers?: Record;
body?: any;
timeout?: number;
}
// 定义HTTP节点的输出接口
interface HTTPNodeOutputs {
status: number;
data: any;
headers: Record;
}
export class HTTPNodeExecutor implements INodeExecutor {
// 定义节点类型
public type = 'http';
// 实现execute方法
public async execute(context: ExecutionContext): Promise {
// 1. 从上下文中获取输入
const inputs = context.inputs as HTTPNodeInputs;
// 2. 验证输入
if (!inputs.url) {
throw new Error('URL参数缺失');
}
if (!inputs.method) {
throw new Error('请求方法参数缺失');
}
// 3. 执行HTTP请求
try {
const response = await axios({
url: inputs.url,
method: inputs.method,
headers: inputs.headers || {},
data: inputs.body,
timeout: inputs.timeout || 30000
});
// 4. 处理响应
const outputs: HTTPNodeOutputs = {
status: response.status,
data: response.data,
headers: response.headers as Record
};
// 5. 返回输出
return {
outputs
};
} catch (error) {
if (axios.isAxiosError(error)) {
// 处理Axios错误
if (error.response) {
// 服务器返回了错误状态码
return {
outputs: {
status: error.response.status,
data: error.response.data,
headers: error.response.headers as Record
}
};
} else if (error.request) {
// 请求已发送但未收到响应
throw new Error(`请求超时或无响应: ${error.message}`);
} else {
// 请求配置有误
throw new Error(`请求配置错误: ${error.message}`);
}
} else {
// 处理非Axios错误
throw error;
}
}
}
}
// 注册HTTP节点执行器
import { WorkflowRuntimeNodeExecutors } from './nodes';
WorkflowRuntimeNodeExecutors.push(new HTTPNodeExecutor());
```
使用示例：
```json
{
"id": "http_0",
"type": "http",
"data": {
"title": "HTTP请求节点",
"inputsValues": {
"url": {
"type": "constant",
"content": "https://api.example.com/data"
},
"method": {
"type": "constant",
"content": "GET"
},
"headers": {
"type": "constant",
"content": {
"Authorization": "Bearer token123"
}
}
},
"inputs": {
"type": "object",
"required": ["url", "method"],
"properties": {
"url": { "type": "string" },
"method": { "type": "string", "enum": ["GET", "POST", "PUT", "DELETE"] },
"headers": { "type": "object" },
"body": { "type": "object" },
"timeout": { "type": "number" }
}
},
"outputs": {
"type": "object",
"properties": {
"status": { "type": "number" },
"data": { "type": "object" },
"headers": { "type": "object" }
}
}
}
}
```
通过以上步骤和示例，您可以根据自己的需求开发和注册自定义节点，扩展FlowGram Runtime的功能。
---
url: /guide/runtime/api.md
---
# FlowGram Runtime API 参考
FlowGram Runtime 提供了五个核心 API，用于工作流的验证、运行、监控、结果获取和取消。本文档详细介绍了这些 API 的使用方法、参数和返回值。
## TaskRun API
### 功能描述
TaskRun API 用于启动一个工作流任务，接收工作流 schema 和初始输入，返回任务 ID。
### 参数说明
TaskRun API 接收一个 `TaskRunInput` 对象作为参数：
| 参数名 | 类型 | 必填 | 描述 |
| ------ | ---- | ---- | ---- |
| schema | string | 是 | 工作流 schema 的 JSON 字符串，定义了工作流的节点和边 |
| inputs | object | 否 | 工作流的初始输入参数，可以为空 |
`schema` 参数是一个 JSON 字符串，定义了工作流的结构，包括节点和边的信息。schema 的基本结构如下：
```typescript
interface WorkflowSchema {
nodes: WorkflowNodeSchema[];
edges: WorkflowEdgeSchema[];
}
interface WorkflowNodeSchema {
id: string;
type: FlowGramNode;
name?: string;
meta: {
position: {
x: number;
y: number;
};
};
data: any;
blocks?: WorkflowNodeSchema[];
edges?: WorkflowEdgeSchema[];
}
interface WorkflowEdgeSchema {
sourceNodeID: string;
sourcePort: string;
targetNodeID: string;
targetPort: string;
}
```
### 返回值说明
TaskRun API 返回一个 `TaskRunOutput` 对象：
| 字段名 | 类型 | 描述 |
| ------ | ---- | ---- |
| taskID | string | 任务的唯一标识符，用于后续查询任务状态和结果 |
### 错误处理
TaskRun API 可能会抛出以下错误：
- **Schema 解析错误**：当提供的 schema 不是有效的 JSON 字符串时
- **Schema 结构错误**：当 schema 结构不符合预期格式时
- **节点类型错误**：当 schema 中包含不支持的节点类型时
- **初始化错误**：当工作流初始化失败时
### 使用示例
```javascript
import { TaskRunAPI } from '@flowgram.ai/runtime-js';
const schema = JSON.stringify({
nodes: [
{
id: 'start',
type: 'start',
meta: { position: { x: 0, y: 0 } },
data: {}
},
{
id: 'llm',
type: 'llm',
meta: { position: { x: 200, y: 0 } },
data: {
modelName: 'gpt-3.5-turbo',
temperature: 0.7,
systemPrompt: '你是一个助手',
prompt: '介绍一下自己'
}
},
{
id: 'end',
type: 'end',
meta: { position: { x: 400, y: 0 } },
data: {}
}
],
edges: [
{
sourceNodeID: 'start',
sourcePort: 'out',
targetNodeID: 'llm',
targetPort: 'in'
},
{
sourceNodeID: 'llm',
sourcePort: 'out',
targetNodeID: 'end',
targetPort: 'in'
}
]
});
const inputs = {
userInput: '请介绍一下自己'
};
async function runWorkflow() {
try {
const result = await TaskRunAPI({
schema,
inputs
});
console.log('Task ID:', result.taskID);
return result.taskID;
} catch (error) {
console.error('启动工作流失败:', error);
}
}
```
### 注意事项
- schema 必须是有效的 JSON 字符串，且符合 WorkflowSchema 的结构
- 工作流必须包含一个起始节点（type: 'start'）和一个结束节点（type: 'end'）
- 节点之间的连接必须通过边（edges）正确定义
- 任务启动后会异步执行，可以通过 TaskReport API 和 TaskResult API 获取执行状态和结果
## TaskReport API
### 功能描述
TaskReport API 用于获取工作流任务的执行报告，包括任务状态和各节点的执行状态。
### 参数说明
TaskReport API 接收一个 `TaskReportInput` 对象作为参数：
| 参数名 | 类型 | 必填 | 描述 |
| ------ | ---- | ---- | ---- |
| taskID | string | 是 | 任务的唯一标识符，由 TaskRun API 返回 |
### 返回值说明
TaskReport API 返回一个 `TaskReportOutput` 对象，包含任务的执行报告：
| 字段名 | 类型 | 描述 |
| ------ | ---- | ---- |
| workflow | WorkflowStatus | 工作流整体状态 |
| nodes | `Record` | 各节点的执行状态 |
`WorkflowStatus` 结构如下：
```typescript
interface WorkflowStatus {
status: 'idle' | 'processing' | 'success' | 'fail' | 'canceled';
terminated: boolean;
}
```
`NodeStatus` 结构如下：
```typescript
interface NodeStatus {
status: 'idle' | 'processing' | 'success' | 'fail' | 'canceled';
startTime?: number;
endTime?: number;
}
```
### 错误处理
TaskReport API 可能会遇到以下错误情况：
- **任务不存在**：当提供的 taskID 不存在时，返回 undefined
- **报告生成错误**：当报告生成过程中出现错误时
### 使用示例
```javascript
import { TaskReportAPI } from '@flowgram.ai/runtime-js';
async function getTaskReport(taskID) {
try {
const report = await TaskReportAPI({ taskID });
if (!report) {
console.log('任务不存在或报告未生成');
return;
}
console.log('工作流状态:', report.workflow.status);
console.log('工作流是否终止:', report.workflow.terminated);
// 打印各节点状态
for (const [nodeId, nodeStatus] of Object.entries(report.nodes)) {
console.log(`节点 ${nodeId} 状态:`, nodeStatus.status);
if (nodeStatus.startTime) {
console.log(`节点 ${nodeId} 开始时间:`, new Date(nodeStatus.startTime).toLocaleString());
}
if (nodeStatus.endTime) {
console.log(`节点 ${nodeId} 结束时间:`, new Date(nodeStatus.endTime).toLocaleString());
}
}
return report;
} catch (error) {
console.error('获取任务报告失败:', error);
}
}
```
### 注意事项
- 任务报告是实时的，可以多次调用 TaskReport API 来获取最新的执行状态
- 如果工作流尚未终止（`workflow.terminated` 为 false），则工作流仍在执行中
- 节点状态可能为 'idle'（未开始）、'processing'（执行中）、'success'（成功）、'fail'（失败）或 'canceled'（已取消）
- 建议定期轮询任务报告，以监控工作流的执行进度
## TaskCancel API
### 功能描述
TaskCancel API 用于取消正在执行的工作流任务。
### 参数说明
TaskCancel API 接收一个 `TaskCancelInput` 对象作为参数：
| 参数名 | 类型 | 必填 | 描述 |
| ------ | ---- | ---- | ---- |
| taskID | string | 是 | 任务的唯一标识符，由 TaskRun API 返回 |
### 返回值说明
TaskCancel API 返回一个 `TaskCancelOutput` 对象：
| 字段名 | 类型 | 描述 |
| ------ | ---- | ---- |
| success | boolean | 表示任务是否成功取消 |
### 错误处理
TaskCancel API 可能会遇到以下错误情况：
- **任务不存在**：当提供的 taskID 不存在时，返回 `{ success: false }`
- **任务已完成**：当任务已经完成或已经取消时，无法再次取消
### 使用示例
```javascript
import { TaskCancelAPI } from '@flowgram.ai/runtime-js';
async function cancelTask(taskID) {
try {
const result = await TaskCancelAPI({ taskID });
if (result.success) {
console.log('任务已成功取消');
} else {
console.log('任务取消失败，可能任务不存在或已完成');
}
return result.success;
} catch (error) {
console.error('取消任务失败:', error);
return false;
}
}
```
### 注意事项
- 任务取消是异步的，取消请求成功后，任务可能需要一些时间才能完全停止
- 已经完成的任务无法取消
- 取消任务后，可以通过 TaskReport API 查看任务的最终状态，已取消的任务状态将变为 'canceled'
- 取消任务不会清除任务的中间结果，仍然可以通过 TaskResult API 获取已执行部分的结果
## TaskResult API
### 功能描述
TaskResult API 用于获取工作流任务的最终结果。
### 参数说明
TaskResult API 接收一个 `TaskResultInput` 对象作为参数：
| 参数名 | 类型 | 必填 | 描述 |
| ------ | ---- | ---- | ---- |
| taskID | string | 是 | 任务的唯一标识符，由 TaskRun API 返回 |
### 返回值说明
TaskResult API 返回一个 `WorkflowOutputs` 对象，包含工作流的输出结果：
```typescript
type WorkflowOutputs = Record;
```
返回的对象结构取决于工作流的具体实现和输出定义。
### 错误处理
TaskResult API 可能会遇到以下错误情况：
- **任务不存在**：当提供的 taskID 不存在时，返回 undefined
- **任务未完成**：当任务尚未终止时，返回 undefined
- **结果获取错误**：当获取结果过程中出现错误时
### 使用示例
```javascript
import { TaskResultAPI } from '@flowgram.ai/runtime-js';
async function getTaskResult(taskID) {
try {
const result = await TaskResultAPI({ taskID });
if (!result) {
console.log('任务不存在或尚未完成');
return;
}
console.log('任务结果:', result);
return result;
} catch (error) {
console.error('获取任务结果失败:', error);
}
}
// 使用示例：等待任务完成并获取结果
async function waitForResult(taskID, pollingInterval = 1000, timeout = 60000) {
const startTime = Date.now();
while (Date.now() - startTime < timeout) {
// 获取任务报告
const report = await TaskReportAPI({ taskID });
// 如果任务已终止，获取结果
if (report && report.workflow.terminated) {
return await TaskResultAPI({ taskID });
}
// 等待一段时间后再次检查
await new Promise(resolve => setTimeout(resolve, pollingInterval));
}
throw new Error('等待任务结果超时');
}
```
### 注意事项
- 只有当任务已经终止（完成、失败或取消）时，才能获取到结果
- 如果任务尚未完成，TaskResult API 将返回 undefined
- 建议先通过 TaskReport API 检查任务是否已终止，再调用 TaskResult API 获取结果
- 对于已取消的任务，可能只能获取到部分结果或没有结果
- 结果的具体结构取决于工作流的定义，需要根据实际工作流的输出进行解析
## TaskValidate API
### 功能描述
TaskValidate API 用于验证工作流 schema 和输入参数的有效性，在实际运行工作流之前检查配置是否正确。这个 API 可以帮助您在启动工作流之前发现潜在的配置错误。
### 参数说明
TaskValidate API 接收一个 `TaskValidateInput` 对象作为参数：
| 参数名 | 类型 | 必填 | 描述 |
| ------ | ---- | ---- | ---- |
| schema | string | 是 | 工作流 schema 的 JSON 字符串，定义了工作流的节点和边 |
| inputs | object | 否 | 工作流的初始输入参数，用于验证输入是否符合 schema 要求 |
### 返回值说明
TaskValidate API 返回一个 `TaskValidateOutput` 对象：
| 字段名 | 类型 | 描述 |
| ------ | ---- | ---- |
| valid | boolean | 表示验证是否通过，true 表示验证成功，false 表示验证失败 |
| errors | string[] | 可选字段，当验证失败时包含具体的错误信息列表 |
### 验证内容
TaskValidate API 会对以下内容进行验证：
- **Schema 结构验证**：检查 schema 是否符合 WorkflowSchema 的格式要求
- **节点类型验证**：验证 schema 中的节点类型是否被支持
- **边连接验证**：检查节点之间的连接是否正确
- **输入参数验证**：验证提供的 inputs 是否符合 schema 中定义的输入要求
- **工作流完整性验证**：检查工作流是否包含必要的起始和结束节点
### 错误处理
TaskValidate API 可能会返回以下类型的验证错误：
- **Schema 解析错误**：当提供的 schema 不是有效的 JSON 字符串时
- **Schema 结构错误**：当 schema 结构不符合预期格式时
- **节点配置错误**：当节点配置不完整或不正确时
- **连接错误**：当节点之间的连接存在问题时
- **输入参数错误**：当输入参数不符合要求时
### 使用示例
```javascript
import { TaskValidateAPI } from '@flowgram.ai/runtime-js';
const schema = JSON.stringify({
nodes: [
{
id: 'start',
type: 'start',
meta: { position: { x: 0, y: 0 } },
data: {
outputs: {
type: 'object',
properties: {
userInput: {
type: 'string',
extra: {
index: 0,
},
}
},
required: ['userInput'],
},
}
},
{
id: 'llm',
type: 'llm',
meta: { position: { x: 200, y: 0 } },
data: {
title: 'LLM_0',
inputsValues: {
prompt: {
type: 'ref',
content: ['start_0', 'userInput'],
}
},
inputs: {
type: 'object',
required: ['editor'],
properties: {
prompt: {
type: 'string',
extra: {
formComponent: 'prompt-editor',
},
},
},
},
outputs: {
type: 'object',
properties: {
result: {
type: 'string',
},
},
},
},
},
{
id: 'end',
type: 'end',
meta: { position: { x: 400, y: 0 } },
data: {}
}
],
edges: [
{
sourceNodeID: 'start',
sourcePort: 'out',
targetNodeID: 'llm',
targetPort: 'in'
},
{
sourceNodeID: 'llm',
sourcePort: 'out',
targetNodeID: 'end',
targetPort: 'in'
}
]
});
const inputs = {
userInput: '请介绍一下自己'
};
async function validateWorkflow() {
try {
const result = await TaskValidateAPI({
schema,
inputs
});
if (result.valid) {
console.log('工作流验证通过，可以安全运行');
return true;
} else {
console.error('工作流验证失败:');
result.errors?.forEach(error => {
console.error('- ' + error);
});
return false;
}
} catch (error) {
console.error('验证过程中发生错误:', error);
return false;
}
}
// 在运行工作流之前先进行验证
async function safeRunWorkflow() {
const isValid = await validateWorkflow();
if (isValid) {
// 验证通过后再运行工作流
const runResult = await TaskRunAPI({ schema, inputs });
console.log('工作流已启动，任务 ID:', runResult.taskID);
} else {
console.log('工作流验证失败，请修复错误后重试');
}
}
```
### 注意事项
- 建议在调用 TaskRun API 之前先调用 TaskValidate API 进行验证
- 验证通过并不保证工作流运行时不会出错，但可以提前发现大部分配置问题
- TaskValidate API 的执行速度通常比 TaskRun API 快，适合用于实时验证
- 验证结果中的错误信息可以帮助快速定位和修复问题
---
url: /guide/runtime/source-code-guide.md
---
# FlowGram Runtime 源码导读
本文档旨在帮助开发者深入理解 FlowGram Runtime 的源码结构和实现细节，为后续的定制开发提供指导。由于 FlowGram Runtime 定位为参考实现而非直接使用的 SDK，因此了解其内部实现对于开发者来说尤为重要。
## 项目结构概述
### 目录结构
FlowGram Runtime JS 项目的目录结构如下：
```
packages/runtime
├── js-core/ # 核心运行时库
│ ├── src/
│ │ ├── application/ # 应用层，实现API接口
│ │ ├── domain/ # 领域层，核心业务逻辑
│ │ ├── infrastructure/ # 基础设施层，提供技术支持
│ │ ├── nodes/ # 节点执行器实现
│ │ └── index.ts # 入口文件
│ ├── package.json
│ └── tsconfig.json
├── interface/ # 接口定义
│ ├── src/
│ │ ├── api/ # API接口定义
│ │ ├── domain/ # 领域模型接口定义
│ │ ├── engine/ # 引擎接口定义
│ │ ├── node/ # 节点接口定义
│ │ └── index.ts # 入口文件
│ ├── package.json
│ └── tsconfig.json
└── nodejs/ # NodeJS 服务实现
├── src/
│ ├── api/ # HTTP API实现
│ ├── server/ # 服务器实现
│ └── index.ts # 入口文件
├── package.json
└── tsconfig.json
```
### 模块组织
FlowGram Runtime JS 采用模块化设计，主要分为三个核心模块：
1. **interface**: 定义了系统的接口和数据结构，是其他模块的基础
2. **js-core**: 实现了工作流引擎的核心功能，包括工作流解析、节点执行、状态管理等
3. **nodejs**: 提供了基于 NodeJS 的 HTTP API 服务，使工作流引擎可以通过 HTTP 接口调用
### 依赖关系
模块之间的依赖关系如下：
```mermaid
graph TD
nodejs --> js-core
js-core --> interface
nodejs -.-> interface
```
- **interface** 是基础模块，不依赖其他模块
- **js-core** 依赖 interface 模块中定义的接口
- **nodejs** 依赖 js-core 模块提供的功能，同时也使用 interface 模块中的接口定义
主要的外部依赖包括：
- **TypeScript**: 提供类型安全和面向对象编程支持
- **LangChain**: 用于集成大型语言模型
- **OpenAI API**: 提供 LLM 节点的默认实现
- **fastify**: 用于实现 HTTP API 服务
- **tRPC**: 用于类型安全的 API 定义和调用
## 核心模块详解
### js-core 模块
js-core 模块是 FlowGram Runtime 的核心，实现了工作流引擎的主要功能。该模块采用领域驱动设计（DDD）架构，分为应用层、领域层和基础设施层。
#### 应用层 (application)
应用层负责协调领域对象，实现系统的用例。主要文件：
- `application/workflow.ts`: 工作流应用服务，实现工作流的验证、执行、取消、查询等功能
- `application/api.ts`: API 实现，包括 TaskValidate、TaskRun、TaskResult、TaskReport、TaskCancel 等
#### 领域层 (domain)
领域层包含业务核心逻辑和领域模型。主要目录和文件：
- `domain/engine/`: 工作流执行引擎，负责工作流的解析和执行
- `engine.ts`: 工作流引擎实现，包含节点执行、状态管理等核心逻辑
- `validator.ts`: 工作流验证器，检查工作流定义的有效性
- `domain/document/`: 工作流文档模型，表示工作流的结构
- `workflow.ts`: 工作流定义模型
- `node.ts`: 节点定义模型
- `edge.ts`: 边定义模型
- `domain/executor/`: 节点执行器，负责执行具体节点的逻辑
- `executor.ts`: 节点执行器基类和工厂
- `domain/variable/`: 变量管理，处理工作流中的变量存储和引用
- `manager.ts`: 变量管理器，负责变量的存储、获取和解析
- `store.ts`: 变量存储，提供变量的持久化
- `domain/status/`: 状态管理，跟踪工作流和节点的执行状态
- `center.ts`: 状态中心，管理工作流和节点的状态
- `domain/snapshot/`: 快照管理，记录工作流执行的中间状态
- `center.ts`: 快照中心，管理节点执行的快照
- `domain/report/`: 报告生成，收集工作流执行的详细信息
- `center.ts`: 报告中心，生成工作流执行报告
#### 基础设施层 (infrastructure)
基础设施层提供技术支持，包括日志、事件、容器等。主要文件：
- `infrastructure/logger.ts`: 日志服务，提供日志记录功能
- `infrastructure/event.ts`: 事件服务，提供事件发布和订阅功能
- `infrastructure/container.ts`: 依赖注入容器，管理对象的创建和生命周期
- `infrastructure/error.ts`: 错误处理，定义系统中的错误类型和处理方式
#### 节点执行器 (nodes)
nodes 目录包含各种节点类型的执行器实现。主要文件：
- `nodes/start.ts`: Start 节点执行器
- `nodes/end.ts`: End 节点执行器
- `nodes/llm.ts`: LLM 节点执行器，集成大型语言模型
- `nodes/condition.ts`: Condition 节点执行器，实现条件分支
- `nodes/loop.ts`: Loop 节点执行器，实现循环逻辑
### interface 模块
interface 模块定义了系统的接口和数据结构，是其他模块的基础。主要目录和文件：
- `api/`: API 接口定义
- `api.ts`: 定义系统提供的 API 接口
- `types.ts`: API 相关的数据类型定义
- `domain/`: 领域模型接口定义
- `document.ts`: 工作流文档相关接口
- `engine.ts`: 工作流引擎相关接口
- `executor.ts`: 节点执行器相关接口
- `variable.ts`: 变量管理相关接口
- `status.ts`: 状态管理相关接口
- `snapshot.ts`: 快照管理相关接口
- `report.ts`: 报告生成相关接口
- `engine/`: 引擎接口定义
- `types.ts`: 引擎相关的数据类型定义
- `node/`: 节点接口定义
- `types.ts`: 节点相关的数据类型定义
### nodejs 模块
nodejs 模块提供了基于 NodeJS 的 HTTP API 服务，使工作流引擎可以通过 HTTP 接口调用。主要目录和文件：
- `api/`: HTTP API 实现
- `router.ts`: API 路由定义
- `handlers.ts`: API 处理函数
- `server/`: 服务器实现
- `server.ts`: HTTP 服务器实现
- `config.ts`: 服务器配置
## 关键实现分析
### 工作流引擎
工作流引擎是 FlowGram Runtime 的核心，负责工作流的解析和执行。其主要实现位于 `js-core/src/domain/engine/engine.ts`。
工作流引擎的主要功能包括：
1. **工作流解析**：将工作流定义转换为内部模型
2. **节点调度**：根据工作流定义的边，确定节点的执行顺序
3. **节点执行**：调用节点执行器执行节点逻辑
4. **状态管理**：跟踪工作流和节点的执行状态
5. **变量管理**：处理节点间的数据传递
6. **错误处理**：处理执行过程中的异常情况
关键代码片段：
```typescript
// 工作流执行的核心方法
public async run(params: RunParams): Promise {
const { schema, inputs, options } = params;
// 创建工作流上下文
const context = this.createContext(schema, inputs, options);
try {
// 初始化工作流
await this.initialize(context);
// 执行工作流
await this.execute(context);
// 获取工作流结果
const result = await this.getResult(context);
return {
status: 'success',
outputs: result
};
} catch (error) {
// 错误处理
return {
status: 'fail',
error: error.message
};
}
}
// 执行工作流
private async execute(context: IContext): Promise {
// 获取开始节点
const startNode = context.workflow.getStartNode();
// 从开始节点开始执行
await this.executeNode({ context, node: startNode });
// 等待所有节点执行完成
await this.waitForCompletion(context);
}
// 执行节点
public async executeNode(params: { context: IContext; node: INode }): Promise {
const { context, node } = params;
// 获取节点执行器
const executor = this.getExecutor(node.type);
// 准备节点输入
const inputs = await this.prepareInputs(context, node);
// 执行节点
const result = await executor.execute({
node,
inputs,
context
});
// 处理节点输出
await this.processOutputs(context, node, result.outputs);
// 调度下一个节点
await this.scheduleNextNodes(context, node);
}
```
### 节点执行器
节点执行器负责执行具体节点的逻辑。每种节点类型都有对应的执行器实现，位于 `js-core/src/nodes/` 目录。
节点执行器的基本接口定义在 `interface/src/domain/executor.ts` 中：
```typescript
export interface INodeExecutor {
type: string;
execute(context: ExecutionContext): Promise;
}
```
以 LLM 节点执行器为例，其实现位于 `js-core/src/nodes/llm.ts`：
```typescript
export class LLMExecutor implements INodeExecutor {
public type = 'llm';
public async execute(context: ExecutionContext): Promise {
const inputs = context.inputs as LLMExecutorInputs;
// 创建 LLM 提供商
const provider = this.createProvider(inputs);
// 准备提示词
const systemPrompt = inputs.systemPrompt || '';
const userPrompt = inputs.prompt || '';
// 调用 LLM
const result = await provider.call({
systemPrompt,
userPrompt,
options: {
temperature: inputs.temperature
}
});
// 返回结果
return {
outputs: {
result: result.content
}
};
}
private createProvider(inputs: LLMExecutorInputs): ILLMProvider {
// 根据模型名称创建不同的提供商
if (inputs.modelName.startsWith('gpt-')) {
return new OpenAIProvider({
apiKey: inputs.apiKey,
apiHost: inputs.apiHost,
modelName: inputs.modelName
});
}
throw new Error(`Unsupported model: ${inputs.modelName}`);
}
}
```
### 变量管理
变量管理是工作流执行的重要部分，负责处理节点间的数据传递。其主要实现位于 `js-core/src/domain/variable/` 目录。
变量管理的核心是变量管理器和变量存储：
- **变量管理器**：负责变量的解析、获取和设置
- **变量存储**：提供变量的持久化存储
关键代码片段：
```typescript
// 变量管理器
export class VariableManager implements IVariableManager {
constructor(private store: IVariableStore) {}
// 解析变量引用
public async resolve(ref: ValueSchema, scope?: string): Promise {
if (ref.type === 'constant') {
return ref.content;
} else if (ref.type === 'ref') {
const path = ref.content as string[];
return this.get(path, scope);
}
throw new Error(`Unsupported value type: ${ref.type}`);
}
// 获取变量值
public async get(path: string[], scope?: string): Promise {
const [nodeID, key, ...rest] = path;
const value = await this.store.get(nodeID, key, scope);
if (rest.length === 0) {
return value;
}
// 处理嵌套属性
return this.getNestedProperty(value, rest);
}
// 设置变量值
public async set(nodeID: string, key: string, value: any, scope?: string): Promise {
await this.store.set(nodeID, key, value, scope);
}
}
```
### 状态存储
状态存储负责管理工作流和节点的执行状态。其主要实现位于 `js-core/src/domain/status/` 和 `js-core/src/domain/snapshot/` 目录。
状态管理的核心组件包括：
- **状态中心**：管理工作流和节点的状态
- **快照中心**：记录节点执行的快照
- **报告中心**：生成工作流执行报告
关键代码片段：
```typescript
// 状态中心
export class StatusCenter implements IStatusCenter {
private workflowStatus: Record = {};
private nodeStatus: Record> = {};
// 设置工作流状态
public setWorkflowStatus(workflowID: string, status: WorkflowStatus): void {
this.workflowStatus[workflowID] = status;
}
// 获取工作流状态
public getWorkflowStatus(workflowID: string): WorkflowStatus {
return this.workflowStatus[workflowID] || 'idle';
}
// 设置节点状态
public setNodeStatus(workflowID: string, nodeID: string, status: NodeStatus): void {
if (!this.nodeStatus[workflowID]) {
this.nodeStatus[workflowID] = {};
}
this.nodeStatus[workflowID][nodeID] = status;
}
// 获取节点状态
public getNodeStatus(workflowID: string, nodeID: string): NodeStatus {
return this.nodeStatus[workflowID]?.[nodeID] || 'idle';
}
}
```
## 设计模式和架构决策
### 领域驱动设计
FlowGram Runtime 采用领域驱动设计（DDD）架构，将系统分为应用层、领域层和基础设施层。这种架构有助于分离关注点，使代码更加模块化和可维护。
主要的领域概念包括：
- **工作流**：表示一个完整的工作流定义
- **节点**：工作流中的基本执行单元
- **边**：连接节点的线，表示执行流程
- **执行上下文**：工作流执行的环境
- **变量**：工作流执行过程中的数据
### 工厂模式
FlowGram Runtime 使用工厂模式创建节点执行器，使系统能够根据节点类型动态创建对应的执行器。
```typescript
// 节点执行器工厂
export class NodeExecutorFactory implements INodeExecutorFactory {
private executors: Record = {};
// 注册节点执行器
public register(executor: INodeExecutor): void {
this.executors[executor.type] = executor;
}
// 创建节点执行器
public create(type: string): INodeExecutor {
const executor = this.executors[type];
if (!executor) {
throw new Error(`No executor registered for node type: ${type}`);
}
return executor;
}
}
```
### 策略模式
FlowGram Runtime 使用策略模式处理不同类型的节点执行逻辑，每种节点类型都有对应的执行策略。
```typescript
// 节点执行器接口（策略接口）
export interface INodeExecutor {
type: string;
execute(context: ExecutionContext): Promise;
}
// 具体策略实现
export class StartExecutor implements INodeExecutor {
public type = 'start';
public async execute(context: ExecutionContext): Promise {
// Start 节点的执行逻辑
}
}
export class EndExecutor implements INodeExecutor {
public type = 'end';
public async execute(context: ExecutionContext): Promise {
// End 节点的执行逻辑
}
}
```
### 观察者模式
FlowGram Runtime 使用观察者模式实现事件系统，使组件能够发布和订阅事件。
```typescript
// 事件发布者
export class EventEmitter implements IEventEmitter {
private listeners: Record = {};
// 订阅事件
public on(event: string, listener: Function): void {
if (!this.listeners[event]) {
this.listeners[event] = [];
}
this.listeners[event].push(listener);
}
// 发布事件
public emit(event: string, ...args: any[]): void {
const eventListeners = this.listeners[event];
if (eventListeners) {
for (const listener of eventListeners) {
listener(...args);
}
}
}
}
```
### 依赖注入
FlowGram Runtime 使用依赖注入管理组件之间的依赖关系，使组件更加松耦合和可测试。
```typescript
// 依赖注入容器
export class Container {
private static _instance: Container;
private registry: Map = new Map();
public static get instance(): Container {
if (!Container._instance) {
Container._instance = new Container();
}
return Container._instance;
}
// 注册服务
public register(token: any, instance: T): void {
this.registry.set(token, instance);
}
// 获取服务
public resolve(token: any): T {
const instance = this.registry.get(token);
if (!instance) {
throw new Error(`No instance registered for token: ${token}`);
}
return instance;
}
}
```
---
url: /guide/contributing.md
---
# 贡献指南
本文帮助你快速在本仓库完成开发、测试与提 PR。仓库采用 Rush + pnpm 的 Monorepo 管理方式，文档站基于 Rspress 构建。
## 构建开发环境
1. **安装 Node.js 18+**（推荐 LTS/Hydrogen）
```bash
nvm install lts/hydrogen
nvm alias default lts/hydrogen # 设为默认 Node 版本
nvm use lts/hydrogen
```
2. **克隆仓库到本地**
```bash
git clone git@github.com:bytedance/flowgram.ai.git
```
3. **安装全局依赖**
```bash
npm i -g pnpm@10.6.5 @microsoft/rush@5.150.0
```
4. **安装项目依赖**
```bash
rush install
```
5. **构建项目**
```bash
rush build
```
6. **运行文档或示例**
```bash
rush dev:docs # 在 apps/docs 启动文档站（含增量构建）
rush dev:demo-fixed-layout # 运行固定布局示例
rush dev:demo-free-layout # 运行自由布局示例
```
## 常用命令（Rush 自定义）
```bash
rush build # 构建所有包
rush build:watch # 增量构建并监听
rush lint # 运行 ESLint 检查
rush lint:fix # 自动修复 ESLint 问题
rush ts-check # TypeScript 类型检查
rush test # 运行各包的测试脚本（按包聚合）
rush e2e:test # 运行所有 e2e 测试
rush e2e:update-screenshot # 更新 e2e 快照
rush dep-check # 自动检查依赖健康度
```
## 分支与提交规范
- 分支命名：
- `feat/描述`（新功能）
- `fix/描述`（问题修复）
- `docs/描述`（文档变更）
- `chore/描述`（维护/杂项）
- 提交信息（Conventional Commits）：
- 格式：`type(scope): subject`，例如：
```text
feat(editor): 支持节点批量对齐
```
- 常用类型：`feat`、`fix`、`docs`、`style`、`refactor`、`test`、`chore`
- 仓库已启用 commitlint 校验（commit-msg 钩子），提交信息将被自动检查；同时 pre-commit 会运行 lint-staged（自动更新许可证头、eslint 修复）与 `rush check` 校验。
## 开发与质量保障
- 本地开发建议：
- 先执行 `rush build:watch`，再在对应 demo 或 docs 目录运行开发命令（如 `rush dev:docs`）。
- 修改代码后，确保通过：`rush lint`、`rush ts-check`、`rush build`、`rush test`。
- 测试说明：
- e2e 用例位于 `e2e/` 目录，可通过 `rush e2e:test` 运行，或更新快照 `rush e2e:update-screenshot`。
## Pull Request 流程
1. 从 `main` 创建你的工作分支（遵循分支命名规范）。
2. 编码并补充测试/文档。
3. 本地通过质量校验（lint、ts-check、build、test）。
4. 提交 PR：填写说明、关联 Issue，并注意使用模板。
5. 评审与 CI：维护者会进行代码评审，CI 全绿后即可合并。
## 文档贡献
- 文档位置：`apps/docs/src/zh/**`（中文）与 `apps/docs/src/en/**`（英文）。
- 本地预览：执行 `rush dev:docs` 启动 Rspress 文档站。
- 若需自动生成 API 文档，可在 `apps/docs` 目录执行 `rushx docs`（调用脚本生成）。
## 常见问题
- pnpm-lock 合并冲突：仓库已在 `post-checkout` 钩子中配置合并策略，通常可避免锁文件冲突。
- Node 版本：请确保使用 Node 18+，否则可能出现依赖或构建失败。
## 报告问题
- 请在 GitHub 提交 Issue：https://github.com/bytedance/flowgram.ai/issues/new/choose
- 描述问题、复现步骤、期望与实际行为，必要时附代码示例。
## 许可证
- 本项目遵循 MIT 许可证。提交代码即默认同意相关条款。
---
url: /guide/contact-us.md
---
# 联系我们
- Issues: [Issues](https://github.com/bytedance/flowgram.ai/issues)
- Discord: https://discord.gg/SwDWdrgA9f
- Lark: 通过 [注册飞书](https://www.feishu.cn/en/) 并扫描下边的二维码加入飞书群
---
url: /guide/question.md
---
# 注意事项及常见问题
# 注意事项
1. 画布的 editor 版本及导入的插件版本必须一致，如果出现以下错误都是这个问题造成
2. 画布的事件监听，在 react 中使用都要配套写销毁逻辑，防止无限注册导致内存泄漏
```tsx pure
function SomeReactComp() {
useEffect(() => {
const toDispose = ctx.document.onContentChange(() => {
// DO Something
})
return () => toDispose.dispose() // Destroy Event
}, [])
}
```
# 常见问题
## 运行报报错
## 如何修改节点的数据
## 是否支持 vue
##
---
url: /guide/variable/cases/case-batch-variable.md
---
# 批处理变量实现思路 (WIP)
---
url: /guide/variable/core-api.md
---
# 底层 API (WIP)
## Scope
## ASTNode
---
url: /guide/variable/core-ast.md
---
# 内置 AST(WIP)
## 声明
### BaseVariableField
`BaseVariableField` 是所有**变量声明**和**属性声明**的 AST 节点的**抽象基类**，它定义了变量字段通用的 `key`、`type`、`initializer` 和 `meta` 属性。
`BaseVariableField` 使用示例如下：
```tsx
// 通过 getByKeyPath 获取到变量字段
const varField = scope.available.getByKeyPath(["custom_node_0", "query"])
// 获取变量字段上的信息
console.log(varField.key); // query
console.log(varField.keyPath); // ["custom_node_0", "query"]
console.log(varField.meta); // { title: 'Query }
console.log(varField.type.kind); // String
console.log(varField.initializer.kind); // KeyPathExpression
// 获取 ASTNodeJSON
console.log(varField.toJSON()); // 输出变量声明的 JSON 结构
// 获取下钻字段
console.log(varField.getByKeyPath(['a', 'b', 'c']));
// 更新类型
varField.updateType(ASTFactory.createNumber());
// 更新 meta 元信息
varField.updateMeta({ title: 'Query 2' });
// 更新 initializer
varField.updateInitializer(ASTFactory.createKeyPathExpression({
keyPath: ['start_0', 'query'],
}));
// 监听变量类型变化
const disposable = varField.onTypeChange((typeAST) => {
console.log(typeAST.kind);
})
```
`VariableDeclaration` 和 `Property` 都继承自 `BaseVariableField`，两者的区别为：
- `VariableDeclaration` 用于表示变量的声明和初始化，没有父 Field
- `Property` 用于表示 Object 对象上的一个属性声明，有父 Field，父 Field 可以是其他 `Property` 或者 `VariableDeclaration`
### VariableDeclaration
`VariableDeclaration` 继承自 `BaseVariableField`，是作用域进行变量声明语句的 AST 节点，用于表示变量的声明和初始化。
通过内置的 `ASTFactory` 快速创建 `VariableDeclaration`：
```tsx
import { ASTFactory, ASTKind } from '@flowgram/editor';
/**
* 通过 ASTFactory 创建一个变量声明，类型为 String 类型
*
* Equals To Plain JSON:
* ```json
* {
* "kind": "VariableDeclaration",
* "key": "my_unique_variable",
* "meta": { "title": "My Variable" },
* "order": 0,
* "type": { "kind": "String" }
* }
* ```
*
* Similar to js code:
* ```js
* const my_unique_variable: string;
* ```
*/
scope.setVar(
ASTFactory.createVariableDeclaration({
key: 'my_unique_variable',
meta: { title: 'My Variable' },
type: ASTFactory.createString(),
order: 0,
})
)
/**
* 通过 ASTFactory 创建一个变量声明，声明的右值为指向 start_0.query 的 keyPath 表达式
*
* Equals To Plain JSON:
* ```json
* {
* "kind": "VariableDeclaration",
* "key": "my_unique_variable_2",
* "meta": { "title": "My Variable 2" },
* "order": 1,
* "initializer": { "kind": "KeyPathExpression", "keyPath": ["start_0", "query"] }
* }
* ```
*
* Similar to js code:
* ```js
* const my_unique_variable_2 = start_0.query;
* ```
*/
scope_2.setVar(
ASTFactory.createVariableDeclaration({
key: 'my_unique_variable_2',
meta: { title: 'My Variable 2' },
initializer: ASTFactory.createKeyPathExpression({
keyPath: ['start_0', 'query'],
}),
order: 1,
})
)
```
变量引擎将 `VariableDeclaration` 实例化后，可以获取变量声明上的信息，并进行更新、监听等操作：
```tsx
import { ASTMatch } from "@flowgram/editor";
const varDecl = scope.getVar();
// 判断 AST 节点是否为 VariableDeclaration
if(!ASTMatch.isVariableDeclaration(varDecl)) {
throw new Error('AST 节点不是 VariableDeclaration 类型');
}
// 获取变量声明上的信息
console.log(varDecl.key); // my_unique_variable_2
console.log(varDecl.meta); // { title: 'My Variable 2' }
console.log(varDecl.type.kind); // String
console.log(varDecl.initializer); // KeyPathExpression
// 获取 ASTNodeJSON
console.log(varDecl.toJSON()); // 输出变量声明的 JSON 结构
// 获取下钻字段
console.log(varDecl.getByKeyPath(['a', 'b', 'c']));
// 更新类型
varDecl.updateType(ASTFactory.createNumber());
// 更新 initializer
varDecl.updateInitializer(ASTFactory.createKeyPathExpression({
keyPath: ['start_0', 'query'],
}));
// 监听变量类型变化
const disposable = varDecl.onTypeChange((typeAST) => {
console.log(typeAST.kind);
})
```
### Property
### VariableDeclarationList
## 类型
### BaseType
### StringType
### NumberType
### IntegerType
### ObjectType
### ArrayType
### MapType
## 表达式
### BaseExpression
### EnumerateExpression
### WrapArrayExpression
---
url: /materials/introduction.md
---
import { PackageManagerTabs } from '@theme';
# 快速上手
## 如何使用？
### 通过包引用使用
官方表单物料可以直接通过包引用使用：
```tsx
import { JsonSchemaEditor } from '@flowgram.ai/form-materials'
```
### 通过 CLI 添加物料源代码使用
如果业务对组件有定制诉求（如：更改文案、样式、业务逻辑），推荐 **通过 CLI 将物料源代码添加到项目中进行定制**：
```bash
npx @flowgram.ai/cli@latest materials
```
运行后 CLI 会提示用户选择要添加到项目中的物料:
```console
? Select one material to add: (Use arrow keys)
❯ components/json-schema-editor
components/type-selector
components/variable-selector
```
使用者也可以直接在 CLI 中添加指定物料的源代码:
```bash
npx @flowgram.ai/cli@latest materials components/json-schema-editor
```
CLI 运行成功后，相关物料会自动添加到当前项目下的 `src/form-materials` 目录下
:::warning 注意事项
1. 官方物料目前底层基于 [Semi Design](https://semi.design/) 实现，业务如果有底层组件库的诉求，可以通过 CLI 复制源码进行替换
2. 一些物料会依赖一些第三方 npm 库，这些库会在 CLI 运行时自动安装
3. 一些物料会依赖另外一些官方物料，这些被依赖的物料源代码在 CLI 运行时会一起被添加到项目中去
:::
## 附：根据节点类型查找物料
### 实现节点输入输出
**出入参配置**
- 节点入参：[InputsValues](./components/inputs-values), [InputsValuesTree](./components/inputs-values-tree)
- 节点出参：[JsonSchemaEditor](./components/json-schema-editor)
- 入参校验：[validateFlowValue](./validate/validate-flow-value)
- 出参变量生成：[provideJsonSchemaOutputs](./effects/provide-json-schema-outputs)
**出入参展示**
- 入参展示：[DisplayInputsValues](./components/display-inputs-values)
- 出参展示：[DisplayOutputs](./components/display-outputs)
### 实现代码节点
- 代码编辑器：[CodeEditor](./components/code-editor)
### 实现大模型节点
- 提示词编辑器：[PromptEditor](./components/prompt-editor)
- 可选变量的提示词编辑器：[PromptEditorWithVariables](./components/prompt-editor-with-variables)
### 实现条件分支节点
- 单行条件分支配置：[ConditionRow](./components/condition-row)
- 监听变量实现分支联动：[listenRefSchemaChange](./effects/listen-ref-schema-change), [listenRefValueChange](./effects/listen-ref-value-change)
### 实现数据库节点
- 单行数据库查询条件配置：[DBConditionRow](./components/db-condition-row)
- SQL 编辑器：[SQLCodeEditor](./components/code-editor)
- 可选变量的 SQL 编辑器：[SQLEditorWithVariables](./components/sql-editor-with-variables)
#### 实现循环节点
**循环输入**
- 循环输入数组变量选择器：[BatchVariableSelector](./components/batch-variable-selector)
- Item、Index 推导：[provideBatchInput](./effects/provide-batch-input)
**循环输出**
- 循环输出数组变量选择器：[BatchOutputs](./components/batch-outputs)
- 输出变量作用域链调整 + 类型推导：[batchOutputsPlugin](./form-plugins/batch-outputs-plugin)
### 实现 HTTP 节点
- JSON 编辑器：[JsonCodeEditor](./components/code-editor)
- 可选变量的 JSON 编辑器：[JsonEditorWithVariables](./components/json-editor-with-variables)
### 实现变量赋值/声明节点
- 单行变量赋值、声明：[AssignRow](./components/assign-row)
- 变量赋值、声明配置列表：[AssignRows](./components/assign-rows)
- 变量声明类型自动推导：[inferAssignPlugin](./form-plugins/infer-assign-plugin)
---
url: /materials/cli.md
---
# 物料管理 CLI
Flowgram 提供了专门的 CLI 命令行工具，帮助你管理项目中的官方物料。
## 安装
可使用 npx 直接运行：
```bash
npx @flowgram.ai/cli@latest [command]
```
## 同步物料到项目
使用 `materials` 命令将官方物料的源代码添加到你的项目中进行定制：
```bash
# 交互式选择物料
npx @flowgram.ai/cli@latest materials
# 直接指定物料
npx @flowgram.ai/cli@latest materials components/json-schema-editor
# 指定多个物料（逗号分隔）
npx @flowgram.ai/cli@latest materials components/variable-selector,effect/provideJsonSchemaOutputs
# 选择多个物料（交互式多选）
npx @flowgram.ai/cli@latest materials --select-multiple
```
运行后，CLI 会提示你选择要添加到项目中的物料：
```console
🚀 Welcome to @flowgram.ai form-materials CLI!
📁 Project: /path/to/your/project
🎯 Flowgram Version: 1.0.0
- Target material root: /path/to/your/project/src/form-materials
🚀 The following materials will be added to your project
📦 components/json-schema-editor
📦 components/variable-selector
📦 effect/provideJsonSchemaOutputs
✅ These npm dependencies is added to your package.json
- @semi-design/icons
- lodash-es
- classnames
➡️ Please run npm install to install dependencies
```
### 高级选项
`materials` 命令支持以下选项：
| 选项 | 说明 | 示例 |
|------|------|------|
| `--refresh-project-imports` | 刷新项目中对复制物料的导入路径 | `npx @flowgram.ai/cli@latest materials components/json-schema-editor --refresh-project-imports` |
| `--target-material-root-dir ` | 指定物料复制的目标目录 | `npx @flowgram.ai/cli@latest materials --target-material-root-dir src/custom-materials` |
| `--select-multiple` | 启用交互式多选模式 | `npx @flowgram.ai/cli@latest materials --select-multiple` |
## 查找已使用的物料
使用 `find-used-materials` 命令分析项目代码，找出所有已使用的官方物料：
```bash
npx @flowgram.ai/cli@latest find-used-materials
```
输出示例：
```console
🚀 Welcome to @flowgram.ai form-materials CLI!
📁 Project: /path/to/your/project
🎯 Flowgram Version: 1.0.0
👀 The exports of components/json-schema-editor is JsonSchemaEditor,JsonSchemaEditorProps
👀 The exports of components/variable-selector is VariableSelector,VariableSelectorProps
👀 Searching src/components/MyForm.tsx
🔍 import { JsonSchemaEditor } from '@flowgram.ai/form-materials'
import components/json-schema-editor by JsonSchemaEditor
👀 Searching src/pages/Settings.tsx
🔍 import { VariableSelector } from '@flowgram.ai/form-materials'
import components/variable-selector by VariableSelector
📦 All used materials:
components/json-schema-editor,components/variable-selector
```
这个命令会：
- 扫描项目中所有的 TypeScript 文件
- 分析从 `@flowgram.ai/form-materials` 的导入语句
- 识别出使用的具体物料
- 输出详细的使用位置信息
## Case Run Down
### 将项目中所有使用到的官方物料，代码同步到项目的 src/custom-materials 目录
1. 使用 `find-used-materials` 命令查看项目中使用到的官方物料。
```bash
npx @flowgram.ai/cli@latest find-used-materials
```
命令运行后，会输出项目中使用到的官方物料列表。
```console
📦 All used materials:
components/json-schema-editor,components/variable-selector
```
2. 使用 `materials` 命令将这些物料的源代码添加到项目的 src/custom-materials 目录。
```bash
npx @flowgram.ai/cli@latest materials components/json-schema-editor,components/variable-selector \
--target-material-root-dir src/custom-materials \
--refresh-project-imports
```
- `--refresh-project-imports` 选项会刷新项目中对复制物料的导入路径，确保使用的是最新的定制版本。
- `--target-material-root-dir src/custom-materials` 选项指定了物料复制的目标目录为 src/custom-materials。
## 常见问题
### Q: CLI 添加后找不到新增的依赖项目？
A: 请检查是否运行了 `npm install` 安装新添加的依赖。
---
url: /materials/components/type-selector.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/components/type-selector';
# TypeSelector
TypeSelector 是一个类型选择器组件，用于在表单中选择 JSON Schema 类型。它支持基本类型和复合类型（如数组类型）的选择。
:::tip
If you want to add new variable types, please read [Type Management](../common/json-schema-preset)
:::
## 案例演示
### 基本使用
```tsx pure title="form-meta.tsx"
import { TypeSelector } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
| undefined> name="type_selector" defaultValue={{ type: 'string' }}>
{({ field }) => (
field.onChange(value)} />
)}
),
}
```
### 新增新类型
详见：
## API 参考
### TypeSelector Props
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `value` | `Partial` | - | 选中的类型值，符合 JSON Schema 格式 |
| `onChange` | `(value?: Partial) => void` | - | 类型选择变化时的回调函数 |
| `readonly` | `boolean` | `false` | 是否为只读模式 |
| `disabled` | `boolean` | `false` | 是否禁用（已废弃，请使用 readonly） |
| `style` | `React.CSSProperties` | - | 自定义样式 |
### 类型格式说明
TypeSelector 支持以下 JSON Schema 类型格式：
- **基本类型**: `{ type: 'string' }`, `{ type: 'number' }`, `{ type: 'boolean' }` 等
- **数组类型**: `{ type: 'array', items: { type: 'string' } }`
- **嵌套数组**: `{ type: 'array', items: { type: 'array', items: { type: 'string' } } }`
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/type-selector
```
### 目录结构讲解
```
type-selector/
└── index.tsx # 主组件实现，包含 TypeSelector 核心逻辑
```
### 核心实现说明
#### getTypeSelectValue
将 JSON Schema 对象转换为 Cascader 组件所需的数组格式：
```typescript
// 输入: { type: 'array', items: { type: 'string' } }
// 输出: ['array', 'string']
```
#### parseTypeSelectValue
将 Cascader 组件的数组值转换回 JSON Schema 对象：
```typescript
// 输入: ['array', 'string']
// 输出: { type: 'array', items: { type: 'string' } }
```
### 使用到的 flowgram API
#### @flowgram.ai/json-schema
- `useTypeManager()`: 获取类型管理器，用于处理 JSON Schema 类型的显示和验证
- `IJsonSchema`: JSON Schema 类型定义
- `JsonSchemaTypeManager`: 类型管理器类，提供类型注册、图标显示等功能
### 整体流程
```mermaid
graph LR
A[TypeSelector 组件] --> B[useTypeManager Hook]
B --> C[获取类型注册表]
C --> D[生成 Cascader 选项]
D --> E[渲染级联选择器]
E --> F[用户选择类型]
F --> G[onChange 回调]
G --> H[更新 JSON Schema 值]
```
---
url: /materials/components/json-schema-editor.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/components/json-schema-editor';
# JsonSchemaEditor
JsonSchemaEditor 是一个可视化的 JSON Schema 编辑器，支持创建和编辑复杂的 JSON Schema 结构。它提供了树形结构的界面，可以直观地定义对象、数组、字符串、数字等各种类型的属性，支持嵌套结构和必填字段标记。
JsonSchema 协议可以通过以下文档学习：
- [Json Schema 官网](https://json-schema.org/learn)
- [Json Schema 规范（中文版）](https://json-schema.apifox.cn/)
## 案例演示
### 基本使用
```tsx pure title="form-meta.tsx"
import { JsonSchemaEditor } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
name="json_schema" defaultValue={{ type: 'object' }}>
{({ field }) => (
field.onChange(value)}
/>
)}
),
}
```
## API 参考
### JsonSchemaEditor Props
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `value` | `IJsonSchema` | `{ type: 'object' }` | JSON Schema 对象 |
| `onChange` | `(value: IJsonSchema) => void` | - | Schema 变化时的回调函数 |
| `config` | `ConfigType` | `{}` | 编辑器配置选项 |
| `className` | `string` | - | 自定义样式类名 |
| `readonly` | `boolean` | `false` | 是否为只读模式 |
### ConfigType
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `placeholder` | `string` | `'输入变量名'` | 属性名占位符 |
| `descTitle` | `string` | `'描述'` | 描述字段标题 |
| `descPlaceholder` | `string` | `'帮助LLM理解该属性'` | 描述字段占位符 |
| `defaultValueTitle` | `string` | `'默认值'` | 默认值字段标题 |
| `defaultValuePlaceholder` | `string` | `'默认值'` | 默认值占位符 |
| `addButtonText` | `string` | `'添加'` | 添加按钮文本 |
### 支持的类型
| 类型 | 描述 | 示例 |
|------|------|------|
| `string` | 字符串类型 | `"hello"` |
| `number` | 数字类型 | `42` |
| `boolean` | 布尔类型 | `true` |
| `object` | 对象类型 | `{}` |
| `array` | 数组类型 | `[]` |
| `null` | 空值类型 | `null` |
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/json-schema-editor
```
### 目录结构讲解
```
json-schema-editor/
├── index.tsx # 主组件实现
├── types.ts # 类型定义
├── hooks.tsx # 状态管理钩子
├── styles.css # 样式文件
├── default-value.tsx # 默认值编辑器
└── icon.tsx # 图标组件
```
### 核心实现说明
#### 树形结构管理
组件使用递归的 `PropertyEdit` 组件来渲染嵌套的 Schema 结构：
```typescript
function PropertyEdit(props: {
value?: PropertyValueType;
config?: ConfigType;
onChange?: (value: PropertyValueType) => void;
onRemove?: () => void;
readonly?: boolean;
$level?: number;
$isLast?: boolean;
})
```
#### 属性编辑状态管理
使用 `usePropertiesEdit` 钩子管理 Schema 的增删改查：
```typescript
const {
propertyList,
onAddProperty,
onRemoveProperty,
onEditProperty
} = usePropertiesEdit(value, onChangeProps);
```
### 使用到的 flowgram API
#### @flowgram.ai/json-schema
- `IJsonSchema`: JSON Schema 类型定义
#### @flowgram.ai/i18n
- `I18n`: 国际化支持
### 整体流程
```mermaid
graph TD
A[JsonSchemaEditor] --> B[渲染根属性]
B --> C[PropertyEdit 组件]
C --> D[属性名输入]
C --> E[类型选择]
C --> F[必填标记]
C --> G[操作按钮]
G --> H[展开/收起详情]
G --> I[添加子属性]
G --> J[删除属性]
H --> K[描述输入]
H --> L[默认值设置]
I --> M[递归渲染子属性]
M --> C
```
### 高级功能
#### 嵌套结构支持
支持无限层级的嵌套对象和数组：
```json
{
"type": "object",
"properties": {
"level1": {
"type": "object",
"properties": {
"level2": {
"type": "object",
"properties": {
"level3": {
"type": "string"
}
}
}
}
}
}
}
```
#### 数组元素定义
支持定义数组元素的 Schema：
```json
{
"type": "array",
"items": {
"type": "object",
"properties": {
"id": { "type": "number" },
"name": { "type": "string" }
}
}
}
```
#### 必填字段管理
支持标记字段为必填，并自动更新 `required` 数组：
```json
{
"type": "object",
"properties": {
"name": { "type": "string" },
"email": { "type": "string" }
},
"required": ["email"]
}
```
### 使用场景
- **API 文档生成**: 为 REST API 创建请求/响应 Schema
- **表单验证**: 定义表单字段的验证规则
- **数据建模**: 创建数据结构模型
- **配置管理**: 定义配置文件的结构
- **代码生成**: 为代码生成器提供 Schema 输入
---
url: /materials/components/json-schema-creator.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/components/json-schema-creator';
# JsonSchemaCreator
JsonSchemaCreator 是一个用于从 JSON 字符串自动生成 JSON Schema 的组件。它提供了一个按钮来触发弹窗，用户可以在弹窗中粘贴 JSON 数据，组件会自动分析数据结构并生成对应的 JSON Schema。
## 案例演示
### 基本使用
```tsx pure title="form-meta.tsx"
import { JsonSchemaCreator } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
name="json_schema">
{({ field }) => (
field.onChange(schema)}
/>
field.onChange(value)}
/>
)}
),
}
```
## API 参考
### JsonSchemaCreator Props
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `onSchemaCreate` | `(schema: IJsonSchema) => void` | - | 生成 schema 后的回调函数 |
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/json-schema-creator
```
### 目录结构讲解
```
json-schema-creator/
├── index.tsx # 主组件导出，包含 JsonSchemaCreator 和 JsonSchemaCreatorProps
├── json-schema-creator.tsx # 主组件实现，包含按钮和状态管理
├── json-input-modal.tsx # JSON 输入弹窗组件
└── utils/
└── json-to-schema.ts # JSON 转 Schema 的核心工具函数
```
### 核心实现说明
#### JSON 解析和 Schema 生成流程
以下是 JSON Schema 创建的完整交互时序图：
```mermaid
sequenceDiagram
participant User as 用户
participant Creator as JsonSchemaCreator
participant Modal as JsonInputModal
participant Parser as jsonToSchema
participant Generator as generateSchema
%% 初始交互
User->>Creator: 点击"从 JSON 创建"按钮
Creator->>Creator: setVisible(true)
Creator->>Modal: 显示弹窗
%% 用户输入和确认
User->>Modal: 输入 JSON 字符串
User->>Modal: 点击确认
%% JSON 解析和 Schema 生成
Modal->>Parser: 调用 jsonToSchema(jsonString)
Parser->>Parser: JSON.parse(jsonString)
%% 递归生成 Schema
Parser->>Generator: 调用 generateSchema(data)
%% 根据数据类型处理
alt 数据为 null
Generator->>Generator: 返回 {type: 'string'}
else 数据为数组
Generator->>Generator: schema = {type: 'array'}
loop 对每个数组元素
Generator->>Generator: 递归调用 generateSchema(item)
end
else 数据为对象
Generator->>Generator: schema = {type: 'object', properties: {}, required: []}
loop 对每个属性
Generator->>Generator: 递归调用 generateSchema(value)
Generator->>Generator: 添加到 properties 和 required
end
else 原始类型
Generator->>Generator: 返回 {type: typeof value}
end
%% 返回结果
Generator-->>Parser: 返回生成的 schema
Parser-->>Modal: 返回 IJsonSchema
%% 回调和关闭
Modal->>Creator: 调用 onSchemaCreate(schema)
Creator->>Creator: setVisible(false)
Creator->>Modal: 关闭弹窗
Creator-->>User: Schema 创建完成
```
### 使用到的 FlowGram API
[**@flowgram.ai/json-schema**](https://github.com/bytedance/flowgram.ai/tree/main/packages/variable/json-schema)
- [`IJsonSchema`](https://flowgram.ai/auto-docs/json-schema/interfaces/IJsonSchema): JSON Schema 类型定义
### 依赖的其他物料
[**JsonCodeEditor**](./code-editor) 代码编辑器组件
- 用于在弹窗中编辑 JSON 数据
### 使用的第三方库
[**@douyinfe/semi-ui**](https://semi.design/)
- `Button`: 触发弹窗的按钮组件
- `Modal`: 弹窗容器
- `Typography`: 文本组件
---
url: /materials/components/variable-selector.md
---
import { SourceCode } from '@theme';
import { BasicStory, FilterSchemaStory, CustomFilterStory, CustomVariableTreeStory } from 'components/form-materials/components/variable-selector';
# VariableSelector
VariableSelector 是一个用于选择当前作用域变量的组件，它可以根据变量的类型进行过滤。
:::warning
VariableSelector 的变量树中，**每一个叶子节点和非叶子节点，都是一个变量**。
在官方物料库的设计中，每个节点都会输出 **一个 ObjectType 变量声明**，这个变量声明中：
- 变量的**元信息包含节点的标题和节点的 Icon**，被 VariableSelector 解析展示
- 变量的下钻字段会被 VariableSelector **递归展示在节点变量内**
:::
## 案例演示
### 直接使用
```tsx pure title="form-meta.tsx"
import { VariableSelector } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
name="variable_selector">
{({ field }) => (
field.onChange(value)} />
)}
),
}
```
### 过滤变量类型
```tsx pure title="form-meta.tsx"
import { VariableSelector } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
name="variable_selector">
{({ field }) => (
field.onChange(value)}
includeSchema={{ type: 'string' }}
/>
)}
),
}
```
### 自定义过滤逻辑
```tsx pure title="form-meta.tsx"
import { VariableSelector } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
variable?.key === 'str'}>
name="variable_selector">
{({ field }) => (
field.onChange(value)}
/>
)}
),
}
```
### 通过 useVariableTree 获取变量树
```tsx pure title="form-meta.tsx"
import { useVariableTree } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => {
const treeData = useVariableTree({});
return (
variable?.key === 'str'}>
);
},
}
```
:::tip
`useVariableTree` 也被用于 [`PromptEditorWithVariables`](./prompt-editor-with-variables)、[`SQLEditorWithVariables`](./sql-editor-with-variables)、[`JsonEditorWithVariables`](./json-editor-with-variables) 等组件中，用于获取当前作用域的变量树。
:::
## API 参考
### VariableSelector Props
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `value` | `string[]` | - | 选中的变量路径数组 |
| `onChange` | `(value?: string[]) => void` | - | 变量选择变化时的回调函数 |
| `config` | `VariableSelectorConfig` | `{}` | 配置对象 |
| `includeSchema` | `IJsonSchema \| IJsonSchema[]` | - | 包含的变量类型过滤条件 |
| `excludeSchema` | `IJsonSchema \| IJsonSchema[]` | - | 排除的变量类型过滤条件 |
| `readonly` | `boolean` | `false` | 是否为只读模式 |
| `hasError` | `boolean` | `false` | 是否显示错误状态 |
| `style` | `React.CSSProperties` | - | 自定义样式 |
| `triggerRender` | `(props: TriggerRenderProps) => React.ReactNode` | - | 自定义触发器渲染 |
### VariableSelectorConfig
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `placeholder` | `string` | `'选择变量'` | 占位符文本 |
| `notFoundContent` | `string` | `'未定义'` | 变量未找到时的显示内容 |
### VariableSelectorProvider Props
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `skipVariable` | `(variable?: BaseVariableField) => boolean` | - | 自定义变量过滤函数 |
| `includeSchema` | `IJsonSchema \| IJsonSchema[]` | - | 包含的变量类型过滤条件 |
| `excludeSchema` | `IJsonSchema \| IJsonSchema[]` | - | 排除的变量类型过滤条件 |
| `children` | `React.ReactNode` | - | 子组件 |
### useVariableTree
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `includeSchema` | `IJsonSchema \| IJsonSchema[]` | - | 包含的变量类型过滤条件 |
| `excludeSchema` | `IJsonSchema \| IJsonSchema[]` | - | 排除的变量类型过滤条件 |
| `skipVariable` | `(variable?: BaseVariableField) => boolean` | - | 自定义变量过滤函数 |
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/variable-selector
```
### 目录结构讲解
```
variable-selector/
├── index.tsx # 主组件实现，包含 VariableSelector 核心逻辑
├── context.tsx # 提供 `VariableSelectorContext` 上下文，支持全局配置变量过滤逻辑
├── use-variable-tree.tsx # 自定义 Hook，处理变量树数据的转换和过滤
└── styles.css # 样式文件
```
### 整体流程
```mermaid
graph TD
A[VariableSelector 组件] ---> useVariableTree
K[VariableSelectorProvider] --> L[全局过滤配置]
subgraph useVariableTree
C[useAvailableVariables] --> D[获取所有可用变量]
D --> F[应用过滤条件]
F --> G[生成树形结构]
M[includeSchema/excludeSchema] --> F
end
G --> H[渲染 TreeSelect]
L --> F
```
### 使用到的 flowgram API
#### @flowgram.ai/variable-core
- `useAvailableVariables()`: 获取当前作用域内所有可用的变量
- `BaseVariableField`: 基础变量字段类型，包含变量键、类型、元数据等
#### @flowgram.ai/json-schema
- `useTypeManager()`: 获取类型管理器，用于处理变量类型的显示和验证
- `IJsonSchema`: JSON Schema 类型定义，用于变量类型验证
- `JsonSchemaUtils`: JSON Schema 工具类，提供类型匹配和转换功能
---
url: /materials/components/dynamic-value-input.md
---
import { SourceCode } from '@theme';
import { BasicStory, WithSchemaStory } from 'components/form-materials/components/dynamic-value-input';
# DynamicValueInput
DynamicValueInput 是一个动态值输入组件，支持常量和变量两种输入模式。它可以根据提供的 schema 自动选择合适的输入类型，并提供变量选择功能。组件能够智能地在常量输入和变量选择之间切换。
## 案例演示
### 基本使用
```tsx pure title="form-meta.tsx"
import { DynamicValueInput } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
name="dynamic_value_input">
{({ field }) => (
field.onChange(value)} />
)}
),
}
```
### 带 Schema 约束
```tsx pure title="form-meta.tsx"
import { DynamicValueInput } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
name="dynamic_value_input">
{({ field }) => (
field.onChange(value)}
schema={{ type: 'string' }}
/>
)}
),
}
```
## API 参考
### DynamicValueInput Props
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `value` | `IFlowConstantRefValue` | - | 输入值，支持常量或变量引用 |
| `onChange` | `(value?: IFlowConstantRefValue) => void` | - | 值变化时的回调函数 |
| `readonly` | `boolean` | `false` | 是否为只读模式 |
| `hasError` | `boolean` | `false` | 是否显示错误状态 |
| `style` | `React.CSSProperties` | - | 自定义样式 |
| `schema` | `IJsonSchema` | - | 约束输入类型的 JSON Schema |
| `constantProps` | `ConstantInputProps` | - | 传递给常量输入组件的额外属性 |
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/dynamic-value-input
```
### 目录结构讲解
```
dynamic-value-input/
├── index.tsx # 主组件实现，包含 DynamicValueInput 核心逻辑
├── hooks.ts # 自定义 Hooks，处理变量引用和 schema 选择
└── styles.css # 样式文件
```
### 核心实现说明
#### 变量引用处理
通过 `useRefVariable` Hook 获取变量引用信息：
```typescript
const refVariable = useRefVariable(value);
```
#### Schema 选择管理
通过 `useSelectSchema` Hook 管理类型选择：
```typescript
const [selectSchema, setSelectSchema] = useSelectSchema(
schemaFromProps,
constantProps,
value
);
```
#### 模式切换逻辑
组件通过判断 `value.type` 来决定渲染常量输入还是变量选择器：
```typescript
if (value?.type === 'ref') {
// 渲染变量选择器
return ;
} else {
// 渲染常量输入
return ;
}
```
### 整体流程
```mermaid
graph TD
A[DynamicValueInput 组件] --> B{判断输入模式}
B -->|常量模式| C[渲染常量输入]
B -->|变量模式| D[渲染变量选择器]
C --> E[根据 schema 选择输入类型]
D --> F[显示可用变量列表]
E --> G[用户输入值]
F --> H[用户选择变量]
G --> I[生成常量值]
H --> J[生成变量引用]
I --> K[onChange 回调]
J --> K
```
### 使用到的 flowgram API
[**@flowgram.ai/json-schema**](https://github.com/bytedance/flowgram.ai/tree/main/packages/variable/json-schema)
- [`JsonSchemaUtils`](https://flowgram.ai/auto-docs/json-schema/modules/JsonSchemaUtils): JSON Schema 工具类
- [`IJsonSchema`](https://flowgram.ai/auto-docs/json-schema/interfaces/IJsonSchema): JSON Schema 类型定义
- [`useTypeManager`](https://flowgram.ai/auto-docs/json-schema/functions/useTypeManager): 类型管理器 Hook
[**@flowgram.ai/variable-core**](https://github.com/bytedance/flowgram.ai/tree/main/packages/variable/variable-engine/core)
- [`useScopeAvailable`](https://flowgram.ai/auto-docs/variable-core/functions/useScopeAvailable): 获取当前作用域的可用变量
### 依赖的其他物料
[**TypeSelector**](./type-selector) 类型选择器
[**ConstantInput**](./constant-input) 常量输入组件
[**VariableSelector**](./variable-selector) 变量选择器
- `InjectVariableSelector`: 依赖注入变量选择器
[**FlowValue**](../common/flow-value)
- `IFlowConstantRefValue`: 常量或变量引用值类型
[**InjectMaterial**](../common/inject-material) 可注入物料组件
- `createInjectMaterial`: 创建可注入的物料组件
---
url: /materials/components/condition-row.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/components/condition-row';
# ConditionRow
ConditionRow 是一个条件表达式组件，用于构建变量比较逻辑。它支持选择变量、选择比较操作符、输入比较值，能够根据变量类型自动适配可用的操作符和值类型。
*第一个条件为 query 变量包含 Hello Flow，第二个条件为 enable 变量为 true*
## 案例演示
### 基本使用
```tsx pure title="form-meta.tsx"
import { ConditionRow } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
name="condition_row">
{({ field }) => (
field.onChange(value)} />
)}
),
}
```
### 带初始值的条件行
```tsx
console.log('条件变化:', value)}
/>
```
## API 参考
### ConditionRow Props
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `value` | `ConditionRowValueType` | - | 条件表达式值 |
| `onChange` | `(value?: ConditionRowValueType) => void` | - | 条件变化时的回调函数 |
| `readonly` | `boolean` | `false` | 是否为只读模式 |
| `ruleConfig` | `{ ops?: ConditionOpConfigs; rules?: Record }` | - | 操作符和规则配置 |
| `style` | `React.CSSProperties` | - | 自定义样式 |
### ConditionRowValueType
```typescript
interface ConditionRowValueType {
left?: IFlowRefValue; // 左侧变量引用
operator?: string; // 操作符
right?: IFlowConstantRefValue; // 右侧常量值
}
interface IFlowRefValue {
type: 'ref';
content: string; // 变量路径，如 "user.name"
}
interface IFlowConstantRefValue {
type: 'constant';
content: any; // 常量值
schema: IJsonSchema; // 值的类型定义
}
```
### 支持的比较操作符
根据左侧变量的类型，ConditionRow 会自动提供相应的比较操作符：
- **字符串类型**: equals, not_equals, contains, not_contains, starts_with, ends_with
- **数字类型**: equals, not_equals, gt, gte, lt, lte
- **布尔类型**: equals, not_equals
- **数组类型**: contains, not_contains, empty, not_empty
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/condition-row
```
### 目录结构讲解
```
condition-row/
├── index.tsx # 主组件实现，包含 ConditionRow 核心逻辑
├── types.ts # 类型定义
└── styles.css # 样式文件
```
### 核心实现说明
#### 变量类型推断
组件会根据左侧选择的变量自动推断其 JSON Schema 类型：
```typescript
const leftSchema = useMemo(() => {
if (!variable) return undefined;
return JsonSchemaUtils.astToSchema(variable.type, { drilldown: false });
}, [variable?.type?.hash]);
```
#### 操作符动态适配
通过 `useCondition` Hook 根据左侧变量类型获取可用的操作符：
```typescript
const { rule, opConfig, opOptionList, targetSchema } = useCondition({
leftSchema,
operator,
});
```
#### 右侧值类型自动匹配
右侧输入框的类型会根据操作符和左侧变量类型自动匹配：
```typescript
targetSchema ? (
) : (
// 占位输入框
)
```
### 使用到的 flowgram API
#### @flowgram.ai/json-schema
- `JsonSchemaUtils.astToSchema()`: 将 AST 类型转换为 JSON Schema
- `IJsonSchema`: JSON Schema 类型定义
#### @flowgram.ai/variable-core
- `useScopeAvailable()`: 获取当前作用域的可用变量
#### @flowgram.ai/i18n
- `I18n`: 国际化支持
#### 内部组件
- [`InjectVariableSelector`](./variable-selector): 变量选择器
- [`InjectDynamicValueInput`](./dynamic-value-input): 动态值输入组件
- `useCondition`: 条件逻辑 Hook
### 整体流程
```mermaid
graph TD
A[ConditionRow 组件] --> B[选择左侧变量]
B --> C[推断变量类型]
C --> D[获取可用操作符]
D --> E[选择比较操作符]
E --> F[确定右侧值类型]
F --> G[输入比较值]
G --> H[onChange 回调]
J[变量选择器] --> B
K[动态值输入] --> G
L[条件上下文] --> D
```
---
url: /materials/components/db-condition-row.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/components/db-condition-row';
# DBConditionRow
DBConditionRow 是一个数据库条件行组件，用于构建数据库查询条件。它提供了字段选择、操作符选择和值输入功能，可以根据字段类型自动显示合适的操作符和输入控件。
## 案例演示
### 基本使用
```tsx pure title="form-meta.tsx"
import { DBConditionRow } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
name="db_condition_row">
{({ field }) => (
field.onChange(value)}
/>
)}
),
}
```
## API 参考
### DBConditionRow Props
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `value` | `DBConditionRowValueType` | - | 条件行的值，包含 left（字段名）、operator（操作符）和 right（值） |
| `onChange` | `(value?: DBConditionRowValueType) => void` | - | 值变化时的回调函数 |
| `options` | `DBConditionOptionType[]` | - | 可选字段列表，每个字段包含 label、value 和 schema |
| `readonly` | `boolean` | `false` | 是否为只读模式 |
| `style` | `React.CSSProperties` | - | 自定义样式 |
| `ruleConfig` | `{ ops?: ConditionOpConfigs; rules?: Record }` | - | **已废弃**，使用 ConditionContext 替代 |
### DBConditionRowValueType 类型
```typescript
interface DBConditionRowValueType {
left?: string; // 字段名
operator?: string; // 操作符
right?: IFlowConstantRefValue; // 值，支持常量或变量引用
}
```
### DBConditionOptionType 类型
```typescript
interface DBConditionOptionType {
label: string | JSX.Element; // 字段显示名称
value: string; // 字段值
schema: IJsonSchema; // 字段类型定义
}
```
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/db-condition-row
```
### 目录结构讲解
```
db-condition-row/
├── index.tsx # 主组件实现
├── types.ts # 类型定义
└── styles.css # 样式文件
```
### 核心实现说明
#### 组件实现流程
```mermaid
sequenceDiagram
participant 用户
participant 左值
participant useCondition
participant 操作符
participant 右值
用户->>左值: 选择字段
左值->>左值: 更新 left 值
左值->>useCondition: 触发条件计算
useCondition->>useCondition: 获取字段类型信息
useCondition-->>操作符: 返回可用操作符列表
用户->>操作符: 选择操作符
操作符->>操作符: 更新 operator 值
操作符->>useCondition: 重新计算目标类型
useCondition-->>右值: 返回 targetSchema
alt 存在 targetSchema
右值->>右值: 渲染 InjectDynamicValueInput
用户->>右值: 输入或选择值
右值->>右值: 更新 right 值
else 不存在 targetSchema
右值->>右值: 渲染禁用的输入框
右值->>右值: 显示默认提示文本
end
右值-->>用户: 返回完整条件对象
```
1. **左值：字段选择器**：使用 Semi UI 的 Select 组件，根据 options 显示可用字段，并展示字段类型图标。
2. **操作符：操作符选择器**：通过 useCondition Hook 获取与字段类型匹配的操作符列表，用户选择后更新 operator。
3. **右值：值输入组件**：根据选择的字段类型和操作符，动态显示合适的输入控件：
- 当存在 targetSchema 时，使用 InjectDynamicValueInput 组件
- 否则显示禁用的输入框，展示提示信息
### 依赖梳理
#### flowgram API
[**@flowgram.ai/editor**](https://github.com/bytedance/flowgram.ai/tree/main/packages/client/editor)
- [`I18n`](https://flowgram.ai/auto-docs/editor/variables/I18n): 国际化工具类
[**@flowgram.ai/json-schema**](https://github.com/bytedance/flowgram.ai/tree/main/packages/variable/json-schema)
- [`IJsonSchema`](https://flowgram.ai/auto-docs/json-schema/interfaces/IJsonSchema): JSON Schema 类型定义
#### 其他物料
[**ConditionContext**](./condition-context)
- `useCondition`: 获取条件配置的 Hook
- `ConditionOpConfigs`: 操作符配置类型
- `IConditionRule`: 条件规则类型
[**DynamicValueInput**](./dynamic-value-input)
- `InjectDynamicValueInput`: 可注入的动态值输入组件
#### 第三方库
[**Semi UI**](https://semi.design/zh-CN/)
- [`Select`](https://semi.design/zh-CN/input/select): 选择器组件
- [`Button`](https://semi.design/zh-CN/basic/button): 按钮组件
- [`Input`](https://semi.design/zh-CN/input/input): 输入框组件
---
url: /materials/components/condition-context.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/components/condition-context';
# ConditionContext
ConditionContext 是一个条件配置的上下文管理系统，用于统一管理条件规则和操作符配置，为条件组件提供一致的配置环境。
:::tip
ConditionContext 的条件配置上下文可以影响到以下物料：
- [**ConditionRow**](./condition-row)
- [**DBConditionRow**](./db-condition-row)
:::
## 案例演示
### 基本使用
```tsx pure title="form-meta.tsx"
import React from 'react';
import { Field } from '@flowgram.ai/free-layout-editor';
import {
ConditionProvider,
ConditionRow,
DBConditionRow,
type ConditionOpConfigs,
type IConditionRule
} from '@flowgram.ai/form-materials';
const OPS: ConditionOpConfigs = {
cop: {
abbreviation: 'C',
label: 'Custom Operator',
},
};
const RULES: Record = {
string: {
cop: { type: 'string' },
},
};
const formMeta = {
render: () => (
<>
name="condition_row">
{({ field }) => (
field.onChange(value)} />
)}
name="db_condition_row">
{({ field }) => (
field.onChange(value)}
/>
)}
),
};
```
## API 参考
### ConditionProvider
条件配置的上下文提供者组件，用于统一管理条件规则和操作符配置。
| 参数名 | 类型 | 必选 | 说明 |
|--------|------|------|------|
| `rules` | `Record` | 否 | 条件规则配置 |
| `ops` | `ConditionOpConfigs` | 否 | 操作符配置 |
| `children` | `React.ReactNode` | 是 | 子组件 |
### useCondition
获取条件配置的 Hook，根据数据类型和操作符获取相应的配置信息。
具体使用可以参考 [ConditionRow 的源代码](https://github.com/bytedance/flowgram.ai/blob/main/packages/materials/form-materials/src/components/condition-row/index.tsx) 中 `useCondition` 的使用。
### ConditionPresetOp
预设的操作符枚举，提供常用的比较操作符。
| 枚举值 | 说明 | 缩写 |
|--------|------|------|
| `EQ` | 等于 | `=` |
| `NEQ` | 不等于 | `≠` |
| `GT` | 大于 | `>` |
| `GTE` | 大于等于 | `>=` |
| `LT` | 小于 | `<` |
| `LTE` | 小于等于 | `<=` |
| `IN` | 在集合中 | `∈` |
| `NIN` | 不在集合中 | `∉` |
| `CONTAINS` | 包含 | `⊇` |
| `NOT_CONTAINS` | 不包含 | `⊉` |
| `IS_EMPTY` | 为空 | `=` |
| `IS_NOT_EMPTY` | 不为空 | `≠` |
| `IS_TRUE` | 为真 | `=` |
| `IS_FALSE` | 为假 | `=` |
### 类型定义
```typescript
// 操作符配置
interface ConditionOpConfig {
label: string; // 操作符标签
abbreviation: string; // 操作符缩写
rightDisplay?: string; // 右侧显示文本（当右侧不是值时）
}
// 操作符配置集合
type ConditionOpConfigs = Record;
// 条件规则
type IConditionRule = Record;
// 条件规则工厂函数
type IConditionRuleFactory = (
schema?: IJsonSchema
) => Record;
```
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/condition-context
```
### 目录结构讲解
```
condition-context/
├── context.tsx # Context 相关实现
├── hooks/ # 钩子函数目录
│ └── use-condition.tsx # useCondition 钩子实现
├── index.tsx # 统一导出文件
├── op.ts # 预设操作符定义
└── types.ts # 类型定义
```
### 核心实现说明
#### ConditionContext 工作流程
以下是 ConditionProvider 和 useCondition Hook 的工作流程时序图：
```mermaid
sequenceDiagram
participant App as 应用组件
participant Provider as ConditionProvider
participant Context as ConditionContext
participant Child as ConditionRow或DBConditionRow
participant Hook as useCondition Hook
participant TypeManager as useTypeManager
%% 初始化阶段
App->>Provider: 传入 rules 和 ops 配置
Provider->>Context: 创建 Context 并设置默认值
Provider->>Provider: 接收 rules 和 ops 参数
Provider->>Context: 更新 Context 中的配置
Provider-->>App: 渲染子组件
%% 使用阶段
Child->>Hook: 调用 useCondition
Hook->>Context: 通过 useConditionContext() 获取配置
Hook->>TypeManager: 获取类型管理器
Hook->>Hook: 合并用户规则和上下文规则
Hook->>Hook: 合并用户操作符和上下文操作符
Hook->>TypeManager: 根据 leftSchema 获取类型配置
Hook->>Hook: 计算当前类型的条件规则
Hook->>Hook: 生成可用的操作符选项列表
Hook->>Hook: 计算目标值的数据类型 Schema
Hook-->>Child: 返回 {rule, opConfig, opOptionList, targetSchema}
Child-->>App: 根据返回配置渲染条件组件
```
### 依赖梳理
#### flowgram API
[**@flowgram.ai/editor**](https://github.com/bytedance/flowgram.ai/tree/main/packages/client/editor)
- [`I18n`](https://flowgram.ai/auto-docs/editor/variables/I18n): 国际化工具类
[**@flowgram.ai/json-schema**](https://github.com/bytedance/flowgram.ai/tree/main/packages/common/json-schema)
- [`IJsonSchema`](https://flowgram.ai/auto-docs/json-schema/types/IJsonSchema): JSON Schema 类型定义
---
url: /materials/components/inputs-values.md
---
import { SourceCode } from '@theme';
import { BasicStory, WithSchemaStory } from 'components/form-materials/components/inputs-values';
# InputsValues
InputsValues 是一个键值对输入列表组件，用于收集和管理一组输入参数。每个键值对都支持常量和变量两种输入模式，通过 DynamicValueInput 组件实现灵活的输入方式。
## 案例演示
### 基本使用
```tsx pure title="form-meta.tsx"
import { InputsValues } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
| undefined> name="inputs_values">
{({ field }) => (
field.onChange(value)} />
)}
),
}
```
### 带 Schema 约束
```tsx pure title="form-meta.tsx"
import { InputsValues } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
| undefined> name="inputs_values">
{({ field }) => (
field.onChange(value)}
schema={{
type: 'string',
}}
/>
)}
),
}
```
### 自定义常量输入策略
通过 `constantProps` 可以自定义每个值的输入行为：
```typescript
const customStrategies = [
{
type: 'string',
render: (props) =>
},
{
type: 'number',
render: (props) =>
}
];
```
## API 参考
### InputsValues Props
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `value` | `Record` | - | 键值对数据 |
| `onChange` | `(value?: Record) => void` | - | 数据变化时的回调函数 |
| `readonly` | `boolean` | `false` | 是否为只读模式 |
| `hasError` | `boolean` | `false` | 是否显示错误状态 |
| `style` | `React.CSSProperties` | - | 自定义样式 |
| `schema` | `IJsonSchema` | - | 约束所有值类型的 JSON Schema |
| `constantProps` | `ConstantInputProps` | - | 传递给 DynamicValueInput 的额外属性 |
### 数据结构
```typescript
interface PropsType {
value?: Record;
onChange: (value?: Record) => void;
// ... 其他属性
}
type IFlowValue =
| IFlowConstantValue // 常量值
| IFlowRefValue; // 变量引用
interface IFlowConstantValue {
type: 'constant';
content: any; // 常量值
schema: IJsonSchema; // 值的类型定义
}
interface IFlowRefValue {
type: 'ref';
content: string; // 变量路径，如 "user.name"
}
```
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/inputs-values
```
### 目录结构讲解
```
inputs-values/
├── index.tsx # 主组件实现，包含 InputsValues 核心逻辑
├── types.ts # 类型定义
└── styles.css # 样式文件
```
### 核心实现说明
#### 键值对管理
使用 `useObjectList` Hook 管理键值对列表：
```typescript
const { list, updateKey, updateValue, remove, add } = useObjectList({
value,
onChange,
sortIndexKey: 'extra.index',
});
```
#### 动态值输入集成
每个值都使用 `InjectDynamicValueInput` 组件实现输入：
```typescript
updateValue(item.id, v)}
schema={schema}
constantProps={constantProps}
/>
```
#### 键名输入
使用 `BlurInput` 组件实现键名的输入和验证：
```typescript
updateKey(item.id, v)}
placeholder={I18n.t('Input Key')}
/>
```
### 使用到的 flowgram API
#### @flowgram.ai/i18n
- `I18n`: 国际化支持
#### 内部组件
- `InjectDynamicValueInput`: 动态值输入组件
- `BlurInput`: 失焦输入组件
- `useObjectList`: 对象列表管理 Hook
### 整体流程
```mermaid
graph TD
A[InputsValues 组件] --> B[渲染键值对列表]
B --> C[每个键值对]
C --> D[键名输入框]
C --> E[值输入组件]
C --> F[删除按钮]
D --> G[用户输入键名]
E --> H[用户输入值]
F --> I[用户删除键值对]
G --> J[updateKey 更新]
H --> K[updateValue 更新]
I --> L[remove 删除]
J --> M[触发 onChange]
K --> M
L --> M
O[添加按钮] --> P[add 新增]
P --> M
```
---
url: /materials/components/inputs-values-tree.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/components/inputs-values-tree';
# InputsValuesTree
InputsValuesTree 是一个用于展示和编辑**树状结构输入值**的组件，每个叶子节点为一个键值对，值支持常量和变量两种输入模式，通过 DynamicValueInput 组件实现灵活的输入方式。组件采用树形层级展示，支持节点的展开和折叠，适用于构建复杂的嵌套数据结构。
:::tip{title="和 InputsValues 的区别"}
- **结构差异**：InputsValues 仅支持一级键值对列表，而 InputsValuesTree 支持树形嵌套结构
- **展示方式**：InputsValues 使用简单的行列表展示，InputsValuesTree 使用树形结构展示，带有缩进和展开/折叠功能
- **适用场景**：InputsValues 适用于简单的键值对配置，InputsValuesTree 适用于复杂的多层级数据结构配置
:::
## 案例演示
### 基本使用
```tsx pure title="form-meta.tsx"
import { InputsValuesTree } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
| undefined>
name="inputs_values"
defaultValue={{
a: {
b: {
type: 'ref',
content: ['start_0', 'str'],
},
c: {
type: 'constant',
content: 'hello',
},
},
d: {
type: 'constant',
content: '{ "a": "b"}',
schema: { type: 'object' },
},
}}
>
{({ field }) => (
field.onChange(value)} />
)}
),
}
```
## API 参考
| 属性名 | 类型 | 默认值 | 说明 |
| :--- | :--- | :--- | :--- |
| value | `IInputsValues` | - | 树状结构的输入值对象 |
| onChange | `(value?: IInputsValues) => void` | - | 值变化时的回调函数 |
| readonly | `boolean` | `false` | 是否只读模式 |
| hasError | `boolean` | `false` | 是否显示错误状态 |
| schema | `IJsonSchema` | - | JSON Schema 定义，用于验证和类型提示 |
| style | `React.CSSProperties` | - | 自定义样式 |
| constantProps | `{ strategies?: ConstantInputStrategy[]; [key: string]: any }` | - | 常量输入组件的配置属性 |
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/inputs-values-tree
```
### 目录结构讲解
```plaintext
components/inputs-values-tree/
├── index.tsx # 组件入口文件
├── row.tsx # 树行组件，处理单个节点的展示和编辑
├── types.ts # 类型定义文件
├── icon.tsx # 图标组件
├── styles.css # 组件样式文件
└── hooks/
└── use-child-list.tsx # 处理子节点列表的自定义 Hook
```
### 核心实现说明
InputsValuesTree 组件主要用于展示和编辑树状结构的输入值，支持两种类型的值：常量值（constant）和引用值（ref）。
#### 工作流程时序图
```mermaid
sequenceDiagram
participant User as 用户
participant Tree as InputsValuesTree
participant ObjectList as useObjectList
participant Row as InputValueRow
participant ChildList as useChildList
participant DynamicInput as InjectDynamicValueInput
User->>Tree: 提供初始树状数据
Tree->>ObjectList: 初始化顶层数据
ObjectList-->>Tree: 返回列表操作方法
Tree->>Row: 渲染每个顶层节点
Row->>ChildList: 检查是否有子节点
ChildList-->>Row: 返回子节点列表和操作方法
alt 用户展开节点
User->>Row: 点击展开按钮
Row->>Row: 切换collapse状态
Row->>Row: 渲染子节点列表
end
alt 用户添加节点
User->>Row: 点击添加按钮
Row->>ObjectList: 调用add方法
ObjectList-->>Tree: 更新数据
Tree-->>User: 触发onChange回调
end
alt 用户修改节点值
User->>DynamicInput: 编辑值
DynamicInput->>Row: 调用onUpdateValue
Row->>ObjectList: 更新节点值
ObjectList-->>Tree: 更新数据
Tree-->>User: 触发onChange回调
end
```
核心功能特点：
1. **树状结构展示**：通过递归的方式展示嵌套的树状数据结构
2. **值类型支持**：支持常量值和引用值两种类型，常量值可以是字符串、数字、布尔值等，引用值指向工作流中的其他节点
3. **增删改操作**：支持添加、删除、修改节点的键名和值
4. **可配置性**：通过 constantProps 属性可以自定义常量输入组件的行为
组件内部使用 useObjectList 钩子管理对象列表，使用 InputValueRow 组件渲染每一行数据。当用户点击添加按钮时，会默认添加一个空的字符串类型常量值。
### 依赖梳理
#### flowgram API
[**@flowgram.ai/editor**](https://github.com/bytedance/flowgram.ai/tree/main/packages/client/editor)
- [`I18n`](https://flowgram.ai/auto-docs/editor/variables/I18n): 国际化工具类
[**@flowgram.ai/json-schema**](https://github.com/bytedance/flowgram.ai/tree/main/packages/json-schema)
- [`IJsonSchema`](https://flowgram.ai/auto-docs/json-schema/interfaces/IJsonSchema): JSON Schema 类型定义
#### 第三方库
[**Semi UI**](https://semi.design/zh-CN)
- `Button`: 按钮组件
- `IconPlus`: 加号图标组件
---
url: /materials/components/prompt-editor.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/components/prompt-editor';
# PromptEditor
PromptEditor 是一个专业的提示词编辑器组件，基于 Coze Editor 构建，支持 Markdown 语法高亮、Jinja 模板语法高亮等功能，适用于创建和编辑 AI 提示词模板。
## 案例演示
### 基本使用
```tsx pure title="form-meta.tsx"
import { PromptEditor } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
name="prompt_editor"
defaultValue={{
type: 'template',
content: '# Role\n You are a helpful assistant',
}}
>
{({ field }) => (
field.onChange(value)} />
)}
),
}
```
## API 参考
| 属性名 | 类型 | 默认值 | 说明 |
| :--- | :--- | :--- | :--- |
| value | `{ type: 'template'; content: string }` | - | 编辑器的值对象 |
| onChange | `(value: { type: 'template'; content: string }) => void` | - | 值变化时的回调函数 |
| readonly | `boolean` | `false` | 是否只读模式 |
| placeholder | `string` | - | 占位符文本 |
| activeLinePlaceholder | `React.ReactNode` | - | 活动行占位符 |
| style | `React.CSSProperties` | - | 自定义样式 |
| hasError | `boolean` | `false` | 是否显示错误状态 |
| disableMarkdownHighlight | `boolean` | `false` | 是否禁用 Markdown 高亮 |
| options | `Partial>` | - | 编辑器额外选项 |
| children | `React.ReactNode` | - | 子组件 |
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/prompt-editor
```
### 目录结构讲解
```plaintext
components/prompt-editor/
├── index.tsx # 组件入口文件
├── editor.tsx # 编辑器核心实现
├── types.tsx # 类型定义文件
├── styles.css # 组件样式文件
└── extensions/ # 编辑器扩展功能
├── jinja.tsx # Jinja 模板语法高亮支持
├── markdown.tsx # Markdown 语法高亮支持
└── language-support.tsx # 语言支持基础配置
```
### 核心实现说明
PromptEditor 组件基于 @flowgram.ai/coze-editor 构建，提供了专业的提示词编辑功能。主要特点包括：
1. **Markdown 语法高亮**：支持标题、斜体、粗体、列表等 Markdown 元素的语法高亮
2. **Jinja 模板语法高亮**：支持 Jinja 模板引擎的语法高亮，方便创建动态提示词
3. **响应式更新**：监听外部值变化并同步到编辑器
4. **可定制性**：支持自定义样式、占位符等多种配置选项
组件内部使用懒加载优化性能，并通过 EditorProvider 和 Renderer 组件提供编辑器核心功能。
### 依赖梳理
#### flowgram API
[**@flowgram.ai/coze-editor**](https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/coze-editor)
- `Renderer`: 编辑器渲染组件
- `EditorProvider`: 编辑器上下文提供者
- `ActiveLinePlaceholder`: 活动行占位符组件
- `preset-prompt`: 提示词编辑器预设插件
#### 第三方库
[**CodeMirror**](https://codemirror.net/)
- 提供底层编辑器功能支持
---
url: /materials/components/prompt-editor-with-variables.md
---
import { SourceCode } from '@theme';
import { BasicStory, StringOnlyStory } from 'components/form-materials/components/prompt-editor-with-variables';
# PromptEditorWithVariables
PromptEditorWithVariables 是一个增强版的提示编辑器，集成了变量引用功能。
它基于 [PromptEditor](./prompt-editor) 构建，通过 `@`, `{` 弹出变量树选择器，并将输入变量回显为标签，使用户能够在提示模板中方便地引用和管理变量。
*LLM_3 和 LLM_4 的提示词中引用了循环的批处理变量*
## 案例演示
### 基本使用
:::tip{title="变量插入"}
在编辑器中输入 `@`, `{` 字符可以触发变量选择器。
输入 `@`, `{` 后会显示可用的变量列表，选择变量后会自动插入为 `{{variable.path}}` 格式。
:::
```tsx pure title="form-meta.tsx"
import { PromptEditorWithVariables } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
name="prompt_template" defaultValue={{
type: 'template',
content: `# Role
You are a helpful assistant
# Query
{{start_0.str}}`,
}}>
{({ field }) => (
field.onChange(value)}
/>
)}
),
}
```
### 只能选择 String 类型的变量
```tsx pure title="form-meta.tsx"
import { PromptEditorWithVariables, VariableSelectorProvider } from '@flowgram.ai/form-materials';
const STRING_ONLY_SCHEMA = { type: 'string' };
const formMeta = {
render: () => (
name="prompt_template">
{({ field }) => (
field.onChange(value)}
/>
)}
),
}
```
## API 参考
### PromptEditorWithVariables Props
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `value` | `{ type: 'template', content: string }` | - | 提示模板内容 |
| `onChange` | `(value: { type: 'template', content: string }) => void` | - | 内容变化时的回调函数 |
| `readonly` | `boolean` | `false` | 是否为只读模式 |
| `placeholder` | `string` | - | 占位符文本 |
| `activeLinePlaceholder` | `string` | - | 当前行的占位提示 |
| `hasError` | `boolean` | `false` | 是否显示错误状态 |
| `disableMarkdownHighlight` | `boolean` | `false` | 是否禁用Markdown高亮 |
| `options` | `Options` | - | CodeMirror 配置选项 |
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/prompt-editor-with-variables
```
### 目录结构讲解
```
prompt-editor-with-variables/
└── index.tsx # 主组件实现
```
### 核心实现说明
#### 变量能力集成
PromptEditorWithVariables 扩展了基础 [PromptEditor](./prompt-editor)，并基于 [CozeEditorExtensions](./coze-editor-extensions) 增加了变量引用和回显功能。
### 依赖的其他物料
[**PromptEditor**](./prompt-editor)
[**CozeEditorExtensions**](./coze-editor-extensions)
- `EditorVariableTree`: 变量树选择触发
- `EditorVariableTagInject`: 变量 Tag 回显
---
url: /materials/components/prompt-editor-with-inputs.md
---
import { SourceCode } from '@theme';
import { BasicStory, WithoutCanvas } from 'components/form-materials/components/prompt-editor-with-inputs';
# PromptEditorWithInputs
PromptEditorWithInputs 是一个增强版的提示编辑器，集成了**节点输入提示**功能。
它基于 [PromptEditor](./prompt-editor) 构建，通过 `@`, `{` 字符弹出节点输入选择器，使用户能够在提示模板中方便地引用节点的输入。
## 案例演示
### 基本使用
:::tip{title="Inputs 插入"}
在编辑器中输入 `@`, `{` 字符可以触发 Inputs 选择器。
输入 `@`, `{` 后会显示可用的变量列表，选择变量后会自动插入为 `{{inputs.path}}` 格式。
:::
```tsx pure title="form-meta.tsx"
import { PromptEditorWithInputs } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
name="inputsValues"
defaultValue={{
a: { type: 'constant', content: '123' },
b: { type: 'ref', content: ['start_0', 'obj'] },
}}
>
{({ field }) => (
field.onChange(value)} />
)}
name="inputsValues">
{({ field: inputsField }) => (
name="prompt_editor_with_inputs"
defaultValue={{
type: 'template',
content: '# Query \n {{b.obj2.num}}',
}}
>
{({ field }) => (
field.onChange(value)}
inputsValues={inputsField.value || {}}
/>
)}
)}
),
}
```
### 脱离画布使用
:::warning
脱离画布使用时，由于没法访问变量，inputsValues 内不支持 type: 'ref' 类型的值定义
:::
```tsx pure title="with-canvas.tsx"
export const WithoutCanvas = () => {
const [value, setValue] = useState({
type: 'template',
content: '# Role \n You are a helpful assistant. \n\n # Query \n {{b.obj2.num}} \n\n',
});
return (
setValue(value)}
inputsValues={{
a: { type: 'constant', content: '123' },
b: {
c: {
d: { type: 'constant', content: 456 },
},
e: { type: 'constant', content: 789 },
},
}}
/>
);
};
```
## API 参考
### PromptEditorWithInputs Props
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `value` | `{ type: 'template', content: string }` | - | 提示模板内容 |
| `inputsValues` | `IInputsValues` | `{}` | 输入变量键值对 |
| `onChange` | `(value: { type: 'template', content: string }) => void` | - | 内容变化时的回调函数 |
| `readonly` | `boolean` | `false` | 是否为只读模式 |
| `placeholder` | `string` | - | 占位符文本 |
| `activeLinePlaceholder` | `string` | - | 当前行的占位提示 |
| `hasError` | `boolean` | `false` | 是否显示错误状态 |
| `disableMarkdownHighlight` | `boolean` | `false` | 是否禁用Markdown高亮 |
| `options` | `Options` | - | CodeMirror 配置选项 |
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/prompt-editor-with-inputs
```
### 目录结构讲解
```
prompt-editor-with-inputs/
└── index.tsx # 主组件实现
```
### 核心实现说明
#### 输入变量集成
PromptEditorWithInputs 扩展了基础 [PromptEditor](./prompt-editor)，并基于 [coze-editor-extensions](./coze-editor-extensions) 增加了节点 inputs 引用功能。
### 依赖的其他物料
[**PromptEditor**](./prompt-editor)
[**CozeEditorExtensions**](./coze-editor-extensions)
- `EditorInputsTree`: 输入树选择触发
[**FlowValue**](../common/flow-value)
- `IInputsValues`: 输入变量类型定义
---
url: /materials/components/code-editor.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/components/code-editor';
# CodeEditor
CodeEditor 是一个功能强大的代码编辑器组件，基于 CodeMirror 6 构建，支持多种编程语言的语法高亮和智能提示。它提供了 TypeScript、Python、SQL、Shell、JSON 等语言的专用编辑器版本。
## 案例演示
### 基本使用
```tsx pure title="form-meta.tsx"
import { CodeEditor } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
name="code_editor">
{({ field }) => (
field.onChange(value)}
languageId="typescript"
/>
)}
),
}
```
### 不同语言的专用编辑器
:::warning 注意事项
单独引入对应语言的专用编辑器，可以减少打包所需要的依赖
:::
```tsx
// TypeScript 编辑器
import { TypeScriptCodeEditor } from '@flowgram.ai/form-materials';
// Python 编辑器
import { PythonCodeEditor } from '@flowgram.ai/form-materials';
// SQL 编辑器
import { SQLCodeEditor } from '@flowgram.ai/form-materials';
// Shell 编辑器
import { ShellCodeEditor } from '@flowgram.ai/form-materials';
// JSON 编辑器
import { JsonCodeEditor } from '@flowgram.ai/form-materials';
```
## API 参考
### CodeEditor Props
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `value` | `string` | - | 编辑器内容 |
| `onChange` | `(value: string) => void` | - | 内容变化时的回调函数 |
| `languageId` | `'python' \| 'typescript' \| 'shell' \| 'json' \| 'sql'` | - | 代码语言类型 |
| `theme` | `'dark' \| 'light'` | `'light'` | 编辑器主题 |
| `placeholder` | `string` | - | 占位符文本 |
| `activeLinePlaceholder` | `string` | - | 当前行的占位提示 |
| `readonly` | `boolean` | `false` | 是否为只读模式 |
| `mini` | `boolean` | `false` | 是否为迷你模式 |
| `options` | `Options` | - | CodeMirror 配置选项 |
### 语言支持
CodeEditor 支持以下语言：
- **typescript**: TypeScript/JavaScript
- **python**: Python
- **sql**: SQL
- **shell**: Shell 脚本
- **json**: JSON
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/code-editor
```
### 目录结构讲解
```
code-editor/
├── index.tsx # 统一导出文件
├── editor.tsx # 基础编辑器组件 BaseCodeEditor
├── editor-all.tsx # 全功能编辑器（已废弃）
├── editor-ts.tsx # TypeScript 编辑器
├── editor-python.tsx # Python 编辑器
├── editor-sql.tsx # SQL 编辑器
├── editor-shell.tsx # Shell 编辑器
├── editor-json.tsx # JSON 编辑器
├── factory.tsx # 编辑器工厂函数
├── theme/ # 主题配置
│ ├── dark.ts # 暗色主题
│ ├── light.ts # 亮色主题
│ └── index.ts # 主题导出
├── utils.ts # 工具函数
└── styles.css # 样式文件
```
### 核心实现说明
#### BaseCodeEditor
基础编辑器组件，对 coze-editor 的简单封装，提供了基础的语法高亮、主题切换、迷你模式、只读模式等功能。
:::warning 注意事项
BaseCodeEditor 不包含任何语言逻辑的加载，语言逻辑是在专用编辑器中实现的。
:::
#### 专用编辑器
每种语言都有对应的专用编辑器，通过动态导入实现按需加载：
```typescript
export const loadTypescriptLanguage = () =>
import('@flowgram.ai/coze-editor/language-typescript').then((module) => {
// TypeScript 语言加载逻辑
});
export const TypeScriptCodeEditor = CodeEditorFactory(
loadTypescriptLanguage,
{
displayName: 'TypeScriptCodeEditor',
fixLanguageId: 'typescript',
}
);
```
### 使用到的 flowgram API
#### @flowgram.ai/coze-editor
@flowgram.ai/coze-editor 是一个基于 CodeMirror 6 构建的代码编辑器组件。源代码见：[coze-dev/rush-dev](https://github.com/coze-dev/rush-arch/tree/main/packages/text-editor)
- `createRenderer`: 创建编辑器
- `preset-code`: 代码编辑器预设配置
- `EditorProvider`: 编辑器上下文提供者
- `ActiveLinePlaceholder`: 当前行占位符组件
#### @codemirror/view
- `EditorView`: CodeMirror 编辑器视图
### 整体流程
```mermaid
graph TD
A[CodeEditor 组件] --> B[选择 languageId \n 或者专用编辑器]
B --React.lazy--> C[根据 languageId \n 加载语言所需要的依赖]
C --> D[BaseCodeEditor]
D --> E[CozeEditor 编辑器]
E --> F[语法高亮]
E --> G[主题应用]
E --> H[事件处理]
```
### 性能优化
- **按需加载**: 每种语言按需加载
- **专用编辑器**: 推荐使用 XXXCodeEditor 而非通用 CodeEditor，以优化打包速度
---
url: /materials/components/json-editor-with-variables.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/components/json-editor-with-variables';
# JsonEditorWithVariables
JsonEditorWithVariables 是一个增强版的 JSON 编辑器，支持在 JSON 中插入变量引用。它基于 JsonCodeEditor 构建，集成了变量选择器和变量标签注入功能，使用户能够在 JSON 字符串中使用 `{{variable}}` 语法引用变量。
## 案例演示
### 基本使用
:::tip{title="变量插入"}
在编辑器中输入 `@` 字符可以触发变量选择器。
输入 `@` 后会显示可用的变量列表，选择变量后会自动插入为 `{{variable.name}}` 格式。
**注意**：`JsonEditorWithVariables` 默认不支持 `{` 触发，因为 `{` 是 JSON 的语法。
:::
```tsx pure title="form-meta.tsx"
import { JsonEditorWithVariables } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
name="json_editor_with_variables" defaultValue={`{ "a": {{start_0.str}} }`}>
{({ field }) => (
field.onChange(value)}
/>
)}
),
}
```
## API 参考
### JsonEditorWithVariables Props
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `value` | `string` | - | JSON 字符串内容 |
| `onChange` | `(value: string) => void` | - | 内容变化时的回调函数 |
| `theme` | `'dark' \| 'light'` | `'light'` | 编辑器主题 |
| `placeholder` | `string` | - | 占位符文本 |
| `activeLinePlaceholder` | `string` | `'按 @ 选择变量'` | 当前行的占位提示 |
| `readonly` | `boolean` | `false` | 是否为只读模式 |
| `options` | `Options` | - | CodeMirror 配置选项 |
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/json-editor-with-variables
```
### 目录结构讲解
```
json-editor-with-variables/
├── index.tsx # 懒加载导出文件
└── editor.tsx # 主组件实现
```
### 核心实现说明
#### 变量能力集成
JsonEditorWithVariables 扩展了基础 JsonCodeEditor，并基于 coze-editor-extensions 增加了变量引用和回显功能。
### 依赖的其他物料
[**CozeEditorExtensions**](./coze-editor-extensions)
- `EditorVariableTree`: 变量树选择触发
- `EditorVariableTagInject`: 变量标签展示
---
url: /materials/components/sql-editor-with-variables.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/components/sql-editor-with-variables';
# SQLEditorWithVariables
SQLEditorWithVariables 是一个增强版的 SQL 编辑器，支持在 SQL 中插入变量引用。它基于 SQLCodeEditor 构建，集成了变量选择器和变量标签注入功能，使用户能够在 SQL 字符串中使用 `{{variable}}` 语法引用变量。
## 案例演示
### 基本使用
:::tip{title="变量插入"}
在编辑器中输入 `@`, `{` 字符可以触发变量选择器。
输入 `@`, `{` 后会显示可用的变量列表，选择变量后会自动插入为 `{{variable.name}}` 格式。
:::
```tsx pure title="form-meta.tsx"
import { SQLEditorWithVariables } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
name="sql_editor_with_variables"
defaultValue="SELECT * FROM users WHERE user_id = {{start_0.str}}"
>
{({ field }) => (
field.onChange(value)}
/>
)}
),
}
```
### 带变量的 SQL 示例
```sql
SELECT
id, name, email
FROM users
WHERE id = {{start_0.user_id}}
AND email LIKE '%{{start_0.domain}}'
LIMIT 10;
```
## API 参考
### SQLEditorWithVariables Props
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `value` | `string` | - | SQL 字符串内容 |
| `onChange` | `(value: string) => void` | - | 内容变化时的回调函数 |
| `theme` | `'dark' \| 'light'` | `'light'` | 编辑器主题 |
| `placeholder` | `string` | - | 占位符文本 |
| `activeLinePlaceholder` | `string` | `'按 @ 选择变量'` | 当前行的占位提示 |
| `readonly` | `boolean` | `false` | 是否为只读模式 |
| `options` | `Options` | - | CodeMirror 配置选项 |
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/sql-editor-with-variables
```
### 目录结构讲解
```
sql-editor-with-variables/
├── index.tsx # 懒加载导出文件
└── editor.tsx # 主组件实现
```
### 核心实现说明
#### 变量能力集成
SQLEditorWithVariables 扩展了基础 SQLCodeEditor，并基于 coze-editor-extensions 增加了变量引用和回显功能。
### 依赖的其他物料
[**CozeEditorExtensions**](./coze-editor-extensions)
- `EditorVariableTree`: 变量树选择触发
- `EditorVariableTagInject`: 变量标签展示
---
url: /materials/components/coze-editor-extensions.md
---
import { SourceCode } from '@theme';
import { BasicStory as PromptWithVariablesStory } from 'components/form-materials/components/prompt-editor-with-variables';
import { BasicStory as PromptWithInputsStory } from 'components/form-materials/components/prompt-editor-with-inputs';
# CozeEditorExtensions
CozeEditorExtensions 是一组基于 [coze-editor](https://github.com/coze-dev/rush-arch/tree/main/packages/text-editor) 的功能扩展，提供变量、Inputs 选择器与变量标签回显能力。
- `EditorVariableTree`：监听 `@`/`{` 等触发字符，弹出可用变量树并将选中项写入编辑器。
- `EditorVariableTagInject`：对 `{{variable.path}}` 文本进行标记渲染，展示变量图标、标题与回显提示。
- `EditorInputsTree`：基于节点 `inputsValues` 构造层级树，支持在提示词中插入 `{{inputs.xxx}}` 引用。
## 案例演示
### 变量树 + 标签回显
```tsx pure title="prompt-editor-with-extensions.tsx"
import {
PromptEditor,
EditorVariableTree,
EditorVariableTagInject,
EditorInputsTree,
} from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
);
}
```
:::tip{title="触发方式"}
`EditorVariableTree` 默认监听 `{`、`{{` 和 `@`，你可以通过 `triggerCharacters` 自定义触发字符。
:::
### 节点 Inputs 引用
```tsx pure title="prompt-editor-with-extensions.tsx"
import {
PromptEditor,
EditorVariableTree,
EditorVariableTagInject,
EditorInputsTree,
} from '@flowgram.ai/form-materials';
export function PromptEditorWithExtensions({ value, onChange, inputsValues }) {
return (
);
}
```
### 渲染键与二次扩展
CozeEditorExtensions 通过 [`createInjectMaterial`](../common/inject-material) 声明了固定的 `renderKey`：
- `EditorVariableTree.renderKey = 'EditorVariableTree'`
- `EditorVariableTagInject.renderKey = 'EditorVariableTagInject'`
- `EditorInputsTree.renderKey = 'EditorInputsTree'`
你可以在 `use-editor-props` 中注册同名渲染器，以替换默认行为。例如自定义变量选择面板：
```tsx pure title="override-variable-tree.tsx"
import { useEditorProps } from '@flowgram.ai/editor';
import { EditorVariableTree } from '@flowgram.ai/form-materials';
import { CustomVariableTree } from './custom-variable-tree';
export function useCustomEditorProps() {
return useEditorProps({
materials: {
components: {
[EditorVariableTree.renderKey!]: CustomVariableTree,
},
},
});
}
```
## API 参考
### EditorVariableTree Props
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `triggerCharacters` | `string[]` | `['{', '{}', '@']` | 触发变量树弹出的字符集 |
### EditorVariableTagInject Props
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| _无_ | - | - | 组件无额外属性，渲染即生效 |
### EditorInputsTree Props
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `inputsValues` | `IInputsValues` | - | 节点 Inputs 的键值数据，支持 `FlowValue` 引用 |
| `triggerCharacters` | `string[]` | `['{', '{}', '@']` | 触发 Inputs 选择器的字符集 |
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/coze-editor-extensions
```
### 目录结构讲解
```
coze-editor-extensions/
├── index.tsx # 导出可注入物料
├── extensions/
│ ├── inputs-tree.tsx # Inputs Tree 实现
│ ├── variable-tag.tsx # 变量标签渲染
│ └── variable-tree.tsx # 变量树选择器
└── styles.css # 标签样式与弹窗样式
```
### 核心实现说明
**EditorVariableTree**
- 弹窗定位与滚动同步：`Mention` + `PositionMirror` 组合确保 Popover 始终贴合光标位置，滚动时会通过 `rePosKey` 触发重新定位
- 变量树数据来源：`useVariableTree` 读取 `Scope.available` 中注册的变量，自动应用 schema 过滤、禁用状态和图标
**EditorVariableTagInject**
- 标签渲染与订阅：使用 CodeMirror `MatchDecorator` 将 `{{xxx}}` 文本替换为 `Tag` 小部件，并订阅变量标题/Icon 更新，实现实时回显
**EditorInputsTree**
- Inputs 树构造：支持 `FlowValue` 与普通对象，递归生成层级节点，并在插入前统一格式化为 `{{path}}`
### 依赖梳理
#### 其他物料
[**InjectMaterial**](../common/inject-material)
- `createInjectMaterial`: 创建可注入的物料组件
#### 第三方库
[**coze-editor**](https://github.com/coze-dev/rush-arch/tree/main/packages/text-editor)
- 基础编辑器组件
[**CodeMirror MatchDecorator**](https://codemirror.net/docs/ref/#search.MatchDecorator)
- 用于变量标签的文本匹配和替换
---
url: /materials/components/constant-input.md
---
import { SourceCode } from '@theme';
import { BasicStory, FallbackRendererStory, CustomStrategyStory } from 'components/form-materials/components/constant-inputs';
# ConstantInput
ConstantInput 是一个常量输入组件，它根据提供的 JSON Schema 自动选择合适的输入类型渲染器。
组件支持自定义渲染策略和兜底渲染器，能够处理各种数据类型的常量输入。
## 案例演示
### 基本使用
```tsx pure title="form-meta.tsx"
const formMeta = {
render: () => (
<>
name="constant_string" defaultValue="Hello World">
{({ field }) => (
field.onChange(value)}
schema={{ type: 'string' }}
/>
)}
name="constant_enum" defaultValue="上午">
{({ field }) => (
field.onChange(value)}
schema={{ type: 'string', enum: ['上午', '下午'] }}
/>
)}
),
}
```
:::tip{title="注册新类型的常量输入器"}
参考 [类型管理](../common/json-schema-preset)，在类型注册的时候为类型配置常量输入器
:::
### 兜底渲染器
当组件无法找到合适的渲染器时，会使用兜底渲染器：
```tsx pure title="form-meta.tsx"
const formMeta = {
render: () => (
<>
name="constant_fallback" defaultValue={{ custom: 'data' }}>
{({ field }) => (
field.onChange(value)}
schema={{ type: 'custom-unsupported-type' }}
fallbackRenderer={({ value, onChange, readonly }) => (
Fallback renderer for unsupported type
)}
/>
)}
),
}
```
### 自定义策略
使用自定义渲染策略来覆盖默认行为：
```tsx pure title="form-meta.tsx"
const formMeta = {
render: () => (
<>
name="constant_custom" defaultValue="自定义值">
{({ field }) => (
field.onChange(value)}
schema={{ type: 'object' }}
strategies={[
{
hit: (schema) => schema.type === 'object',
Renderer: ({ value, onChange, readonly }) => (
Object is not supported now
),
},
]}
/>
)}
),
}
```
## API 参考
### ConstantInput Props
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `value` | `any` | - | 输入值 |
| `onChange` | `(value: any) => void` | - | 值变化时的回调函数 |
| `schema` | `IJsonSchema` | - | 用于确定渲染器的 JSON Schema |
| `strategies` | `Strategy[]` | - | 自定义渲染策略数组 |
| `fallbackRenderer` | `React.FC` | - | 当没有合适渲染器时使用的兜底渲染器 |
| `readonly` | `boolean` | `false` | 是否为只读模式 |
### Strategy 接口
```typescript
interface Strategy {
hit: (schema: IJsonSchema) => boolean;
Renderer: React.FC>;
}
```
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/constant-input
```
### 目录结构讲解
```
constant-input/
├── index.tsx # 主组件实现，包含 ConstantInput 核心逻辑
└── types.ts # 类型定义，包括 Strategy 接口和 PropsType
```
### 核心实现说明
#### 渲染器选择逻辑
组件通过以下步骤选择合适的渲染器：
1. **策略匹配**：首先检查 `strategies` 数组中是否有匹配当前 schema 的策略
2. **类型管理器**：如果没有匹配的策略，则使用类型管理器 (`useTypeManager`) 获取对应 schema 的渲染器
3. **兜底渲染**：如果以上都失败，使用提供的 `fallbackRenderer` 或默认的禁用输入框
#### 类型系统集成
ConstantInput 与 [**物料类型管理**](../common/json-schema-preset) 深度集成：
- 通过 `useTypeManager` Hook 获取类型管理器
- 使用 `typeManager.getTypeBySchema(schema)` 获取对应类型的渲染器
- 支持所有 JSON Schema 标准类型（string, number, boolean, object, array 等）
### 依赖梳理
#### flowgram API
[**@flowgram.ai/json-schema**](https://github.com/bytedance/flowgram.ai/tree/main/packages/variable/json-schema)
- [`IJsonSchema`](https://flowgram.ai/auto-docs/json-schema/interfaces/IJsonSchema): JSON Schema 类型定义
- [`useTypeManager`](https://flowgram.ai/auto-docs/json-schema/functions/useTypeManager): 类型管理器 Hook
#### 第三方库
[**Semi UI**](https://semi.design/zh-CN)
- 基础输入组件库，提供默认的输入控件
---
url: /materials/components/display-schema-tag.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/components/display-schema-tag';
# DisplaySchemaTag
DisplaySchemaTag 是一个用于展示 JSON Schema 的标签组件，当用户点击标签时，会弹出详细的 schema 树形结构，方便查看复杂的数据结构。
## 案例演示
### 基本使用
```tsx pure title="form-meta.tsx"
import { DisplaySchemaTag } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
),
}
```
## API 参考
| 属性名 | 类型 | 默认值 | 说明 |
| :--- | :--- | :--- | :--- |
| title | `JSX.Element \| string` | - | 标签显示的标题文本 |
| value | `IJsonSchema` | `{}` | 要展示的 JSON Schema 对象 |
| showIconInTree | `boolean` | - | 是否在弹出的树形结构中显示图标 |
| warning | `boolean` | `false` | 是否显示警告状态（黄色标签） |
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/display-schema-tag
```
### 目录结构讲解
```plaintext
components/display-schema-tag/
├── index.tsx # 组件主要实现文件
└── styles.css # 组件样式文件
```
### 核心实现说明
DisplaySchemaTag 组件基于 Semi UI 的 Popover 和 Tag 组件实现，内部集成了 DisplaySchemaTree 来在弹出框中展示详细的 schema 结构。
### 依赖梳理
#### flowgram API
[**@flowgram.ai/json-schema**](https://github.com/bytedance/flowgram.ai/tree/main/packages/json-schema)
- [`IJsonSchema`](https://flowgram.ai/auto-docs/json-schema/interfaces/IJsonSchema): JSON Schema 类型定义
- [`useTypeManager`](https://flowgram.ai/auto-docs/json-schema/functions/useTypeManager): 类型管理器 Hook
#### 其他物料
[**DisplaySchemaTree**](./display-schema-tree) 用于在弹出框中展示详细的 schema 树形结构
#### 第三方库
[**Semi UI**](https://semi.design/zh-CN)
- `Popover`: 弹出框组件
- `Tag`: 标签组件
---
url: /materials/components/display-schema-tree.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/components/display-schema-tree';
# DisplaySchemaTree
DisplaySchemaTree 是一个用于可视化展示 JSON Schema 结构的树形组件，可以递归地展示对象、数组等复杂数据结构的层级关系。
## 案例演示
### 基本使用
```tsx pure title="form-meta.tsx"
import { DisplaySchemaTree } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
),
}
```
## API 参考
| 属性名 | 类型 | 默认值 | 说明 |
| :--- | :--- | :--- | :--- |
| value | `IJsonSchema` | `{}` | 要展示的 JSON Schema 对象 |
| drilldown | `boolean` | `true` | 是否展开嵌套的属性结构 |
| showIcon | `boolean` | `true` | 是否显示类型图标 |
| typeManager | `JsonSchemaTypeManager` | - | 类型管理器，用于获取类型相关信息 |
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/display-schema-tree
```
### 目录结构讲解
```plaintext
components/display-schema-tree/
├── index.tsx # 组件主要实现文件
└── styles.css # 组件样式文件
```
### 核心实现说明
DisplaySchemaTree 组件通过递归渲染的方式展示 JSON Schema 的层级结构。
它使用 `useTypeManager` 获取类型相关信息，包括图标、显示文本等。组件内部递归渲染 Schema 的子属性，支持多级嵌套的数据结构展示。
### 依赖梳理
#### flowgram API
[**@flowgram.ai/json-schema**](https://github.com/bytedance/flowgram.ai/tree/main/packages/json-schema)
- [`IJsonSchema`](https://flowgram.ai/auto-docs/json-schema/interfaces/IJsonSchema): JSON Schema 类型定义
- [`useTypeManager`](https://flowgram.ai/auto-docs/json-schema/functions/useTypeManager): 类型管理器 Hook
---
url: /materials/components/display-flow-value.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/components/display-flow-value';
# DisplayFlowValue
DisplayFlowValue 是一个用于可视化展示 [Flow Value](../common/flow-value) 数据类型的组件，它能够根据 Flow Value 的类型推断出相应的 JSON Schema，并通过友好的界面展示给用户。
## 案例演示
### 基本使用
```tsx pure title="form-meta.tsx"
const formMeta = {
render: () => (
<>
name="dynamic_value_input">
{({ field }) => (
field.onChange(value)} />
)}
name="dynamic_value_input">
{({ field }) => }
),
}
```
## API 参考
### Props
| 属性名 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| value | `IFlowValue` | 否 | - | 要显示的 Flow Value 数据 |
| title | `string \| JSX.Element` | 否 | - | 显示在标签上的标题文本 |
| showIconInTree | `boolean` | 否 | - | 是否在 Schema 树中显示图标 |
| typeManager | `JsonSchemaTypeManager` | 否 | - | 用于获取类型显示信息的管理器 |
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/display-flow-value
```
### 核心实现说明
DisplayFlowValue 组件的主要功能是将 Flow Value 转换为 JSON Schema 并可视化展示。核心实现包括：
1. **类型推断**：根据不同类型的 Flow Value 推断出对应的 JSON Schema
- 对于引用类型，从作用域中获取变量的类型信息
- 对于模板类型，默认推断为字符串类型
- 对于常量类型，根据常量值推断其类型
2. **可视化展示**：通过 DisplaySchemaTag 组件展示推断出的 Schema
- 使用半 UI 的 Popover 和 Tag 组件
- 点击标签可以查看详细的 Schema 树形结构
3. **错误处理**：当引用类型指向的变量不存在时，会显示警告颜色
### 依赖梳理
#### flowgram API
[**@flowgram.ai/json-schema**](https://github.com/bytedance/flowgram.ai/tree/main/packages/common/json-schema)
- `JsonSchemaTypeManager`: 用于获取类型显示信息
- `JsonSchemaUtils`: 提供 JSON Schema 相关的工具函数
[**@flowgram.ai/editor**](https://github.com/bytedance/flowgram.ai/tree/main/packages/client/editor)
- `useScopeAvailable`: 获取当前作用域中可用的变量
#### 其他物料
[**DisplaySchemaTag**](./display-schema-tag) 用于展示 JSON Schema 的标签组件
[**FlowValueUtils**](../common/flow-value)
- [FlowValueUtils.inferJsonSchema](../common/flow-value#schema-推断函数)
#### 第三方库
[**Semi UI**](https://semi.design/zh-CN/)
- `Popover`: 弹出框组件
- `Tag`: 标签组件
---
url: /materials/components/display-inputs-values.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/components/display-inputs-values';
# DisplayInputsValues
DisplayInputsValues 是一个用于可视化展示树状结构输入值的组件。
它能够**递归**地遍历输入值对象，对于解析其中 [Flow Value](../common/flow-value) 的类型，并推导出每一个字段的 Json Schema 结构。
:::tip
DisplayInputsValues 支持展示 [InputsValues](./inputs-values) 和 [InputsValuesTree](./inputs-values-tree) 两个组件配置的值。
:::
## 案例演示
### 基本使用
```tsx pure title="form-meta.tsx"
import { InputsValuesTree, DisplayInputsValues } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
| undefined> name="inputs_values">
{({ field }) => (
field.onChange(value)} />
)}
| undefined> name="inputs_values">
{({ field }) => }
),
}
```
## API 参考
### Props
| 属性名 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| value | `IInputsValues` | 否 | - | 要展示的输入值数据 |
| showIconInTree | `boolean` | 否 | - | 是否在 Schema 树中显示图标 |
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/display-inputs-values
```
### 核心实现说明
DisplayInputsValues 组件的主要功能是递归地展示树状结构的输入值。核心实现包括：
1. **数据遍历**：遍历输入的 value 对象，处理每一个键值对
2. **类型区分**：
- 对于 Flow Value 类型的值，使用 DisplayFlowValue 组件进行展示
- 对于普通对象类型的值，使用 DisplayInputsValueAllInTag 组件展示其 JSON Schema 结构
3. **递归展示**：支持展示多层嵌套的数据结构
### 依赖梳理
#### flowgram API
[**@flowgram.ai/editor**](https://github.com/bytedance/flowgram.ai/tree/main/packages/client/editor)
- `useScopeAvailable`: 获取当前作用域中可用的变量
[**@flowgram.ai/form-materials**](https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials)
- `FlowValueUtils`: Flow Value 相关工具函数
- `DisplayFlowValue`: 展示 Flow Value 的组件
- `DisplaySchemaTag`: 展示 JSON Schema 的标签组件
#### 第三方库
[**lodash-es**](https://lodash.com/)
- `isPlainObject`: 判断是否为普通对象
---
url: /materials/components/display-outputs.md
---
import { SourceCode } from '@theme';
import { DisplayFromScopeStory, DisplayFromFieldStory } from 'components/form-materials/components/display-outputs';
# DisplayOutputs
DisplayOutputs 是一个用于可视化展示节点输出变量的组件，支持从作用域自动获取输出变量或通过字段值手动指定输出模式。
## 案例演示
### 从作用域获取输出变量
当设置 `displayFromScope` 为 `true` 时，组件会自动从当前节点作用域获取输出变量并展示：
```tsx pure title="form-meta.tsx" {27}
import { DisplayOutputs, provideJsonSchemaOutputs } from '@flowgram.ai/form-materials';
import { Field } from '@flowgram.ai/editor';
const formMeta = {
render: () => (
<>
name="outputs">
{({ field }) => (
field.onChange(value)} />
)}
Display Output Schema:
),
effect: {
outputs: provideJsonSchemaOutputs,
},
}
```
### 通过字段值指定输出模式
当不设置 `displayFromScope` 时，组件通过 `value` 属性接收输出的 JSON Schema：
```tsx pure title="form-meta.tsx"
import { DisplayOutputs } from '@flowgram.ai/form-materials';
import { Field } from '@flowgram.ai/editor';
const formMeta = {
render: () => (
<>
name="outputs">
{({ field }) => (
field.onChange(value)} />
)}
Display Output Schema:
name="outputs">
{({ field }) => }
),
}
```
## API 参考
### DisplayOutputs Props
| 属性名 | 类型 | 默认值 | 说明 |
| :--- | :--- | :--- | :--- |
| value | `IJsonSchema` | - | 要展示的 JSON Schema 对象，当 `displayFromScope` 为 `false` 时使用 |
| displayFromScope | `boolean` | `false` | 是否从当前作用域自动获取输出变量 |
| showIconInTree | `boolean` | `false` | 是否在树形结构中显示图标 |
| typeManager | `JsonSchemaTypeManager` | - | 自定义类型管理器 |
| style | `React.CSSProperties` | - | 自定义样式 |
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials display-outputs
```
### 目录结构讲解
```plaintext
display-outputs/
├── index.tsx # 组件主入口，实现 DisplayOutputs 组件
└── styles.css # 组件样式文件
```
### 核心实现说明
DisplayOutputs 组件的核心逻辑：
1. **作用域模式** (`displayFromScope=true`): 使用 `useCurrentScope` Hook 获取当前作用域的输出变量，通过 `scope?.output.variables` 获取变量列表并转换为 JSON Schema 属性
2. **字段模式** (`displayFromScope=false`): 直接使用 `value` 属性传入的 JSON Schema 对象
3. **变量监听**: 在作用域模式下，组件会监听输出变量的变化并自动刷新显示
4. **渲染实现**: 将 JSON Schema 的每个属性渲染为 `DisplaySchemaTag` 组件，支持类型图标和警告状态显示
### 依赖梳理
#### flowgram API
[**@flowgram.ai/editor**](https://github.com/bytedance/flowgram.ai/tree/main/packages/client/editor)
- [`useCurrentScope`](https://flowgram.ai/auto-docs/editor/functions/useCurrentScope): 获取当前作用域的 Hook
- [`useRefresh`](https://flowgram.ai/api/hooks/use-refresh): 强制组件刷新的 Hook
[**@flowgram.ai/json-schema**](https://github.com/bytedance/flowgram.ai/tree/main/packages/common/json-schema)
- [`IJsonSchema`](https://flowgram.ai/auto-docs/json-schema/interfaces/IJsonSchema): JSON Schema 类型定义
- [`JsonSchemaUtils`](https://flowgram.ai/auto-docs/json-schema/modules/JsonSchemaUtils): JSON Schema 工具函数
- [`JsonSchemaTypeManager`](https://flowgram.ai/auto-docs/json-schema/classes/JsonSchemaTypeManager): 类型管理器
#### 其他物料
[**DisplaySchemaTag**](./display-schema-tag)
- `DisplaySchemaTag`: 用于展示单个 JSON Schema 属性的标签组件
#### 第三方库
[**React**](https://react.dev/)
- `useLayoutEffect`: 用于监听作用域变量变化
---
url: /materials/components/assign-row.md
---
import { SourceCode } from '@theme';
import { AssignModeStory, DeclareModeStory } from 'components/form-materials/components/assign-row';
# AssignRow
AssignRow 是一个赋值行组件，支持两种操作模式：**赋值模式 (assign)** 和 **声明模式 (declare)**。
- 在赋值模式下：左侧是变量选择器，右侧是动态值输入；
- 在声明模式下：左侧是文本输入框，右侧是动态值输入。
## 案例演示
### 赋值模式
AssignRow **默认为赋值模式**，在赋值模式下，左侧为变量选择器，右侧为动态值输入：
```tsx pure title="form-meta.tsx"
import { AssignRow } from '@flowgram.ai/form-materials';
import { AssignValueType } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
name="assign_row">
{({ field }) => (
field.onChange(value)} />
)}
),
}
```
### 声明模式
声明模式下，左侧为变量名输入，右侧为动态值输入：
```tsx pure title="form-meta.tsx"
import { AssignRow } from '@flowgram.ai/form-materials';
import { AssignValueType } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
name="assign_row">
{({ field }) => (
field.onChange(value)}
/>
)}
),
}
```
## API 参考
### AssignRow Props
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `value` | `AssignValueType` | - | 赋值行的值，包含操作符、左侧值和右侧值 |
| `onChange` | `(value?: AssignValueType) => void` | - | 值变化时的回调函数 |
| `onDelete` | `() => void` | - | 删除按钮点击时的回调函数 |
| `readonly` | `boolean` | `false` | 是否为只读模式 |
### AssignValueType
```typescript
type AssignValueType =
| {
operator: 'assign';
left?: IFlowRefValue; // 变量引用
right?: IFlowValue; // 动态值
}
| {
operator: 'declare';
left?: string; // 变量名
right?: IFlowValue; // 动态值
};
```
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/assign-row
```
### 目录结构讲解
```
assign-row/
├── index.tsx # AssignRow 组件主实现
└── types.ts # 类型定义文件
```
### 核心实现说明
AssignRow 组件的核心逻辑是根据 `operator` 字段来渲染不同的左侧输入控件：
1. **赋值模式 (`operator: 'assign'`)**：左侧渲染 `InjectVariableSelector`，用于选择已有变量
2. **声明模式 (`operator: 'declare'`)**：左侧渲染 `BlurInput`，用于输入新变量名
3. **右侧统一**：无论哪种模式，右侧都渲染 `InjectDynamicValueInput`，支持常量和变量输入
#### 组件结构
```mermaid
graph TD
A[AssignRow 组件] --> B{判断 operator 类型}
B -->|assign| C[渲染变量选择器]
B -->|declare| D[渲染文本输入框]
C --> E[右侧动态值输入]
D --> E
E --> F[可选的删除按钮]
C --> G[支持 onDelete 回调]
D --> G
F --> G
```
### 依赖梳理
#### 其他物料
[**VariableSelector**](./variable-selector)
- `InjectVariableSelector`: 依赖注入的变量选择器
[**DynamicValueInput**](./dynamic-value-input)
- `InjectDynamicValueInput`: 依赖注入的动态值输入组件
[**BlurInput**](./blur-input)
- `BlurInput`: 失焦输入组件
#### 第三方库
[**Semi Design**](https://semi.design/zh-CN/)
- `IconButton`: 图标按钮组件
- `IconMinus`: 减号图标
---
url: /materials/components/assign-rows.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/components/assign-rows';
# AssignRows
AssignRows 是一个赋值行列表组件，基于 `FieldArray` 实现，支持动态添加和删除赋值行。
组件提供了两个操作按钮：**赋值** 和 **声明**，可以分别添加赋值模式和声明模式的赋值行。每个赋值行都可以独立配置和删除。
:::tip
`AssignRows` 通常和 [`infer-assign-plugin`](../form-plugins/infer-assign-plugin) 表单插件一起使用，用于将定义的声明转换为节点的输出变量，并实现类型的自动联动。
:::
## 案例演示
### 基本使用
```tsx pure title="form-meta.tsx"
import { AssignRows } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
),
}
```
## API 参考
### AssignRows Props
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `name` | `string` | - | 表单字段名称，用于 FieldArray |
| `readonly` | `boolean` | `false` | 是否为只读模式 |
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/assign-rows
```
### 目录结构讲解
```
assign-rows/
└── index.tsx # AssignRows 组件主实现
```
### 核心实现说明
AssignRows 组件的核心功能是基于 `FieldArray` 实现的动态列表管理：
1. **动态添加**：提供两个按钮分别添加赋值模式和声明模式的行
2. **动态删除**：每行都支持独立的删除操作
3. **状态管理**：使用 `FieldArray` 管理整个列表的状态
4. **组件复用**：每行都复用 `AssignRow` 组件
#### 组件工作流程
```mermaid
graph TD
A[AssignRows 组件] --> B[FieldArray 包装]
B --> C[渲染现有行列表]
C --> D[每行使用 AssignRow]
D --> E[支持 onChange 和 onDelete]
B --> F[添加按钮区域]
F --> G[赋值按钮]
F --> H[声明按钮]
G --> I[添加赋值行]
H --> J[添加声明行]
I --> K[调用 field.append]
J --> K
E --> L[调用 field.remove]
```
### 依赖梳理
#### flowgram API
[**@flowgram.ai/editor**](https://github.com/bytedance/flowgram.ai/tree/main/packages/client/editor)
- `FieldArray`: 表单数组字段组件，用于管理动态列表
- `FieldArrayRenderProps`: FieldArray 渲染属性类型
#### 其他物料
[**AssignRow**](./assign-row)
- `AssignRow`: 赋值行组件，处理单行逻辑
- `AssignValueType`: 赋值行值类型定义
#### 第三方库
[**Semi Design**](https://semi.design/zh-CN/)
- `Button`: 按钮组件
- `IconPlus`: 加号图标
---
url: /materials/components/batch-outputs.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/components/batch-outputs';
# BatchOutputs
`BatchOutputs` 是一个用于配置循环输出的键值对编辑器组件。在循环节点场景中，它允许用户定义每次迭代需要收集的输出值，这些值最终会被聚合成数组。
**核心特性：**
- ➕ **动态添加/删除**：用户可以自由添加或删除输出键值对
- ✏️ **键名编辑**：为每个输出定义一个唯一的键名
- 🔗 **变量引用**：通过变量选择器引用循环体内可用的变量
- 👁️ **只读模式**：支持只读展示，适用于查看场景
:::warning
`BatchOutputs` 必须搭配 [batchOutputsPlugin](../form-plugins/batch-outputs-plugin) 使用才能正常工作。这是因为：
1. 组件负责 UI 交互，收集用户配置的输出键值对
2. 插件负责将配置转换为变量声明，并调整作用域链
:::
:::info{title="完整方案概览"}
实现一个完整的循环节点需要以下三个物料配合使用：
| 物料 | 类型 | 职责 |
|------|------|------|
| [BatchVariableSelector](./batch-variable-selector) | 组件 | 选择循环的数组数据源 |
| [provideBatchInputEffect](../effects/provide-batch-input) | 副作用 | 生成 `item` 和 `index` 局部变量 |
| **BatchOutputs** + [batchOutputsPlugin](../form-plugins/batch-outputs-plugin) | 组件 + 插件 | 配置循环输出并生成数组类型变量 |
:::
## 案例演示
### 基本使用
```tsx pure title="form-meta.tsx"
import { FormRenderProps, FlowNodeJSON, Field, FormMeta } from '@flowgram.ai/free-layout-editor';
import {
BatchOutputs,
BatchVariableSelector,
createBatchOutputsFormPlugin,
IFlowRefValue,
provideBatchInputEffect,
} from '@flowgram.ai/form-materials';
interface LoopNodeJSON extends FlowNodeJSON {
data: {
loopFor: IFlowRefValue;
};
}
export const LoopFormRender = ({ form }: FormRenderProps) => {
return (
<>
name="loopFor">
{({ field, fieldState }) => (
field.onChange({ type: 'ref', content: val })}
hasError={Object.keys(fieldState?.errors || {}).length > 0}
/>
)}
| undefined> name="loopOutputs">
{({ field, fieldState }) => (
field.onChange(val)}
hasError={Object.keys(fieldState?.errors || {}).length > 0}
/>
)}
);
};
export const formMeta: FormMeta = {
render: LoopFormRender,
effect: {
loopFor: provideBatchInputEffect,
},
plugins: [createBatchOutputsFormPlugin({ outputKey: 'loopOutputs', inferTargetKey: 'outputs' })],
};
```
:::info{title="关于 FormHeader、FormContent、FormItem"}
上述代码中的 `FormHeader`、`FormContent`、`FormItem` 是用户自定义的布局组件，用于统一表单样式。你可以根据项目需求自行实现或替换为其他 UI 组件。
:::
### 只读模式
通过设置 `readonly` 属性可以禁用编辑功能，适用于查看或预览场景：
```tsx pure
```
## API 参考
### BatchOutputs Props
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `value` | `Record` | - | 输出键值对对象，键为输出名称，值为变量引用 |
| `onChange` | `(value?: Record) => void` | - | 值变化时的回调函数 |
| `readonly` | `boolean` | `false` | 是否为只读模式 |
| `hasError` | `boolean` | `false` | 是否显示错误状态 |
| `style` | `React.CSSProperties` | - | 自定义样式 |
### 值类型说明
```typescript
type ValueType = Record;
interface IFlowRefValue {
type: 'ref';
content?: string[];
}
```
#### 值结构示例
```typescript
{
names: { type: 'ref', content: ['loop_1_locals', 'item', 'name'] },
ages: { type: 'ref', content: ['loop_1_locals', 'item', 'age'] },
scores: { type: 'ref', content: ['loop_1_locals', 'item', 'score'] },
}
```
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/batch-outputs
```
### 目录结构讲解
```
batch-outputs/
├── index.tsx # 主组件实现
├── types.ts # 类型定义
└── styles.css # 样式文件
```
### 核心实现说明
#### 组件结构
BatchOutputs 组件基于 `useObjectList` hook 实现动态列表管理，每一行包含：
- **Input**：用于编辑输出键名
- **InjectVariableSelector**：用于选择变量引用
- **Delete Button**：删除当前行
#### 数据流向
```mermaid
graph TD
A[BatchOutputs 组件] --> B[useObjectList Hook]
B --> C[list 状态]
B --> D[add 方法]
B --> E[updateKey 方法]
B --> F[updateValue 方法]
B --> G[remove 方法]
C --> H[渲染列表]
H --> I[Input 键名编辑]
H --> J[VariableSelector 变量选择]
H --> K[Delete 删除按钮]
D --> L[添加按钮]
I --> E
J --> F
K --> G
E --> M[onChange 回调]
F --> M
G --> M
M --> N[更新外部 value]
```
#### useObjectList Hook
`useObjectList` 是一个通用的动态对象列表管理 hook，核心功能：
1. **列表状态管理**：维护带有唯一 ID 的列表项
2. **双向同步**：在 `value` 属性变化时同步更新列表
3. **增删改操作**：提供 `add`、`remove`、`updateKey`、`updateValue` 方法
```typescript
interface UseObjectListOptions {
value?: Record;
onChange?: (value?: Record) => void;
}
interface UseObjectListReturn {
list: Array<{ id: string; key: string; value: T | undefined }>;
add: () => void;
remove: (id: string) => void;
updateKey: (id: string, newKey: string) => void;
updateValue: (id: string, newValue: T) => void;
}
const { list, add, updateKey, updateValue, remove } = useObjectList({
value,
onChange,
});
```
#### 完整数据流时序图
```mermaid
sequenceDiagram
participant User as 用户
participant UI as BatchOutputs 组件
participant Hook as useObjectList
participant Form as 表单系统
participant Plugin as batchOutputsPlugin
User->>UI: 点击添加按钮
UI->>Hook: 调用 add()
Hook->>Hook: 生成新的列表项（带唯一 ID）
Hook->>Form: 触发 onChange
Form->>Plugin: 表单值变化
Plugin->>Plugin: 生成变量声明
User->>UI: 编辑键名
UI->>Hook: 调用 updateKey(id, newKey)
Hook->>Form: 触发 onChange
Form->>Plugin: 表单值变化
Plugin->>Plugin: 更新变量声明
User->>UI: 选择变量
UI->>Hook: 调用 updateValue(id, refValue)
Hook->>Form: 触发 onChange
Form->>Plugin: 表单值变化
Plugin->>Plugin: 更新变量声明
```
### 依赖梳理
#### flowgram API
[**@flowgram.ai/editor**](https://github.com/bytedance/flowgram.ai/tree/main/packages/client/editor)
- [`I18n`](https://flowgram.ai/auto-docs/editor/modules/I18n): 国际化工具，用于按钮文案
#### 依赖的其他物料
[**useObjectList**](https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/hooks/use-object-list)
- 动态对象列表管理 hook，处理列表的增删改操作
[**InjectVariableSelector**](./variable-selector)
- 注入式变量选择器，用于选择变量引用
#### 第三方依赖
- `@douyinfe/semi-ui`: UI 组件库，使用 Button、Input 组件
- `@douyinfe/semi-icons`: 图标库，使用 IconDelete、IconPlus 图标
## 常见问题
### 为什么需要同时使用 BatchOutputs 组件和 batchOutputsPlugin？
这是关注点分离的设计：
| 角色 | 职责 |
|------|------|
| `BatchOutputs` 组件 | 提供 UI 交互，让用户配置输出键名和变量引用 |
| `batchOutputsPlugin` | 处理数据逻辑，将配置转换为变量声明并调整作用域链 |
单独使用组件只能收集数据，无法生成有效的输出变量；单独使用插件则没有 UI 来配置数据。
### BatchOutputs 与 InputsValues 的区别？
| 特性 | BatchOutputs | InputsValues |
|------|--------------|--------------|
| 用途 | 循环输出配置 | 节点输入配置 |
| 值类型 | `Record` | `IInputsValues` |
| 变量引用 | 只支持变量引用 | 支持常量和变量引用 |
| 适用场景 | Loop 节点的输出聚合 | 通用节点的输入参数 |
### 如何自定义变量选择器的过滤条件？
目前 `BatchOutputs` 内部使用 `InjectVariableSelector`，不支持自定义过滤条件。如果需要自定义，可以参考源码实现自己的组件：
```tsx
import { useObjectList } from '@flowgram.ai/form-materials';
import { VariableSelector } from '@flowgram.ai/form-materials';
function CustomBatchOutputs(props) {
const { list, add, updateKey, updateValue, remove } = useObjectList(props);
return (
{list.map((item) => (
updateKey(item.id, v)} />
updateValue(item.id, { type: 'ref', content: v })}
includeSchema={{ type: 'string' }}
/>
))}
Current value: {field.value}
Note: Value updates after clicking outside the input
)}
)
}
```
### 带占位符
```tsx pure title="form-meta.tsx"
const formMeta = {
render: () => (
<>
name="blur_input_placeholder" defaultValue="">
{({ field }) => (
<>
field.onChange(value)}
placeholder="This is an input field with placeholder"
/>
Current value: {field.value || 'Empty'}
)}
)
}
```
### 禁用状态
```tsx pure title="form-meta.tsx"
const formMeta = {
render: () => (
<>
name="blur_input_disabled" defaultValue="Disabled state text">
{({ field }) => (
field.onChange(value)} disabled />
)}
)
}
```
## API 参考
### 属性
| 属性名 | 类型 | 默认值 | 说明 |
| :--- | :--- | :--- | :--- |
| value | `string` | - | 输入框的值 |
| onChange | `(value: string, event?: React.FocusEvent) => void` | - | 失焦时触发的回调函数 |
| placeholder | `string` | - | 输入框占位符文本 |
| disabled | `boolean` | `false` | 是否禁用输入框 |
| ref | `React.RefObject` | - | 输入框的引用 |
| 其他属性 | 继承自 [Semi UI Input 组件](https://semi.design/zh-CN/input/input) | - | 支持 Semi UI Input 组件的所有其他属性 |
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials components/blur-input
```
### 目录结构讲解
```
components/blur-input/
└── index.tsx # 组件实现文件
```
### 核心实现说明
BlurInput 组件的核心实现非常简洁，主要包含以下几个部分：
1. **状态管理**：使用 `useState` 维护内部值状态，与传入的 `value` 属性解耦
2. **值同步**：使用 `useEffect` 在外部 `value` 变化时更新内部状态
3. **延迟更新**：在用户输入时只更新内部状态，仅在 `onBlur` 事件触发时才调用外部传入的 `onChange` 回调
这种实现方式确保了值的更新只在用户完成输入并点击外部区域时发生，有效减少了不必要的更新操作，特别适合需要进行表单验证或远程数据请求的场景。
### 依赖梳理
#### 第三方库
[**Semi UI Input 组件**](https://semi.design/zh-CN/input/input) 提供基础的输入框功能支持，BlurInput 组件继承了其所有属性并添加了失焦更新的特性。
---
url: /materials/effects/auto-rename-ref.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/effects/auto-rename-ref';
# autoRenameRef
autoRenameRef 是一个自动重命名引用效果，当表单字段的键名发生变化时，自动更新所有引用该字段的引用值和模板值。
*query 变量名变化时，自动重命名下游 inputs 中的引用*
## 案例演示
### 基本使用
```tsx pure title="form-meta.tsx"
import { autoRenameRefEffect } from '@flowgram.ai/form-materials';
const formMeta = {
effects: {
"inputsValues": autoRenameRefEffect,
},
render: () => (
<>
name="inputsValues">
{({ field }) => (
field.onChange(value)} />
)}
),
}
```
### 在复杂表单中使用
```tsx pure title="form-meta.tsx"
import { autoRenameRefEffect } from '@flowgram.ai/form-materials';
const formMeta = {
effects: {
// 为多个字段应用自动重命名效果
"inputsValues": autoRenameRefEffect,
"outputsValues": autoRenameRefEffect,
"config.data": autoRenameRefEffect,
},
render: () => (
<>
name="inputsValues"> {/* inputsValues 实现 */}
name="outputsValues"> {/* outputsValues 实现 */}
name="config.data"> {/* config.data 实现 */}
),
}
```
## API 介绍
### 支持的值类型
当指定 key 下对应的数据满足以下条件时，autoRenameEffect 的自动重命名才会被触发：
- **引用值 (ref)**：`{ type: 'ref', content: ['field', 'path'] }`
- **模板值 (template)**：`{ type: 'template', content: 'Hello {{user.name}}' }`
- **包含引用值和模板值的复杂结构**：
```json
{
"a": {
"type": "ref",
"content": ["start_0", "str"]
},
"b": {
"c": {
"type": "template",
"content": "Hello {{a}}"
}
}
}
```
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials effects/auto-rename-ref
```
### 核心流程
1. **监听重命名事件**：通过 `VariableFieldKeyRenameService` 监听字段键名变更
2. **遍历引用值**：查找所有引用值和模板值
3. **匹配键路径**：检查引用路径是否与变更前的路径匹配
4. **更新引用**：将匹配的引用路径更新为新的键路径
```mermaid
graph TD
A[监听重命名事件] --> B[renameService.onRename触发]
B --> C[遍历所有值 traverseRef]
C --> D{值类型判断}
D -->|ref类型| E[检查路径匹配
isKeyPathMatch]
D -->|template类型| F[检查模板路径匹配
遍历+isKeyPathMatch]
E -->|匹配| G[更新引用路径
value.content = newPath]
E -->|不匹配| I
F -->|匹配| H[替换模板内容
value.content.replace]
F -->|不匹配| I
G --> I[更新表单值
form.setValueIn]
H --> I
I --> J{还有值需要处理?}
J -->|是| C
J -->|否| K[完成]
style A fill:#e1f5fe
style K fill:#e8f5e8
style B fill:#fff3e0
style G fill:#ffebee
style H fill:#ffebee
```
### 使用到的核心 API
#### @flowgram.ai/variable-core
- `VariableFieldKeyRenameService`: 字段键名重命名监听
#### @flowgram.ai/node
- `DataEvent.onValueInit`: 值初始化事件
- `Effect`: 效果类型定义
#### FlowValueUtils
- `FlowValueUtils.getTemplateKeyPaths()`: 提取模板中的所有键路径
---
url: /materials/effects/listen-ref-value-change.md
---
# listenRefValueChange
监听引用**变量定义**的变化，并在变化时触发回调函数。
## 案例演示
import { BasicStory } from 'components/form-materials/effects/listen-ref-value-change';
### 基本使用
```tsx pure title="form-meta.tsx"
import { listenRefValueChange } from '@flowgram.ai/form-materials';
const formMeta = {
effect: {
'inputsValues.*': listenRefValueChange(({ name, variable, form }) => {
form.setValueIn(
`log`,
`${form.getValueIn(`log`) || ''}* ${name}: ${JSON.stringify(
variable?.toJSON() || {}
)} \n`
);
}),
},
render: () => (
<>
| undefined>
name="inputsValues"
defaultValue={{
a: {
type: 'ref',
content: ['start_0', 'str'],
},
}}
>
{({ field }) => (
field.onChange(value)} />
)}
name="log" defaultValue={'When variable value updated, log changes:\n'}>
{({ field }) => (
{field.value}
)}
),
}
```
## API 介绍
### listenRefValueChange
```typescript
listenRefValueChange(
cb: (props: EffectFuncProps & { variable?: BaseVariableField }) => void
): EffectOptions[]
```
#### 参数
| 参数 | 类型 | 描述 |
|------|------|------|
| `cb` | `(props: EffectFuncProps & { variable?: BaseVariableField }) => void` | 回调函数，当引用的值发生变化时触发 |
#### 回调函数参数
| 参数 | 类型 | 描述 |
|------|------|------|
| `name` | `string` | 字段名称 |
| `value` | `IFlowRefValue` | 引用值对象 |
| `form` | `IForm` | 表单实例 |
| `variable` | `BaseVariableField` | 引用指向的变量实例 |
### 支持值类型
- `IFlowRefValue`：引用类型值，包含 `type: 'ref'` 和 `content: string[]`
## 源码导读
import { SourceCode } from '@theme';
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials effects/listen-ref-value-change
```
### 目录结构
```
listen-ref-value-change/
└── index.ts # 主入口文件
```
### 工作原理
1. **监听值变化**：监听 `DataEvent.onValueInitOrChange` 事件
2. **类型检查**：检查值是否为 `ref` 类型
3. **路径跟踪**：使用 `trackByKeyPath` 跟踪引用路径，获取被引用的变量
4. **回调触发**：当引用的变量值发生变化时触发回调
### 使用到的 flowgram API
#### @flowgram.ai/variable-core
- `getNodeScope(context.node).available.trackByKeyPath`: 跟踪指定路径的值变化，当路径对应的值发生变化时触发回调。
---
url: /materials/effects/listen-ref-schema-change.md
---
# listenRefSchemaChange
监听引用变量类型的 json schema 变化，并在变化时触发回调函数。
## 案例演示
import { BasicStory } from 'components/form-materials/effects/listen-ref-schema-change';
### 基本使用
```tsx pure title="form-meta.tsx"
import { listenRefSchemaChange } from '@flowgram.ai/form-materials';
const formMeta = {
effect: {
'inputsValues.*': listenRefSchemaChange(({ name, schema, form, formValues }) => {
form.setValueIn(
`log`,
`${form.getValueIn(`log`) || ''}* ${name}: ${JSON.stringify(schema)} \n`
);
}),
},
render: () => (
<>
| undefined>
name="inputsValues"
defaultValue={{
a: {
type: 'ref',
content: ['start_0', 'str'],
},
}}
>
{({ field }) => (
field.onChange(value)} />
)}
name="log" defaultValue={'When schema updated, log changes:\n'}>
{({ field }) => (
{field.value}
)}
),
}
```
## API 介绍
### listenRefSchemaChange
```typescript
listenRefSchemaChange(
cb: (props: EffectFuncProps & { schema?: IJsonSchema }) => void
): EffectOptions[]
```
#### 参数
| 参数 | 类型 | 描述 |
|------|------|------|
| `cb` | `(props: EffectFuncProps & { schema?: IJsonSchema }) => void` | 回调函数，当引用的 schema 发生变化时触发 |
#### 回调函数参数
| 参数 | 类型 | 描述 |
|------|------|------|
| `name` | `string` | 字段名称 |
| `value` | `IFlowRefValue` | 引用值对象 |
| `form` | `IForm` | 表单实例 |
| `schema` | `IJsonSchema` | 转换后的 JSON Schema |
### 支持值类型
- `IFlowRefValue`：引用类型值，包含 `type: 'ref'` 和 `content: string[]`
## 源码导读
import { SourceCode } from '@theme';
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials effects/listen-ref-schema-change
```
### 目录结构
```
listen-ref-schema-change/
└── index.ts # 主入口文件
```
### 工作原理
1. **监听值变化**：监听 `DataEvent.onValueInitOrChange` 事件
2. **类型检查**：检查值是否为 `ref` 类型
3. **路径跟踪**：使用 `trackByKeyPath` 跟踪引用路径
4. **Schema 转换**：将 AST 类型转换为 JSON Schema
5. **回调触发**：当引用的类型发生变化时触发回调
### 使用到的 flowgram API
#### @flowgram.ai/variable-core
- `getNodeScope(context.node).available.trackByKeyPath`: 跟踪指定路径的值变化，当路径对应的值发生变化时触发回调。
#### @flowgram.ai/json-schema
- `JsonSchemaUtils.astToSchema`: 将 AST 类型节点转换为 JSON Schema 对象。
---
url: /materials/effects/provide-batch-input.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/effects/provide-batch-input';
# provideBatchInputEffect
`provideBatchInputEffect` 是一个表单副作用，专门用于循环节点场景。它能够将循环输入的数组变量解析为两个局部变量：
- **item**：当前迭代的数组元素，类型会根据输入数组的元素类型自动推导
- **index**：当前迭代的索引，类型为 number
**核心特性：**
- 🔄 **自动类型推导**：从数组类型自动推导出 `item` 的元素类型
- 🔒 **私有作用域**：生成的变量存储在节点私有作用域，仅当前节点及子节点可访问
- 🎯 **循环专用**：专为批处理/循环场景设计
这使得循环体内的子节点可以引用 `item` 和 `index` 变量，实现对数组元素的逐个处理。
:::info{title="完整方案概览"}
实现一个完整的循环节点需要以下三个物料配合使用：
| 物料 | 类型 | 职责 |
|------|------|------|
| [BatchVariableSelector](../components/batch-variable-selector) | 组件 | 选择循环的数组数据源 |
| **provideBatchInputEffect** | 副作用 | 生成 `item` 和 `index` 局部变量 |
| [BatchOutputs](../components/batch-outputs) + [batchOutputsPlugin](../form-plugins/batch-outputs-plugin) | 组件 + 插件 | 配置循环输出并生成数组类型变量 |
:::
## 案例演示
### 基本使用
:::tip
选择一个数组类型的变量后，`provideBatchInputEffect` 会自动生成 `item` 和 `index` 局部变量，可以在下方的变量选择器中看到这些变量。
:::
```tsx pure title="form-meta.tsx"
import { FormRenderProps, FlowNodeJSON, Field, FormMeta } from '@flowgram.ai/free-layout-editor';
import {
BatchOutputs,
BatchVariableSelector,
createBatchOutputsFormPlugin,
IFlowRefValue,
provideBatchInputEffect,
} from '@flowgram.ai/form-materials';
interface LoopNodeJSON extends FlowNodeJSON {
data: {
loopFor: IFlowRefValue;
};
}
export const LoopFormRender = ({ form }: FormRenderProps) => {
return (
<>
name="loopFor">
{({ field, fieldState }) => (
field.onChange({ type: 'ref', content: val })}
hasError={Object.keys(fieldState?.errors || {}).length > 0}
/>
)}
| undefined> name="loopOutputs">
{({ field, fieldState }) => (
field.onChange(val)}
hasError={Object.keys(fieldState?.errors || {}).length > 0}
/>
)}
);
};
export const formMeta: FormMeta = {
render: LoopFormRender,
effect: {
loopFor: provideBatchInputEffect,
},
plugins: [createBatchOutputsFormPlugin({ outputKey: 'loopOutputs', inferTargetKey: 'outputs' })],
};
```
:::info{title="关于 FormHeader、FormContent、FormItem"}
上述代码中的 `FormHeader`、`FormContent`、`FormItem` 是用户自定义的布局组件，用于统一表单样式。你可以根据项目需求自行实现或替换为其他 UI 组件。
:::
## API 参考
### provideBatchInputEffect
提供一个表单副作用，将循环输入的数组变量解析为 `item` 和 `index` 局部变量。
```typescript
import { provideBatchInputEffect } from '@flowgram.ai/form-materials';
const formMeta: FormMeta = {
effect: {
loopFor: provideBatchInputEffect,
},
};
```
#### 参数
该副作用内部使用 `createEffectFromVariableProvider` 创建，配置如下：
| 属性 | 值 | 说明 |
|------|------|------|
| `private` | `true` | 生成的变量存储在节点私有作用域 |
:::tip{title="关于 private 参数"}
设置 `private: true` 后，变量会存储在 `node.privateScope` 而非 `node.scope`。这意味着：
- 变量仅在当前节点及其子节点中可见
- 不会被父节点的下游节点访问
- 适用于循环场景中的临时迭代变量
详见：[节点私有作用域](../../guide/variable/concept#节点私有作用域)
:::
#### 返回值
- `EffectOptions[]`: 表单副作用选项数组，用于 `formMeta.effect` 配置
#### 生成的变量结构
副作用会在当前节点的**私有作用域**下创建一个变量 `${nodeId}_locals`，结构如下：
| 字段 | 类型 | 描述 |
|------|------|------|
| `item` | 根据数组元素类型推导 | 当前迭代的数组元素 |
| `index` | `number` | 当前迭代的索引 |
#### 生成的 AST 结构示例
假设循环输入变量路径为 `['start_0', 'list']`，生成的 AST 结构如下：
```typescript
{
kind: 'VariableDeclaration',
key: 'loop_1_locals',
meta: {
title: '循环节点',
icon: 'loop-icon'
},
type: {
kind: 'ObjectType',
properties: [
{
kind: 'Property',
key: 'item',
initializer: {
kind: 'EnumerateExpression',
enumerateFor: {
kind: 'KeyPathExpression',
keyPath: ['start_0', 'list']
}
}
},
{
kind: 'Property',
key: 'index',
type: { kind: 'NumberType' }
}
]
}
}
```
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials effects/provide-batch-input
```
### 目录结构讲解
```
provide-batch-input/
└── index.ts # 主实现文件，导出 provideBatchInputEffect 表单副作用
```
### 核心实现说明
#### 变量生成逻辑
`provideBatchInputEffect` 使用 [`createEffectFromVariableProvider`](../../guide/variable/variable-output) 工厂函数创建变量提供器。核心特点：
1. **私有变量**：设置 `private: true`，生成的变量仅在当前节点作用域内可见
2. **元素类型推导**：使用 `ASTFactory.createEnumerateExpression` 从数组类型推导出元素类型
3. **索引变量**：固定为 `number` 类型
#### 类型推导原理
`EnumerateExpression` 是变量引擎提供的表达式类型，用于从数组类型推导元素类型：
```mermaid
graph LR
A["Array<string>"] --> B[EnumerateExpression]
B --> C["string"]
D["Array<object>"] --> E[EnumerateExpression]
E --> F["object"]
```
当上游变量类型变化时，`item` 的类型会**自动联动更新**。
#### 变量生成流程时序图
```mermaid
sequenceDiagram
participant Form as 表单系统
participant Parser as parse函数
participant AST as ASTFactory
participant Node as 当前节点
Form->>Parser: 提供 IFlowRefValue 值
Parser->>Node: 获取节点信息
Node-->>Parser: 返回节点ID
Parser->>AST: 创建变量声明
Note over Parser: 键名: ${nodeId}_locals
Parser->>AST: 创建 Object 类型
Parser->>AST: 创建 item 属性
Note over AST: 使用 createEnumerateExpression
Note over AST: 从数组 keyPath 推导元素类型
Parser->>AST: 创建 index 属性
Note over AST: 固定为 number 类型
AST-->>Parser: 返回创建的变量声明
Parser-->>Form: 返回变量声明数组
```
#### 关键代码解析
```typescript
export const provideBatchInputEffect: EffectOptions[] = createEffectFromVariableProvider({
private: true,
parse: (value: IFlowRefValue, ctx) => [
ASTFactory.createVariableDeclaration({
key: `${ctx.node.id}_locals`,
meta: {
title: ctx.node.form?.getValueIn('title'),
icon: ctx.node.getNodeRegistry().info?.icon,
},
type: ASTFactory.createObject({
properties: [
ASTFactory.createProperty({
key: 'item',
initializer: ASTFactory.createEnumerateExpression({
enumerateFor: ASTFactory.createKeyPathExpression({
keyPath: value.content || [],
}),
}),
}),
ASTFactory.createProperty({
key: 'index',
type: ASTFactory.createNumber(),
}),
],
}),
}),
],
});
```
### 依赖梳理
#### flowgram API
[**@flowgram.ai/editor**](https://github.com/bytedance/flowgram.ai/tree/main/packages/client/editor)
- [`EffectOptions`](https://flowgram.ai/auto-docs/editor/types/EffectOptions): 表单副作用选项类型
- [`FlowNodeRegistry`](https://flowgram.ai/auto-docs/document/interfaces/FlowNodeRegistry-1): 节点注册类型定义
- [`createEffectFromVariableProvider`](../../guide/variable/variable-output): 从变量提供器创建表单副作用的工厂函数
[**@flowgram.ai/variable-core**](https://github.com/bytedance/flowgram.ai/tree/main/packages/variable-engine/variable-core)
- [`ASTFactory`](https://flowgram.ai/auto-docs/editor/modules/ASTFactory): AST 创建工厂，用于生成变量声明
- `ASTFactory.createEnumerateExpression`: 创建枚举表达式，用于从数组类型推导元素类型
- `ASTFactory.createKeyPathExpression`: 创建键路径表达式，用于引用变量路径
#### 依赖的其他物料
[**BatchVariableSelector**](../components/batch-variable-selector)
- 用于选择数组类型的变量，配合 `provideBatchInputEffect` 使用
## 常见问题
### 为什么 item 的类型能自动推导？
`provideBatchInputEffect` 使用 `ASTFactory.createEnumerateExpression` 创建 `item` 变量。`EnumerateExpression` 是一种特殊的表达式，它会：
1. 接收一个数组类型的变量引用（通过 `KeyPathExpression`）
2. 自动推导出数组的元素类型作为自己的返回类型
3. 当上游数组类型变化时，自动触发类型联动更新
详见：[变量概念 - 表达式](../../guide/variable/concept#表达式)
### 生成的变量为什么在变量选择器中看不到？
检查以下几点：
1. **作用域问题**：`provideBatchInputEffect` 生成的是私有变量（存储在 `node.privateScope`），只有当前节点及其子节点可以访问
2. **配置位置**：确保 `provideBatchInputEffect` 配置在正确的字段路径上
3. **组件配置**：如果使用 `BatchVariableSelector`，它会自动提供 `PrivateScopeProvider`；如果使用普通 `VariableSelector`，需要手动包裹 `PrivateScopeProvider`
### 如何自定义 item 和 index 的变量名？
目前 `provideBatchInputEffect` 不支持自定义变量名。如果需要自定义，可以参考源码实现，使用 `createEffectFromVariableProvider` 创建自己的副作用：
```typescript
import { createEffectFromVariableProvider, ASTFactory } from '@flowgram.ai/editor';
export const customBatchInputEffect = createEffectFromVariableProvider({
private: true,
parse: (value, ctx) => [
ASTFactory.createVariableDeclaration({
key: `${ctx.node.id}_locals`,
type: ASTFactory.createObject({
properties: [
ASTFactory.createProperty({
key: 'currentItem',
initializer: ASTFactory.createEnumerateExpression({
enumerateFor: ASTFactory.createKeyPathExpression({
keyPath: value.content || [],
}),
}),
}),
ASTFactory.createProperty({
key: 'currentIndex',
type: ASTFactory.createNumber(),
}),
],
}),
}),
],
});
```
### 与 batchOutputsPlugin 的关系是什么？
| 物料 | 职责 | 生成的变量 |
|------|------|------|
| `provideBatchInputEffect` | 处理循环**输入** | `item`、`index`（私有变量） |
| `batchOutputsPlugin` | 处理循环**输出** | 用户配置的输出键（公共变量，数组类型） |
两者配合使用，形成完整的循环节点变量逻辑：
```mermaid
graph LR
A[数组输入] --> B[provideBatchInputEffect]
B --> C[item, index]
C --> D[子节点处理]
D --> E[BatchOutputs 配置]
E --> F[batchOutputsPlugin]
F --> G[数组输出]
```
## 相关物料
- [BatchVariableSelector](../components/batch-variable-selector): 数组变量选择器，用于选择循环输入
- [BatchOutputs](../components/batch-outputs): 循环输出配置组件
- [batchOutputsPlugin](../form-plugins/batch-outputs-plugin): 循环输出插件，处理作用域链和类型推导
---
url: /materials/effects/provide-json-schema-outputs.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/effects/provide-json-schema-output';
# provideJsonSchemaOutputs
provideJsonSchemaOutputs 是一个表单副作用，用于将 JSON Schema 定义转换为 FlowGram 变量引擎中的输出变量。
它能够自动将表单中定义的 JSON Schema 结构解析为变量声明，使工作流中的其他节点可以引用这些输出。
## 案例演示
### 基本使用
:::tip
`provideJsonSchemaOutputs` 通常结合 [`syncVariableTitle`](./sync-variable-title) 使用，保证变量能**实时同步节点的标题**。
:::
```tsx pure title="form-meta.tsx"
import { JsonSchemaEditor, provideJsonSchemaOutputs, syncVariableTitle } from '@flowgram.ai/form-materials';
import { Field } from '@flowgram.ai/free-layout-editor';
const formMeta = {
render: () => (
<>
name="outputs"
defaultValue={{
type: 'object',
properties: {
name: { type: 'string' },
age: { type: 'number' },
},
}}
>
{({ field }) => (
field.onChange(value)} />
)}
),
effect: {
// 同步标题到变量
title: syncVariableTitle,
// 将 JSON Schema 转换为输出变量
outputs: provideJsonSchemaOutputs,
},
}
```
## API 参考
### provideJsonSchemaOutputs
提供一个表单副作用，将 JSON Schema 转换为工作流输出变量。
#### 参数
- 无直接参数，作为表单副作用直接使用在 formMeta.effect 中
#### 返回值
- `EffectOptions[]`: 表单副作用选项数组，用于 formMeta.effect 配置
#### 工作原理
该表单副作用会：
1. 获取表单中定义的 JSON Schema 值
2. 将 Schema 转换为 FlowGram 的 AST 类型
3. 创建变量声明，键名为当前节点 ID
4. 设置变量的元数据（标题、图标等）
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials effects/provide-json-schema-outputs
```
### 目录结构讲解
```
provide-json-schema-outputs/
└── index.ts # 主实现文件，导出 provideJsonSchemaOutputs 表单副作用
```
### 核心实现说明
#### 变量生成逻辑
provideJsonSchemaOutputs 使用 [`createEffectFromVariableProvider`](/guide/variable/variable-output) 工厂函数创建变量提供器。副作用内使用 `JsonSchemaUtils.schemaToAST` 函数将表单中填写的 JSON Schema 转换为 AST。
:::tip
`JsonSchemaUtils.schemaToAST` 递归解析 json schema 生成 AST，源码见 [utils.ts](https://github.com/bytedance/flowgram.ai/blob/main/packages/variable-engine/json-schema/src/json-schema/utils.ts)
:::
变量生成流程时序图：
```mermaid
sequenceDiagram
participant Form as 表单系统
participant Parser as parse函数
participant AST as ASTFactory
participant Node as 当前节点
participant SchemaUtils as JsonSchemaUtils
Form->>Parser: 提供JSON Schema值
Parser->>Node: 获取节点信息
Node-->>Parser: 返回节点ID和注册表
Parser->>SchemaUtils: 调用schemaToAST转换类型
SchemaUtils-->>Parser: 返回转换后的AST类型
Parser->>AST: 创建变量声明
Parser->>Parser: 设置变量键名为节点ID
Parser->>Node: 获取表单标题
alt 表单有标题
Node-->>Parser: 返回表单标题
else 表单无标题
Node-->>Parser: 使用节点ID作为标题
end
Parser->>Node: 获取节点图标
Node-->>Parser: 返回节点图标
AST-->>Parser: 返回创建的变量声明
Parser-->>Form: 返回变量声明数组
```
### 依赖梳理
#### flowgram API
[**@flowgram.ai/json-schema**](https://github.com/bytedance/flowgram.ai/tree/main/packages/variable/json-schema)
- [`JsonSchemaUtils`](https://flowgram.ai/auto-docs/json-schema/modules/JsonSchemaUtils): JSON Schema 工具类，用于将 Schema 转换为 AST
- [`IJsonSchema`](https://flowgram.ai/auto-docs/json-schema/interfaces/IJsonSchema): JSON Schema 接口定义
[**@flowgram.ai/editor**](https://github.com/bytedance/flowgram.ai/tree/main/packages/client/editor)
- [`EffectOptions`](https://flowgram.ai/auto-docs/editor/types/EffectOptions): 表单副作用选项类型
- [`FlowNodeRegistry`](https://flowgram.ai/auto-docs/document/interfaces/FlowNodeRegistry-1): 节点注册类型定义
- [`createEffectFromVariableProvider`](/guide/variable/variable-output): 从变量提供器创建表单副作用的工厂函数
[**@flowgram.ai/variable-core**](https://github.com/bytedance/flowgram.ai/tree/main/packages/client/editor)
- [`ASTFactory`](https://flowgram.ai/auto-docs/editor/modules/ASTFactory): AST 创建工厂，用于生成变量声明
---
url: /materials/effects/sync-variable-title.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/effects/sync-variable-title';
# syncVariableTitle
syncVariableTitle 是一个表单副作用（Effect），用于同步节点的标题到该节点输出变量的元数据中。
当节点标题发生变化时，会自动更新所有输出变量的 title 和 icon 元数据。
| 引入前 | 引入后 |
| --- | --- |
| 
*变量中的节点标题变化时，无法自动同步到变量中* | 
*变量中的节点标题会自动同步* |
## 案例演示
### 基本使用
```tsx pure title="form-meta.tsx"
import { syncVariableTitle } from '@flowgram.ai/form-materials';
const formMeta = {
render: () => (
<>
Please Edit Title below to sync to variables:
name="title">
{({ field }) => (
field.onChange(value)} />
)}
),
effect: {
// Sync the title to variables
title: syncVariableTitle,
outputs: provideJsonSchemaOutputs,
},
}
```
## API 参考
### syncVariableTitle
提供一个表单副作用，用于同步节点的标题到该节点输出变量的元数据中。
#### 参数
- 无直接参数，作为表单副作用直接使用在 formMeta.effect 中
#### 返回值
- `EffectOptions[]`: 表单副作用选项数组，用于 formMeta.effect 配置
#### 工作原理
该表单副作用会：
1. 监听节点标题字段的 `onValueChange` 事件
2. 当标题发生变化时，获取节点的所有输出变量
3. 更新每个输出变量的元数据，包括标题和图标
4. 如果标题为空，则使用节点 ID 作为标题
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials effects/sync-variable-title
```
### 目录结构讲解
```
sync-variable-title/
└── index.ts # 主实现文件，导出 syncVariableTitle 表单副作用
```
### 同步逻辑
`syncVariableTitle` 通过注册 `DataEvent.onValueChange` 事件监听器，实现节点标题到变量元数据的实时同步。
### 依赖梳理
#### flowgram API
[**@flowgram.ai/editor**](https://github.com/bytedance/flowgram.ai/tree/main/packages/client/editor)
- [`DataEvent`](https://flowgram.ai/auto-docs/editor/enums/DataEvent): 数据事件枚举，用于监听值变化事件
- [`Effect`](https://flowgram.ai/auto-docs/editor/types/Effect): 副作用函数类型定义
- [`EffectOptions`](https://flowgram.ai/auto-docs/editor/interfaces/EffectOptions): 副作用配置选项接口
- [`FlowNodeRegistry`](https://flowgram.ai/auto-docs/document/interfaces/FlowNodeRegistry-1): 节点注册类型定义
- [`FlowNodeVariableData`](https://flowgram.ai/auto-docs/editor/classes/FlowNodeVariableData): 节点变量数据类，提供节点变量管理功能
---
url: /materials/effects/validate-when-variable-sync.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/effects/validate-when-variable-sync';
# validateWhenVariableSync
当字段可访问的变量发生了变化时，则重新触发指定**错误字段**的校验。
:::note{title="为什么是错误字段？"}
错误字段的**错误信息可能源于变量引用的有效性**。
如果字段的**可访问变量发生了变化，使得字段的变量引用从无效变为有效**，就需要需要重新校验当前字段，清空之前的错误信息。
:::
| 引入前 | 引入后 |
| --- | --- |
| 
*变量从无效变有效，错误信息还在* | 
*变量从无效变有效，错误信息自动清空* |
## 案例演示
### 基本使用
```tsx pure title="form-meta.tsx"
const formMeta = {
effect: {
value: validateWhenVariableSync(),
},
validate: {
value: ({ value, context }) =>
validateFlowValue(value, {
node: context.node,
errorMessages: {
unknownVariable: 'Unknown Variable',
},
}),
},
};
```
## API 参考
`validateWhenVariableSync(options?: { scope?: 'private' | 'public' })`
| 参数 | 类型 | 说明 | 默认值 | 是否必选 |
| --- | --- | --- | --- | --- |
| `options.scope` | `'private' \| 'public'` | 变量作用域类型，指定监听私有还是公共变量的变化 | - | 否 |
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials effects/validate-when-variable-sync
```
### 目录结构讲解
```
packages/materials/form-materials/src/effects/validate-when-variable-sync/
└── index.ts # 核心实现和导出
```
### 核心实现说明
该效果通过监听字段可访问的变量变化，当变量发生变化时自动触发错误字段的校验，确保当变量引用从无效变为有效时能及时清除错误信息。
主要流程：
1. 监听表单初始化事件 `DataEvent.onValueInit`
2. 根据配置获取对应的节点作用域（私有或公共）
3. 监听作用域中可用变量的变化事件 `available.onListOrAnyVarChange`
4. 当变量变化时，筛选出包含当前字段名称的错误字段
5. 对筛选出的错误字段重新进行校验
6. 返回清理函数以释放事件监听器
### 依赖梳理
#### flowgram API
[**@flowgram.ai/variable-core**](https://github.com/bytedance/flowgram.ai/tree/main/packages/variable-engine/variable-core)
- `scope.available.onListOrAnyVarChange`: 监听作用域中可用变量的变化事件
---
url: /materials/form-plugins/batch-outputs-plugin.md
---
import { SourceCode } from '@theme';
import { BasicStory, WithInferSchemaStory } from 'components/form-materials/form-plugins/batch-outputs-plugin';
# batchOutputsPlugin
`batchOutputsPlugin` 是一个用于循环节点的表单插件，它实现了两个核心功能：
1. **输出变量生成**：将循环体内收集的变量引用转换为数组类型的输出变量
2. **作用域链转换**：调整变量作用域链，使循环节点的输出能正确依赖子节点的输出
**核心特性：**
- 🔄 **数组包装**：自动将循环体内引用的变量包装为数组类型输出
- 🔗 **作用域链调整**：让循环节点的输出变量能正确依赖子节点的输出
- 📊 **Schema 推导**：可选配置，自动推导输出变量的 JSON Schema
:::tip{title="适用场景"}
- **循环节点**：需要在每次迭代中收集数据并聚合成数组
- **批处理节点**：需要将多个子任务的结果汇总输出
- **任何包含子节点的容器节点**：需要从子节点收集输出变量
:::
:::warning
`BatchOutputs` 组件必须搭配 `batchOutputsPlugin` 使用才能正常工作。这是因为：
1. 组件负责 UI 交互，收集用户配置的输出键值对
2. 插件负责将配置转换为变量声明，并调整作用域链
:::
:::info{title="完整方案概览"}
实现一个完整的循环节点需要以下三个物料配合使用：
| 物料 | 类型 | 职责 |
|------|------|------|
| [BatchVariableSelector](../components/batch-variable-selector) | 组件 | 选择循环的数组数据源 |
| [provideBatchInputEffect](../effects/provide-batch-input) | 副作用 | 生成 `item` 和 `index` 局部变量 |
| [BatchOutputs](../components/batch-outputs) + **batchOutputsPlugin** | 组件 + 插件 | 配置循环输出并生成数组类型变量 |
:::
## 案例演示
### 基本使用
:::tip
点开 demo 右上角的 Debug 面板，查看生成的输出变量和传到后端的 JSON 数据
:::
```tsx pure title="form-meta.tsx"
import { FormRenderProps, FlowNodeJSON, Field, FormMeta } from '@flowgram.ai/free-layout-editor';
import {
BatchOutputs,
BatchVariableSelector,
createBatchOutputsFormPlugin,
IFlowRefValue,
provideBatchInputEffect,
} from '@flowgram.ai/form-materials';
interface LoopNodeJSON extends FlowNodeJSON {
data: {
loopFor: IFlowRefValue;
};
}
export const LoopFormRender = ({ form }: FormRenderProps) => {
return (
<>
name="loopFor">
{({ field, fieldState }) => (
field.onChange({ type: 'ref', content: val })}
hasError={Object.keys(fieldState?.errors || {}).length > 0}
/>
)}
| undefined> name="loopOutputs">
{({ field, fieldState }) => (
field.onChange(val)}
hasError={Object.keys(fieldState?.errors || {}).length > 0}
/>
)}
);
};
export const formMeta: FormMeta = {
render: LoopFormRender,
effect: {
loopFor: provideBatchInputEffect,
},
plugins: [createBatchOutputsFormPlugin({ outputKey: 'loopOutputs', inferTargetKey: 'outputs' })],
};
```
:::info{title="关于 FormHeader、FormContent、FormItem"}
上述代码中的 `FormHeader`、`FormContent`、`FormItem` 是用户自定义的布局组件，用于统一表单样式。你可以根据项目需求自行实现或替换为其他 UI 组件。
:::
### 配合 Schema 推导
当配置了 `inferTargetKey` 参数时，插件会在表单提交时自动推导输出变量的 JSON Schema，并存储到指定字段。
## API 参考
### createBatchOutputsFormPlugin
创建批处理输出插件的工厂函数。
```typescript
function createBatchOutputsFormPlugin(options: {
outputKey: string;
inferTargetKey?: string;
}): FormPlugin;
```
| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `outputKey` | `string` | - | 表单中存储循环输出配置的字段路径 |
| `inferTargetKey` | `string` | - | 可选，推导的 JSON Schema 存储位置的字段路径 |
### provideBatchOutputsEffect
输出变量生成副作用，将 `Record` 格式的配置转换为数组类型的变量声明。
```typescript
import { provideBatchOutputsEffect } from '@flowgram.ai/form-materials';
const formMeta: FormMeta = {
effect: {
loopOutputs: provideBatchOutputsEffect,
},
};
```
:::tip
通常情况下，使用 `createBatchOutputsFormPlugin` 即可，它内部已经包含了 `provideBatchOutputsEffect`。只有在需要单独使用变量生成功能而不需要作用域链转换时，才需要直接使用此副作用。
:::
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials form-plugins/batch-outputs-plugin
```
### 目录结构讲解
```
batch-outputs-plugin/
└── index.ts # 插件完整实现，包含变量生成和作用域链转换逻辑
```
### 核心实现说明
#### 插件结构
`createBatchOutputsFormPlugin` 使用 `defineFormPluginCreator` 创建，包含两个核心生命周期：
1. **onSetupFormMeta**：配置表单元数据，注册副作用和提交格式化
2. **onInit**：初始化时注册作用域链转换器
#### 输出变量生成
`provideBatchOutputsEffect` 将 `Record` 转换为变量声明：
```mermaid
graph LR
A[loopOutputs 配置] --> B[provideBatchOutputsEffect]
B --> C[变量声明]
subgraph 转换过程
D["{ names: { type: 'ref', content: ['item', 'name'] } }"]
E["names: WrapArray(item.name)"]
D --> E
end
C --> F[输出: names 类型为 Array]
```
关键点：使用 `ASTFactory.createWrapArrayExpression` 将单个值类型包装为数组类型。
#### 作用域链转换
这是该插件最核心的功能，解决循环节点的变量作用域问题。
:::info{title="为什么需要作用域链转换？"}
在默认的作用域链逻辑中（参考[作用域链概念](../../guide/variable/concept#作用域链)）：
- 子节点的输出变量**不能**被父节点的下游节点访问
- 循环节点的输出变量**不能**依赖子节点的输出
但在循环场景中，我们需要：
- 循环节点的输出（如聚合的数组）能依赖子节点在每次迭代中产生的值
- 子节点的变量能"覆盖"到父循环节点的作用域
:::
下图展示了作用域链转换的工作原理：
```mermaid
graph TB
subgraph 默认作用域链
direction TB
A1[上游节点.scope] --> B1[循环节点.scope]
B1 --> C1[下游节点.scope]
B1 --> D1[子节点.scope]
D1 -.❌ 不可访问.-> C1
end
subgraph 转换后的作用域链
direction TB
A2[上游节点.scope] --> B2[循环节点.scope]
B2 --> C2[下游节点.scope]
B2 --> D2[子节点.scope]
D2 -.✅ 可覆盖.-> B2
B2 -.依赖.-> D2
end
```
转换器的两个核心方法：
| 方法 | 作用 | 说明 |
|------|------|------|
| `transformCovers` | 扩展覆盖作用域 | 让子节点的变量可以"覆盖"到父循环节点 |
| `transformDeps` | 调整依赖作用域 | 让循环节点的公共作用域依赖其子节点的作用域 |
```mermaid
sequenceDiagram
participant Loop as 循环节点
participant Child as 子节点
participant Transform as ScopeChainTransformService
Note over Loop,Child: 问题：循环节点输出依赖子节点输出
Loop->>Transform: 注册转换器
Note over Transform: transformCovers（覆盖关系）
Child->>Transform: 子节点查询覆盖作用域
Transform-->>Child: 返回 [父循环节点作用域]
Note over Child: 子节点变量可覆盖父循环节点
Note over Transform: transformDeps（依赖关系）
Loop->>Transform: 循环节点查询依赖作用域
Transform-->>Loop: 返回 [私有作用域, ...子节点作用域]
Note over Loop: 循环节点输出依赖子节点输出
```
#### 关键代码解析
**1. 变量生成逻辑**
```typescript
export const provideBatchOutputsEffect: EffectOptions[] = createEffectFromVariableProvider({
parse: (value: Record, ctx) => [
ASTFactory.createVariableDeclaration({
key: `${ctx.node.id}`,
type: ASTFactory.createObject({
properties: Object.entries(value).map(([_key, value]) =>
ASTFactory.createProperty({
key: _key,
initializer: ASTFactory.createWrapArrayExpression({
wrapFor: ASTFactory.createKeyPathExpression({
keyPath: value?.content || [],
}),
}),
})
),
}),
}),
],
});
```
**2. 作用域链转换器**
```typescript
chainTransformService.registerTransformer(transformerId, {
transformCovers: (covers, ctx) => {
const node = ctx.scope.meta?.node;
if (node?.parent?.flowNodeType === batchNodeType) {
return [...covers, getNodeScope(node.parent)];
}
return covers;
},
transformDeps(scopes, ctx) {
const scopeMeta = ctx.scope.meta;
if (scopeMeta?.type === FlowNodeScopeType.private) {
return scopes;
}
const node = scopeMeta?.node;
if (node?.flowNodeType === batchNodeType) {
const childBlocks = node.blocks;
return [
getNodePrivateScope(node),
...childBlocks.map((_childBlock) => getNodeScope(_childBlock)),
];
}
return scopes;
},
});
```
**3. Schema 推导（可选）**
```typescript
if (inferTargetKey) {
addFormatOnSubmit((formData, ctx) => {
const outputVariable = getNodeScope(ctx.node).output.variables?.[0];
if (outputVariable?.type) {
set(formData, inferTargetKey, JsonSchemaUtils.astToSchema(outputVariable?.type));
}
return formData;
});
}
```
### 依赖梳理
#### flowgram API
[**@flowgram.ai/editor**](https://github.com/bytedance/flowgram.ai/tree/main/packages/client/editor)
- `defineFormPluginCreator`: 定义表单插件的工厂函数
- `EffectOptions`: 表单副作用选项类型
- `createEffectFromVariableProvider`: 从变量提供器创建表单副作用
- `FlowNodeRegistry`: 节点注册类型定义
- `FlowNodeScopeType`: 节点作用域类型枚举
- `getNodeScope`: 获取节点的公共作用域
- `getNodePrivateScope`: 获取节点的私有作用域
- `ScopeChainTransformService`: 作用域链转换服务
[**@flowgram.ai/variable-core**](https://github.com/bytedance/flowgram.ai/tree/main/packages/variable-engine/variable-core)
- `ASTFactory`: AST 创建工厂
- `ASTFactory.createWrapArrayExpression`: 创建数组包装表达式
[**@flowgram.ai/json-schema**](https://github.com/bytedance/flowgram.ai/tree/main/packages/variable-engine/json-schema)
- `JsonSchemaUtils.astToSchema`: 将 AST 转换为 JSON Schema
#### 依赖的其他物料
[**BatchOutputs**](../components/batch-outputs)
- 循环输出配置组件，用于收集输出键值对
[**BatchVariableSelector**](../components/batch-variable-selector)
- 数组变量选择器，用于选择循环输入
[**provideBatchInputEffect**](../effects/provide-batch-input)
- 循环输入副作用，生成 item 和 index 局部变量
## 常见问题
### 为什么需要同时使用 BatchOutputs 组件和 batchOutputsPlugin？
这是关注点分离的设计：
| 角色 | 职责 |
|------|------|
| `BatchOutputs` 组件 | 提供 UI 交互，让用户配置输出键名和变量引用 |
| `batchOutputsPlugin` | 处理数据逻辑，将配置转换为变量声明并调整作用域链 |
单独使用组件只能收集数据，无法生成有效的输出变量；单独使用插件则没有 UI 来配置数据。
### 什么时候需要配置 inferTargetKey？
当你需要将输出变量的类型信息持久化到表单数据中时（例如后端需要知道输出的 JSON Schema），配置 `inferTargetKey` 可以在表单提交时自动推导并存储 Schema。
### 如何与 provideBatchInputEffect 配合使用？
完整的循环节点通常这样配置：
```typescript
export const formMeta: FormMeta = {
render: LoopFormRender,
effect: {
loopFor: provideBatchInputEffect,
},
plugins: [
createBatchOutputsFormPlugin({
outputKey: 'loopOutputs',
inferTargetKey: 'outputs'
})
],
};
```
- `provideBatchInputEffect` 负责从循环输入数组生成 `item` 和 `index` 局部变量
- `batchOutputsPlugin` 负责将循环体内收集的变量聚合为数组输出
### 作用域链转换会影响其他节点吗？
不会。转换器通过 `batchNodeType` 精确匹配当前节点类型，只对该类型的节点生效。转换器 ID 也包含节点类型，避免重复注册。
## 相关物料
- [provideBatchInputEffect](../effects/provide-batch-input): 循环输入变量解析
- [BatchOutputs](../components/batch-outputs): 循环输出配置组件
- [BatchVariableSelector](../components/batch-variable-selector): 数组变量选择器
- [inferInputsPlugin](./infer-inputs-plugin): 输入参数 Schema 推导插件
---
url: /materials/form-plugins/infer-inputs-plugin.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/form-plugins/infer-inputs-plugin';
# inferInputsPlugin
`inferInputsPlugin`是一个用于**自动推断输入参数 JSON Schema 的表单插件**，它能**在数据传送到后端运行时前**，根据 IFlowValue 类型 (常量或变量引用) 自动生成对应的 JSON Schema 结构，为后端的运行时类型验证和后端接口提供类型信息。
*传到后端运行时时，inputs 字段的 JSON Schema 根据 inputsValues 中的值定义推导*
:::tip{title="适用场景"}
- **HTTP 节点**：推断请求头 (headers)、查询参数 (params) 的 Schema
- **代码节点**：推断代码输入参数的类型结构
- **函数调用节点**：推断函数参数的 Schema
- **任何接受动态输入的节点**：需要为后端提供输入类型信息
:::
## 案例演示
### 基本使用
### 基本使用
:::tip
点开 demo 右上角的 Debug 面板，查看传到后端的 JSON 数据
:::
推断 HTTP 请求的 headers 和 body 的 Schema:
```tsx pure title="form-meta.tsx"
import { createInferInputsPlugin, InputsValue, InputsValuesTree } from '@flowgram.ai/form-materials';
import { Field } from '@flowgram.ai/editor';
export const HttpFormRender = ({ form }) => {
return (
<>
> name="headersValues">
{({ field }) => (
field.onChange(val)}
/>
)}
> name="bodyValues">
{({ field }) => (
field.onChange(val)}
/>
)}
);
};
export const formMeta: FormMeta = {
render: HttpFormRender,
plugins: [
// 推断 headers 的 Schema
createInferInputsPlugin({
sourceKey: 'headersValues',
targetKey: 'headersSchema'
}),
// 推断 body 的 Schema
createInferInputsPlugin({
sourceKey: 'bodyValues',
targetKey: 'bodySchema'
})
],
};
```
## API 参考
```typescript
function createInferInputsPlugin(options: {
sourceKey: string;
targetKey: string;
scope?: 'private' | 'public';
ignoreConstantSchema?: boolean;
}): FormPlugin;
```
| 属性名 | 类型 | 默认值 | 说明 |
| :--- | :--- | :--- | :--- |
| sourceKey | `string` | - | 表单中存储输入值的字段路径，值类型为包含 IFlowValue 的对象或数组 |
| targetKey | `string` | - | 推断的 JSON Schema 存储位置的字段路径 |
| scope | `'private' \| 'public'` | `public` | 指定用于变量解析的作用域类型 |
| ignoreConstantSchema | `boolean` | `false` | 是否在提交时剥离常量值的 Schema(仅保留变量引用的 Schema) |
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials form-plugins/infer-inputs-plugin
```
### 目录结构讲解
```plaintext
infer-inputs-plugin/
└── index.tsx # 插件完整实现，包含 Schema 推断和双向转换逻辑
```
### 核心实现说明
`inferInputsPlugin` 的核心功能是从 IFlowValue 对象推断 JSON Schema。对于常量值，直接使用其 `schema` 字段；对于变量引用，从作用域中查询变量类型；对于表达式和模板，推断为相应的基础类型。插件还支持 `ignoreConstantSchema` 优化，在提交时剥离常量 Schema，在初始化时自动恢复。
#### 工作流程时序图
```mermaid
sequenceDiagram
participant Form as 表单
participant Plugin as inferInputsPlugin
participant Scope as 变量作用域
participant Backend as 后端
Note over Form: 表单提交
Form->>Plugin: onSubmit 触发
Plugin->>Plugin: 读取 sourceKey 数据
loop 遍历每个 IFlowValue
alt 类型为 constant
Plugin->>Plugin: 使用 value.schema
opt ignoreConstantSchema = true
Plugin->>Plugin: 剥离 schema
end
else 类型为 ref
Plugin->>Scope: 查询变量类型
Scope->>Plugin: 返回变量 Schema
else 类型为 expression/template
Plugin->>Plugin: 推断为 any/string 类型
end
end
Plugin->>Plugin: 合并所有 Schema
Plugin->>Form: 设置到 targetKey
Form->>Backend: 提交包含 Schema 的数据
Note over Form: 表单初始化
Backend->>Form: 返回数据(可能缺少常量 Schema)
Form->>Plugin: onInit 触发
opt ignoreConstantSchema = true
Plugin->>Plugin: 从 sourceKey 恢复常量 Schema
Plugin->>Form: 更新 targetKey
end
```
核心功能特点：
1. **自动 Schema 推断**：扫描表单数据中的 IFlowValue 对象，自动推断其 JSON Schema
2. **变量类型解析**：对于变量引用，从作用域中解析变量的实际类型
3. **常量 Schema 优化**：可选地在提交时剥离常量的 Schema，减少后端数据负载
4. **双向转换**：在表单初始化时恢复 Schema，在表单提交时生成 Schema
### 依赖梳理
#### flowgram API
[**@flowgram.ai/editor**](https://github.com/bytedance/flowgram.ai/tree/main/packages/client/editor)
- `defineFormPluginCreator`: 定义表单插件的工厂函数
- `FormPlugin`: 表单插件类型定义
- `FormPluginSetupMetaCtx`: 插件设置上下文，提供 `addFormatOnInit`、`addFormatOnSubmit` 方法
[**@flowgram.ai/variable-core**](https://github.com/bytedance/flowgram.ai/tree/main/packages/variable-engine/variable-core)
[**@flowgram.ai/json-schema**](https://github.com/bytedance/flowgram.ai/tree/main/packages/variable-engine/json-schema)
- `IJsonSchema`: JSON Schema 类型定义
#### 依赖的其他物料
[**FlowValue**](../common/flow-value)
- `FlowValueUtils.inferJsonSchema()`: 推断 IFlowValue 的 JSON Schema
- `FlowValueUtils.traverse()`: 遍历嵌套的 FlowValue 结构
- `FlowValueUtils.isConstant()`, `FlowValueUtils.isRef()`: 类型判断工具
- `IFlowValue`: Flow 值的联合类型
- `IFlowConstantValue`: 常量类型，包含 `schema` 字段
- `IFlowRefValue`: 变量引用类型，包含变量路径
---
url: /materials/form-plugins/infer-assign-plugin.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/form-plugins/infer-assign-plugin';
# inferAssignPlugin
`inferAssignPlugin` 是用于变量赋值节点，进行输出变量自动推导的表单插件，通常和 [`AssignRows`](../components/assign-rows) 物料配合使用。
插件针对 `AssignRows` 的 `declare` (声明新变量) 实现了以下能力：
- 自动生成节点输出变量，变量名即 `declare` 操作符中的左值，变量类型会自动根据 `right` 进行联动推导。
- 当提交数据到后端时，自动根据输出变量的变量类型，联动生成对应的 JSON Schema。
## 案例演示
### 基本使用
:::tip
点开 demo 右上角的 Debug 面板，查看传到后端的 JSON 数据
:::
```tsx pure title="form-meta.tsx"
import { createInferAssignPlugin, AssignRows, DisplayOutputs } from '@flowgram.ai/form-materials';
export const VariableFormRender = ({ form }) => {
return (
<>
);
};
export const formMeta: FormMeta = {
render: VariableFormRender,
plugins: [
createInferAssignPlugin({
assignKey: 'assign',
outputKey: 'outputs'
})
],
};
```
## API 参考
```typescript
function createInferAssignPlugin(options: {
assignKey: string;
outputKey: string;
}): FormPlugin;
```
| 属性名 | 类型 | 默认值 | 说明 |
| :--- | :--- | :--- | :--- |
| assignKey | `string` | - | 表单中存储赋值操作数组的字段路径，值类型为 `AssignValueType[]` |
| outputKey | `string` | - | 输出 JSON Schema 的存储位置字段路径 |
## 源码导读
使用 CLI 命令可以复制源代码到本地:
```bash
npx @flowgram.ai/cli@latest materials form-plugins/infer-assign-plugin
```
### 目录结构讲解
```plaintext
infer-assign-plugin/
└── index.ts # 插件主入口，创建插件并导出
```
### 核心实现说明
```mermaid
sequenceDiagram
participant Form as 表单
participant Plugin as inferAssignPlugin
participant Provider as VariableProvider
participant Scope as 变量作用域
participant Runtime as 后端运行时
Form->>Plugin: onSetupFormMeta()
Plugin->>Form: 注册变量提供副作用
loop 遍历每个赋值操作
alt operator = 'declare'
Plugin->>Plugin: 生成变量声明 (left -> VariableDeclaration)
end
end
Plugin->>Provider: 提供变量到作用域
Provider->>Scope: 注册输出变量
Plugin-->>Runtime: 推导输出变量 JSON Schema
```
### 依赖梳理
#### flowgram API
[**@flowgram.ai/editor**](https://github.com/bytedance/flowgram.ai/tree/main/packages/client/editor)
- `defineFormPluginCreator`: 定义表单插件的工厂函数
- `FormPlugin`: 表单插件类型定义
- `FormPluginSetupMetaCtx`: 插件设置上下文，提供 `mergeEffect`、`addFormatOnSubmit` 方法
[**@flowgram.ai/variable-core**](https://github.com/bytedance/flowgram.ai/tree/main/packages/variable-engine/variable-core)
[**@flowgram.ai/json-schema**](https://github.com/bytedance/flowgram.ai/tree/main/packages/variable-engine/json-schema)
- `IJsonSchema`: JSON Schema 类型定义
#### 依赖的其他物料
[**FlowValue**](../common/flow-value)
- `FlowValueUtils.inferJsonSchema()`: 推断 IFlowValue 的 JSON Schema
- `FlowValueUtils.isConstant()`, `FlowValueUtils.isRef()`: 类型判断工具
- `IFlowValue`: Flow 值的联合类型
- `IFlowRefValue`: 变量引用类型
- `IFlowConstantValue`: 常量类型
---
url: /materials/validate/validate-flow-value.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/validate/validate-flow-value';
# validateFlowValue
validateFlowValue 是一个用于验证 [`FlowValue`](../common/flow-value) **必填性和变量引用有效性** 的验证函数。
## 案例演示
### 基本使用
```tsx pure title="form-meta.tsx"
import { validateFlowValue } from '@flowgram.ai/form-materials';
const formMeta = {
validate: {
dynamic_value_input: ({ value, context }) =>
validateFlowValue(value, {
node: context.node,
errorMessages: {
required: 'Value is required',
unknownVariable: 'Unknown Variable',
},
}),
required_dynamic_value_input: ({ value, context }) =>
validateFlowValue(value, {
node: context.node,
required: true,
errorMessages: {
required: 'Value is required',
unknownVariable: 'Unknown Variable',
},
}),
prompt_editor: ({ value, context }) =>
validateFlowValue(value, {
node: context.node,
required: true,
errorMessages: {
required: 'Prompt is required',
unknownVariable: 'Unknown Variable In Template',
},
}),
},
render: ({ form }) => (
<>
Validate variable valid
name="dynamic_value_input">
{({ field, fieldState }) => (
<>
field.onChange(value)}
/>
{fieldState.errors?.map((e) => e.message).join('\n')}
)}
Validate required value
name="required_dynamic_value_input">
{({ field, fieldState }) => (
<>
field.onChange(value)}
/>
{fieldState.errors?.map((e) => e.message).join('\n')}
)}
Validate required and variables valid in prompt
name="prompt_editor">
{({ field, fieldState }) => (
<>
field.onChange(value)}
/>
{fieldState.errors?.map((e) => e.message).join('\n')}
)}
),
};
```
## API 参考
### validateFlowValue 函数
```typescript
export function validateFlowValue(value: IFlowValue | undefined, ctx: Context): {
level: FeedbackLevel.Error;
message: string;
} | undefined;
```
#### 参数
| 参数名 | 类型 | 描述 |
|--------|------|------|
| `value` | `IFlowValue \| undefined` | 要验证的 FlowValue 值 |
| `ctx` | `Context` | 验证上下文 |
#### Context 接口
```typescript
interface Context {
node: FlowNodeEntity;
required?: boolean; // 是否必填
errorMessages?: {
required?: string; // 必填错误消息
unknownVariable?: string; // 未知变量错误消息
};
}
```
#### 返回值
- 如果验证通过，返回 `undefined`
- 如果验证失败，返回包含错误级别和错误消息的对象
### 支持的验证类型
1. **必填验证**：当 `required` 设置为 `true` 时，验证值是否存在且内容不为空
2. **引用变量验证**：对于 `ref` 类型的值，验证引用的变量是否存在
3. **模板变量验证**：对于 `template` 类型的值，验证模板中引用的所有变量是否存在
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials validate/validate-flow-value
```
### 目录结构讲解
```
validate-flow-value/
└── index.tsx # 主函数实现，包含 validateFlowValue 核心逻辑
```
### 核心实现说明
#### 必填验证逻辑
```typescript
if (required && (isNil(value) || isNil(value?.content) || value?.content === '')) {
return {
level: FeedbackLevel.Error,
message: requiredMessage,
};
}
```
#### 引用变量验证逻辑
```typescript
if (value?.type === 'ref') {
const variable = node.scope.available.getByKeyPath(value?.content || []);
if (!variable) {
return {
level: FeedbackLevel.Error,
message: unknownVariableMessage,
};
}
}
```
#### 模板内变量验证逻辑
```typescript
if (value?.type === 'template') {
const allRefs = FlowValueUtils.getTemplateKeyPaths(value);
for (const ref of allRefs) {
const variable = node.scope.available.getByKeyPath(ref);
if (!variable) {
return {
level: FeedbackLevel.Error,
message: unknownVariableMessage,
};
}
}
}
```
### 使用到的 flowgram API
[**@flowgram.ai/editor**](https://github.com/bytedance/flowgram.ai/tree/main/packages/client/editor)
- [`FeedbackLevel`](https://flowgram.ai/auto-docs/editor/enums/FeedbackLevel): 反馈级别枚举
### 依赖的其他物料
[**FlowValue**](../common/flow-value)
- `IFlowValue`: FlowValue 类型定义
- `FlowValueUtils`: FlowValue 工具类
- `getTemplateKeyPaths`: 从模板中提取所有变量引用路径的方法
### 第三方库
[**lodash-es**](https://lodash.com/)
- `isNil`: 检查值是否为 null 或 undefined
---
url: /materials/common/flow-value.md
---
import { SourceCode } from '@theme';
# FlowValue
FlowValue 是指在 Flowgram 官方物料库 中用于表示数据的一种特殊类型。它可以是常量、引用、表达式或模板，为流程中的数据传递和处理提供了灵活的方式。
## FlowValue 类型
FlowValue 支持以下四种类型：
### 1. 常量 (Constant)
固定值，在运行时不会改变。可以包含任意类型的数据，如字符串、数字、布尔值或对象。
```typescript
{
type: 'constant',
content: 'Hello World', // 可以是任意类型
schema?: { type: "string" }, // 可选的 JSON Schema 定义
extra?: { index: 1 } // 额外信息，如排序等
}
```
### 2. 引用 (Reference)
对流程中其他变量或数据的引用，通过路径数组来指定引用的位置。
```typescript
{
type: 'ref',
content: ['variable', 'name'], // 引用路径数组
extra?: { index: 1 } // 额外信息，如排序等
}
```
### 3. 模板 (Template)
包含变量占位符的字符串模板，使用 `{{variable}}` 语法来嵌入变量。
```typescript
{
type: 'template',
content: 'Hello {{user.name}}!', // 模板字符串
extra?: { index: 1 } // 额外信息，如排序等
}
```
### 4. WIP: 表达式 (Expression)
JavaScript 表达式，在运行时会进行求值计算。
```typescript
{
type: 'expression',
content: 'a + b', // JavaScript、Python 等表达式字符串
extra?: { index: 1 } // 额外信息，如排序等
}
```
::: warning
表达式类型当前为 WIP 状态，目前暂不支持类型推导能力，未来可能会有 breaking change。
:::
## FlowValueUtils 工具类
FlowValueUtils 提供了丰富的工具函数来处理 FlowValue：
### 类型判断函数
- `isConstant(value)` - 判断是否为常量类型
- `isRef(value)` - 判断是否为引用类型
- `isExpression(value)` - 判断是否为表达式类型
- `isTemplate(value)` - 判断是否为模板类型
- `isConstantOrRef(value)` - 判断是否为常量或引用类型
- `isFlowValue(value)` - 判断是否为有效的 FlowValue 类型
### 遍历和提取函数
- `traverse(value, options)` - 遍历对象中的所有 FlowValue，支持按类型筛选
- `getTemplateKeyPaths(templateValue)` - 提取模板中所有的变量路径
### Schema 推断函数
- `inferConstantJsonSchema(constantValue)` - 根据常量值推断 JSON Schema
- `inferJsonSchema(values, scope)` - 根据 FlowValue 推断对应的 JSON Schema
## 使用示例
### 使用工具函数
```typescript
// 类型判断
if (FlowValueUtils.isConstant(value)) {
console.log('This is a constant value:', value.content);
}
// 遍历 FlowValues
for (const { value, path } of FlowValueUtils.traverse(data, {
includeTypes: ['ref', 'template']
})) {
console.log(`Found ${value.type} at path: ${path}`);
}
// 提取模板变量
const templatePaths = FlowValueUtils.getTemplateKeyPaths(templateValue);
console.log('Template variables:', templatePaths); // [['user', 'name'], ['count']]
```
## 类型定义
FlowValue 的核心类型定义包括：
- `IFlowValue` - FlowValue 的联合类型
- `IFlowConstantValue` - 常量类型接口
- `IFlowRefValue` - 引用类型接口
- `IFlowExpressionValue` - 表达式类型接口
- `IFlowTemplateValue` - 模板类型接口
- `IFlowConstantRefValue` - 常量或引用类型的联合类型
- `IInputsValues` - 输入值的映射类型
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials shared/flow-value
```
### 目录结构讲解
```
flow-value/
├── index.ts # 主入口文件，导出所有类型和工具函数
├── types.ts # 类型定义文件，包含所有 FlowValue 接口定义
├── schema.ts # Zod 模式定义，用于运行时类型验证
├── utils.ts # FlowValueUtils 工具类的完整实现
└── README.md # 模块说明文档
```
### 使用到的第三方 API
- [Zod](https://v3.zod.dev/): 用于类型验证和数据解析，判断 FlowValue 的 Schema 是否符合预期。
---
url: /materials/common/json-schema-preset.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/common/json-schema-preset';
# 类型管理
物料库类型管理分为两部分实现：
1. **物料层**（物料库预设类型定义）：
- 扩展类型引擎，使其可以定义类型的默认渲染器、Condition 规则配置等
- 提供了默认类型在物料库中的预设定义（常量输入器渲染、Condition 规则配置等）
- 提供 Editor Plugin 方便扩展自定义类型
2. **引擎层**（核心类型引擎，由 `@flowgram.ai/json-schema` 提供）
- 提供了 Json 类型的基本定义，包括 icon，名称展示等
- 提供 BaseTypeManager，可以扩展 JsonSchema 官方定义之外的类型定义
- 提供 `JsonSchemaUtils` 实现 JsonSchema 和 AST 的互相转换
## 案例演示
### 增加 Color 类型
```tsx pure title="use-editor-props.tsx"
import { createTypePresetPlugin } from "@flowgram.ai/form-materials";
// ...
{
plugins: () => [
createTypePresetPlugin({
types: [
types: [
{
type: 'color',
icon: ,
label: 'Color',
ConstantRenderer: ({ value, onChange }) => (
onChange?.(_value.hex)}
/>
),
conditionRule: {
eq: { type: 'color' },
},
},
],
],
}),
],
}
// ...
```
### 获取类型定义
```tsx
const typeManager = useTypeManager();
// 根据 schema 获取类型定义
const type = typeManager.getTypeBySchema({ type: "color" });
const type2 = typeManager.getTypeBySchema({ type: "array", items: { type: "color" } });
// 根据类型名获取类型定义
const type3 = typeManager.getTypeByName("color");
```
## API
### createTypePresetPlugin
创建一个 Editor Plugin，用于扩展物料库预设类型定义，或者关闭某些物料库中预设的类型。
```typescript
function createTypePresetPlugin(options: TypePresetPluginOptions): Plugin;
interface TypePresetPluginOptions {
// 要添加的自定义类型定义数组
types?: TypePresetRegistry[];
// 要移除的类型名称数组
unregisterTypes?: string[];
}
interface TypePresetRegistry {
// 类型名称
type: string;
// 类型图标
icon?: React.ReactNode;
// 作为数组子项时的图标
arrayIcon?: React.ReactNode;
// 类型标签
label?: string;
// 常量渲染器组件
ConstantRenderer: React.FC;
// 条件规则配置
conditionRule?: IConditionRule | IConditionRuleFactory;
// 其他从基础类型继承的属性
}
interface ConstantRendererProps {
value?: Value;
onChange?: (value: Value) => void;
readonly?: boolean;
[key: string]: any;
}
```
## 源码导读
物料层源代码：
使用 CLI 命令可以复制物料层源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials plugins/json-schema-preset
```
引擎层源代码：
引擎层由于复杂度较高，因此目前需要通过单独的 `@flowgram.ai/json-schema` 包使用，不支持 CLI 命令下载源代码。
### 物料层核心逻辑
物料层新增的定义被以下物料使用：
- [ConstantInput](../components/constant-input): 获取类型对应的常量输入
- 源代码见：
- [ConditionContext](../components/condition-context)：获取类型对应的 Condition 规则
- 源代码见：
### 引擎层核心逻辑
#### JsonSchemaTypeManager 类结构
```mermaid
classDiagram
direction LR
class BaseTypeManager {
-getTypeNameFromSchema(typeSchema): string
+getTypeByName(typeName): Registry
+getTypeBySchema(type): Registry
+getDefaultTypeRegistry(): Registry
+getAllTypeRegistries(): Registry[]
+register(registry): void
+unregister(typeName): void
}
class JsonSchemaTypeManager {
+constructor()
+getTypeRegistriesWithParentType(parentType): Registry[]
+getTypeSchemaDeepChildField(type): Schema
+getComplexText(type): string
+getDisplayIcon(type): ReactNode
+getTypeSchemaProperties(type): Record
+getPropertiesParent(type): Schema
+getJsonPaths(type): string[]
+canAddField(type): boolean
+getDefaultValue(type): unknown
}
BaseTypeManager <|-- JsonSchemaTypeManager
class JsonSchemaTypeRegistry {
+type: string
+label: string
+icon: ReactNode
+container: boolean
+getJsonPaths(typeSchema): string[]
+getDisplayIcon(typeSchema): ReactNode
+getPropertiesParent(typeSchema): Schema
+canAddField(typeSchema): boolean
+getDefaultValue(): unknown
+getValueText(value): string
+getTypeSchemaProperties(typeSchema): Record
+getStringValueByTypeSchema(typeSchema): string
+getTypeSchemaByStringValue(optionValue): Schema
+getDefaultSchema(): Schema
+customComplexText(typeSchema): string
}
<> JsonSchemaTypeRegistry
JsonSchemaTypeManager --> JsonSchemaTypeRegistry: register
```
#### JsonSchemaTypeManager 功能概览
**核心功能**：
1. **类型注册与管理**
- `register(registry)`: 注册新的类型定义
- `unregister(typeName)`: 移除已注册的类型
- `getAllTypeRegistries()`: 获取所有已注册的类型
- `getTypeByName(typeName)`: 通过类型名称获取类型定义
- `getTypeBySchema(schema)`: 通过 schema 获取对应的类型定义
2. **类型信息获取**
- `getTypeNameFromSchema(schema)`: 从 schema 中提取类型名称
- `getTypeRegistriesWithParentType(parentType)`: 获取指定父类型下的所有类型
- `getTypeSchemaDeepChildField(type)`: 获取类型的最深层子字段
- `getComplexText(type)`: 获取类型的复杂文本表示（如 Array\）
- `getDisplayIcon(type)`: 获取类型的显示图标
3. **类型属性操作**
- `getTypeSchemaProperties(type)`: 获取类型的属性定义
- `getPropertiesParent(type)`: 获取属性的父节点
- `getJsonPaths(type)`: 获取类型在 flow schema 中的 json 路径
- `canAddField(type)`: 判断是否可以向类型添加字段
- `getDefaultValue(type)`: 获取类型的默认值
**初始化过程**：
在构造函数中，JsonSchemaTypeManager 会自动注册一系列默认类型定义：
- defaultTypeDefinitionRegistry: 默认类型定义
- stringRegistryCreator: 字符串类型
- integerRegistryCreator: 整数类型
- numberRegistryCreator: 数字类型
- booleanRegistryCreator: 布尔类型
- objectRegistryCreator: 对象类型
- arrayRegistryCreator: 数组类型
- unknownRegistryCreator: 未知类型
- mapRegistryCreator: 映射类型
- dateTimeRegistryCreator: 日期时间类型
---
url: /materials/common/inject-material.md
---
import { SourceCode } from '@theme';
# 物料组件依赖注入
:::tip{title="目前物料库中支持依赖注入的组件物料"}
- [InjectDynamicValueInput](../components/dynamic-value-input)
- [InjectTypeSelector](../components/type-selector)
- [InjectVariableSelector](../components/variable-selector)
:::
## 背景：为什么物料库需要依赖注入 ?
### ❌ 紧耦合：传统依赖问题
```mermaid
graph TD
A[物料 A] --> B[物料 B]
B --> D[物料 D]
C[物料 C] --> D
style D fill:#ff4757
style A fill:#ffa502
style B fill:#ffa502
style C fill:#ffa502
note["💥 问题：D变更导致A、B、C全部需要修改"]
```
**问题：** 连锁反应、高维护成本
### ✅ 解耦：依赖注入方案
```mermaid
graph TD
A[物料 A] --> RenderKey[物料 D RenderKey]
B[物料 B] --> RenderKey
C[物料 C] --> RenderKey
RenderKey -.-> BaseD[默认物料 D]
CustomD[自定义物料 D] -.-> RenderKey
style RenderKey fill:#3498db
style BaseD fill:#2ed573
style CustomD fill:#26d0ce
style A fill:#a55eea
style B fill:#a55eea
style C fill:#a55eea
note2["✅ A、B、C依赖抽象接口，与D实现解耦"]
```
**优势：** 热插拔、并行开发、版本兼容
## 使用方式
### 创建可注入的组件物料
```tsx
import { createInjectMaterial } from '@flowgram.ai/form-materials';
import { VariableSelector } from './VariableSelector';
// 使用 createInjectMaterial 高阶组件包装组件
const InjectVariableSelector = createInjectMaterial(VariableSelector);
// 现在你可以像使用普通组件一样使用它
function MyComponent() {
return ;
}
```
### 注册自定义组件
一个组件物料并创建为可注入的物料组件，当被其他物料使用时候，可以在 `use-editor-props.tsx` 中注入该物料的自定义渲染器：
```tsx
import { useEditorProps } from '@flowgram.ai/editor';
import { YourCustomVariableSelector } from './YourCustomVariableSelector';
import { VariableSelector } from '@flowgram.ai/form-materials';
function useCustomEditorProps() {
const editorProps = useEditorProps({
materials: {
components: {
// 默认使用组件的 Function Name 作为 renderKey
'VariableSelector': YourCustomVariableSelector,
'TypeSelector': YourCustomTypeSelector,
}
}
});
return editorProps;
}
```
### 使用自定义 renderKey
如果你的组件需要特定的 renderKey：
**方法 1：** 通过 createInjectMaterial 的第二个参数指定 renderKey
```tsx
const InjectCustomComponent = createInjectMaterial(MyComponent, {
renderKey: 'my-custom-key'
});
// 注册时
{
materials: {
components: {
'my-custom-key': MyCustomRenderer
}
}
}
```
**方法 2：** 或者直接设置组件的 renderKey 属性
```tsx
MyComponent.renderKey = 'my-custom-key';
const InjectCustomComponent = createInjectMaterial(MyComponent);
// 注册时
{
materials: {
components: {
[MyComponent.renderKey]: MyCustomRenderer
}
}
}
```
:::note{title="渲染键优先级"}
组件渲染键的确定遵循以下优先级顺序：
1. `params.renderKey` (createInjectMaterial 的第二个参数)
2. `Component.renderKey` (组件自身的 renderKey 属性)
3. `Component.name` (组件的显示名称)
4. 空字符串 (最终回退)
:::
## API 参考
```typescript
interface CreateInjectMaterialOptions {
renderKey?: string;
}
function createInjectMaterial(
Component: React.FC & { renderKey?: string },
params?: CreateInjectMaterialOptions
): React.FC
```
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials shared/inject-material
```
### 核心时序图
完整的组件注册和渲染时序图：
```mermaid
sequenceDiagram
participant App as 应用程序
participant Editor as use-editor-props
participant Registry as FlowRendererRegistry
participant Inject as InjectMaterial
participant Default as 默认组件
participant Custom as 自定义组件
Note over App,Custom: 组件注册阶段
App->>Editor: 调用 use-editor-props()
Editor->>Editor: 配置 materials.components
Editor->>Registry: 向 FlowRendererRegistry 注册组件
Registry->>Registry: 存储映射关系
Registry-->>App: 注册完成
Note over App,Custom: 组件渲染阶段
App->>Inject: 渲染 InjectMaterial 组件
Inject->>Registry: 查询渲染器 (getRendererComponent)
alt 存在自定义渲染器
Registry-->>Inject: 返回自定义 React 组件
Inject->>Custom: 使用自定义组件渲染
Custom-->>App: 渲染自定义 UI
else 无自定义渲染器
Registry-->>Inject: 返回 null 或类型不匹配
Inject->>Default: 使用默认组件渲染
Default-->>App: 渲染默认 UI
end
```
---
url: /materials/common/disable-declaration-plugin.md
---
import { SourceCode } from '@theme';
import { BasicStory } from 'components/form-materials/common/disable-declaration-plugin';
# DisableDeclarationPlugin
:::note{title=""}
在物料库的设计中，**“节点本身”作为一种变量声明，是可选的**。
物料库中 [`VariableSelector`](../components/variable-selector), [`PromptEditorWithVariables`](../components/prompt-editor-with-variables), [`SQLEditorWithVariables`](../components/sql-editor-with-variables) 等组件，都默认支持选择 **“节点变量”**。
:::
DisableDeclarationPlugin 可以**禁用变量声明的可选性（只能选下钻）**，从而使“节点变量”不可选。
## 案例演示
### 基本使用
```tsx pure title="use-editor-props.tsx"
import { createDisableDeclarationPlugin } from '@flowgram.ai/form-materials';
// ...
{
plugins: () => [createDisableDeclarationPlugin()],
}
// ...
```
## API
### createDisableDeclarationPlugin
用于创建禁用变量声明的插件。该插件会拦截变量引擎的事件，将所有变量声明标记为禁用状态。
```ts
export const createDisableDeclarationPlugin = definePluginCreator({...});
```
**参数**：无
**返回值**：一个插件实例，可直接添加到 Editor 的插件列表中。
## 源码导读
使用 CLI 命令可以复制源代码到本地：
```bash
npx @flowgram.ai/cli@latest materials plugins/disable-declaration-plugin
```
### 目录结构讲解
```plaintext
packages/materials/form-materials/src/plugins/disable-declaration-plugin/
└── create-disable-declaration-plugin.ts # 插件的主要实现文件
```
### 核心实现说明
DisableDeclarationPlugin 的核心实现非常简洁，主要包含以下步骤：
1. **初始化插件**：通过 `definePluginCreator` 创建插件，并在 `onInit` 钩子中获取变量引擎实例
2. **事件监听**：监听变量引擎的 `NewAST` 和 `UpdateAST` 事件
3. **处理逻辑**：当检测到变量声明类型 (`VariableDeclaration`) 的 AST 节点时，将其 `meta.disabled` 属性设置为 `true`
这种实现方式确保了所有新创建或更新的变量声明都会被自动禁用，从而在变量选择器等组件中不可选。
### 依赖梳理
#### flowgram API
[**@flowgram.ai/editor**](https://github.com/bytedance/flowgram.ai/tree/main/packages/client/editor)
- [`ASTMatch`](https://flowgram.ai/auto-docs/editor/modules/ASTMatch): 用于匹配和判断 AST 节点类型的工具类
- [`definePluginCreator`](https://flowgram.ai/auto-docs/core/functions/definePluginCreator): 定义插件创建器的函数
- [`GlobalEventActionType`](https://flowgram.ai/auto-docs/editor/interfaces/GlobalEventActionType): 全局事件动作的类型定义
- [`VariableEngine`](https://flowgram.ai/auto-docs/editor/classes/VariableEngine): 变量引擎，负责管理和处理变量相关的操作
---
url: /examples/index.md
---
---
url: /examples/playground.md
---
# 无限画布
PlaygroundReact 是固定布局和自由布局的底层模块，可以单独使用, 功能：
- 无限拖动画布
- 鼠标/触摸板手势缩放
- 内置背景插件
- 内置快捷键插件
import { InfiniteCanvasPreview } from '../../../components';
## 安装
```bash
npx @flowgram.ai/create-app@latest playground
```
## 源码
https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-playground
---
url: /examples/fixed-layout/fixed-layout-simple.md
---
# 基础用法
import { FixedLayoutSimplePreview } from '../../../../components';
## 安装
```bash
npx @flowgram.ai/create-app@latest fixed-layout-simple
```
## 源码
https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout-simple
---
url: /examples/fixed-layout/fixed-composite-nodes.md
---
# 复合节点
import { CompositeNodesPreview } from '../../../../components';
## 安装
```bash
npx @flowgram.ai/create-app@latest fixed-layout-simple
```
## 源码
- jsonData: https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout-simple/src/data
- nodeRegistries: https://github.com/bytedance/flowgram.ai/tree/main/packages/canvas-engine/fixed-layout-core/src/activities
---
url: /examples/fixed-layout/fixed-feature-overview.md
---
# 最佳实践
import { FixedFeatureOverview } from '../../../../components';
## 安装
```shell
npx @flowgram.ai/create-app@latest fixed-layout
```
## 源码
https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
## 项目概览
### 核心技术栈
- **前端框架**: React 18 + TypeScript
- **构建工具**: Rsbuild (基于 Rspack 的现代构建工具)
- **样式方案**: Less + Styled Components + CSS Variables
- **UI 组件库**: Semi Design (@douyinfe/semi-ui)
- **状态管理**: 基于 Flowgram 自研的编辑器框架
- **依赖注入**: Inversify
### 核心依赖包
- **@flowgram.ai/fixed-layout-editor**: 固定布局编辑器核心依赖
- **@flowgram.ai/fixed-semi-materials**: Semi Design 物料库
- **@flowgram.ai/form-materials**: 表单物料库
- **@flowgram.ai/group-plugin**: 分组插件
- **@flowgram.ai/minimap-plugin**: 缩略图插件
## 代码说明
```
src/
├── app.tsx # 应用入口组件
├── editor.tsx # 主编辑器组件
├── index.ts # 模块导出入口
├── initial-data.ts # 初始化数据配置
├── type.d.ts # 全局类型声明
│
├── assets/ # 静态资源
│ ├── icon-mouse.tsx # 鼠标图标组件
│ └── icon-pad.tsx # 触控板图标组件
│
├── components/ # 通用组件库
│ ├── index.ts # 组件导出入口
│ ├── node-list.tsx # 节点列表组件
│ │
│ ├── agent-adder/ # Agent 添加器组件
│ │ └── index.tsx
│ ├── agent-label/ # Agent 标签组件
│ │ └── index.tsx
│ ├── base-node/ # 基础节点组件
│ │ ├── index.tsx
│ │ └── styles.tsx
│ ├── branch-adder/ # 分支添加器组件
│ │ ├── index.tsx
│ │ └── styles.tsx
│ ├── drag-node/ # 拖拽节点组件
│ │ ├── index.tsx
│ │ └── styles.tsx
│ ├── node-adder/ # 节点添加器组件
│ │ ├── index.tsx
│ │ ├── styles.tsx
│ │ └── utils.ts
│ ├── selector-box-popover/ # 选择框弹出层组件
│ │ └── index.tsx
│ ├── sidebar/ # 侧边栏组件
│ │ ├── index.tsx
│ │ ├── sidebar-node-renderer.tsx
│ │ ├── sidebar-provider.tsx
│ │ └── sidebar-renderer.tsx
│ └── tools/ # 工具栏组件群
│ ├── index.tsx
│ ├── styles.tsx
│ ├── fit-view.tsx # 适应视图工具
│ ├── minimap-switch.tsx # 缩略图开关
│ ├── minimap.tsx # 缩略图组件
│ ├── readonly.tsx # 只读模式切换
│ ├── run.tsx # 运行工具
│ ├── save.tsx # 保存工具
│ ├── switch-vertical.tsx # 垂直布局切换
│ └── zoom-select.tsx # 缩放选择器
│
├── context/ # React Context 状态管理
│ ├── index.ts # Context 导出入口
│ ├── node-render-context.ts # 节点渲染上下文
│ └── sidebar-context.ts # 侧边栏上下文
│
├── form-components/ # 表单组件库
│ ├── index.ts # 表单组件导出入口
│ ├── feedback.tsx # 反馈组件
│ │
│ ├── form-content/ # 表单内容组件
│ │ ├── index.tsx
│ │ └── styles.tsx
│ ├── form-header/ # 表单头部组件
│ │ ├── index.tsx
│ │ ├── styles.tsx
│ │ ├── title-input.tsx
│ │ └── utils.tsx
│ ├── form-inputs/ # 表单输入组件
│ │ ├── index.tsx
│ │ └── styles.tsx
│ ├── form-item/ # 表单项组件
│ │ ├── index.css
│ │ └── index.tsx
│ ├── form-outputs/ # 表单输出组件
│ │ ├── index.tsx
│ │ └── styles.tsx
│ └── properties-edit/ # 属性编辑组件
│ ├── index.tsx
│ ├── property-edit.tsx
│ └── styles.tsx
│
├── hooks/ # 自定义 React Hooks
│ ├── index.ts # Hooks 导出入口
│ ├── use-editor-props.ts # 编辑器属性 Hook
│ ├── use-is-sidebar.ts # 侧边栏状态 Hook
│ └── use-node-render-context.ts # 节点渲染上下文 Hook
│
├── nodes/ # 流程节点定义
│ ├── index.ts # 节点注册表
│ ├── default-form-meta.tsx # 默认表单元数据
│ │
│ ├── agent/ # Agent 节点类型
│ │ ├── index.ts
│ │ ├── agent.ts
│ │ ├── agent-llm.ts
│ │ ├── agent-memory.ts
│ │ ├── agent-tools.ts
│ │ ├── memory.ts
│ │ └── tool.ts
│ ├── break-loop/ # 跳出循环节点
│ │ ├── index.ts
│ │ └── form-meta.tsx
│ ├── case/ # Case 分支节点
│ │ ├── index.ts
│ │ └── form-meta.tsx
│ ├── case-default/ # 默认 Case 节点
│ │ ├── index.ts
│ │ └── form-meta.tsx
│ ├── catch-block/ # 异常捕获块节点
│ │ ├── index.ts
│ │ └── form-meta.tsx
│ ├── end/ # 结束节点
│ │ ├── index.ts
│ │ └── form-meta.tsx
│ ├── if/ # 条件判断节点
│ │ └── index.ts
│ ├── if-block/ # 条件块节点
│ │ ├── index.ts
│ │ └── form-meta.tsx
│ ├── llm/ # LLM 节点
│ │ └── index.ts
│ ├── loop/ # 循环节点
│ │ ├── index.ts
│ │ └── form-meta.tsx
│ ├── start/ # 开始节点
│ │ ├── index.ts
│ │ └── form-meta.tsx
│ ├── switch/ # Switch 分支节点
│ │ └── index.ts
│ └── trycatch/ # Try-Catch 节点
│ ├── index.ts
│ └── form-meta.tsx
│
├── plugins/ # 插件系统
│ ├── index.ts # 插件导出入口
│ │
│ ├── clipboard-plugin/ # 剪贴板插件
│ │ └── create-clipboard-plugin.ts
│ ├── group-plugin/ # 分组插件
│ │ ├── index.ts
│ │ ├── group-box-header.tsx
│ │ ├── group-node.tsx
│ │ ├── group-note.tsx
│ │ ├── group-tools.tsx
│ │ ├── icons/
│ │ │ └── index.tsx
│ │ └── multilang-textarea-editor/
│ │ ├── index.css
│ │ ├── index.tsx
│ │ └── base-textarea.tsx
│ └── variable-panel-plugin/ # 变量面板插件
│ ├── index.ts
│ ├── variable-panel-layer.tsx
│ ├── variable-panel-plugin.ts
│ └── components/
│ ├── full-variable-list.tsx
│ ├── global-variable-editor.tsx
│ └── variable-panel.tsx
│
├── services/ # 服务层
│ ├── index.ts
│ └── custom-service.ts # 自定义服务
│
├── shortcuts/ # 快捷键系统
│ ├── index.ts
│ ├── constants.ts # 快捷键常量
│ └── utils.ts # 快捷键工具函数
│
└── typings/ # 类型定义
├── index.ts # 类型导出入口
├── json-schema.ts # JSON Schema 类型
└── node.ts # 节点类型定义
```
## 架构设计分析
### 整体架构模式
该项目采用了**分层架构**和**模块化设计**相结合的架构模式：
1. **表现层 (Presentation Layer)**
- 组件层：负责 UI 渲染和用户交互
- 工具层：提供编辑器工具功能
2. **业务逻辑层 (Business Logic Layer)**
- 节点系统：定义各种流程节点的行为和属性
- 插件系统：提供可扩展的功能模块
- 服务层：处理业务逻辑和数据操作
3. **数据层 (Data Layer)**
- Context 状态管理：管理应用全局状态
- 类型系统：确保数据结构的一致性
### 核心设计模式
#### 1. 提供者模式 (Provider Pattern)
```typescript
// 主编辑器组件使用多层 Provider 嵌套
```
**应用场景**:
- `FixedLayoutEditorProvider`: 提供编辑器核心功能和状态
- `SidebarProvider`: 管理侧边栏的显示状态和选中节点
#### 2. 注册表模式 (Registry Pattern)
```typescript
export const FlowNodeRegistries: FlowNodeRegistry[] = [
StartNodeRegistry,
EndNodeRegistry,
SwitchNodeRegistry,
LLMNodeRegistry,
// ... 更多节点类型
];
```
**设计优势**:
- 支持动态节点类型注册
- 易于扩展新的节点类型
- 实现了节点类型的解耦
#### 3. 插件模式 (Plugin Pattern)
```typescript
plugins: () => [
createMinimapPlugin({...}),
createGroupPlugin({...}),
createClipboardPlugin(),
createVariablePanelPlugin({}),
]
```
**插件系统特点**:
- **缩略图插件**: 提供画布缩略图功能
- **分组插件**: 支持节点分组管理
- **剪贴板插件**: 实现复制粘贴功能
- **变量面板插件**: 提供变量管理界面
#### 4. 工厂模式 (Factory Pattern)
在节点创建和配置中广泛使用：
```typescript
getNodeDefaultRegistry(type) {
return {
type,
meta: {
defaultExpanded: true,
},
};
}
```
#### 5. 观察者模式 (Observer Pattern)
通过历史记录系统实现：
```typescript
history: {
enable: true,
enableChangeNode: true,
onApply: debounce((ctx, opt) => {
console.log('auto save: ', ctx.document.toJSON());
}, 100),
}
```
#### 6. 策略模式 (Strategy Pattern)
在材料系统中体现：
```typescript
materials: {
components: {
...defaultFixedSemiMaterials,
[FlowRendererKey.ADDER]: NodeAdder,
[FlowRendererKey.BRANCH_ADDER]: BranchAdder,
// 可根据 key 替换不同的渲染策略
}
}
```
### 状态管理架构
#### Context 系统设计
项目采用了多个专用的 Context 来管理不同领域的状态：
1. **SidebarContext**: 管理侧边栏状态
```typescript
export const SidebarContext = React.createContext<{
visible: boolean;
nodeId?: string;
setNodeId: (node: string | undefined) => void;
}>({ visible: false, setNodeId: () => {} });
```
2. **NodeRenderContext**: 管理节点渲染相关状态
3. **IsSidebarContext**: 简单的布尔状态管理
#### 自定义 Hooks 设计
- `useEditorProps`: 集中管理编辑器的所有配置属性
- `useIsSidebar`: 判断当前是否在侧边栏环境中
- `useNodeRenderContext`: 获取节点渲染上下文
### 组件架构设计
#### 组件分层结构
1. **基础组件层**
- `BaseNode`: 所有节点的基础渲染组件
- `DragNode`: 拖拽状态下的节点组件
2. **功能组件层**
- 添加器组件: `NodeAdder`, `BranchAdder`, `AgentAdder`
- 工具组件: 缩放、保存、运行等功能组件
3. **容器组件层**
- `Sidebar`: 侧边栏容器及其子组件
- `Tools`: 工具栏容器
### 数据流架构
#### 初始数据结构
项目定义了完整的初始流程数据，包含多种节点类型的示例：
- **Start 节点**: 流程起始点，定义输出参数
- **Agent 节点**: 包含 LLM、Memory、Tools 子组件
- **LLM 节点**: 大语言模型处理节点
- **Switch 节点**: 条件分支节点
- **Loop 节点**: 循环处理节点
- **TryCatch 节点**: 异常处理节点
- **End 节点**: 流程结束点
#### 数据转换机制
```typescript
fromNodeJSON(node, json) {
return json; // 数据导入时的转换逻辑
},
toNodeJSON(node, json) {
return json; // 数据导出时的转换逻辑
}
```
---
url: /examples/free-layout/free-layout-simple.md
---
# 基础用法
import { FreeLayoutSimplePreview } from '../../../../components';
## 功能介绍
Free Layout 是 Flowgram.ai 提供的自由布局编辑器组件，允许用户创建和编辑流程图、工作流和各种节点连接图表。核心功能包括：
- 节点自由拖拽与定位
- 节点连接与边缘管理
- 可配置的节点注册与自定义渲染
- 内置撤销/重做历史记录
- 支持插件扩展（如缩略图、自动对齐等）
## 从零构建自由布局编辑器
本节将带你从零开始构建一个自由布局编辑器应用，完整演示如何使用 @flowgram.ai/free-layout-editor 包构建一个可交互的流程编辑器。
### 1. 环境准备
首先，我们需要创建一个新的项目：
```bash
# 使用脚手架快速创建项目
npx @flowgram.ai/create-app@latest free-layout-simple
# 进入项目目录
cd free-layout-simple
# 安装依赖
npm install
```
### 2. 项目结构
创建完成后，项目结构如下：
```
free-layout-simple/
├── src/
│ ├── components/ # 组件目录
│ │ ├── node-add-panel.tsx # 节点添加面板
│ │ ├── tools.tsx # 工具栏组件
│ │ └── minimap.tsx # 缩略图组件
│ ├── hooks/
│ │ └── use-editor-props.tsx # 编辑器配置
│ ├── initial-data.ts # 初始数据定义
│ ├── node-registries.ts # 节点类型注册
│ ├── editor.tsx # 编辑器主组件
│ ├── app.tsx # 应用入口
│ ├── index.tsx # 渲染入口
│ └── index.css # 样式文件
├── package.json
└── ...其他配置文件
```
### 3. 开发流程
#### 步骤一：定义初始数据
首先，我们需要定义画布的初始数据结构，包括节点和连线：
```tsx
// src/initial-data.ts
import { WorkflowJSON } from '@flowgram.ai/free-layout-editor';
export const initialData: WorkflowJSON = {
nodes: [
{
id: 'start_0',
type: 'start',
meta: {
position: { x: 0, y: 0 },
},
data: {
title: '开始节点',
content: '这是开始节点'
},
},
{
id: 'node_0',
type: 'custom',
meta: {
position: { x: 400, y: 0 },
},
data: {
title: '自定义节点',
content: '这是自定义节点'
},
},
{
id: 'end_0',
type: 'end',
meta: {
position: { x: 800, y: 0 },
},
data: {
title: '结束节点',
content: '这是结束节点'
},
},
],
edges: [
{
sourceNodeID: 'start_0',
targetNodeID: 'node_0',
},
{
sourceNodeID: 'node_0',
targetNodeID: 'end_0',
},
],
};
```
#### 步骤二：注册节点类型
接下来，我们需要定义不同类型节点的行为和外观：
```tsx
// src/node-registries.ts
import { WorkflowNodeRegistry } from '@flowgram.ai/free-layout-editor';
/**
* 你可以自定义节点的注册器
*/
export const nodeRegistries: WorkflowNodeRegistry[] = [
{
type: 'start',
meta: {
isStart: true, // 开始节点标记
deleteDisable: true, // 开始节点不能被删除
copyDisable: true, // 开始节点不能被 copy
defaultPorts: [{ type: 'output' }], // 定义 input 和 output 端口，开始节点只有 output 端口
},
},
{
type: 'end',
meta: {
deleteDisable: true,
copyDisable: true,
defaultPorts: [{ type: 'input' }], // 结束节点只有 input 端口
},
},
{
type: 'custom',
meta: {},
defaultPorts: [{ type: 'output' }, { type: 'input' }], // 普通节点有两个端口
},
];
```
#### 步骤三：创建编辑器配置
使用 React hook 封装编辑器配置：
```tsx
// src/hooks/use-editor-props.tsx
import { useMemo } from 'react';
import {
FreeLayoutProps,
WorkflowNodeProps,
WorkflowNodeRenderer,
Field,
useNodeRender,
} from '@flowgram.ai/free-layout-editor';
import { createMinimapPlugin } from '@flowgram.ai/minimap-plugin';
import { createFreeSnapPlugin } from '@flowgram.ai/free-snap-plugin';
import { nodeRegistries } from '../node-registries';
import { initialData } from '../initial-data';
export const useEditorProps = () =>
useMemo(
() => ({
// 启用背景网格
background: true,
// 非只读模式
readonly: false,
// 初始数据
initialData,
// 节点类型注册
nodeRegistries,
// 默认节点注册
getNodeDefaultRegistry(type) {
return {
type,
meta: {
defaultExpanded: true,
},
formMeta: {
// 节点表单渲染
render: () => (
<>
name="title">
{({ field }) => {field.value}
}
name="content">
),
},
};
},
// 节点渲染
materials: {
renderDefaultNode: (props: WorkflowNodeProps) => {
const { form } = useNodeRender();
return (
{form?.render()}
);
},
},
// 内容变更回调
onContentChange(ctx, event) {
console.log('数据变更: ', event, ctx.document.toJSON());
},
// 启用节点表单引擎
nodeEngine: {
enable: true,
},
// 启用历史记录
history: {
enable: true,
enableChangeNode: true, // 监听节点引擎数据变化
},
// 初始化回调
onInit: (ctx) => {},
// 渲染完成回调
onAllLayersRendered(ctx) {
ctx.document.fitView(false); // 适应视图
},
// 销毁回调
onDispose() {
console.log('编辑器已销毁');
},
// 插件配置
plugins: () => [
// 缩略图插件
createMinimapPlugin({
disableLayer: true,
canvasStyle: {
canvasWidth: 182,
canvasHeight: 102,
canvasPadding: 50,
canvasBackground: 'rgba(245, 245, 245, 1)',
canvasBorderRadius: 10,
viewportBackground: 'rgba(235, 235, 235, 1)',
viewportBorderRadius: 4,
viewportBorderColor: 'rgba(201, 201, 201, 1)',
viewportBorderWidth: 1,
viewportBorderDashLength: 2,
nodeColor: 'rgba(255, 255, 255, 1)',
nodeBorderRadius: 2,
nodeBorderWidth: 0.145,
nodeBorderColor: 'rgba(6, 7, 9, 0.10)',
overlayColor: 'rgba(255, 255, 255, 0)',
},
}),
// 自动对齐插件
createFreeSnapPlugin({
edgeColor: '#00B2B2',
alignColor: '#00B2B2',
edgeLineWidth: 1,
alignLineWidth: 1,
alignCrossWidth: 8,
}),
],
}),
[]
);
```
#### 步骤四：创建节点添加面板
```tsx
// src/components/node-add-panel.tsx
import React from 'react';
import { WorkflowDragService, useService } from '@flowgram.ai/free-layout-editor';
const nodeTypes = ['自定义节点1', '自定义节点2'];
export const NodeAddPanel: React.FC = () => {
const dragService = useService(WorkflowDragService);
return (
{nodeTypes.map(nodeType => (
dragService.startDragCard(nodeType, e, {
data: {
title: nodeType,
content: '拖拽创建的节点'
}
})}
>
{nodeType}
))}
{Math.floor(tools.zoom * 100)}%
);
};
// src/components/minimap.tsx
import { MinimapRender } from '@flowgram.ai/minimap-plugin';
export const Minimap = () => {
return (
);
};
```
#### 步骤六：组装编辑器主组件
```tsx
// src/editor.tsx
import { EditorRenderer, FreeLayoutEditorProvider } from '@flowgram.ai/free-layout-editor';
import { useEditorProps } from './hooks/use-editor-props';
import { Tools } from './components/tools';
import { NodeAddPanel } from './components/node-add-panel';
import { Minimap } from './components/minimap';
import '@flowgram.ai/free-layout-editor/index.css';
import './index.css';
export const Editor = () => {
const editorProps = useEditorProps();
return (
);
};
```
#### 步骤七：创建应用入口
```tsx
// src/app.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Editor } from './editor';
ReactDOM.render(, document.getElementById('root'))
```
#### 步骤八：添加样式
```css
/* src/index.css */
.demo-free-node {
display: flex;
min-width: 300px;
min-height: 100px;
flex-direction: column;
align-items: flex-start;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid var(--light-usage-border-color-border, rgba(28, 31, 35, 0.08));
background: #fff;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.demo-free-node-title {
background-color: #93bfe2;
width: 100%;
border-radius: 8px 8px 0 0;
padding: 4px 12px;
}
.demo-free-node-content {
padding: 4px 12px;
flex-grow: 1;
width: 100%;
}
.demo-free-node::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background-color: white;
border-radius: 7px;
}
.demo-free-node:hover:before {
-webkit-filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.1));
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.1));
}
.demo-free-node.activated:before,
.demo-free-node.selected:before {
outline: 2px solid var(--light-usage-primary-color-primary, #4d53e8);
-webkit-filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.1));
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.1));
}
.demo-free-sidebar {
height: 100%;
overflow-y: auto;
padding: 12px 16px 0;
box-sizing: border-box;
background: #f7f7fa;
border-right: 1px solid rgba(29, 28, 35, 0.08);
}
.demo-free-right-top-panel {
position: fixed;
right: 10px;
top: 70px;
width: 300px;
z-index: 999;
}
.demo-free-card {
width: 140px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 6px 8px 0 rgba(28, 31, 35, 0.03);
cursor: -webkit-grab;
cursor: grab;
line-height: 16px;
margin-bottom: 12px;
overflow: hidden;
padding: 16px;
position: relative;
color: black;
}
.demo-free-layout {
display: flex;
flex-direction: row;
flex-grow: 1;
}
.demo-free-editor {
flex-grow: 1;
position: relative;
height: 100%;
}
.demo-free-container {
position: absolute;
left: 0;
top: 0;
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
}
```
### 4. 运行项目
完成上述步骤后，你可以运行项目查看效果：
```bash
npm run dev
```
项目将在本地启动，通常访问 http://localhost:3000 即可看到效果。
## 核心概念
### 1. 数据结构
Free Layout 使用标准化的数据结构来描述节点和连接：
```tsx
// 工作流数据结构
const initialData: WorkflowJSON = {
// 节点定义
nodes: [
{
id: 'start_0', // 节点唯一ID
type: 'start', // 节点类型（对应 nodeRegistries 中的注册）
meta: {
position: { x: 0, y: 0 }, // 节点位置
},
data: {
title: 'Start', // 节点数据（可自定义）
content: 'Start content'
},
},
// 更多节点...
],
// 连线定义
edges: [
{
sourceNodeID: 'start_0', // 源节点ID
targetNodeID: 'node_0', // 目标节点ID
},
// 更多连线...
],
};
```
### 2. 节点注册
使用 `nodeRegistries` 定义不同类型节点的行为和外观：
```tsx
// 节点注册
import { WorkflowNodeRegistry } from '@flowgram.ai/free-layout-editor';
export const nodeRegistries: WorkflowNodeRegistry[] = [
// 开始节点定义
{
type: 'start',
meta: {
isStart: true, // Mark as start
deleteDisable: true, // The start node cannot be deleted
copyDisable: true, // The start node cannot be copied
defaultPorts: [{ type: 'output' }], // Used to define the input and output ports, the start node only has the output port
},
},
// 更多节点类型...
];
```
### 3. 编辑器组件
```tsx
// 核心编辑器容器与渲染器
import {
FreeLayoutEditorProvider,
EditorRenderer
} from '@flowgram.ai/free-layout-editor';
// 编辑器配置示例
const editorProps = {
background: true, // 启用背景网格
readonly: false, // 非只读模式，允许编辑
initialData: {...}, // 初始化数据：节点和边的定义
nodeRegistries: [...], // 节点类型注册
nodeEngine: {
enable: true, // 启用节点表单引擎
},
history: {
enable: true, // 启用历史记录
enableChangeNode: true, // 监听节点数据变化
}
};
// 完整编辑器渲染
{/* 节点添加面板 */}
{/* 核心编辑器渲染区域 */}
{/* 工具栏 */}
{/* 缩略图 */}
```
### 4. 核心钩子函数
在组件中可以使用多种钩子函数获取和操作编辑器：
```tsx
// 获取拖拽服务
const dragService = useService(WorkflowDragService);
// 开始拖拽节点
dragService.startDragCard('nodeType', event, { data: {...} });
// 获取编辑器上下文
const { document, playground } = useClientContext();
// 操作画布
document.fitView(); // 适应视图
playground.config.zoomin(); // 缩放画布
document.fromJSON(newData); // 更新数据
```
### 5. 插件扩展
Free Layout 支持通过插件机制扩展功能：
```tsx
plugins: () => [
// 缩略图插件
createMinimapPlugin({
canvasStyle: {
canvasWidth: 180,
canvasHeight: 100,
canvasBackground: 'rgba(245, 245, 245, 1)',
}
}),
// 自动对齐插件
createFreeSnapPlugin({
edgeColor: '#00B2B2', // 对齐线颜色
alignColor: '#00B2B2', // 辅助线颜色
edgeLineWidth: 1, // 线宽
}),
],
```
## 安装
```bash
npx @flowgram.ai/create-app@latest free-layout-simple
```
## 源码
https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-free-layout-simple
---
url: /examples/free-layout/free-feature-overview.md
---
# 最佳实践
import { FreeFeatureOverview } from '../../../../components';
## 安装
```shell
npx @flowgram.ai/create-app@latest free-layout
```
## 源码
https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-free-layout
## 项目概览
### 核心技术栈
- **前端框架**: React 18 + TypeScript
- **构建工具**: Rsbuild (基于 Rspack 的现代构建工具)
- **样式方案**: Less + Styled Components + CSS Variables
- **UI 组件库**: Semi Design (@douyinfe/semi-ui)
- **状态管理**: 基于 Flowgram 自研的编辑器框架
- **依赖注入**: Inversify
### 核心依赖包
- **@flowgram.ai/free-layout-editor**: 自由布局编辑器核心依赖
- **@flowgram.ai/free-snap-plugin**: 自动对齐及辅助线插件
- **@flowgram.ai/free-lines-plugin**: 连线渲染插件
- **@flowgram.ai/free-node-panel-plugin**: 节点添加面板渲染插件
- **@flowgram.ai/minimap-plugin**: 缩略图插件
- **@flowgram.ai/free-container-plugin**: 子画布插件
- **@flowgram.ai/free-group-plugin**: 分组插件
- **@flowgram.ai/form-materials**: 表单物料
- **@flowgram.ai/runtime-interface**: 运行时接口
- **@flowgram.ai/runtime-js**: js 运行时模块
- **@flowgram.ai/panel-manager-plugin**: 侧边栏面板管理
## 代码说明
### 目录结构
```
src/
├── app.tsx # 应用入口文件
├── editor.tsx # 编辑器主组件
├── initial-data.ts # 初始化数据配置
├── assets/ # 静态资源
├── components/ # 组件库
│ ├── index.ts
│ ├── add-node/ # 添加节点组件
│ ├── base-node/ # 基础节点组件
│ ├── comment/ # 注释组件
│ ├── group/ # 分组组件
│ ├── line-add-button/ # 连线添加按钮
│ ├── node-menu/ # 节点菜单
│ ├── node-panel/ # 节点添加面板
│ ├── selector-box-popover/ # 选择框弹窗
│ ├── sidebar/ # 侧边栏
│ ├── testrun/ # 测试运行组件
│ │ ├── hooks/ # 测试运行钩子
│ │ ├── node-status-bar/ # 节点状态栏
│ │ ├── testrun-button/ # 测试运行按钮
│ │ ├── testrun-form/ # 测试运行表单
│ │ ├── testrun-json-input/ # JSON输入组件
│ │ └── testrun-panel/ # 测试运行面板
│ └── tools/ # 工具组件
├── context/ # React Context
│ ├── node-render-context.ts # 当前渲染节点 Context
│ ├── sidebar-context # 侧边栏 Context
├── form-components/ # 表单组件库
│ ├── form-content/ # 表单内容
│ ├── form-header/ # 表单头部
│ ├── form-inputs/ # 表单输入
│ └── form-item/ # 表单项
│ └── feedback.tsx # 表单校验错误渲染
├── hooks/
│ ├── index.ts
│ ├── use-editor-props.tsx # 编辑器属性钩子
│ ├── use-is-sidebar.ts # 侧边栏状态钩子
│ ├── use-node-render-context.ts # 节点渲染上下文钩子
│ └── use-port-click.ts # 端口点击钩子
├── nodes/ # 节点定义
│ ├── index.ts
│ ├── constants.ts # 节点常量定义
│ ├── default-form-meta.ts # 默认表单元数据
│ ├── block-end/ # 块结束节点
│ ├── block-start/ # 块开始节点
│ ├── break/ # 中断节点
│ ├── code/ # 代码节点
│ ├── comment/ # 注释节点
│ ├── condition/ # 条件节点
│ ├── continue/ # 继续节点
│ ├── end/ # 结束节点
│ ├── group/ # 分组节点
│ ├── http/ # HTTP节点
│ ├── llm/ # LLM节点
│ ├── loop/ # 循环节点
│ ├── start/ # 开始节点
│ └── variable/ # 变量节点
├── plugins/ # 插件系统
│ ├── index.ts
│ ├── context-menu-plugin/ # 右键菜单插件
│ ├── runtime-plugin/ # 运行时插件
│ │ ├── client/ # 客户端
│ │ │ ├── browser-client/ # 浏览器客户端
│ │ │ └── server-client/ # 服务器客户端
│ │ └── runtime-service/ # 运行时服务
│ └── variable-panel-plugin/ # 变量面板插件
│ └── components/ # 变量面板组件
├── services/ # 服务层
│ ├── index.ts
│ └── custom-service.ts # 自定义服务
├── shortcuts/ # 快捷键系统
│ ├── index.ts
│ ├── constants.ts # 快捷键常量
│ ├── shortcuts.ts # 快捷键定义
│ ├── type.ts # 类型定义
│ ├── collapse/ # 折叠快捷键
│ ├── copy/ # 复制快捷键
│ ├── delete/ # 删除快捷键
│ ├── expand/ # 展开快捷键
│ ├── paste/ # 粘贴快捷键
│ ├── select-all/ # 全选快捷键
│ ├── zoom-in/ # 放大快捷键
│ └── zoom-out/ # 缩小快捷键
├── styles/ # 样式文件
├── typings/ # 类型定义
│ ├── index.ts
│ ├── json-schema.ts # JSON Schema类型
│ └── node.ts # 节点类型定义
└── utils/ # 工具函数
├── index.ts
└── on-drag-line-end.ts # 拖拽连线结束处理
```
### 关键目录功能说明
#### 1. `/components` - 组件库
- **base-node**: 所有节点的基础渲染组件
- **testrun**: 完整的测试运行功能模块，包含状态栏、表单、面板等
- **sidebar**: 侧边栏组件，提供工具和属性面板
- **node-panel**: 节点添加面板，支持拖拽添加新节点
#### 2. `/nodes` - 节点系统
每个节点类型都有独立的目录，包含：
- 节点注册信息 (`index.ts`)
- 表单元数据定义 (`form-meta.ts`)
- 节点特定的组件和逻辑
#### 3. `/plugins` - 插件系统
- **runtime-plugin**: 支持浏览器和服务器两种运行模式
- **context-menu-plugin**: 右键菜单功能
- **variable-panel-plugin**: 变量管理面板
#### 4. `/shortcuts` - 快捷键系统
完整的快捷键支持，包括：
- 基础操作：复制、粘贴、删除、全选
- 视图操作：放大、缩小、折叠、展开
- 每个快捷键都有独立的实现模块
## 应用架构设计
### 核心设计模式
#### 1. 插件化架构 (Plugin Architecture)
应用采用高度模块化的插件系统，每个功能都作为独立插件存在：
```typescript
plugins: () => [
createFreeLinesPlugin({ renderInsideLine: LineAddButton }),
createMinimapPlugin({ /* 配置 */ }),
createFreeSnapPlugin({ /* 对齐配置 */ }),
createFreeNodePanelPlugin({ renderer: NodePanel }),
createContainerNodePlugin({}),
createFreeGroupPlugin({ groupNodeRender: GroupNodeRender }),
createContextMenuPlugin({}),
createRuntimePlugin({ mode: 'browser' }),
createVariablePanelPlugin({})
]
```
#### 2. 节点注册系统 (Node Registry Pattern)
通过注册表模式管理不同类型的工作流节点：
```typescript
export const nodeRegistries: FlowNodeRegistry[] = [
ConditionNodeRegistry, // 条件节点
StartNodeRegistry, // 开始节点
EndNodeRegistry, // 结束节点
LLMNodeRegistry, // LLM节点
LoopNodeRegistry, // 循环节点
CommentNodeRegistry, // 注释节点
HTTPNodeRegistry, // HTTP节点
CodeNodeRegistry, // 代码节点
// ... 更多节点类型
];
```
#### 3. 依赖注入模式 (Dependency Injection)
使用 Inversify 框架实现服务的依赖注入：
```typescript
onBind: ({ bind }) => {
bind(CustomService).toSelf().inSingletonScope();
}
```
## 核心功能分析
### 1. 编辑器配置系统
`useEditorProps` 是整个编辑器的配置中心，包含：
```typescript
export function useEditorProps(
initialData: FlowDocumentJSON,
nodeRegistries: FlowNodeRegistry[]
): FreeLayoutProps {
return useMemo(() => ({
background: true, // 背景网格
readonly: false, // 是否只读
initialData, // 初始数据
nodeRegistries, // 节点注册表
// 核心功能配置
playground: { preventGlobalGesture: true /* 阻止 mac 浏览器手势翻页 */ },
nodeEngine: { enable: true },
variableEngine: { enable: true },
history: { enable: true, enableChangeNode: true },
// 业务逻辑配置
canAddLine: (ctx, fromPort, toPort) => { /* 连线规则 */ },
canDeleteLine: (ctx, line) => { /* 删除连线规则 */ },
canDeleteNode: (ctx, node) => { /* 删除节点规则 */ },
canDropToNode: (ctx, params) => { /* 拖拽规则 */ },
// 插件配置
plugins: () => [/* 插件列表 */],
// 事件处理
onContentChange: debounce((ctx, event) => { /* 自动保存 */ }, 1000),
onInit: (ctx) => { /* 初始化 */ },
onAllLayersRendered: (ctx) => { /* 渲染完成 */ }
}), []);
}
```
### 2. 节点类型系统
应用支持多种工作流节点类型：
```typescript
export enum WorkflowNodeType {
Start = 'start', // 开始节点
End = 'end', // 结束节点
LLM = 'llm', // 大语言模型节点
HTTP = 'http', // HTTP请求节点
Code = 'code', // 代码执行节点
Variable = 'variable', // 变量节点
Condition = 'condition', // 条件判断节点
Loop = 'loop', // 循环节点
BlockStart = 'block-start', // 子画布开始节点
BlockEnd = 'block-end', // 子画布结束节点
Comment = 'comment', // 注释节点
Continue = 'continue', // 继续节点
Break = 'break', // 中断节点
}
```
每个节点都遵循统一的注册模式：
```typescript
export const StartNodeRegistry: FlowNodeRegistry = {
type: WorkflowNodeType.Start,
meta: {
isStart: true,
deleteDisable: true, // 不可删除
copyDisable: true, // 不可复制
nodePanelVisible: false, // 不在节点面板显示
defaultPorts: [{ type: 'output' }],
size: { width: 360, height: 211 }
},
info: {
icon: iconStart,
description: '工作流的起始节点，用于设置启动工作流所需的信息。'
},
formMeta, // 表单配置
canAdd() { return false; } // 不允许添加多个开始节点
};
```
### 3. 插件化架构
应用的功能通过插件系统实现模块化：
#### 核心插件列表
1. **FreeLinesPlugin** - 连线渲染和交互
2. **MinimapPlugin** - 缩略图导航
3. **FreeSnapPlugin** - 自动对齐和辅助线
4. **FreeNodePanelPlugin** - 节点添加面板
5. **ContainerNodePlugin** - 容器节点（如循环节点）
6. **FreeGroupPlugin** - 节点分组功能
7. **ContextMenuPlugin** - 右键菜单
8. **RuntimePlugin** - 工作流运行时
9. **VariablePanelPlugin** - 变量管理面板
### 4. 运行时系统
应用支持两种运行模式：
```typescript
createRuntimePlugin({
mode: 'browser', // 浏览器模式
// mode: 'server', // 服务器模式
// serverConfig: {
// domain: 'localhost',
// port: 4000,
// protocol: 'http',
// },
})
```
## 设计理念与架构优势
### 1. 高度模块化
- **插件化架构**: 每个功能都是独立插件，易于扩展和维护
- **节点注册系统**: 新节点类型可以轻松添加，无需修改核心代码
- **组件化设计**: UI组件高度复用，职责清晰
### 2. 类型安全
- **完整的TypeScript支持**: 从配置到运行时的全链路类型保护
- **JSON Schema集成**: 节点数据结构通过Schema验证
- **强类型的插件接口**: 插件开发有明确的类型约束
### 3. 用户体验优化
- **实时预览**: 支持工作流的实时运行和调试
- **丰富的交互**: 拖拽、缩放、对齐、快捷键等完整的编辑体验
- **可视化反馈**: 缩略图、状态指示、连线动画等视觉反馈
### 4. 扩展性设计
- **开放的插件系统**: 第三方可以轻松开发自定义插件
- **灵活的节点系统**: 支持自定义节点类型和表单配置
- **多运行时支持**: 浏览器和服务器双模式运行
### 5. 性能优化
- **按需加载**: 组件和插件支持按需加载
- **防抖处理**: 自动保存等高频操作的性能优化
## 技术亮点
### 1. 自研编辑器框架
基于 `@flowgram.ai/free-layout-editor` 自研框架，提供：
- 自由布局的画布系统
- 完整的撤销/重做功能
- 节点和连线的生命周期管理
- 变量引擎和表达式系统
### 2. 先进的构建配置
使用 Rsbuild 作为构建工具：
```typescript
export default defineConfig({
plugins: [pluginReact(), pluginLess()],
source: {
entry: { index: './src/app.tsx' },
decorators: { version: 'legacy' } // 支持装饰器
},
tools: {
rspack: {
ignoreWarnings: [/Critical dependency/] // 忽略特定警告
}
}
});
```
### 3. 国际化支持
内置多语言支持：
```typescript
i18n: {
locale: navigator.language,
languages: {
'zh-CN': {
'Never Remind': '不再提示',
'Hold {{key}} to drag node out': '按住 {{key}} 可以将节点拖出',
},
'en-US': {},
}
}
```
---
url: /examples/node-form/basic.md
---
# 基础用法
import { NodeFormBasicPreview } from '../../../../components';
该例子展示了表单的几个基础用法
- 表单组件渲染
- 必填校验
- 默认值设置
---
url: /examples/node-form/effect.md
---
# 副作用
import { NodeFormEffectPreview } from '../../../../components';
以下例子展示了表单副作用的配置方式。举了两个个例子，行为描述如下
1. Basic effect(基础例子)：当表单项值变更时，控制台会打印表单当前值。
2. Control other fields (控制其他表单项的值)：当前表单项数据变更时要同时改变另一个表单项的值。
---
url: /examples/node-form/array.md
---
# 数组
import { NodeFormArrayPreview } from '../../../../components/node-form/array/preview';
以下例子展示了数组的基本用法，包含：
- 基本写法（渲染、增删）。
- 如何对数组每项配置校验逻辑。 此处的校验规则为每项最大长度不超过8个英文字符。
- 如何对数组每项配置副作用。 此处的副作用为每项在初始化时控制台输出 `${name} value init to ${value}`, 值变更时输出 `${name} value changed to ${value}`
- 数组项如何做交换。
---
url: /examples/node-form/dynamic.md
---
# 联动
import { NodeFormDynamicPreview } from '../../../../components';
当前例子展示了如何通过 `deps` 字段来声明表单项之间的联动更新关系。
例子说明：当 `Country` 有值时才会显示 `City` 字段。
你也可以将`form.getValueIn('country')` 作为 city `Field` 下组件的入参，来控制组件内的行为, 如筛选当前country下的cities。
---
url: /api/index.md
---
---
url: /api/core/flow-document.md
---
# FlowDocument
流程数据文档 (固定布局), 存储流程的所有节点数据
[> API Detail](https://flowgram.ai/auto-docs/document/classes/FlowDocument.html)
```ts pure
import { useClientContext } from '@flowgram.ai/fixed-layout-editor'
const ctx = useClientContext();
console.log(ctx.document)
```
:::danger
对节点的操作最好通过 [ctx.operation](/api/services/flow-operation-service.html) 进行操作, 这样才能绑定到 redo/undo
:::
## root
获取画布的根节点，所有节点都挂在根节点下边
```ts pure
console.log(ctx.document.root);
```
## originTree
画布真实的节点树
```ts pure
// 监听节点树的变化，如 节点添加/删除/移动
const refresh = useRefresh()
useEffect(() => {
const toDispose = ctx.document.originTree.onTreeChange(() => {
// Tree Change
refresh()
});
return () => toDispose.dispose()
}, [])
```
## renderTree
画布渲染时的节点树，为了提升性能，渲染的树会随着节点分支折叠而变化，并非真实的树
## getAllNodes
获取所有节点数据
```ts pure
const nodes = ctx.document.getAllNodes();
```
## getNode
通过指定 id 获取节点
```ts pure
ctx.document.getNode('start')
```
## getNodeRegistry
获取节点的定义, 节点定义可以根据业务自己扩展配置项
```ts pure
const startNodeRegistry = ctx.document.getNodeRegistry('start')
```
## fromJSON/toJSON
导入和导出数据
```ts pure
const json = ctx.document.toJSON();
ctx.document.fromJSON(json);
```
## registerFlowNodes
注册节点的配置项目, 支持继承
```ts pure
const node1: FlowNodeRegistry = {
type: 'node1',
meta: {}
}
const node2: FlowNodeRegistry = {
type: 'node2',
extend: 'node1' // 继承 node1 的配置
}
ctx.document.registerFlowNodes(node1, node2)
```
## addNode
添加节点
```ts pure
ctx.document.addNode({
id: 'node1',
type: 'start',
meta: {},
data: {},
parent: ctx.document.root // 可以指定父节点
});
```
## addFromNode
添加到指定节点的后边
```ts pure
ctx.document.addFromNode(
ctx.document.getNode('start'),
{ id: 'node1', type: 'custom', data: {} }
);
```
## addBlock
为指定节点添加分支节点
```ts pure
ctx.document.addBlock(ctx.document.getNode('condition'), { id: 'if_1', type: 'block', data: {} })
```
## removeNode
删除节点
```ts pure
ctx.document.removeNode('node1');
```
## onNodeCreate/onNodeUpdate/onNodeDispose
节点创建/更新/销毁事件, 返回事件的注销函数
```tsx pure
useEffect(() => {
const toDispose1 = ctx.document.onNodeCreate((node) => {
console.log('onNodeCreate', node);
});
const toDispose2 = ctx.document.onNodeUpdate((node) => {
console.log('onNodeUpdate', node);
});
const toDispose3 = ctx.document.onNodeDispose((node) => {
console.log('onNodeDispose', node);
});
return () => {
toDispose1.dispose()
toDispose2.dispose()
toDispose3.dispose()
}
}, []);
```
## traverse
从指定节点遍历所有子节点, 默认根节点
```ts pure
/**
*
* traverse all nodes, O(n)
* R
* |
* +---1
* | |
* | +---1.1
* | |
* | +---1.2
* | |
* | +---1.3
* | | |
* | | +---1.3.1
* | | |
* | | +---1.3.2
* | |
* | +---1.4
* |
* +---2
* |
* +---2.1
*
* sort: [1, 1.1, 1.2, 1.3, 1.3.1, 1.3.2, 1.4, 2, 2.1]
*/
ctx.document.traverse((node, depth, index) => {
console.log(node.id);
}, ctx.document.root);
```
## toString
返回节点结构的字符串快照
```ts pure
console.log(ctx.document.toString())
```
---
url: /api/core/flow-node-entity.md
---
# FlowNodeEntity/WorkflowNodeEntity
节点实体，`WorkflowNodeEntity` 为节点别名用于自由布局节点, 节点实体采用 [ECS](/guide/concepts/ecs.html) 架构, 为 `Entity`
[> API Detail](https://flowgram.ai/auto-docs/document/classes/FlowNodeEntity-1.html)
## Properties
- id: `string` 节点 id
- flowNodeType: `string` | `number` 节点类型
- version `number` 节点版本，可以用于判断节点状态是否更新
## Accessors
- document: `FlowDocument | WorkflowDocument` 文档链接
- bounds: `Rectangle` 获取节点的 x，y，width，height, 等价于 `transform.bounds`
- blocks: `FlowNodeEntity[]` 获取子节点, 包含折叠的子节点, 等价于 `collapsedChildren`
- collapsedChildren: `FlowNodeEntity[]` 获取子节点, 包含折叠的子节点
- allCollapsedChildren: `FlowNodeEntity[]` 获取所有子节点，包括所有折叠的子节点
- children: `FlowNodeEntity[]` 获取子节点, 不包含折叠的子节点
- pre: `FlowNodeEntity | undefined` 获取上一个节点
- next: `FlowNodeEntity | undefined` 获取下一个节点
- parent: `FlowNodeEntity | undefined` 获取父节点
- originParent: `FlowNodeEntity | undefined` 获取原始父节点, 这个用于固定布局分支的第一个节点(orderIcon) 找到整个虚拟分支
- allChildren: `FlowNodeEntity[]` 获取所有子节点, 不包含折叠的子节点
- transform: [FlowNodeTransformData](https://flowgram.ai/auto-docs/document/classes/FlowNodeTransformData.html) 获取节点的 transform 矩阵数据
- renderData: [FlowNodeRenderData](https://flowgram.ai/auto-docs/document/classes/FlowNodeRenderData.html) 获取节点的渲染数据, 包含渲染状态等
- form: [NodeFormProps](https://flowgram.ai/auto-docs/editor/interfaces/NodeFormProps.html) 获取节点的表单数据, 等价于 [getNodeForm](/api/utils/get-node-form.html)
- scope: [FlowNodeScope](https://flowgram.ai/auto-docs/editor/interfaces/FlowNodeScope) 变量作用域
- privateScope: [FlowNodeScope](https://flowgram.ai/auto-docs/editor/interfaces/FlowNodeScope) 变量私有作用域
- lines: [WorkflowNodeLinesData](https://flowgram.ai/auto-docs/free-layout-core/classes/WorkflowNodeLinesData.html) 自由布局线条数据
- ports: [WorkflowNodePortsData](https://flowgram.ai/auto-docs/free-layout-core/classes/WorkflowNodePortsData.html) 自由布局端口数据
## Methods
### getExtInfo
获取节点的扩展信息, 可以通过 `updateExtInfo` 更新扩展信息
```
node.getExtInfo<{ test: string }>()
```
### updateExtInfo
更新扩展数据, 更新不会记录到 `redo/undo`, 如果需要记录，请实现 [history](/guide/advanced/history.html) 服务
```
node.updateExtInfo<{ test: string }>({
test: 'test'
})
```
### getNodeRegistry
获取节点注册器, 等价于 `ctx.document.getNodeRegistry(node.flowNodeType)`
```ts pure
const nodeRegistry = node.getNodeRegistry()
```
### getData
等价于 [ECS](/guide/concepts/ecs.html) 架构 里获取 Entity 的 Component
```ts pure
node.getData(FlowNodeTransformData) // transform 矩阵数据, 包含节点的 x，y，width，height 等信息
node.getData(FlowNodeRenderData) // 节点的渲染数据, 包含渲染状态等数据
node.lines // 自由布局的线条数据
```
### addData
等价于 [ECS](/guide/concepts/ecs.html) 架构 里添加 Entity 的 Component
```ts pure
// 自定义 EntityData
class CustomEntityData extends EntityData<{ key0: string }> {
static type = 'CustomEntityData';
getDefaultData() {
return {
key0: 'test'
}
}
}
// 添加 Enitty Component
node.addData(CustomEntityData)
// 更新 Entity Component 数据
node.getData(CustomEntityData).update({ key0: 'new value' })
```
### getService
节点访问 [IOC](/guide/concepts/ioc.html) 服务
```ts pure
node.getService(SelectionService)
```
### dispose
节点从画布中销毁
### onDispose
节点销毁事件
```ts pure
useEffect(() => {
const toDispose = node.onDispose(() => {
console.log('Dispose node')
})
return () => toDispose.dispose()
}, [node])
```
### toJSON
导出节点数据
:::note 节点数据基本结构:
- id: `string` 节点唯一标识, 必须保证唯一
- meta: `object` 节点的 ui 配置信息，如自由布局的 `position` 信息放这里
- type: `string | number` 节点类型，会和 `nodeRegistries` 中的 `type` 对应
- data: `object` 节点表单数据, 业务可自定义
- blocks: `array` 节点的分支, 采用 `block` 更贴近 `Gramming`
:::
---
url: /api/core/workflow-document.md
---
# WorkflowDocument (free)
自由布局文档数据，继承自 [FlowDocument](/api/core/flow-document.html)
[> API Detail](https://flowgram.ai/auto-docs/free-layout-core/classes/WorkflowDocument.html)
```ts pure
import { useClientContext } from '@flowgram.ai/free-layout-editor'
const ctx = useClientContext();
console.log(ctx.document)
```
:::tip
由于历史原因， 带 `Workflow` 前缀的都代表自由布局
:::
## linesManager
自由布局线条管理，见 [WorkflowLinesManager](/api/core/workflow-lines-manager.html)
## createWorkflowNodeByType
根据节点类型创建自由布局节点
```ts pure
const node = ctx.document.createWorkflowNodeByType(
'custom',
{ x: 100, y: 100 },
{
id: 'xxxx',
data: {}
}
)
```
## onContentChange
监听自由布局画布数据变化
```ts pure
export enum WorkflowContentChangeType {
/**
* 添加节点
*/
ADD_NODE = 'ADD_NODE',
/**
* 删除节点
*/
DELETE_NODE = 'DELETE_NODE',
/**
* 移动节点
*/
MOVE_NODE = 'MOVE_NODE',
/**
* 节点数据更新 （表单引擎数据 或者 extInfo 数据）
*/
NODE_DATA_CHANGE = 'NODE_DATA_CHANGE',
/**
* 添加线条
*/
ADD_LINE = 'ADD_LINE',
/**
* 删除线条
*/
DELETE_LINE = 'DELETE_LINE',
/**
* 节点Meta信息变更
*/
META_CHANGE = 'META_CHANGE',
}
export interface WorkflowContentChangeEvent {
type: WorkflowContentChangeType;
/**
* 当前触发的元素的json数据，toJSON 需要主动触发
*/
toJSON: () => any;
/*
* 当前的事件的 entity
*/
entity: WorkflowNodeEntity | WorkflowLineEntity;
}
``
---
url: /api/core/workflow-lines-manager.md
---
# WorkflowLinesManager (free)
自由布局线条管理, 目前挂在自由布局 document 下边
[> API Detail](https://flowgram.ai/auto-docs/free-layout-core/classes/WorkflowLinesManager.html)
```
import { useClientContext } from '@flowgram.ai/free-layout-editor'
const ctx = useClientContext();
console.log(ctx.document.linesManager)
```
## getAllLines
获取所有线条的实体
```ts pure
const allLines = ctx.document.linesManager.getAllLines()
```
## createLine
创建线条
```ts pure
// from和 to 为对应要连线的节点id， fromPort, toPort 为 端口 id, 如果节点为单个端口可以不指定
const line = ctx.document.linesManager.createLine({ from, to, fromPort, toPort })
```
## toJSON
导出线条数据
```ts pure
const json = ctx.document.linesManager.toJSON()
```
## onAvailableLinesChange
监听所有线条的连线变化
```ts pure
import { useEffect } from 'react'
import { useClientContext, useRefresh } from '@flowgram.ai/free-layout-editor'
function SomeReact() {
const refresh = useRefresh()
const linesManager = useClientContext().document.linesManager
useEffect(() => {
const dispose = linesManager.onAvailableLinesChange(() => refresh())
return () => dispose.dispose()
}, [])
console.log(ctx.document.linesManager.getAllLines())
}
```
## 自定义箭头渲染器
WorkflowLinesManager 支持通过渲染器注册表自定义箭头样式。详细使用方法请参考 [线条配置指南](/zh/guide/free-layout/line#4自定义箭头渲染器) 文档。
```tsx
// 简单示例：注册自定义箭头
const editorProps = {
materials: {
components: {
'arrow-renderer': MyCustomArrow,
},
},
};
```
---
url: /api/core/workflow-line-entity.md
---
# WorkflowLineEntity (free)
自由布局线条实体
[> API Detail](https://flowgram.ai/auto-docs/free-layout-core/classes/WorkflowLineEntity.html)
---
url: /api/core/playground.md
---
# Playground
画布实例
[> API Detail](https://flowgram.ai/auto-docs/core/classes/Playground.html)
```ts pure
const ctx = useClientContext()
console.log(ctx.playground)
```
## config
画布配置, 提供 zoom、scroll 等状态
[> API Detail](https://flowgram.ai/auto-docs/core/classes/PlaygroundConfigEntity.html)
### updateConfig
- zoom `number` 当前缩放比例
- scrollX
- scrollY
- minZoom
- maxZoom
- readonly
- disabled
- width
- height
```ts pure
// get current config state
ctx.playground.config.config.zoom
ctx.playground.config.config.readonly
// updateConfig
ctx.playground.config.updateConfig({
zoom: 0.8,
minZoom: 0.1,
maxZoom: 2,
readonly: true
})
```
### fitView
节点适应画布窗口, 需要传入节点的 bounds
```ts pure
/**
* 适应大小
* @param bounds {Rectangle} 目标大小
* @param easing {number} 是否开启动画，默认开启
* @param padding {number} 边界空白
*/
ctx.playground.config.fitView(node.bounds, true, 10)
```
### scrollToView
指定节点位置并滚动到画布可见区域, 如果位置已经在可见区域则不会滚动，除非加上 `scrollToCenter` 强制滚动
```ts pure
/**
* 详细参数说明
* @param opts {PlaygroundConfigRevealOpts}
**/
interface PlaygroundConfigRevealOpts {
entities?: Entity[]
position?: PositionSchema // 滚动到指定位置，并居中
bounds?: Rectangle // 滚动的 bounds
scrollDelta?: PositionSchema
zoom?: number // 需要缩放的比例
easing?: boolean // 是否开启缓动，默认开启
easingDuration?: number // 默认 500 ms
scrollToCenter?: boolean // 是否强制滚动到中心
}
ctx.playground.config.scrollToView({
bounds: ctx.document.getNode('start').bounds,
})
```
### zoomin
放大画布
### zoomout
缩小画布
### getPoseFromMouseEvent
将浏览器鼠标位置转成画布坐标系
```ts pure
const pos: { x: number, y: number } = ctx.playground.config.getPoseFromMouseEvent(domMouseEvent)
```
### scroll
滚动画布, 需要传入滚动位置, 以及是否平滑滚动, 滚动时间
```ts pure
ctx.playground.config.scroll({ scrollX: 100, scrollY: 100 }, true, 300)
```
### isViewportVisible
判断当前节点是否在视窗以内
```ts pure
ctx.playground.config.isViewportVisible(node.bounds)
```
---
url: /api/hooks/use-client-context.md
---
# useClientContext
提供在 react 内部访问画布的上下文, 目前固定布局和 自由布局有一定区别
## 固定布局
- Return: [FixedLayoutPluginContext](https://flowgram.ai/auto-docs/fixed-layout-editor/interfaces/FixedLayoutPluginContext.html)
```ts pure
import { useClientContext } from '@flowgram.ai/fixed-layout-editor'
const ctx = useClientContext()
console.log(ctx.operation) // FlowOperationService 操作服务
console.log(ctx.document) // FlowDocument 数据文档
console.log(ctx.playground) // Playground 画布
console.log(ctx.history) // HistoryService 历史记录
console.log(ctx.clipboard) // ClipboardService 剪贴板
console.log(ctx.container) // Inversify IOC 容器
console.log(ctx.get(MyService)) // 获取任意的 IOC 模块，详细见 自定义 Service
```
## 自由布局
- Return: [FreeLayoutPluginContext](https://flowgram.ai/auto-docs/free-layout-editor/interfaces/FreeLayoutPluginContext.html)
```ts pure
import { useClientContext } from '@flowgram.ai/free-layout-editor'
const ctx = useClientContext()
console.log(ctx.document) // WorkflowDocument 数据文档
console.log(ctx.playground) // Playground 画布
console.log(ctx.history) // HistoryService 历史记录
console.log(ctx.selection) // SelectionService 选择器服务
console.log(ctx.clipboard) // ClipboardService 剪贴板
console.log(ctx.container) // Inversify IOC 容器
console.log(ctx.get(MyService)) // 获取任意的 IOC 模块，详细见 自定义 Service
```
---
url: /api/hooks/use-node-render.md
---
# useNodeRender
提供节点渲染相关的方法, 返回结果的 form 等价于 [getNodeForm](/api/utils/get-node-form.html)
## 固定布局
- Return: [NodeRenderReturnType](https://flowgram.ai/auto-docs/fixed-layout-editor/interfaces/NodeRenderReturnType.html)
```tsx pure
import { FlowNodeEntity, useNodeRender } from '@flowgram.ai/fixed-layout-editor';
export const BaseNode = ({ node }: { node: FlowNodeEntity }) => {
/**
* 提供节点渲染相关的方法
*/
const nodeRender = useNodeRender();
/**
* 只有在节点引擎开启时候才能使用表单
*/
const form = nodeRender.form;
return (
{
// trigger drag node
nodeRender.startDrag(e);
e.stopPropagation();
}}
style={{
/**
* 用于精确控制分支节点的样式
* isBlockIcon: 整个 condition 分支的 头部节点
* isBlockOrderIcon: 分支的第一个节点
*/
...(nodeRender.isBlockOrderIcon || nodeRender.isBlockIcon ? { width: 260 } : {}),
}}
>
{form?.render()}
);
};
```
## 自由布局
- Return: [NodeRenderReturnType](https://flowgram.ai/auto-docs/free-layout-core/interfaces/NodeRenderReturnType.html)
```tsx pure
import { WorkflowNodeRenderer, useNodeRender } from '@flowgram.ai/free-layout-editor';
export const BaseNode = () => {
const { form, node } = useNodeRender()
return (
{form?.render()}
)
}
```
---
url: /api/hooks/use-playground-tools.md
---
# usePlaygroundTools
画布工具方法
## 固定布局
- Return: [PlaygroundTools](https://flowgram.ai/auto-docs/fixed-layout-editor/interfaces/PlaygroundTools.html)
```tsx pure
import { useEffect, useState } from 'react'
import { usePlaygroundTools, useClientContext } from '@flowgram.ai/fixed-layout-editor';
export function Tools() {
const { history } = useClientContext();
const tools = usePlaygroundTools();
const [canUndo, setCanUndo] = useState(false);
const [canRedo, setCanRedo] = useState(false);
useEffect(() => {
const disposable = history.undoRedoService.onChange(() => {
setCanUndo(history.canUndo());
setCanRedo(history.canRedo());
});
return () => disposable.dispose();
}, [history]);
return
{Math.floor(tools.zoom * 100)}%
}
```
## 自由布局
- Return: [PlaygroundTools](https://flowgram.ai/auto-docs/free-layout-editor/interfaces/PlaygroundTools.html)
```tsx pure
import { usePlaygroundTools, useClientContext } from '@flowgram.ai/free-layout-editor';
export function Tools() {
const { history } = useClientContext();
const tools = usePlaygroundTools();
const [canUndo, setCanUndo] = useState(false);
const [canRedo, setCanRedo] = useState(false);
useEffect(() => {
const disposable = history.undoRedoService.onChange(() => {
setCanUndo(history.canUndo());
setCanRedo(history.canRedo());
});
return () => disposable.dispose();
}, [history]);
return
{Math.floor(tools.zoom * 100)}%
}
```
---
url: /api/hooks/use-refresh.md
---
# useRefresh
## Source Code
```ts
import { useCallback, useState } from 'react';
export function useRefresh(defaultValue?: any): (v?: any) => void {
const [, update] = useState(defaultValue);
return useCallback((v?: any) => update(v !== undefined ? v : {}), []);
}
```
## Usage
```tsx pure
import { useRefresh } from '@flowgram.ai/fixed-layout-editor';
function Demo() {
const refresh = useRefresh();
return (
)
}
```
---
url: /api/hooks/use-service.md
---
# useService
获取底层 [IOC](/guide/concepts/ioc.html) 的所有单例模块
```ts pure
const playground = useService(Playground)
const flowDocument = useService(FlowDocument)
const historyService = useService(HistoryService)
// 等价
const playground1 = useClientContext().playground
// 等价
const playground3 = useClientContext().get(Playground)
```
## 自定义 Service
```tsx pure
/**
* inversify: https://github.com/inversify/InversifyJS
*/
import { injectable, inject } from 'inversify'
import { FlowDocument } from '@flowgram.ai/fixed-layout-editor'
@injectable()
class MyService {
// 依赖注入单例模块
@inject(FlowDocument) flowDocument: FlowDocument
// ...
}
import { useMemo } from 'react';
import { type FixedLayoutProps } from '@flowgram.ai/fixed-layout-editor';
function BaseNode() {
const mySerivce = useService(MyService)
}
export function useEditorProps(
): FixedLayoutProps {
return useMemo(
() => ({
// ....other props
onBind: ({ bind }) => {
bind(MyService).toSelf().inSingletonScope()
},
materials: {
renderDefaultNode: BaseNode
}
}),
[],
);
}
```
---
url: /api/components/editor-renderer.md
---
# EditorRenderer
画布渲染组件，需要 配合 `FixedLayoutEditorProvider` 或 `FreeLayoutEditorProvider` 使用
```tsx pure
function App() {
return (
{/* 如果提供 children，该内容会放到 画布 div 下边 */}
)
}
```
---
url: /api/components/fixed-layout-editor-provider.md
---
# FixedLayoutEditorProvider
固定布局画布配置器，支持 ref
```tsx pure
import { FixedLayoutEditorProvider, FixedLayoutPluginContext, EditorRenderer } from '@flowgram.ai/fixed-layout-editor'
function App() {
const ref = useRef();
useEffect(() => {
console.log(ref.current.document.toJSON())
}, [])
return (
)
}
```
---
url: /api/components/fixed-layout-editor.md
---
# FixedLayoutEditor
固定布局画布, 等价于 `FixedLayoutEditorProvider` 和 `EditorRenderer` 的组合
```tsx pure
import { FixedLayoutEditor, FixedLayoutPluginContext } from '@flowgram.ai/fixed-layout-editor'
function App() {
const ref = useRef();
useEffect(() => {
console.log(ref.current.document.toJSON())
}, [])
return (
)
}
```
---
url: /api/components/free-layout-editor-provider.md
---
# FreeLayoutEditorProvider
自由布局画布配置器，支持 ref
```tsx pure
import { FreeLayoutEditorProvider, FreeLayoutPluginContext, EditorRenderer } from '@flowgram.ai/free-layout-editor'
function App() {
const ref = useRef();
useEffect(() => {
console.log(ref.current.document.toJSON())
}, [])
return (
)
}
```
---
url: /api/components/free-layout-editor.md
---
# FreeLayoutEditor
自由布局画布, 等价于 `FreeLayoutEditorProvider` 和 `EditorRenderer` 的组合
```tsx pure
import { FreeLayoutEditor, FreeLayoutPluginContext } from '@flowgram.ai/free-layout-editor'
function App() {
const ref = useRef();
useEffect(() => {
console.log(ref.current.document.toJSON())
}, [])
return (
)
}
```
---
url: /api/components/workflow-node-renderer.md
---
# WorkflowNodeRenderer(free)
自由布局节点容器
## Usage
```tsx pure
import { useNodeRender, WorkflowNodeRenderer } from '@flowgram.ai/free-layout-editor';
export const BaseNode = () => {
/**
* 提供节点渲染相关的方法
*/
const { form } = useNodeRender()
/**
* WorkflowNodeRenderer 会添加节点拖拽事件及 端口渲染，如果要深度定制，可以看该组件源代码:
* https://github.com/bytedance/flowgram.ai/blob/main/packages/client/free-layout-editor/src/components/workflow-node-renderer.tsx
*/
return (
{
// 表单渲染通过 formMeta 生成
form?.render()
}
)
};
```
---
url: /api/services/clipboard-service.md
---
# ClipboardService
剪贴板服务
[> API Detail](https://flowgram.ai/auto-docs/core/interfaces/ClipboardService.html)
---
url: /api/services/command-service.md
---
# CommandService
指令服务，需要和 [Shortcuts](/guide/advanced/shortcuts.html) 一起使用
[> API Detail](https://flowgram.ai/auto-docs/command/interfaces/CommandService.html)
```typescript pure
ctx.get(CommandService).execCommand('selectAll')
```
---
url: /api/services/flow-operation-service.md
---
# FlowOperationService
节点操作服务, 目前用于固定布局，自由布局现阶段可通过 WorkflowDocument 直接操作, 后续也会抽象出 operation
[> API Detail](https://flowgram.ai/auto-docs/fixed-layout-editor/interfaces/FlowOperationService.html)
```typescript pure
const operationService = useService(FlowOperationService)
operationService.addNode({ id: 'xxx', type: 'custom', data: {} })
// or
const ctx = useClientContext();
ctx.operation.addNode({ id: 'xxx', type: 'custom', data: {} })
```
## Interface
```typescript pure
export interface FlowOperationBaseService extends Disposable {
/**
* 执行操作
* @param operation 可序列化的操作
* @returns 操作返回
*/
apply(operation: FlowOperation): any;
/**
* 添加节点，如果节点已经存在则不会重复创建
* @param nodeJSON 节点数据
* @param config 配置
* @returns 成功添加的节点
*/
addNode(nodeJSON: FlowNodeJSON, config?: AddNodeConfig): FlowNodeEntity;
/**
* 基于某一个起始节点往后面添加
* @param fromNode 起始节点
* @param nodeJSON 添加的节点JSON
*/
addFromNode(fromNode: FlowNodeEntityOrId, nodeJSON: FlowNodeJSON): FlowNodeEntity;
/**
* 删除节点
* @param node 节点
* @returns
*/
deleteNode(node: FlowNodeEntityOrId): void;
/**
* 批量删除节点
* @param nodes
*/
deleteNodes(nodes: FlowNodeEntityOrId[]): void;
/**
* 添加块（分支）
* @param target 目标
* @param blockJSON 块数据
* @param config 配置
* @returns
*/
addBlock(
target: FlowNodeEntityOrId,
blockJSON: FlowNodeJSON,
config?: AddBlockConfig,
): FlowNodeEntity;
/**
* 移动节点
* @param node 被移动的节点
* @param config 移动节点配置
*/
moveNode(node: FlowNodeEntityOrId, config?: MoveNodeConfig): void;
/**
* 拖拽节点
* @param param0
* @returns
*/
dragNodes({ dropNode, nodes }: { dropNode: FlowNodeEntity; nodes: FlowNodeEntity[] }): void;
/**
* 添加节点的回调
*/
onNodeAdd: Event;
}
export interface FlowOperationService extends FlowOperationBaseService {
/**
* 创建分组
* @param nodes 节点列表
*/
createGroup(nodes: FlowNodeEntity[]): FlowNodeEntity | undefined;
/**
* 取消分组
* @param groupNode
*/
ungroup(groupNode: FlowNodeEntity): void;
/**
* 开始事务
*/
startTransaction(): void;
/**
* 结束事务
*/
endTransaction(): void;
/**
* 修改表单数据
* @param node 节点
* @param path 属性路径
* @param value 值
*/
setFormValue(node: FlowNodeEntityOrId, path: string, value: unknown): void;
}
```
---
url: /api/services/history-service.md
---
## HistoryService
[> API Detail](https://flowgram.ai/auto-docs/fixed-history-plugin/classes/HistoryService.html)
## Redo/Undo
```tsx pure
import { useEffect, useState } from 'react'
import { useClientContext } from '@flowgram.ai/fixed-layout-editor';
export function Tools() {
const { history } = useClientContext();
const [canUndo, setCanUndo] = useState(false);
const [canRedo, setCanRedo] = useState(false);
useEffect(() => {
const disposable = history.undoRedoService.onChange(() => {
setCanUndo(history.canUndo());
setCanRedo(history.canRedo());
});
return () => disposable.dispose();
}, [history]);
return
}
```
## 渲染历史记录
```tsx pure
import { useEffect } from 'react'
import { useRefresh, useClientContext } from '@flowgram.ai/fixed-layout-editor'
function HistoryListRender() {
const refresh = useRefresh()
const ctx = useClientContext()
useEffect(() => {
ctx.history.onApply(() => refresh())
}, [ctx])
return (
{ctx.history.historyManager.historyStack.items.map((record) => )}
)
}
```
---
url: /api/services/selection-service.md
---
# SelectionService
用于控制选择的节点
[> API Detail](https://flowgram.ai/auto-docs/core/classes/SelectionService.html)
## Usage
```tsx pure
// Listen Selection Change
ctx.selection.onSelectionChanged((nodes) => {
})
// Select All Nodes
ctx.selection.selection = ctx.document.getAllNodes()
```
---
url: /api/utils/disposable-collection.md
---
# DisposableCollection
## Usage
```ts pure
import { DisposableCollection, Disposable } from '@flowgram.ai/utils'
const disposable1: Disposable = {
dispose() {
console.log(1)
},
};
const disposable2: Disposable = {
dispose() {
console.log(2)
},
};
const dc = new DisposableCollection();
dc.onDispose(() => {
console.log('end')
});
dc.pushAll([disposable1, disposable2]);
dc.dispose(); // Log: 1, 2, dispose end
```
## Source Code
https://github.com/bytedance/flowgram.ai/blob/main/packages/common/utils/src/disposable.ts
---
url: /api/utils/disposable.md
---
# Disposable
## Interface
```ts
/**
* An object that performs a cleanup operation when `.dispose()` is called.
*
* Some examples of how disposables are used:
*
* - An event listener that removes itself when `.dispose()` is called.
* - The return value from registering a provider. When `.dispose()` is called, the provider is unregistered.
*/
export interface Disposable {
dispose(): void;
}
```
## Source Code
https://github.com/bytedance/flowgram.ai/blob/main/packages/common/utils/src/disposable.ts
---
url: /api/utils/emitter.md
---
# Emitter
事件模块
## Usage
```tsx pure
import { Emitter } from '@flowgram.ai/utils'
class Doc {
private _content = ''
private _onContentChangeEmitter = new Emitter()
readonly onContentChange = this._onContentChangeEmitter.event
setContent(content: string) {
this._content = content
this._onContentChangeEmitter.fire(content)
}
get content() {
return this._content
}
}
function App() {
const doc1 = useMemo(() => new Doc(), [])
const [content, updateContent] = useState(doc1.content)
useEffect(() => {
const toDispose = doc1.onContentChange((content) => {
updateContent(content)
})
return () => toDispose.dispose()
}, [doc1])
return {content}
}
```
## Source Code
https://github.com/bytedance/flowgram.ai/blob/main/packages/common/utils/src/event.ts
---
url: /api/utils/get-node-form.md
---
# getNodeForm
获取节点的表单能力，需要开启 节点引擎才能使用
[> API Detail](https://flowgram.ai/auto-docs/editor/functions/getNodeForm.html)
## Usage
```tsx pure
// 1. BaseNode
function BaseNode({ node }) {
const form = getNodeForm(node);
console.log(form.getValueIn('title'))
return {form?.render()}
}
// 2. useNodeRender
function BaseNode() {
const { form } = useNodeRender();
console.log(form.getValueIn('title'))
return {form?.render()}
}
```
## Return Inteface
```ts pure
export interface NodeFormProps {
/**
* The initialValues of the form.
*/
initialValues: TValues;
/**
* Form values. Returns a deep copy of the data in the store.
*/
values: TValues;
/**
* Form state
*/
state: FormState;
/**
* Get value in certain path
* @param name path
*/
getValueIn(name: FieldName): TValue;
/**
* Set value in certain path.
* It will trigger the re-rendering of the Field Component if a Field is related to this path
* @param name path
*/
setValueIn(name: FieldName, value: TValue): void;
/**
* set form values
*/
updateFormValues(values: any): void;
/**
* Render form
*/
render: () => React.ReactNode;
/**
* Form value change event
*/
onFormValuesChange: Event;
/**
* Trigger form validate
*/
validate: () => Promise;
/**
* Form validate event
*/
onValidate: Event;
/**
* Form field value change event
*/
onFormValueChangeIn(
name: FieldName,
callback: (payload: onFormValueChangeInPayload) => void
): Disposable;
}
```
---
url: /api/common-apis.md
---
# 常用 API
## FlowDocument （自动化布局文档数据）
```ts
// 通过 hook 获取，也可以通过ctx
const doc = useService(FlowDocument)
doc.fromJSON(data) // 加载数据
doc.getAllNodes() // 获取所有节点
doc.traverseDFS(node => {}) // 深度遍历节点
doc.toJSON() // TODO 这里老版本的数据，还没优化，业务最好自己使用 traverseDFS 实现 json 转换
doc.addFromNode(targetNode, json) // 插入到指定节点的后边
doc.onNodeCreate(({ node, json }) => {}) // 监听节点创建，data 为创建时候的json数据
doc.onNodeDispose(({ node }) => {}) // 监听节点删除
```
## WorkflowDocument (自由连线布局文档数据) 继承自 FlowDocument
```ts
const doc = useService(WorkflowDocument)
doc.fromJSON(data) // 加载数据
doc.toJSON() // 导出数据
doc.getAllNodes() // 获取所有节点
doc.linesManager.getAllLines() // 获取所有线条
// 创建节点
doc.createWorkflowNode({ id: nanoid(), type: 'xxx', data: {}, meta: { position: { x: 0, y: 0 } } })
// 创建线条，from和to 为对应要连线的节点id， fromPort, toPort 如果为单个端口可以不指定
doc.linesManager.createLine({ from, to, fromPort, toPort })
// 监听变化，这里会监听线条和节点等事件
doc.onContentChange((e) => {
})
```
## FlowNodeEntity（节点）
```ts
node.flowNodeType // 当前节点的type类型
node.transform.bounds // 获取节点的外围矩形框, 包含 x,y,width,height
node.updateExtInfo({ title: 'xxx' }) // 设置扩展数据, 响应式会刷新节点
node.getExtInfo() // 获取扩展数据
node.getNodeRegister() // 拿到当前节点的定义
node.dispose() // 删除节点
// renderData 是 节点 ui相关数据
const renderData = node.renderData
renderData.node // 当前节点的domNode
renderData.expanded // 当前节点是否展开，可以设置
// 拿到所有上游输入和输出节点（自由连线布局）
node.getData(WorkflowNodeLinesData).allInputNodes
node.getData(WorkflowNodeLinesData).allOutputNodes
```
## Playground （画布）
```ts
// 通过 hook 获取，也可以通过ctx
const playground = useService(Playground)
// 滚动到指定的节点并居中
ctx.playground.config.scrollToView({
entities: [node]
scrollToCenter： true
easing: true // 缓动动画
})
// 滚动画布
ctx.playground.config.scroll({
scrollX: 0
scrollY: 0
})
// 适配屏幕
ctx.playground.config.fitView(
doc.root.getData().bounds, // 需要居中的矩形框，这里拿节点根节点的大小代表最大的框
true， // 是否缓动
20, // padding，留出空白间距
)
// 缩放
ctx.playground.config.zoomin()
ctx.playground.config.zoomout()
ctx.playground.config.finalScale // 当前缩放比例
```
## SelectionService (选择器)
```ts
const selectionService = useService()
selection.selection // 返回当前选中的节点数组，也可以修改，如选中节点 seleciton.selection = [node]
selection.onSelectionChanged(() => {}) // 监听变化
```
---
url: /api/plugins.md
---
这里是官网 api 配置，demo 用。
---
url: /auto-docs/index.md
---
---
url: /auto-docs/core/classes/CommandRegistry.md
---
# Class: CommandRegistry
## Implements
- [`CommandService`](../variables/CommandService-1.md)
## Table of contents
### Constructors
- [constructor](./CommandRegistry.md#constructor)
### Properties
- [onDidExecuteCommand](./CommandRegistry.md#ondidexecutecommand)
- [onWillExecuteCommand](./CommandRegistry.md#onwillexecutecommand)
### Accessors
- [commandIds](./CommandRegistry.md#commandids)
- [commands](./CommandRegistry.md#commands)
### Methods
- [dispose](./CommandRegistry.md#dispose)
- [executeCommand](./CommandRegistry.md#executecommand)
- [getActiveHandler](./CommandRegistry.md#getactivehandler)
- [getAllHandlers](./CommandRegistry.md#getallhandlers)
- [getCommand](./CommandRegistry.md#getcommand)
- [getToggledHandler](./CommandRegistry.md#gettoggledhandler)
- [getVisibleHandler](./CommandRegistry.md#getvisiblehandler)
- [init](./CommandRegistry.md#init)
- [isEnabled](./CommandRegistry.md#isenabled)
- [isToggled](./CommandRegistry.md#istoggled)
- [isVisible](./CommandRegistry.md#isvisible)
- [registerCommand](./CommandRegistry.md#registercommand)
- [registerHandler](./CommandRegistry.md#registerhandler)
- [unregisterCommand](./CommandRegistry.md#unregistercommand)
- [updateCommand](./CommandRegistry.md#updatecommand)
## Constructors
### constructor
**new CommandRegistry**()
## Properties
### onDidExecuteCommand
`Readonly` **onDidExecuteCommand**: `Event`\<`CommandEvent`\>
#### Implementation of
CommandService.onDidExecuteCommand
___
### onWillExecuteCommand
`Readonly` **onWillExecuteCommand**: `Event`\<`CommandEvent`\>
#### Implementation of
CommandService.onWillExecuteCommand
## Accessors
### commandIds
`get` **commandIds**(): `string`[]
当前所有 commandid
#### Returns
`string`[]
___
### commands
`get` **commands**(): [`Command`](../interfaces/Command-1.md)[]
当前所有 command
#### Returns
[`Command`](../interfaces/Command-1.md)[]
## Methods
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Implementation of
CommandService.dispose
___
### executeCommand
**executeCommand**\<`T`\>(`commandId`, `...args`): `Promise`\<`undefined` \| `T`\>
执行 command，会先判断是否可以执行，不会重复执行
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `commandId` | `string` |
| `...args` | `any`[] |
#### Returns
`Promise`\<`undefined` \| `T`\>
#### Implementation of
CommandService.executeCommand
___
### getActiveHandler
**getActiveHandler**(`commandId`, `...args`): `undefined` \| `CommandHandler`
#### Parameters
| Name | Type |
| :------ | :------ |
| `commandId` | `string` |
| `...args` | `any`[] |
#### Returns
`undefined` \| `CommandHandler`
___
### getAllHandlers
**getAllHandlers**(`commandId`): `CommandHandler`[]
获取 command 对应的所有 handler
#### Parameters
| Name | Type |
| :------ | :------ |
| `commandId` | `string` |
#### Returns
`CommandHandler`[]
___
### getCommand
**getCommand**(`id`): `undefined` \| [`Command`](../interfaces/Command-1.md)
获取 command
#### Parameters
| Name | Type |
| :------ | :------ |
| `id` | `string` |
#### Returns
`undefined` \| [`Command`](../interfaces/Command-1.md)
___
### getToggledHandler
**getToggledHandler**(`commandId`, `...args`): `undefined` \| `CommandHandler`
#### Parameters
| Name | Type |
| :------ | :------ |
| `commandId` | `string` |
| `...args` | `any`[] |
#### Returns
`undefined` \| `CommandHandler`
___
### getVisibleHandler
**getVisibleHandler**(`commandId`, `...args`): `undefined` \| `CommandHandler`
#### Parameters
| Name | Type |
| :------ | :------ |
| `commandId` | `string` |
| `...args` | `any`[] |
#### Returns
`undefined` \| `CommandHandler`
___
### init
**init**(): `void`
#### Returns
`void`
___
### isEnabled
**isEnabled**(`command`, `...args`): `boolean`
command 是否可用
#### Parameters
| Name | Type |
| :------ | :------ |
| `command` | `string` |
| `...args` | `any`[] |
#### Returns
`boolean`
___
### isToggled
**isToggled**(`command`, `...args`): `boolean`
预留 contextMenu 用，该 handler 是否可以触发
#### Parameters
| Name | Type |
| :------ | :------ |
| `command` | `string` |
| `...args` | `any`[] |
#### Returns
`boolean`
___
### isVisible
**isVisible**(`command`, `...args`): `boolean`
预留 contextMenu 用，该 handler 是否可见
#### Parameters
| Name | Type |
| :------ | :------ |
| `command` | `string` |
| `...args` | `any`[] |
#### Returns
`boolean`
___
### registerCommand
**registerCommand**(`id`, `handler?`): `Disposable`
registerCommand
#### Parameters
| Name | Type |
| :------ | :------ |
| `id` | `string` |
| `handler?` | `CommandHandler` |
#### Returns
`Disposable`
**registerCommand**(`command`, `handler?`): `Disposable`
#### Parameters
| Name | Type |
| :------ | :------ |
| `command` | [`Command`](../interfaces/Command-1.md) |
| `handler?` | `CommandHandler` |
#### Returns
`Disposable`
___
### registerHandler
**registerHandler**(`commandId`, `handler`): `Disposable`
注册 handler
#### Parameters
| Name | Type |
| :------ | :------ |
| `commandId` | `string` |
| `handler` | `CommandHandler` |
#### Returns
`Disposable`
___
### unregisterCommand
**unregisterCommand**(`command`): `void`
unregisterCommand
#### Parameters
| Name | Type |
| :------ | :------ |
| `command` | [`Command`](../interfaces/Command-1.md) |
#### Returns
`void`
**unregisterCommand**(`id`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `id` | `string` |
#### Returns
`void`
___
### updateCommand
**updateCommand**(`id`, `command`): `void`
更新 command
#### Parameters
| Name | Type |
| :------ | :------ |
| `id` | `string` |
| `command` | `Partial`\<`Omit`\<[`Command`](../interfaces/Command-1.md), ``"id"``\>\> |
#### Returns
`void`
---
url: /auto-docs/core/classes/ConfigEntity.md
---
# Class: ConfigEntity\
用于专门的数据配置，且是单例
## Type parameters
| Name | Type |
| :------ | :------ |
| `P` | extends [`ConfigEntityProps`](../interfaces/ConfigEntityProps.md) = [`ConfigEntityProps`](../interfaces/ConfigEntityProps.md) |
| `O` | extends [`EntityOpts`](../interfaces/EntityOpts.md) = [`EntityOpts`](../interfaces/EntityOpts.md) |
## Hierarchy
- [`Entity`](./Entity-1.md)\<`O`\>
↳ **`ConfigEntity`**
↳↳ [`EditorStateConfigEntity`](./EditorStateConfigEntity.md)
↳↳ [`PlaygroundConfigEntity`](./PlaygroundConfigEntity.md)
## Table of contents
### Constructors
- [constructor](./ConfigEntity.md#constructor)
### Properties
- [\_\_opts\_type\_\_](./ConfigEntity.md#__opts_type__)
- [entityManager](./ConfigEntity.md#entitymanager)
- [onDataChange](./ConfigEntity.md#ondatachange)
- [onEntityChange](./ConfigEntity.md#onentitychange)
- [preDispose](./ConfigEntity.md#predispose)
- [toDispose](./ConfigEntity.md#todispose)
- [type](./ConfigEntity.md#type)
### Accessors
- [config](./ConfigEntity.md#config)
- [context](./ConfigEntity.md#context)
- [disposed](./ConfigEntity.md#disposed)
- [id](./ConfigEntity.md#id)
- [onDispose](./ConfigEntity.md#ondispose)
- [savedInManager](./ConfigEntity.md#savedinmanager)
- [type](./ConfigEntity.md#type-1)
- [version](./ConfigEntity.md#version)
### Methods
- [addData](./ConfigEntity.md#adddata)
- [addInitializeData](./ConfigEntity.md#addinitializedata)
- [checkChanged](./ConfigEntity.md#checkchanged)
- [dispose](./ConfigEntity.md#dispose)
- [fromJSON](./ConfigEntity.md#fromjson)
- [getData](./ConfigEntity.md#getdata)
- [getDefaultConfig](./ConfigEntity.md#getdefaultconfig)
- [getDefaultDataRegistries](./ConfigEntity.md#getdefaultdataregistries)
- [getService](./ConfigEntity.md#getservice)
- [hasData](./ConfigEntity.md#hasdata)
- [onConfigChanged](./ConfigEntity.md#onconfigchanged)
- [removeData](./ConfigEntity.md#removedata)
- [reset](./ConfigEntity.md#reset)
- [toJSON](./ConfigEntity.md#tojson)
- [updateConfig](./ConfigEntity.md#updateconfig)
- [updateData](./ConfigEntity.md#updatedata)
## Constructors
### constructor
**new ConfigEntity**\<`P`, `O`\>(`opts`)
#### Type parameters
| Name | Type |
| :------ | :------ |
| `P` | extends [`ConfigEntityProps`](../interfaces/ConfigEntityProps.md) = [`ConfigEntityProps`](../interfaces/ConfigEntityProps.md) |
| `O` | extends [`EntityOpts`](../interfaces/EntityOpts.md) = [`EntityOpts`](../interfaces/EntityOpts.md) |
#### Parameters
| Name | Type |
| :------ | :------ |
| `opts` | `O` |
#### Overrides
[Entity](./Entity-1.md).[constructor](./Entity-1.md#constructor)
## Properties
### \_\_opts\_type\_\_
**\_\_opts\_type\_\_**: `O`
#### Inherited from
[Entity](./Entity-1.md).[__opts_type__](./Entity-1.md#__opts_type__)
___
### entityManager
`Readonly` **entityManager**: [`EntityManager`](./EntityManager.md)
全局的entity管理器
#### Inherited from
[Entity](./Entity-1.md).[entityManager](./Entity-1.md#entitymanager)
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<[`EntityDataChangedEvent`](../interfaces/EntityDataChangedEvent.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\>\>
数据更改事件
#### Inherited from
[Entity](./Entity-1.md).[onDataChange](./Entity-1.md#ondatachange)
___
### onEntityChange
`Readonly` **onEntityChange**: `Event`\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\>
修改会触发
#### Inherited from
[Entity](./Entity-1.md).[onEntityChange](./Entity-1.md#onentitychange)
___
### preDispose
`Readonly` **preDispose**: `DisposableCollection`
销毁前事件管理
#### Inherited from
[Entity](./Entity-1.md).[preDispose](./Entity-1.md#predispose)
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
销毁事件管理
#### Inherited from
[Entity](./Entity-1.md).[toDispose](./Entity-1.md#todispose)
___
### type
`Static` **type**: `string` = `'ConfigEntity'`
#### Overrides
[Entity](./Entity-1.md).[type](./Entity-1.md#type)
## Accessors
### config
`get` **config**(): `P`
#### Returns
`P`
___
### context
`get` **context**(): `any`
#### Returns
`any`
#### Inherited from
Entity.context
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
Entity.disposed
___
### id
`get` **id**(): `string`
实体 id
#### Returns
`string`
#### Inherited from
Entity.id
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
销毁事件
#### Returns
`Event`\<`void`\>
#### Inherited from
Entity.onDispose
___
### savedInManager
`get` **savedInManager**(): `boolean`
是否存到全局 manager，默认 true
#### Returns
`boolean`
#### Inherited from
Entity.savedInManager
___
### type
`get` **type**(): `string`
实体类型
#### Returns
`string`
#### Inherited from
Entity.type
___
### version
`get` **version**(): `number`
实体的版本
#### Returns
`number`
#### Inherited from
Entity.version
## Methods
### addData
**addData**\<`D`\>(`Registry`, `defaultProps?`): `D`
添加数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends [`EntityData`](./EntityData.md)\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\> |
| `defaultProps?` | [`EntityDataProps`](../types/EntityDataProps.md)\<`D`\> |
#### Returns
`D`
#### Inherited from
[Entity](./Entity-1.md).[addData](./Entity-1.md#adddata)
___
### addInitializeData
**addInitializeData**(`datas`, `dataConfig?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `datas` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\>[] |
| `dataConfig?` | `any` |
#### Returns
`void`
#### Inherited from
[Entity](./Entity-1.md).[addInitializeData](./Entity-1.md#addinitializedata)
___
### checkChanged
**checkChanged**(`oldData`, `newData`): `boolean`
判断 config 数据是否变化
#### Parameters
| Name | Type |
| :------ | :------ |
| `oldData` | `P` |
| `newData` | `Partial`\<`P`\> |
#### Returns
`boolean`
___
### dispose
**dispose**(): `void`
销毁实体
#### Returns
`void`
#### Inherited from
[Entity](./Entity-1.md).[dispose](./Entity-1.md#dispose)
___
### fromJSON
**fromJSON**(`data?`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data?` | `any` |
#### Returns
`void`
#### Inherited from
[Entity](./Entity-1.md).[fromJSON](./Entity-1.md#fromjson)
___
### getData
**getData**\<`D`\>(`Registry`): `D`
获取 data 数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends [`EntityData`](./EntityData.md)\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<`D`\> |
#### Returns
`D`
#### Inherited from
[Entity](./Entity-1.md).[getData](./Entity-1.md#getdata)
___
### getDefaultConfig
**getDefaultConfig**(): `P`
#### Returns
`P`
___
### getDefaultDataRegistries
**getDefaultDataRegistries**(): [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\>[]
默认初始化的 Data
#### Returns
[`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\>[]
#### Inherited from
[Entity](./Entity-1.md).[getDefaultDataRegistries](./Entity-1.md#getdefaultdataregistries)
___
### getService
**getService**\<`T`\>(`identifier`): `T`
获取 IOC 服务
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `identifier` | `ServiceIdentifier`\<`T`\> |
#### Returns
`T`
#### Inherited from
[Entity](./Entity-1.md).[getService](./Entity-1.md#getservice)
___
### hasData
**hasData**(`Registry`): `boolean`
是否有指定数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\> |
#### Returns
`boolean`
#### Inherited from
[Entity](./Entity-1.md).[hasData](./Entity-1.md#hasdata)
___
### onConfigChanged
**onConfigChanged**(`fn`): `Disposable`
#### Parameters
| Name | Type |
| :------ | :------ |
| `fn` | (`data`: `P`) => `void` |
#### Returns
`Disposable`
___
### removeData
**removeData**\<`D`\>(`Registry`): `void`
删除数据，初始化状态注入的数据无法被删除
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends [`EntityData`](./EntityData.md)\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<`D`\> |
#### Returns
`void`
#### Inherited from
[Entity](./Entity-1.md).[removeData](./Entity-1.md#removedata)
___
### reset
**reset**(): `void`
重制为初始化状态
#### Returns
`void`
#### Inherited from
[Entity](./Entity-1.md).[reset](./Entity-1.md#reset)
___
### toJSON
**toJSON**(): `any`
存储数据，用于持久化存储
#### Returns
`any`
#### Inherited from
[Entity](./Entity-1.md).[toJSON](./Entity-1.md#tojson)
___
### updateConfig
**updateConfig**(`props`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | `Partial`\<`P`\> |
#### Returns
`void`
___
### updateData
**updateData**\<`D`\>(`Registry`, `props`): `void`
更新实体的数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends [`EntityData`](./EntityData.md)\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<`D`\> |
| `props` | [`EntityDataProps`](../types/EntityDataProps.md)\<`D`\> |
#### Returns
`void`
#### Inherited from
[Entity](./Entity-1.md).[updateData](./Entity-1.md#updatedata)
---
url: /auto-docs/core/classes/ContextMenuService.md
---
# Class: ContextMenuService
圈选右键菜单相关 service
## Table of contents
### Constructors
- [constructor](./ContextMenuService.md#constructor)
### Accessors
- [rightPanelVisible](./ContextMenuService.md#rightpanelvisible)
## Constructors
### constructor
**new ContextMenuService**()
## Accessors
### rightPanelVisible
`get` **rightPanelVisible**(): `boolean`
#### Returns
`boolean`
`set` **rightPanelVisible**(`visible`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `visible` | `boolean` |
#### Returns
`void`
---
url: /auto-docs/core/classes/DefaultClipboardService.md
---
# Class: DefaultClipboardService
剪贴板服务，一般用于管理临时的复制黏贴数据
TODO: 后续可以支持调用浏览器
## Implements
- [`ClipboardService`](../variables/ClipboardService-1.md)
## Table of contents
### Constructors
- [constructor](./DefaultClipboardService.md#constructor)
### Properties
- [onClipboardChanged](./DefaultClipboardService.md#onclipboardchanged)
### Methods
- [readText](./DefaultClipboardService.md#readtext)
- [writeText](./DefaultClipboardService.md#writetext)
## Constructors
### constructor
**new DefaultClipboardService**()
## Properties
### onClipboardChanged
`Readonly` **onClipboardChanged**: `Event`\<`string`\>
#### Implementation of
ClipboardService.onClipboardChanged
## Methods
### readText
**readText**(): `string`
#### Returns
`string`
#### Implementation of
ClipboardService.readText
___
### writeText
**writeText**(`value`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `value` | `string` |
#### Returns
`void`
#### Implementation of
ClipboardService.writeText
---
url: /auto-docs/core/classes/EditorStateConfigEntity.md
---
# Class: EditorStateConfigEntity
编辑状态管理
## Hierarchy
- [`ConfigEntity`](./ConfigEntity.md)
↳ **`EditorStateConfigEntity`**
## Table of contents
### Constructors
- [constructor](./EditorStateConfigEntity.md#constructor)
### Properties
- [\_\_opts\_type\_\_](./EditorStateConfigEntity.md#__opts_type__)
- [entityManager](./EditorStateConfigEntity.md#entitymanager)
- [onDataChange](./EditorStateConfigEntity.md#ondatachange)
- [onEntityChange](./EditorStateConfigEntity.md#onentitychange)
- [onStateChange](./EditorStateConfigEntity.md#onstatechange)
- [preDispose](./EditorStateConfigEntity.md#predispose)
- [toDispose](./EditorStateConfigEntity.md#todispose)
- [type](./EditorStateConfigEntity.md#type)
### Accessors
- [config](./EditorStateConfigEntity.md#config)
- [context](./EditorStateConfigEntity.md#context)
- [disposed](./EditorStateConfigEntity.md#disposed)
- [id](./EditorStateConfigEntity.md#id)
- [isPressingShift](./EditorStateConfigEntity.md#ispressingshift)
- [isPressingSpaceBar](./EditorStateConfigEntity.md#ispressingspacebar)
- [onDispose](./EditorStateConfigEntity.md#ondispose)
- [savedInManager](./EditorStateConfigEntity.md#savedinmanager)
- [type](./EditorStateConfigEntity.md#type-1)
- [version](./EditorStateConfigEntity.md#version)
### Methods
- [addData](./EditorStateConfigEntity.md#adddata)
- [addInitializeData](./EditorStateConfigEntity.md#addinitializedata)
- [changeState](./EditorStateConfigEntity.md#changestate)
- [checkChanged](./EditorStateConfigEntity.md#checkchanged)
- [dispose](./EditorStateConfigEntity.md#dispose)
- [fromJSON](./EditorStateConfigEntity.md#fromjson)
- [getCurrentState](./EditorStateConfigEntity.md#getcurrentstate)
- [getData](./EditorStateConfigEntity.md#getdata)
- [getDefaultConfig](./EditorStateConfigEntity.md#getdefaultconfig)
- [getDefaultDataRegistries](./EditorStateConfigEntity.md#getdefaultdataregistries)
- [getService](./EditorStateConfigEntity.md#getservice)
- [getStateFromShortcut](./EditorStateConfigEntity.md#getstatefromshortcut)
- [getStates](./EditorStateConfigEntity.md#getstates)
- [hasData](./EditorStateConfigEntity.md#hasdata)
- [is](./EditorStateConfigEntity.md#is)
- [isMouseFriendlyMode](./EditorStateConfigEntity.md#ismousefriendlymode)
- [onCancel](./EditorStateConfigEntity.md#oncancel)
- [onConfigChanged](./EditorStateConfigEntity.md#onconfigchanged)
- [registerState](./EditorStateConfigEntity.md#registerstate)
- [removeData](./EditorStateConfigEntity.md#removedata)
- [reset](./EditorStateConfigEntity.md#reset)
- [toDefaultState](./EditorStateConfigEntity.md#todefaultstate)
- [toJSON](./EditorStateConfigEntity.md#tojson)
- [updateConfig](./EditorStateConfigEntity.md#updateconfig)
- [updateData](./EditorStateConfigEntity.md#updatedata)
## Constructors
### constructor
**new EditorStateConfigEntity**(`opts`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `opts` | [`EntityOpts`](../interfaces/EntityOpts.md) |
#### Overrides
[ConfigEntity](./ConfigEntity.md).[constructor](./ConfigEntity.md#constructor)
## Properties
### \_\_opts\_type\_\_
**\_\_opts\_type\_\_**: [`EntityOpts`](../interfaces/EntityOpts.md)
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[__opts_type__](./ConfigEntity.md#__opts_type__)
___
### entityManager
`Readonly` **entityManager**: [`EntityManager`](./EntityManager.md)
全局的entity管理器
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[entityManager](./ConfigEntity.md#entitymanager)
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<[`EntityDataChangedEvent`](../interfaces/EntityDataChangedEvent.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\>\>
数据更改事件
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[onDataChange](./ConfigEntity.md#ondatachange)
___
### onEntityChange
`Readonly` **onEntityChange**: `Event`\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\>
修改会触发
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[onEntityChange](./ConfigEntity.md#onentitychange)
___
### onStateChange
`Readonly` **onStateChange**: `Event`\<[`EditorStateChangeEvent`](../interfaces/EditorStateChangeEvent.md)\>
___
### preDispose
`Readonly` **preDispose**: `DisposableCollection`
销毁前事件管理
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[preDispose](./ConfigEntity.md#predispose)
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
销毁事件管理
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[toDispose](./ConfigEntity.md#todispose)
___
### type
`Static` **type**: `string` = `'EditorStateConfigEntity'`
#### Overrides
[ConfigEntity](./ConfigEntity.md).[type](./ConfigEntity.md#type)
## Accessors
### config
`get` **config**(): `P`
#### Returns
`P`
#### Inherited from
ConfigEntity.config
___
### context
`get` **context**(): `any`
#### Returns
`any`
#### Inherited from
ConfigEntity.context
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
ConfigEntity.disposed
___
### id
`get` **id**(): `string`
实体 id
#### Returns
`string`
#### Inherited from
ConfigEntity.id
___
### isPressingShift
`get` **isPressingShift**(): `boolean`
#### Returns
`boolean`
`set` **isPressingShift**(`isPressing`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `isPressing` | `boolean` |
#### Returns
`void`
___
### isPressingSpaceBar
`get` **isPressingSpaceBar**(): `boolean`
#### Returns
`boolean`
`set` **isPressingSpaceBar**(`isPressing`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `isPressing` | `boolean` |
#### Returns
`void`
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
销毁事件
#### Returns
`Event`\<`void`\>
#### Inherited from
ConfigEntity.onDispose
___
### savedInManager
`get` **savedInManager**(): `boolean`
是否存到全局 manager，默认 true
#### Returns
`boolean`
#### Inherited from
ConfigEntity.savedInManager
___
### type
`get` **type**(): `string`
实体类型
#### Returns
`string`
#### Inherited from
ConfigEntity.type
___
### version
`get` **version**(): `number`
实体的版本
#### Returns
`number`
#### Inherited from
ConfigEntity.version
## Methods
### addData
**addData**\<`D`\>(`Registry`, `defaultProps?`): `D`
添加数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends [`EntityData`](./EntityData.md)\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\> |
| `defaultProps?` | [`EntityDataProps`](../types/EntityDataProps.md)\<`D`\> |
#### Returns
`D`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[addData](./ConfigEntity.md#adddata)
___
### addInitializeData
**addInitializeData**(`datas`, `dataConfig?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `datas` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\>[] |
| `dataConfig?` | `any` |
#### Returns
`void`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[addInitializeData](./ConfigEntity.md#addinitializedata)
___
### changeState
**changeState**(`stateId`, `event?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `stateId` | `string` |
| `event?` | `MouseEvent`\<`Element`, `MouseEvent`\> |
#### Returns
`void`
___
### checkChanged
**checkChanged**(`oldData`, `newData`): `boolean`
判断 config 数据是否变化
#### Parameters
| Name | Type |
| :------ | :------ |
| `oldData` | [`ConfigEntityProps`](../interfaces/ConfigEntityProps.md) |
| `newData` | `Partial`\<[`ConfigEntityProps`](../interfaces/ConfigEntityProps.md)\> |
#### Returns
`boolean`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[checkChanged](./ConfigEntity.md#checkchanged)
___
### dispose
**dispose**(): `void`
销毁实体
#### Returns
`void`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[dispose](./ConfigEntity.md#dispose)
___
### fromJSON
**fromJSON**(`data?`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data?` | `any` |
#### Returns
`void`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[fromJSON](./ConfigEntity.md#fromjson)
___
### getCurrentState
**getCurrentState**(): `undefined` \| [`EditorState`](../interfaces/EditorState-1.md)
#### Returns
`undefined` \| [`EditorState`](../interfaces/EditorState-1.md)
___
### getData
**getData**\<`D`\>(`Registry`): `D`
获取 data 数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends [`EntityData`](./EntityData.md)\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<`D`\> |
#### Returns
`D`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[getData](./ConfigEntity.md#getdata)
___
### getDefaultConfig
**getDefaultConfig**(): [`ConfigEntityProps`](../interfaces/ConfigEntityProps.md)
#### Returns
[`ConfigEntityProps`](../interfaces/ConfigEntityProps.md)
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[getDefaultConfig](./ConfigEntity.md#getdefaultconfig)
___
### getDefaultDataRegistries
**getDefaultDataRegistries**(): [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\>[]
默认初始化的 Data
#### Returns
[`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\>[]
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[getDefaultDataRegistries](./ConfigEntity.md#getdefaultdataregistries)
___
### getService
**getService**\<`T`\>(`identifier`): `T`
获取 IOC 服务
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `identifier` | `ServiceIdentifier`\<`T`\> |
#### Returns
`T`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[getService](./ConfigEntity.md#getservice)
___
### getStateFromShortcut
**getStateFromShortcut**(`e`): `undefined` \| [`EditorState`](../interfaces/EditorState-1.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `e` | `KeyboardEvent` |
#### Returns
`undefined` \| [`EditorState`](../interfaces/EditorState-1.md)
___
### getStates
**getStates**(): [`EditorState`](../interfaces/EditorState-1.md)[]
#### Returns
[`EditorState`](../interfaces/EditorState-1.md)[]
___
### hasData
**hasData**(`Registry`): `boolean`
是否有指定数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\> |
#### Returns
`boolean`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[hasData](./ConfigEntity.md#hasdata)
___
### is
**is**(`stateId`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `stateId` | `string` |
#### Returns
`boolean`
___
### isMouseFriendlyMode
**isMouseFriendlyMode**(): `boolean`
是否为鼠标友好模式
#### Returns
`boolean`
___
### onCancel
**onCancel**(`stateId`, `fn`): `Disposable`
取消指定状态后触发
#### Parameters
| Name | Type |
| :------ | :------ |
| `stateId` | `string` |
| `fn` | () => `void` |
#### Returns
`Disposable`
___
### onConfigChanged
**onConfigChanged**(`fn`): `Disposable`
#### Parameters
| Name | Type |
| :------ | :------ |
| `fn` | (`data`: [`ConfigEntityProps`](../interfaces/ConfigEntityProps.md)) => `void` |
#### Returns
`Disposable`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[onConfigChanged](./ConfigEntity.md#onconfigchanged)
___
### registerState
**registerState**(`state`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `state` | [`EditorState`](../interfaces/EditorState-1.md) |
#### Returns
`void`
___
### removeData
**removeData**\<`D`\>(`Registry`): `void`
删除数据，初始化状态注入的数据无法被删除
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends [`EntityData`](./EntityData.md)\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<`D`\> |
#### Returns
`void`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[removeData](./ConfigEntity.md#removedata)
___
### reset
**reset**(): `void`
重制为初始化状态
#### Returns
`void`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[reset](./ConfigEntity.md#reset)
___
### toDefaultState
**toDefaultState**(): `void`
#### Returns
`void`
___
### toJSON
**toJSON**(): `any`
存储数据，用于持久化存储
#### Returns
`any`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[toJSON](./ConfigEntity.md#tojson)
___
### updateConfig
**updateConfig**(`props`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | `Partial`\<[`ConfigEntityProps`](../interfaces/ConfigEntityProps.md)\> |
#### Returns
`void`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[updateConfig](./ConfigEntity.md#updateconfig)
___
### updateData
**updateData**\<`D`\>(`Registry`, `props`): `void`
更新实体的数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends [`EntityData`](./EntityData.md)\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<`D`\> |
| `props` | [`EntityDataProps`](../types/EntityDataProps.md)\<`D`\> |
#### Returns
`void`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[updateData](./ConfigEntity.md#updatedata)
---
url: /auto-docs/core/classes/Entity-1.md
---
# Class: Entity\
## Type parameters
| Name | Type |
| :------ | :------ |
| `OPTS` | extends [`EntityOpts`](../interfaces/EntityOpts.md) = [`EntityOpts`](../interfaces/EntityOpts.md) |
## Hierarchy
- **`Entity`**
↳ [`ConfigEntity`](./ConfigEntity.md)
## Implements
- `Disposable`
## Table of contents
### Constructors
- [constructor](./Entity-1.md#constructor)
### Properties
- [\_\_opts\_type\_\_](./Entity-1.md#__opts_type__)
- [entityManager](./Entity-1.md#entitymanager)
- [onDataChange](./Entity-1.md#ondatachange)
- [onEntityChange](./Entity-1.md#onentitychange)
- [preDispose](./Entity-1.md#predispose)
- [toDispose](./Entity-1.md#todispose)
- [type](./Entity-1.md#type)
### Accessors
- [context](./Entity-1.md#context)
- [disposed](./Entity-1.md#disposed)
- [id](./Entity-1.md#id)
- [onDispose](./Entity-1.md#ondispose)
- [savedInManager](./Entity-1.md#savedinmanager)
- [type](./Entity-1.md#type-1)
- [version](./Entity-1.md#version)
### Methods
- [addData](./Entity-1.md#adddata)
- [addInitializeData](./Entity-1.md#addinitializedata)
- [dispose](./Entity-1.md#dispose)
- [fromJSON](./Entity-1.md#fromjson)
- [getData](./Entity-1.md#getdata)
- [getDefaultDataRegistries](./Entity-1.md#getdefaultdataregistries)
- [getService](./Entity-1.md#getservice)
- [hasData](./Entity-1.md#hasdata)
- [removeData](./Entity-1.md#removedata)
- [reset](./Entity-1.md#reset)
- [toJSON](./Entity-1.md#tojson)
- [updateData](./Entity-1.md#updatedata)
## Constructors
### constructor
**new Entity**\<`OPTS`\>(`opts`)
#### Type parameters
| Name | Type |
| :------ | :------ |
| `OPTS` | extends [`EntityOpts`](../interfaces/EntityOpts.md) = [`EntityOpts`](../interfaces/EntityOpts.md) |
#### Parameters
| Name | Type |
| :------ | :------ |
| `opts` | `OPTS` |
## Properties
### \_\_opts\_type\_\_
**\_\_opts\_type\_\_**: `OPTS`
___
### entityManager
`Readonly` **entityManager**: [`EntityManager`](./EntityManager.md)
全局的entity管理器
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<[`EntityDataChangedEvent`](../interfaces/EntityDataChangedEvent.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\>\>
数据更改事件
___
### onEntityChange
`Readonly` **onEntityChange**: `Event`\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\>
修改会触发
___
### preDispose
`Readonly` **preDispose**: `DisposableCollection`
销毁前事件管理
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
销毁事件管理
___
### type
`Static` **type**: `string` = `'Entity'`
## Accessors
### context
`get` **context**(): `any`
#### Returns
`any`
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
___
### id
`get` **id**(): `string`
实体 id
#### Returns
`string`
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
销毁事件
#### Returns
`Event`\<`void`\>
___
### savedInManager
`get` **savedInManager**(): `boolean`
是否存到全局 manager，默认 true
#### Returns
`boolean`
___
### type
`get` **type**(): `string`
实体类型
#### Returns
`string`
___
### version
`get` **version**(): `number`
实体的版本
#### Returns
`number`
## Methods
### addData
**addData**\<`D`\>(`Registry`, `defaultProps?`): `D`
添加数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends [`EntityData`](./EntityData.md)\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\> |
| `defaultProps?` | [`EntityDataProps`](../types/EntityDataProps.md)\<`D`\> |
#### Returns
`D`
___
### addInitializeData
**addInitializeData**(`datas`, `dataConfig?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `datas` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\>[] |
| `dataConfig?` | `any` |
#### Returns
`void`
___
### dispose
**dispose**(): `void`
销毁实体
#### Returns
`void`
#### Implementation of
Disposable.dispose
___
### fromJSON
**fromJSON**(`data?`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data?` | `any` |
#### Returns
`void`
___
### getData
**getData**\<`D`\>(`Registry`): `D`
获取 data 数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends [`EntityData`](./EntityData.md)\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<`D`\> |
#### Returns
`D`
___
### getDefaultDataRegistries
**getDefaultDataRegistries**(): [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\>[]
默认初始化的 Data
#### Returns
[`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\>[]
___
### getService
**getService**\<`T`\>(`identifier`): `T`
获取 IOC 服务
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `identifier` | `ServiceIdentifier`\<`T`\> |
#### Returns
`T`
___
### hasData
**hasData**(`Registry`): `boolean`
是否有指定数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\> |
#### Returns
`boolean`
___
### removeData
**removeData**\<`D`\>(`Registry`): `void`
删除数据，初始化状态注入的数据无法被删除
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends [`EntityData`](./EntityData.md)\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<`D`\> |
#### Returns
`void`
___
### reset
**reset**(): `void`
重制为初始化状态
#### Returns
`void`
___
### toJSON
**toJSON**(): `any`
存储数据，用于持久化存储
#### Returns
`any`
___
### updateData
**updateData**\<`D`\>(`Registry`, `props`): `void`
更新实体的数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends [`EntityData`](./EntityData.md)\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<`D`\> |
| `props` | [`EntityDataProps`](../types/EntityDataProps.md)\<`D`\> |
#### Returns
`void`
---
url: /auto-docs/core/classes/EntityData.md
---
# Class: EntityData\
实体的数据块
## Type parameters
| Name | Type |
| :------ | :------ |
| `DATA` | `any` \| `number` \| `string` |
| `OPTS` | extends `Object` = {} |
## Hierarchy
- `DisposableImpl`
↳ **`EntityData`**
↳↳ [`OriginData`](./OriginData.md)
↳↳ [`OpacityData`](./OpacityData.md)
↳↳ [`PositionData`](./PositionData.md)
↳↳ [`RotationData`](./RotationData.md)
↳↳ [`ScaleData`](./ScaleData.md)
↳↳ [`SizeData`](./SizeData.md)
↳↳ [`SkewData`](./SkewData.md)
↳↳ [`TransformData`](./TransformData-1.md)
## Table of contents
### Constructors
- [constructor](./EntityData.md#constructor)
### Properties
- [entity](./EntityData.md#entity)
- [onDataChange](./EntityData.md#ondatachange)
- [onWillChange](./EntityData.md#onwillchange)
- [opts](./EntityData.md#opts)
- [toDispose](./EntityData.md#todispose)
- [type](./EntityData.md#type)
### Accessors
- [changeLocked](./EntityData.md#changelocked)
- [data](./EntityData.md#data)
- [disposed](./EntityData.md#disposed)
- [onDispose](./EntityData.md#ondispose)
- [type](./EntityData.md#type-1)
- [version](./EntityData.md#version)
### Methods
- [checkChanged](./EntityData.md#checkchanged)
- [dispose](./EntityData.md#dispose)
- [fireChange](./EntityData.md#firechange)
- [fireWillChange](./EntityData.md#firewillchange)
- [fromJSON](./EntityData.md#fromjson)
- [fullyUpdate](./EntityData.md#fullyupdate)
- [getDefaultData](./EntityData.md#getdefaultdata)
- [toJSON](./EntityData.md#tojson)
- [update](./EntityData.md#update)
## Constructors
### constructor
**new EntityData**\<`DATA`, `OPTS`\>(`entity`, `opts?`)
#### Type parameters
| Name | Type |
| :------ | :------ |
| `DATA` | `any` |
| `OPTS` | extends `Object` = {} |
#### Parameters
| Name | Type |
| :------ | :------ |
| `entity` | [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\> |
| `opts?` | `OPTS` |
#### Overrides
DisposableImpl.constructor
## Properties
### entity
**entity**: [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<[`EntityData`](./EntityData.md)\<`DATA`, `OPTS`\>\>
修改后触发
___
### onWillChange
`Readonly` **onWillChange**: `Event`\<[`EntityData`](./EntityData.md)\<`DATA`, `OPTS`\>\>
修改前触发
___
### opts
`Optional` `Readonly` **opts**: `OPTS`
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
#### Inherited from
DisposableImpl.toDispose
___
### type
`Static` **type**: `string` = `'EntityData'`
## Accessors
### changeLocked
`get` **changeLocked**(): `boolean`
#### Returns
`boolean`
`set` **changeLocked**(`p`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `p` | `boolean` |
#### Returns
`void`
___
### data
`get` **data**(): `DATA`
当前数据
#### Returns
`DATA`
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
DisposableImpl.disposed
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
#### Returns
`Event`\<`void`\>
#### Inherited from
DisposableImpl.onDispose
___
### type
`get` **type**(): `string`
data 类型
#### Returns
`string`
___
### version
`get` **version**(): `number`
#### Returns
`number`
## Methods
### checkChanged
**checkChanged**(`newProps`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `newProps` | `DATA` \| `Partial`\<`DATA`\> |
#### Returns
`boolean`
**`Deprecated`**
检测属性是否更改，默认采用浅比较
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Inherited from
DisposableImpl.dispose
___
### fireChange
**fireChange**(): `void`
#### Returns
`void`
___
### fireWillChange
**fireWillChange**(): `void`
#### Returns
`void`
___
### fromJSON
**fromJSON**(`data`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data` | `object` |
#### Returns
`void`
___
### fullyUpdate
**fullyUpdate**(`props`): `void`
更新全量数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | `DATA` |
#### Returns
`void`
___
### getDefaultData
`Abstract` **getDefaultData**(): `DATA`
初始化数据
#### Returns
`DATA`
___
### toJSON
**toJSON**(): `any`
存储数据，一般在关闭浏览器后需要暂时存到 localStorage
#### Returns
`any`
___
### update
**update**(`props`, `value?`): `void`
更新单个数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | `DATA` \| `Partial`\<`DATA`\> \| keyof `DATA` |
| `value?` | `any` |
#### Returns
`void`
---
url: /auto-docs/core/classes/EntityManager.md
---
# Class: EntityManager
TODO registry 改成 decorator
Entity 管理器，全局唯一
## Implements
- `Disposable`
## Table of contents
### Constructors
- [constructor](./EntityManager.md#constructor)
### Properties
- [changeEntityLocked](./EntityManager.md#changeentitylocked)
- [context](./EntityManager.md#context)
- [contributions](./EntityManager.md#contributions)
- [onEntityChange](./EntityManager.md#onentitychange)
- [onEntityDataChange](./EntityManager.md#onentitydatachange)
- [onEntityLifeCycleChange](./EntityManager.md#onentitylifecyclechange)
- [toDispose](./EntityManager.md#todispose)
### Methods
- [createEntity](./EntityManager.md#createentity)
- [dispose](./EntityManager.md#dispose)
- [fireEntityChanged](./EntityManager.md#fireentitychanged)
- [fireEntityDataChanged](./EntityManager.md#fireentitydatachanged)
- [fireEntityLifeCycleChanged](./EntityManager.md#fireentitylifecyclechanged)
- [getDataInjector](./EntityManager.md#getdatainjector)
- [getDataRegistryByType](./EntityManager.md#getdataregistrybytype)
- [getEntities](./EntityManager.md#getentities)
- [getEntity](./EntityManager.md#getentity)
- [getEntityById](./EntityManager.md#getentitybyid)
- [getEntityDataVersion](./EntityManager.md#getentitydataversion)
- [getEntityDatas](./EntityManager.md#getentitydatas)
- [getEntityVersion](./EntityManager.md#getentityversion)
- [getRegistryByType](./EntityManager.md#getregistrybytype)
- [getService](./EntityManager.md#getservice)
- [hasEntity](./EntityManager.md#hasentity)
- [init](./EntityManager.md#init)
- [isConfigEntity](./EntityManager.md#isconfigentity)
- [registerEntity](./EntityManager.md#registerentity)
- [registerEntityData](./EntityManager.md#registerentitydata)
- [removeEntities](./EntityManager.md#removeentities)
- [removeEntityById](./EntityManager.md#removeentitybyid)
- [reset](./EntityManager.md#reset)
- [resetEntities](./EntityManager.md#resetentities)
- [resetEntity](./EntityManager.md#resetentity)
- [restoreState](./EntityManager.md#restorestate)
- [storeState](./EntityManager.md#storestate)
- [updateConfigEntity](./EntityManager.md#updateconfigentity)
## Constructors
### constructor
**new EntityManager**()
## Properties
### changeEntityLocked
**changeEntityLocked**: `boolean` = `false`
暂停触发实体类型变化
___
### context
**context**: `any`
___
### contributions
**contributions**: [`EntityManagerContribution`](../variables/EntityManagerContribution-1.md)[]
___
### onEntityChange
`Readonly` **onEntityChange**: `Event`\<`string`\>
当对应的实体类型变化后触发
___
### onEntityDataChange
`Readonly` **onEntityDataChange**: `Event`\<\{ `entityDataType`: `string` ; `entityType`: `string` }\>
entity data 数据变化
___
### onEntityLifeCycleChange
`Readonly` **onEntityLifeCycleChange**: `Event`\<\{ `entity`: [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\> ; `type`: ``"add"`` \| ``"update"`` \| ``"delete"`` }\>
Entity 生命周期变化
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
## Methods
### createEntity
**createEntity**\<`T`\>(`Registry`, `opts?`): `T`
创建实体
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md), `T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
| `opts?` | `Omit`\<`T`[``"__opts_type__"``], ``"entityManager"``\> |
#### Returns
`T`
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Implementation of
Disposable.dispose
___
### fireEntityChanged
**fireEntityChanged**(`entity`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `entity` | `string` \| [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\> |
#### Returns
`void`
___
### fireEntityDataChanged
**fireEntityDataChanged**(`entityType`, `entityDataType`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `entityType` | `string` |
| `entityDataType` | `string` |
#### Returns
`void`
___
### fireEntityLifeCycleChanged
**fireEntityLifeCycleChanged**(`«destructured»`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `«destructured»` | `Object` |
| › `entity` | [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\> |
| › `type` | ``"add"`` \| ``"update"`` \| ``"delete"`` |
#### Returns
`void`
___
### getDataInjector
**getDataInjector**(`registry`): `undefined` \| [`EntityDataInjector`](../types/EntityDataInjector.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | `string` \| [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\> |
#### Returns
`undefined` \| [`EntityDataInjector`](../types/EntityDataInjector.md)
___
### getDataRegistryByType
**getDataRegistryByType**(`type`): `undefined` \| [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\>
#### Parameters
| Name | Type |
| :------ | :------ |
| `type` | `string` |
#### Returns
`undefined` \| [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\>
___
### getEntities
**getEntities**\<`T`\>(`registry`): `T`[]
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md), `T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
#### Returns
`T`[]
___
### getEntity
**getEntity**\<`T`\>(`registry`, `autoCreate?`): `undefined` \| `T`
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md), `T`\> |
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `registry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> | - |
| `autoCreate?` | `boolean` | 是否要自动创建，默认 false |
#### Returns
`undefined` \| `T`
___
### getEntityById
**getEntityById**\<`T`\>(`id`): `undefined` \| `T`
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md), `T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `id` | `string` |
#### Returns
`undefined` \| `T`
___
### getEntityDataVersion
**getEntityDataVersion**(`registry`): `number`
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | `string` \| [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\> |
#### Returns
`number`
___
### getEntityDatas
**getEntityDatas**\<`T`\>(`entityRegistry`, `dataRegistry`): `T`[]
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`EntityData`](./EntityData.md)\<`any`, {}, `T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `entityRegistry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
| `dataRegistry` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<`T`\> |
#### Returns
`T`[]
___
### getEntityVersion
**getEntityVersion**(`registry`): `number`
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | `string` \| [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
#### Returns
`number`
___
### getRegistryByType
**getRegistryByType**(`type`): `undefined` \| [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\>
#### Parameters
| Name | Type |
| :------ | :------ |
| `type` | `string` |
#### Returns
`undefined` \| [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\>
___
### getService
**getService**\<`T`\>(`identifier`): `T`
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `identifier` | `ServiceIdentifier`\<`T`\> |
#### Returns
`T`
___
### hasEntity
**hasEntity**(`registry`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
#### Returns
`boolean`
___
### init
**init**(): `void`
#### Returns
`void`
___
### isConfigEntity
**isConfigEntity**(`type`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `type` | `string` |
#### Returns
`boolean`
___
### registerEntity
**registerEntity**(`Registry`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
#### Returns
`void`
___
### registerEntityData
**registerEntityData**(`Registry`, `injector?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\> |
| `injector?` | [`EntityDataInjector`](../types/EntityDataInjector.md) |
#### Returns
`void`
___
### removeEntities
**removeEntities**(`Registry`): `void`
批量删除实体
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
#### Returns
`void`
___
### removeEntityById
**removeEntityById**(`id`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `id` | `string` |
#### Returns
`boolean`
___
### reset
**reset**(): `void`
重制所有 entity 为初始化状态
#### Returns
`void`
___
### resetEntities
**resetEntities**(`registry`): `void`
触发实体 reset
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
#### Returns
`void`
___
### resetEntity
**resetEntity**(`registry`, `autoCreate?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
| `autoCreate?` | `boolean` |
#### Returns
`void`
___
### restoreState
**restoreState**(`data`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `data` | [`EntityJSON`](../interfaces/EntityJSON.md)[] |
#### Returns
`void`
___
### storeState
**storeState**(`«destructured»?`): [`EntityJSON`](../interfaces/EntityJSON.md)[]
只存储 config 数据，忽略动态数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `«destructured»` | `Object` |
| › `configOnly?` | `boolean` |
#### Returns
[`EntityJSON`](../interfaces/EntityJSON.md)[]
___
### updateConfigEntity
**updateConfigEntity**\<`E`\>(`registry`, `config`): `void`
#### Type parameters
| Name | Type |
| :------ | :------ |
| `E` | extends [`ConfigEntity`](./ConfigEntity.md)\<[`ConfigEntityProps`](../interfaces/ConfigEntityProps.md), [`EntityOpts`](../interfaces/EntityOpts.md), `E`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
| `config` | `Partial`\<`E`[``"config"``]\> |
#### Returns
`void`
---
url: /auto-docs/core/classes/FlushLayerMessage.md
---
# Class: FlushLayerMessage
## Hierarchy
- `ConflatableMessage`
↳ **`FlushLayerMessage`**
## Table of contents
### Constructors
- [constructor](./FlushLayerMessage.md#constructor)
### Properties
- [isConflatable](./FlushLayerMessage.md#isconflatable)
- [layer](./FlushLayerMessage.md#layer)
- [type](./FlushLayerMessage.md#type)
### Methods
- [conflate](./FlushLayerMessage.md#conflate)
## Constructors
### constructor
**new FlushLayerMessage**(`layer`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `layer` | [`Layer`](./Layer.md)\<`any`, `any`\> |
#### Overrides
ConflatableMessage.constructor
## Properties
### isConflatable
`Readonly` **isConflatable**: `boolean`
Test whether the message is conflatable.
#### Notes
This property is always `true`.
#### Inherited from
ConflatableMessage.isConflatable
___
### layer
`Readonly` **layer**: [`Layer`](./Layer.md)\<`any`, `any`\>
___
### type
`Readonly` **type**: `string`
The type of the message.
#### Notes
The `type` of a message should be related directly to its actual
runtime type. This means that `type` can and will be used to cast
the message to the relevant derived `Message` subtype.
#### Inherited from
ConflatableMessage.type
## Methods
### conflate
**conflate**(`other`): `boolean`
Conflate this message with another message of the same `type`.
#### Notes
This method always returns `true`.
#### Parameters
| Name | Type |
| :------ | :------ |
| `other` | `ConflatableMessage` |
#### Returns
`boolean`
#### Inherited from
ConflatableMessage.conflate
---
url: /auto-docs/core/classes/Layer.md
---
# Class: Layer\
基础 layer
## Type parameters
| Name | Type |
| :------ | :------ |
| `OPT` | extends [`LayerOptions`](../variables/LayerOptions-1.md) = `any` |
| `CONTEXT` | extends [`PlaygroundContext`](../variables/PlaygroundContext-1.md) = [`PlaygroundContext`](../variables/PlaygroundContext-1.md) |
## Hierarchy
- **`Layer`**
↳ [`PlaygroundLayer`](./PlaygroundLayer.md)
## Table of contents
### Constructors
- [constructor](./Layer.md#constructor)
### Properties
- [config](./Layer.md#config)
- [context](./Layer.md#context)
- [entityManager](./Layer.md#entitymanager)
- [getOtherLayer](./Layer.md#getotherlayer)
- [isFocused](./Layer.md#isfocused)
- [listenGlobalEvent](./Layer.md#listenglobalevent)
- [listenPlaygroundEvent](./Layer.md#listenplaygroundevent)
- [node](./Layer.md#node)
- [observeManager](./Layer.md#observemanager)
- [options](./Layer.md#options)
- [pipelineNode](./Layer.md#pipelinenode)
- [playgroundNode](./Layer.md#playgroundnode)
- [reloadEntities](./Layer.md#reloadentities)
- [renderWithReactMemo](./Layer.md#renderwithreactmemo)
### Methods
- [autorun](./Layer.md#autorun)
- [createDOMCache](./Layer.md#createdomcache)
- [dispose](./Layer.md#dispose)
- [getPosFromMouseEvent](./Layer.md#getposfrommouseevent)
- [onBlur](./Layer.md#onblur)
- [onFocus](./Layer.md#onfocus)
- [onReadonlyOrDisabledChange](./Layer.md#onreadonlyordisabledchange)
- [onReady](./Layer.md#onready)
- [onResize](./Layer.md#onresize)
- [onScroll](./Layer.md#onscroll)
- [onViewportChange](./Layer.md#onviewportchange)
- [onZoom](./Layer.md#onzoom)
- [render](./Layer.md#render)
## Constructors
### constructor
**new Layer**\<`OPT`, `CONTEXT`\>()
#### Type parameters
| Name | Type |
| :------ | :------ |
| `OPT` | extends [`LayerOptions`](../variables/LayerOptions-1.md) = `any` |
| `CONTEXT` | extends `unknown` = `any` |
## Properties
### config
**config**: [`PlaygroundConfigEntity`](./PlaygroundConfigEntity.md)
全局画布配置
___
### context
`Readonly` **context**: `CONTEXT`
___
### entityManager
`Readonly` **entityManager**: [`EntityManager`](./EntityManager.md)
实体管理器
___
### getOtherLayer
**getOtherLayer**: \(`layerRegistry`: [`LayerRegistry`](../interfaces/LayerRegistry.md)\<`T`\>) => `undefined` \| `T`
#### Type declaration
\<`T`\>(`layerRegistry`): `undefined` \| `T`
可以用于获取别的 layer
##### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`Layer`](./Layer.md)\<`any`, `any`, `T`\> |
##### Parameters
| Name | Type |
| :------ | :------ |
| `layerRegistry` | [`LayerRegistry`](../interfaces/LayerRegistry.md)\<`T`\> |
##### Returns
`undefined` \| `T`
___
### isFocused
`Readonly` **isFocused**: `boolean`
playground 是否 focused
___
### listenGlobalEvent
**listenGlobalEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 document 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
___
### listenPlaygroundEvent
**listenPlaygroundEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 playground 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
___
### node
**node**: `HTMLElement`
layer 可能存在 dom 也可能没有，如果有，则会加入到 pipeline 的 dom 节点上
___
### observeManager
**observeManager**: [`PipelineEntities`](../interfaces/PipelineEntities.md)
当前 layer 的所有监听的实体数据
___
### options
**options**: `OPT`
layer 的配置, 由 registerLayer(Layer, LayerOptions) 传入
___
### pipelineNode
**pipelineNode**: `HTMLElement`
父节点
___
### playgroundNode
**playgroundNode**: `HTMLElement`
画布根节点
___
### reloadEntities
**reloadEntities**: () => `boolean`
#### Type declaration
(): `boolean`
加载 layer 注册的实体数据，内部使用，不需要手动触发
##### Returns
`boolean`
数据是否变化
___
### renderWithReactMemo
**renderWithReactMemo**: `boolean` = `true`
默认在渲染时候都会启用 react memo 进行隔离，这种情况就需要数据驱动更新
## Methods
### autorun
`Optional` **autorun**(): `void`
自动触发更新，在不需要 react 的时候用这个方法
#### Returns
`void`
___
### createDOMCache
**createDOMCache**\<`T`\>(`className`, `children?`): `CacheManager`\<`T`, `CacheOriginItem`\>
创建 dom 缓冲池
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `DOMCache`\<`T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `className` | `string` \| () => `HTMLElement` |
| `children?` | `string` |
#### Returns
`CacheManager`\<`T`, `CacheOriginItem`\>
___
### dispose
**dispose**(): `void`
销毁
#### Returns
`void`
___
### getPosFromMouseEvent
**getPosFromMouseEvent**(`event`, `addScale?`): [`PositionSchema`](../interfaces/PositionSchema.md)
获取鼠标在 Playground 的位置
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `event` | `Object` | `undefined` |
| `event.clientX` | `number` | `undefined` |
| `event.clientY` | `number` | `undefined` |
| `addScale` | `boolean` | `true` |
#### Returns
[`PositionSchema`](../interfaces/PositionSchema.md)
___
### onBlur
`Optional` **onBlur**(): `void`
playground blur 时候触发
#### Returns
`void`
___
### onFocus
`Optional` **onFocus**(): `void`
playground focus 时候触发
#### Returns
`void`
___
### onReadonlyOrDisabledChange
`Optional` **onReadonlyOrDisabledChange**(`state`): `void`
readonly 或 disable 状态变化
#### Parameters
| Name | Type |
| :------ | :------ |
| `state` | `Object` |
| `state.disabled` | `boolean` |
| `state.readonly` | `boolean` |
#### Returns
`void`
___
### onReady
`Optional` **onReady**(): `void`
初始化时候触发
#### Returns
`void`
___
### onResize
`Optional` **onResize**(`size`): `void`
playground 大小变化时候会触发
#### Parameters
| Name | Type |
| :------ | :------ |
| `size` | [`PipelineDimension`](../interfaces/PipelineDimension.md) |
#### Returns
`void`
___
### onScroll
`Optional` **onScroll**(`scroll`): `void`
监听滚动
#### Parameters
| Name | Type |
| :------ | :------ |
| `scroll` | `Object` |
| `scroll.scrollX` | `number` |
| `scroll.scrollY` | `number` |
#### Returns
`void`
___
### onViewportChange
`Optional` **onViewportChange**(): `void`
viewport 更新触发
#### Returns
`void`
___
### onZoom
`Optional` **onZoom**(`zoom`): `void`
监听缩放
#### Parameters
| Name | Type |
| :------ | :------ |
| `zoom` | `number` |
#### Returns
`void`
___
### render
`Optional` **render**(): `Element`
绘制 react
#### Returns
`Element`
---
url: /auto-docs/core/classes/LocalStorageService.md
---
# Class: LocalStorageService
## Implements
- [`StorageService`](../variables/StorageService-1.md)
## Table of contents
### Constructors
- [constructor](./LocalStorageService.md#constructor)
### Methods
- [getData](./LocalStorageService.md#getdata)
- [prefix](./LocalStorageService.md#prefix)
- [setData](./LocalStorageService.md#setdata)
- [setPrefix](./LocalStorageService.md#setprefix)
## Constructors
### constructor
**new LocalStorageService**()
## Methods
### getData
**getData**\<`T`\>(`key`, `defaultValue?`): `T`
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `key` | `string` |
| `defaultValue?` | `T` |
#### Returns
`T`
#### Implementation of
StorageService.getData
___
### prefix
**prefix**(`key`): `string`
#### Parameters
| Name | Type |
| :------ | :------ |
| `key` | `string` |
#### Returns
`string`
___
### setData
**setData**\<`T`\>(`key`, `data`): `void`
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `key` | `string` |
| `data` | `T` |
#### Returns
`void`
#### Implementation of
StorageService.setData
___
### setPrefix
**setPrefix**(`prefix`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `prefix` | `string` |
#### Returns
`void`
---
url: /auto-docs/core/classes/LoggerService.md
---
# Class: LoggerService
画布全局的选择器，可以放任何东西
## Implements
- `Disposable`
## Table of contents
### Constructors
- [constructor](./LoggerService.md#constructor)
### Properties
- [onLogger](./LoggerService.md#onlogger)
### Methods
- [dispose](./LoggerService.md#dispose)
- [onAllLayersRendered](./LoggerService.md#onalllayersrendered)
- [onFlushRequest](./LoggerService.md#onflushrequest)
## Constructors
### constructor
**new LoggerService**()
## Properties
### onLogger
`Readonly` **onLogger**: `Event`\<`any`\>
## Methods
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Implementation of
Disposable.dispose
___
### onAllLayersRendered
**onAllLayersRendered**(): `void`
#### Returns
`void`
___
### onFlushRequest
**onFlushRequest**(`renderFrameInterval`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `renderFrameInterval` | `number` |
#### Returns
`void`
---
url: /auto-docs/core/classes/OpacityData.md
---
# Class: OpacityData
实体的数据块
## Hierarchy
- [`EntityData`](./EntityData.md)\<[`OpacitySchema`](../types/OpacitySchema.md)\>
↳ **`OpacityData`**
## Table of contents
### Constructors
- [constructor](./OpacityData.md#constructor)
### Properties
- [entity](./OpacityData.md#entity)
- [onDataChange](./OpacityData.md#ondatachange)
- [onWillChange](./OpacityData.md#onwillchange)
- [opts](./OpacityData.md#opts)
- [toDispose](./OpacityData.md#todispose)
- [type](./OpacityData.md#type)
### Accessors
- [changeLocked](./OpacityData.md#changelocked)
- [data](./OpacityData.md#data)
- [disposed](./OpacityData.md#disposed)
- [onDispose](./OpacityData.md#ondispose)
- [type](./OpacityData.md#type-1)
- [version](./OpacityData.md#version)
### Methods
- [checkChanged](./OpacityData.md#checkchanged)
- [dispose](./OpacityData.md#dispose)
- [fireChange](./OpacityData.md#firechange)
- [fireWillChange](./OpacityData.md#firewillchange)
- [fromJSON](./OpacityData.md#fromjson)
- [fullyUpdate](./OpacityData.md#fullyupdate)
- [getDefaultData](./OpacityData.md#getdefaultdata)
- [toJSON](./OpacityData.md#tojson)
- [update](./OpacityData.md#update)
## Constructors
### constructor
**new OpacityData**(`entity`, `opts?`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `entity` | [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\> |
| `opts?` | `Object` |
#### Inherited from
[EntityData](./EntityData.md).[constructor](./EntityData.md#constructor)
## Properties
### entity
**entity**: [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>
#### Inherited from
[EntityData](./EntityData.md).[entity](./EntityData.md#entity)
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<[`EntityData`](./EntityData.md)\<`number`, {}\>\>
修改后触发
#### Inherited from
[EntityData](./EntityData.md).[onDataChange](./EntityData.md#ondatachange)
___
### onWillChange
`Readonly` **onWillChange**: `Event`\<[`EntityData`](./EntityData.md)\<`number`, {}\>\>
修改前触发
#### Inherited from
[EntityData](./EntityData.md).[onWillChange](./EntityData.md#onwillchange)
___
### opts
`Optional` `Readonly` **opts**: `Object`
#### Inherited from
[EntityData](./EntityData.md).[opts](./EntityData.md#opts)
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
#### Inherited from
[EntityData](./EntityData.md).[toDispose](./EntityData.md#todispose)
___
### type
`Static` **type**: `string` = `'OpacityData'`
#### Overrides
[EntityData](./EntityData.md).[type](./EntityData.md#type)
## Accessors
### changeLocked
`get` **changeLocked**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.changeLocked
`set` **changeLocked**(`p`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `p` | `boolean` |
#### Returns
`void`
#### Inherited from
EntityData.changeLocked
___
### data
`get` **data**(): `DATA`
当前数据
#### Returns
`DATA`
#### Inherited from
EntityData.data
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.disposed
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
#### Returns
`Event`\<`void`\>
#### Inherited from
EntityData.onDispose
___
### type
`get` **type**(): `string`
data 类型
#### Returns
`string`
#### Inherited from
EntityData.type
___
### version
`get` **version**(): `number`
#### Returns
`number`
#### Inherited from
EntityData.version
## Methods
### checkChanged
**checkChanged**(`newProps`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `newProps` | `number` |
#### Returns
`boolean`
**`Deprecated`**
检测属性是否更改，默认采用浅比较
#### Inherited from
[EntityData](./EntityData.md).[checkChanged](./EntityData.md#checkchanged)
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[dispose](./EntityData.md#dispose)
___
### fireChange
**fireChange**(): `void`
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fireChange](./EntityData.md#firechange)
___
### fireWillChange
**fireWillChange**(): `void`
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fireWillChange](./EntityData.md#firewillchange)
___
### fromJSON
**fromJSON**(`data`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data` | `object` |
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fromJSON](./EntityData.md#fromjson)
___
### fullyUpdate
**fullyUpdate**(`props`): `void`
更新全量数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | `number` |
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fullyUpdate](./EntityData.md#fullyupdate)
___
### getDefaultData
**getDefaultData**(): `number`
初始化数据
#### Returns
`number`
#### Overrides
[EntityData](./EntityData.md).[getDefaultData](./EntityData.md#getdefaultdata)
___
### toJSON
**toJSON**(): `any`
存储数据，一般在关闭浏览器后需要暂时存到 localStorage
#### Returns
`any`
#### Inherited from
[EntityData](./EntityData.md).[toJSON](./EntityData.md#tojson)
___
### update
**update**(`props`, `value?`): `void`
更新单个数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | `number` \| ``"toString"`` \| ``"toFixed"`` \| ``"toExponential"`` \| ``"toPrecision"`` \| ``"valueOf"`` \| ``"toLocaleString"`` |
| `value?` | `any` |
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[update](./EntityData.md#update)
---
url: /auto-docs/core/classes/OriginData.md
---
# Class: OriginData
实体的数据块
## Hierarchy
- [`EntityData`](./EntityData.md)\<[`OriginSchema`](../interfaces/OriginSchema.md)\>
↳ **`OriginData`**
## Implements
- [`OriginSchema`](../interfaces/OriginSchema.md)
## Table of contents
### Constructors
- [constructor](./OriginData.md#constructor)
### Properties
- [entity](./OriginData.md#entity)
- [onDataChange](./OriginData.md#ondatachange)
- [onWillChange](./OriginData.md#onwillchange)
- [opts](./OriginData.md#opts)
- [toDispose](./OriginData.md#todispose)
- [type](./OriginData.md#type)
### Accessors
- [changeLocked](./OriginData.md#changelocked)
- [data](./OriginData.md#data)
- [disposed](./OriginData.md#disposed)
- [onDispose](./OriginData.md#ondispose)
- [type](./OriginData.md#type-1)
- [version](./OriginData.md#version)
- [x](./OriginData.md#x)
- [y](./OriginData.md#y)
### Methods
- [checkChanged](./OriginData.md#checkchanged)
- [dispose](./OriginData.md#dispose)
- [fireChange](./OriginData.md#firechange)
- [fireWillChange](./OriginData.md#firewillchange)
- [fromJSON](./OriginData.md#fromjson)
- [fullyUpdate](./OriginData.md#fullyupdate)
- [getDefaultData](./OriginData.md#getdefaultdata)
- [toJSON](./OriginData.md#tojson)
- [update](./OriginData.md#update)
## Constructors
### constructor
**new OriginData**(`entity`, `opts?`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `entity` | [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\> |
| `opts?` | `Object` |
#### Inherited from
[EntityData](./EntityData.md).[constructor](./EntityData.md#constructor)
## Properties
### entity
**entity**: [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>
#### Inherited from
[EntityData](./EntityData.md).[entity](./EntityData.md#entity)
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<[`EntityData`](./EntityData.md)\<[`OriginSchema`](../interfaces/OriginSchema.md), {}\>\>
修改后触发
#### Inherited from
[EntityData](./EntityData.md).[onDataChange](./EntityData.md#ondatachange)
___
### onWillChange
`Readonly` **onWillChange**: `Event`\<[`EntityData`](./EntityData.md)\<[`OriginSchema`](../interfaces/OriginSchema.md), {}\>\>
修改前触发
#### Inherited from
[EntityData](./EntityData.md).[onWillChange](./EntityData.md#onwillchange)
___
### opts
`Optional` `Readonly` **opts**: `Object`
#### Inherited from
[EntityData](./EntityData.md).[opts](./EntityData.md#opts)
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
#### Inherited from
[EntityData](./EntityData.md).[toDispose](./EntityData.md#todispose)
___
### type
`Static` **type**: `string` = `'OriginData'`
#### Overrides
[EntityData](./EntityData.md).[type](./EntityData.md#type)
## Accessors
### changeLocked
`get` **changeLocked**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.changeLocked
`set` **changeLocked**(`p`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `p` | `boolean` |
#### Returns
`void`
#### Inherited from
EntityData.changeLocked
___
### data
`get` **data**(): `DATA`
当前数据
#### Returns
`DATA`
#### Inherited from
EntityData.data
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.disposed
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
#### Returns
`Event`\<`void`\>
#### Inherited from
EntityData.onDispose
___
### type
`get` **type**(): `string`
data 类型
#### Returns
`string`
#### Inherited from
EntityData.type
___
### version
`get` **version**(): `number`
#### Returns
`number`
#### Inherited from
EntityData.version
___
### x
`get` **x**(): `number`
#### Returns
`number`
#### Implementation of
[OriginSchema](../interfaces/OriginSchema.md).[x](../interfaces/OriginSchema.md#x)
`set` **x**(`x`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `x` | `number` |
#### Returns
`void`
#### Implementation of
[OriginSchema](../interfaces/OriginSchema.md).[x](../interfaces/OriginSchema.md#x)
___
### y
`get` **y**(): `number`
#### Returns
`number`
#### Implementation of
[OriginSchema](../interfaces/OriginSchema.md).[y](../interfaces/OriginSchema.md#y)
`set` **y**(`y`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `y` | `number` |
#### Returns
`void`
#### Implementation of
[OriginSchema](../interfaces/OriginSchema.md).[y](../interfaces/OriginSchema.md#y)
## Methods
### checkChanged
**checkChanged**(`newProps`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `newProps` | [`OriginSchema`](../interfaces/OriginSchema.md) \| `Partial`\<[`OriginSchema`](../interfaces/OriginSchema.md)\> |
#### Returns
`boolean`
**`Deprecated`**
检测属性是否更改，默认采用浅比较
#### Inherited from
[EntityData](./EntityData.md).[checkChanged](./EntityData.md#checkchanged)
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[dispose](./EntityData.md#dispose)
___
### fireChange
**fireChange**(): `void`
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fireChange](./EntityData.md#firechange)
___
### fireWillChange
**fireWillChange**(): `void`
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fireWillChange](./EntityData.md#firewillchange)
___
### fromJSON
**fromJSON**(`data`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data` | `object` |
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fromJSON](./EntityData.md#fromjson)
___
### fullyUpdate
**fullyUpdate**(`props`): `void`
更新全量数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | [`OriginSchema`](../interfaces/OriginSchema.md) |
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fullyUpdate](./EntityData.md#fullyupdate)
___
### getDefaultData
**getDefaultData**(): [`OriginSchema`](../interfaces/OriginSchema.md)
初始化数据
#### Returns
[`OriginSchema`](../interfaces/OriginSchema.md)
#### Overrides
[EntityData](./EntityData.md).[getDefaultData](./EntityData.md#getdefaultdata)
___
### toJSON
**toJSON**(): `any`
存储数据，一般在关闭浏览器后需要暂时存到 localStorage
#### Returns
`any`
#### Inherited from
[EntityData](./EntityData.md).[toJSON](./EntityData.md#tojson)
___
### update
**update**(`props`, `value?`): `void`
更新单个数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | [`OriginSchema`](../interfaces/OriginSchema.md) \| `Partial`\<[`OriginSchema`](../interfaces/OriginSchema.md)\> \| keyof [`OriginSchema`](../interfaces/OriginSchema.md) |
| `value?` | `any` |
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[update](./EntityData.md#update)
---
url: /auto-docs/core/classes/PipelineEntitiesImpl.md
---
# Class: PipelineEntitiesImpl
注入到 Layer 中的实体选择器
## Implements
- [`PipelineEntities`](../interfaces/PipelineEntities.md)
## Table of contents
### Constructors
- [constructor](./PipelineEntitiesImpl.md#constructor)
### Accessors
- [size](./PipelineEntitiesImpl.md#size)
### Methods
- [[iterator]](PipelineEntitiesImpl.md#[iterator])
- [createEntity](./PipelineEntitiesImpl.md#createentity)
- [get](./PipelineEntitiesImpl.md#get)
- [getConfig](./PipelineEntitiesImpl.md#getconfig)
- [getEntities](./PipelineEntitiesImpl.md#getentities)
- [getEntityDatas](./PipelineEntitiesImpl.md#getentitydatas)
- [has](./PipelineEntitiesImpl.md#has)
- [load](./PipelineEntitiesImpl.md#load)
- [removeEntities](./PipelineEntitiesImpl.md#removeentities)
- [updateConfig](./PipelineEntitiesImpl.md#updateconfig)
## Constructors
### constructor
**new PipelineEntitiesImpl**(`entityManager`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `entityManager` | [`EntityManager`](./EntityManager.md) |
## Accessors
### size
`get` **size**(): `number`
当前画布订阅的实体数目
#### Returns
`number`
#### Implementation of
[PipelineEntities](../interfaces/PipelineEntities.md).[size](../interfaces/PipelineEntities.md#size)
## Methods
### [iterator]
**[iterator]**(): `Iterator`\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>, `any`, `undefined`\>
#### Returns
`Iterator`\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>, `any`, `undefined`\>
#### Implementation of
[PipelineEntities](../interfaces/PipelineEntities.md).[[iterator]](../interfaces/PipelineEntities.md#[iterator])
___
### createEntity
**createEntity**\<`E`\>(`registry`, `opts?`): `E`
创建实体
#### Type parameters
| Name | Type |
| :------ | :------ |
| `E` | extends [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md), `E`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
| `opts?` | `Omit`\<`E`[``"__opts_type__"``], ``"entityManager"``\> |
#### Returns
`E`
#### Implementation of
[PipelineEntities](../interfaces/PipelineEntities.md).[createEntity](../interfaces/PipelineEntities.md#createentity)
___
### get
**get**\<`T`\>(`registry`, `id?`): `undefined` \| `T`
获取单个实体，如果该实体是单例且被注册过，则会自动创建
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md), `T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
| `id?` | `string` |
#### Returns
`undefined` \| `T`
#### Implementation of
[PipelineEntities](../interfaces/PipelineEntities.md).[get](../interfaces/PipelineEntities.md#get)
___
### getConfig
**getConfig**\<`E`\>(`registry`): `undefined` \| `E`[``"config"``]
获取配置信息
#### Type parameters
| Name | Type |
| :------ | :------ |
| `E` | extends [`ConfigEntity`](./ConfigEntity.md)\<[`ConfigEntityProps`](../interfaces/ConfigEntityProps.md), [`EntityOpts`](../interfaces/EntityOpts.md), `E`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
#### Returns
`undefined` \| `E`[``"config"``]
#### Implementation of
[PipelineEntities](../interfaces/PipelineEntities.md).[getConfig](../interfaces/PipelineEntities.md#getconfig)
___
### getEntities
**getEntities**\<`T`\>(`registry`): `T`[]
获取多个实体
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md), `T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
#### Returns
`T`[]
#### Implementation of
[PipelineEntities](../interfaces/PipelineEntities.md).[getEntities](../interfaces/PipelineEntities.md#getentities)
___
### getEntityDatas
**getEntityDatas**\<`T`\>(`entityRegistry`, `dataRegistry`): `T`[]
获取 entity
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`EntityData`](./EntityData.md)\<`any`, {}, `T`\> = [`EntityData`](./EntityData.md)\<`any`, {}\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `entityRegistry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
| `dataRegistry` | `T` |
#### Returns
`T`[]
#### Implementation of
[PipelineEntities](../interfaces/PipelineEntities.md).[getEntityDatas](../interfaces/PipelineEntities.md#getentitydatas)
___
### has
**has**(`registy`): `boolean`
是否存在
#### Parameters
| Name | Type |
| :------ | :------ |
| `registy` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
#### Returns
`boolean`
#### Implementation of
[PipelineEntities](../interfaces/PipelineEntities.md).[has](../interfaces/PipelineEntities.md#has)
___
### load
**load**(`observeEntites`, `observeDatas`): `void`
加载订阅数据，会缓存到 layer 内部，layer 只能拿到订阅数据的子集
#### Parameters
| Name | Type |
| :------ | :------ |
| `observeEntites` | [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>[] |
| `observeDatas` | [`EntityData`](./EntityData.md)\<`any`, {}\>[] |
#### Returns
`void`
___
### removeEntities
**removeEntities**(`registry`): `void`
批量删除实体
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
#### Returns
`void`
#### Implementation of
[PipelineEntities](../interfaces/PipelineEntities.md).[removeEntities](../interfaces/PipelineEntities.md#removeentities)
___
### updateConfig
**updateConfig**\<`E`\>(`registry`, `props`): `void`
更新配置数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `E` | extends [`ConfigEntity`](./ConfigEntity.md)\<[`ConfigEntityProps`](../interfaces/ConfigEntityProps.md), [`EntityOpts`](../interfaces/EntityOpts.md), `E`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
| `props` | `Partial`\<`E`[``"config"``]\> |
#### Returns
`void`
#### Implementation of
[PipelineEntities](../interfaces/PipelineEntities.md).[updateConfig](../interfaces/PipelineEntities.md#updateconfig)
---
url: /auto-docs/core/classes/PipelineEntitiesSelector.md
---
# Class: PipelineEntitiesSelector
选择器用来在 pipeline 绘制之前，筛选并注入 entities
## Table of contents
### Constructors
- [constructor](./PipelineEntitiesSelector.md#constructor)
### Properties
- [ableLayerMap](./PipelineEntitiesSelector.md#ablelayermap)
- [entityLayerMap](./PipelineEntitiesSelector.md#entitylayermap)
- [entityManager](./PipelineEntitiesSelector.md#entitymanager)
### Methods
- [getLayerData](./PipelineEntitiesSelector.md#getlayerdata)
- [getLayerEntities](./PipelineEntitiesSelector.md#getlayerentities)
- [getLayerEntityDatas](./PipelineEntitiesSelector.md#getlayerentitydatas)
- [subscribeEntities](./PipelineEntitiesSelector.md#subscribeentities)
- [subscribleEntityByData](./PipelineEntitiesSelector.md#subscribleentitybydata)
## Constructors
### constructor
**new PipelineEntitiesSelector**()
## Properties
### ableLayerMap
`Readonly` **ableLayerMap**: `Map`\<`string`, `Set`\<[`Layer`](./Layer.md)\<`any`, `any`\>\>\>
___
### entityLayerMap
`Readonly` **entityLayerMap**: `Map`\<`string`, `Set`\<[`Layer`](./Layer.md)\<`any`, `any`\>\>\>
___
### entityManager
**entityManager**: [`EntityManager`](./EntityManager.md)
## Methods
### getLayerData
**getLayerData**(`layer`): `Object`
#### Parameters
| Name | Type |
| :------ | :------ |
| `layer` | [`Layer`](./Layer.md)\<`any`, `any`\> |
#### Returns
`Object`
| Name | Type |
| :------ | :------ |
| `changed` | `boolean` |
| `observeDatas` | [`EntityData`](./EntityData.md)\<`any`, {}\>[] |
| `observeEntities` | [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>[] |
___
### getLayerEntities
**getLayerEntities**(`layer`): `Object`
查询 layer 关联的实体
#### Parameters
| Name | Type |
| :------ | :------ |
| `layer` | [`Layer`](./Layer.md)\<`any`, `any`\> |
#### Returns
`Object`
| Name | Type |
| :------ | :------ |
| `changed` | `boolean` |
| `entities` | [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>[] |
___
### getLayerEntityDatas
**getLayerEntityDatas**(`layer`): `Object`
#### Parameters
| Name | Type |
| :------ | :------ |
| `layer` | [`Layer`](./Layer.md)\<`any`, `any`\> |
#### Returns
`Object`
| Name | Type |
| :------ | :------ |
| `changed` | `boolean` |
| `datas` | [`EntityData`](./EntityData.md)\<`any`, {}\>[] |
___
### subscribeEntities
**subscribeEntities**(`layer`, `entities`): `void`
订阅关联的 entity，会影响 autorun
#### Parameters
| Name | Type |
| :------ | :------ |
| `layer` | [`Layer`](./Layer.md)\<`any`, `any`\> |
| `entities` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\>[] |
#### Returns
`void`
___
### subscribleEntityByData
**subscribleEntityByData**(`layer`, `entity`, `data`): `void`
订阅 data 数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `layer` | [`Layer`](./Layer.md)\<`any`, `any`\> |
| `entity` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
| `data` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\> |
#### Returns
`void`
---
url: /auto-docs/core/classes/PipelineRegistry.md
---
# Class: PipelineRegistry
pipeline 注册器，用于注册一些事件
## Implements
- `Disposable`
- `IMessageHandler`
## Table of contents
### Constructors
- [constructor](./PipelineRegistry.md#constructor)
### Properties
- [context](./PipelineRegistry.md#context)
- [entityManager](./PipelineRegistry.md#entitymanager)
- [layerFactory](./PipelineRegistry.md#layerfactory)
- [onBlur](./PipelineRegistry.md#onblur)
- [onBlurEmitter](./PipelineRegistry.md#onbluremitter)
- [onFocus](./PipelineRegistry.md#onfocus)
- [onFocusEmitter](./PipelineRegistry.md#onfocusemitter)
- [onResize](./PipelineRegistry.md#onresize)
- [onResizeEmitter](./PipelineRegistry.md#onresizeemitter)
- [onScroll](./PipelineRegistry.md#onscroll)
- [onScrollEmitter](./PipelineRegistry.md#onscrollemitter)
- [onZoom](./PipelineRegistry.md#onzoom)
- [onZoomEmitter](./PipelineRegistry.md#onzoomemitter)
- [renderer](./PipelineRegistry.md#renderer)
- [selector](./PipelineRegistry.md#selector)
### Accessors
- [configEntity](./PipelineRegistry.md#configentity)
### Methods
- [\_listenEvent](./PipelineRegistry.md#_listenevent)
- [dispose](./PipelineRegistry.md#dispose)
- [getLayer](./PipelineRegistry.md#getlayer)
- [listenGlobalEvent](./PipelineRegistry.md#listenglobalevent)
- [listenPlaygroundEvent](./PipelineRegistry.md#listenplaygroundevent)
- [processMessage](./PipelineRegistry.md#processmessage)
- [ready](./PipelineRegistry.md#ready)
- [registerLayer](./PipelineRegistry.md#registerlayer)
## Constructors
### constructor
**new PipelineRegistry**()
## Properties
### context
**context**: `any`
___
### entityManager
**entityManager**: [`EntityManager`](./EntityManager.md)
___
### layerFactory
**layerFactory**: [`PipelineLayerFactory`](../variables/PipelineLayerFactory-1.md)
___
### onBlur
`Readonly` **onBlur**: `Event`\<`void`\>
___
### onBlurEmitter
`Readonly` **onBlurEmitter**: `Emitter`\<`void`\>
___
### onFocus
`Readonly` **onFocus**: `Event`\<`void`\>
___
### onFocusEmitter
`Readonly` **onFocusEmitter**: `Emitter`\<`void`\>
___
### onResize
`Readonly` **onResize**: `Event`\<[`PipelineDimension`](../interfaces/PipelineDimension.md)\>
pipline 大小变化时候会触发
___
### onResizeEmitter
`Readonly` **onResizeEmitter**: `Emitter`\<[`PipelineDimension`](../interfaces/PipelineDimension.md)\>
___
### onScroll
`Readonly` **onScroll**: `Event`\<\{ `scrollX`: `number` ; `scrollY`: `number` }\>
___
### onScrollEmitter
`Readonly` **onScrollEmitter**: `Emitter`\<\{ `scrollX`: `number` ; `scrollY`: `number` }\>
___
### onZoom
`Readonly` **onZoom**: `Event`\<`number`\>
___
### onZoomEmitter
`Readonly` **onZoomEmitter**: `Emitter`\<`number`\>
___
### renderer
**renderer**: [`PipelineRenderer`](./PipelineRenderer.md)
___
### selector
**selector**: [`PipelineEntitiesSelector`](./PipelineEntitiesSelector.md)
## Accessors
### configEntity
`get` **configEntity**(): [`PlaygroundConfigEntity`](./PlaygroundConfigEntity.md)
#### Returns
[`PlaygroundConfigEntity`](./PlaygroundConfigEntity.md)
## Methods
### \_listenEvent
**_listenEvent**(`name`, `handle`, `isGlobal`, `priority?`, `options?`): `Disposable`
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `name` | `string` | `undefined` |
| `handle` | [`PipelineEventHandler`](../types/PipelineEventHandler.md) | `undefined` |
| `isGlobal` | `boolean` | `undefined` |
| `priority` | `number` | `0` |
| `options?` | `AddEventListenerOptions` | `undefined` |
#### Returns
`Disposable`
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Implementation of
Disposable.dispose
___
### getLayer
**getLayer**\<`T`\>(`layerRegistry`): `undefined` \| `T`
获取 layer
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`Layer`](./Layer.md)\<`any`, `any`, `T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `layerRegistry` | [`LayerRegistry`](../interfaces/LayerRegistry.md)\<`T`\> |
#### Returns
`undefined` \| `T`
___
### listenGlobalEvent
**listenGlobalEvent**(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听全局的事件
#### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `undefined` \| `boolean` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
#### Returns
`Disposable`
___
### listenPlaygroundEvent
**listenPlaygroundEvent**(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听画布上的浏览器事件
#### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `undefined` \| `boolean` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
#### Returns
`Disposable`
___
### processMessage
**processMessage**(`msg`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `msg` | `Message` |
#### Returns
`void`
#### Implementation of
IMessageHandler.processMessage
___
### ready
**ready**(): `void`
#### Returns
`void`
___
### registerLayer
**registerLayer**\<`P`\>(`layerRegistry`, `layerOptions?`): `void`
注册 layer
#### Type parameters
| Name | Type |
| :------ | :------ |
| `P` | extends [`Layer`](./Layer.md)\<`any`, `any`, `P`\> = [`Layer`](./Layer.md)\<`any`, `any`\> |
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `layerRegistry` | [`LayerRegistry`](../interfaces/LayerRegistry.md)\<`P`\> | |
| `layerOptions?` | `P`[``"options"``] | 配置 |
#### Returns
`void`
---
url: /auto-docs/core/classes/PipelineRenderer.md
---
# Class: PipelineRenderer
pipeline 渲染器
## Implements
- `Disposable`
- `IMessageHandler`
## Table of contents
### Constructors
- [constructor](./PipelineRenderer.md#constructor)
### Properties
- [isReady](./PipelineRenderer.md#isready)
- [layerAutorunMap](./PipelineRenderer.md#layerautorunmap)
- [layerFlushMessages](./PipelineRenderer.md#layerflushmessages)
- [layerRenderedMap](./PipelineRenderer.md#layerrenderedmap)
- [layers](./PipelineRenderer.md#layers)
- [node](./PipelineRenderer.md#node)
- [onAllLayersRendered](./PipelineRenderer.md#onalllayersrendered)
### Methods
- [addLayer](./PipelineRenderer.md#addlayer)
- [dispose](./PipelineRenderer.md#dispose)
- [flush](./PipelineRenderer.md#flush)
- [processMessage](./PipelineRenderer.md#processmessage)
- [ready](./PipelineRenderer.md#ready)
- [reportLayerRendered](./PipelineRenderer.md#reportlayerrendered)
- [toReactComponent](./PipelineRenderer.md#toreactcomponent)
- [updateLayer](./PipelineRenderer.md#updatelayer)
## Constructors
### constructor
**new PipelineRenderer**(`selector`, `entityManager`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `selector` | [`PipelineEntitiesSelector`](./PipelineEntitiesSelector.md) |
| `entityManager` | [`EntityManager`](./EntityManager.md) |
## Properties
### isReady
**isReady**: `boolean` = `false`
___
### layerAutorunMap
`Readonly` **layerAutorunMap**: `Map`\<[`Layer`](./Layer.md)\<`any`, `any`\>, () => `void`\>
___
### layerFlushMessages
`Readonly` **layerFlushMessages**: `Map`\<[`Layer`](./Layer.md)\<`any`, `any`\>, [`FlushLayerMessage`](./FlushLayerMessage.md)\>
___
### layerRenderedMap
`Readonly` **layerRenderedMap**: `Map`\<[`Layer`](./Layer.md)\<`any`, `any`\>, `boolean`\>
___
### layers
`Readonly` **layers**: [`Layer`](./Layer.md)\<`any`, `any`\>[] = `[]`
___
### node
`Readonly` **node**: `HTMLDivElement`
___
### onAllLayersRendered
`Readonly` **onAllLayersRendered**: `Event`\<`void`\>
所有 Layer 第一次渲染完成后触发
## Methods
### addLayer
**addLayer**(`layer`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `layer` | [`Layer`](./Layer.md)\<`any`, `any`\> |
#### Returns
`void`
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Implementation of
Disposable.dispose
___
### flush
**flush**(`forceUpdate?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `forceUpdate?` | `boolean` |
#### Returns
`void`
___
### processMessage
**processMessage**(`msg`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `msg` | `Message` |
#### Returns
`void`
#### Implementation of
IMessageHandler.processMessage
___
### ready
**ready**(): `void`
#### Returns
`void`
___
### reportLayerRendered
**reportLayerRendered**(`layer`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `layer` | [`Layer`](./Layer.md)\<`any`, `any`\> |
#### Returns
`void`
___
### toReactComponent
**toReactComponent**(): `FC`\<{}\>
转成 react
#### Returns
`FC`\<{}\>
___
### updateLayer
**updateLayer**(`layer`, `forceUpdate?`): `void`
1. PostMessage: 会将消息在 nextTick 执行
2. ConflatableMessage: 当多个消息进来会在下一个 nextTick 做合并
3. 图层相互隔离，即时一层挂了也不受影响
#### Parameters
| Name | Type |
| :------ | :------ |
| `layer` | [`Layer`](./Layer.md)\<`any`, `any`\> |
| `forceUpdate?` | `boolean` |
#### Returns
`void`
---
url: /auto-docs/core/classes/Playground.md
---
# Class: Playground\
## Type parameters
| Name | Type |
| :------ | :------ |
| `CONTEXT` | [`PlaygroundContext`](../variables/PlaygroundContext-1.md) |
## Implements
- `Disposable`
## Table of contents
### Constructors
- [constructor](./Playground.md#constructor)
### Properties
- [commandService](./Playground.md#commandservice)
- [contextProvider](./Playground.md#contextprovider)
- [entityManager](./Playground.md#entitymanager)
- [node](./Playground.md#node)
- [onBlur](./Playground.md#onblur)
- [onFocus](./Playground.md#onfocus)
- [onScroll](./Playground.md#onscroll)
- [onZoom](./Playground.md#onzoom)
- [pipelineRegistry](./Playground.md#pipelineregistry)
- [pipelineRenderer](./Playground.md#pipelinerenderer)
- [registry](./Playground.md#registry)
- [selectionService](./Playground.md#selectionservice)
- [toDispose](./Playground.md#todispose)
### Accessors
- [config](./Playground.md#config)
- [context](./Playground.md#context)
- [disposed](./Playground.md#disposed)
- [editorState](./Playground.md#editorstate)
- [focused](./Playground.md#focused)
- [onAllLayersRendered](./Playground.md#onalllayersrendered)
- [onResize](./Playground.md#onresize)
- [pipelineNode](./Playground.md#pipelinenode)
- [zoomEnable](./Playground.md#zoomenable)
### Methods
- [dispose](./Playground.md#dispose)
- [flush](./Playground.md#flush)
- [getConfigEntity](./Playground.md#getconfigentity)
- [getLayer](./Playground.md#getlayer)
- [init](./Playground.md#init)
- [ready](./Playground.md#ready)
- [registerLayer](./Playground.md#registerlayer)
- [registerLayers](./Playground.md#registerlayers)
- [resize](./Playground.md#resize)
- [scrollToView](./Playground.md#scrolltoview)
- [setParent](./Playground.md#setparent)
- [toReactComponent](./Playground.md#toreactcomponent)
## Constructors
### constructor
**new Playground**\<`CONTEXT`\>(`entityManager`, `registry`, `contextProvider`, `pipelineRenderer`, `pipelineRegistry`, `playgroundConfig`, `contributionProvider`, `commandService`, `selectionService`)
#### Type parameters
| Name | Type |
| :------ | :------ |
| `CONTEXT` | `any` |
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `entityManager` | [`EntityManager`](./EntityManager.md) | - |
| `registry` | [`PlaygroundRegistry`](./PlaygroundRegistry.md) | - |
| `contextProvider` | [`PlaygroundContextProvider`](../variables/PlaygroundContextProvider-1.md) | - |
| `pipelineRenderer` | [`PipelineRenderer`](./PipelineRenderer.md) | - |
| `pipelineRegistry` | [`PipelineRegistry`](./PipelineRegistry.md) | - |
| `playgroundConfig` | [`PlaygroundConfig`](../variables/PlaygroundConfig-1.md) | - |
| `contributionProvider` | [`ContributionProvider`](../variables/ContributionProvider-1.md)\<[`PlaygroundContribution`](../variables/PlaygroundContribution-1.md)\> | - |
| `commandService` | [`CommandService`](../variables/CommandService-1.md) | 用于管理画布命令 |
| `selectionService` | [`SelectionService`](./SelectionService.md) | 用于管理画布选择 |
## Properties
### commandService
`Readonly` **commandService**: [`CommandService`](../variables/CommandService-1.md)
用于管理画布命令
___
### contextProvider
`Readonly` **contextProvider**: [`PlaygroundContextProvider`](../variables/PlaygroundContextProvider-1.md)
___
### entityManager
`Readonly` **entityManager**: [`EntityManager`](./EntityManager.md)
___
### node
`Readonly` **node**: `HTMLElement`
___
### onBlur
`Readonly` **onBlur**: `Event`\<`void`\>
___
### onFocus
`Readonly` **onFocus**: `Event`\<`void`\>
___
### onScroll
`Readonly` **onScroll**: `Event`\<\{ `scrollX`: `number` ; `scrollY`: `number` }\>
___
### onZoom
`Readonly` **onZoom**: `Event`\<`number`\>
___
### pipelineRegistry
`Readonly` **pipelineRegistry**: [`PipelineRegistry`](./PipelineRegistry.md)
___
### pipelineRenderer
`Readonly` **pipelineRenderer**: [`PipelineRenderer`](./PipelineRenderer.md)
___
### registry
`Readonly` **registry**: [`PlaygroundRegistry`](./PlaygroundRegistry.md)
___
### selectionService
`Readonly` **selectionService**: [`SelectionService`](./SelectionService.md)
用于管理画布选择
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
## Accessors
### config
`get` **config**(): [`PlaygroundConfigEntity`](./PlaygroundConfigEntity.md)
画布配置数据
#### Returns
[`PlaygroundConfigEntity`](./PlaygroundConfigEntity.md)
___
### context
`get` **context**(): `CONTEXT`
#### Returns
`CONTEXT`
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
___
### editorState
`get` **editorState**(): [`EditorStateConfigEntity`](./EditorStateConfigEntity.md)
画布编辑状态管理
#### Returns
[`EditorStateConfigEntity`](./EditorStateConfigEntity.md)
___
### focused
`get` **focused**(): `boolean`
#### Returns
`boolean`
___
### onAllLayersRendered
`get` **onAllLayersRendered**(): `Event`\<`void`\>
#### Returns
`Event`\<`void`\>
___
### onResize
`get` **onResize**(): `Event`\<[`PipelineDimension`](../interfaces/PipelineDimension.md)\>
#### Returns
`Event`\<[`PipelineDimension`](../interfaces/PipelineDimension.md)\>
___
### pipelineNode
`get` **pipelineNode**(): `HTMLDivElement`
#### Returns
`HTMLDivElement`
___
### zoomEnable
`get` **zoomEnable**(): `boolean`
对应的右键菜单路径
#### Returns
`boolean`
`set` **zoomEnable**(`zoomEnable`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `zoomEnable` | `boolean` |
#### Returns
`void`
## Methods
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Implementation of
Disposable.dispose
___
### flush
**flush**(): `void`
刷新所有 layer
#### Returns
`void`
___
### getConfigEntity
**getConfigEntity**\<`T`\>(`r`): `T`
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`ConfigEntity`](./ConfigEntity.md)\<[`ConfigEntityProps`](../interfaces/ConfigEntityProps.md), [`EntityOpts`](../interfaces/EntityOpts.md), `T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `r` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<`T`\> |
#### Returns
`T`
___
### getLayer
**getLayer**\<`T`\>(`layerRegistry`): `undefined` \| `T`
获取 layer
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`Layer`](./Layer.md)\<`any`, `any`, `T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `layerRegistry` | [`LayerRegistry`](../interfaces/LayerRegistry.md)\<`T`\> |
#### Returns
`undefined` \| `T`
___
### init
**init**(): `void`
#### Returns
`void`
___
### ready
**ready**(): `void`
#### Returns
`void`
___
### registerLayer
**registerLayer**\<`P`\>(`layerRegistry`, `layerOptions?`): `void`
注册 layer
#### Type parameters
| Name | Type |
| :------ | :------ |
| `P` | extends [`Layer`](./Layer.md)\<`any`, `any`, `P`\> = [`Layer`](./Layer.md)\<`any`, `any`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `layerRegistry` | [`LayerRegistry`](../interfaces/LayerRegistry.md)\<`P`\> |
| `layerOptions?` | `P`[``"options"``] |
#### Returns
`void`
___
### registerLayers
**registerLayers**(`...layerRegistries`): `void`
注册 多个 layer
#### Parameters
| Name | Type |
| :------ | :------ |
| `...layerRegistries` | [`LayerRegistry`](../interfaces/LayerRegistry.md)\<[`Layer`](./Layer.md)\<`any`, `any`\>\>[] |
#### Returns
`void`
___
### resize
**resize**(`msg?`, `scrollToCenter?`): `boolean`
这里会由 widget 透传进来
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `msg?` | [`PipelineDimension`](../interfaces/PipelineDimension.md) | `undefined` |
| `scrollToCenter` | `boolean` | `true` |
#### Returns
`boolean`
___
### scrollToView
**scrollToView**(`opts?`): `Promise`\<`void`\>
按下边顺序执行
1. 指定的 entity 位置或 pos 位置
2. selection 位置
3. 初始化位置
#### Parameters
| Name | Type |
| :------ | :------ |
| `opts?` | [`PlaygroundConfigRevealOpts`](../interfaces/PlaygroundConfigRevealOpts.md) |
#### Returns
`Promise`\<`void`\>
___
### setParent
**setParent**(`parent`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `parent` | `HTMLElement` |
#### Returns
`void`
___
### toReactComponent
**toReactComponent**(): `FC`\<{}\>
转换成 react 组件
#### Returns
`FC`\<{}\>
---
url: /auto-docs/core/classes/PlaygroundConfigEntity.md
---
# Class: PlaygroundConfigEntity
全局画布的配置信息
## Hierarchy
- [`ConfigEntity`](./ConfigEntity.md)\<[`PlaygroundConfigEntityData`](../interfaces/PlaygroundConfigEntityData.md)\>
↳ **`PlaygroundConfigEntity`**
## Table of contents
### Constructors
- [constructor](./PlaygroundConfigEntity.md#constructor)
### Properties
- [\_\_opts\_type\_\_](./PlaygroundConfigEntity.md#__opts_type__)
- [cursor](./PlaygroundConfigEntity.md#cursor)
- [entityManager](./PlaygroundConfigEntity.md#entitymanager)
- [getCursors](./PlaygroundConfigEntity.md#getcursors)
- [onDataChange](./PlaygroundConfigEntity.md#ondatachange)
- [onEntityChange](./PlaygroundConfigEntity.md#onentitychange)
- [onGrabDisableChange](./PlaygroundConfigEntity.md#ongrabdisablechange)
- [onReadonlyOrDisabledChange](./PlaygroundConfigEntity.md#onreadonlyordisabledchange)
- [playgroundDomNode](./PlaygroundConfigEntity.md#playgrounddomnode)
- [preDispose](./PlaygroundConfigEntity.md#predispose)
- [toDispose](./PlaygroundConfigEntity.md#todispose)
- [type](./PlaygroundConfigEntity.md#type)
### Accessors
- [config](./PlaygroundConfigEntity.md#config)
- [context](./PlaygroundConfigEntity.md#context)
- [disabled](./PlaygroundConfigEntity.md#disabled)
- [disposed](./PlaygroundConfigEntity.md#disposed)
- [finalScale](./PlaygroundConfigEntity.md#finalscale)
- [grabDisable](./PlaygroundConfigEntity.md#grabdisable)
- [id](./PlaygroundConfigEntity.md#id)
- [loading](./PlaygroundConfigEntity.md#loading)
- [onDispose](./PlaygroundConfigEntity.md#ondispose)
- [readonly](./PlaygroundConfigEntity.md#readonly)
- [readonlyOrDisabled](./PlaygroundConfigEntity.md#readonlyordisabled)
- [savedInManager](./PlaygroundConfigEntity.md#savedinmanager)
- [scrollData](./PlaygroundConfigEntity.md#scrolldata)
- [scrollDisable](./PlaygroundConfigEntity.md#scrolldisable)
- [type](./PlaygroundConfigEntity.md#type-1)
- [version](./PlaygroundConfigEntity.md#version)
- [zoom](./PlaygroundConfigEntity.md#zoom)
- [zoomDisable](./PlaygroundConfigEntity.md#zoomdisable)
- [zoomEnable](./PlaygroundConfigEntity.md#zoomenable)
### Methods
- [addData](./PlaygroundConfigEntity.md#adddata)
- [addInitializeData](./PlaygroundConfigEntity.md#addinitializedata)
- [addScrollLimit](./PlaygroundConfigEntity.md#addscrolllimit)
- [checkChanged](./PlaygroundConfigEntity.md#checkchanged)
- [dispose](./PlaygroundConfigEntity.md#dispose)
- [fitView](./PlaygroundConfigEntity.md#fitview)
- [fixLayerPosition](./PlaygroundConfigEntity.md#fixlayerposition)
- [fromJSON](./PlaygroundConfigEntity.md#fromjson)
- [getClientBounds](./PlaygroundConfigEntity.md#getclientbounds)
- [getData](./PlaygroundConfigEntity.md#getdata)
- [getDefaultConfig](./PlaygroundConfigEntity.md#getdefaultconfig)
- [getDefaultDataRegistries](./PlaygroundConfigEntity.md#getdefaultdataregistries)
- [getPageBounds](./PlaygroundConfigEntity.md#getpagebounds)
- [getPosFromMouseEvent](./PlaygroundConfigEntity.md#getposfrommouseevent)
- [getService](./PlaygroundConfigEntity.md#getservice)
- [getViewport](./PlaygroundConfigEntity.md#getviewport)
- [hasData](./PlaygroundConfigEntity.md#hasdata)
- [isViewportVisible](./PlaygroundConfigEntity.md#isviewportvisible)
- [onConfigChanged](./PlaygroundConfigEntity.md#onconfigchanged)
- [removeData](./PlaygroundConfigEntity.md#removedata)
- [reset](./PlaygroundConfigEntity.md#reset)
- [scroll](./PlaygroundConfigEntity.md#scroll)
- [scrollPageBoundsToCenter](./PlaygroundConfigEntity.md#scrollpageboundstocenter)
- [scrollToView](./PlaygroundConfigEntity.md#scrolltoview)
- [setPageBounds](./PlaygroundConfigEntity.md#setpagebounds)
- [toFixedPos](./PlaygroundConfigEntity.md#tofixedpos)
- [toJSON](./PlaygroundConfigEntity.md#tojson)
- [updateConfig](./PlaygroundConfigEntity.md#updateconfig)
- [updateCursor](./PlaygroundConfigEntity.md#updatecursor)
- [updateData](./PlaygroundConfigEntity.md#updatedata)
- [updateZoom](./PlaygroundConfigEntity.md#updatezoom)
- [zoomin](./PlaygroundConfigEntity.md#zoomin)
- [zoomout](./PlaygroundConfigEntity.md#zoomout)
## Constructors
### constructor
**new PlaygroundConfigEntity**(`opts`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `opts` | `any` |
#### Overrides
[ConfigEntity](./ConfigEntity.md).[constructor](./ConfigEntity.md#constructor)
## Properties
### \_\_opts\_type\_\_
**\_\_opts\_type\_\_**: [`EntityOpts`](../interfaces/EntityOpts.md)
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[__opts_type__](./ConfigEntity.md#__opts_type__)
___
### cursor
**cursor**: `string` = `'default'`
___
### entityManager
`Readonly` **entityManager**: [`EntityManager`](./EntityManager.md)
全局的entity管理器
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[entityManager](./ConfigEntity.md#entitymanager)
___
### getCursors
**getCursors**: `undefined` \| () => `undefined` \| [`Cursors`](../types/Cursors.md)
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<[`EntityDataChangedEvent`](../interfaces/EntityDataChangedEvent.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\>\>
数据更改事件
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[onDataChange](./ConfigEntity.md#ondatachange)
___
### onEntityChange
`Readonly` **onEntityChange**: `Event`\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\>
修改会触发
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[onEntityChange](./ConfigEntity.md#onentitychange)
___
### onGrabDisableChange
`Readonly` **onGrabDisableChange**: `Event`\<`boolean`\>
___
### onReadonlyOrDisabledChange
`Readonly` **onReadonlyOrDisabledChange**: `Event`\<\{ `disabled`: `boolean` ; `readonly`: `boolean` }\>
___
### playgroundDomNode
**playgroundDomNode**: `HTMLElement`
___
### preDispose
`Readonly` **preDispose**: `DisposableCollection`
销毁前事件管理
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[preDispose](./ConfigEntity.md#predispose)
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
销毁事件管理
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[toDispose](./ConfigEntity.md#todispose)
___
### type
`Static` **type**: `string` = `'PlaygroundConfigEntity'`
#### Overrides
[ConfigEntity](./ConfigEntity.md).[type](./ConfigEntity.md#type)
## Accessors
### config
`get` **config**(): `P`
#### Returns
`P`
#### Inherited from
ConfigEntity.config
___
### context
`get` **context**(): `any`
#### Returns
`any`
#### Inherited from
ConfigEntity.context
___
### disabled
`get` **disabled**(): `boolean`
#### Returns
`boolean`
`set` **disabled**(`disabled`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `disabled` | `boolean` |
#### Returns
`void`
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
ConfigEntity.disposed
___
### finalScale
`get` **finalScale**(): `number`
缩放比例
使用 zoom 替代
#### Returns
`number`
**`Deprecated`**
___
### grabDisable
`get` **grabDisable**(): `boolean`
是否禁用抓取拖拽画布能力
#### Returns
`boolean`
`set` **grabDisable**(`grabDisable`): `void`
是否禁用抓取拖拽画布能力
#### Parameters
| Name | Type |
| :------ | :------ |
| `grabDisable` | `boolean` |
#### Returns
`void`
___
### id
`get` **id**(): `string`
实体 id
#### Returns
`string`
#### Inherited from
ConfigEntity.id
___
### loading
`get` **loading**(): `boolean`
#### Returns
`boolean`
`set` **loading**(`loading`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `loading` | `boolean` |
#### Returns
`void`
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
销毁事件
#### Returns
`Event`\<`void`\>
#### Inherited from
ConfigEntity.onDispose
___
### readonly
`get` **readonly**(): `boolean`
#### Returns
`boolean`
`set` **readonly**(`readonly`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `readonly` | `boolean` |
#### Returns
`void`
___
### readonlyOrDisabled
`get` **readonlyOrDisabled**(): `boolean`
#### Returns
`boolean`
___
### savedInManager
`get` **savedInManager**(): `boolean`
是否存到全局 manager，默认 true
#### Returns
`boolean`
#### Inherited from
ConfigEntity.savedInManager
___
### scrollData
`get` **scrollData**(): `Object`
#### Returns
`Object`
| Name | Type |
| :------ | :------ |
| `scrollX` | `number` |
| `scrollY` | `number` |
___
### scrollDisable
`get` **scrollDisable**(): `boolean`
#### Returns
`boolean`
`set` **scrollDisable**(`scrollDisable`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `scrollDisable` | `boolean` |
#### Returns
`void`
___
### type
`get` **type**(): `string`
实体类型
#### Returns
`string`
#### Inherited from
ConfigEntity.type
___
### version
`get` **version**(): `number`
实体的版本
#### Returns
`number`
#### Inherited from
ConfigEntity.version
___
### zoom
`get` **zoom**(): `number`
缩放比例
#### Returns
`number`
___
### zoomDisable
`get` **zoomDisable**(): `boolean`
#### Returns
`boolean`
`set` **zoomDisable**(`zoomDisable`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `zoomDisable` | `boolean` |
#### Returns
`void`
___
### zoomEnable
`get` **zoomEnable**(): `boolean`
#### Returns
`boolean`
**`Deprecated`**
use 'zoomDisable' instead
`set` **zoomEnable**(`zoomEnable`): `void`
开启缩放
#### Parameters
| Name | Type |
| :------ | :------ |
| `zoomEnable` | `boolean` |
#### Returns
`void`
**`Deprecated`**
use 'zoomDisable' instead
## Methods
### addData
**addData**\<`D`\>(`Registry`, `defaultProps?`): `D`
添加数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends [`EntityData`](./EntityData.md)\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\> |
| `defaultProps?` | [`EntityDataProps`](../types/EntityDataProps.md)\<`D`\> |
#### Returns
`D`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[addData](./ConfigEntity.md#adddata)
___
### addInitializeData
**addInitializeData**(`datas`, `dataConfig?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `datas` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\>[] |
| `dataConfig?` | `any` |
#### Returns
`void`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[addInitializeData](./ConfigEntity.md#addinitializedata)
___
### addScrollLimit
**addScrollLimit**(`fn`): `void`
添加滚动限制逻辑
#### Parameters
| Name | Type |
| :------ | :------ |
| `fn` | [`PlaygroundScrollLimitFn`](../types/PlaygroundScrollLimitFn.md) |
#### Returns
`void`
___
### checkChanged
**checkChanged**(`oldData`, `newData`): `boolean`
判断 config 数据是否变化
#### Parameters
| Name | Type |
| :------ | :------ |
| `oldData` | [`PlaygroundConfigEntityData`](../interfaces/PlaygroundConfigEntityData.md) |
| `newData` | `Partial`\<[`PlaygroundConfigEntityData`](../interfaces/PlaygroundConfigEntityData.md)\> |
#### Returns
`boolean`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[checkChanged](./ConfigEntity.md#checkchanged)
___
### dispose
**dispose**(): `void`
销毁实体
#### Returns
`void`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[dispose](./ConfigEntity.md#dispose)
___
### fitView
**fitView**(`bounds`, `easing?`, `padding?`, `easingDuration?`): `Promise`\<`void`\>
适应大小
#### Parameters
| Name | Type | Default value | Description |
| :------ | :------ | :------ | :------ |
| `bounds` | `Rectangle` | `undefined` | 目标大小 |
| `easing` | `boolean` | `true` | 是否开启动画，默认开启 |
| `padding` | `number` | `0` | 边界空白 |
| `easingDuration` | `number` | `300` | |
#### Returns
`Promise`\<`void`\>
___
### fixLayerPosition
**fixLayerPosition**(`layerNode`): `void`
让 layer 的 node 节点不随着画布滚动条滚动
#### Parameters
| Name | Type |
| :------ | :------ |
| `layerNode` | `HTMLElement` |
#### Returns
`void`
___
### fromJSON
**fromJSON**(`data?`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data?` | `any` |
#### Returns
`void`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[fromJSON](./ConfigEntity.md#fromjson)
___
### getClientBounds
**getClientBounds**(): `Rectangle`
#### Returns
`Rectangle`
___
### getData
**getData**\<`D`\>(`Registry`): `D`
获取 data 数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends [`EntityData`](./EntityData.md)\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<`D`\> |
#### Returns
`D`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[getData](./ConfigEntity.md#getdata)
___
### getDefaultConfig
**getDefaultConfig**(): [`PlaygroundConfigEntityData`](../interfaces/PlaygroundConfigEntityData.md)
#### Returns
[`PlaygroundConfigEntityData`](../interfaces/PlaygroundConfigEntityData.md)
#### Overrides
[ConfigEntity](./ConfigEntity.md).[getDefaultConfig](./ConfigEntity.md#getdefaultconfig)
___
### getDefaultDataRegistries
**getDefaultDataRegistries**(): [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\>[]
默认初始化的 Data
#### Returns
[`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\>[]
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[getDefaultDataRegistries](./ConfigEntity.md#getdefaultdataregistries)
___
### getPageBounds
**getPageBounds**(): `undefined` \| `Rectangle`
#### Returns
`undefined` \| `Rectangle`
___
### getPosFromMouseEvent
**getPosFromMouseEvent**(`event`, `withScale?`): [`PositionSchema`](../interfaces/PositionSchema.md)
获取相对画布的位置
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `event` | `MouseEvent` \| `TouchEvent` \| \{ `clientX`: `number` ; `clientY`: `number` } | `undefined` |
| `withScale` | `boolean` | `true` |
#### Returns
[`PositionSchema`](../interfaces/PositionSchema.md)
___
### getService
**getService**\<`T`\>(`identifier`): `T`
获取 IOC 服务
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `identifier` | `ServiceIdentifier`\<`T`\> |
#### Returns
`T`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[getService](./ConfigEntity.md#getservice)
___
### getViewport
**getViewport**(`withScale?`): `Rectangle`
获取可视区域
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `withScale` | `boolean` | `true` |
#### Returns
`Rectangle`
___
### hasData
**hasData**(`Registry`): `boolean`
是否有指定数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](./EntityData.md)\<`any`, {}\>\> |
#### Returns
`boolean`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[hasData](./ConfigEntity.md#hasdata)
___
### isViewportVisible
**isViewportVisible**(`bounds`, `rotation?`, `includeAll?`): `boolean`
判断矩形是否在可视区域，如果有擦边页代表在可是区域
#### Parameters
| Name | Type | Default value | Description |
| :------ | :------ | :------ | :------ |
| `bounds` | `Rectangle` | `undefined` | |
| `rotation` | `number` | `0` | |
| `includeAll` | `boolean` | `false` | 是否包含在里边，默认 false |
#### Returns
`boolean`
___
### onConfigChanged
**onConfigChanged**(`fn`): `Disposable`
#### Parameters
| Name | Type |
| :------ | :------ |
| `fn` | (`data`: [`PlaygroundConfigEntityData`](../interfaces/PlaygroundConfigEntityData.md)) => `void` |
#### Returns
`Disposable`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[onConfigChanged](./ConfigEntity.md#onconfigchanged)
___
### removeData
**removeData**\<`D`\>(`Registry`): `void`
删除数据，初始化状态注入的数据无法被删除
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends [`EntityData`](./EntityData.md)\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<`D`\> |
#### Returns
`void`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[removeData](./ConfigEntity.md#removedata)
___
### reset
**reset**(): `void`
重制为初始化状态
#### Returns
`void`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[reset](./ConfigEntity.md#reset)
___
### scroll
**scroll**(`scroll`, `easing?`, `easingDuration?`): `Promise`\<`void`\>
滚动
#### Parameters
| Name | Type | Default value | Description |
| :------ | :------ | :------ | :------ |
| `scroll` | `Partial`\<\{ `scrollX`: `number` ; `scrollY`: `number` ; `zoom`: `number` }\> | `undefined` | |
| `easing` | `boolean` | `true` | 是否开启缓动，默认开启 |
| `easingDuration` | `number` | `300` | 滚动持续时间，默认 300ms |
#### Returns
`Promise`\<`void`\>
___
### scrollPageBoundsToCenter
**scrollPageBoundsToCenter**(`zoomToFit?`, `fitPadding?`, `easing?`): `Promise`\<`void`\>
滚动到画布中央
#### Parameters
| Name | Type | Default value | Description |
| :------ | :------ | :------ | :------ |
| `zoomToFit` | `boolean` | `true` | 是否缩放并适配外围大小 |
| `fitPadding` | `number` | `16` | 适配外围的留白 |
| `easing` | `boolean` | `true` | 是否缓动 |
#### Returns
`Promise`\<`void`\>
___
### scrollToView
**scrollToView**(`opts?`): `Promise`\<`void`\>
按下边顺序执行
1. 指定的 entity 位置或 pos 位置
3. 初始化位置
#### Parameters
| Name | Type |
| :------ | :------ |
| `opts` | [`PlaygroundConfigRevealOpts`](../interfaces/PlaygroundConfigRevealOpts.md) |
#### Returns
`Promise`\<`void`\>
___
### setPageBounds
**setPageBounds**(`bounds`): `void`
这只画布边框，元素编辑的时候回吸附画布边框
#### Parameters
| Name | Type |
| :------ | :------ |
| `bounds` | `Rectangle` |
#### Returns
`void`
___
### toFixedPos
**toFixedPos**(`pos`): [`PositionSchema`](../interfaces/PositionSchema.md)
将画布中的位置转成相对 window 的位置
#### Parameters
| Name | Type |
| :------ | :------ |
| `pos` | [`PositionSchema`](../interfaces/PositionSchema.md) |
#### Returns
[`PositionSchema`](../interfaces/PositionSchema.md)
___
### toJSON
**toJSON**(): `any`
存储数据，用于持久化存储
#### Returns
`any`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[toJSON](./ConfigEntity.md#tojson)
___
### updateConfig
**updateConfig**(`props`): `void`
更新实体配置
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | `Partial`\<[`PlaygroundConfigEntityData`](../interfaces/PlaygroundConfigEntityData.md)\> |
#### Returns
`void`
#### Overrides
[ConfigEntity](./ConfigEntity.md).[updateConfig](./ConfigEntity.md#updateconfig)
___
### updateCursor
**updateCursor**(`cursor`): `void`
修改画布光标
#### Parameters
| Name | Type |
| :------ | :------ |
| `cursor` | `string` |
#### Returns
`void`
___
### updateData
**updateData**\<`D`\>(`Registry`, `props`): `void`
更新实体的数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends [`EntityData`](./EntityData.md)\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<`D`\> |
| `props` | [`EntityDataProps`](../types/EntityDataProps.md)\<`D`\> |
#### Returns
`void`
#### Inherited from
[ConfigEntity](./ConfigEntity.md).[updateData](./ConfigEntity.md#updatedata)
___
### updateZoom
**updateZoom**(`newZoom`, `easing?`, `easingDuration?`): `void`
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `newZoom` | `number` | `undefined` |
| `easing` | `boolean` | `true` |
| `easingDuration` | `number` | `200` |
#### Returns
`void`
___
### zoomin
**zoomin**(`easing?`, `easingDuration?`): `void`
放大
#### Parameters
| Name | Type |
| :------ | :------ |
| `easing?` | `boolean` |
| `easingDuration?` | `number` |
#### Returns
`void`
___
### zoomout
**zoomout**(`easing?`, `easingDuration?`): `void`
缩小
#### Parameters
| Name | Type |
| :------ | :------ |
| `easing?` | `boolean` |
| `easingDuration?` | `number` |
#### Returns
`void`
---
url: /auto-docs/core/classes/PlaygroundDrag-1.md
---
# Class: PlaygroundDrag\
## Type parameters
| Name | Type |
| :------ | :------ |
| `T` | `undefined` |
## Implements
- `Disposable`
## Table of contents
### Constructors
- [constructor](./PlaygroundDrag-1.md#constructor)
### Properties
- [onDrag](./PlaygroundDrag-1.md#ondrag)
- [onDragEnd](./PlaygroundDrag-1.md#ondragend)
- [onDragStart](./PlaygroundDrag-1.md#ondragstart)
### Accessors
- [isStarted](./PlaygroundDrag-1.md#isstarted)
- [scale](./PlaygroundDrag-1.md#scale)
### Methods
- [dispose](./PlaygroundDrag-1.md#dispose)
- [fireScroll](./PlaygroundDrag-1.md#firescroll)
- [handleEvent](./PlaygroundDrag-1.md#handleevent)
- [start](./PlaygroundDrag-1.md#start)
- [stop](./PlaygroundDrag-1.md#stop)
## Constructors
### constructor
**new PlaygroundDrag**\<`T`\>(`options?`)
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | `undefined` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `options` | [`PlaygroundDragOptions`](../interfaces/PlaygroundDragOptions.md)\<`T`\> |
## Properties
### onDrag
`Readonly` **onDrag**: `Event`\<[`PlaygroundDragEvent`](../interfaces/PlaygroundDragEvent.md)\>
___
### onDragEnd
`Readonly` **onDragEnd**: `Event`\<[`PlaygroundDragEvent`](../interfaces/PlaygroundDragEvent.md)\>
___
### onDragStart
`Readonly` **onDragStart**: `Event`\<[`PlaygroundDragEvent`](../interfaces/PlaygroundDragEvent.md)\>
## Accessors
### isStarted
`get` **isStarted**(): `boolean`
#### Returns
`boolean`
___
### scale
`get` **scale**(): `number`
#### Returns
`number`
## Methods
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Implementation of
Disposable.dispose
___
### fireScroll
**fireScroll**(`scrollKey`, `added`): `void`
触发滚动
#### Parameters
| Name | Type |
| :------ | :------ |
| `scrollKey` | ``"scrollY"`` \| ``"scrollX"`` |
| `added` | `boolean` |
#### Returns
`void`
___
### handleEvent
**handleEvent**(`_event`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `_event` | `Event` |
#### Returns
`void`
___
### start
**start**(`clientX`, `clientY`, `entity?`, `context?`): `Promise`\<`void`\>
#### Parameters
| Name | Type |
| :------ | :------ |
| `clientX` | `number` |
| `clientY` | `number` |
| `entity?` | [`PlaygroundConfigEntity`](./PlaygroundConfigEntity.md) |
| `context?` | `T` |
#### Returns
`Promise`\<`void`\>
___
### stop
**stop**(`clientX`, `clientY`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `clientX` | `number` |
| `clientY` | `number` |
#### Returns
`void`
---
url: /auto-docs/core/classes/PlaygroundGesture.md
---
# Class: PlaygroundGesture
## Hierarchy
- `DisposableImpl`
↳ **`PlaygroundGesture`**
## Table of contents
### Constructors
- [constructor](./PlaygroundGesture.md#constructor)
### Properties
- [target](./PlaygroundGesture.md#target)
- [toDispose](./PlaygroundGesture.md#todispose)
### Accessors
- [disposed](./PlaygroundGesture.md#disposed)
- [onDispose](./PlaygroundGesture.md#ondispose)
- [pinching](./PlaygroundGesture.md#pinching)
### Methods
- [dispose](./PlaygroundGesture.md#dispose)
- [getScaleBounds](./PlaygroundGesture.md#getscalebounds)
- [handlePinch](./PlaygroundGesture.md#handlepinch)
## Constructors
### constructor
**new PlaygroundGesture**(`target`, `config`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `target` | `HTMLElement` |
| `config` | [`PlaygroundConfigEntity`](./PlaygroundConfigEntity.md) |
#### Overrides
DisposableImpl.constructor
## Properties
### target
`Readonly` **target**: `HTMLElement`
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
#### Inherited from
DisposableImpl.toDispose
## Accessors
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
DisposableImpl.disposed
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
#### Returns
`Event`\<`void`\>
#### Inherited from
DisposableImpl.onDispose
___
### pinching
`get` **pinching**(): `boolean`
#### Returns
`boolean`
## Methods
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Inherited from
DisposableImpl.dispose
___
### getScaleBounds
**getScaleBounds**(): `Object`
#### Returns
`Object`
| Name | Type |
| :------ | :------ |
| `max` | `number` |
| `min` | `number` |
___
### handlePinch
**handlePinch**(`params`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `params` | `Object` |
| `params.first` | `boolean` |
| `params.last` | `boolean` |
| `params.newScale` | `number` |
| `params.originX` | `number` |
| `params.originY` | `number` |
#### Returns
`void`
---
url: /auto-docs/core/classes/PlaygroundLayer.md
---
# Class: PlaygroundLayer
基础层，控制画布缩放/滚动等操作
## Hierarchy
- [`Layer`](./Layer.md)\<[`PlaygroundLayerOptions`](../interfaces/PlaygroundLayerOptions.md)\>
↳ **`PlaygroundLayer`**
## Table of contents
### Constructors
- [constructor](./PlaygroundLayer.md#constructor)
### Properties
- [config](./PlaygroundLayer.md#config)
- [context](./PlaygroundLayer.md#context)
- [entityManager](./PlaygroundLayer.md#entitymanager)
- [getOtherLayer](./PlaygroundLayer.md#getotherlayer)
- [isFocused](./PlaygroundLayer.md#isfocused)
- [listenGlobalEvent](./PlaygroundLayer.md#listenglobalevent)
- [listenPlaygroundEvent](./PlaygroundLayer.md#listenplaygroundevent)
- [node](./PlaygroundLayer.md#node)
- [observeManager](./PlaygroundLayer.md#observemanager)
- [options](./PlaygroundLayer.md#options)
- [pipelineNode](./PlaygroundLayer.md#pipelinenode)
- [playgroundNode](./PlaygroundLayer.md#playgroundnode)
- [protectWheelArea](./PlaygroundLayer.md#protectwheelarea)
- [reloadEntities](./PlaygroundLayer.md#reloadentities)
- [renderWithReactMemo](./PlaygroundLayer.md#renderwithreactmemo)
### Methods
- [autorun](./PlaygroundLayer.md#autorun)
- [createDOMCache](./PlaygroundLayer.md#createdomcache)
- [createGesture](./PlaygroundLayer.md#creategesture)
- [dispose](./PlaygroundLayer.md#dispose)
- [getPosFromMouseEvent](./PlaygroundLayer.md#getposfrommouseevent)
- [onBlur](./PlaygroundLayer.md#onblur)
- [onFocus](./PlaygroundLayer.md#onfocus)
- [onReadonlyOrDisabledChange](./PlaygroundLayer.md#onreadonlyordisabledchange)
- [onReady](./PlaygroundLayer.md#onready)
- [onResize](./PlaygroundLayer.md#onresize)
- [onScroll](./PlaygroundLayer.md#onscroll)
- [onStateChanged](./PlaygroundLayer.md#onstatechanged)
- [onViewportChange](./PlaygroundLayer.md#onviewportchange)
- [onZoom](./PlaygroundLayer.md#onzoom)
- [render](./PlaygroundLayer.md#render)
## Constructors
### constructor
**new PlaygroundLayer**()
#### Inherited from
[Layer](./Layer.md).[constructor](./Layer.md#constructor)
## Properties
### config
**config**: [`PlaygroundConfigEntity`](./PlaygroundConfigEntity.md)
全局画布配置
#### Inherited from
[Layer](./Layer.md).[config](./Layer.md#config)
___
### context
`Readonly` **context**: `any`
#### Inherited from
[Layer](./Layer.md).[context](./Layer.md#context)
___
### entityManager
`Readonly` **entityManager**: [`EntityManager`](./EntityManager.md)
实体管理器
#### Inherited from
[Layer](./Layer.md).[entityManager](./Layer.md#entitymanager)
___
### getOtherLayer
**getOtherLayer**: \(`layerRegistry`: [`LayerRegistry`](../interfaces/LayerRegistry.md)\<`T`\>) => `undefined` \| `T`
#### Type declaration
\<`T`\>(`layerRegistry`): `undefined` \| `T`
可以用于获取别的 layer
##### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`Layer`](./Layer.md)\<`any`, `any`, `T`\> |
##### Parameters
| Name | Type |
| :------ | :------ |
| `layerRegistry` | [`LayerRegistry`](../interfaces/LayerRegistry.md)\<`T`\> |
##### Returns
`undefined` \| `T`
#### Inherited from
[Layer](./Layer.md).[getOtherLayer](./Layer.md#getotherlayer)
___
### isFocused
`Readonly` **isFocused**: `boolean`
playground 是否 focused
#### Inherited from
[Layer](./Layer.md).[isFocused](./Layer.md#isfocused)
___
### listenGlobalEvent
**listenGlobalEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 document 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
#### Inherited from
[Layer](./Layer.md).[listenGlobalEvent](./Layer.md#listenglobalevent)
___
### listenPlaygroundEvent
**listenPlaygroundEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 playground 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
#### Inherited from
[Layer](./Layer.md).[listenPlaygroundEvent](./Layer.md#listenplaygroundevent)
___
### node
**node**: `HTMLElement`
layer 可能存在 dom 也可能没有，如果有，则会加入到 pipeline 的 dom 节点上
#### Inherited from
[Layer](./Layer.md).[node](./Layer.md#node)
___
### observeManager
**observeManager**: [`PipelineEntities`](../interfaces/PipelineEntities.md)
当前 layer 的所有监听的实体数据
#### Inherited from
[Layer](./Layer.md).[observeManager](./Layer.md#observemanager)
___
### options
**options**: [`PlaygroundLayerOptions`](../interfaces/PlaygroundLayerOptions.md)
layer 的配置, 由 registerLayer(Layer, LayerOptions) 传入
#### Inherited from
[Layer](./Layer.md).[options](./Layer.md#options)
___
### pipelineNode
**pipelineNode**: `HTMLElement`
父节点
#### Inherited from
[Layer](./Layer.md).[pipelineNode](./Layer.md#pipelinenode)
___
### playgroundNode
**playgroundNode**: `HTMLElement`
画布根节点
#### Inherited from
[Layer](./Layer.md).[playgroundNode](./Layer.md#playgroundnode)
___
### protectWheelArea
`Optional` **protectWheelArea**: [`ProtectWheelArea`](../variables/ProtectWheelArea-1.md)
___
### reloadEntities
**reloadEntities**: () => `boolean`
#### Type declaration
(): `boolean`
加载 layer 注册的实体数据，内部使用，不需要手动触发
##### Returns
`boolean`
数据是否变化
#### Inherited from
[Layer](./Layer.md).[reloadEntities](./Layer.md#reloadentities)
___
### renderWithReactMemo
**renderWithReactMemo**: `boolean` = `true`
默认在渲染时候都会启用 react memo 进行隔离，这种情况就需要数据驱动更新
#### Inherited from
[Layer](./Layer.md).[renderWithReactMemo](./Layer.md#renderwithreactmemo)
## Methods
### autorun
**autorun**(): `void`
自动触发更新，在不需要 react 的时候用这个方法
#### Returns
`void`
#### Overrides
[Layer](./Layer.md).[autorun](./Layer.md#autorun)
___
### createDOMCache
**createDOMCache**\<`T`\>(`className`, `children?`): `CacheManager`\<`T`, `CacheOriginItem`\>
创建 dom 缓冲池
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `DOMCache`\<`T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `className` | `string` \| () => `HTMLElement` |
| `children?` | `string` |
#### Returns
`CacheManager`\<`T`, `CacheOriginItem`\>
#### Inherited from
[Layer](./Layer.md).[createDOMCache](./Layer.md#createdomcache)
___
### createGesture
**createGesture**(): `void`
#### Returns
`void`
___
### dispose
**dispose**(): `void`
销毁
#### Returns
`void`
#### Inherited from
[Layer](./Layer.md).[dispose](./Layer.md#dispose)
___
### getPosFromMouseEvent
**getPosFromMouseEvent**(`event`, `addScale?`): [`PositionSchema`](../interfaces/PositionSchema.md)
获取鼠标在 Playground 的位置
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `event` | `Object` | `undefined` |
| `event.clientX` | `number` | `undefined` |
| `event.clientY` | `number` | `undefined` |
| `addScale` | `boolean` | `true` |
#### Returns
[`PositionSchema`](../interfaces/PositionSchema.md)
#### Inherited from
[Layer](./Layer.md).[getPosFromMouseEvent](./Layer.md#getposfrommouseevent)
___
### onBlur
`Optional` **onBlur**(): `void`
playground blur 时候触发
#### Returns
`void`
#### Inherited from
[Layer](./Layer.md).[onBlur](./Layer.md#onblur)
___
### onFocus
`Optional` **onFocus**(): `void`
playground focus 时候触发
#### Returns
`void`
#### Inherited from
[Layer](./Layer.md).[onFocus](./Layer.md#onfocus)
___
### onReadonlyOrDisabledChange
`Optional` **onReadonlyOrDisabledChange**(`state`): `void`
readonly 或 disable 状态变化
#### Parameters
| Name | Type |
| :------ | :------ |
| `state` | `Object` |
| `state.disabled` | `boolean` |
| `state.readonly` | `boolean` |
#### Returns
`void`
#### Inherited from
[Layer](./Layer.md).[onReadonlyOrDisabledChange](./Layer.md#onreadonlyordisabledchange)
___
### onReady
**onReady**(): `void`
初始化时候触发
#### Returns
`void`
#### Overrides
[Layer](./Layer.md).[onReady](./Layer.md#onready)
___
### onResize
`Optional` **onResize**(`size`): `void`
playground 大小变化时候会触发
#### Parameters
| Name | Type |
| :------ | :------ |
| `size` | [`PipelineDimension`](../interfaces/PipelineDimension.md) |
#### Returns
`void`
#### Inherited from
[Layer](./Layer.md).[onResize](./Layer.md#onresize)
___
### onScroll
`Optional` **onScroll**(`scroll`): `void`
监听滚动
#### Parameters
| Name | Type |
| :------ | :------ |
| `scroll` | `Object` |
| `scroll.scrollX` | `number` |
| `scroll.scrollY` | `number` |
#### Returns
`void`
#### Inherited from
[Layer](./Layer.md).[onScroll](./Layer.md#onscroll)
___
### onStateChanged
**onStateChanged**(`e`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `e` | [`EditorStateChangeEvent`](../interfaces/EditorStateChangeEvent.md) |
#### Returns
`void`
___
### onViewportChange
`Optional` **onViewportChange**(): `void`
viewport 更新触发
#### Returns
`void`
#### Inherited from
[Layer](./Layer.md).[onViewportChange](./Layer.md#onviewportchange)
___
### onZoom
`Optional` **onZoom**(`zoom`): `void`
监听缩放
#### Parameters
| Name | Type |
| :------ | :------ |
| `zoom` | `number` |
#### Returns
`void`
#### Inherited from
[Layer](./Layer.md).[onZoom](./Layer.md#onzoom)
___
### render
`Optional` **render**(): `Element`
绘制 react
#### Returns
`Element`
#### Inherited from
[Layer](./Layer.md).[render](./Layer.md#render)
---
url: /auto-docs/core/classes/PlaygroundMockTools.LayerTestState.md
---
# Class: LayerTestState\
[PlaygroundMockTools](../modules/PlaygroundMockTools.md).LayerTestState
## Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`Layer`](./Layer.md) = [`Layer`](./Layer.md) |
## Table of contents
### Constructors
- [constructor](./PlaygroundMockTools.LayerTestState.md#constructor)
### Properties
- [autorun](./PlaygroundMockTools.LayerTestState.md#autorun)
- [container](./PlaygroundMockTools.LayerTestState.md#container)
- [instance](./PlaygroundMockTools.LayerTestState.md#instance)
- [onBlur](./PlaygroundMockTools.LayerTestState.md#onblur)
- [onFocus](./PlaygroundMockTools.LayerTestState.md#onfocus)
- [onReadonlyOrDisabledChange](./PlaygroundMockTools.LayerTestState.md#onreadonlyordisabledchange)
- [onReady](./PlaygroundMockTools.LayerTestState.md#onready)
- [onResize](./PlaygroundMockTools.LayerTestState.md#onresize)
- [onScroll](./PlaygroundMockTools.LayerTestState.md#onscroll)
- [onViewportChange](./PlaygroundMockTools.LayerTestState.md#onviewportchange)
- [onZoom](./PlaygroundMockTools.LayerTestState.md#onzoom)
- [playground](./PlaygroundMockTools.LayerTestState.md#playground)
- [render](./PlaygroundMockTools.LayerTestState.md#render)
## Constructors
### constructor
**new LayerTestState**\<`T`\>(`instance`, `playground`, `container`)
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`Layer`](./Layer.md)\<`any`, `any`, `T`\> = [`Layer`](./Layer.md)\<`any`, `any`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `instance` | `T` |
| `playground` | [`Playground`](./Playground.md)\<`any`\> |
| `container` | `Container` |
## Properties
### autorun
**autorun**: `SpyInstance`
___
### container
`Readonly` **container**: `Container`
___
### instance
`Readonly` **instance**: `T`
___
### onBlur
**onBlur**: `SpyInstance`
___
### onFocus
**onFocus**: `SpyInstance`
___
### onReadonlyOrDisabledChange
**onReadonlyOrDisabledChange**: `SpyInstance`
___
### onReady
**onReady**: `SpyInstance`
___
### onResize
**onResize**: `SpyInstance`
___
### onScroll
**onScroll**: `SpyInstance`
___
### onViewportChange
**onViewportChange**: `SpyInstance`
___
### onZoom
**onZoom**: `SpyInstance`
___
### playground
`Readonly` **playground**: [`Playground`](./Playground.md)\<`any`\>
___
### render
**render**: `SpyInstance`
---
url: /auto-docs/core/classes/PlaygroundRegistry.md
---
# Class: PlaygroundRegistry
## Table of contents
### Constructors
- [constructor](./PlaygroundRegistry.md#constructor)
### Properties
- [entityManager](./PlaygroundRegistry.md#entitymanager)
- [playgroundConfig](./PlaygroundRegistry.md#playgroundconfig)
### Methods
- [config](./PlaygroundRegistry.md#config)
- [registerEditorState](./PlaygroundRegistry.md#registereditorstate)
- [registerEntity](./PlaygroundRegistry.md#registerentity)
- [registerLayer](./PlaygroundRegistry.md#registerlayer)
## Constructors
### constructor
**new PlaygroundRegistry**()
## Properties
### entityManager
`Readonly` **entityManager**: [`EntityManager`](./EntityManager.md)
___
### playgroundConfig
`Readonly` **playgroundConfig**: [`PlaygroundConfig`](../variables/PlaygroundConfig-1.md)
## Methods
### config
**config**(`config`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `config` | `Partial`\<[`PlaygroundConfig`](../variables/PlaygroundConfig-1.md)\> |
#### Returns
`void`
___
### registerEditorState
**registerEditorState**(`state`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `state` | [`EditorState`](../interfaces/EditorState-1.md) |
#### Returns
`void`
___
### registerEntity
**registerEntity**(`entityRegistry`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `entityRegistry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
#### Returns
`void`
___
### registerLayer
**registerLayer**(`layerRegistry`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `layerRegistry` | [`LayerRegistry`](../interfaces/LayerRegistry.md)\<[`Layer`](./Layer.md)\<`any`, `any`\>\> |
#### Returns
`void`
---
url: /auto-docs/core/classes/PlaygroundSchedule.md
---
# Class: PlaygroundSchedule
## Implements
- `Disposable`
## Table of contents
### Constructors
- [constructor](./PlaygroundSchedule.md#constructor)
### Methods
- [dispose](./PlaygroundSchedule.md#dispose)
- [push](./PlaygroundSchedule.md#push)
## Constructors
### constructor
**new PlaygroundSchedule**()
## Methods
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Implementation of
Disposable.dispose
___
### push
**push**(`key`, `fn`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `key` | `any` |
| `fn` | () => `void` |
#### Returns
`void`
---
url: /auto-docs/core/classes/PositionData.md
---
# Class: PositionData
Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
SPDX-License-Identifier: MIT
## Hierarchy
- [`EntityData`](./EntityData.md)\<[`PositionSchema`](../interfaces/PositionSchema.md)\>
↳ **`PositionData`**
## Implements
- [`PositionSchema`](../interfaces/PositionSchema.md)
## Table of contents
### Constructors
- [constructor](./PositionData.md#constructor)
### Properties
- [entity](./PositionData.md#entity)
- [onDataChange](./PositionData.md#ondatachange)
- [onWillChange](./PositionData.md#onwillchange)
- [opts](./PositionData.md#opts)
- [toDispose](./PositionData.md#todispose)
- [type](./PositionData.md#type)
### Accessors
- [changeLocked](./PositionData.md#changelocked)
- [data](./PositionData.md#data)
- [disposed](./PositionData.md#disposed)
- [onDispose](./PositionData.md#ondispose)
- [type](./PositionData.md#type-1)
- [version](./PositionData.md#version)
- [x](./PositionData.md#x)
- [y](./PositionData.md#y)
### Methods
- [checkChanged](./PositionData.md#checkchanged)
- [dispose](./PositionData.md#dispose)
- [fireChange](./PositionData.md#firechange)
- [fireWillChange](./PositionData.md#firewillchange)
- [fromJSON](./PositionData.md#fromjson)
- [fullyUpdate](./PositionData.md#fullyupdate)
- [getDefaultData](./PositionData.md#getdefaultdata)
- [toJSON](./PositionData.md#tojson)
- [update](./PositionData.md#update)
## Constructors
### constructor
**new PositionData**(`entity`, `opts?`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `entity` | [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\> |
| `opts?` | `Object` |
#### Inherited from
[EntityData](./EntityData.md).[constructor](./EntityData.md#constructor)
## Properties
### entity
**entity**: [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>
#### Inherited from
[EntityData](./EntityData.md).[entity](./EntityData.md#entity)
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<[`EntityData`](./EntityData.md)\<[`PositionSchema`](../interfaces/PositionSchema.md), {}\>\>
修改后触发
#### Inherited from
[EntityData](./EntityData.md).[onDataChange](./EntityData.md#ondatachange)
___
### onWillChange
`Readonly` **onWillChange**: `Event`\<[`EntityData`](./EntityData.md)\<[`PositionSchema`](../interfaces/PositionSchema.md), {}\>\>
修改前触发
#### Inherited from
[EntityData](./EntityData.md).[onWillChange](./EntityData.md#onwillchange)
___
### opts
`Optional` `Readonly` **opts**: `Object`
#### Inherited from
[EntityData](./EntityData.md).[opts](./EntityData.md#opts)
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
#### Inherited from
[EntityData](./EntityData.md).[toDispose](./EntityData.md#todispose)
___
### type
`Static` **type**: `string` = `'PositionData'`
#### Overrides
[EntityData](./EntityData.md).[type](./EntityData.md#type)
## Accessors
### changeLocked
`get` **changeLocked**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.changeLocked
`set` **changeLocked**(`p`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `p` | `boolean` |
#### Returns
`void`
#### Inherited from
EntityData.changeLocked
___
### data
`get` **data**(): `DATA`
当前数据
#### Returns
`DATA`
#### Inherited from
EntityData.data
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.disposed
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
#### Returns
`Event`\<`void`\>
#### Inherited from
EntityData.onDispose
___
### type
`get` **type**(): `string`
data 类型
#### Returns
`string`
#### Inherited from
EntityData.type
___
### version
`get` **version**(): `number`
#### Returns
`number`
#### Inherited from
EntityData.version
___
### x
`get` **x**(): `number`
#### Returns
`number`
#### Implementation of
[PositionSchema](../interfaces/PositionSchema.md).[x](../interfaces/PositionSchema.md#x)
`set` **x**(`x`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `x` | `number` |
#### Returns
`void`
#### Implementation of
[PositionSchema](../interfaces/PositionSchema.md).[x](../interfaces/PositionSchema.md#x)
___
### y
`get` **y**(): `number`
#### Returns
`number`
#### Implementation of
[PositionSchema](../interfaces/PositionSchema.md).[y](../interfaces/PositionSchema.md#y)
`set` **y**(`y`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `y` | `number` |
#### Returns
`void`
#### Implementation of
[PositionSchema](../interfaces/PositionSchema.md).[y](../interfaces/PositionSchema.md#y)
## Methods
### checkChanged
**checkChanged**(`newProps`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `newProps` | [`PositionSchema`](../interfaces/PositionSchema.md) \| `Partial`\<[`PositionSchema`](../interfaces/PositionSchema.md)\> |
#### Returns
`boolean`
**`Deprecated`**
检测属性是否更改，默认采用浅比较
#### Inherited from
[EntityData](./EntityData.md).[checkChanged](./EntityData.md#checkchanged)
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[dispose](./EntityData.md#dispose)
___
### fireChange
**fireChange**(): `void`
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fireChange](./EntityData.md#firechange)
___
### fireWillChange
**fireWillChange**(): `void`
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fireWillChange](./EntityData.md#firewillchange)
___
### fromJSON
**fromJSON**(`data`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data` | `object` |
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fromJSON](./EntityData.md#fromjson)
___
### fullyUpdate
**fullyUpdate**(`props`): `void`
更新全量数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | [`PositionSchema`](../interfaces/PositionSchema.md) |
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fullyUpdate](./EntityData.md#fullyupdate)
___
### getDefaultData
**getDefaultData**(): [`PositionSchema`](../interfaces/PositionSchema.md)
初始化数据
#### Returns
[`PositionSchema`](../interfaces/PositionSchema.md)
#### Overrides
[EntityData](./EntityData.md).[getDefaultData](./EntityData.md#getdefaultdata)
___
### toJSON
**toJSON**(): `any`
存储数据，一般在关闭浏览器后需要暂时存到 localStorage
#### Returns
`any`
#### Inherited from
[EntityData](./EntityData.md).[toJSON](./EntityData.md#tojson)
___
### update
**update**(`props`, `value?`): `void`
更新单个数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | [`PositionSchema`](../interfaces/PositionSchema.md) \| `Partial`\<[`PositionSchema`](../interfaces/PositionSchema.md)\> \| keyof [`PositionSchema`](../interfaces/PositionSchema.md) |
| `value?` | `any` |
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[update](./EntityData.md#update)
---
url: /auto-docs/core/classes/RotationData.md
---
# Class: RotationData
实体的数据块
## Hierarchy
- [`EntityData`](./EntityData.md)\<[`RotationSchema`](../types/RotationSchema.md)\>
↳ **`RotationData`**
## Table of contents
### Constructors
- [constructor](./RotationData.md#constructor)
### Properties
- [entity](./RotationData.md#entity)
- [onDataChange](./RotationData.md#ondatachange)
- [onWillChange](./RotationData.md#onwillchange)
- [opts](./RotationData.md#opts)
- [toDispose](./RotationData.md#todispose)
- [type](./RotationData.md#type)
### Accessors
- [changeLocked](./RotationData.md#changelocked)
- [data](./RotationData.md#data)
- [disposed](./RotationData.md#disposed)
- [onDispose](./RotationData.md#ondispose)
- [type](./RotationData.md#type-1)
- [version](./RotationData.md#version)
### Methods
- [checkChanged](./RotationData.md#checkchanged)
- [dispose](./RotationData.md#dispose)
- [fireChange](./RotationData.md#firechange)
- [fireWillChange](./RotationData.md#firewillchange)
- [fromJSON](./RotationData.md#fromjson)
- [fullyUpdate](./RotationData.md#fullyupdate)
- [getDefaultData](./RotationData.md#getdefaultdata)
- [toJSON](./RotationData.md#tojson)
- [update](./RotationData.md#update)
## Constructors
### constructor
**new RotationData**(`entity`, `opts?`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `entity` | [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\> |
| `opts?` | `Object` |
#### Inherited from
[EntityData](./EntityData.md).[constructor](./EntityData.md#constructor)
## Properties
### entity
**entity**: [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>
#### Inherited from
[EntityData](./EntityData.md).[entity](./EntityData.md#entity)
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<[`EntityData`](./EntityData.md)\<`number`, {}\>\>
修改后触发
#### Inherited from
[EntityData](./EntityData.md).[onDataChange](./EntityData.md#ondatachange)
___
### onWillChange
`Readonly` **onWillChange**: `Event`\<[`EntityData`](./EntityData.md)\<`number`, {}\>\>
修改前触发
#### Inherited from
[EntityData](./EntityData.md).[onWillChange](./EntityData.md#onwillchange)
___
### opts
`Optional` `Readonly` **opts**: `Object`
#### Inherited from
[EntityData](./EntityData.md).[opts](./EntityData.md#opts)
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
#### Inherited from
[EntityData](./EntityData.md).[toDispose](./EntityData.md#todispose)
___
### type
`Static` **type**: `string` = `'RotationData'`
#### Overrides
[EntityData](./EntityData.md).[type](./EntityData.md#type)
## Accessors
### changeLocked
`get` **changeLocked**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.changeLocked
`set` **changeLocked**(`p`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `p` | `boolean` |
#### Returns
`void`
#### Inherited from
EntityData.changeLocked
___
### data
`get` **data**(): `DATA`
当前数据
#### Returns
`DATA`
#### Inherited from
EntityData.data
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.disposed
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
#### Returns
`Event`\<`void`\>
#### Inherited from
EntityData.onDispose
___
### type
`get` **type**(): `string`
data 类型
#### Returns
`string`
#### Inherited from
EntityData.type
___
### version
`get` **version**(): `number`
#### Returns
`number`
#### Inherited from
EntityData.version
## Methods
### checkChanged
**checkChanged**(`newProps`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `newProps` | `number` |
#### Returns
`boolean`
**`Deprecated`**
检测属性是否更改，默认采用浅比较
#### Inherited from
[EntityData](./EntityData.md).[checkChanged](./EntityData.md#checkchanged)
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[dispose](./EntityData.md#dispose)
___
### fireChange
**fireChange**(): `void`
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fireChange](./EntityData.md#firechange)
___
### fireWillChange
**fireWillChange**(): `void`
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fireWillChange](./EntityData.md#firewillchange)
___
### fromJSON
**fromJSON**(`data`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data` | `object` |
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fromJSON](./EntityData.md#fromjson)
___
### fullyUpdate
**fullyUpdate**(`props`): `void`
更新全量数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | `number` |
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fullyUpdate](./EntityData.md#fullyupdate)
___
### getDefaultData
**getDefaultData**(): `number`
初始化数据
#### Returns
`number`
#### Overrides
[EntityData](./EntityData.md).[getDefaultData](./EntityData.md#getdefaultdata)
___
### toJSON
**toJSON**(): `any`
存储数据，一般在关闭浏览器后需要暂时存到 localStorage
#### Returns
`any`
#### Inherited from
[EntityData](./EntityData.md).[toJSON](./EntityData.md#tojson)
___
### update
**update**(`props`, `value?`): `void`
更新单个数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | `number` \| ``"toString"`` \| ``"toFixed"`` \| ``"toExponential"`` \| ``"toPrecision"`` \| ``"valueOf"`` \| ``"toLocaleString"`` |
| `value?` | `any` |
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[update](./EntityData.md#update)
---
url: /auto-docs/core/classes/ScaleData.md
---
# Class: ScaleData
实体的数据块
## Hierarchy
- [`EntityData`](./EntityData.md)\<[`ScaleSchema`](../interfaces/ScaleSchema.md)\>
↳ **`ScaleData`**
## Implements
- [`ScaleSchema`](../interfaces/ScaleSchema.md)
## Table of contents
### Constructors
- [constructor](./ScaleData.md#constructor)
### Properties
- [entity](./ScaleData.md#entity)
- [onDataChange](./ScaleData.md#ondatachange)
- [onWillChange](./ScaleData.md#onwillchange)
- [opts](./ScaleData.md#opts)
- [toDispose](./ScaleData.md#todispose)
- [type](./ScaleData.md#type)
### Accessors
- [changeLocked](./ScaleData.md#changelocked)
- [data](./ScaleData.md#data)
- [disposed](./ScaleData.md#disposed)
- [onDispose](./ScaleData.md#ondispose)
- [type](./ScaleData.md#type-1)
- [version](./ScaleData.md#version)
- [x](./ScaleData.md#x)
- [y](./ScaleData.md#y)
### Methods
- [checkChanged](./ScaleData.md#checkchanged)
- [dispose](./ScaleData.md#dispose)
- [fireChange](./ScaleData.md#firechange)
- [fireWillChange](./ScaleData.md#firewillchange)
- [fromJSON](./ScaleData.md#fromjson)
- [fullyUpdate](./ScaleData.md#fullyupdate)
- [getDefaultData](./ScaleData.md#getdefaultdata)
- [toJSON](./ScaleData.md#tojson)
- [update](./ScaleData.md#update)
## Constructors
### constructor
**new ScaleData**(`entity`, `opts?`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `entity` | [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\> |
| `opts?` | `Object` |
#### Inherited from
[EntityData](./EntityData.md).[constructor](./EntityData.md#constructor)
## Properties
### entity
**entity**: [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>
#### Inherited from
[EntityData](./EntityData.md).[entity](./EntityData.md#entity)
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<[`EntityData`](./EntityData.md)\<[`ScaleSchema`](../interfaces/ScaleSchema.md), {}\>\>
修改后触发
#### Inherited from
[EntityData](./EntityData.md).[onDataChange](./EntityData.md#ondatachange)
___
### onWillChange
`Readonly` **onWillChange**: `Event`\<[`EntityData`](./EntityData.md)\<[`ScaleSchema`](../interfaces/ScaleSchema.md), {}\>\>
修改前触发
#### Inherited from
[EntityData](./EntityData.md).[onWillChange](./EntityData.md#onwillchange)
___
### opts
`Optional` `Readonly` **opts**: `Object`
#### Inherited from
[EntityData](./EntityData.md).[opts](./EntityData.md#opts)
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
#### Inherited from
[EntityData](./EntityData.md).[toDispose](./EntityData.md#todispose)
___
### type
`Static` **type**: `string` = `'ScaleData'`
#### Overrides
[EntityData](./EntityData.md).[type](./EntityData.md#type)
## Accessors
### changeLocked
`get` **changeLocked**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.changeLocked
`set` **changeLocked**(`p`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `p` | `boolean` |
#### Returns
`void`
#### Inherited from
EntityData.changeLocked
___
### data
`get` **data**(): `DATA`
当前数据
#### Returns
`DATA`
#### Inherited from
EntityData.data
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.disposed
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
#### Returns
`Event`\<`void`\>
#### Inherited from
EntityData.onDispose
___
### type
`get` **type**(): `string`
data 类型
#### Returns
`string`
#### Inherited from
EntityData.type
___
### version
`get` **version**(): `number`
#### Returns
`number`
#### Inherited from
EntityData.version
___
### x
`get` **x**(): `number`
#### Returns
`number`
#### Implementation of
[ScaleSchema](../interfaces/ScaleSchema.md).[x](../interfaces/ScaleSchema.md#x)
`set` **x**(`x`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `x` | `number` |
#### Returns
`void`
#### Implementation of
[ScaleSchema](../interfaces/ScaleSchema.md).[x](../interfaces/ScaleSchema.md#x)
___
### y
`get` **y**(): `number`
#### Returns
`number`
#### Implementation of
[ScaleSchema](../interfaces/ScaleSchema.md).[y](../interfaces/ScaleSchema.md#y)
`set` **y**(`y`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `y` | `number` |
#### Returns
`void`
#### Implementation of
[ScaleSchema](../interfaces/ScaleSchema.md).[y](../interfaces/ScaleSchema.md#y)
## Methods
### checkChanged
**checkChanged**(`newProps`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `newProps` | [`ScaleSchema`](../interfaces/ScaleSchema.md) \| `Partial`\<[`ScaleSchema`](../interfaces/ScaleSchema.md)\> |
#### Returns
`boolean`
**`Deprecated`**
检测属性是否更改，默认采用浅比较
#### Inherited from
[EntityData](./EntityData.md).[checkChanged](./EntityData.md#checkchanged)
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[dispose](./EntityData.md#dispose)
___
### fireChange
**fireChange**(): `void`
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fireChange](./EntityData.md#firechange)
___
### fireWillChange
**fireWillChange**(): `void`
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fireWillChange](./EntityData.md#firewillchange)
___
### fromJSON
**fromJSON**(`data`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data` | `object` |
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fromJSON](./EntityData.md#fromjson)
___
### fullyUpdate
**fullyUpdate**(`props`): `void`
更新全量数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | [`ScaleSchema`](../interfaces/ScaleSchema.md) |
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fullyUpdate](./EntityData.md#fullyupdate)
___
### getDefaultData
**getDefaultData**(): [`ScaleSchema`](../interfaces/ScaleSchema.md)
初始化数据
#### Returns
[`ScaleSchema`](../interfaces/ScaleSchema.md)
#### Overrides
[EntityData](./EntityData.md).[getDefaultData](./EntityData.md#getdefaultdata)
___
### toJSON
**toJSON**(): `any`
存储数据，一般在关闭浏览器后需要暂时存到 localStorage
#### Returns
`any`
#### Inherited from
[EntityData](./EntityData.md).[toJSON](./EntityData.md#tojson)
___
### update
**update**(`props`, `value?`): `void`
更新单个数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | [`ScaleSchema`](../interfaces/ScaleSchema.md) \| `Partial`\<[`ScaleSchema`](../interfaces/ScaleSchema.md)\> \| keyof [`ScaleSchema`](../interfaces/ScaleSchema.md) |
| `value?` | `any` |
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[update](./EntityData.md#update)
---
url: /auto-docs/core/classes/SelectionService.md
---
# Class: SelectionService
画布全局的选择器，可以放任何东西
## Implements
- `Disposable`
## Table of contents
### Constructors
- [constructor](./SelectionService.md#constructor)
### Properties
- [onSelectionChanged](./SelectionService.md#onselectionchanged)
### Accessors
- [selection](./SelectionService.md#selection)
### Methods
- [dispose](./SelectionService.md#dispose)
- [isEmpty](./SelectionService.md#isempty)
## Constructors
### constructor
**new SelectionService**()
## Properties
### onSelectionChanged
`Readonly` **onSelectionChanged**: `Event`\<`any`\>
## Accessors
### selection
`get` **selection**(): [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>[]
#### Returns
[`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>[]
`set` **selection**(`selection`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `selection` | [`Entity`](./Entity-1.md)\<`any`\>[] |
#### Returns
`void`
## Methods
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Implementation of
Disposable.dispose
___
### isEmpty
**isEmpty**(): `boolean`
#### Returns
`boolean`
---
url: /auto-docs/core/classes/SizeData.md
---
# Class: SizeData
实体的数据块
## Hierarchy
- [`EntityData`](./EntityData.md)\<[`SizeSchema`](../interfaces/SizeSchema-1.md)\>
↳ **`SizeData`**
## Implements
- [`SizeSchema`](../interfaces/SizeSchema-1.md)
## Table of contents
### Constructors
- [constructor](./SizeData.md#constructor)
### Properties
- [entity](./SizeData.md#entity)
- [onDataChange](./SizeData.md#ondatachange)
- [onWillChange](./SizeData.md#onwillchange)
- [opts](./SizeData.md#opts)
- [toDispose](./SizeData.md#todispose)
- [type](./SizeData.md#type)
### Accessors
- [changeLocked](./SizeData.md#changelocked)
- [data](./SizeData.md#data)
- [disposed](./SizeData.md#disposed)
- [height](./SizeData.md#height)
- [locked](./SizeData.md#locked)
- [onDispose](./SizeData.md#ondispose)
- [type](./SizeData.md#type-1)
- [version](./SizeData.md#version)
- [width](./SizeData.md#width)
### Methods
- [checkChanged](./SizeData.md#checkchanged)
- [dispose](./SizeData.md#dispose)
- [fireChange](./SizeData.md#firechange)
- [fireWillChange](./SizeData.md#firewillchange)
- [fromJSON](./SizeData.md#fromjson)
- [fullyUpdate](./SizeData.md#fullyupdate)
- [getDefaultData](./SizeData.md#getdefaultdata)
- [toJSON](./SizeData.md#tojson)
- [update](./SizeData.md#update)
## Constructors
### constructor
**new SizeData**(`entity`, `opts?`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `entity` | [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\> |
| `opts?` | `Object` |
#### Inherited from
[EntityData](./EntityData.md).[constructor](./EntityData.md#constructor)
## Properties
### entity
**entity**: [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>
#### Inherited from
[EntityData](./EntityData.md).[entity](./EntityData.md#entity)
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<[`EntityData`](./EntityData.md)\<[`SizeSchema`](../interfaces/SizeSchema-1.md), {}\>\>
修改后触发
#### Inherited from
[EntityData](./EntityData.md).[onDataChange](./EntityData.md#ondatachange)
___
### onWillChange
`Readonly` **onWillChange**: `Event`\<[`EntityData`](./EntityData.md)\<[`SizeSchema`](../interfaces/SizeSchema-1.md), {}\>\>
修改前触发
#### Inherited from
[EntityData](./EntityData.md).[onWillChange](./EntityData.md#onwillchange)
___
### opts
`Optional` `Readonly` **opts**: `Object`
#### Inherited from
[EntityData](./EntityData.md).[opts](./EntityData.md#opts)
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
#### Inherited from
[EntityData](./EntityData.md).[toDispose](./EntityData.md#todispose)
___
### type
`Static` **type**: `string` = `'SizeData'`
#### Overrides
[EntityData](./EntityData.md).[type](./EntityData.md#type)
## Accessors
### changeLocked
`get` **changeLocked**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.changeLocked
`set` **changeLocked**(`p`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `p` | `boolean` |
#### Returns
`void`
#### Inherited from
EntityData.changeLocked
___
### data
`get` **data**(): `DATA`
当前数据
#### Returns
`DATA`
#### Inherited from
EntityData.data
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.disposed
___
### height
`get` **height**(): `number`
#### Returns
`number`
#### Implementation of
[SizeSchema](../interfaces/SizeSchema-1.md).[height](../interfaces/SizeSchema-1.md#height)
`set` **height**(`height`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `height` | `number` |
#### Returns
`void`
#### Implementation of
[SizeSchema](../interfaces/SizeSchema-1.md).[height](../interfaces/SizeSchema-1.md#height)
___
### locked
`get` **locked**(): `boolean`
#### Returns
`boolean`
#### Implementation of
[SizeSchema](../interfaces/SizeSchema-1.md).[locked](../interfaces/SizeSchema-1.md#locked)
`set` **locked**(`locked`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `locked` | `boolean` |
#### Returns
`void`
#### Implementation of
[SizeSchema](../interfaces/SizeSchema-1.md).[locked](../interfaces/SizeSchema-1.md#locked)
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
#### Returns
`Event`\<`void`\>
#### Inherited from
EntityData.onDispose
___
### type
`get` **type**(): `string`
data 类型
#### Returns
`string`
#### Inherited from
EntityData.type
___
### version
`get` **version**(): `number`
#### Returns
`number`
#### Inherited from
EntityData.version
___
### width
`get` **width**(): `number`
#### Returns
`number`
#### Implementation of
[SizeSchema](../interfaces/SizeSchema-1.md).[width](../interfaces/SizeSchema-1.md#width)
`set` **width**(`width`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `width` | `number` |
#### Returns
`void`
#### Implementation of
[SizeSchema](../interfaces/SizeSchema-1.md).[width](../interfaces/SizeSchema-1.md#width)
## Methods
### checkChanged
**checkChanged**(`newProps`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `newProps` | [`SizeSchema`](../interfaces/SizeSchema-1.md) \| `Partial`\<[`SizeSchema`](../interfaces/SizeSchema-1.md)\> |
#### Returns
`boolean`
**`Deprecated`**
检测属性是否更改，默认采用浅比较
#### Inherited from
[EntityData](./EntityData.md).[checkChanged](./EntityData.md#checkchanged)
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[dispose](./EntityData.md#dispose)
___
### fireChange
**fireChange**(): `void`
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fireChange](./EntityData.md#firechange)
___
### fireWillChange
**fireWillChange**(): `void`
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fireWillChange](./EntityData.md#firewillchange)
___
### fromJSON
**fromJSON**(`data`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data` | `object` |
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fromJSON](./EntityData.md#fromjson)
___
### fullyUpdate
**fullyUpdate**(`props`): `void`
更新全量数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | [`SizeSchema`](../interfaces/SizeSchema-1.md) |
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fullyUpdate](./EntityData.md#fullyupdate)
___
### getDefaultData
**getDefaultData**(): [`SizeSchema`](../interfaces/SizeSchema-1.md)
初始化数据
#### Returns
[`SizeSchema`](../interfaces/SizeSchema-1.md)
#### Overrides
[EntityData](./EntityData.md).[getDefaultData](./EntityData.md#getdefaultdata)
___
### toJSON
**toJSON**(): `any`
存储数据，一般在关闭浏览器后需要暂时存到 localStorage
#### Returns
`any`
#### Inherited from
[EntityData](./EntityData.md).[toJSON](./EntityData.md#tojson)
___
### update
**update**(`props`, `value?`): `void`
更新单个数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | [`SizeSchema`](../interfaces/SizeSchema-1.md) \| `Partial`\<[`SizeSchema`](../interfaces/SizeSchema-1.md)\> \| keyof [`SizeSchema`](../interfaces/SizeSchema-1.md) |
| `value?` | `any` |
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[update](./EntityData.md#update)
---
url: /auto-docs/core/classes/SkewData.md
---
# Class: SkewData
实体的数据块
## Hierarchy
- [`EntityData`](./EntityData.md)\<[`SkewSchema`](../interfaces/SkewSchema.md)\>
↳ **`SkewData`**
## Implements
- [`SkewSchema`](../interfaces/SkewSchema.md)
## Table of contents
### Constructors
- [constructor](./SkewData.md#constructor)
### Properties
- [entity](./SkewData.md#entity)
- [onDataChange](./SkewData.md#ondatachange)
- [onWillChange](./SkewData.md#onwillchange)
- [opts](./SkewData.md#opts)
- [toDispose](./SkewData.md#todispose)
- [type](./SkewData.md#type)
### Accessors
- [changeLocked](./SkewData.md#changelocked)
- [data](./SkewData.md#data)
- [disposed](./SkewData.md#disposed)
- [onDispose](./SkewData.md#ondispose)
- [type](./SkewData.md#type-1)
- [version](./SkewData.md#version)
- [x](./SkewData.md#x)
- [y](./SkewData.md#y)
### Methods
- [checkChanged](./SkewData.md#checkchanged)
- [dispose](./SkewData.md#dispose)
- [fireChange](./SkewData.md#firechange)
- [fireWillChange](./SkewData.md#firewillchange)
- [fromJSON](./SkewData.md#fromjson)
- [fullyUpdate](./SkewData.md#fullyupdate)
- [getDefaultData](./SkewData.md#getdefaultdata)
- [toJSON](./SkewData.md#tojson)
- [update](./SkewData.md#update)
## Constructors
### constructor
**new SkewData**(`entity`, `opts?`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `entity` | [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\> |
| `opts?` | `Object` |
#### Inherited from
[EntityData](./EntityData.md).[constructor](./EntityData.md#constructor)
## Properties
### entity
**entity**: [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>
#### Inherited from
[EntityData](./EntityData.md).[entity](./EntityData.md#entity)
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<[`EntityData`](./EntityData.md)\<[`SkewSchema`](../interfaces/SkewSchema.md), {}\>\>
修改后触发
#### Inherited from
[EntityData](./EntityData.md).[onDataChange](./EntityData.md#ondatachange)
___
### onWillChange
`Readonly` **onWillChange**: `Event`\<[`EntityData`](./EntityData.md)\<[`SkewSchema`](../interfaces/SkewSchema.md), {}\>\>
修改前触发
#### Inherited from
[EntityData](./EntityData.md).[onWillChange](./EntityData.md#onwillchange)
___
### opts
`Optional` `Readonly` **opts**: `Object`
#### Inherited from
[EntityData](./EntityData.md).[opts](./EntityData.md#opts)
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
#### Inherited from
[EntityData](./EntityData.md).[toDispose](./EntityData.md#todispose)
___
### type
`Static` **type**: `string` = `'SkewData'`
#### Overrides
[EntityData](./EntityData.md).[type](./EntityData.md#type)
## Accessors
### changeLocked
`get` **changeLocked**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.changeLocked
`set` **changeLocked**(`p`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `p` | `boolean` |
#### Returns
`void`
#### Inherited from
EntityData.changeLocked
___
### data
`get` **data**(): `DATA`
当前数据
#### Returns
`DATA`
#### Inherited from
EntityData.data
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.disposed
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
#### Returns
`Event`\<`void`\>
#### Inherited from
EntityData.onDispose
___
### type
`get` **type**(): `string`
data 类型
#### Returns
`string`
#### Inherited from
EntityData.type
___
### version
`get` **version**(): `number`
#### Returns
`number`
#### Inherited from
EntityData.version
___
### x
`get` **x**(): `number`
#### Returns
`number`
#### Implementation of
[SkewSchema](../interfaces/SkewSchema.md).[x](../interfaces/SkewSchema.md#x)
`set` **x**(`x`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `x` | `number` |
#### Returns
`void`
#### Implementation of
[SkewSchema](../interfaces/SkewSchema.md).[x](../interfaces/SkewSchema.md#x)
___
### y
`get` **y**(): `number`
#### Returns
`number`
#### Implementation of
[SkewSchema](../interfaces/SkewSchema.md).[y](../interfaces/SkewSchema.md#y)
`set` **y**(`y`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `y` | `number` |
#### Returns
`void`
#### Implementation of
[SkewSchema](../interfaces/SkewSchema.md).[y](../interfaces/SkewSchema.md#y)
## Methods
### checkChanged
**checkChanged**(`newProps`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `newProps` | [`SkewSchema`](../interfaces/SkewSchema.md) \| `Partial`\<[`SkewSchema`](../interfaces/SkewSchema.md)\> |
#### Returns
`boolean`
**`Deprecated`**
检测属性是否更改，默认采用浅比较
#### Inherited from
[EntityData](./EntityData.md).[checkChanged](./EntityData.md#checkchanged)
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[dispose](./EntityData.md#dispose)
___
### fireChange
**fireChange**(): `void`
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fireChange](./EntityData.md#firechange)
___
### fireWillChange
**fireWillChange**(): `void`
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fireWillChange](./EntityData.md#firewillchange)
___
### fromJSON
**fromJSON**(`data`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data` | `object` |
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fromJSON](./EntityData.md#fromjson)
___
### fullyUpdate
**fullyUpdate**(`props`): `void`
更新全量数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | [`SkewSchema`](../interfaces/SkewSchema.md) |
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fullyUpdate](./EntityData.md#fullyupdate)
___
### getDefaultData
**getDefaultData**(): [`SkewSchema`](../interfaces/SkewSchema.md)
初始化数据
#### Returns
[`SkewSchema`](../interfaces/SkewSchema.md)
#### Overrides
[EntityData](./EntityData.md).[getDefaultData](./EntityData.md#getdefaultdata)
___
### toJSON
**toJSON**(): `any`
存储数据，一般在关闭浏览器后需要暂时存到 localStorage
#### Returns
`any`
#### Inherited from
[EntityData](./EntityData.md).[toJSON](./EntityData.md#tojson)
___
### update
**update**(`props`, `value?`): `void`
更新单个数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | [`SkewSchema`](../interfaces/SkewSchema.md) \| `Partial`\<[`SkewSchema`](../interfaces/SkewSchema.md)\> \| keyof [`SkewSchema`](../interfaces/SkewSchema.md) |
| `value?` | `any` |
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[update](./EntityData.md#update)
---
url: /auto-docs/core/classes/TransformData-1.md
---
# Class: TransformData
实体的数据块
## Hierarchy
- [`EntityData`](./EntityData.md)\<[`TransformSchema`](../interfaces/TransformSchema-1.md)\>
↳ **`TransformData`**
## Implements
- [`TransformSchema`](../interfaces/TransformSchema-1.md)
## Table of contents
### Constructors
- [constructor](./TransformData-1.md#constructor)
### Properties
- [entity](./TransformData-1.md#entity)
- [onDataChange](./TransformData-1.md#ondatachange)
- [onWillChange](./TransformData-1.md#onwillchange)
- [opts](./TransformData-1.md#opts)
- [sizeToScale](./TransformData-1.md#sizetoscale)
- [toDispose](./TransformData-1.md#todispose)
- [type](./TransformData-1.md#type)
### Accessors
- [bounds](./TransformData-1.md#bounds)
- [boundsWithoutRotation](./TransformData-1.md#boundswithoutrotation)
- [changeLocked](./TransformData-1.md#changelocked)
- [children](./TransformData-1.md#children)
- [data](./TransformData-1.md#data)
- [disposed](./TransformData-1.md#disposed)
- [isContainer](./TransformData-1.md#iscontainer)
- [localBounds](./TransformData-1.md#localbounds)
- [localID](./TransformData-1.md#localid)
- [localOrigin](./TransformData-1.md#localorigin)
- [localSize](./TransformData-1.md#localsize)
- [localTransform](./TransformData-1.md#localtransform)
- [onDispose](./TransformData-1.md#ondispose)
- [origin](./TransformData-1.md#origin)
- [parent](./TransformData-1.md#parent)
- [position](./TransformData-1.md#position)
- [rotation](./TransformData-1.md#rotation)
- [scale](./TransformData-1.md#scale)
- [size](./TransformData-1.md#size)
- [skew](./TransformData-1.md#skew)
- [type](./TransformData-1.md#type-1)
- [version](./TransformData-1.md#version)
- [worldDegree](./TransformData-1.md#worlddegree)
- [worldID](./TransformData-1.md#worldid)
- [worldOrigin](./TransformData-1.md#worldorigin)
- [worldRotation](./TransformData-1.md#worldrotation)
- [worldScale](./TransformData-1.md#worldscale)
- [worldSize](./TransformData-1.md#worldsize)
- [worldTransform](./TransformData-1.md#worldtransform)
### Methods
- [checkChanged](./TransformData-1.md#checkchanged)
- [clearChildren](./TransformData-1.md#clearchildren)
- [contains](./TransformData-1.md#contains)
- [dispose](./TransformData-1.md#dispose)
- [fireChange](./TransformData-1.md#firechange)
- [fireWillChange](./TransformData-1.md#firewillchange)
- [fromJSON](./TransformData-1.md#fromjson)
- [fullyUpdate](./TransformData-1.md#fullyupdate)
- [getDefaultData](./TransformData-1.md#getdefaultdata)
- [getMutationCache](./TransformData-1.md#getmutationcache)
- [heightToScaleY](./TransformData-1.md#heighttoscaley)
- [intersects](./TransformData-1.md#intersects)
- [isParent](./TransformData-1.md#isparent)
- [isParentTransform](./TransformData-1.md#isparenttransform)
- [setFromMatrix](./TransformData-1.md#setfrommatrix)
- [setParent](./TransformData-1.md#setparent)
- [sizeToScaleValue](./TransformData-1.md#sizetoscalevalue)
- [toJSON](./TransformData-1.md#tojson)
- [update](./TransformData-1.md#update)
- [widthToScaleX](./TransformData-1.md#widthtoscalex)
## Constructors
### constructor
**new TransformData**(`entity`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `entity` | [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\> |
#### Overrides
[EntityData](./EntityData.md).[constructor](./EntityData.md#constructor)
## Properties
### entity
**entity**: [`Entity`](./Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>
#### Inherited from
[EntityData](./EntityData.md).[entity](./EntityData.md#entity)
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<[`EntityData`](./EntityData.md)\<[`TransformSchema`](../interfaces/TransformSchema-1.md), {}\>\>
修改后触发
#### Inherited from
[EntityData](./EntityData.md).[onDataChange](./EntityData.md#ondatachange)
___
### onWillChange
`Readonly` **onWillChange**: `Event`\<[`EntityData`](./EntityData.md)\<[`TransformSchema`](../interfaces/TransformSchema-1.md), {}\>\>
修改前触发
#### Inherited from
[EntityData](./EntityData.md).[onWillChange](./EntityData.md#onwillchange)
___
### opts
`Optional` `Readonly` **opts**: `Object`
#### Inherited from
[EntityData](./EntityData.md).[opts](./EntityData.md#opts)
___
### sizeToScale
**sizeToScale**: `boolean` = `false`
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
#### Inherited from
[EntityData](./EntityData.md).[toDispose](./EntityData.md#todispose)
___
### type
`Static` **type**: `string` = `'TransformData'`
#### Overrides
[EntityData](./EntityData.md).[type](./EntityData.md#type)
## Accessors
### bounds
`get` **bounds**(): `Rectangle`
#### Returns
`Rectangle`
___
### boundsWithoutRotation
`get` **boundsWithoutRotation**(): `Rectangle`
不旋转的 bounds
#### Returns
`Rectangle`
___
### changeLocked
`get` **changeLocked**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.changeLocked
`set` **changeLocked**(`p`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `p` | `boolean` |
#### Returns
`void`
#### Inherited from
EntityData.changeLocked
___
### children
`get` **children**(): [`TransformData`](./TransformData-1.md)[]
#### Returns
[`TransformData`](./TransformData-1.md)[]
___
### data
`get` **data**(): [`TransformSchema`](../interfaces/TransformSchema-1.md)
当前数据
#### Returns
[`TransformSchema`](../interfaces/TransformSchema-1.md)
#### Overrides
EntityData.data
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.disposed
___
### isContainer
`get` **isContainer**(): `boolean`
容器选择框会动态计算子节点大小
#### Returns
`boolean`
___
### localBounds
`get` **localBounds**(): `Rectangle`
本地 bounds
#### Returns
`Rectangle`
___
### localID
`get` **localID**(): `number`
#### Returns
`number`
___
### localOrigin
`get` **localOrigin**(): [`PositionSchema`](../interfaces/PositionSchema.md)
#### Returns
[`PositionSchema`](../interfaces/PositionSchema.md)
___
### localSize
`get` **localSize**(): [`SizeSchema`](../interfaces/SizeSchema-1.md)
本身的大小
#### Returns
[`SizeSchema`](../interfaces/SizeSchema-1.md)
___
### localTransform
`get` **localTransform**(): `Matrix`
#### Returns
`Matrix`
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
#### Returns
`Event`\<`void`\>
#### Inherited from
EntityData.onDispose
___
### origin
`get` **origin**(): [`OriginSchema`](../interfaces/OriginSchema.md)
#### Returns
[`OriginSchema`](../interfaces/OriginSchema.md)
#### Implementation of
[TransformSchema](../interfaces/TransformSchema-1.md).[origin](../interfaces/TransformSchema-1.md#origin)
`set` **origin**(`origin`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `origin` | [`OriginSchema`](../interfaces/OriginSchema.md) |
#### Returns
`void`
#### Implementation of
[TransformSchema](../interfaces/TransformSchema-1.md).[origin](../interfaces/TransformSchema-1.md#origin)
___
### parent
`get` **parent**(): `undefined` \| [`TransformData`](./TransformData-1.md)
#### Returns
`undefined` \| [`TransformData`](./TransformData-1.md)
___
### position
`get` **position**(): [`PositionSchema`](../interfaces/PositionSchema.md)
#### Returns
[`PositionSchema`](../interfaces/PositionSchema.md)
#### Implementation of
[TransformSchema](../interfaces/TransformSchema-1.md).[position](../interfaces/TransformSchema-1.md#position)
`set` **position**(`position`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `position` | [`PositionSchema`](../interfaces/PositionSchema.md) |
#### Returns
`void`
#### Implementation of
[TransformSchema](../interfaces/TransformSchema-1.md).[position](../interfaces/TransformSchema-1.md#position)
___
### rotation
`get` **rotation**(): `number`
#### Returns
`number`
#### Implementation of
[TransformSchema](../interfaces/TransformSchema-1.md).[rotation](../interfaces/TransformSchema-1.md#rotation)
`set` **rotation**(`rotation`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `rotation` | `number` |
#### Returns
`void`
#### Implementation of
[TransformSchema](../interfaces/TransformSchema-1.md).[rotation](../interfaces/TransformSchema-1.md#rotation)
___
### scale
`get` **scale**(): [`ScaleSchema`](../interfaces/ScaleSchema.md)
#### Returns
[`ScaleSchema`](../interfaces/ScaleSchema.md)
#### Implementation of
[TransformSchema](../interfaces/TransformSchema-1.md).[scale](../interfaces/TransformSchema-1.md#scale)
`set` **scale**(`scale`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `scale` | [`ScaleSchema`](../interfaces/ScaleSchema.md) |
#### Returns
`void`
#### Implementation of
[TransformSchema](../interfaces/TransformSchema-1.md).[scale](../interfaces/TransformSchema-1.md#scale)
___
### size
`get` **size**(): [`SizeSchema`](../interfaces/SizeSchema-1.md)
#### Returns
[`SizeSchema`](../interfaces/SizeSchema-1.md)
#### Implementation of
[TransformSchema](../interfaces/TransformSchema-1.md).[size](../interfaces/TransformSchema-1.md#size)
`set` **size**(`size`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `size` | [`SizeSchema`](../interfaces/SizeSchema-1.md) |
#### Returns
`void`
#### Implementation of
[TransformSchema](../interfaces/TransformSchema-1.md).[size](../interfaces/TransformSchema-1.md#size)
___
### skew
`get` **skew**(): [`SkewSchema`](../interfaces/SkewSchema.md)
#### Returns
[`SkewSchema`](../interfaces/SkewSchema.md)
#### Implementation of
[TransformSchema](../interfaces/TransformSchema-1.md).[skew](../interfaces/TransformSchema-1.md#skew)
`set` **skew**(`skew`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `skew` | [`SkewSchema`](../interfaces/SkewSchema.md) |
#### Returns
`void`
#### Implementation of
[TransformSchema](../interfaces/TransformSchema-1.md).[skew](../interfaces/TransformSchema-1.md#skew)
___
### type
`get` **type**(): `string`
data 类型
#### Returns
`string`
#### Inherited from
EntityData.type
___
### version
`get` **version**(): `number`
#### Returns
`number`
#### Inherited from
EntityData.version
___
### worldDegree
`get` **worldDegree**(): `number`
全局的角度
#### Returns
`number`
___
### worldID
`get` **worldID**(): `number`
#### Returns
`number`
___
### worldOrigin
`get` **worldOrigin**(): [`PositionSchema`](../interfaces/PositionSchema.md)
全局的原点位置
#### Returns
[`PositionSchema`](../interfaces/PositionSchema.md)
___
### worldRotation
`get` **worldRotation**(): `number`
全局的 rotation
#### Returns
`number`
___
### worldScale
`get` **worldScale**(): [`ScaleSchema`](../interfaces/ScaleSchema.md)
全局的 scale
#### Returns
[`ScaleSchema`](../interfaces/ScaleSchema.md)
___
### worldSize
`get` **worldSize**(): [`SizeSchema`](../interfaces/SizeSchema-1.md)
#### Returns
[`SizeSchema`](../interfaces/SizeSchema-1.md)
___
### worldTransform
`get` **worldTransform**(): `Matrix`
#### Returns
`Matrix`
## Methods
### checkChanged
**checkChanged**(`newProps`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `newProps` | [`TransformSchema`](../interfaces/TransformSchema-1.md) \| `Partial`\<[`TransformSchema`](../interfaces/TransformSchema-1.md)\> |
#### Returns
`boolean`
**`Deprecated`**
检测属性是否更改，默认采用浅比较
#### Inherited from
[EntityData](./EntityData.md).[checkChanged](./EntityData.md#checkchanged)
___
### clearChildren
**clearChildren**(): `void`
#### Returns
`void`
___
### contains
**contains**(`x`, `y`, `asCircle?`): `boolean`
判断是否包含点
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `x` | `number` | |
| `y` | `number` | |
| `asCircle?` | `boolean` | 以圆形来算，TODO 目前不支持椭圆形 |
#### Returns
`boolean`
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[dispose](./EntityData.md#dispose)
___
### fireChange
**fireChange**(): `void`
#### Returns
`void`
#### Overrides
[EntityData](./EntityData.md).[fireChange](./EntityData.md#firechange)
___
### fireWillChange
**fireWillChange**(): `void`
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fireWillChange](./EntityData.md#firewillchange)
___
### fromJSON
**fromJSON**(`data`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data` | `object` |
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fromJSON](./EntityData.md#fromjson)
___
### fullyUpdate
**fullyUpdate**(`props`): `void`
更新全量数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | [`TransformSchema`](../interfaces/TransformSchema-1.md) |
#### Returns
`void`
#### Inherited from
[EntityData](./EntityData.md).[fullyUpdate](./EntityData.md#fullyupdate)
___
### getDefaultData
**getDefaultData**(): [`TransformSchema`](../interfaces/TransformSchema-1.md)
初始化数据
#### Returns
[`TransformSchema`](../interfaces/TransformSchema-1.md)
#### Overrides
[EntityData](./EntityData.md).[getDefaultData](./EntityData.md#getdefaultdata)
___
### getMutationCache
**getMutationCache**\<`T`\>(`key`, `fn`): `T`
缓存计算, 缓存只能针对 local, world 加缓存会出问题
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `key` | `string` |
| `fn` | () => `T` |
#### Returns
`T`
___
### heightToScaleY
**heightToScaleY**(`height`, `isWorldSize?`): `number`
绝对高转换成 scale，用于图片等无法修改大小的场景
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `height` | `number` | - |
| `isWorldSize?` | `boolean` | 是否为绝对大小 |
#### Returns
`number`
___
### intersects
**intersects**(`rect`): `boolean`
判断矩形碰撞
#### Parameters
| Name | Type |
| :------ | :------ |
| `rect` | `Rectangle` |
#### Returns
`boolean`
___
### isParent
**isParent**(`parent`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `parent` | [`TransformData`](./TransformData-1.md) |
#### Returns
`boolean`
___
### isParentTransform
**isParentTransform**(`parent?`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `parent?` | [`TransformData`](./TransformData-1.md) |
#### Returns
`boolean`
___
### setFromMatrix
**setFromMatrix**(`matrix`): `void`
Decomposes a matrix and sets the transforms properties based on it.
matrix - The matrix to decompose
#### Parameters
| Name | Type |
| :------ | :------ |
| `matrix` | `Matrix` |
#### Returns
`void`
___
### setParent
**setParent**(`parent`, `listenParentData?`): `void`
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `parent` | `undefined` \| [`TransformData`](./TransformData-1.md) | `undefined` |
| `listenParentData` | `boolean` | `true` |
#### Returns
`void`
___
### sizeToScaleValue
**sizeToScaleValue**(`size`, `isWorldSize?`): `Object`
#### Parameters
| Name | Type |
| :------ | :------ |
| `size` | `Object` |
| `size.height` | `number` |
| `size.width` | `number` |
| `isWorldSize?` | `boolean` |
#### Returns
`Object`
| Name | Type |
| :------ | :------ |
| `x` | `number` |
| `y` | `number` |
___
### toJSON
**toJSON**(): `any`
存储数据，一般在关闭浏览器后需要暂时存到 localStorage
#### Returns
`any`
#### Inherited from
[EntityData](./EntityData.md).[toJSON](./EntityData.md#tojson)
___
### update
**update**(`data`): `void`
更新单个数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data` | `Partial`\<[`TransformSchema`](../interfaces/TransformSchema-1.md)\> |
#### Returns
`void`
#### Overrides
[EntityData](./EntityData.md).[update](./EntityData.md#update)
___
### widthToScaleX
**widthToScaleX**(`width`, `isWorldSize?`): `number`
宽转换成 scale，用于图片等无法修改大小的场景
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `width` | `number` | - |
| `isWorldSize?` | `boolean` | 是否为绝对大小 |
#### Returns
`number`
---
url: /auto-docs/core/enums/Command.Default.md
---
# Enumeration: Default
[Command](../modules/Command.md).Default
## Table of contents
### Enumeration Members
- [COPY](./Command.Default.md#copy)
- [DELETE](./Command.Default.md#delete)
- [PASTE](./Command.Default.md#paste)
- [REDO](./Command.Default.md#redo)
- [UNDO](./Command.Default.md#undo)
- [VIEW\_CLOSE\_ALL\_WIDGET](./Command.Default.md#view_close_all_widget)
- [VIEW\_CLOSE\_BOTTOM\_PANEL](./Command.Default.md#view_close_bottom_panel)
- [VIEW\_CLOSE\_CURRENT\_WIDGET](./Command.Default.md#view_close_current_widget)
- [VIEW\_CLOSE\_OTHER\_WIDGET](./Command.Default.md#view_close_other_widget)
- [VIEW\_FULL\_SCREEN](./Command.Default.md#view_full_screen)
- [VIEW\_LOG](./Command.Default.md#view_log)
- [VIEW\_OEPN\_LAST\_TAB](./Command.Default.md#view_oepn_last_tab)
- [VIEW\_OPEN\_NEXT\_TAB](./Command.Default.md#view_open_next_tab)
- [VIEW\_PREFERENCES](./Command.Default.md#view_preferences)
- [VIEW\_PROBLEMS](./Command.Default.md#view_problems)
- [VIEW\_REOPEN\_LAST\_WIDGET](./Command.Default.md#view_reopen_last_widget)
- [VIEW\_SAVING\_WIDGET\_CLOSE\_CONFIRM](./Command.Default.md#view_saving_widget_close_confirm)
- [VIEW\_SHORTCUTS](./Command.Default.md#view_shortcuts)
- [ZOOM\_IN](./Command.Default.md#zoom_in)
- [ZOOM\_OUT](./Command.Default.md#zoom_out)
## Enumeration Members
### COPY
**COPY** = ``"COPY"``
___
### DELETE
**DELETE** = ``"DELETE"``
___
### PASTE
**PASTE** = ``"PASTE"``
___
### REDO
**REDO** = ``"REDO"``
___
### UNDO
**UNDO** = ``"UNDO"``
___
### VIEW\_CLOSE\_ALL\_WIDGET
**VIEW\_CLOSE\_ALL\_WIDGET** = ``"view.closeAllWidget"``
___
### VIEW\_CLOSE\_BOTTOM\_PANEL
**VIEW\_CLOSE\_BOTTOM\_PANEL** = ``"view.closeBottomPannel"``
___
### VIEW\_CLOSE\_CURRENT\_WIDGET
**VIEW\_CLOSE\_CURRENT\_WIDGET** = ``"view.closeCurrentWidget"``
___
### VIEW\_CLOSE\_OTHER\_WIDGET
**VIEW\_CLOSE\_OTHER\_WIDGET** = ``"view.closeOtherWidget"``
___
### VIEW\_FULL\_SCREEN
**VIEW\_FULL\_SCREEN** = ``"view.fullScreen"``
___
### VIEW\_LOG
**VIEW\_LOG** = ``"view.log"``
___
### VIEW\_OEPN\_LAST\_TAB
**VIEW\_OEPN\_LAST\_TAB** = ``"view.openLastTab"``
___
### VIEW\_OPEN\_NEXT\_TAB
**VIEW\_OPEN\_NEXT\_TAB** = ``"view.openNextTab"``
___
### VIEW\_PREFERENCES
**VIEW\_PREFERENCES** = ``"view.preferences"``
___
### VIEW\_PROBLEMS
**VIEW\_PROBLEMS** = ``"view.problems"``
___
### VIEW\_REOPEN\_LAST\_WIDGET
**VIEW\_REOPEN\_LAST\_WIDGET** = ``"view.reopenLastWidget"``
___
### VIEW\_SAVING\_WIDGET\_CLOSE\_CONFIRM
**VIEW\_SAVING\_WIDGET\_CLOSE\_CONFIRM** = ``"view.savingWidgetCloseConfirm"``
___
### VIEW\_SHORTCUTS
**VIEW\_SHORTCUTS** = ``"view.shortcuts"``
___
### ZOOM\_IN
**ZOOM\_IN** = ``"ZOOM_IN"``
___
### ZOOM\_OUT
**ZOOM\_OUT** = ``"ZOOM_OUT"``
---
url: /auto-docs/core/enums/LoggerEvent.md
---
# Enumeration: LoggerEvent
## Table of contents
### Enumeration Members
- [CANVAS\_FPS](./LoggerEvent.md#canvas_fps)
- [CANVAS\_TTI](./LoggerEvent.md#canvas_tti)
## Enumeration Members
### CANVAS\_FPS
**CANVAS\_FPS** = ``1``
___
### CANVAS\_TTI
**CANVAS\_TTI** = ``0``
---
url: /auto-docs/core/enums/PipelineLayerPriority.md
---
# Enumeration: PipelineLayerPriority
## Table of contents
### Enumeration Members
- [BASE\_LAYER](./PipelineLayerPriority.md#base_layer)
- [NORMAL\_LAYER](./PipelineLayerPriority.md#normal_layer)
- [TOOL\_LAYER](./PipelineLayerPriority.md#tool_layer)
## Enumeration Members
### BASE\_LAYER
**BASE\_LAYER** = ``-2``
___
### NORMAL\_LAYER
**NORMAL\_LAYER** = ``0``
___
### TOOL\_LAYER
**TOOL\_LAYER** = ``-1``
---
url: /auto-docs/core/enums/PipelineMessage.md
---
# Enumeration: PipelineMessage
## Table of contents
### Enumeration Members
- [SCROLL](./PipelineMessage.md#scroll)
- [ZOOM](./PipelineMessage.md#zoom)
## Enumeration Members
### SCROLL
**SCROLL** = ``"PIPELINE_SCROLL"``
___
### ZOOM
**ZOOM** = ``"PIPELINE_ZOOM"``
---
url: /auto-docs/core/functions/Bounds.applyMatrix.md
---
# Function: applyMatrix
[Bounds](../modules/Bounds.md).applyMatrix
**applyMatrix**(`bounds`, `matrix`): `Rectangle`
#### Parameters
| Name | Type |
| :------ | :------ |
| `bounds` | `Rectangle` |
| `matrix` | `Matrix` |
#### Returns
`Rectangle`
---
url: /auto-docs/core/functions/Bounds.getBottomCenter.md
---
# Function: getBottomCenter
[Bounds](../modules/Bounds.md).getBottomCenter
**getBottomCenter**(`target`, `matrix?`): [`PositionSchema`](../interfaces/PositionSchema.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `target` | `TransformOriginAndSize` |
| `matrix?` | `Matrix` |
#### Returns
[`PositionSchema`](../interfaces/PositionSchema.md)
---
url: /auto-docs/core/functions/Bounds.getBottomLeft.md
---
# Function: getBottomLeft
[Bounds](../modules/Bounds.md).getBottomLeft
**getBottomLeft**(`target`, `matrix?`): [`PositionSchema`](../interfaces/PositionSchema.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `target` | `TransformOriginAndSize` |
| `matrix?` | `Matrix` |
#### Returns
[`PositionSchema`](../interfaces/PositionSchema.md)
---
url: /auto-docs/core/functions/Bounds.getBottomRight.md
---
# Function: getBottomRight
[Bounds](../modules/Bounds.md).getBottomRight
**getBottomRight**(`target`, `matrix?`): [`PositionSchema`](../interfaces/PositionSchema.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `target` | `TransformOriginAndSize` |
| `matrix?` | `Matrix` |
#### Returns
[`PositionSchema`](../interfaces/PositionSchema.md)
---
url: /auto-docs/core/functions/Bounds.getBounds.md
---
# Function: getBounds
[Bounds](../modules/Bounds.md).getBounds
**getBounds**(`target`, `matrix?`): `Rectangle`
获取外围边界矩形
#### Parameters
| Name | Type |
| :------ | :------ |
| `target` | `TransformOriginAndSize` |
| `matrix?` | `Matrix` |
#### Returns
`Rectangle`
---
url: /auto-docs/core/functions/Bounds.getCenter.md
---
# Function: getCenter
[Bounds](../modules/Bounds.md).getCenter
**getCenter**(`target`, `matrix?`): [`PositionSchema`](../interfaces/PositionSchema.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `target` | [`TransformSchema`](../interfaces/TransformSchema-1.md) |
| `matrix?` | `Matrix` |
#### Returns
[`PositionSchema`](../interfaces/PositionSchema.md)
---
url: /auto-docs/core/functions/Bounds.getLeftCenter.md
---
# Function: getLeftCenter
[Bounds](../modules/Bounds.md).getLeftCenter
**getLeftCenter**(`target`, `matrix?`): [`PositionSchema`](../interfaces/PositionSchema.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `target` | `TransformOriginAndSize` |
| `matrix?` | `Matrix` |
#### Returns
[`PositionSchema`](../interfaces/PositionSchema.md)
---
url: /auto-docs/core/functions/Bounds.getLeftPointFromBounds.md
---
# Function: getLeftPointFromBounds
[Bounds](../modules/Bounds.md).getLeftPointFromBounds
**getLeftPointFromBounds**(`target`, `matrix?`): [`PositionSchema`](../interfaces/PositionSchema.md)
找到边框中最左边的点
#### Parameters
| Name | Type |
| :------ | :------ |
| `target` | `TransformOriginAndSize` |
| `matrix?` | `Matrix` |
#### Returns
[`PositionSchema`](../interfaces/PositionSchema.md)
---
url: /auto-docs/core/functions/Bounds.getPointWithMatrix.md
---
# Function: getPointWithMatrix
[Bounds](../modules/Bounds.md).getPointWithMatrix
**getPointWithMatrix**(`output`, `matrix?`): [`PositionSchema`](../interfaces/PositionSchema.md)
位置做矩阵偏移
#### Parameters
| Name | Type |
| :------ | :------ |
| `output` | [`PositionSchema`](../interfaces/PositionSchema.md) |
| `matrix?` | `Matrix` |
#### Returns
[`PositionSchema`](../interfaces/PositionSchema.md)
---
url: /auto-docs/core/functions/Bounds.getRightCenter.md
---
# Function: getRightCenter
[Bounds](../modules/Bounds.md).getRightCenter
**getRightCenter**(`target`, `matrix?`): [`PositionSchema`](../interfaces/PositionSchema.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `target` | `TransformOriginAndSize` |
| `matrix?` | `Matrix` |
#### Returns
[`PositionSchema`](../interfaces/PositionSchema.md)
---
url: /auto-docs/core/functions/Bounds.getTopCenter.md
---
# Function: getTopCenter
[Bounds](../modules/Bounds.md).getTopCenter
**getTopCenter**(`target`, `matrix?`): [`PositionSchema`](../interfaces/PositionSchema.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `target` | `TransformOriginAndSize` |
| `matrix?` | `Matrix` |
#### Returns
[`PositionSchema`](../interfaces/PositionSchema.md)
---
url: /auto-docs/core/functions/Bounds.getTopLeft.md
---
# Function: getTopLeft
[Bounds](../modules/Bounds.md).getTopLeft
**getTopLeft**(`target`, `matrix?`): [`PositionSchema`](../interfaces/PositionSchema.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `target` | `TransformOriginAndSize` |
| `matrix?` | `Matrix` |
#### Returns
[`PositionSchema`](../interfaces/PositionSchema.md)
---
url: /auto-docs/core/functions/Bounds.getTopPointFromBounds.md
---
# Function: getTopPointFromBounds
[Bounds](../modules/Bounds.md).getTopPointFromBounds
**getTopPointFromBounds**(`target`, `matrix?`): [`PositionSchema`](../interfaces/PositionSchema.md)
找到边框中最上边的点
#### Parameters
| Name | Type |
| :------ | :------ |
| `target` | `TransformOriginAndSize` |
| `matrix?` | `Matrix` |
#### Returns
[`PositionSchema`](../interfaces/PositionSchema.md)
---
url: /auto-docs/core/functions/Bounds.getTopRight.md
---
# Function: getTopRight
[Bounds](../modules/Bounds.md).getTopRight
**getTopRight**(`target`, `matrix?`): [`PositionSchema`](../interfaces/PositionSchema.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `target` | `TransformOriginAndSize` |
| `matrix?` | `Matrix` |
#### Returns
[`PositionSchema`](../interfaces/PositionSchema.md)
---
url: /auto-docs/core/functions/Command.is.md
---
# Function: is
[Command](../modules/Command.md).is
**is**(`arg`): arg is Command
判断是否是 command
#### Parameters
| Name | Type |
| :------ | :------ |
| `arg` | `any` |
#### Returns
arg is Command
---
url: /auto-docs/core/functions/Entity.checkDataChanged.md
---
# Function: checkDataChanged
[Entity](../modules/Entity.md).checkDataChanged
**checkDataChanged**(`oldProps`, `newProps`): `boolean`
默认数据比较，采用浅比较
#### Parameters
| Name | Type |
| :------ | :------ |
| `oldProps` | `any` |
| `newProps` | `any` |
#### Returns
`boolean`
---
url: /auto-docs/core/functions/Entity.getType.md
---
# Function: getType
[Entity](../modules/Entity.md).getType
**getType**(`registry`): `string`
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
#### Returns
`string`
---
url: /auto-docs/core/functions/Entity.isRegistryOf.md
---
# Function: isRegistryOf
[Entity](../modules/Entity.md).isRegistryOf
**isRegistryOf**(`target`, `Registry`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `target` | `any` |
| `Registry` | `any` |
#### Returns
`boolean`
---
url: /auto-docs/core/functions/MOUSE_SCROLL_DELTA.md
---
# Function: MOUSE\_SCROLL\_DELTA
**MOUSE_SCROLL_DELTA**(`zoom`): `number`
鼠标缩放 delta
#### Parameters
| Name | Type |
| :------ | :------ |
| `zoom` | `number` |
#### Returns
`number`
---
url: /auto-docs/core/functions/MouseTouchEvent.getEventCoord.md
---
# Function: getEventCoord
[MouseTouchEvent](../modules/MouseTouchEvent.md).getEventCoord
**getEventCoord**(`e`): `Object`
#### Parameters
| Name | Type |
| :------ | :------ |
| `e` | `MouseEvent` \| `TouchEvent` \| \{ `clientX`: `number` ; `clientY`: `number` } |
#### Returns
`Object`
| Name | Type |
| :------ | :------ |
| `clientX` | `number` |
| `clientY` | `number` |
---
url: /auto-docs/core/functions/MouseTouchEvent.isTouchEvent.md
---
# Function: isTouchEvent
[MouseTouchEvent](../modules/MouseTouchEvent.md).isTouchEvent
**isTouchEvent**(`event`): event is TouchEvent
#### Parameters
| Name | Type |
| :------ | :------ |
| `event` | `TouchEvent` \| `TouchEvent`\<`Element`\> |
#### Returns
event is TouchEvent
---
url: /auto-docs/core/functions/MouseTouchEvent.onTouched.md
---
# Function: onTouched
[MouseTouchEvent](../modules/MouseTouchEvent.md).onTouched
**onTouched**(`touchStartEvent`, `callback`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `touchStartEvent` | `TouchEvent`\<`Element`\> |
| `callback` | (`e`: `MouseEvent`) => `void` |
#### Returns
`void`
---
url: /auto-docs/core/functions/MouseTouchEvent.preventDefault.md
---
# Function: preventDefault
[MouseTouchEvent](../modules/MouseTouchEvent.md).preventDefault
**preventDefault**(`e`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `e` | `MouseEvent` \| `Event` \| `TouchEvent` \| `MouseEvent`\<`Element`, `MouseEvent`\> \| `TouchEvent`\<`Element`\> |
#### Returns
`void`
---
url: /auto-docs/core/functions/MouseTouchEvent.touchToMouseEvent.md
---
# Function: touchToMouseEvent
[MouseTouchEvent](../modules/MouseTouchEvent.md).touchToMouseEvent
**touchToMouseEvent**(`event`): `MouseEvent` \| `Event`
#### Parameters
| Name | Type |
| :------ | :------ |
| `event` | `Event` |
#### Returns
`MouseEvent` \| `Event`
---
url: /auto-docs/core/functions/PlaygroundDrag.startDrag.md
---
# Function: startDrag
[PlaygroundDrag](../modules/PlaygroundDrag.md).startDrag
**startDrag**\<`T`\>(`clientX`, `clientY`, `opts?`): `Disposable`
拖拽实体
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `clientX` | `number` |
| `clientY` | `number` |
| `opts` | [`PlaygroundDragEntitiesOpts`](../interfaces/PlaygroundDragEntitiesOpts.md)\<`T`\> |
#### Returns
`Disposable`
---
url: /auto-docs/core/functions/PlaygroundMockTools.createContainer.md
---
# Function: createContainer
[PlaygroundMockTools](../modules/PlaygroundMockTools.md).createContainer
**createContainer**(`modules?`): `interfaces.Container`
#### Parameters
| Name | Type |
| :------ | :------ |
| `modules?` | `ContainerModule`[] |
#### Returns
`interfaces.Container`
---
url: /auto-docs/core/functions/PlaygroundMockTools.createLayerTestState.md
---
# Function: createLayerTestState
[PlaygroundMockTools](../modules/PlaygroundMockTools.md).createLayerTestState
**createLayerTestState**\<`T`\>(`layerRegistry`, `opts?`, `modules?`): [`LayerTestState`](../classes/PlaygroundMockTools.LayerTestState.md)\<`T`\>
创建layer, 并记录layer的回调数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`Layer`](../classes/Layer.md)\<`any`, `any`, `T`\> = [`Layer`](../classes/Layer.md)\<`any`, `any`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `layerRegistry` | [`LayerRegistry`](../interfaces/LayerRegistry.md)\<`T`\> |
| `opts?` | `any` |
| `modules?` | `ContainerModule`[] |
#### Returns
[`LayerTestState`](../classes/PlaygroundMockTools.LayerTestState.md)\<`T`\>
---
url: /auto-docs/core/functions/PlaygroundMockTools.createPlayground.md
---
# Function: createPlayground
[PlaygroundMockTools](../modules/PlaygroundMockTools.md).createPlayground
**createPlayground**(`modules?`): [`Playground`](../classes/Playground.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `modules?` | `ContainerModule`[] |
#### Returns
[`Playground`](../classes/Playground.md)
---
url: /auto-docs/core/functions/PlaygroundMockTools.getLayerTestState.md
---
# Function: getLayerTestState
[PlaygroundMockTools](../modules/PlaygroundMockTools.md).getLayerTestState
**getLayerTestState**\<`T`\>(`container`, `layerRegistry`): [`LayerTestState`](../classes/PlaygroundMockTools.LayerTestState.md)\<`T`\>
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`Layer`](../classes/Layer.md)\<`any`, `any`, `T`\> = [`Layer`](../classes/Layer.md)\<`any`, `any`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `container` | `Container` |
| `layerRegistry` | [`LayerRegistry`](../interfaces/LayerRegistry.md)\<`T`\> |
#### Returns
[`LayerTestState`](../classes/PlaygroundMockTools.LayerTestState.md)\<`T`\>
---
url: /auto-docs/core/functions/PlaygroundReactProvider.md
---
# Function: PlaygroundReactProvider
**PlaygroundReactProvider**(`props`): ``null`` \| `ReactElement`\<`any`, `string` \| `JSXElementConstructor`\<`any`\>\>
Playground react 组件
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | [`PlaygroundReactProviderProps`](../interfaces/PlaygroundReactProviderProps.md) & `RefAttributes`\<`any`\> |
#### Returns
``null`` \| `ReactElement`\<`any`, `string` \| `JSXElementConstructor`\<`any`\>\>
---
url: /auto-docs/core/functions/PlaygroundReactRenderer.md
---
# Function: PlaygroundReactRenderer
**PlaygroundReactRenderer**(`props`, `deprecatedLegacyContext?`): ``null`` \| `ReactElement`\<`any`, `any`\>
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `props` | [`PlaygroundReactRendererProps`](../interfaces/PlaygroundReactRendererProps.md) | - |
| `deprecatedLegacyContext?` | `any` | **`Deprecated`** **`See`** [React Docs](https://legacy.reactjs.org/docs/legacy-context.html#referencing-context-in-lifecycle-methods) |
#### Returns
``null`` \| `ReactElement`\<`any`, `any`\>
---
url: /auto-docs/core/functions/SizeSchema.coverSize.md
---
# Function: coverSize
[SizeSchema](../modules/SizeSchema.md).coverSize
**coverSize**(`currentSize`, `parentSize`): `number`
填充父节点的宽高
#### Parameters
| Name | Type |
| :------ | :------ |
| `currentSize` | [`SizeSchema`](../interfaces/SizeSchema-1.md) |
| `parentSize` | [`SizeSchema`](../interfaces/SizeSchema-1.md) |
#### Returns
`number`
返回放大的比例
---
url: /auto-docs/core/functions/SizeSchema.empty.md
---
# Function: empty
[SizeSchema](../modules/SizeSchema.md).empty
**empty**(): [`SizeSchema`](../interfaces/SizeSchema-1.md)
#### Returns
[`SizeSchema`](../interfaces/SizeSchema-1.md)
---
url: /auto-docs/core/functions/SizeSchema.fixSize.md
---
# Function: fixSize
[SizeSchema](../modules/SizeSchema.md).fixSize
**fixSize**(`currentSize`, `parentSize`): `number`
适配父节点宽高
#### Parameters
| Name | Type |
| :------ | :------ |
| `currentSize` | [`SizeSchema`](../interfaces/SizeSchema-1.md) |
| `parentSize` | [`SizeSchema`](../interfaces/SizeSchema-1.md) |
#### Returns
`number`
返回需要缩放的比例，为 1 则不缩放
---
url: /auto-docs/core/functions/TransformData.isParentOrChildrenTransform.md
---
# Function: isParentOrChildrenTransform
[TransformData](../modules/TransformData.md).isParentOrChildrenTransform
**isParentOrChildrenTransform**(`dragableEntities`, `target`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `dragableEntities` | [`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>[] |
| `target` | [`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\> |
#### Returns
`boolean`
---
url: /auto-docs/core/functions/TransformSchema.createDefault.md
---
# Function: createDefault
[TransformSchema](../modules/TransformSchema.md).createDefault
**createDefault**(): [`TransformSchema`](../interfaces/TransformSchema-1.md)
#### Returns
[`TransformSchema`](../interfaces/TransformSchema-1.md)
---
url: /auto-docs/core/functions/TransformSchema.getDelta.md
---
# Function: getDelta
[TransformSchema](../modules/TransformSchema.md).getDelta
**getDelta**(`oldTransform`, `newTransform`): [`TransformSchema`](../interfaces/TransformSchema-1.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `oldTransform` | [`TransformSchema`](../interfaces/TransformSchema-1.md) |
| `newTransform` | [`TransformSchema`](../interfaces/TransformSchema-1.md) |
#### Returns
[`TransformSchema`](../interfaces/TransformSchema-1.md)
---
url: /auto-docs/core/functions/TransformSchema.is.md
---
# Function: is
[TransformSchema](../modules/TransformSchema.md).is
**is**(`obj`): obj is TransformSchema
#### Parameters
| Name | Type |
| :------ | :------ |
| `obj` | `object` |
#### Returns
obj is TransformSchema
---
url: /auto-docs/core/functions/TransformSchema.mergeDelta.md
---
# Function: mergeDelta
[TransformSchema](../modules/TransformSchema.md).mergeDelta
**mergeDelta**(`oldTransform`, `newTransformDelta`, `toFixedNum?`): [`TransformSchema`](../interfaces/TransformSchema-1.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `oldTransform` | [`TransformSchema`](../interfaces/TransformSchema-1.md) |
| `newTransformDelta` | [`TransformSchema`](../interfaces/TransformSchema-1.md) |
| `toFixedNum?` | `number` |
#### Returns
[`TransformSchema`](../interfaces/TransformSchema-1.md)
---
url: /auto-docs/core/functions/TransformSchema.toJSON.md
---
# Function: toJSON
[TransformSchema](../modules/TransformSchema.md).toJSON
**toJSON**(`obj`): [`TransformSchema`](../interfaces/TransformSchema-1.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `obj` | [`TransformSchema`](../interfaces/TransformSchema-1.md) |
#### Returns
[`TransformSchema`](../interfaces/TransformSchema-1.md)
---
url: /auto-docs/core/functions/bindConfigEntity.md
---
# Function: bindConfigEntity
**bindConfigEntity**(`bind`, `entityRegistry`): `void`
让 entity 可以注入到类中
#### Parameters
| Name | Type |
| :------ | :------ |
| `bind` | `Bind` |
| `entityRegistry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
#### Returns
`void`
**`Example`**
```
class SomeClass {
@inject(PlaygroundConfigEntity) playgroundConfig: PlaygroundConfigEntity
}
```
---
url: /auto-docs/core/functions/bindContributionProvider.md
---
# Function: bindContributionProvider
**bindContributionProvider**(`bind`, `id`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `bind` | `Bind` |
| `id` | `symbol` |
#### Returns
`void`
---
url: /auto-docs/core/functions/bindContributions.md
---
# Function: bindContributions
**bindContributions**(`bind`, `target`, `contribs`): `void`
Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
SPDX-License-Identifier: MIT
#### Parameters
| Name | Type |
| :------ | :------ |
| `bind` | `Bind` |
| `target` | `any` |
| `contribs` | `any`[] |
#### Returns
`void`
---
url: /auto-docs/core/functions/bindPlaygroundContextProvider.md
---
# Function: bindPlaygroundContextProvider
**bindPlaygroundContextProvider**(`bind`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `bind` | `Bind` |
#### Returns
`void`
---
url: /auto-docs/core/functions/createConfigDataRegistry.md
---
# Function: createConfigDataRegistry
**createConfigDataRegistry**\<`P`\>(`entity`): [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)
#### Type parameters
| Name |
| :------ |
| `P` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `entity` | [`ConfigEntity`](../classes/ConfigEntity.md)\<`any`, [`EntityOpts`](../interfaces/EntityOpts.md)\> |
#### Returns
[`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)
---
url: /auto-docs/core/functions/createDefaultPlaygroundConfig.md
---
# Function: createDefaultPlaygroundConfig
**createDefaultPlaygroundConfig**(): [`PlaygroundConfig`](../variables/PlaygroundConfig-1.md)
默认配置
#### Returns
[`PlaygroundConfig`](../variables/PlaygroundConfig-1.md)
---
url: /auto-docs/core/functions/createPlaygroundContainer.md
---
# Function: createPlaygroundContainer
**createPlaygroundContainer**(`config?`, `parent?`, `container?`): `interfaces.Container`
#### Parameters
| Name | Type |
| :------ | :------ |
| `config?` | [`PlaygroundConfig`](../variables/PlaygroundConfig-1.md) |
| `parent?` | `Container` |
| `container?` | `Container` |
#### Returns
`interfaces.Container`
---
url: /auto-docs/core/functions/createPlaygroundLayerDefault.md
---
# Function: createPlaygroundLayerDefault
**createPlaygroundLayerDefault**(`container`, `layerRegistry`, `options?`): [`Layer`](../classes/Layer.md)\<`any`, `any`\>
#### Parameters
| Name | Type |
| :------ | :------ |
| `container` | `Container` |
| `layerRegistry` | [`LayerRegistry`](../interfaces/LayerRegistry.md)\<[`Layer`](../classes/Layer.md)\<`any`, `any`\>\> |
| `options` | `any` |
#### Returns
[`Layer`](../classes/Layer.md)\<`any`, `any`\>
---
url: /auto-docs/core/functions/createPlaygroundPlugin.md
---
# Function: createPlaygroundPlugin
**createPlaygroundPlugin**\<`CTX`\>(`options`): [`Plugin`](../variables/Plugin-1.md)\<`undefined`\>
#### Type parameters
| Name | Type |
| :------ | :------ |
| `CTX` | extends [`PluginContext`](../variables/PluginContext-1.md) = [`PluginContext`](../variables/PluginContext-1.md) |
#### Parameters
| Name | Type |
| :------ | :------ |
| `options` | [`PluginConfig`](../interfaces/PluginConfig.md)\<`undefined`, `CTX`\> |
#### Returns
[`Plugin`](../variables/Plugin-1.md)\<`undefined`\>
**`Example`**
```ts
createPlaygroundPlugin({
// IOC 注册
onBind(bind) {
bind('xxx').toSelf().inSingletonScope()
},
// 画布初始化
onInit(ctx) {
ctx.playground.registerLayer(MyLayer)
},
// 画布销毁
onDispose(ctx) {
},
// IOC 模块
containerModules: [new ContainerModule(() => {})]
})
```
---
url: /auto-docs/core/functions/createPluginContextDefault.md
---
# Function: createPluginContextDefault
**createPluginContextDefault**(`container`): [`PluginContext`](../variables/PluginContext-1.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `container` | `Container` |
#### Returns
[`PluginContext`](../variables/PluginContext-1.md)
---
url: /auto-docs/core/functions/createRegistryDecorator.md
---
# Function: createRegistryDecorator
**createRegistryDecorator**(`key`, `data`, `getValue?`, `init?`): `any`
#### Parameters
| Name | Type |
| :------ | :------ |
| `key` | `symbol` |
| `data` | `any` |
| `getValue?` | [`RegistryValueGetter`](../interfaces/RegistryValueGetter.md)\<`any`\> |
| `init?` | [`RegistryInit`](../interfaces/RegistryInit.md) |
#### Returns
`any`
---
url: /auto-docs/core/functions/definePluginCreator.md
---
# Function: definePluginCreator
**definePluginCreator**\<`Options`, `CTX`\>(`config`): [`PluginCreator`](../types/PluginCreator.md)\<`Options`\>
#### Type parameters
| Name | Type |
| :------ | :------ |
| `Options` | `Options` |
| `CTX` | extends [`PluginContext`](../variables/PluginContext-1.md) = [`PluginContext`](../variables/PluginContext-1.md) |
#### Parameters
| Name | Type |
| :------ | :------ |
| `config` | \{ `containerModules?`: `ContainerModule`[] ; `contributionKeys?`: `ServiceIdentifier`\<`unknown`\>[] ; `singleton?`: `boolean` } & [`PluginConfig`](../interfaces/PluginConfig.md)\<`Options`, `CTX`\> |
#### Returns
[`PluginCreator`](../types/PluginCreator.md)\<`Options`\>
---
url: /auto-docs/core/functions/getEntityDatasMetadata.md
---
# Function: getEntityDatasMetadata
**getEntityDatasMetadata**(`layer`): \{ `data`: [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md) ; `entity`: [`EntityRegistry`](../interfaces/EntityRegistry.md) }[]
#### Parameters
| Name | Type |
| :------ | :------ |
| `layer` | `any` |
#### Returns
\{ `data`: [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md) ; `entity`: [`EntityRegistry`](../interfaces/EntityRegistry.md) }[]
---
url: /auto-docs/core/functions/getEntityMetadata.md
---
# Function: getEntityMetadata
**getEntityMetadata**(`layer`): [`EntityRegistry`](../interfaces/EntityRegistry.md)[]
#### Parameters
| Name | Type |
| :------ | :------ |
| `layer` | `any` |
#### Returns
[`EntityRegistry`](../interfaces/EntityRegistry.md)[]
---
url: /auto-docs/core/functions/getRegistryMetadata.md
---
# Function: getRegistryMetadata
**getRegistryMetadata**(`target`, `key`): `any`[]
#### Parameters
| Name | Type |
| :------ | :------ |
| `target` | `any` |
| `key` | `symbol` |
#### Returns
`any`[]
---
url: /auto-docs/core/functions/injectByProvider.md
---
# Function: injectByProvider
**injectByProvider**(`provider`): (`target`: `any`, `propertyKey`: `string`) => `any`
#### Parameters
| Name | Type |
| :------ | :------ |
| `provider` | `ServiceIdentifier`\<`unknown`\> |
#### Returns
`fn`
(`target`, `propertyKey`): `any`
##### Parameters
| Name | Type |
| :------ | :------ |
| `target` | `any` |
| `propertyKey` | `string` |
##### Returns
`any`
---
url: /auto-docs/core/functions/injectPlaygroundContext.md
---
# Function: injectPlaygroundContext
**injectPlaygroundContext**(): (`target`: `any`, `propertyKey`: `string`) => `any`
#### Returns
`fn`
(`target`, `propertyKey`): `any`
##### Parameters
| Name | Type |
| :------ | :------ |
| `target` | `any` |
| `propertyKey` | `string` |
##### Returns
`any`
---
url: /auto-docs/core/functions/lazyInject.md
---
# Function: lazyInject
**lazyInject**(`serviceIdentifier`): (`target`: `any`, `propertyKey`: `string`) => `any`
#### Parameters
| Name | Type |
| :------ | :------ |
| `serviceIdentifier` | `ServiceIdentifier`\<`unknown`\> |
#### Returns
`fn`
(`target`, `propertyKey`): `any`
##### Parameters
| Name | Type |
| :------ | :------ |
| `target` | `any` |
| `propertyKey` | `string` |
##### Returns
`any`
---
url: /auto-docs/core/functions/loadPlugins.md
---
# Function: loadPlugins
**loadPlugins**(`plugins`, `container`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `plugins` | [`Plugin`](../variables/Plugin-1.md)\<`any`\>[] |
| `container` | `Container` |
#### Returns
`void`
---
url: /auto-docs/core/functions/observeEntities.md
---
# Function: observeEntities
**observeEntities**(`registry`): `any`
监听 entity 变化
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
#### Returns
`any`
---
url: /auto-docs/core/functions/observeEntity.md
---
# Function: observeEntity
**observeEntity**(`registry`): `any`
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
#### Returns
`any`
---
url: /auto-docs/core/functions/observeEntityDatas.md
---
# Function: observeEntityDatas
**observeEntityDatas**(`entityRegistry`, `dataRegistry`): `any`
监听 entity 对应的 data 数据变化
#### Parameters
| Name | Type |
| :------ | :------ |
| `entityRegistry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
| `dataRegistry` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<[`EntityData`](../classes/EntityData.md)\<`any`, {}\>\> |
#### Returns
`any`
---
url: /auto-docs/core/functions/removeInjectedProperties.md
---
# Function: removeInjectedProperties
**removeInjectedProperties**(`instance`): `void`
在 rspack 场景编译ts文件时候
decorator 注入的 property 会被当成 this 的属性, 导致 Reflect.metadata 失效
#### Parameters
| Name | Type |
| :------ | :------ |
| `instance` | `any` |
#### Returns
`void`
---
url: /auto-docs/core/functions/scrollIntoViewWithTween.md
---
# Function: scrollIntoViewWithTween
**scrollIntoViewWithTween**(`opts`): `Disposable`
滚动到可视区域
#### Parameters
| Name | Type |
| :------ | :------ |
| `opts` | [`ScrollIntoViewOpts`](../interfaces/ScrollIntoViewOpts.md) |
#### Returns
`Disposable`
---
url: /auto-docs/core/functions/startTween.md
---
# Function: startTween
**startTween**\<`V`\>(`opts`): `Disposable`
#### Type parameters
| Name | Type |
| :------ | :------ |
| `V` | extends `TweenValues` = `TweenValues` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `opts` | [`TweenOpts`](../interfaces/TweenOpts.md)\<`V`\> |
#### Returns
`Disposable`
---
url: /auto-docs/core/functions/useConfigEntity.md
---
# Function: useConfigEntity
**useConfigEntity**\<`T`\>(`entityRegistry`, `listenChange?`): `T`
获取 config entity
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`ConfigEntity`](../classes/ConfigEntity.md)\<[`ConfigEntityProps`](../interfaces/ConfigEntityProps.md), [`EntityOpts`](../interfaces/EntityOpts.md), `T`\> |
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `entityRegistry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<`T`\> | `undefined` |
| `listenChange` | `boolean` | `false` |
#### Returns
`T`
---
url: /auto-docs/core/functions/useEntities.md
---
# Function: useEntities
**useEntities**\<`T`\>(`entityRegistry`): `T`[]
获取 entities 并监听变化
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md), `T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `entityRegistry` | [`EntityRegistry`](../interfaces/EntityRegistry.md)\<[`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md)\>\> |
#### Returns
`T`[]
**`Deprecated`**
---
url: /auto-docs/core/functions/useEntityDataFromContext.md
---
# Function: useEntityDataFromContext
**useEntityDataFromContext**\<`T`\>(`dataRegistry`, `listenChange?`): `T`
从上下 PlaygroundEntityContext 获取 entity data 并监听变化 (默认不监听)
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`EntityData`](../classes/EntityData.md)\<`any`, {}, `T`\> |
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `dataRegistry` | [`EntityDataRegistry`](../interfaces/EntityDataRegistry.md)\<`any`\> | `undefined` |
| `listenChange` | `boolean` | `false` |
#### Returns
`T`
---
url: /auto-docs/core/functions/useEntityFromContext.md
---
# Function: useEntityFromContext
**useEntityFromContext**\<`T`\>(`listenChange?`): `T`
从上下 PlaygroundEntityContext 获取 entity 并监听变化(默认不监听)
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](../interfaces/EntityOpts.md), `T`\> |
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `listenChange` | `boolean` | `false` |
#### Returns
`T`
---
url: /auto-docs/core/functions/useListenEvents.md
---
# Function: useListenEvents
**useListenEvents**(`...events`): `void`
监听 event 事件变化
#### Parameters
| Name | Type |
| :------ | :------ |
| `...events` | `Event`\<`any`\>[] |
#### Returns
`void`
---
url: /auto-docs/core/functions/usePlayground.md
---
# Function: usePlayground
**usePlayground**(): [`Playground`](../classes/Playground.md)
获取 playground
#### Returns
[`Playground`](../classes/Playground.md)
---
url: /auto-docs/core/functions/usePlaygroundContainer.md
---
# Function: usePlaygroundContainer
**usePlaygroundContainer**(): `interfaces.Container`
获取 playground inversify container
#### Returns
`interfaces.Container`
---
url: /auto-docs/core/functions/usePlaygroundContext.md
---
# Function: usePlaygroundContext
**usePlaygroundContext**\<`T`\>(): `T`
获取 playground context 数据
#### Type parameters
| Name |
| :------ |
| `T` |
#### Returns
`T`
---
url: /auto-docs/core/functions/usePlaygroundDrag.md
---
# Function: usePlaygroundDrag
**usePlaygroundDrag**(): `UsePlaygroundDragReturn`
#### Returns
`UsePlaygroundDragReturn`
---
url: /auto-docs/core/functions/useRefresh.md
---
# Function: useRefresh
**useRefresh**(`defaultValue?`): (`v?`: `any`) => `void`
Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
SPDX-License-Identifier: MIT
#### Parameters
| Name | Type |
| :------ | :------ |
| `defaultValue?` | `any` |
#### Returns
`fn`
(`v?`): `void`
##### Parameters
| Name | Type |
| :------ | :------ |
| `v?` | `any` |
##### Returns
`void`
---
url: /auto-docs/core/functions/useService.md
---
# Function: useService
**useService**\<`T`\>(`identifier`): `T`
获取画布的 IOC 模块
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `identifier` | `ServiceIdentifier`\<`T`\> |
#### Returns
`T`
---
url: /auto-docs/core/interfaces/ClipboardService.md
---
# Interface: ClipboardService
## Table of contents
### Properties
- [onClipboardChanged](./ClipboardService.md#onclipboardchanged)
### Methods
- [readText](./ClipboardService.md#readtext)
- [writeText](./ClipboardService.md#writetext)
## Properties
### onClipboardChanged
**onClipboardChanged**: `Event`\<`string`\>
## Methods
### readText
**readText**(): `MaybePromise`\<`string`\>
#### Returns
`MaybePromise`\<`string`\>
___
### writeText
**writeText**(`value`): `MaybePromise`\<`void`\>
#### Parameters
| Name | Type |
| :------ | :------ |
| `value` | `string` |
#### Returns
`MaybePromise`\<`void`\>
---
url: /auto-docs/core/interfaces/Command-1.md
---
# Interface: Command
## Table of contents
### Properties
- [category](./Command-1.md#category)
- [icon](./Command-1.md#icon)
- [id](./Command-1.md#id)
- [label](./Command-1.md#label)
- [shortLabel](./Command-1.md#shortlabel)
## Properties
### category
`Optional` **category**: `string`
暂不使用
___
### icon
`Optional` **icon**: `ReactNode` \| (`props`: `any`) => `ReactNode`
展示用 command icon
___
### id
**id**: `string`
id，唯一 key
___
### label
`Optional` **label**: `string`
展示用 label
___
### shortLabel
`Optional` **shortLabel**: `string`
在一些明确的场景下，部分只展示简短的 label 即可
---
url: /auto-docs/core/interfaces/CommandService.md
---
# Interface: CommandService
command service 执行接口
## Hierarchy
- `Disposable`
↳ **`CommandService`**
## Table of contents
### Properties
- [onDidExecuteCommand](./CommandService.md#ondidexecutecommand)
- [onWillExecuteCommand](./CommandService.md#onwillexecutecommand)
### Methods
- [dispose](./CommandService.md#dispose)
- [executeCommand](./CommandService.md#executecommand)
## Properties
### onDidExecuteCommand
`Readonly` **onDidExecuteCommand**: `Event`\<`CommandEvent`\>
command 事件执行完成后触发
___
### onWillExecuteCommand
`Readonly` **onWillExecuteCommand**: `Event`\<`CommandEvent`\>
command 事件执行前触发事件
## Methods
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Inherited from
Disposable.dispose
___
### executeCommand
**executeCommand**\<`T`\>(`command`, `...args`): `Promise`\<`undefined` \| `T`\>
执行 command
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `command` | `string` |
| `...args` | `any`[] |
#### Returns
`Promise`\<`undefined` \| `T`\>
---
url: /auto-docs/core/interfaces/ConfigEntityProps.md
---
# Interface: ConfigEntityProps
---
url: /auto-docs/core/interfaces/ContributionProvider.md
---
# Interface: ContributionProvider\
## Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `object` |
## Table of contents
### Methods
- [forEach](./ContributionProvider.md#foreach)
- [getContributions](./ContributionProvider.md#getcontributions)
## Methods
### forEach
**forEach**(`fn`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `fn` | (`v`: `T`) => `void` |
#### Returns
`void`
___
### getContributions
**getContributions**(): `T`[]
#### Returns
`T`[]
---
url: /auto-docs/core/interfaces/EditorState-1.md
---
# Interface: EditorState
编辑态
## Table of contents
### Properties
- [cancelMode](./EditorState-1.md#cancelmode)
- [cursor](./EditorState-1.md#cursor)
- [disableSelector](./EditorState-1.md#disableselector)
- [disabled](./EditorState-1.md#disabled)
- [handle](./EditorState-1.md#handle)
- [id](./EditorState-1.md#id)
- [onEsc](./EditorState-1.md#onesc)
- [shortcut](./EditorState-1.md#shortcut)
- [shortcutAutoEsc](./EditorState-1.md#shortcutautoesc)
- [shortcutWorksOnlyOnStateChanged](./EditorState-1.md#shortcutworksonlyonstatechanged)
## Properties
### cancelMode
**cancelMode**: ``"esc"`` \| ``"once"`` \| ``"hold"``
___
### cursor
`Optional` **cursor**: `string`
___
### disableSelector
`Optional` **disableSelector**: `boolean`
___
### disabled
`Optional` **disabled**: `boolean` \| (`config`: [`PlaygroundConfigEntity`](../classes/PlaygroundConfigEntity.md)) => `boolean`
___
### handle
`Optional` **handle**: (`config`: [`PlaygroundConfigEntity`](../classes/PlaygroundConfigEntity.md), `e?`: [`EditorStateChangeEvent`](./EditorStateChangeEvent.md)) => `void`
#### Type declaration
(`config`, `e?`): `void`
##### Parameters
| Name | Type |
| :------ | :------ |
| `config` | [`PlaygroundConfigEntity`](../classes/PlaygroundConfigEntity.md) |
| `e?` | [`EditorStateChangeEvent`](./EditorStateChangeEvent.md) |
##### Returns
`void`
___
### id
**id**: `string`
___
### onEsc
`Optional` **onEsc**: (`config`: [`PlaygroundConfigEntity`](../classes/PlaygroundConfigEntity.md), `e?`: `KeyboardEvent`) => `void`
#### Type declaration
(`config`, `e?`): `void`
##### Parameters
| Name | Type |
| :------ | :------ |
| `config` | [`PlaygroundConfigEntity`](../classes/PlaygroundConfigEntity.md) |
| `e?` | `KeyboardEvent` |
##### Returns
`void`
___
### shortcut
`Optional` **shortcut**: `string`
___
### shortcutAutoEsc
`Optional` **shortcutAutoEsc**: `boolean`
___
### shortcutWorksOnlyOnStateChanged
`Optional` **shortcutWorksOnlyOnStateChanged**: `boolean`
---
url: /auto-docs/core/interfaces/EditorStateChangeEvent.md
---
# Interface: EditorStateChangeEvent
## Table of contents
### Properties
- [event](./EditorStateChangeEvent.md#event)
- [lastState](./EditorStateChangeEvent.md#laststate)
- [state](./EditorStateChangeEvent.md#state)
## Properties
### event
`Optional` **event**: `MouseEvent`\<`Element`, `MouseEvent`\>
___
### lastState
`Optional` **lastState**: [`EditorState`](./EditorState-1.md)
___
### state
**state**: [`EditorState`](./EditorState-1.md)
---
url: /auto-docs/core/interfaces/EntityDataChangedEvent.md
---
# Interface: EntityDataChangedEvent\
## Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`Entity`](../classes/Entity-1.md) = [`Entity`](../classes/Entity-1.md) |
## Table of contents
### Properties
- [data](./EntityDataChangedEvent.md#data)
- [entity](./EntityDataChangedEvent.md#entity)
- [type](./EntityDataChangedEvent.md#type)
## Properties
### data
**data**: [`EntityData`](../classes/EntityData.md)\<`any`, {}\>
___
### entity
**entity**: `T`
___
### type
**type**: ``"add"`` \| ``"update"`` \| ``"delete"``
---
url: /auto-docs/core/interfaces/EntityDataRegistry.md
---
# Interface: EntityDataRegistry\
## Type parameters
| Name | Type |
| :------ | :------ |
| `E` | extends [`EntityData`](../classes/EntityData.md) = [`EntityData`](../classes/EntityData.md) |
## Table of contents
### Constructors
- [constructor](./EntityDataRegistry.md#constructor)
### Properties
- [type](./EntityDataRegistry.md#type)
## Constructors
### constructor
**new EntityDataRegistry**(`...args`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `...args` | `any`[] |
## Properties
### type
**type**: `E`[``"type"``]
---
url: /auto-docs/core/interfaces/EntityJSON.md
---
# Interface: EntityJSON
持久化数据
## Table of contents
### Properties
- [dataList](./EntityJSON.md#datalist)
- [id](./EntityJSON.md#id)
- [type](./EntityJSON.md#type)
## Properties
### dataList
**dataList**: `object`[]
___
### id
**id**: `string`
___
### type
**type**: `string`
---
url: /auto-docs/core/interfaces/EntityManagerContribution.md
---
# Interface: EntityManagerContribution
## Table of contents
### Methods
- [registerEntityManager](./EntityManagerContribution.md#registerentitymanager)
## Methods
### registerEntityManager
**registerEntityManager**(`entityManager`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `entityManager` | [`EntityManager`](../classes/EntityManager.md) |
#### Returns
`void`
---
url: /auto-docs/core/interfaces/EntityOpts.md
---
# Interface: EntityOpts
## Table of contents
### Properties
- [datas](./EntityOpts.md#datas)
- [entityManager](./EntityOpts.md#entitymanager)
- [id](./EntityOpts.md#id)
- [savedInManager](./EntityOpts.md#savedinmanager)
## Properties
### datas
`Optional` **datas**: \{ `data?`: `any` ; `registry`: [`EntityDataRegistry`](./EntityDataRegistry.md)\<[`EntityData`](../classes/EntityData.md)\<`any`, {}\>\> }[]
___
### entityManager
**entityManager**: [`EntityManager`](../classes/EntityManager.md)
___
### id
`Optional` **id**: `string`
___
### savedInManager
`Optional` **savedInManager**: `boolean`
---
url: /auto-docs/core/interfaces/EntityRegistry.md
---
# Interface: EntityRegistry\
注册类
## Type parameters
| Name | Type |
| :------ | :------ |
| `E` | extends [`Entity`](../classes/Entity-1.md) = [`Entity`](../classes/Entity-1.md) |
## Table of contents
### Constructors
- [constructor](./EntityRegistry.md#constructor)
### Properties
- [type](./EntityRegistry.md#type)
## Constructors
### constructor
**new EntityRegistry**(`opts`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `opts` | `any` |
## Properties
### type
`Readonly` **type**: `E`[``"type"``]
---
url: /auto-docs/core/interfaces/LayerEntitiesSelector.md
---
# Interface: LayerEntitiesSelector
## Table of contents
### Properties
- [datas](./LayerEntitiesSelector.md#datas)
- [entities](./LayerEntitiesSelector.md#entities)
- [lastDataVersion](./LayerEntitiesSelector.md#lastdataversion)
- [lastEntityVersion](./LayerEntitiesSelector.md#lastentityversion)
## Properties
### datas
**datas**: [[`EntityRegistry`](./EntityRegistry.md)\<[`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](./EntityOpts.md)\>\>, [`EntityDataRegistry`](./EntityDataRegistry.md)\<[`EntityData`](../classes/EntityData.md)\<`any`, {}\>\>][]
___
### entities
**entities**: [`EntityRegistry`](./EntityRegistry.md)\<[`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](./EntityOpts.md)\>\>[]
___
### lastDataVersion
`Optional` **lastDataVersion**: `SelectorVersion`
___
### lastEntityVersion
`Optional` **lastEntityVersion**: `SelectorVersion`
---
url: /auto-docs/core/interfaces/LayerOptions.md
---
# Interface: LayerOptions
---
url: /auto-docs/core/interfaces/LayerRegistry.md
---
# Interface: LayerRegistry\
## Type parameters
| Name | Type |
| :------ | :------ |
| `P` | extends [`Layer`](../classes/Layer.md) = [`Layer`](../classes/Layer.md) |
## Table of contents
### Constructors
- [constructor](./LayerRegistry.md#constructor)
## Constructors
### constructor
**new LayerRegistry**()
---
url: /auto-docs/core/interfaces/LoggerProps.md
---
# Interface: LoggerProps
## Table of contents
### Properties
- [event](./LoggerProps.md#event)
- [props](./LoggerProps.md#props)
## Properties
### event
**event**: [`LoggerEvent`](../enums/LoggerEvent.md)
___
### props
`Optional` **props**: `Record`\<`string`, `any`\>
---
url: /auto-docs/core/interfaces/NodeSchema.md
---
# Interface: NodeSchema
## Hierarchy
- **`NodeSchema`**
↳ [`TransformNodeSchema`](./TransformNodeSchema.md)
## Table of contents
### Properties
- [id](./NodeSchema.md#id)
- [name](./NodeSchema.md#name)
## Properties
### id
**id**: `string`
___
### name
`Optional` **name**: `string`
---
url: /auto-docs/core/interfaces/OriginSchema.md
---
# Interface: OriginSchema
## Implemented by
- [`OriginData`](../classes/OriginData.md)
## Table of contents
### Properties
- [x](./OriginSchema.md#x)
- [y](./OriginSchema.md#y)
## Properties
### x
**x**: `number`
___
### y
**y**: `number`
---
url: /auto-docs/core/interfaces/PipelineDimension.md
---
# Interface: PipelineDimension
## Table of contents
### Properties
- [height](./PipelineDimension.md#height)
- [width](./PipelineDimension.md#width)
## Properties
### height
**height**: `number`
___
### width
**width**: `number`
---
url: /auto-docs/core/interfaces/PipelineEntities.md
---
# Interface: PipelineEntities
注入到 Layer 中的实体选择器
## Hierarchy
- `Iterable`\<[`Entity`](../classes/Entity-1.md)\>
↳ **`PipelineEntities`**
## Implemented by
- [`PipelineEntitiesImpl`](../classes/PipelineEntitiesImpl.md)
## Table of contents
### Properties
- [createEntity](./PipelineEntities.md#createentity)
- [removeEntities](./PipelineEntities.md#removeentities)
- [size](./PipelineEntities.md#size)
### Methods
- [[iterator]](PipelineEntities.md#[iterator])
- [get](./PipelineEntities.md#get)
- [getConfig](./PipelineEntities.md#getconfig)
- [getEntities](./PipelineEntities.md#getentities)
- [getEntityDatas](./PipelineEntities.md#getentitydatas)
- [has](./PipelineEntities.md#has)
- [updateConfig](./PipelineEntities.md#updateconfig)
## Properties
### createEntity
**createEntity**: \(`registry`: [`EntityRegistry`](./EntityRegistry.md)\<[`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](./EntityOpts.md)\>\>, `opts?`: `Omit`\<`E`[``"__opts_type__"``], ``"entityManager"``\>) => `E`
#### Type declaration
\<`E`\>(`registry`, `opts?`): `E`
创建实体
##### Type parameters
| Name | Type |
| :------ | :------ |
| `E` | extends [`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](./EntityOpts.md), `E`\> |
##### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | [`EntityRegistry`](./EntityRegistry.md)\<[`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](./EntityOpts.md)\>\> |
| `opts?` | `Omit`\<`E`[``"__opts_type__"``], ``"entityManager"``\> |
##### Returns
`E`
___
### removeEntities
**removeEntities**: (`registry`: [`EntityRegistry`](./EntityRegistry.md)\<[`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](./EntityOpts.md)\>\>) => `void`
#### Type declaration
(`registry`): `void`
批量删除实体
##### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | [`EntityRegistry`](./EntityRegistry.md)\<[`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](./EntityOpts.md)\>\> |
##### Returns
`void`
___
### size
`Readonly` **size**: `number`
当前画布订阅的实体数目
## Methods
### [iterator]
**[iterator]**(): `Iterator`\<[`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](./EntityOpts.md)\>, `any`, `undefined`\>
#### Returns
`Iterator`\<[`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](./EntityOpts.md)\>, `any`, `undefined`\>
#### Inherited from
Iterable.[iterator]
___
### get
**get**\<`T`\>(`registry`, `id?`): `undefined` \| `T`
获取单个实体，如果该实体是单例且被注册过，则会自动创建
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](./EntityOpts.md), `T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | [`EntityRegistry`](./EntityRegistry.md)\<[`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](./EntityOpts.md)\>\> |
| `id?` | `string` |
#### Returns
`undefined` \| `T`
___
### getConfig
**getConfig**\<`E`\>(`registry`): `undefined` \| `E`[``"config"``]
获取配置信息
#### Type parameters
| Name | Type |
| :------ | :------ |
| `E` | extends [`ConfigEntity`](../classes/ConfigEntity.md)\<[`ConfigEntityProps`](./ConfigEntityProps.md), [`EntityOpts`](./EntityOpts.md), `E`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | [`EntityRegistry`](./EntityRegistry.md)\<[`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](./EntityOpts.md)\>\> |
#### Returns
`undefined` \| `E`[``"config"``]
___
### getEntities
**getEntities**\<`T`\>(`registry`): `T`[]
获取多个实体
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](./EntityOpts.md), `T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | [`EntityRegistry`](./EntityRegistry.md)\<[`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](./EntityOpts.md)\>\> |
#### Returns
`T`[]
___
### getEntityDatas
**getEntityDatas**\<`T`\>(`entityRegistry`, `dataRegistry`): `T`[]
获取 entity
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`EntityData`](../classes/EntityData.md)\<`any`, {}, `T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `entityRegistry` | [`EntityRegistry`](./EntityRegistry.md)\<[`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](./EntityOpts.md)\>\> |
| `dataRegistry` | `T` |
#### Returns
`T`[]
___
### has
**has**(`registry`): `boolean`
是否存在
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | [`EntityRegistry`](./EntityRegistry.md)\<[`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](./EntityOpts.md)\>\> |
#### Returns
`boolean`
___
### updateConfig
**updateConfig**\<`E`\>(`registry`, `props`): `void`
更新配置数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `E` | extends [`ConfigEntity`](../classes/ConfigEntity.md)\<[`ConfigEntityProps`](./ConfigEntityProps.md), [`EntityOpts`](./EntityOpts.md), `E`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | [`EntityRegistry`](./EntityRegistry.md)\<[`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](./EntityOpts.md)\>\> |
| `props` | `Partial`\<`E`[``"config"``]\> |
#### Returns
`void`
---
url: /auto-docs/core/interfaces/PipelineEventRegsiter.md
---
# Interface: PipelineEventRegsiter
## Table of contents
### Properties
- [handle](./PipelineEventRegsiter.md#handle)
- [priority](./PipelineEventRegsiter.md#priority)
## Properties
### handle
**handle**: [`PipelineEventHandler`](../types/PipelineEventHandler.md)
___
### priority
**priority**: `number`
---
url: /auto-docs/core/interfaces/PlaygroundConfig.md
---
# Interface: PlaygroundConfig
画布配置
## Table of contents
### Properties
- [autoFocus](./PlaygroundConfig.md#autofocus)
- [autoResize](./PlaygroundConfig.md#autoresize)
- [context](./PlaygroundConfig.md#context)
- [contextMenuPath](./PlaygroundConfig.md#contextmenupath)
- [editorStates](./PlaygroundConfig.md#editorstates)
- [entityConfigs](./PlaygroundConfig.md#entityconfigs)
- [height](./PlaygroundConfig.md#height)
- [layers](./PlaygroundConfig.md#layers)
- [node](./PlaygroundConfig.md#node)
- [width](./PlaygroundConfig.md#width)
- [zoomEnable](./PlaygroundConfig.md#zoomenable)
## Properties
### autoFocus
`Optional` **autoFocus**: `boolean`
___
### autoResize
`Optional` **autoResize**: `boolean`
___
### context
`Optional` **context**: `any`
___
### contextMenuPath
`Optional` **contextMenuPath**: `string`[]
___
### editorStates
`Optional` **editorStates**: [`EditorState`](./EditorState-1.md)[]
___
### entityConfigs
`Optional` **entityConfigs**: `Map`\<[`EntityRegistry`](./EntityRegistry.md)\<[`ConfigEntity`](../classes/ConfigEntity.md)\<[`ConfigEntityProps`](./ConfigEntityProps.md), [`EntityOpts`](./EntityOpts.md)\>\>, `any`\>
___
### height
`Optional` **height**: `number`
___
### layers
`Optional` **layers**: [`LayerRegistry`](./LayerRegistry.md)\<[`Layer`](../classes/Layer.md)\<`any`, `any`\>\>[]
___
### node
`Optional` **node**: `HTMLElement`
___
### width
`Optional` **width**: `number`
___
### zoomEnable
`Optional` **zoomEnable**: `boolean`
---
url: /auto-docs/core/interfaces/PlaygroundConfigEntityData.md
---
# Interface: PlaygroundConfigEntityData
## Table of contents
### Properties
- [disabled](./PlaygroundConfigEntityData.md#disabled)
- [grabDisable](./PlaygroundConfigEntityData.md#grabdisable)
- [height](./PlaygroundConfigEntityData.md#height)
- [maxZoom](./PlaygroundConfigEntityData.md#maxzoom)
- [minZoom](./PlaygroundConfigEntityData.md#minzoom)
- [mouseScrollDelta](./PlaygroundConfigEntityData.md#mousescrolldelta)
- [originX](./PlaygroundConfigEntityData.md#originx)
- [originY](./PlaygroundConfigEntityData.md#originy)
- [overflowX](./PlaygroundConfigEntityData.md#overflowx)
- [overflowY](./PlaygroundConfigEntityData.md#overflowy)
- [pageBounds](./PlaygroundConfigEntityData.md#pagebounds)
- [readonly](./PlaygroundConfigEntityData.md#readonly)
- [reverseScroll](./PlaygroundConfigEntityData.md#reversescroll)
- [scrollDisable](./PlaygroundConfigEntityData.md#scrolldisable)
- [scrollLimitX](./PlaygroundConfigEntityData.md#scrolllimitx)
- [scrollLimitY](./PlaygroundConfigEntityData.md#scrolllimity)
- [scrollX](./PlaygroundConfigEntityData.md#scrollx)
- [scrollY](./PlaygroundConfigEntityData.md#scrolly)
- [width](./PlaygroundConfigEntityData.md#width)
- [zoom](./PlaygroundConfigEntityData.md#zoom)
- [zoomDisable](./PlaygroundConfigEntityData.md#zoomdisable)
## Properties
### disabled
**disabled**: `boolean`
___
### grabDisable
**grabDisable**: `boolean`
___
### height
**height**: `number`
___
### maxZoom
**maxZoom**: `number`
___
### minZoom
**minZoom**: `number`
___
### mouseScrollDelta
`Optional` **mouseScrollDelta**: `number` \| (`zoom`: `number`) => `number`
___
### originX
**originX**: `number`
___
### originY
**originY**: `number`
___
### overflowX
**overflowX**: ``"hidden"`` \| ``"scroll"``
___
### overflowY
**overflowY**: ``"hidden"`` \| ``"scroll"``
___
### pageBounds
`Optional` **pageBounds**: `Object`
#### Type declaration
| Name | Type |
| :------ | :------ |
| `height` | `number` |
| `width` | `number` |
| `x` | `number` |
| `y` | `number` |
___
### readonly
**readonly**: `boolean`
___
### reverseScroll
**reverseScroll**: `boolean`
___
### scrollDisable
**scrollDisable**: `boolean`
___
### scrollLimitX
`Optional` **scrollLimitX**: `number`
___
### scrollLimitY
`Optional` **scrollLimitY**: `number`
___
### scrollX
**scrollX**: `number`
___
### scrollY
**scrollY**: `number`
___
### width
**width**: `number`
___
### zoom
**zoom**: `number`
___
### zoomDisable
**zoomDisable**: `boolean`
---
url: /auto-docs/core/interfaces/PlaygroundConfigRevealOpts.md
---
# Interface: PlaygroundConfigRevealOpts
## Table of contents
### Properties
- [bounds](./PlaygroundConfigRevealOpts.md#bounds)
- [easing](./PlaygroundConfigRevealOpts.md#easing)
- [easingDuration](./PlaygroundConfigRevealOpts.md#easingduration)
- [entities](./PlaygroundConfigRevealOpts.md#entities)
- [position](./PlaygroundConfigRevealOpts.md#position)
- [scrollDelta](./PlaygroundConfigRevealOpts.md#scrolldelta)
- [scrollToCenter](./PlaygroundConfigRevealOpts.md#scrolltocenter)
- [zoom](./PlaygroundConfigRevealOpts.md#zoom)
## Properties
### bounds
`Optional` **bounds**: `Rectangle`
___
### easing
`Optional` **easing**: `boolean`
___
### easingDuration
`Optional` **easingDuration**: `number`
___
### entities
`Optional` **entities**: [`Entity`](../classes/Entity-1.md)\<[`EntityOpts`](./EntityOpts.md)\>[]
___
### position
`Optional` **position**: [`PositionSchema`](./PositionSchema.md)
___
### scrollDelta
`Optional` **scrollDelta**: [`PositionSchema`](./PositionSchema.md)
___
### scrollToCenter
`Optional` **scrollToCenter**: `boolean`
___
### zoom
`Optional` **zoom**: `number`
---
url: /auto-docs/core/interfaces/PlaygroundContainerFactory.md
---
# Interface: PlaygroundContainerFactory
## Table of contents
### Properties
- [createChild](./PlaygroundContainerFactory.md#createchild)
- [get](./PlaygroundContainerFactory.md#get)
- [getAll](./PlaygroundContainerFactory.md#getall)
## Properties
### createChild
**createChild**: () => `Container`
#### Type declaration
(): `Container`
##### Returns
`Container`
___
### get
**get**: \(`serviceIdentifier`: `ServiceIdentifier`\<`T`\>) => `T`
#### Type declaration
\<`T`\>(`serviceIdentifier`): `T`
##### Type parameters
| Name |
| :------ |
| `T` |
##### Parameters
| Name | Type |
| :------ | :------ |
| `serviceIdentifier` | `ServiceIdentifier`\<`T`\> |
##### Returns
`T`
___
### getAll
**getAll**: \(`serviceIdentifier`: `ServiceIdentifier`\<`T`\>, `options?`: `GetAllOptions`) => `T`[]
#### Type declaration
\<`T`\>(`serviceIdentifier`, `options?`): `T`[]
##### Type parameters
| Name |
| :------ |
| `T` |
##### Parameters
| Name | Type |
| :------ | :------ |
| `serviceIdentifier` | `ServiceIdentifier`\<`T`\> |
| `options?` | `GetAllOptions` |
##### Returns
`T`[]
---
url: /auto-docs/core/interfaces/PlaygroundContribution.md
---
# Interface: PlaygroundContribution
## Table of contents
### Methods
- [onAllLayersRendered](./PlaygroundContribution.md#onalllayersrendered)
- [onDispose](./PlaygroundContribution.md#ondispose)
- [onInit](./PlaygroundContribution.md#oninit)
- [onReady](./PlaygroundContribution.md#onready)
- [registerPlayground](./PlaygroundContribution.md#registerplayground)
## Methods
### onAllLayersRendered
`Optional` **onAllLayersRendered**(`playground`): `void`
所有 Layer 第一次渲染完毕后触发
#### Parameters
| Name | Type |
| :------ | :------ |
| `playground` | [`Playground`](../classes/Playground.md)\<`any`\> |
#### Returns
`void`
___
### onDispose
`Optional` **onDispose**(`playground`): `void`
销毁
#### Parameters
| Name | Type |
| :------ | :------ |
| `playground` | [`Playground`](../classes/Playground.md)\<`any`\> |
#### Returns
`void`
___
### onInit
`Optional` **onInit**(`playground`): `void`
初始化画布 (onReady 之前)
#### Parameters
| Name | Type |
| :------ | :------ |
| `playground` | [`Playground`](../classes/Playground.md)\<`any`\> |
#### Returns
`void`
___
### onReady
`Optional` **onReady**(`playground`): `void`
初始化 entity 完毕后触发
#### Parameters
| Name | Type |
| :------ | :------ |
| `playground` | [`Playground`](../classes/Playground.md)\<`any`\> |
#### Returns
`void`
___
### registerPlayground
`Optional` **registerPlayground**(`registry`): `void`
注册 Layer/Entity/Able 相关
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | [`PlaygroundRegistry`](../classes/PlaygroundRegistry.md) |
#### Returns
`void`
**`Deprecated`**
---
url: /auto-docs/core/interfaces/PlaygroundDragEntitiesOpts.md
---
# Interface: PlaygroundDragEntitiesOpts\
## Type parameters
| Name |
| :------ |
| `T` |
## Hierarchy
- [`PlaygroundDragOptions`](./PlaygroundDragOptions.md)\<`T`\>
↳ **`PlaygroundDragEntitiesOpts`**
## Table of contents
### Properties
- [adsorbRefs](./PlaygroundDragEntitiesOpts.md#adsorbrefs)
- [config](./PlaygroundDragEntitiesOpts.md#config)
- [context](./PlaygroundDragEntitiesOpts.md#context)
- [onDrag](./PlaygroundDragEntitiesOpts.md#ondrag)
- [onDragEnd](./PlaygroundDragEntitiesOpts.md#ondragend)
- [onDragStart](./PlaygroundDragEntitiesOpts.md#ondragstart)
- [stopGlobalEventNames](./PlaygroundDragEntitiesOpts.md#stopglobaleventnames)
## Properties
### adsorbRefs
`Optional` **adsorbRefs**: `Rectangle`[]
___
### config
`Optional` **config**: [`PlaygroundConfigEntity`](../classes/PlaygroundConfigEntity.md)
___
### context
`Optional` **context**: `T`
___
### onDrag
`Optional` **onDrag**: (`e`: [`PlaygroundDragEvent`](./PlaygroundDragEvent.md), `context?`: `T`) => `void`
#### Type declaration
(`e`, `context?`): `void`
##### Parameters
| Name | Type |
| :------ | :------ |
| `e` | [`PlaygroundDragEvent`](./PlaygroundDragEvent.md) |
| `context?` | `T` |
##### Returns
`void`
#### Inherited from
[PlaygroundDragOptions](./PlaygroundDragOptions.md).[onDrag](./PlaygroundDragOptions.md#ondrag)
___
### onDragEnd
`Optional` **onDragEnd**: (`e`: [`PlaygroundDragEvent`](./PlaygroundDragEvent.md), `context?`: `T`) => `void`
#### Type declaration
(`e`, `context?`): `void`
##### Parameters
| Name | Type |
| :------ | :------ |
| `e` | [`PlaygroundDragEvent`](./PlaygroundDragEvent.md) |
| `context?` | `T` |
##### Returns
`void`
#### Inherited from
[PlaygroundDragOptions](./PlaygroundDragOptions.md).[onDragEnd](./PlaygroundDragOptions.md#ondragend)
___
### onDragStart
`Optional` **onDragStart**: (`e`: [`PlaygroundDragEvent`](./PlaygroundDragEvent.md), `context?`: `T`) => `void`
#### Type declaration
(`e`, `context?`): `void`
##### Parameters
| Name | Type |
| :------ | :------ |
| `e` | [`PlaygroundDragEvent`](./PlaygroundDragEvent.md) |
| `context?` | `T` |
##### Returns
`void`
#### Inherited from
[PlaygroundDragOptions](./PlaygroundDragOptions.md).[onDragStart](./PlaygroundDragOptions.md#ondragstart)
___
### stopGlobalEventNames
`Optional` **stopGlobalEventNames**: `string`[]
#### Inherited from
[PlaygroundDragOptions](./PlaygroundDragOptions.md).[stopGlobalEventNames](./PlaygroundDragOptions.md#stopglobaleventnames)
---
url: /auto-docs/core/interfaces/PlaygroundDragEvent.md
---
# Interface: PlaygroundDragEvent
## Hierarchy
- `MouseEvent`
↳ **`PlaygroundDragEvent`**
## Table of contents
### Properties
- [AT\_TARGET](./PlaygroundDragEvent.md#at_target)
- [BUBBLING\_PHASE](./PlaygroundDragEvent.md#bubbling_phase)
- [CAPTURING\_PHASE](./PlaygroundDragEvent.md#capturing_phase)
- [NONE](./PlaygroundDragEvent.md#none)
- [altKey](./PlaygroundDragEvent.md#altkey)
- [bubbles](./PlaygroundDragEvent.md#bubbles)
- [button](./PlaygroundDragEvent.md#button)
- [buttons](./PlaygroundDragEvent.md#buttons)
- [cancelBubble](./PlaygroundDragEvent.md#cancelbubble)
- [cancelable](./PlaygroundDragEvent.md#cancelable)
- [clientX](./PlaygroundDragEvent.md#clientx)
- [clientY](./PlaygroundDragEvent.md#clienty)
- [composed](./PlaygroundDragEvent.md#composed)
- [ctrlKey](./PlaygroundDragEvent.md#ctrlkey)
- [currentTarget](./PlaygroundDragEvent.md#currenttarget)
- [defaultPrevented](./PlaygroundDragEvent.md#defaultprevented)
- [detail](./PlaygroundDragEvent.md#detail)
- [endPos](./PlaygroundDragEvent.md#endpos)
- [eventPhase](./PlaygroundDragEvent.md#eventphase)
- [id](./PlaygroundDragEvent.md#id)
- [isMoving](./PlaygroundDragEvent.md#ismoving)
- [isStart](./PlaygroundDragEvent.md#isstart)
- [isTrusted](./PlaygroundDragEvent.md#istrusted)
- [metaKey](./PlaygroundDragEvent.md#metakey)
- [movementX](./PlaygroundDragEvent.md#movementx)
- [movementY](./PlaygroundDragEvent.md#movementy)
- [movingDelta](./PlaygroundDragEvent.md#movingdelta)
- [offsetX](./PlaygroundDragEvent.md#offsetx)
- [offsetY](./PlaygroundDragEvent.md#offsety)
- [pageX](./PlaygroundDragEvent.md#pagex)
- [pageY](./PlaygroundDragEvent.md#pagey)
- [relatedTarget](./PlaygroundDragEvent.md#relatedtarget)
- [returnValue](./PlaygroundDragEvent.md#returnvalue)
- [scale](./PlaygroundDragEvent.md#scale)
- [screenX](./PlaygroundDragEvent.md#screenx)
- [screenY](./PlaygroundDragEvent.md#screeny)
- [shiftKey](./PlaygroundDragEvent.md#shiftkey)
- [srcElement](./PlaygroundDragEvent.md#srcelement)
- [startPos](./PlaygroundDragEvent.md#startpos)
- [target](./PlaygroundDragEvent.md#target)
- [timeStamp](./PlaygroundDragEvent.md#timestamp)
- [type](./PlaygroundDragEvent.md#type)
- [view](./PlaygroundDragEvent.md#view)
- [which](./PlaygroundDragEvent.md#which)
- [x](./PlaygroundDragEvent.md#x)
- [y](./PlaygroundDragEvent.md#y)
### Methods
- [composedPath](./PlaygroundDragEvent.md#composedpath)
- [getModifierState](./PlaygroundDragEvent.md#getmodifierstate)
- [initEvent](./PlaygroundDragEvent.md#initevent)
- [initMouseEvent](./PlaygroundDragEvent.md#initmouseevent)
- [initUIEvent](./PlaygroundDragEvent.md#inituievent)
- [preventDefault](./PlaygroundDragEvent.md#preventdefault)
- [stopImmediatePropagation](./PlaygroundDragEvent.md#stopimmediatepropagation)
- [stopPropagation](./PlaygroundDragEvent.md#stoppropagation)
## Properties
### AT\_TARGET
`Readonly` **AT\_TARGET**: ``2``
#### Inherited from
MouseEvent.AT\_TARGET
___
### BUBBLING\_PHASE
`Readonly` **BUBBLING\_PHASE**: ``3``
#### Inherited from
MouseEvent.BUBBLING\_PHASE
___
### CAPTURING\_PHASE
`Readonly` **CAPTURING\_PHASE**: ``1``
#### Inherited from
MouseEvent.CAPTURING\_PHASE
___
### NONE
`Readonly` **NONE**: ``0``
#### Inherited from
MouseEvent.NONE
___
### altKey
`Readonly` **altKey**: `boolean`
#### Inherited from
MouseEvent.altKey
___
### bubbles
`Readonly` **bubbles**: `boolean`
Returns true or false depending on how event was initialized. True if event goes through its target's ancestors in reverse tree order, and false otherwise.
#### Inherited from
MouseEvent.bubbles
___
### button
`Readonly` **button**: `number`
#### Inherited from
MouseEvent.button
___
### buttons
`Readonly` **buttons**: `number`
#### Inherited from
MouseEvent.buttons
___
### cancelBubble
**cancelBubble**: `boolean`
**`Deprecated`**
#### Inherited from
MouseEvent.cancelBubble
___
### cancelable
`Readonly` **cancelable**: `boolean`
Returns true or false depending on how event was initialized. Its return value does not always carry meaning, but true can indicate that part of the operation during which event was dispatched, can be canceled by invoking the preventDefault() method.
#### Inherited from
MouseEvent.cancelable
___
### clientX
`Readonly` **clientX**: `number`
#### Inherited from
MouseEvent.clientX
___
### clientY
`Readonly` **clientY**: `number`
#### Inherited from
MouseEvent.clientY
___
### composed
`Readonly` **composed**: `boolean`
Returns true or false depending on how event was initialized. True if event invokes listeners past a ShadowRoot node that is the root of its target, and false otherwise.
#### Inherited from
MouseEvent.composed
___
### ctrlKey
`Readonly` **ctrlKey**: `boolean`
#### Inherited from
MouseEvent.ctrlKey
___
### currentTarget
`Readonly` **currentTarget**: ``null`` \| `EventTarget`
Returns the object whose event listener's callback is currently being invoked.
#### Inherited from
MouseEvent.currentTarget
___
### defaultPrevented
`Readonly` **defaultPrevented**: `boolean`
Returns true if preventDefault() was invoked successfully to indicate cancelation, and false otherwise.
#### Inherited from
MouseEvent.defaultPrevented
___
### detail
`Readonly` **detail**: `number`
#### Inherited from
MouseEvent.detail
___
### endPos
**endPos**: [`PositionSchema`](./PositionSchema.md)
___
### eventPhase
`Readonly` **eventPhase**: `number`
Returns the event's phase, which is one of NONE, CAPTURING_PHASE, AT_TARGET, and BUBBLING_PHASE.
#### Inherited from
MouseEvent.eventPhase
___
### id
**id**: `number`
___
### isMoving
**isMoving**: `boolean`
___
### isStart
**isStart**: `boolean`
___
### isTrusted
`Readonly` **isTrusted**: `boolean`
Returns true if event was dispatched by the user agent, and false otherwise.
#### Inherited from
MouseEvent.isTrusted
___
### metaKey
`Readonly` **metaKey**: `boolean`
#### Inherited from
MouseEvent.metaKey
___
### movementX
`Readonly` **movementX**: `number`
#### Inherited from
MouseEvent.movementX
___
### movementY
`Readonly` **movementY**: `number`
#### Inherited from
MouseEvent.movementY
___
### movingDelta
**movingDelta**: [`PositionSchema`](./PositionSchema.md)
___
### offsetX
`Readonly` **offsetX**: `number`
#### Inherited from
MouseEvent.offsetX
___
### offsetY
`Readonly` **offsetY**: `number`
#### Inherited from
MouseEvent.offsetY
___
### pageX
`Readonly` **pageX**: `number`
#### Inherited from
MouseEvent.pageX
___
### pageY
`Readonly` **pageY**: `number`
#### Inherited from
MouseEvent.pageY
___
### relatedTarget
`Readonly` **relatedTarget**: ``null`` \| `EventTarget`
#### Inherited from
MouseEvent.relatedTarget
___
### returnValue
**returnValue**: `boolean`
**`Deprecated`**
#### Inherited from
MouseEvent.returnValue
___
### scale
**scale**: `number`
___
### screenX
`Readonly` **screenX**: `number`
#### Inherited from
MouseEvent.screenX
___
### screenY
`Readonly` **screenY**: `number`
#### Inherited from
MouseEvent.screenY
___
### shiftKey
`Readonly` **shiftKey**: `boolean`
#### Inherited from
MouseEvent.shiftKey
___
### srcElement
`Readonly` **srcElement**: ``null`` \| `EventTarget`
**`Deprecated`**
#### Inherited from
MouseEvent.srcElement
___
### startPos
**startPos**: [`PositionSchema`](./PositionSchema.md)
___
### target
`Readonly` **target**: ``null`` \| `EventTarget`
Returns the object to which event is dispatched (its target).
#### Inherited from
MouseEvent.target
___
### timeStamp
`Readonly` **timeStamp**: `number`
Returns the event's timestamp as the number of milliseconds measured relative to the time origin.
#### Inherited from
MouseEvent.timeStamp
___
### type
`Readonly` **type**: `string`
Returns the type of event, e.g. "click", "hashchange", or "submit".
#### Inherited from
MouseEvent.type
___
### view
`Readonly` **view**: ``null`` \| `Window`
#### Inherited from
MouseEvent.view
___
### which
`Readonly` **which**: `number`
**`Deprecated`**
#### Inherited from
MouseEvent.which
___
### x
`Readonly` **x**: `number`
#### Inherited from
MouseEvent.x
___
### y
`Readonly` **y**: `number`
#### Inherited from
MouseEvent.y
## Methods
### composedPath
**composedPath**(): `EventTarget`[]
Returns the invocation target objects of event's path (objects on which listeners will be invoked), except for any nodes in shadow trees of which the shadow root's mode is "closed" that are not reachable from event's currentTarget.
#### Returns
`EventTarget`[]
#### Inherited from
MouseEvent.composedPath
___
### getModifierState
**getModifierState**(`keyArg`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `keyArg` | `string` |
#### Returns
`boolean`
#### Inherited from
MouseEvent.getModifierState
___
### initEvent
**initEvent**(`type`, `bubbles?`, `cancelable?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `type` | `string` |
| `bubbles?` | `boolean` |
| `cancelable?` | `boolean` |
#### Returns
`void`
**`Deprecated`**
#### Inherited from
MouseEvent.initEvent
___
### initMouseEvent
**initMouseEvent**(`typeArg`, `canBubbleArg`, `cancelableArg`, `viewArg`, `detailArg`, `screenXArg`, `screenYArg`, `clientXArg`, `clientYArg`, `ctrlKeyArg`, `altKeyArg`, `shiftKeyArg`, `metaKeyArg`, `buttonArg`, `relatedTargetArg`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `typeArg` | `string` |
| `canBubbleArg` | `boolean` |
| `cancelableArg` | `boolean` |
| `viewArg` | `Window` |
| `detailArg` | `number` |
| `screenXArg` | `number` |
| `screenYArg` | `number` |
| `clientXArg` | `number` |
| `clientYArg` | `number` |
| `ctrlKeyArg` | `boolean` |
| `altKeyArg` | `boolean` |
| `shiftKeyArg` | `boolean` |
| `metaKeyArg` | `boolean` |
| `buttonArg` | `number` |
| `relatedTargetArg` | ``null`` \| `EventTarget` |
#### Returns
`void`
**`Deprecated`**
#### Inherited from
MouseEvent.initMouseEvent
___
### initUIEvent
**initUIEvent**(`typeArg`, `bubblesArg?`, `cancelableArg?`, `viewArg?`, `detailArg?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `typeArg` | `string` |
| `bubblesArg?` | `boolean` |
| `cancelableArg?` | `boolean` |
| `viewArg?` | ``null`` \| `Window` |
| `detailArg?` | `number` |
#### Returns
`void`
**`Deprecated`**
#### Inherited from
MouseEvent.initUIEvent
___
### preventDefault
**preventDefault**(): `void`
If invoked when the cancelable attribute value is true, and while executing a listener for the event with passive set to false, signals to the operation that caused event to be dispatched that it needs to be canceled.
#### Returns
`void`
#### Inherited from
MouseEvent.preventDefault
___
### stopImmediatePropagation
**stopImmediatePropagation**(): `void`
Invoking this method prevents event from reaching any registered event listeners after the current one finishes running and, when dispatched in a tree, also prevents event from reaching any other objects.
#### Returns
`void`
#### Inherited from
MouseEvent.stopImmediatePropagation
___
### stopPropagation
**stopPropagation**(): `void`
When dispatched in a tree, invoking this method prevents event from reaching any objects other than the current object.
#### Returns
`void`
#### Inherited from
MouseEvent.stopPropagation
---
url: /auto-docs/core/interfaces/PlaygroundDragOptions.md
---
# Interface: PlaygroundDragOptions\
## Type parameters
| Name |
| :------ |
| `T` |
## Hierarchy
- **`PlaygroundDragOptions`**
↳ [`PlaygroundDragEntitiesOpts`](./PlaygroundDragEntitiesOpts.md)
## Table of contents
### Properties
- [onDrag](./PlaygroundDragOptions.md#ondrag)
- [onDragEnd](./PlaygroundDragOptions.md#ondragend)
- [onDragStart](./PlaygroundDragOptions.md#ondragstart)
- [stopGlobalEventNames](./PlaygroundDragOptions.md#stopglobaleventnames)
## Properties
### onDrag
`Optional` **onDrag**: (`e`: [`PlaygroundDragEvent`](./PlaygroundDragEvent.md), `context?`: `T`) => `void`
#### Type declaration
(`e`, `context?`): `void`
##### Parameters
| Name | Type |
| :------ | :------ |
| `e` | [`PlaygroundDragEvent`](./PlaygroundDragEvent.md) |
| `context?` | `T` |
##### Returns
`void`
___
### onDragEnd
`Optional` **onDragEnd**: (`e`: [`PlaygroundDragEvent`](./PlaygroundDragEvent.md), `context?`: `T`) => `void`
#### Type declaration
(`e`, `context?`): `void`
##### Parameters
| Name | Type |
| :------ | :------ |
| `e` | [`PlaygroundDragEvent`](./PlaygroundDragEvent.md) |
| `context?` | `T` |
##### Returns
`void`
___
### onDragStart
`Optional` **onDragStart**: (`e`: [`PlaygroundDragEvent`](./PlaygroundDragEvent.md), `context?`: `T`) => `void`
#### Type declaration
(`e`, `context?`): `void`
##### Parameters
| Name | Type |
| :------ | :------ |
| `e` | [`PlaygroundDragEvent`](./PlaygroundDragEvent.md) |
| `context?` | `T` |
##### Returns
`void`
___
### stopGlobalEventNames
`Optional` **stopGlobalEventNames**: `string`[]
---
url: /auto-docs/core/interfaces/PlaygroundLayerOptions.md
---
# Interface: PlaygroundLayerOptions
## Hierarchy
- [`LayerOptions`](../variables/LayerOptions-1.md)
↳ **`PlaygroundLayerOptions`**
## Table of contents
### Properties
- [hoverService](./PlaygroundLayerOptions.md#hoverservice)
- [ineractiveType](./PlaygroundLayerOptions.md#ineractivetype)
- [preventGlobalGesture](./PlaygroundLayerOptions.md#preventglobalgesture)
## Properties
### hoverService
`Optional` **hoverService**: `Object`
悬浮服务
#### Type declaration
| Name | Type |
| :------ | :------ |
| `clearHovered` | () => `void` |
| `isSomeHovered` | () => `boolean` |
| `updateHoverPosition` | (`position`: [`PositionSchema`](./PositionSchema.md), `target?`: `HTMLElement`) => `void` |
___
### ineractiveType
`Optional` **ineractiveType**: [`PlaygroundInteractiveType`](../types/PlaygroundInteractiveType.md)
___
### preventGlobalGesture
`Optional` **preventGlobalGesture**: `boolean`
阻止浏览器默认的手势（苹果触摸板），包含：放大缩小、左右滑动翻页，默认为 false
---
url: /auto-docs/core/interfaces/PlaygroundReactProviderProps.md
---
# Interface: PlaygroundReactProviderProps
## Table of contents
### Properties
- [autoFocus](./PlaygroundReactProviderProps.md#autofocus)
- [autoResize](./PlaygroundReactProviderProps.md#autoresize)
- [children](./PlaygroundReactProviderProps.md#children)
- [containerModules](./PlaygroundReactProviderProps.md#containermodules)
- [customPluginContext](./PlaygroundReactProviderProps.md#customplugincontext)
- [parentContainer](./PlaygroundReactProviderProps.md#parentcontainer)
- [playgroundContainer](./PlaygroundReactProviderProps.md#playgroundcontainer)
- [playgroundContext](./PlaygroundReactProviderProps.md#playgroundcontext)
- [plugins](./PlaygroundReactProviderProps.md#plugins)
- [zoomEnable](./PlaygroundReactProviderProps.md#zoomenable)
## Properties
### autoFocus
`Optional` **autoFocus**: `boolean`
___
### autoResize
`Optional` **autoResize**: `boolean`
___
### children
`Optional` **children**: `ReactNode`
___
### containerModules
`Optional` **containerModules**: `ContainerModule`[]
___
### customPluginContext
`Optional` **customPluginContext**: (`container`: `Container`) => [`PluginContext`](../variables/PluginContext-1.md)
#### Type declaration
(`container`): [`PluginContext`](../variables/PluginContext-1.md)
##### Parameters
| Name | Type |
| :------ | :------ |
| `container` | `Container` |
##### Returns
[`PluginContext`](../variables/PluginContext-1.md)
___
### parentContainer
`Optional` **parentContainer**: `Container`
___
### playgroundContainer
`Optional` **playgroundContainer**: `Container`
___
### playgroundContext
`Optional` **playgroundContext**: `any`
___
### plugins
`Optional` **plugins**: [`PluginsProvider`](./PluginsProvider.md)\<`any`\>
___
### zoomEnable
`Optional` **zoomEnable**: `boolean`
---
url: /auto-docs/core/interfaces/PlaygroundReactRendererProps.md
---
# Interface: PlaygroundReactRendererProps
## Table of contents
### Properties
- [children](./PlaygroundReactRendererProps.md#children)
- [className](./PlaygroundReactRendererProps.md#classname)
- [style](./PlaygroundReactRendererProps.md#style)
## Properties
### children
`Optional` **children**: `ReactNode`
这个会放到 playground node 下边
___
### className
`Optional` **className**: `string`
___
### style
`Optional` **style**: `CSSProperties`
---
url: /auto-docs/core/interfaces/PluginBindConfig.md
---
# Interface: PluginBindConfig
## Table of contents
### Properties
- [bind](./PluginBindConfig.md#bind)
- [isBound](./PluginBindConfig.md#isbound)
- [rebind](./PluginBindConfig.md#rebind)
- [unbind](./PluginBindConfig.md#unbind)
## Properties
### bind
**bind**: `Bind`
___
### isBound
**isBound**: `IsBound`
___
### rebind
**rebind**: `Rebind`
___
### unbind
**unbind**: `Unbind`
---
url: /auto-docs/core/interfaces/PluginConfig.md
---
# Interface: PluginConfig\
## Type parameters
| Name | Type |
| :------ | :------ |
| `Opts` | `Opts` |
| `CTX` | extends [`PluginContext`](../variables/PluginContext-1.md) = [`PluginContext`](../variables/PluginContext-1.md) |
## Table of contents
### Properties
- [containerModules](./PluginConfig.md#containermodules)
- [onAllLayersRendered](./PluginConfig.md#onalllayersrendered)
- [onBind](./PluginConfig.md#onbind)
- [onDispose](./PluginConfig.md#ondispose)
- [onInit](./PluginConfig.md#oninit)
- [onReady](./PluginConfig.md#onready)
## Properties
### containerModules
`Optional` **containerModules**: `ContainerModule`[]
IOC 模块，用于更底层的插件扩展
___
### onAllLayersRendered
`Optional` **onAllLayersRendered**: (`ctx`: `CTX`, `opts`: `Opts`) => `void`
#### Type declaration
(`ctx`, `opts`): `void`
画布所有 layer 渲染结束
##### Parameters
| Name | Type |
| :------ | :------ |
| `ctx` | `CTX` |
| `opts` | `Opts` |
##### Returns
`void`
___
### onBind
`Optional` **onBind**: (`bindConfig`: [`PluginBindConfig`](./PluginBindConfig.md), `opts`: `Opts`) => `void`
#### Type declaration
(`bindConfig`, `opts`): `void`
插件 IOC 注册, 等价于 containerModule
##### Parameters
| Name | Type |
| :------ | :------ |
| `bindConfig` | [`PluginBindConfig`](./PluginBindConfig.md) |
| `opts` | `Opts` |
##### Returns
`void`
___
### onDispose
`Optional` **onDispose**: (`ctx`: `CTX`, `opts`: `Opts`) => `void`
#### Type declaration
(`ctx`, `opts`): `void`
画布销毁阶段
##### Parameters
| Name | Type |
| :------ | :------ |
| `ctx` | `CTX` |
| `opts` | `Opts` |
##### Returns
`void`
___
### onInit
`Optional` **onInit**: (`ctx`: `CTX`, `opts`: `Opts`) => `void`
#### Type declaration
(`ctx`, `opts`): `void`
画布注册阶段
##### Parameters
| Name | Type |
| :------ | :------ |
| `ctx` | `CTX` |
| `opts` | `Opts` |
##### Returns
`void`
___
### onReady
`Optional` **onReady**: (`ctx`: `CTX`, `opts`: `Opts`) => `void`
#### Type declaration
(`ctx`, `opts`): `void`
画布准备阶段，一般用于 dom 事件注册等
##### Parameters
| Name | Type |
| :------ | :------ |
| `ctx` | `CTX` |
| `opts` | `Opts` |
##### Returns
`void`
---
url: /auto-docs/core/interfaces/PluginContext.md
---
# Interface: PluginContext
## Table of contents
### Properties
- [container](./PluginContext.md#container)
- [playground](./PluginContext.md#playground)
### Methods
- [get](./PluginContext.md#get)
- [getAll](./PluginContext.md#getall)
## Properties
### container
**container**: `Container`
IOC 容器
___
### playground
**playground**: [`Playground`](../classes/Playground.md)\<`any`\>
画布实例
## Methods
### get
**get**\<`T`\>(`identifier`): `T`
获取 IOC 容器的 单例模块
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `identifier` | `ServiceIdentifier`\<`T`\> |
#### Returns
`T`
___
### getAll
**getAll**\<`T`\>(`identifier`): `T`[]
获取 IOC 容器的 多例模块
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `identifier` | `ServiceIdentifier`\<`T`\> |
#### Returns
`T`[]
---
url: /auto-docs/core/interfaces/PluginsProvider.md
---
# Interface: PluginsProvider\
## Type parameters
| Name | Type |
| :------ | :------ |
| `CTX` | extends [`PluginContext`](../variables/PluginContext-1.md) = [`PluginContext`](../variables/PluginContext-1.md) |
## Callable
### PluginsProvider
**PluginsProvider**(`ctx`): [`Plugin`](../variables/Plugin-1.md)\<`any`\>[]
#### Parameters
| Name | Type |
| :------ | :------ |
| `ctx` | `CTX` |
#### Returns
[`Plugin`](../variables/Plugin-1.md)\<`any`\>[]
---
url: /auto-docs/core/interfaces/PositionSchema.md
---
# Interface: PositionSchema
Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
SPDX-License-Identifier: MIT
## Implemented by
- [`PositionData`](../classes/PositionData.md)
## Table of contents
### Properties
- [x](./PositionSchema.md#x)
- [y](./PositionSchema.md#y)
## Properties
### x
**x**: `number`
___
### y
**y**: `number`
---
url: /auto-docs/core/interfaces/RegistryInit.md
---
# Interface: RegistryInit
## Callable
### RegistryInit
**RegistryInit**(`target`, `method`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `target` | `any` |
| `method` | `string` \| `symbol` |
#### Returns
`void`
---
url: /auto-docs/core/interfaces/RegistryValueGetter.md
---
# Interface: RegistryValueGetter\
## Type parameters
| Name |
| :------ |
| `T` |
## Callable
### RegistryValueGetter
**RegistryValueGetter**(`target`, `method`): `T`
#### Parameters
| Name | Type |
| :------ | :------ |
| `target` | `any` |
| `method` | `string` \| `symbol` |
#### Returns
`T`
---
url: /auto-docs/core/interfaces/ScaleSchema.md
---
# Interface: ScaleSchema
## Implemented by
- [`ScaleData`](../classes/ScaleData.md)
## Table of contents
### Properties
- [x](./ScaleSchema.md#x)
- [y](./ScaleSchema.md#y)
## Properties
### x
**x**: `number`
___
### y
**y**: `number`
---
url: /auto-docs/core/interfaces/ScrollIntoViewOpts.md
---
# Interface: ScrollIntoViewOpts
## Table of contents
### Properties
- [duration](./ScrollIntoViewOpts.md#duration)
- [scrollX](./ScrollIntoViewOpts.md#scrollx)
- [scrollY](./ScrollIntoViewOpts.md#scrolly)
### Methods
- [getScrollParent](./ScrollIntoViewOpts.md#getscrollparent)
- [getTargetNode](./ScrollIntoViewOpts.md#gettargetnode)
## Properties
### duration
`Optional` **duration**: `number`
___
### scrollX
`Optional` **scrollX**: `boolean`
___
### scrollY
`Optional` **scrollY**: `boolean`
## Methods
### getScrollParent
**getScrollParent**(): `undefined` \| `HTMLElement`
#### Returns
`undefined` \| `HTMLElement`
___
### getTargetNode
**getTargetNode**(): `undefined` \| `HTMLElement`
#### Returns
`undefined` \| `HTMLElement`
---
url: /auto-docs/core/interfaces/SizeSchema-1.md
---
# Interface: SizeSchema
## Implemented by
- [`SizeData`](../classes/SizeData.md)
## Table of contents
### Properties
- [height](./SizeSchema-1.md#height)
- [locked](./SizeSchema-1.md#locked)
- [width](./SizeSchema-1.md#width)
## Properties
### height
**height**: `number`
___
### locked
`Optional` **locked**: `boolean`
___
### width
**width**: `number`
---
url: /auto-docs/core/interfaces/SkewSchema.md
---
# Interface: SkewSchema
## Implemented by
- [`SkewData`](../classes/SkewData.md)
## Table of contents
### Properties
- [x](./SkewSchema.md#x)
- [y](./SkewSchema.md#y)
## Properties
### x
**x**: `number`
___
### y
**y**: `number`
---
url: /auto-docs/core/interfaces/StorageService.md
---
# Interface: StorageService
存储数据到缓存
## Table of contents
### Methods
- [getData](./StorageService.md#getdata)
- [setData](./StorageService.md#setdata)
## Methods
### getData
**getData**\<`T`\>(`key`, `defaultValue`): `T`
Returns the data stored for the given key or the provided default value if nothing is stored for the given key.
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `key` | `string` |
| `defaultValue` | `T` |
#### Returns
`T`
**getData**\<`T`\>(`key`): `undefined` \| `T`
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `key` | `string` |
#### Returns
`undefined` \| `T`
___
### setData
**setData**\<`T`\>(`key`, `data`): `void`
Stores the given data under the given key.
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `key` | `string` |
| `data` | `T` |
#### Returns
`void`
---
url: /auto-docs/core/interfaces/TransformNodeSchema.md
---
# Interface: TransformNodeSchema
## Hierarchy
- [`NodeSchema`](./NodeSchema.md)
↳ **`TransformNodeSchema`**
## Table of contents
### Properties
- [id](./TransformNodeSchema.md#id)
- [name](./TransformNodeSchema.md#name)
- [transform](./TransformNodeSchema.md#transform)
## Properties
### id
**id**: `string`
#### Inherited from
[NodeSchema](./NodeSchema.md).[id](./NodeSchema.md#id)
___
### name
`Optional` **name**: `string`
#### Inherited from
[NodeSchema](./NodeSchema.md).[name](./NodeSchema.md#name)
___
### transform
**transform**: [`TransformSchema`](./TransformSchema-1.md)
---
url: /auto-docs/core/interfaces/TransformSchema-1.md
---
# Interface: TransformSchema
## Implemented by
- [`TransformData`](../classes/TransformData-1.md)
## Table of contents
### Properties
- [origin](./TransformSchema-1.md#origin)
- [position](./TransformSchema-1.md#position)
- [rotation](./TransformSchema-1.md#rotation)
- [scale](./TransformSchema-1.md#scale)
- [size](./TransformSchema-1.md#size)
- [skew](./TransformSchema-1.md#skew)
## Properties
### origin
**origin**: [`OriginSchema`](./OriginSchema.md)
___
### position
**position**: [`PositionSchema`](./PositionSchema.md)
___
### rotation
**rotation**: `number`
___
### scale
**scale**: [`ScaleSchema`](./ScaleSchema.md)
___
### size
**size**: [`SizeSchema`](./SizeSchema-1.md)
___
### skew
**skew**: [`SkewSchema`](./SkewSchema.md)
---
url: /auto-docs/core/interfaces/TweenOpts.md
---
# Interface: TweenOpts\
## Type parameters
| Name |
| :------ |
| `V` |
## Table of contents
### Properties
- [duration](./TweenOpts.md#duration)
- [easing](./TweenOpts.md#easing)
- [from](./TweenOpts.md#from)
- [onComplete](./TweenOpts.md#oncomplete)
- [onDispose](./TweenOpts.md#ondispose)
- [onUpdate](./TweenOpts.md#onupdate)
- [to](./TweenOpts.md#to)
## Properties
### duration
**duration**: `number`
___
### easing
`Optional` **easing**: (`num`: `number`) => `number`
#### Type declaration
(`num`): `number`
##### Parameters
| Name | Type |
| :------ | :------ |
| `num` | `number` |
##### Returns
`number`
___
### from
**from**: `V`
___
### onComplete
`Optional` **onComplete**: (`v`: `V`) => `void`
#### Type declaration
(`v`): `void`
##### Parameters
| Name | Type |
| :------ | :------ |
| `v` | `V` |
##### Returns
`void`
___
### onDispose
`Optional` **onDispose**: (`v`: `V`) => `void`
#### Type declaration
(`v`): `void`
##### Parameters
| Name | Type |
| :------ | :------ |
| `v` | `V` |
##### Returns
`void`
___
### onUpdate
`Optional` **onUpdate**: (`v`: `V`) => `void`
#### Type declaration
(`v`): `void`
##### Parameters
| Name | Type |
| :------ | :------ |
| `v` | `V` |
##### Returns
`void`
___
### to
**to**: `V`
---
url: /auto-docs/core/modules/Bounds.md
---
# Namespace: Bounds
## Table of contents
### Functions
- [applyMatrix](../functions/Bounds.applyMatrix.md)
- [getBottomCenter](../functions/Bounds.getBottomCenter.md)
- [getBottomLeft](../functions/Bounds.getBottomLeft.md)
- [getBottomRight](../functions/Bounds.getBottomRight.md)
- [getBounds](../functions/Bounds.getBounds.md)
- [getCenter](../functions/Bounds.getCenter.md)
- [getLeftCenter](../functions/Bounds.getLeftCenter.md)
- [getLeftPointFromBounds](../functions/Bounds.getLeftPointFromBounds.md)
- [getPointWithMatrix](../functions/Bounds.getPointWithMatrix.md)
- [getRightCenter](../functions/Bounds.getRightCenter.md)
- [getTopCenter](../functions/Bounds.getTopCenter.md)
- [getTopLeft](../functions/Bounds.getTopLeft.md)
- [getTopPointFromBounds](../functions/Bounds.getTopPointFromBounds.md)
- [getTopRight](../functions/Bounds.getTopRight.md)
---
url: /auto-docs/core/modules/Command.md
---
# Namespace: Command
## Table of contents
### Enumerations
- [Default](../enums/Command.Default.md)
### Functions
- [is](../functions/Command.is.md)
---
url: /auto-docs/core/modules/EditorState.md
---
# Namespace: EditorState
## Table of contents
### Variables
- [STATE\_GRAB](../variables/EditorState.STATE_GRAB.md)
- [STATE\_MOUSE\_FRIENDLY\_SELECT](../variables/EditorState.STATE_MOUSE_FRIENDLY_SELECT.md)
- [STATE\_SELECT](../variables/EditorState.STATE_SELECT.md)
---
url: /auto-docs/core/modules/Entity.md
---
# Namespace: Entity
## Table of contents
### Functions
- [checkDataChanged](../functions/Entity.checkDataChanged.md)
- [getType](../functions/Entity.getType.md)
- [isRegistryOf](../functions/Entity.isRegistryOf.md)
---
url: /auto-docs/core/modules/MouseTouchEvent.md
---
# Namespace: MouseTouchEvent
Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
SPDX-License-Identifier: MIT
## Table of contents
### Functions
- [getEventCoord](../functions/MouseTouchEvent.getEventCoord.md)
- [isTouchEvent](../functions/MouseTouchEvent.isTouchEvent.md)
- [onTouched](../functions/MouseTouchEvent.onTouched.md)
- [preventDefault](../functions/MouseTouchEvent.preventDefault.md)
- [touchToMouseEvent](../functions/MouseTouchEvent.touchToMouseEvent.md)
---
url: /auto-docs/core/modules/PlaygroundDrag.md
---
# Namespace: PlaygroundDrag
## Table of contents
### Functions
- [startDrag](../functions/PlaygroundDrag.startDrag.md)
---
url: /auto-docs/core/modules/PlaygroundMockTools.md
---
# Namespace: PlaygroundMockTools
画布测试工具
**`Example`**
```ts
监听 layer 的执行
const layerState = PlaygroundMockTools.createLayerTestState(PlaygroundLayer)
layerState.playground.ready()
expect(layerState.onReady.mock.calls.length).toEqual(1)
expect(layerState.autorun.mock.calls.length).toEqual(1)
layerState.playground.config.updateConfig({
scrollX: 100
})
expect(layerState.onReady.mock.calls.length).toEqual(1)
expect(layerState.autorun.mock.calls.length).toEqual(2)
```
## Table of contents
### Classes
- [LayerTestState](../classes/PlaygroundMockTools.LayerTestState.md)
### Functions
- [createContainer](../functions/PlaygroundMockTools.createContainer.md)
- [createLayerTestState](../functions/PlaygroundMockTools.createLayerTestState.md)
- [createPlayground](../functions/PlaygroundMockTools.createPlayground.md)
- [getLayerTestState](../functions/PlaygroundMockTools.getLayerTestState.md)
---
url: /auto-docs/core/modules/SizeSchema.md
---
# Namespace: SizeSchema
## Table of contents
### Functions
- [coverSize](../functions/SizeSchema.coverSize.md)
- [empty](../functions/SizeSchema.empty.md)
- [fixSize](../functions/SizeSchema.fixSize.md)
---
url: /auto-docs/core/modules/TransformData.md
---
# Namespace: TransformData
## Table of contents
### Functions
- [isParentOrChildrenTransform](../functions/TransformData.isParentOrChildrenTransform.md)
---
url: /auto-docs/core/modules/TransformSchema.md
---
# Namespace: TransformSchema
## Table of contents
### Functions
- [createDefault](../functions/TransformSchema.createDefault.md)
- [getDelta](../functions/TransformSchema.getDelta.md)
- [is](../functions/TransformSchema.is.md)
- [mergeDelta](../functions/TransformSchema.mergeDelta.md)
- [toJSON](../functions/TransformSchema.toJSON.md)
---
url: /auto-docs/core/types/Cursors.md
---
# Type alias: Cursors
**Cursors**: `Record`\<`string`, `string`\>
---
url: /auto-docs/core/types/EntityDataInjector.md
---
# Type alias: EntityDataInjector
**EntityDataInjector**: \() => `OPTS`
#### Type declaration
\<`OPTS`\>(): `OPTS`
##### Type parameters
| Name | Type |
| :------ | :------ |
| `OPTS` | extends `Object` = {} |
##### Returns
`OPTS`
---
url: /auto-docs/core/types/EntityDataProps.md
---
# Type alias: EntityDataProps\
**EntityDataProps**\<`E`\>: `E`[``"data"``]
#### Type parameters
| Name | Type |
| :------ | :------ |
| `E` | extends [`EntityData`](../classes/EntityData.md) |
---
url: /auto-docs/core/types/OpacitySchema.md
---
# Type alias: OpacitySchema
**OpacitySchema**: `number`
Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
SPDX-License-Identifier: MIT
---
url: /auto-docs/core/types/PipeEventName.md
---
# Type alias: PipeEventName
**PipeEventName**: `string`
---
url: /auto-docs/core/types/PipeSupportEvent.md
---
# Type alias: PipeSupportEvent
**PipeSupportEvent**: `MouseEvent` \| `DragEvent` \| `KeyboardEvent` \| `UIEvent` \| `TouchEvent` \| `any`
---
url: /auto-docs/core/types/PipelineEventHandler.md
---
# Type alias: PipelineEventHandler
**PipelineEventHandler**: (`event`: [`PipeSupportEvent`](./PipeSupportEvent.md)) => `boolean` \| `undefined`
#### Type declaration
(`event`): `boolean` \| `undefined`
##### Parameters
| Name | Type |
| :------ | :------ |
| `event` | [`PipeSupportEvent`](./PipeSupportEvent.md) |
##### Returns
`boolean` \| `undefined`
---
url: /auto-docs/core/types/PipelineLayerFactory.md
---
# Type alias: PipelineLayerFactory
**PipelineLayerFactory**: (`layerRegistry`: [`LayerRegistry`](../interfaces/LayerRegistry.md), `layerOptions?`: `any`) => [`Layer`](../classes/Layer.md)
#### Type declaration
(`layerRegistry`, `layerOptions?`): [`Layer`](../classes/Layer.md)
##### Parameters
| Name | Type |
| :------ | :------ |
| `layerRegistry` | [`LayerRegistry`](../interfaces/LayerRegistry.md) |
| `layerOptions?` | `any` |
##### Returns
[`Layer`](../classes/Layer.md)
---
url: /auto-docs/core/types/PlaygroundContext.md
---
# Type alias: PlaygroundContext
**PlaygroundContext**: `any`
---
url: /auto-docs/core/types/PlaygroundContextProvider.md
---
# Type alias: PlaygroundContextProvider
**PlaygroundContextProvider**: () => `any`
#### Type declaration
(): `any`
##### Returns
`any`
---
url: /auto-docs/core/types/PlaygroundInteractiveType.md
---
# Type alias: PlaygroundInteractiveType
**PlaygroundInteractiveType**: ``"MOUSE"`` \| ``"PAD"``
MOUSE: 鼠标友好模式，鼠标左键拖动画布，滚动缩放 (适合 windows )
PAD: 双指同向移动拖动，双指张开捏合缩放 (适合 mac)
---
url: /auto-docs/core/types/PlaygroundScrollLimitFn.md
---
# Type alias: PlaygroundScrollLimitFn
**PlaygroundScrollLimitFn**: (`scroll`: \{ `scrollX`: `number` ; `scrollY`: `number` }) => \{ `scrollX`: `number` ; `scrollY`: `number` }
#### Type declaration
(`scroll`): `Object`
##### Parameters
| Name | Type |
| :------ | :------ |
| `scroll` | `Object` |
| `scroll.scrollX` | `number` |
| `scroll.scrollY` | `number` |
##### Returns
`Object`
| Name | Type |
| :------ | :------ |
| `scrollX` | `number` |
| `scrollY` | `number` |
---
url: /auto-docs/core/types/Plugin.md
---
# Type alias: Plugin\
**Plugin**\<`Options`\>: `Object`
#### Type parameters
| Name | Type |
| :------ | :------ |
| `Options` | `any` |
#### Type declaration
| Name | Type |
| :------ | :------ |
| `containerModules?` | `interfaces.ContainerModule`[] |
| `contributionKeys?` | `interfaces.ServiceIdentifier`[] |
| `initPlugin` | () => `void` |
| `options` | `Options` |
| `pluginId` | `string` |
| `singleton` | `boolean` |
---
url: /auto-docs/core/types/PluginCreator.md
---
# Type alias: PluginCreator\
**PluginCreator**\<`Options`\>: (`opts`: `Options`) => [`Plugin`](../variables/Plugin-1.md)\<`Options`\>
#### Type parameters
| Name |
| :------ |
| `Options` |
#### Type declaration
(`opts`): [`Plugin`](../variables/Plugin-1.md)\<`Options`\>
##### Parameters
| Name | Type |
| :------ | :------ |
| `opts` | `Options` |
##### Returns
[`Plugin`](../variables/Plugin-1.md)\<`Options`\>
---
url: /auto-docs/core/types/ProtectWheelArea.md
---
# Type alias: ProtectWheelArea
**ProtectWheelArea**: (`dom`: `Element`) => `boolean`
#### Type declaration
(`dom`): `boolean`
##### Parameters
| Name | Type |
| :------ | :------ |
| `dom` | `Element` |
##### Returns
`boolean`
---
url: /auto-docs/core/types/RotationSchema.md
---
# Type alias: RotationSchema
**RotationSchema**: `number`
---
url: /auto-docs/core/variables/ClipboardService-1.md
---
# Variable: ClipboardService
`Const` **ClipboardService**: typeof [`ClipboardService`](./ClipboardService-1.md)
---
url: /auto-docs/core/variables/CommandService-1.md
---
# Variable: CommandService
`Const` **CommandService**: unique `symbol`
Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
SPDX-License-Identifier: MIT
---
url: /auto-docs/core/variables/ContributionProvider-1.md
---
# Variable: ContributionProvider
`Const` **ContributionProvider**: unique `symbol`
Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
SPDX-License-Identifier: MIT
---
url: /auto-docs/core/variables/EDITOR_STATE_DEFAULTS.md
---
# Variable: EDITOR\_STATE\_DEFAULTS
`Const` **EDITOR\_STATE\_DEFAULTS**: [`EditorState`](../interfaces/EditorState-1.md)[]
---
url: /auto-docs/core/variables/ENTITIES_BY_DATA_DECO_KEY.md
---
# Variable: ENTITIES\_BY\_DATA\_DECO\_KEY
`Const` **ENTITIES\_BY\_DATA\_DECO\_KEY**: typeof [`ENTITIES_BY_DATA_DECO_KEY`](./ENTITIES_BY_DATA_DECO_KEY.md)
---
url: /auto-docs/core/variables/ENTITIES_DECO_KEY.md
---
# Variable: ENTITIES\_DECO\_KEY
`Const` **ENTITIES\_DECO\_KEY**: typeof [`ENTITIES_DECO_KEY`](./ENTITIES_DECO_KEY.md)
---
url: /auto-docs/core/variables/EditorState.STATE_GRAB.md
---
# Variable: STATE\_GRAB
[EditorState](../modules/EditorState.md).STATE_GRAB
`Const` **STATE\_GRAB**: [`EditorState`](../interfaces/EditorState-1.md)
---
url: /auto-docs/core/variables/EditorState.STATE_MOUSE_FRIENDLY_SELECT.md
---
# Variable: STATE\_MOUSE\_FRIENDLY\_SELECT
[EditorState](../modules/EditorState.md).STATE_MOUSE_FRIENDLY_SELECT
`Const` **STATE\_MOUSE\_FRIENDLY\_SELECT**: [`EditorState`](../interfaces/EditorState-1.md)
鼠标友好模式状态
---
url: /auto-docs/core/variables/EditorState.STATE_SELECT.md
---
# Variable: STATE\_SELECT
[EditorState](../modules/EditorState.md).STATE_SELECT
`Const` **STATE\_SELECT**: [`EditorState`](../interfaces/EditorState-1.md)
---
url: /auto-docs/core/variables/EntityManagerContribution-1.md
---
# Variable: EntityManagerContribution
`Const` **EntityManagerContribution**: typeof [`EntityManagerContribution`](./EntityManagerContribution-1.md)
---
url: /auto-docs/core/variables/FLUSH_LAYER_REQUEST.md
---
# Variable: FLUSH\_LAYER\_REQUEST
`Const` **FLUSH\_LAYER\_REQUEST**: ``"flush-layer-request"``
---
url: /auto-docs/core/variables/LayerOptions-1.md
---
# Variable: LayerOptions
**LayerOptions**: typeof [`LayerOptions`](./LayerOptions-1.md)
---
url: /auto-docs/core/variables/LazyInjectContext.md
---
# Variable: LazyInjectContext
`Const` **LazyInjectContext**: typeof [`LazyInjectContext`](./LazyInjectContext.md)
---
url: /auto-docs/core/variables/OpacitySchemaDecoration.md
---
# Variable: OpacitySchemaDecoration
`Const` **OpacitySchemaDecoration**: `SchemaDecoration`\<[`OpacitySchema`](../types/OpacitySchema.md)\>
---
url: /auto-docs/core/variables/OriginSchemaDecoration.md
---
# Variable: OriginSchemaDecoration
`Const` **OriginSchemaDecoration**: `SchemaDecoration`\<[`OriginSchema`](../interfaces/OriginSchema.md)\>
---
url: /auto-docs/core/variables/PipelineLayerFactory-1.md
---
# Variable: PipelineLayerFactory
`Const` **PipelineLayerFactory**: typeof [`PipelineLayerFactory`](./PipelineLayerFactory-1.md)
---
url: /auto-docs/core/variables/PlaygroundConfig-1.md
---
# Variable: PlaygroundConfig
`Const` **PlaygroundConfig**: typeof [`PlaygroundConfig`](./PlaygroundConfig-1.md)
---
url: /auto-docs/core/variables/PlaygroundContainerFactory-1.md
---
# Variable: PlaygroundContainerFactory
`Const` **PlaygroundContainerFactory**: typeof [`PlaygroundContainerFactory`](./PlaygroundContainerFactory-1.md)
---
url: /auto-docs/core/variables/PlaygroundContainerModule.md
---
# Variable: PlaygroundContainerModule
`Const` **PlaygroundContainerModule**: `ContainerModule`
---
url: /auto-docs/core/variables/PlaygroundContext-1.md
---
# Variable: PlaygroundContext
`Const` **PlaygroundContext**: typeof [`PlaygroundContext`](./PlaygroundContext-1.md)
会被注入到 layer 层，可以在使用的时候替换它
---
url: /auto-docs/core/variables/PlaygroundContextProvider-1.md
---
# Variable: PlaygroundContextProvider
`Const` **PlaygroundContextProvider**: typeof [`PlaygroundContextProvider`](./PlaygroundContextProvider-1.md)
---
url: /auto-docs/core/variables/PlaygroundContribution-1.md
---
# Variable: PlaygroundContribution
`Const` **PlaygroundContribution**: typeof [`PlaygroundContribution`](./PlaygroundContribution-1.md)
---
url: /auto-docs/core/variables/PlaygroundEntityContext.md
---
# Variable: PlaygroundEntityContext
`Const` **PlaygroundEntityContext**: `Context`\<`any`\>
当前 entity
---
url: /auto-docs/core/variables/PlaygroundReactContainerContext.md
---
# Variable: PlaygroundReactContainerContext
`Const` **PlaygroundReactContainerContext**: `Context`\<`any`\>
---
url: /auto-docs/core/variables/PlaygroundReactContext.md
---
# Variable: PlaygroundReactContext
`Const` **PlaygroundReactContext**: `Context`\<`any`\>
---
url: /auto-docs/core/variables/PlaygroundReactRefContext.md
---
# Variable: PlaygroundReactRefContext
`Const` **PlaygroundReactRefContext**: `Context`\<`any`\>
---
url: /auto-docs/core/variables/Plugin-1.md
---
# Variable: Plugin
`Const` **Plugin**: typeof [`Plugin`](./Plugin-1.md)
---
url: /auto-docs/core/variables/PluginContext-1.md
---
# Variable: PluginContext
**PluginContext**: typeof [`PluginContext`](./PluginContext-1.md)
---
url: /auto-docs/core/variables/PositionSchemaDecoration.md
---
# Variable: PositionSchemaDecoration
`Const` **PositionSchemaDecoration**: `SchemaDecoration`\<[`PositionSchema`](../interfaces/PositionSchema.md)\>
---
url: /auto-docs/core/variables/ProtectWheelArea-1.md
---
# Variable: ProtectWheelArea
`Const` **ProtectWheelArea**: typeof [`ProtectWheelArea`](./ProtectWheelArea-1.md)
保护区域不被画布劫持滚动事件
---
url: /auto-docs/core/variables/RotationSchemaDecoration.md
---
# Variable: RotationSchemaDecoration
`Const` **RotationSchemaDecoration**: `SchemaDecoration`\<[`RotationSchema`](../types/RotationSchema.md)\>
---
url: /auto-docs/core/variables/SCALE_WIDTH.md
---
# Variable: SCALE\_WIDTH
`Const` **SCALE\_WIDTH**: ``0``
---
url: /auto-docs/core/variables/ScaleSchemaDecoration.md
---
# Variable: ScaleSchemaDecoration
`Const` **ScaleSchemaDecoration**: `SchemaDecoration`\<[`ScaleSchema`](../interfaces/ScaleSchema.md)\>
---
url: /auto-docs/core/variables/SizeSchemaDecoration.md
---
# Variable: SizeSchemaDecoration
`Const` **SizeSchemaDecoration**: `SchemaDecoration`\<[`SizeSchema`](../interfaces/SizeSchema-1.md)\>
---
url: /auto-docs/core/variables/SkewSchemaDecoration.md
---
# Variable: SkewSchemaDecoration
`Const` **SkewSchemaDecoration**: `SchemaDecoration`\<[`SkewSchema`](../interfaces/SkewSchema.md)\>
---
url: /auto-docs/core/variables/StorageService-1.md
---
# Variable: StorageService
`Const` **StorageService**: typeof [`StorageService`](./StorageService-1.md)
---
url: /auto-docs/core/variables/TransformSchemaDecoration.md
---
# Variable: TransformSchemaDecoration
`Const` **TransformSchemaDecoration**: `SchemaDecoration`\<[`TransformSchema`](../interfaces/TransformSchema-1.md)\>
---
url: /auto-docs/document/classes/FlowDocument.md
---
# Class: FlowDocument\
流程整个文档数据
## Type parameters
| Name | Type |
| :------ | :------ |
| `T` | [`FlowDocumentJSON`](../types/FlowDocumentJSON.md) |
## Implements
- `Disposable`
## Table of contents
### Constructors
- [constructor](./FlowDocument.md#constructor)
### Properties
- [config](./FlowDocument.md#config)
- [onLayoutChange](./FlowDocument.md#onlayoutchange)
- [onNodeCreate](./FlowDocument.md#onnodecreate)
- [onNodeDispose](./FlowDocument.md#onnodedispose)
- [onNodeUpdate](./FlowDocument.md#onnodeupdate)
- [options](./FlowDocument.md#options)
- [originTree](./FlowDocument.md#origintree)
- [renderState](./FlowDocument.md#renderstate)
- [renderTree](./FlowDocument.md#rendertree)
- [root](./FlowDocument.md#root)
- [transformer](./FlowDocument.md#transformer)
### Accessors
- [disposed](./FlowDocument.md#disposed)
- [layout](./FlowDocument.md#layout)
- [loading](./FlowDocument.md#loading)
- [size](./FlowDocument.md#size)
### Methods
- [addBlock](./FlowDocument.md#addblock)
- [addBlocksAsChildren](./FlowDocument.md#addblocksaschildren)
- [addFromNode](./FlowDocument.md#addfromnode)
- [addInlineBlocks](./FlowDocument.md#addinlineblocks)
- [addNode](./FlowDocument.md#addnode)
- [dispose](./FlowDocument.md#dispose)
- [fireRender](./FlowDocument.md#firerender)
- [fromJSON](./FlowDocument.md#fromjson)
- [getAllNodes](./FlowDocument.md#getallnodes)
- [getNode](./FlowDocument.md#getnode)
- [getNodeRegister](./FlowDocument.md#getnoderegister)
- [getNodeRegistry](./FlowDocument.md#getnoderegistry)
- [getRenderDatas](./FlowDocument.md#getrenderdatas)
- [hasNode](./FlowDocument.md#hasnode)
- [init](./FlowDocument.md#init)
- [isExtend](./FlowDocument.md#isextend)
- [isTypeOrExtendType](./FlowDocument.md#istypeorextendtype)
- [load](./FlowDocument.md#load)
- [moveChildNodes](./FlowDocument.md#movechildnodes)
- [moveNodes](./FlowDocument.md#movenodes)
- [registerFlowNodes](./FlowDocument.md#registerflownodes)
- [registerLayout](./FlowDocument.md#registerlayout)
- [registerNodeDatas](./FlowDocument.md#registernodedatas)
- [removeNode](./FlowDocument.md#removenode)
- [setLayout](./FlowDocument.md#setlayout)
- [toJSON](./FlowDocument.md#tojson)
- [toNodeJSON](./FlowDocument.md#tonodejson)
- [toString](./FlowDocument.md#tostring)
- [toggleFixedLayout](./FlowDocument.md#togglefixedlayout)
- [traverse](./FlowDocument.md#traverse)
## Constructors
### constructor
**new FlowDocument**\<`T`\>()
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | [`FlowDocumentJSON`](../types/FlowDocumentJSON.md) |
## Properties
### config
`Readonly` **config**: [`FlowDocumentConfig`](./FlowDocumentConfig.md)
___
### onLayoutChange
`Readonly` **onLayoutChange**: `Event`\<[`FlowLayout`](../variables/FlowLayout-1.md)\>
___
### onNodeCreate
`Readonly` **onNodeCreate**: `Event`\<\{ `data`: [`FlowNodeJSON`](../interfaces/FlowNodeJSON.md) ; `json`: [`FlowNodeJSON`](../interfaces/FlowNodeJSON.md) ; `node`: [`FlowNodeEntity`](./FlowNodeEntity-1.md) }\>
___
### onNodeDispose
`Readonly` **onNodeDispose**: `Event`\<\{ `node`: [`FlowNodeEntity`](./FlowNodeEntity-1.md) }\>
___
### onNodeUpdate
`Readonly` **onNodeUpdate**: `Event`\<\{ `data`: [`FlowNodeJSON`](../interfaces/FlowNodeJSON.md) ; `json`: [`FlowNodeJSON`](../interfaces/FlowNodeJSON.md) ; `node`: [`FlowNodeEntity`](./FlowNodeEntity-1.md) }\>
___
### options
**options**: [`FlowDocumentOptions`](../variables/FlowDocumentOptions-1.md)
流程画布配置项
___
### originTree
**originTree**: [`FlowVirtualTree`](./FlowVirtualTree-1.md)\<[`FlowNodeEntity`](./FlowNodeEntity-1.md)\>
原始的 tree 结构
___
### renderState
**renderState**: [`FlowRendererStateEntity`](./FlowRendererStateEntity.md)
渲染相关的全局轧辊台
___
### renderTree
**renderTree**: `FlowRenderTree`\<[`FlowNodeEntity`](./FlowNodeEntity-1.md)\>
渲染后的 tree 结构
___
### root
**root**: [`FlowNodeEntity`](./FlowNodeEntity-1.md)
___
### transformer
**transformer**: [`FlowDocumentTransformerEntity`](./FlowDocumentTransformerEntity.md)
## Accessors
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
___
### layout
`get` **layout**(): [`FlowLayout`](../variables/FlowLayout-1.md)
#### Returns
[`FlowLayout`](../variables/FlowLayout-1.md)
___
### loading
`get` **loading**(): `boolean`
#### Returns
`boolean`
___
### size
`get` **size**(): `number`
#### Returns
`number`
## Methods
### addBlock
**addBlock**(`target`, `blockData`, `addedNodes?`, `parent?`, `index?`): [`FlowNodeEntity`](./FlowNodeEntity-1.md)
添加单个 block
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `target` | `string` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md) | |
| `blockData` | [`FlowNodeJSON`](../interfaces/FlowNodeJSON.md) | |
| `addedNodes?` | [`FlowNodeEntity`](./FlowNodeEntity-1.md)[] | |
| `parent?` | [`FlowNodeEntity`](./FlowNodeEntity-1.md) | 默认去找 $inlineBlocks$ |
| `index?` | `number` | - |
#### Returns
[`FlowNodeEntity`](./FlowNodeEntity-1.md)
___
### addBlocksAsChildren
**addBlocksAsChildren**(`parent`, `blocks`, `addedNodes?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `parent` | [`FlowNodeEntity`](./FlowNodeEntity-1.md) |
| `blocks` | [`FlowNodeJSON`](../interfaces/FlowNodeJSON.md)[] |
| `addedNodes?` | [`FlowNodeEntity`](./FlowNodeEntity-1.md)[] |
#### Returns
`void`
___
### addFromNode
**addFromNode**(`fromNode`, `json`): [`FlowNodeEntity`](./FlowNodeEntity-1.md)
从指定节点的下一个节点新增
#### Parameters
| Name | Type |
| :------ | :------ |
| `fromNode` | `string` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md) |
| `json` | [`FlowNodeJSON`](../interfaces/FlowNodeJSON.md) |
#### Returns
[`FlowNodeEntity`](./FlowNodeEntity-1.md)
___
### addInlineBlocks
**addInlineBlocks**(`node`, `blocks`, `addedNodes?`): [`FlowNodeEntity`](./FlowNodeEntity-1.md)[]
block 格式：
node: (最原始的 id)
blockIcon
inlineBlocks
block
blockOrderIcon
block
blockOrderIcon
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `node` | [`FlowNodeEntity`](./FlowNodeEntity-1.md) | `undefined` |
| `blocks` | [`FlowNodeJSON`](../interfaces/FlowNodeJSON.md)[] | `undefined` |
| `addedNodes` | [`FlowNodeEntity`](./FlowNodeEntity-1.md)[] | `[]` |
#### Returns
[`FlowNodeEntity`](./FlowNodeEntity-1.md)[]
___
### addNode
**addNode**(`data`, `addedNodes?`): [`FlowNodeEntity`](./FlowNodeEntity-1.md)
添加节点，如果节点已经存在则不会重复创建
#### Parameters
| Name | Type |
| :------ | :------ |
| `data` | [`AddNodeData`](../types/AddNodeData.md) |
| `addedNodes?` | [`FlowNodeEntity`](./FlowNodeEntity-1.md)[] |
#### Returns
[`FlowNodeEntity`](./FlowNodeEntity-1.md)
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Implementation of
Disposable.dispose
___
### fireRender
**fireRender**(): `void`
触发 render
#### Returns
`void`
___
### fromJSON
**fromJSON**(`json`, `fireRender?`): `void`
加载数据，可以被重载
#### Parameters
| Name | Type | Default value | Description |
| :------ | :------ | :------ | :------ |
| `json` | `any` | `undefined` | 文档数据更新 |
| `fireRender` | `boolean` | `true` | 是否要触发渲染，默认 true |
#### Returns
`void`
___
### getAllNodes
**getAllNodes**(): [`FlowNodeEntity`](./FlowNodeEntity-1.md)[]
#### Returns
[`FlowNodeEntity`](./FlowNodeEntity-1.md)[]
___
### getNode
**getNode**(`id`): `undefined` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md)
根据 id 获取节点
#### Parameters
| Name | Type |
| :------ | :------ |
| `id` | `string` |
#### Returns
`undefined` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md)
___
### getNodeRegister
**getNodeRegister**\<`T`\>(`type`, `originParent?`): `T`
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`FlowNodeRegistry`](../interfaces/FlowNodeRegistry-1.md)\<[`FlowNodeMeta`](../interfaces/FlowNodeMeta.md), `T`\> = [`FlowNodeRegistry`](../interfaces/FlowNodeRegistry-1.md)\<[`FlowNodeMeta`](../interfaces/FlowNodeMeta.md)\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `type` | [`FlowNodeType`](../types/FlowNodeType.md) |
| `originParent?` | [`FlowNodeEntity`](./FlowNodeEntity-1.md) |
#### Returns
`T`
**`Deprecated`**
use `getNodeRegistry` instead
___
### getNodeRegistry
**getNodeRegistry**\<`T`\>(`type`, `originParent?`): `T`
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`FlowNodeRegistry`](../interfaces/FlowNodeRegistry-1.md)\<[`FlowNodeMeta`](../interfaces/FlowNodeMeta.md), `T`\> = [`FlowNodeRegistry`](../interfaces/FlowNodeRegistry-1.md)\<[`FlowNodeMeta`](../interfaces/FlowNodeMeta.md)\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `type` | [`FlowNodeType`](../types/FlowNodeType.md) |
| `originParent?` | [`FlowNodeEntity`](./FlowNodeEntity-1.md) |
#### Returns
`T`
___
### getRenderDatas
**getRenderDatas**\<`T`\>(`dataRegistry`, `containHiddenNodes?`): `T`[]
返回需要渲染的数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `EntityData`\<`any`, {}, `T`\> |
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `dataRegistry` | `EntityDataRegistry`\<`T`\> | `undefined` |
| `containHiddenNodes` | `boolean` | `true` |
#### Returns
`T`[]
___
### hasNode
**hasNode**(`nodeId`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `nodeId` | `string` |
#### Returns
`boolean`
___
### init
**init**(): `void`
#### Returns
`void`
___
### isExtend
**isExtend**(`currentType`, `extendType`): `boolean`
Check node extend
#### Parameters
| Name | Type |
| :------ | :------ |
| `currentType` | [`FlowNodeType`](../types/FlowNodeType.md) |
| `extendType` | [`FlowNodeType`](../types/FlowNodeType.md) |
#### Returns
`boolean`
___
### isTypeOrExtendType
**isTypeOrExtendType**(`currentType`, `extendType`): `boolean`
Check node type
#### Parameters
| Name | Type |
| :------ | :------ |
| `currentType` | [`FlowNodeType`](../types/FlowNodeType.md) |
| `extendType` | [`FlowNodeType`](../types/FlowNodeType.md) |
#### Returns
`boolean`
___
### load
**load**(): `Promise`\<`void`\>
#### Returns
`Promise`\<`void`\>
___
### moveChildNodes
**moveChildNodes**(`param0`): `void`
移动子节点
#### Parameters
| Name | Type |
| :------ | :------ |
| `param0` | `Object` |
| `param0.nodeIds` | `string`[] |
| `param0.toIndex` | `number` |
| `param0.toParentId` | `string` |
#### Returns
`void`
___
### moveNodes
**moveNodes**(`param0`): `void`
移动节点
#### Parameters
| Name | Type |
| :------ | :------ |
| `param0` | `Object` |
| `param0.dropNodeId` | `string` |
| `param0.inside?` | `boolean` |
| `param0.sortNodeIds` | `string`[] |
#### Returns
`void`
___
### registerFlowNodes
**registerFlowNodes**\<`T`\>(`...registries`): `void`
注册节点
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`FlowNodeRegistry`](../interfaces/FlowNodeRegistry-1.md)\<`any`, `T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `...registries` | `T`[] |
#### Returns
`void`
___
### registerLayout
**registerLayout**(`layout`): `void`
注册布局
#### Parameters
| Name | Type |
| :------ | :------ |
| `layout` | [`FlowLayout`](../variables/FlowLayout-1.md) |
#### Returns
`void`
___
### registerNodeDatas
**registerNodeDatas**(`...nodeDatas`): `void`
节点注入数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `...nodeDatas` | `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[] |
#### Returns
`void`
___
### removeNode
**removeNode**(`node`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `string` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md) |
#### Returns
`void`
___
### setLayout
**setLayout**(`layoutKey`): `void`
更新布局
#### Parameters
| Name | Type |
| :------ | :------ |
| `layoutKey` | `string` |
#### Returns
`void`
___
### toJSON
**toJSON**(): `any`
导出数据，可以重载
#### Returns
`any`
___
### toNodeJSON
**toNodeJSON**(`node`): [`FlowNodeJSON`](../interfaces/FlowNodeJSON.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | [`FlowNodeEntity`](./FlowNodeEntity-1.md) |
#### Returns
[`FlowNodeJSON`](../interfaces/FlowNodeJSON.md)
___
### toString
**toString**(`showType?`): `string`
#### Parameters
| Name | Type |
| :------ | :------ |
| `showType?` | `boolean` |
#### Returns
`string`
___
### toggleFixedLayout
**toggleFixedLayout**(): `void`
切换垂直或水平布局
#### Returns
`void`
___
### traverse
**traverse**(`fn`, `node?`, `depth?`): `boolean` \| `void`
traverse all nodes, O(n)
R
|
+---1
| |
| +---1.1
| |
| +---1.2
| |
| +---1.3
| | |
| | +---1.3.1
| | |
| | +---1.3.2
| |
| +---1.4
|
+---2
|
+---2.1
sort: [1, 1.1, 1.2, 1.3, 1.3.1, 1.3.2, 1.4, 2, 2.1]
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `fn` | (`node`: [`FlowNodeEntity`](./FlowNodeEntity-1.md), `depth`: `number`, `index`: `number`) => `boolean` \| `void` | `undefined` |
| `node` | [`FlowNodeEntity`](./FlowNodeEntity-1.md) | `undefined` |
| `depth` | `number` | `0` |
#### Returns
`boolean` \| `void`
isBreak
---
url: /auto-docs/document/classes/FlowDocumentConfig.md
---
# Class: FlowDocumentConfig
用于文档扩展配置
## Table of contents
### Constructors
- [constructor](./FlowDocumentConfig.md#constructor)
### Properties
- [onChange](./FlowDocumentConfig.md#onchange)
### Methods
- [get](./FlowDocumentConfig.md#get)
- [registerConfigs](./FlowDocumentConfig.md#registerconfigs)
- [set](./FlowDocumentConfig.md#set)
## Constructors
### constructor
**new FlowDocumentConfig**(`_data?`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `_data` | `Record`\<`string`, `any`\> |
## Properties
### onChange
`Readonly` **onChange**: `Event`\<`string`\>
## Methods
### get
**get**(`key`): `any`
#### Parameters
| Name | Type |
| :------ | :------ |
| `key` | `string` |
#### Returns
`any`
___
### registerConfigs
**registerConfigs**(`config`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `config` | `Record`\<`string`, `any`\> |
#### Returns
`void`
___
### set
**set**(`key`, `value`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `key` | `string` |
| `value` | `any` |
#### Returns
`void`
---
url: /auto-docs/document/classes/FlowDocumentTransformerEntity.md
---
# Class: FlowDocumentTransformerEntity
用于通知所有 layer 更新
## Hierarchy
- `ConfigEntity`\<\{ `loading`: `boolean` ; `treeVersion`: `number` }, `FlowDocumentTransformerEntityConfig`\>
↳ **`FlowDocumentTransformerEntity`**
## Table of contents
### Constructors
- [constructor](./FlowDocumentTransformerEntity.md#constructor)
### Properties
- [\_\_opts\_type\_\_](./FlowDocumentTransformerEntity.md#__opts_type__)
- [document](./FlowDocumentTransformerEntity.md#document)
- [entityManager](./FlowDocumentTransformerEntity.md#entitymanager)
- [onDataChange](./FlowDocumentTransformerEntity.md#ondatachange)
- [onEntityChange](./FlowDocumentTransformerEntity.md#onentitychange)
- [onRefresh](./FlowDocumentTransformerEntity.md#onrefresh)
- [preDispose](./FlowDocumentTransformerEntity.md#predispose)
- [toDispose](./FlowDocumentTransformerEntity.md#todispose)
- [type](./FlowDocumentTransformerEntity.md#type)
### Accessors
- [config](./FlowDocumentTransformerEntity.md#config)
- [context](./FlowDocumentTransformerEntity.md#context)
- [disposed](./FlowDocumentTransformerEntity.md#disposed)
- [id](./FlowDocumentTransformerEntity.md#id)
- [loading](./FlowDocumentTransformerEntity.md#loading)
- [onDispose](./FlowDocumentTransformerEntity.md#ondispose)
- [savedInManager](./FlowDocumentTransformerEntity.md#savedinmanager)
- [type](./FlowDocumentTransformerEntity.md#type-1)
- [version](./FlowDocumentTransformerEntity.md#version)
### Methods
- [addData](./FlowDocumentTransformerEntity.md#adddata)
- [addInitializeData](./FlowDocumentTransformerEntity.md#addinitializedata)
- [checkChanged](./FlowDocumentTransformerEntity.md#checkchanged)
- [clear](./FlowDocumentTransformerEntity.md#clear)
- [dispose](./FlowDocumentTransformerEntity.md#dispose)
- [fromJSON](./FlowDocumentTransformerEntity.md#fromjson)
- [getData](./FlowDocumentTransformerEntity.md#getdata)
- [getDefaultConfig](./FlowDocumentTransformerEntity.md#getdefaultconfig)
- [getDefaultDataRegistries](./FlowDocumentTransformerEntity.md#getdefaultdataregistries)
- [getService](./FlowDocumentTransformerEntity.md#getservice)
- [hasData](./FlowDocumentTransformerEntity.md#hasdata)
- [isTreeDirty](./FlowDocumentTransformerEntity.md#istreedirty)
- [onConfigChanged](./FlowDocumentTransformerEntity.md#onconfigchanged)
- [refresh](./FlowDocumentTransformerEntity.md#refresh)
- [removeData](./FlowDocumentTransformerEntity.md#removedata)
- [reset](./FlowDocumentTransformerEntity.md#reset)
- [toJSON](./FlowDocumentTransformerEntity.md#tojson)
- [updateConfig](./FlowDocumentTransformerEntity.md#updateconfig)
- [updateData](./FlowDocumentTransformerEntity.md#updatedata)
- [updateTransformsTree](./FlowDocumentTransformerEntity.md#updatetransformstree)
## Constructors
### constructor
**new FlowDocumentTransformerEntity**(`conf`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `conf` | `FlowDocumentTransformerEntityConfig` |
#### Overrides
ConfigEntity\<
\{
loading: boolean;
treeVersion: number;
},
FlowDocumentTransformerEntityConfig
\>.constructor
## Properties
### \_\_opts\_type\_\_
**\_\_opts\_type\_\_**: `FlowDocumentTransformerEntityConfig`
#### Inherited from
ConfigEntity.\_\_opts\_type\_\_
___
### document
**document**: [`FlowDocument`](./FlowDocument.md)\<[`FlowDocumentJSON`](../types/FlowDocumentJSON.md)\>
___
### entityManager
`Readonly` **entityManager**: `EntityManager`
全局的entity管理器
#### Inherited from
ConfigEntity.entityManager
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<`EntityDataChangedEvent`\<`Entity`\<`EntityOpts`\>\>\>
数据更改事件
#### Inherited from
ConfigEntity.onDataChange
___
### onEntityChange
`Readonly` **onEntityChange**: `Event`\<`Entity`\<`EntityOpts`\>\>
修改会触发
#### Inherited from
ConfigEntity.onEntityChange
___
### onRefresh
`Readonly` **onRefresh**: `Event`\<`void`\>
___
### preDispose
`Readonly` **preDispose**: `DisposableCollection`
销毁前事件管理
#### Inherited from
ConfigEntity.preDispose
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
销毁事件管理
#### Inherited from
ConfigEntity.toDispose
___
### type
`Static` **type**: `string` = `'FlowDocumentTransformerEntity'`
#### Overrides
ConfigEntity.type
## Accessors
### config
`get` **config**(): `P`
#### Returns
`P`
#### Inherited from
ConfigEntity.config
___
### context
`get` **context**(): `any`
#### Returns
`any`
#### Inherited from
ConfigEntity.context
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
ConfigEntity.disposed
___
### id
`get` **id**(): `string`
实体 id
#### Returns
`string`
#### Inherited from
ConfigEntity.id
___
### loading
`get` **loading**(): `boolean`
#### Returns
`boolean`
`set` **loading**(`loading`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `loading` | `boolean` |
#### Returns
`void`
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
销毁事件
#### Returns
`Event`\<`void`\>
#### Inherited from
ConfigEntity.onDispose
___
### savedInManager
`get` **savedInManager**(): `boolean`
是否存到全局 manager，默认 true
#### Returns
`boolean`
#### Inherited from
ConfigEntity.savedInManager
___
### type
`get` **type**(): `string`
实体类型
#### Returns
`string`
#### Inherited from
ConfigEntity.type
___
### version
`get` **version**(): `number`
实体的版本
#### Returns
`number`
#### Inherited from
ConfigEntity.version
## Methods
### addData
**addData**\<`D`\>(`Registry`, `defaultProps?`): `D`
添加数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\> |
| `defaultProps?` | `EntityDataProps`\<`D`\> |
#### Returns
`D`
#### Inherited from
ConfigEntity.addData
___
### addInitializeData
**addInitializeData**(`datas`, `dataConfig?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `datas` | `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[] |
| `dataConfig?` | `any` |
#### Returns
`void`
#### Inherited from
ConfigEntity.addInitializeData
___
### checkChanged
**checkChanged**(`oldData`, `newData`): `boolean`
判断 config 数据是否变化
#### Parameters
| Name | Type |
| :------ | :------ |
| `oldData` | `Object` |
| `oldData.loading` | `boolean` |
| `oldData.treeVersion` | `number` |
| `newData` | `Partial`\<\{ `loading`: `boolean` ; `treeVersion`: `number` }\> |
#### Returns
`boolean`
#### Inherited from
ConfigEntity.checkChanged
___
### clear
**clear**(): `void`
#### Returns
`void`
___
### dispose
**dispose**(): `void`
销毁实体
#### Returns
`void`
#### Inherited from
ConfigEntity.dispose
___
### fromJSON
**fromJSON**(`data?`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data?` | `any` |
#### Returns
`void`
#### Inherited from
ConfigEntity.fromJSON
___
### getData
**getData**\<`D`\>(`Registry`): `D`
获取 data 数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`D`\> |
#### Returns
`D`
#### Inherited from
ConfigEntity.getData
___
### getDefaultConfig
**getDefaultConfig**(): `Object`
#### Returns
`Object`
| Name | Type |
| :------ | :------ |
| `loading` | `boolean` |
| `treeVersion` | `number` |
#### Overrides
ConfigEntity.getDefaultConfig
___
### getDefaultDataRegistries
**getDefaultDataRegistries**(): `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[]
默认初始化的 Data
#### Returns
`EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[]
#### Inherited from
ConfigEntity.getDefaultDataRegistries
___
### getService
**getService**\<`T`\>(`identifier`): `T`
获取 IOC 服务
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `identifier` | `ServiceIdentifier`\<`T`\> |
#### Returns
`T`
#### Inherited from
ConfigEntity.getService
___
### hasData
**hasData**(`Registry`): `boolean`
是否有指定数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\> |
#### Returns
`boolean`
#### Inherited from
ConfigEntity.hasData
___
### isTreeDirty
**isTreeDirty**(): `boolean`
#### Returns
`boolean`
___
### onConfigChanged
**onConfigChanged**(`fn`): `Disposable`
#### Parameters
| Name | Type |
| :------ | :------ |
| `fn` | (`data`: \{ `loading`: `boolean` ; `treeVersion`: `number` }) => `void` |
#### Returns
`Disposable`
#### Inherited from
ConfigEntity.onConfigChanged
___
### refresh
**refresh**(): `void`
刷新节点的相对偏移
#### Returns
`void`
___
### removeData
**removeData**\<`D`\>(`Registry`): `void`
删除数据，初始化状态注入的数据无法被删除
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`D`\> |
#### Returns
`void`
#### Inherited from
ConfigEntity.removeData
___
### reset
**reset**(): `void`
重制为初始化状态
#### Returns
`void`
#### Inherited from
ConfigEntity.reset
___
### toJSON
**toJSON**(): `any`
存储数据，用于持久化存储
#### Returns
`any`
#### Inherited from
ConfigEntity.toJSON
___
### updateConfig
**updateConfig**(`props`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | `Partial`\<\{ `loading`: `boolean` ; `treeVersion`: `number` }\> |
#### Returns
`void`
#### Inherited from
ConfigEntity.updateConfig
___
### updateData
**updateData**\<`D`\>(`Registry`, `props`): `void`
更新实体的数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`D`\> |
| `props` | `EntityDataProps`\<`D`\> |
#### Returns
`void`
#### Inherited from
ConfigEntity.updateData
___
### updateTransformsTree
**updateTransformsTree**(): `void`
更新矩阵结构 (这个只有在树结构变化时候才会触发，如：添加节点、删除节点、改变位置节点)
#### Returns
`void`
---
url: /auto-docs/document/classes/FlowDragService.md
---
# Class: FlowDragService
拖拽相关操作
外部实现抽象类
## Table of contents
### Constructors
- [constructor](./FlowDragService.md#constructor)
### Properties
- [onDrop](./FlowDragService.md#ondrop)
### Accessors
- [dragNodes](./FlowDragService.md#dragnodes)
- [dragStartNode](./FlowDragService.md#dragstartnode)
- [dragging](./FlowDragService.md#dragging)
- [dropNodeId](./FlowDragService.md#dropnodeid)
- [isDragBranch](./FlowDragService.md#isdragbranch)
- [labelSide](./FlowDragService.md#labelside)
- [nodeDragIdsWithChildren](./FlowDragService.md#nodedragidswithchildren)
- [renderState](./FlowDragService.md#renderstate)
### Methods
- [dropBranch](./FlowDragService.md#dropbranch)
- [dropCreateNode](./FlowDragService.md#dropcreatenode)
- [dropNode](./FlowDragService.md#dropnode)
- [isDroppableBranch](./FlowDragService.md#isdroppablebranch)
- [isDroppableNode](./FlowDragService.md#isdroppablenode)
## Constructors
### constructor
**new FlowDragService**()
## Properties
### onDrop
`Readonly` **onDrop**: `Event`\<\{ `dragJSON?`: [`FlowNodeJSON`](../interfaces/FlowNodeJSON.md) ; `dragNodes`: [`FlowNodeEntity`](./FlowNodeEntity-1.md)[] ; `dropNode`: [`FlowNodeEntity`](./FlowNodeEntity-1.md) }\>
## Accessors
### dragNodes
`get` **dragNodes**(): [`FlowNodeEntity`](./FlowNodeEntity-1.md)[]
#### Returns
[`FlowNodeEntity`](./FlowNodeEntity-1.md)[]
___
### dragStartNode
`get` **dragStartNode**(): [`FlowNodeEntity`](./FlowNodeEntity-1.md)
#### Returns
[`FlowNodeEntity`](./FlowNodeEntity-1.md)
___
### dragging
`get` **dragging**(): `boolean`
#### Returns
`boolean`
___
### dropNodeId
`get` **dropNodeId**(): `undefined` \| `string`
#### Returns
`undefined` \| `string`
___
### isDragBranch
`get` **isDragBranch**(): `boolean`
#### Returns
`boolean`
___
### labelSide
`get` **labelSide**(): `undefined` \| [`LABEL_SIDE_TYPE`](../enums/LABEL_SIDE_TYPE.md)
#### Returns
`undefined` \| [`LABEL_SIDE_TYPE`](../enums/LABEL_SIDE_TYPE.md)
___
### nodeDragIdsWithChildren
`get` **nodeDragIdsWithChildren**(): `string`[]
#### Returns
`string`[]
___
### renderState
`get` **renderState**(): [`FlowRendererStateEntity`](./FlowRendererStateEntity.md)
#### Returns
[`FlowRendererStateEntity`](./FlowRendererStateEntity.md)
## Methods
### dropBranch
**dropBranch**(): `void`
放置到目标分支
#### Returns
`void`
___
### dropCreateNode
**dropCreateNode**(`json`, `onCreateNode?`): `Promise`\<`void`\>
移动并且创建节点
Move and create node
#### Parameters
| Name | Type |
| :------ | :------ |
| `json` | [`FlowNodeJSON`](../interfaces/FlowNodeJSON.md) |
| `onCreateNode?` | (`json`: [`FlowNodeJSON`](../interfaces/FlowNodeJSON.md), `dropEntity`: [`FlowNodeEntity`](./FlowNodeEntity-1.md)) => `Promise`\<[`FlowNodeEntity`](./FlowNodeEntity-1.md)\> |
#### Returns
`Promise`\<`void`\>
___
### dropNode
**dropNode**(): `void`
移动到目标节点
#### Returns
`void`
___
### isDroppableBranch
**isDroppableBranch**(`node`, `side?`): `boolean`
拖拽分支是否可以释放在该分支
#### Parameters
| Name | Type | Default value | Description |
| :------ | :------ | :------ | :------ |
| `node` | [`FlowNodeEntity`](./FlowNodeEntity-1.md) | `undefined` | 拖拽的分支节点 |
| `side` | [`LABEL_SIDE_TYPE`](../enums/LABEL_SIDE_TYPE.md) | `LABEL_SIDE_TYPE.NORMAL_BRANCH` | 分支的前面还是后面 |
#### Returns
`boolean`
___
### isDroppableNode
**isDroppableNode**(`node`): `boolean`
拖拽是否可以释放在该节点后面
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | [`FlowNodeEntity`](./FlowNodeEntity-1.md) |
#### Returns
`boolean`
---
url: /auto-docs/document/classes/FlowGroupController.md
---
# Class: FlowGroupController
分组控制器
## Table of contents
### Properties
- [groupNode](./FlowGroupController.md#groupnode)
### Accessors
- [bounds](./FlowGroupController.md#bounds)
- [collapsed](./FlowGroupController.md#collapsed)
- [hovered](./FlowGroupController.md#hovered)
- [nodes](./FlowGroupController.md#nodes)
- [note](./FlowGroupController.md#note)
- [noteHeight](./FlowGroupController.md#noteheight)
- [positionConfig](./FlowGroupController.md#positionconfig)
### Methods
- [collapse](./FlowGroupController.md#collapse)
- [expand](./FlowGroupController.md#expand)
- [isEndNode](./FlowGroupController.md#isendnode)
- [isStartNode](./FlowGroupController.md#isstartnode)
- [create](./FlowGroupController.md#create)
## Properties
### groupNode
`Readonly` **groupNode**: [`FlowNodeEntity`](./FlowNodeEntity-1.md)
## Accessors
### bounds
`get` **bounds**(): `Rectangle`
获取分组外围的最大边框
#### Returns
`Rectangle`
___
### collapsed
`get` **collapsed**(): `boolean`
#### Returns
`boolean`
`set` **collapsed**(`collapsed`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `collapsed` | `boolean` |
#### Returns
`void`
___
### hovered
`get` **hovered**(): `boolean`
#### Returns
`boolean`
`set` **hovered**(`hovered`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `hovered` | `boolean` |
#### Returns
`void`
___
### nodes
`get` **nodes**(): [`FlowNodeEntity`](./FlowNodeEntity-1.md)[]
#### Returns
[`FlowNodeEntity`](./FlowNodeEntity-1.md)[]
___
### note
`get` **note**(): `string`
#### Returns
`string`
`set` **note**(`note`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `note` | `string` |
#### Returns
`void`
___
### noteHeight
`get` **noteHeight**(): `number`
#### Returns
`number`
`set` **noteHeight**(`height`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `height` | `number` |
#### Returns
`void`
___
### positionConfig
`get` **positionConfig**(): `Record`\<`string`, `number`\>
#### Returns
`Record`\<`string`, `number`\>
## Methods
### collapse
**collapse**(): `void`
#### Returns
`void`
___
### expand
**expand**(): `void`
#### Returns
`void`
___
### isEndNode
**isEndNode**(`node?`): `boolean`
是否是结束节点
#### Parameters
| Name | Type |
| :------ | :------ |
| `node?` | [`FlowNodeEntity`](./FlowNodeEntity-1.md) |
#### Returns
`boolean`
___
### isStartNode
**isStartNode**(`node?`): `boolean`
是否是开始节点
#### Parameters
| Name | Type |
| :------ | :------ |
| `node?` | [`FlowNodeEntity`](./FlowNodeEntity-1.md) |
#### Returns
`boolean`
___
### create
`Static` **create**(`groupNode?`): `undefined` \| [`FlowGroupController`](./FlowGroupController.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `groupNode?` | [`FlowNodeEntity`](./FlowNodeEntity-1.md) |
#### Returns
`undefined` \| [`FlowGroupController`](./FlowGroupController.md)
---
url: /auto-docs/document/classes/FlowGroupService.md
---
# Class: FlowGroupService
## Table of contents
### Constructors
- [constructor](./FlowGroupService.md#constructor)
### Properties
- [entityManager](./FlowGroupService.md#entitymanager)
- [operationService](./FlowGroupService.md#operationservice)
### Methods
- [createGroup](./FlowGroupService.md#creategroup)
- [deleteGroup](./FlowGroupService.md#deletegroup)
- [getAllGroups](./FlowGroupService.md#getallgroups)
- [groupController](./FlowGroupService.md#groupcontroller)
- [ungroup](./FlowGroupService.md#ungroup)
- [validate](./FlowGroupService.md#validate)
## Constructors
### constructor
**new FlowGroupService**()
## Properties
### entityManager
`Readonly` **entityManager**: `EntityManager`
___
### operationService
`Readonly` **operationService**: [`FlowOperationBaseService`](../variables/FlowOperationBaseService-1.md)
## Methods
### createGroup
**createGroup**(`nodes`): `undefined` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md)
创建分组节点
#### Parameters
| Name | Type |
| :------ | :------ |
| `nodes` | [`FlowNodeEntity`](./FlowNodeEntity-1.md)[] |
#### Returns
`undefined` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md)
___
### deleteGroup
**deleteGroup**(`groupNode`): `void`
删除分组
#### Parameters
| Name | Type |
| :------ | :------ |
| `groupNode` | [`FlowNodeEntity`](./FlowNodeEntity-1.md) |
#### Returns
`void`
___
### getAllGroups
**getAllGroups**(): [`FlowGroupController`](./FlowGroupController.md)[]
返回所有分组节点
#### Returns
[`FlowGroupController`](./FlowGroupController.md)[]
___
### groupController
**groupController**(`group`): `undefined` \| [`FlowGroupController`](./FlowGroupController.md)
获取分组控制器
#### Parameters
| Name | Type |
| :------ | :------ |
| `group` | [`FlowNodeEntity`](./FlowNodeEntity-1.md) |
#### Returns
`undefined` \| [`FlowGroupController`](./FlowGroupController.md)
___
### ungroup
**ungroup**(`groupNode`): `void`
取消分组
#### Parameters
| Name | Type |
| :------ | :------ |
| `groupNode` | [`FlowNodeEntity`](./FlowNodeEntity-1.md) |
#### Returns
`void`
___
### validate
`Static` **validate**(`nodes`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `nodes` | [`FlowNodeEntity`](./FlowNodeEntity-1.md)[] |
#### Returns
`boolean`
---
url: /auto-docs/document/classes/FlowNodeEntity-1.md
---
# Class: FlowNodeEntity
## Hierarchy
- `Entity`\<[`FlowNodeEntityConfig`](../interfaces/FlowNodeEntityConfig.md)\>
↳ **`FlowNodeEntity`**
## Table of contents
### Constructors
- [constructor](./FlowNodeEntity-1.md#constructor)
### Properties
- [\_\_opts\_type\_\_](./FlowNodeEntity-1.md#__opts_type__)
- [document](./FlowNodeEntity-1.md#document)
- [entityManager](./FlowNodeEntity-1.md#entitymanager)
- [flowNodeType](./FlowNodeEntity-1.md#flownodetype)
- [index](./FlowNodeEntity-1.md#index)
- [metaFromJSON](./FlowNodeEntity-1.md#metafromjson)
- [onDataChange](./FlowNodeEntity-1.md#ondatachange)
- [onEntityChange](./FlowNodeEntity-1.md#onentitychange)
- [originParent](./FlowNodeEntity-1.md#originparent)
- [preDispose](./FlowNodeEntity-1.md#predispose)
- [toDispose](./FlowNodeEntity-1.md#todispose)
- [type](./FlowNodeEntity-1.md#type)
### Accessors
- [allChildren](./FlowNodeEntity-1.md#allchildren)
- [allCollapsedChildren](./FlowNodeEntity-1.md#allcollapsedchildren)
- [blocks](./FlowNodeEntity-1.md#blocks)
- [bounds](./FlowNodeEntity-1.md#bounds)
- [children](./FlowNodeEntity-1.md#children)
- [childrenLength](./FlowNodeEntity-1.md#childrenlength)
- [collapsed](./FlowNodeEntity-1.md#collapsed)
- [collapsedChildren](./FlowNodeEntity-1.md#collapsedchildren)
- [context](./FlowNodeEntity-1.md#context)
- [disposed](./FlowNodeEntity-1.md#disposed)
- [firstChild](./FlowNodeEntity-1.md#firstchild)
- [hasChild](./FlowNodeEntity-1.md#haschild)
- [hidden](./FlowNodeEntity-1.md#hidden)
- [id](./FlowNodeEntity-1.md#id)
- [isFirst](./FlowNodeEntity-1.md#isfirst)
- [isInlineBlock](./FlowNodeEntity-1.md#isinlineblock)
- [isInlineBlocks](./FlowNodeEntity-1.md#isinlineblocks)
- [isLast](./FlowNodeEntity-1.md#islast)
- [isNodeEnd](./FlowNodeEntity-1.md#isnodeend)
- [isStart](./FlowNodeEntity-1.md#isstart)
- [isVertical](./FlowNodeEntity-1.md#isvertical)
- [lastBlock](./FlowNodeEntity-1.md#lastblock)
- [lastChild](./FlowNodeEntity-1.md#lastchild)
- [lastCollapsedChild](./FlowNodeEntity-1.md#lastcollapsedchild)
- [next](./FlowNodeEntity-1.md#next)
- [onDispose](./FlowNodeEntity-1.md#ondispose)
- [onExtInfoChange](./FlowNodeEntity-1.md#onextinfochange)
- [parent](./FlowNodeEntity-1.md#parent)
- [pre](./FlowNodeEntity-1.md#pre)
- [renderData](./FlowNodeEntity-1.md#renderdata)
- [savedInManager](./FlowNodeEntity-1.md#savedinmanager)
- [transform](./FlowNodeEntity-1.md#transform)
- [type](./FlowNodeEntity-1.md#type-1)
- [version](./FlowNodeEntity-1.md#version)
### Methods
- [addChild](./FlowNodeEntity-1.md#addchild)
- [addData](./FlowNodeEntity-1.md#adddata)
- [addInitializeData](./FlowNodeEntity-1.md#addinitializedata)
- [clearMemoGlobal](./FlowNodeEntity-1.md#clearmemoglobal)
- [clearMemoLocal](./FlowNodeEntity-1.md#clearmemolocal)
- [dispose](./FlowNodeEntity-1.md#dispose)
- [fromJSON](./FlowNodeEntity-1.md#fromjson)
- [getData](./FlowNodeEntity-1.md#getdata)
- [getDefaultDataRegistries](./FlowNodeEntity-1.md#getdefaultdataregistries)
- [getExtInfo](./FlowNodeEntity-1.md#getextinfo)
- [getJSONData](./FlowNodeEntity-1.md#getjsondata)
- [getNodeMeta](./FlowNodeEntity-1.md#getnodemeta)
- [getNodeRegister](./FlowNodeEntity-1.md#getnoderegister)
- [getNodeRegistry](./FlowNodeEntity-1.md#getnoderegistry)
- [getService](./FlowNodeEntity-1.md#getservice)
- [hasData](./FlowNodeEntity-1.md#hasdata)
- [initData](./FlowNodeEntity-1.md#initdata)
- [isExtend](./FlowNodeEntity-1.md#isextend)
- [isTypeOrExtendType](./FlowNodeEntity-1.md#istypeorextendtype)
- [memoGlobal](./FlowNodeEntity-1.md#memoglobal)
- [memoLocal](./FlowNodeEntity-1.md#memolocal)
- [openInsideCollapsed](./FlowNodeEntity-1.md#openinsidecollapsed)
- [removeData](./FlowNodeEntity-1.md#removedata)
- [reset](./FlowNodeEntity-1.md#reset)
- [toJSON](./FlowNodeEntity-1.md#tojson)
- [updateData](./FlowNodeEntity-1.md#updatedata)
- [updateExtInfo](./FlowNodeEntity-1.md#updateextinfo)
## Constructors
### constructor
**new FlowNodeEntity**(`conf`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `conf` | [`FlowNodeEntityConfig`](../interfaces/FlowNodeEntityConfig.md) |
#### Overrides
Entity\<FlowNodeEntityConfig\>.constructor
## Properties
### \_\_opts\_type\_\_
**\_\_opts\_type\_\_**: [`FlowNodeEntityConfig`](../interfaces/FlowNodeEntityConfig.md)
#### Inherited from
Entity.\_\_opts\_type\_\_
___
### document
**document**: [`FlowDocument`](./FlowDocument.md)\<[`FlowDocumentJSON`](../types/FlowDocumentJSON.md)\>
文档引用
___
### entityManager
`Readonly` **entityManager**: `EntityManager`
全局的entity管理器
#### Inherited from
Entity.entityManager
___
### flowNodeType
**flowNodeType**: [`FlowNodeType`](../types/FlowNodeType.md) = `'unknown'`
___
### index
**index**: `number` = `-1`
___
### metaFromJSON
`Optional` **metaFromJSON**: [`FlowNodeMeta`](../interfaces/FlowNodeMeta.md)
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<`EntityDataChangedEvent`\<`Entity`\<`EntityOpts`\>\>\>
数据更改事件
#### Inherited from
Entity.onDataChange
___
### onEntityChange
`Readonly` **onEntityChange**: `Event`\<`Entity`\<`EntityOpts`\>\>
修改会触发
#### Inherited from
Entity.onEntityChange
___
### originParent
`Optional` **originParent**: [`FlowNodeEntity`](./FlowNodeEntity-1.md)
真实的父节点，条件块在内部会创建一些空的块节点，这些块需要关联它真实的父亲节点
___
### preDispose
`Readonly` **preDispose**: `DisposableCollection`
销毁前事件管理
#### Inherited from
Entity.preDispose
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
销毁事件管理
#### Inherited from
Entity.toDispose
___
### type
`Static` **type**: `string` = `'FlowNodeEntity'`
#### Overrides
Entity.type
## Accessors
### allChildren
`get` **allChildren**(): [`FlowNodeEntity`](./FlowNodeEntity-1.md)[]
获取所有子节点，包含 child 及其所有兄弟节点
#### Returns
[`FlowNodeEntity`](./FlowNodeEntity-1.md)[]
___
### allCollapsedChildren
`get` **allCollapsedChildren**(): [`FlowNodeEntity`](./FlowNodeEntity-1.md)[]
获取所有收起的子节点，包含 child 及其所有兄弟节点
#### Returns
[`FlowNodeEntity`](./FlowNodeEntity-1.md)[]
___
### blocks
`get` **blocks**(): [`FlowNodeEntity`](./FlowNodeEntity-1.md)[]
Get child blocks
#### Returns
[`FlowNodeEntity`](./FlowNodeEntity-1.md)[]
___
### bounds
`get` **bounds**(): `Rectangle`
获取节点的位置及大小矩形
#### Returns
`Rectangle`
___
### children
`get` **children**(): [`FlowNodeEntity`](./FlowNodeEntity-1.md)[]
获取子节点，如果子节点收起来，则会返回 空数组
#### Returns
[`FlowNodeEntity`](./FlowNodeEntity-1.md)[]
___
### childrenLength
`get` **childrenLength**(): `number`
#### Returns
`number`
___
### collapsed
`get` **collapsed**(): `boolean`
#### Returns
`boolean`
`set` **collapsed**(`collapsed`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `collapsed` | `boolean` |
#### Returns
`void`
___
### collapsedChildren
`get` **collapsedChildren**(): [`FlowNodeEntity`](./FlowNodeEntity-1.md)[]
Get child blocks
use `blocks` instead
#### Returns
[`FlowNodeEntity`](./FlowNodeEntity-1.md)[]
**`Deprecated`**
___
### context
`get` **context**(): `any`
#### Returns
`any`
#### Inherited from
Entity.context
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
Entity.disposed
___
### firstChild
`get` **firstChild**(): `undefined` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md)
#### Returns
`undefined` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md)
___
### hasChild
`get` **hasChild**(): `boolean`
#### Returns
`boolean`
___
### hidden
`get` **hidden**(): `boolean`
#### Returns
`boolean`
___
### id
`get` **id**(): `string`
实体 id
#### Returns
`string`
#### Inherited from
Entity.id
___
### isFirst
`get` **isFirst**(): `boolean`
#### Returns
`boolean`
___
### isInlineBlock
`get` **isInlineBlock**(): `boolean`
水平节点
#### Returns
`boolean`
___
### isInlineBlocks
`get` **isInlineBlocks**(): `boolean`
子节点采用水平布局
#### Returns
`boolean`
___
### isLast
`get` **isLast**(): `boolean`
#### Returns
`boolean`
___
### isNodeEnd
`get` **isNodeEnd**(): `boolean`
节点结束标记
- 当前节点是结束节点
- 当前节点最后一个节点包含结束标记
- 当前节点为 inlineBlock，每一个 block 包含结束标记
由子元素确定，因此使用 memoLocal
#### Returns
`boolean`
___
### isStart
`get` **isStart**(): `boolean`
#### Returns
`boolean`
___
### isVertical
`get` **isVertical**(): `boolean`
#### Returns
`boolean`
___
### lastBlock
`get` **lastBlock**(): `undefined` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md)
Get last block
#### Returns
`undefined` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md)
___
### lastChild
`get` **lastChild**(): `undefined` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md)
#### Returns
`undefined` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md)
___
### lastCollapsedChild
`get` **lastCollapsedChild**(): `undefined` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md)
use `lastBlock` instead
#### Returns
`undefined` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md)
___
### next
`get` **next**(): `undefined` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md)
#### Returns
`undefined` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md)
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
销毁事件
#### Returns
`Event`\<`void`\>
#### Inherited from
Entity.onDispose
___
### onExtInfoChange
`get` **onExtInfoChange**(): `Event`\<\{ `newInfo`: `any` ; `oldInfo`: `any` }\>
#### Returns
`Event`\<\{ `newInfo`: `any` ; `oldInfo`: `any` }\>
___
### parent
`get` **parent**(): `undefined` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md)
#### Returns
`undefined` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md)
___
### pre
`get` **pre**(): `undefined` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md)
#### Returns
`undefined` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md)
___
### renderData
`get` **renderData**(): [`FlowNodeRenderData`](./FlowNodeRenderData.md)
获取渲染数据
#### Returns
[`FlowNodeRenderData`](./FlowNodeRenderData.md)
___
### savedInManager
`get` **savedInManager**(): `boolean`
是否存到全局 manager，默认 true
#### Returns
`boolean`
#### Inherited from
Entity.savedInManager
___
### transform
`get` **transform**(): [`FlowNodeTransformData`](./FlowNodeTransformData.md)
获取位置大小数据
#### Returns
[`FlowNodeTransformData`](./FlowNodeTransformData.md)
___
### type
`get` **type**(): `string`
实体类型
#### Returns
`string`
#### Inherited from
Entity.type
___
### version
`get` **version**(): `number`
实体的版本
#### Returns
`number`
#### Inherited from
Entity.version
## Methods
### addChild
**addChild**(`child`, `index?`): `void`
添加 子节点
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `child` | [`FlowNodeEntity`](./FlowNodeEntity-1.md) | 插入节点 |
| `index?` | `number` | - |
#### Returns
`void`
___
### addData
**addData**\<`D`\>(`Registry`, `defaultProps?`): `D`
添加数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\> |
| `defaultProps?` | `EntityDataProps`\<`D`\> |
#### Returns
`D`
#### Inherited from
Entity.addData
___
### addInitializeData
**addInitializeData**(`datas`, `dataConfig?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `datas` | `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[] |
| `dataConfig?` | `any` |
#### Returns
`void`
#### Inherited from
Entity.addInitializeData
___
### clearMemoGlobal
**clearMemoGlobal**(): `void`
#### Returns
`void`
___
### clearMemoLocal
**clearMemoLocal**(): `void`
#### Returns
`void`
___
### dispose
**dispose**(): `void`
销毁实体
#### Returns
`void`
#### Inherited from
Entity.dispose
___
### fromJSON
**fromJSON**(`data?`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data?` | `any` |
#### Returns
`void`
#### Inherited from
Entity.fromJSON
___
### getData
**getData**\<`D`\>(`Registry`): `D`
获取 data 数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`D`\> |
#### Returns
`D`
#### Inherited from
Entity.getData
___
### getDefaultDataRegistries
**getDefaultDataRegistries**(): `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[]
默认初始化的 Data
#### Returns
`EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[]
#### Inherited from
Entity.getDefaultDataRegistries
___
### getExtInfo
**getExtInfo**\<`T`\>(): `T`
获取节点扩展信息
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `Record`\<`string`, `any`\> = `Record`\<`string`, `any`\> |
#### Returns
`T`
___
### getJSONData
**getJSONData**(): `any`
可以重载
#### Returns
`any`
___
### getNodeMeta
**getNodeMeta**\<`M`\>(): `M` & `Required`\<[`FlowNodeMeta`](../interfaces/FlowNodeMeta.md)\>
#### Type parameters
| Name | Type |
| :------ | :------ |
| `M` | extends [`FlowNodeMeta`](../interfaces/FlowNodeMeta.md) = [`FlowNodeMeta`](../interfaces/FlowNodeMeta.md) |
#### Returns
`M` & `Required`\<[`FlowNodeMeta`](../interfaces/FlowNodeMeta.md)\>
___
### getNodeRegister
**getNodeRegister**\<`M`\>(): `M`
#### Type parameters
| Name | Type |
| :------ | :------ |
| `M` | extends [`FlowNodeRegistry`](../interfaces/FlowNodeRegistry-1.md)\<[`FlowNodeMeta`](../interfaces/FlowNodeMeta.md), `M`\> = [`FlowNodeRegistry`](../interfaces/FlowNodeRegistry-1.md)\<[`FlowNodeMeta`](../interfaces/FlowNodeMeta.md)\> |
#### Returns
`M`
**`Deprecated`**
use getNodeRegistry instead
___
### getNodeRegistry
**getNodeRegistry**\<`M`\>(): `M`
#### Type parameters
| Name | Type |
| :------ | :------ |
| `M` | extends [`FlowNodeRegistry`](../interfaces/FlowNodeRegistry-1.md)\<[`FlowNodeMeta`](../interfaces/FlowNodeMeta.md), `M`\> = [`FlowNodeRegistry`](../interfaces/FlowNodeRegistry-1.md)\<[`FlowNodeMeta`](../interfaces/FlowNodeMeta.md)\> & \{ `meta`: [`FlowNodeMeta`](../interfaces/FlowNodeMeta.md) } |
#### Returns
`M`
___
### getService
**getService**\<`T`\>(`identifier`): `T`
获取 IOC 服务
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `identifier` | `ServiceIdentifier`\<`T`\> |
#### Returns
`T`
#### Inherited from
Entity.getService
___
### hasData
**hasData**(`Registry`): `boolean`
是否有指定数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\> |
#### Returns
`boolean`
#### Inherited from
Entity.hasData
___
### initData
**initData**(`initConf`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `initConf` | [`FlowNodeInitData`](../interfaces/FlowNodeInitData.md) |
#### Returns
`void`
___
### isExtend
**isExtend**(`parentType`): `boolean`
Check node extend type
#### Parameters
| Name | Type |
| :------ | :------ |
| `parentType` | [`FlowNodeType`](../types/FlowNodeType.md) |
#### Returns
`boolean`
___
### isTypeOrExtendType
**isTypeOrExtendType**(`parentType`): `boolean`
Check node type
#### Parameters
| Name | Type |
| :------ | :------ |
| `parentType` | [`FlowNodeType`](../types/FlowNodeType.md) |
#### Returns
`boolean`
___
### memoGlobal
**memoGlobal**\<`T`\>(`key`, `fn`): `T`
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `key` | `string` |
| `fn` | () => `T` |
#### Returns
`T`
___
### memoLocal
**memoLocal**\<`T`\>(`key`, `fn`): `T`
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `key` | `string` |
| `fn` | () => `T` |
#### Returns
`T`
___
### openInsideCollapsed
**openInsideCollapsed**(): `void`
#### Returns
`void`
___
### removeData
**removeData**\<`D`\>(`Registry`): `void`
删除数据，初始化状态注入的数据无法被删除
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`D`\> |
#### Returns
`void`
#### Inherited from
Entity.removeData
___
### reset
**reset**(): `void`
重制为初始化状态
#### Returns
`void`
#### Inherited from
Entity.reset
___
### toJSON
**toJSON**(): [`FlowNodeJSON`](../interfaces/FlowNodeJSON.md)
生成 JSON
#### Returns
[`FlowNodeJSON`](../interfaces/FlowNodeJSON.md)
#### Overrides
Entity.toJSON
___
### updateData
**updateData**\<`D`\>(`Registry`, `props`): `void`
更新实体的数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`D`\> |
| `props` | `EntityDataProps`\<`D`\> |
#### Returns
`void`
#### Inherited from
Entity.updateData
___
### updateExtInfo
**updateExtInfo**\<`T`\>(`extInfo`, `fullUpdate?`): `void`
修改节点扩展信息
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `Record`\<`string`, `any`\> = `Record`\<`string`, `any`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `extInfo` | `T` |
| `fullUpdate?` | `boolean` |
#### Returns
`void`
---
url: /auto-docs/document/classes/FlowNodeRenderData.md
---
# Class: FlowNodeRenderData
节点渲染状态相关数据
## Hierarchy
- `EntityData`\<[`FlowNodeRenderSchema`](../interfaces/FlowNodeRenderSchema.md)\>
↳ **`FlowNodeRenderData`**
## Table of contents
### Constructors
- [constructor](./FlowNodeRenderData.md#constructor)
### Properties
- [entity](./FlowNodeRenderData.md#entity)
- [mouseLeaveTimeout](./FlowNodeRenderData.md#mouseleavetimeout)
- [onDataChange](./FlowNodeRenderData.md#ondatachange)
- [onExtInfoChange](./FlowNodeRenderData.md#onextinfochange)
- [onWillChange](./FlowNodeRenderData.md#onwillchange)
- [opts](./FlowNodeRenderData.md#opts)
- [toDispose](./FlowNodeRenderData.md#todispose)
- [type](./FlowNodeRenderData.md#type)
### Accessors
- [activated](./FlowNodeRenderData.md#activated)
- [addable](./FlowNodeRenderData.md#addable)
- [changeLocked](./FlowNodeRenderData.md#changelocked)
- [data](./FlowNodeRenderData.md#data)
- [disposed](./FlowNodeRenderData.md#disposed)
- [draggable](./FlowNodeRenderData.md#draggable)
- [dragging](./FlowNodeRenderData.md#dragging)
- [expandable](./FlowNodeRenderData.md#expandable)
- [expanded](./FlowNodeRenderData.md#expanded)
- [hidden](./FlowNodeRenderData.md#hidden)
- [hovered](./FlowNodeRenderData.md#hovered)
- [key](./FlowNodeRenderData.md#key)
- [lineActivated](./FlowNodeRenderData.md#lineactivated)
- [node](./FlowNodeRenderData.md#node)
- [onDispose](./FlowNodeRenderData.md#ondispose)
- [stackIndex](./FlowNodeRenderData.md#stackindex)
- [type](./FlowNodeRenderData.md#type-1)
- [version](./FlowNodeRenderData.md#version)
### Methods
- [checkChanged](./FlowNodeRenderData.md#checkchanged)
- [dispose](./FlowNodeRenderData.md#dispose)
- [fireChange](./FlowNodeRenderData.md#firechange)
- [fireWillChange](./FlowNodeRenderData.md#firewillchange)
- [fromJSON](./FlowNodeRenderData.md#fromjson)
- [fullyUpdate](./FlowNodeRenderData.md#fullyupdate)
- [getDefaultData](./FlowNodeRenderData.md#getdefaultdata)
- [getExtInfo](./FlowNodeRenderData.md#getextinfo)
- [toJSON](./FlowNodeRenderData.md#tojson)
- [toggleExpand](./FlowNodeRenderData.md#toggleexpand)
- [toggleMouseEnter](./FlowNodeRenderData.md#togglemouseenter)
- [toggleMouseLeave](./FlowNodeRenderData.md#togglemouseleave)
- [update](./FlowNodeRenderData.md#update)
- [updateExtInfo](./FlowNodeRenderData.md#updateextinfo)
## Constructors
### constructor
**new FlowNodeRenderData**(`entity`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `entity` | [`FlowNodeEntity`](./FlowNodeEntity-1.md) |
#### Overrides
EntityData\<FlowNodeRenderSchema\>.constructor
## Properties
### entity
**entity**: [`FlowNodeEntity`](./FlowNodeEntity-1.md)
#### Overrides
EntityData.entity
___
### mouseLeaveTimeout
`Optional` **mouseLeaveTimeout**: `Timeout`
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<`EntityData`\<[`FlowNodeRenderSchema`](../interfaces/FlowNodeRenderSchema.md), {}\>\>
修改后触发
#### Inherited from
EntityData.onDataChange
___
### onExtInfoChange
`Readonly` **onExtInfoChange**: `Event`\<\{ `newInfo`: `any` ; `oldInfo`: `any` }\>
___
### onWillChange
`Readonly` **onWillChange**: `Event`\<`EntityData`\<[`FlowNodeRenderSchema`](../interfaces/FlowNodeRenderSchema.md), {}\>\>
修改前触发
#### Inherited from
EntityData.onWillChange
___
### opts
`Optional` `Readonly` **opts**: `Object`
#### Inherited from
EntityData.opts
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
#### Inherited from
EntityData.toDispose
___
### type
`Static` **type**: `string` = `'FlowNodeRenderData'`
#### Overrides
EntityData.type
## Accessors
### activated
`get` **activated**(): `boolean`
#### Returns
`boolean`
`set` **activated**(`activated`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `activated` | `boolean` |
#### Returns
`void`
___
### addable
`get` **addable**(): `boolean`
#### Returns
`boolean`
___
### changeLocked
`get` **changeLocked**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.changeLocked
`set` **changeLocked**(`p`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `p` | `boolean` |
#### Returns
`void`
#### Inherited from
EntityData.changeLocked
___
### data
`get` **data**(): `DATA`
当前数据
#### Returns
`DATA`
#### Inherited from
EntityData.data
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.disposed
___
### draggable
`get` **draggable**(): `boolean`
#### Returns
`boolean`
___
### dragging
`get` **dragging**(): `boolean`
#### Returns
`boolean`
`set` **dragging**(`dragging`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `dragging` | `boolean` |
#### Returns
`void`
___
### expandable
`get` **expandable**(): `boolean`
#### Returns
`boolean`
___
### expanded
`get` **expanded**(): `boolean`
#### Returns
`boolean`
`set` **expanded**(`expanded`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `expanded` | `boolean` |
#### Returns
`void`
___
### hidden
`get` **hidden**(): `boolean`
#### Returns
`boolean`
___
### hovered
`get` **hovered**(): `boolean`
#### Returns
`boolean`
`set` **hovered**(`hovered`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `hovered` | `boolean` |
#### Returns
`void`
___
### key
`get` **key**(): `string`
#### Returns
`string`
___
### lineActivated
`get` **lineActivated**(): `boolean`
#### Returns
`boolean`
___
### node
`get` **node**(): `HTMLDivElement`
#### Returns
`HTMLDivElement`
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
#### Returns
`Event`\<`void`\>
#### Inherited from
EntityData.onDispose
___
### stackIndex
`get` **stackIndex**(): `number`
#### Returns
`number`
`set` **stackIndex**(`index`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `index` | `number` |
#### Returns
`void`
___
### type
`get` **type**(): `string`
data 类型
#### Returns
`string`
#### Inherited from
EntityData.type
___
### version
`get` **version**(): `number`
#### Returns
`number`
#### Inherited from
EntityData.version
## Methods
### checkChanged
**checkChanged**(`newProps`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `newProps` | [`FlowNodeRenderSchema`](../interfaces/FlowNodeRenderSchema.md) \| `Partial`\<[`FlowNodeRenderSchema`](../interfaces/FlowNodeRenderSchema.md)\> |
#### Returns
`boolean`
**`Deprecated`**
检测属性是否更改，默认采用浅比较
#### Inherited from
EntityData.checkChanged
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Overrides
EntityData.dispose
___
### fireChange
**fireChange**(): `void`
#### Returns
`void`
#### Inherited from
EntityData.fireChange
___
### fireWillChange
**fireWillChange**(): `void`
#### Returns
`void`
#### Inherited from
EntityData.fireWillChange
___
### fromJSON
**fromJSON**(`data`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data` | `object` |
#### Returns
`void`
#### Inherited from
EntityData.fromJSON
___
### fullyUpdate
**fullyUpdate**(`props`): `void`
更新全量数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | [`FlowNodeRenderSchema`](../interfaces/FlowNodeRenderSchema.md) |
#### Returns
`void`
#### Inherited from
EntityData.fullyUpdate
___
### getDefaultData
**getDefaultData**(): [`FlowNodeRenderSchema`](../interfaces/FlowNodeRenderSchema.md)
#### Returns
[`FlowNodeRenderSchema`](../interfaces/FlowNodeRenderSchema.md)
#### Overrides
EntityData.getDefaultData
___
### getExtInfo
**getExtInfo**(): `undefined` \| `Record`\<`string`, `any`\>
#### Returns
`undefined` \| `Record`\<`string`, `any`\>
___
### toJSON
**toJSON**(): `any`
存储数据，一般在关闭浏览器后需要暂时存到 localStorage
#### Returns
`any`
#### Inherited from
EntityData.toJSON
___
### toggleExpand
**toggleExpand**(): `void`
#### Returns
`void`
___
### toggleMouseEnter
**toggleMouseEnter**(`silent?`): `void`
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `silent` | `boolean` | `false` |
#### Returns
`void`
___
### toggleMouseLeave
**toggleMouseLeave**(`silent?`): `void`
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `silent` | `boolean` | `false` |
#### Returns
`void`
___
### update
**update**(`props`, `value?`): `void`
更新单个数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | [`FlowNodeRenderSchema`](../interfaces/FlowNodeRenderSchema.md) \| `Partial`\<[`FlowNodeRenderSchema`](../interfaces/FlowNodeRenderSchema.md)\> \| keyof [`FlowNodeRenderSchema`](../interfaces/FlowNodeRenderSchema.md) |
| `value?` | `any` |
#### Returns
`void`
#### Inherited from
EntityData.update
___
### updateExtInfo
**updateExtInfo**(`info`, `fullUpdate?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `info` | `Record`\<`string`, `any`\> |
| `fullUpdate?` | `boolean` |
#### Returns
`void`
---
url: /auto-docs/document/classes/FlowNodeTransformData.md
---
# Class: FlowNodeTransformData
## Hierarchy
- `EntityData`\<[`FlowNodeTransformSchema`](../interfaces/FlowNodeTransformSchema.md)\>
↳ **`FlowNodeTransformData`**
## Table of contents
### Constructors
- [constructor](./FlowNodeTransformData.md#constructor)
### Properties
- [entity](./FlowNodeTransformData.md#entity)
- [localDirty](./FlowNodeTransformData.md#localdirty)
- [onDataChange](./FlowNodeTransformData.md#ondatachange)
- [onWillChange](./FlowNodeTransformData.md#onwillchange)
- [opts](./FlowNodeTransformData.md#opts)
- [renderState](./FlowNodeTransformData.md#renderstate)
- [toDispose](./FlowNodeTransformData.md#todispose)
- [transform](./FlowNodeTransformData.md#transform)
- [type](./FlowNodeTransformData.md#type)
### Accessors
- [bounds](./FlowNodeTransformData.md#bounds)
- [boundsWithPadding](./FlowNodeTransformData.md#boundswithpadding)
- [changeLocked](./FlowNodeTransformData.md#changelocked)
- [children](./FlowNodeTransformData.md#children)
- [collapsed](./FlowNodeTransformData.md#collapsed)
- [data](./FlowNodeTransformData.md#data)
- [defaultInputPoint](./FlowNodeTransformData.md#defaultinputpoint)
- [defaultOutputPoint](./FlowNodeTransformData.md#defaultoutputpoint)
- [disposed](./FlowNodeTransformData.md#disposed)
- [firstChild](./FlowNodeTransformData.md#firstchild)
- [inlineSpacingAfter](./FlowNodeTransformData.md#inlinespacingafter)
- [inlineSpacingPre](./FlowNodeTransformData.md#inlinespacingpre)
- [inputPoint](./FlowNodeTransformData.md#inputpoint)
- [isContainer](./FlowNodeTransformData.md#iscontainer)
- [isFirst](./FlowNodeTransformData.md#isfirst)
- [isLast](./FlowNodeTransformData.md#islast)
- [key](./FlowNodeTransformData.md#key)
- [lastChild](./FlowNodeTransformData.md#lastchild)
- [localBounds](./FlowNodeTransformData.md#localbounds)
- [minInlineBlockSpacing](./FlowNodeTransformData.md#mininlineblockspacing)
- [next](./FlowNodeTransformData.md#next)
- [onDispose](./FlowNodeTransformData.md#ondispose)
- [origin](./FlowNodeTransformData.md#origin)
- [originDeltaX](./FlowNodeTransformData.md#origindeltax)
- [originDeltaY](./FlowNodeTransformData.md#origindeltay)
- [originParent](./FlowNodeTransformData.md#originparent)
- [outputPoint](./FlowNodeTransformData.md#outputpoint)
- [padding](./FlowNodeTransformData.md#padding)
- [parent](./FlowNodeTransformData.md#parent)
- [position](./FlowNodeTransformData.md#position)
- [pre](./FlowNodeTransformData.md#pre)
- [size](./FlowNodeTransformData.md#size)
- [spacing](./FlowNodeTransformData.md#spacing)
- [type](./FlowNodeTransformData.md#type-1)
- [version](./FlowNodeTransformData.md#version)
### Methods
- [checkChanged](./FlowNodeTransformData.md#checkchanged)
- [dispose](./FlowNodeTransformData.md#dispose)
- [fireChange](./FlowNodeTransformData.md#firechange)
- [fireWillChange](./FlowNodeTransformData.md#firewillchange)
- [fromJSON](./FlowNodeTransformData.md#fromjson)
- [fullyUpdate](./FlowNodeTransformData.md#fullyupdate)
- [getDefaultData](./FlowNodeTransformData.md#getdefaultdata)
- [setParentTransform](./FlowNodeTransformData.md#setparenttransform)
- [toJSON](./FlowNodeTransformData.md#tojson)
- [update](./FlowNodeTransformData.md#update)
## Constructors
### constructor
**new FlowNodeTransformData**(`entity`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `entity` | [`FlowNodeEntity`](./FlowNodeEntity-1.md) |
#### Overrides
EntityData\<FlowNodeTransformSchema\>.constructor
## Properties
### entity
**entity**: [`FlowNodeEntity`](./FlowNodeEntity-1.md)
#### Overrides
EntityData.entity
___
### localDirty
**localDirty**: `boolean` = `true`
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<`EntityData`\<[`FlowNodeTransformSchema`](../interfaces/FlowNodeTransformSchema.md), {}\>\>
修改后触发
#### Inherited from
EntityData.onDataChange
___
### onWillChange
`Readonly` **onWillChange**: `Event`\<`EntityData`\<[`FlowNodeTransformSchema`](../interfaces/FlowNodeTransformSchema.md), {}\>\>
修改前触发
#### Inherited from
EntityData.onWillChange
___
### opts
`Optional` `Readonly` **opts**: `Object`
#### Inherited from
EntityData.opts
___
### renderState
**renderState**: [`FlowNodeRenderData`](./FlowNodeRenderData.md)
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
#### Inherited from
EntityData.toDispose
___
### transform
**transform**: `TransformData`
___
### type
`Static` **type**: `string` = `'FlowNodeTransformData'`
#### Overrides
EntityData.type
## Accessors
### bounds
`get` **bounds**(): `Rectangle`
绝对坐标 bbox, 不包含自身的 spacing(marginBottom), 但是包含 inlineSpacing 和 子节点的 spacing
#### Returns
`Rectangle`
___
### boundsWithPadding
`get` **boundsWithPadding**(): `Rectangle`
#### Returns
`Rectangle`
___
### changeLocked
`get` **changeLocked**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.changeLocked
`set` **changeLocked**(`p`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `p` | `boolean` |
#### Returns
`void`
#### Inherited from
EntityData.changeLocked
___
### children
`get` **children**(): [`FlowNodeTransformData`](./FlowNodeTransformData.md)[]
#### Returns
[`FlowNodeTransformData`](./FlowNodeTransformData.md)[]
___
### collapsed
`get` **collapsed**(): `boolean`
获取节点是否展开
#### Returns
`boolean`
`set` **collapsed**(`collapsed`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `collapsed` | `boolean` |
#### Returns
`void`
___
### data
`get` **data**(): `DATA`
当前数据
#### Returns
`DATA`
#### Inherited from
EntityData.data
___
### defaultInputPoint
`get` **defaultInputPoint**(): `IPoint`
#### Returns
`IPoint`
___
### defaultOutputPoint
`get` **defaultOutputPoint**(): `IPoint`
#### Returns
`IPoint`
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.disposed
___
### firstChild
`get` **firstChild**(): `undefined` \| [`FlowNodeTransformData`](./FlowNodeTransformData.md)
#### Returns
`undefined` \| [`FlowNodeTransformData`](./FlowNodeTransformData.md)
___
### inlineSpacingAfter
`get` **inlineSpacingAfter**(): `number`
#### Returns
`number`
___
### inlineSpacingPre
`get` **inlineSpacingPre**(): `number`
#### Returns
`number`
___
### inputPoint
`get` **inputPoint**(): `IPoint`
#### Returns
`IPoint`
___
### isContainer
`get` **isContainer**(): `boolean`
#### Returns
`boolean`
___
### isFirst
`get` **isFirst**(): `boolean`
#### Returns
`boolean`
___
### isLast
`get` **isLast**(): `boolean`
#### Returns
`boolean`
___
### key
`get` **key**(): `string`
#### Returns
`string`
___
### lastChild
`get` **lastChild**(): `undefined` \| [`FlowNodeTransformData`](./FlowNodeTransformData.md)
#### Returns
`undefined` \| [`FlowNodeTransformData`](./FlowNodeTransformData.md)
___
### localBounds
`get` **localBounds**(): `Rectangle`
相对坐标 bbox, 这里的 localBounds 会加入 padding 一起算
#### Returns
`Rectangle`
___
### minInlineBlockSpacing
`get` **minInlineBlockSpacing**(): `number`
#### Returns
`number`
___
### next
`get` **next**(): `undefined` \| [`FlowNodeTransformData`](./FlowNodeTransformData.md)
下一个节点的 transform 数据
#### Returns
`undefined` \| [`FlowNodeTransformData`](./FlowNodeTransformData.md)
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
#### Returns
`Event`\<`void`\>
#### Inherited from
EntityData.onDispose
___
### origin
`get` **origin**(): `OriginSchema`
#### Returns
`OriginSchema`
___
### originDeltaX
`get` **originDeltaX**(): `number`
原点的最左偏移
#### Returns
`number`
___
### originDeltaY
`get` **originDeltaY**(): `number`
原点 y 轴偏移
#### Returns
`number`
___
### originParent
`get` **originParent**(): `undefined` \| [`FlowNodeTransformData`](./FlowNodeTransformData.md)
#### Returns
`undefined` \| [`FlowNodeTransformData`](./FlowNodeTransformData.md)
___
### outputPoint
`get` **outputPoint**(): `IPoint`
#### Returns
`IPoint`
___
### padding
`get` **padding**(): `PaddingSchema`
#### Returns
`PaddingSchema`
___
### parent
`get` **parent**(): `undefined` \| [`FlowNodeTransformData`](./FlowNodeTransformData.md)
parent 节点的 transform 数据
#### Returns
`undefined` \| [`FlowNodeTransformData`](./FlowNodeTransformData.md)
___
### position
`get` **position**(): `PositionSchema`
#### Returns
`PositionSchema`
`set` **position**(`position`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `position` | `PositionSchema` |
#### Returns
`void`
___
### pre
`get` **pre**(): `undefined` \| [`FlowNodeTransformData`](./FlowNodeTransformData.md)
上一个节点的 transform 数据
#### Returns
`undefined` \| [`FlowNodeTransformData`](./FlowNodeTransformData.md)
___
### size
`get` **size**(): `SizeSchema`
获取节点的大小
#### Returns
`SizeSchema`
`set` **size**(`size`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `size` | `SizeSchema` |
#### Returns
`void`
___
### spacing
`get` **spacing**(): `number`
#### Returns
`number`
___
### type
`get` **type**(): `string`
data 类型
#### Returns
`string`
#### Inherited from
EntityData.type
___
### version
`get` **version**(): `number`
#### Returns
`number`
#### Inherited from
EntityData.version
## Methods
### checkChanged
**checkChanged**(`newProps`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `newProps` | [`FlowNodeTransformSchema`](../interfaces/FlowNodeTransformSchema.md) \| `Partial`\<[`FlowNodeTransformSchema`](../interfaces/FlowNodeTransformSchema.md)\> |
#### Returns
`boolean`
**`Deprecated`**
检测属性是否更改，默认采用浅比较
#### Inherited from
EntityData.checkChanged
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Inherited from
EntityData.dispose
___
### fireChange
**fireChange**(): `void`
#### Returns
`void`
#### Inherited from
EntityData.fireChange
___
### fireWillChange
**fireWillChange**(): `void`
#### Returns
`void`
#### Inherited from
EntityData.fireWillChange
___
### fromJSON
**fromJSON**(`data`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data` | `object` |
#### Returns
`void`
#### Inherited from
EntityData.fromJSON
___
### fullyUpdate
**fullyUpdate**(`props`): `void`
更新全量数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | [`FlowNodeTransformSchema`](../interfaces/FlowNodeTransformSchema.md) |
#### Returns
`void`
#### Inherited from
EntityData.fullyUpdate
___
### getDefaultData
**getDefaultData**(): [`FlowNodeTransformSchema`](../interfaces/FlowNodeTransformSchema.md)
#### Returns
[`FlowNodeTransformSchema`](../interfaces/FlowNodeTransformSchema.md)
#### Overrides
EntityData.getDefaultData
___
### setParentTransform
**setParentTransform**(`transform?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `transform?` | [`FlowNodeTransformData`](./FlowNodeTransformData.md) |
#### Returns
`void`
___
### toJSON
**toJSON**(): `any`
存储数据，一般在关闭浏览器后需要暂时存到 localStorage
#### Returns
`any`
#### Inherited from
EntityData.toJSON
___
### update
**update**(`props`, `value?`): `void`
更新单个数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | ``"size"`` \| [`FlowNodeTransformSchema`](../interfaces/FlowNodeTransformSchema.md) \| `Partial`\<[`FlowNodeTransformSchema`](../interfaces/FlowNodeTransformSchema.md)\> |
| `value?` | `any` |
#### Returns
`void`
#### Inherited from
EntityData.update
---
url: /auto-docs/document/classes/FlowNodeTransitionData.md
---
# Class: FlowNodeTransitionData
## Hierarchy
- `EntityData`\<[`FlowNodeTransitionSchema`](../interfaces/FlowNodeTransitionSchema.md)\>
↳ **`FlowNodeTransitionData`**
## Table of contents
### Constructors
- [constructor](./FlowNodeTransitionData.md#constructor)
### Properties
- [entity](./FlowNodeTransitionData.md#entity)
- [onDataChange](./FlowNodeTransitionData.md#ondatachange)
- [onWillChange](./FlowNodeTransitionData.md#onwillchange)
- [opts](./FlowNodeTransitionData.md#opts)
- [renderData](./FlowNodeTransitionData.md#renderdata)
- [toDispose](./FlowNodeTransitionData.md#todispose)
- [transform](./FlowNodeTransitionData.md#transform)
- [type](./FlowNodeTransitionData.md#type)
### Accessors
- [changeLocked](./FlowNodeTransitionData.md#changelocked)
- [collapsed](./FlowNodeTransitionData.md#collapsed)
- [data](./FlowNodeTransitionData.md#data)
- [disposed](./FlowNodeTransitionData.md#disposed)
- [isNodeEnd](./FlowNodeTransitionData.md#isnodeend)
- [labels](./FlowNodeTransitionData.md#labels)
- [lines](./FlowNodeTransitionData.md#lines)
- [onDispose](./FlowNodeTransitionData.md#ondispose)
- [type](./FlowNodeTransitionData.md#type-1)
- [version](./FlowNodeTransitionData.md#version)
### Methods
- [checkChanged](./FlowNodeTransitionData.md#checkchanged)
- [dispose](./FlowNodeTransitionData.md#dispose)
- [fireChange](./FlowNodeTransitionData.md#firechange)
- [fireWillChange](./FlowNodeTransitionData.md#firewillchange)
- [formatLabels](./FlowNodeTransitionData.md#formatlabels)
- [formatLines](./FlowNodeTransitionData.md#formatlines)
- [fromJSON](./FlowNodeTransitionData.md#fromjson)
- [fullyUpdate](./FlowNodeTransitionData.md#fullyupdate)
- [getDefaultData](./FlowNodeTransitionData.md#getdefaultdata)
- [toJSON](./FlowNodeTransitionData.md#tojson)
- [update](./FlowNodeTransitionData.md#update)
## Constructors
### constructor
**new FlowNodeTransitionData**(`entity`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `entity` | [`FlowNodeEntity`](./FlowNodeEntity-1.md) |
#### Overrides
EntityData\<FlowNodeTransitionSchema\>.constructor
## Properties
### entity
**entity**: [`FlowNodeEntity`](./FlowNodeEntity-1.md)
#### Overrides
EntityData.entity
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<`EntityData`\<[`FlowNodeTransitionSchema`](../interfaces/FlowNodeTransitionSchema.md), {}\>\>
修改后触发
#### Inherited from
EntityData.onDataChange
___
### onWillChange
`Readonly` **onWillChange**: `Event`\<`EntityData`\<[`FlowNodeTransitionSchema`](../interfaces/FlowNodeTransitionSchema.md), {}\>\>
修改前触发
#### Inherited from
EntityData.onWillChange
___
### opts
`Optional` `Readonly` **opts**: `Object`
#### Inherited from
EntityData.opts
___
### renderData
**renderData**: [`FlowNodeRenderData`](./FlowNodeRenderData.md)
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
#### Inherited from
EntityData.toDispose
___
### transform
**transform**: [`FlowNodeTransformData`](./FlowNodeTransformData.md)
___
### type
`Static` **type**: `string` = `'FlowNodeTransitionData'`
#### Overrides
EntityData.type
## Accessors
### changeLocked
`get` **changeLocked**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.changeLocked
`set` **changeLocked**(`p`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `p` | `boolean` |
#### Returns
`void`
#### Inherited from
EntityData.changeLocked
___
### collapsed
`get` **collapsed**(): `boolean`
#### Returns
`boolean`
___
### data
`get` **data**(): `DATA`
当前数据
#### Returns
`DATA`
#### Inherited from
EntityData.data
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.disposed
___
### isNodeEnd
`get` **isNodeEnd**(): `boolean`
#### Returns
`boolean`
___
### labels
`get` **labels**(): [`FlowTransitionLabel`](../interfaces/FlowTransitionLabel.md)[]
#### Returns
[`FlowTransitionLabel`](../interfaces/FlowTransitionLabel.md)[]
___
### lines
`get` **lines**(): [`FlowTransitionLine`](../interfaces/FlowTransitionLine.md)[]
#### Returns
[`FlowTransitionLine`](../interfaces/FlowTransitionLine.md)[]
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
#### Returns
`Event`\<`void`\>
#### Inherited from
EntityData.onDispose
___
### type
`get` **type**(): `string`
data 类型
#### Returns
`string`
#### Inherited from
EntityData.type
___
### version
`get` **version**(): `number`
#### Returns
`number`
#### Inherited from
EntityData.version
## Methods
### checkChanged
**checkChanged**(`newProps`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `newProps` | [`FlowNodeTransitionSchema`](../interfaces/FlowNodeTransitionSchema.md) \| `Partial`\<[`FlowNodeTransitionSchema`](../interfaces/FlowNodeTransitionSchema.md)\> |
#### Returns
`boolean`
**`Deprecated`**
检测属性是否更改，默认采用浅比较
#### Inherited from
EntityData.checkChanged
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Inherited from
EntityData.dispose
___
### fireChange
**fireChange**(): `void`
#### Returns
`void`
#### Inherited from
EntityData.fireChange
___
### fireWillChange
**fireWillChange**(): `void`
#### Returns
`void`
#### Inherited from
EntityData.fireWillChange
___
### formatLabels
**formatLabels**(`labels`): [`FlowTransitionLabel`](../interfaces/FlowTransitionLabel.md)[]
#### Parameters
| Name | Type |
| :------ | :------ |
| `labels` | [`FlowTransitionLabel`](../interfaces/FlowTransitionLabel.md)[] |
#### Returns
[`FlowTransitionLabel`](../interfaces/FlowTransitionLabel.md)[]
___
### formatLines
**formatLines**(`lines`): [`FlowTransitionLine`](../interfaces/FlowTransitionLine.md)[]
#### Parameters
| Name | Type |
| :------ | :------ |
| `lines` | [`FlowTransitionLine`](../interfaces/FlowTransitionLine.md)[] |
#### Returns
[`FlowTransitionLine`](../interfaces/FlowTransitionLine.md)[]
___
### fromJSON
**fromJSON**(`data`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data` | `object` |
#### Returns
`void`
#### Inherited from
EntityData.fromJSON
___
### fullyUpdate
**fullyUpdate**(`props`): `void`
更新全量数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | [`FlowNodeTransitionSchema`](../interfaces/FlowNodeTransitionSchema.md) |
#### Returns
`void`
#### Inherited from
EntityData.fullyUpdate
___
### getDefaultData
**getDefaultData**(): [`FlowNodeTransitionSchema`](../interfaces/FlowNodeTransitionSchema.md)
#### Returns
[`FlowNodeTransitionSchema`](../interfaces/FlowNodeTransitionSchema.md)
#### Overrides
EntityData.getDefaultData
___
### toJSON
**toJSON**(): `any`
存储数据，一般在关闭浏览器后需要暂时存到 localStorage
#### Returns
`any`
#### Inherited from
EntityData.toJSON
___
### update
**update**(`props`, `value?`): `void`
更新单个数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | [`FlowNodeTransitionSchema`](../interfaces/FlowNodeTransitionSchema.md) \| `Partial`\<[`FlowNodeTransitionSchema`](../interfaces/FlowNodeTransitionSchema.md)\> |
| `value?` | `any` |
#### Returns
`void`
#### Inherited from
EntityData.update
---
url: /auto-docs/document/classes/FlowOperationBaseServiceImpl.md
---
# Class: FlowOperationBaseServiceImpl
操作服务
## Implements
- [`FlowOperationBaseService`](../variables/FlowOperationBaseService-1.md)
## Table of contents
### Constructors
- [constructor](./FlowOperationBaseServiceImpl.md#constructor)
### Properties
- [onNodeAdd](./FlowOperationBaseServiceImpl.md#onnodeadd)
- [onNodeMove](./FlowOperationBaseServiceImpl.md#onnodemove)
### Methods
- [addBlock](./FlowOperationBaseServiceImpl.md#addblock)
- [addFromNode](./FlowOperationBaseServiceImpl.md#addfromnode)
- [addNode](./FlowOperationBaseServiceImpl.md#addnode)
- [apply](./FlowOperationBaseServiceImpl.md#apply)
- [deleteNode](./FlowOperationBaseServiceImpl.md#deletenode)
- [deleteNodes](./FlowOperationBaseServiceImpl.md#deletenodes)
- [dispose](./FlowOperationBaseServiceImpl.md#dispose)
- [dragNodes](./FlowOperationBaseServiceImpl.md#dragnodes)
- [moveNode](./FlowOperationBaseServiceImpl.md#movenode)
- [transact](./FlowOperationBaseServiceImpl.md#transact)
## Constructors
### constructor
**new FlowOperationBaseServiceImpl**()
## Properties
### onNodeAdd
`Readonly` **onNodeAdd**: `Event`\<[`OnNodeAddEvent`](../interfaces/OnNodeAddEvent.md)\>
#### Implementation of
FlowOperationBaseService.onNodeAdd
___
### onNodeMove
`Readonly` **onNodeMove**: `Event`\<[`OnNodeMoveEvent`](../interfaces/OnNodeMoveEvent.md)\>
#### Implementation of
FlowOperationBaseService.onNodeMove
## Methods
### addBlock
**addBlock**(`target`, `blockJSON`, `config?`): [`FlowNodeEntity`](./FlowNodeEntity-1.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `target` | [`FlowNodeEntityOrId`](../types/FlowNodeEntityOrId.md) |
| `blockJSON` | [`FlowNodeJSON`](../interfaces/FlowNodeJSON.md) |
| `config` | [`AddBlockConfig`](../interfaces/AddBlockConfig.md) |
#### Returns
[`FlowNodeEntity`](./FlowNodeEntity-1.md)
#### Implementation of
FlowOperationBaseService.addBlock
___
### addFromNode
**addFromNode**(`fromNode`, `nodeJSON`): [`FlowNodeEntity`](./FlowNodeEntity-1.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `fromNode` | [`FlowNodeEntityOrId`](../types/FlowNodeEntityOrId.md) |
| `nodeJSON` | [`FlowNodeJSON`](../interfaces/FlowNodeJSON.md) |
#### Returns
[`FlowNodeEntity`](./FlowNodeEntity-1.md)
#### Implementation of
FlowOperationBaseService.addFromNode
___
### addNode
**addNode**(`nodeJSON`, `config?`): [`FlowNodeEntity`](./FlowNodeEntity-1.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `nodeJSON` | [`FlowNodeJSON`](../interfaces/FlowNodeJSON.md) |
| `config` | [`AddNodeConfig`](../types/AddNodeConfig.md) |
#### Returns
[`FlowNodeEntity`](./FlowNodeEntity-1.md)
#### Implementation of
FlowOperationBaseService.addNode
___
### apply
**apply**(`operation`): `any`
执行操作
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `operation` | [`FlowOperation`](../types/FlowOperation.md) | 可序列化的操作 |
#### Returns
`any`
操作返回
#### Implementation of
FlowOperationBaseService.apply
___
### deleteNode
**deleteNode**(`node`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | [`FlowNodeEntityOrId`](../types/FlowNodeEntityOrId.md) |
#### Returns
`void`
#### Implementation of
FlowOperationBaseService.deleteNode
___
### deleteNodes
**deleteNodes**(`nodes`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `nodes` | [`FlowNodeEntityOrId`](../types/FlowNodeEntityOrId.md)[] |
#### Returns
`void`
#### Implementation of
FlowOperationBaseService.deleteNodes
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Implementation of
FlowOperationBaseService.dispose
___
### dragNodes
**dragNodes**(`param0`): `any`
拖拽节点
#### Parameters
| Name | Type |
| :------ | :------ |
| `param0` | `Object` |
| `param0.dropNode` | [`FlowNodeEntity`](./FlowNodeEntity-1.md) |
| `param0.nodes` | [`FlowNodeEntity`](./FlowNodeEntity-1.md)[] |
#### Returns
`any`
#### Implementation of
FlowOperationBaseService.dragNodes
___
### moveNode
**moveNode**(`node`, `config?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | [`FlowNodeEntityOrId`](../types/FlowNodeEntityOrId.md) |
| `config` | [`MoveNodeConfig`](../interfaces/MoveNodeConfig.md) |
#### Returns
`void`
#### Implementation of
FlowOperationBaseService.moveNode
___
### transact
**transact**(`transaction`): `void`
事务执行
#### Parameters
| Name | Type |
| :------ | :------ |
| `transaction` | () => `void` |
#### Returns
`void`
---
url: /auto-docs/document/classes/FlowRendererStateEntity.md
---
# Class: FlowRendererStateEntity
渲染相关的全局状态管理
## Hierarchy
- `ConfigEntity`\<`FlowRendererState`, `FlowRendererStateEntityConfig`\>
↳ **`FlowRendererStateEntity`**
## Table of contents
### Constructors
- [constructor](./FlowRendererStateEntity.md#constructor)
### Properties
- [\_\_opts\_type\_\_](./FlowRendererStateEntity.md#__opts_type__)
- [entityManager](./FlowRendererStateEntity.md#entitymanager)
- [onDataChange](./FlowRendererStateEntity.md#ondatachange)
- [onEntityChange](./FlowRendererStateEntity.md#onentitychange)
- [preDispose](./FlowRendererStateEntity.md#predispose)
- [toDispose](./FlowRendererStateEntity.md#todispose)
- [type](./FlowRendererStateEntity.md#type)
### Accessors
- [config](./FlowRendererStateEntity.md#config)
- [context](./FlowRendererStateEntity.md#context)
- [disposed](./FlowRendererStateEntity.md#disposed)
- [dragging](./FlowRendererStateEntity.md#dragging)
- [id](./FlowRendererStateEntity.md#id)
- [isBranch](./FlowRendererStateEntity.md#isbranch)
- [onDispose](./FlowRendererStateEntity.md#ondispose)
- [savedInManager](./FlowRendererStateEntity.md#savedinmanager)
- [type](./FlowRendererStateEntity.md#type-1)
- [version](./FlowRendererStateEntity.md#version)
### Methods
- [addData](./FlowRendererStateEntity.md#adddata)
- [addInitializeData](./FlowRendererStateEntity.md#addinitializedata)
- [checkChanged](./FlowRendererStateEntity.md#checkchanged)
- [dispose](./FlowRendererStateEntity.md#dispose)
- [fromJSON](./FlowRendererStateEntity.md#fromjson)
- [getData](./FlowRendererStateEntity.md#getdata)
- [getDefaultConfig](./FlowRendererStateEntity.md#getdefaultconfig)
- [getDefaultDataRegistries](./FlowRendererStateEntity.md#getdefaultdataregistries)
- [getDragEntities](./FlowRendererStateEntity.md#getdragentities)
- [getDragLabelSide](./FlowRendererStateEntity.md#getdraglabelside)
- [getDragStartEntity](./FlowRendererStateEntity.md#getdragstartentity)
- [getNodeDroppingId](./FlowRendererStateEntity.md#getnodedroppingid)
- [getNodeHovered](./FlowRendererStateEntity.md#getnodehovered)
- [getService](./FlowRendererStateEntity.md#getservice)
- [hasData](./FlowRendererStateEntity.md#hasdata)
- [onConfigChanged](./FlowRendererStateEntity.md#onconfigchanged)
- [onNodeHoveredChange](./FlowRendererStateEntity.md#onnodehoveredchange)
- [removeData](./FlowRendererStateEntity.md#removedata)
- [reset](./FlowRendererStateEntity.md#reset)
- [setDragEntities](./FlowRendererStateEntity.md#setdragentities)
- [setDragLabelSide](./FlowRendererStateEntity.md#setdraglabelside)
- [setDragStartEntity](./FlowRendererStateEntity.md#setdragstartentity)
- [setDragging](./FlowRendererStateEntity.md#setdragging)
- [setIsBranch](./FlowRendererStateEntity.md#setisbranch)
- [setNodeDroppingId](./FlowRendererStateEntity.md#setnodedroppingid)
- [setNodeHovered](./FlowRendererStateEntity.md#setnodehovered)
- [toJSON](./FlowRendererStateEntity.md#tojson)
- [updateConfig](./FlowRendererStateEntity.md#updateconfig)
- [updateData](./FlowRendererStateEntity.md#updatedata)
## Constructors
### constructor
**new FlowRendererStateEntity**(`conf`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `conf` | `FlowRendererStateEntityConfig` |
#### Overrides
ConfigEntity\<
FlowRendererState,
FlowRendererStateEntityConfig
\>.constructor
## Properties
### \_\_opts\_type\_\_
**\_\_opts\_type\_\_**: `FlowRendererStateEntityConfig`
#### Inherited from
ConfigEntity.\_\_opts\_type\_\_
___
### entityManager
`Readonly` **entityManager**: `EntityManager`
全局的entity管理器
#### Inherited from
ConfigEntity.entityManager
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<`EntityDataChangedEvent`\<`Entity`\<`EntityOpts`\>\>\>
数据更改事件
#### Inherited from
ConfigEntity.onDataChange
___
### onEntityChange
`Readonly` **onEntityChange**: `Event`\<`Entity`\<`EntityOpts`\>\>
修改会触发
#### Inherited from
ConfigEntity.onEntityChange
___
### preDispose
`Readonly` **preDispose**: `DisposableCollection`
销毁前事件管理
#### Inherited from
ConfigEntity.preDispose
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
销毁事件管理
#### Inherited from
ConfigEntity.toDispose
___
### type
`Static` **type**: `string` = `'FlowRendererStateEntity'`
#### Overrides
ConfigEntity.type
## Accessors
### config
`get` **config**(): `P`
#### Returns
`P`
#### Inherited from
ConfigEntity.config
___
### context
`get` **context**(): `any`
#### Returns
`any`
#### Inherited from
ConfigEntity.context
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
ConfigEntity.disposed
___
### dragging
`get` **dragging**(): `undefined` \| `boolean`
#### Returns
`undefined` \| `boolean`
___
### id
`get` **id**(): `string`
实体 id
#### Returns
`string`
#### Inherited from
ConfigEntity.id
___
### isBranch
`get` **isBranch**(): `undefined` \| `boolean`
#### Returns
`undefined` \| `boolean`
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
销毁事件
#### Returns
`Event`\<`void`\>
#### Inherited from
ConfigEntity.onDispose
___
### savedInManager
`get` **savedInManager**(): `boolean`
是否存到全局 manager，默认 true
#### Returns
`boolean`
#### Inherited from
ConfigEntity.savedInManager
___
### type
`get` **type**(): `string`
实体类型
#### Returns
`string`
#### Inherited from
ConfigEntity.type
___
### version
`get` **version**(): `number`
实体的版本
#### Returns
`number`
#### Inherited from
ConfigEntity.version
## Methods
### addData
**addData**\<`D`\>(`Registry`, `defaultProps?`): `D`
添加数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\> |
| `defaultProps?` | `EntityDataProps`\<`D`\> |
#### Returns
`D`
#### Inherited from
ConfigEntity.addData
___
### addInitializeData
**addInitializeData**(`datas`, `dataConfig?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `datas` | `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[] |
| `dataConfig?` | `any` |
#### Returns
`void`
#### Inherited from
ConfigEntity.addInitializeData
___
### checkChanged
**checkChanged**(`oldData`, `newData`): `boolean`
判断 config 数据是否变化
#### Parameters
| Name | Type |
| :------ | :------ |
| `oldData` | `FlowRendererState` |
| `newData` | `Partial`\<`FlowRendererState`\> |
#### Returns
`boolean`
#### Inherited from
ConfigEntity.checkChanged
___
### dispose
**dispose**(): `void`
销毁实体
#### Returns
`void`
#### Inherited from
ConfigEntity.dispose
___
### fromJSON
**fromJSON**(`data?`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data?` | `any` |
#### Returns
`void`
#### Inherited from
ConfigEntity.fromJSON
___
### getData
**getData**\<`D`\>(`Registry`): `D`
获取 data 数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`D`\> |
#### Returns
`D`
#### Inherited from
ConfigEntity.getData
___
### getDefaultConfig
**getDefaultConfig**(): `Object`
#### Returns
`Object`
#### Overrides
ConfigEntity.getDefaultConfig
___
### getDefaultDataRegistries
**getDefaultDataRegistries**(): `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[]
默认初始化的 Data
#### Returns
`EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[]
#### Inherited from
ConfigEntity.getDefaultDataRegistries
___
### getDragEntities
**getDragEntities**(): [`FlowNodeEntity`](./FlowNodeEntity-1.md)[]
#### Returns
[`FlowNodeEntity`](./FlowNodeEntity-1.md)[]
___
### getDragLabelSide
**getDragLabelSide**(): `undefined` \| [`LABEL_SIDE_TYPE`](../enums/LABEL_SIDE_TYPE.md)
#### Returns
`undefined` \| [`LABEL_SIDE_TYPE`](../enums/LABEL_SIDE_TYPE.md)
___
### getDragStartEntity
**getDragStartEntity**(): `undefined` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md)
#### Returns
`undefined` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md)
___
### getNodeDroppingId
**getNodeDroppingId**(): `undefined` \| `string`
#### Returns
`undefined` \| `string`
___
### getNodeHovered
**getNodeHovered**(): `undefined` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md)
#### Returns
`undefined` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md)
___
### getService
**getService**\<`T`\>(`identifier`): `T`
获取 IOC 服务
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `identifier` | `ServiceIdentifier`\<`T`\> |
#### Returns
`T`
#### Inherited from
ConfigEntity.getService
___
### hasData
**hasData**(`Registry`): `boolean`
是否有指定数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\> |
#### Returns
`boolean`
#### Inherited from
ConfigEntity.hasData
___
### onConfigChanged
**onConfigChanged**(`fn`): `Disposable`
#### Parameters
| Name | Type |
| :------ | :------ |
| `fn` | (`data`: `FlowRendererState`) => `void` |
#### Returns
`Disposable`
#### Inherited from
ConfigEntity.onConfigChanged
___
### onNodeHoveredChange
**onNodeHoveredChange**(`fn`, `debounceTime?`): `Disposable`
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `fn` | (`hoveredNode`: `undefined` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md)) => `void` | `undefined` |
| `debounceTime` | `number` | `100` |
#### Returns
`Disposable`
___
### removeData
**removeData**\<`D`\>(`Registry`): `void`
删除数据，初始化状态注入的数据无法被删除
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`D`\> |
#### Returns
`void`
#### Inherited from
ConfigEntity.removeData
___
### reset
**reset**(): `void`
重制为初始化状态
#### Returns
`void`
#### Inherited from
ConfigEntity.reset
___
### setDragEntities
**setDragEntities**(`nodes`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `nodes` | [`FlowNodeEntity`](./FlowNodeEntity-1.md)[] |
#### Returns
`void`
___
### setDragLabelSide
**setDragLabelSide**(`dragLabelSide?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `dragLabelSide?` | [`LABEL_SIDE_TYPE`](../enums/LABEL_SIDE_TYPE.md) |
#### Returns
`void`
___
### setDragStartEntity
**setDragStartEntity**(`node?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `node?` | [`FlowNodeEntity`](./FlowNodeEntity-1.md) |
#### Returns
`void`
___
### setDragging
**setDragging**(`dragging`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `dragging` | `boolean` |
#### Returns
`void`
___
### setIsBranch
**setIsBranch**(`isBranch`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `isBranch` | `boolean` |
#### Returns
`void`
___
### setNodeDroppingId
**setNodeDroppingId**(`nodeDroppingId?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `nodeDroppingId?` | `string` |
#### Returns
`void`
___
### setNodeHovered
**setNodeHovered**(`node`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `undefined` \| [`FlowNodeEntity`](./FlowNodeEntity-1.md) |
#### Returns
`void`
___
### toJSON
**toJSON**(): `any`
存储数据，用于持久化存储
#### Returns
`any`
#### Inherited from
ConfigEntity.toJSON
___
### updateConfig
**updateConfig**(`props`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | `Partial`\<`FlowRendererState`\> |
#### Returns
`void`
#### Inherited from
ConfigEntity.updateConfig
___
### updateData
**updateData**\<`D`\>(`Registry`, `props`): `void`
更新实体的数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`D`\> |
| `props` | `EntityDataProps`\<`D`\> |
#### Returns
`void`
#### Inherited from
ConfigEntity.updateData
---
url: /auto-docs/document/classes/FlowVirtualTree-1.md
---
# Class: FlowVirtualTree\
存储节点的 tree 结构信息
策略是 "重修改轻查询"，即修改时候做的事情更多，查询都通过指针来操作
## Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `Object` |
## Implements
- `Disposable`
## Table of contents
### Constructors
- [constructor](./FlowVirtualTree-1.md#constructor)
### Properties
- [onTreeChange](./FlowVirtualTree-1.md#ontreechange)
- [root](./FlowVirtualTree-1.md#root)
### Accessors
- [size](./FlowVirtualTree-1.md#size)
### Methods
- [addChild](./FlowVirtualTree-1.md#addchild)
- [clear](./FlowVirtualTree-1.md#clear)
- [clone](./FlowVirtualTree-1.md#clone)
- [cloneMap](./FlowVirtualTree-1.md#clonemap)
- [dispose](./FlowVirtualTree-1.md#dispose)
- [fireTreeChange](./FlowVirtualTree-1.md#firetreechange)
- [getById](./FlowVirtualTree-1.md#getbyid)
- [getChildren](./FlowVirtualTree-1.md#getchildren)
- [getInfo](./FlowVirtualTree-1.md#getinfo)
- [getNext](./FlowVirtualTree-1.md#getnext)
- [getParent](./FlowVirtualTree-1.md#getparent)
- [getPre](./FlowVirtualTree-1.md#getpre)
- [insertAfter](./FlowVirtualTree-1.md#insertafter)
- [moveChilds](./FlowVirtualTree-1.md#movechilds)
- [remove](./FlowVirtualTree-1.md#remove)
- [removeParent](./FlowVirtualTree-1.md#removeparent)
- [toString](./FlowVirtualTree-1.md#tostring)
- [traverse](./FlowVirtualTree-1.md#traverse)
## Constructors
### constructor
**new FlowVirtualTree**\<`T`\>(`root`)
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `Object` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `root` | `T` |
## Properties
### onTreeChange
**onTreeChange**: `Event`\<`void`\>
tree 结构变化时候触发
___
### root
`Readonly` **root**: `T`
## Accessors
### size
`get` **size**(): `number`
#### Returns
`number`
## Methods
### addChild
**addChild**(`parent`, `child`, `index?`): `T`
#### Parameters
| Name | Type |
| :------ | :------ |
| `parent` | `T` |
| `child` | `T` |
| `index?` | `number` |
#### Returns
`T`
___
### clear
**clear**(): `void`
#### Returns
`void`
___
### clone
**clone**(): [`FlowVirtualTree`](./FlowVirtualTree-1.md)\<`T`\>
#### Returns
[`FlowVirtualTree`](./FlowVirtualTree-1.md)\<`T`\>
___
### cloneMap
**cloneMap**(): `Map`\<`T`, [`NodeInfo`](../interfaces/FlowVirtualTree.NodeInfo.md)\<`T`\>\>
#### Returns
`Map`\<`T`, [`NodeInfo`](../interfaces/FlowVirtualTree.NodeInfo.md)\<`T`\>\>
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Implementation of
Disposable.dispose
___
### fireTreeChange
**fireTreeChange**(): `void`
通知文档树结构更新
#### Returns
`void`
___
### getById
**getById**(`id`): `undefined` \| `T`
#### Parameters
| Name | Type |
| :------ | :------ |
| `id` | `string` |
#### Returns
`undefined` \| `T`
___
### getChildren
**getChildren**(`node`): `T`[]
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `T` |
#### Returns
`T`[]
___
### getInfo
**getInfo**(`node`): [`NodeInfo`](../interfaces/FlowVirtualTree.NodeInfo.md)\<`T`\>
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `T` |
#### Returns
[`NodeInfo`](../interfaces/FlowVirtualTree.NodeInfo.md)\<`T`\>
___
### getNext
**getNext**(`node`): `undefined` \| `T`
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `T` |
#### Returns
`undefined` \| `T`
___
### getParent
**getParent**(`node`): `undefined` \| `T`
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `T` |
#### Returns
`undefined` \| `T`
___
### getPre
**getPre**(`node`): `undefined` \| `T`
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `T` |
#### Returns
`undefined` \| `T`
___
### insertAfter
**insertAfter**(`before`, `after`): `void`
插入节点到后边
#### Parameters
| Name | Type |
| :------ | :------ |
| `before` | `T` |
| `after` | `T` |
#### Returns
`void`
___
### moveChilds
**moveChilds**(`parent`, `childs`, `index?`): `T`[]
#### Parameters
| Name | Type |
| :------ | :------ |
| `parent` | `T` |
| `childs` | `T`[] |
| `index?` | `number` |
#### Returns
`T`[]
___
### remove
**remove**(`node`, `withChildren?`): `void`
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `node` | `T` | `undefined` |
| `withChildren` | `boolean` | `true` |
#### Returns
`void`
___
### removeParent
**removeParent**(`node`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `T` |
#### Returns
`void`
___
### toString
**toString**(`showType?`): `string`
#### Parameters
| Name | Type |
| :------ | :------ |
| `showType?` | `boolean` |
#### Returns
`string`
___
### traverse
**traverse**(`fn`, `node?`, `depth?`, `index?`): `boolean` \| `void`
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `fn` | (`node`: `T`, `depth`: `number`, `index`: `number`) => `boolean` \| `void` | `undefined` |
| `node` | `T` | `undefined` |
| `depth` | `number` | `0` |
| `index` | `number` | `0` |
#### Returns
`boolean` \| `void`
---
url: /auto-docs/document/enums/DRAGGING_TYPE.md
---
# Enumeration: DRAGGING\_TYPE
拖拽种类枚举
1. 节点拖拽
2. 分支拖拽
## Table of contents
### Enumeration Members
- [BRANCH](./DRAGGING_TYPE.md#branch)
- [NODE](./DRAGGING_TYPE.md#node)
## Enumeration Members
### BRANCH
**BRANCH** = ``"branch"``
___
### NODE
**NODE** = ``"node"``
---
url: /auto-docs/document/enums/FlowDocumentConfigEnum.md
---
# Enumeration: FlowDocumentConfigEnum
## Table of contents
### Enumeration Members
- [END\_NODES\_REFINE\_BRANCH](./FlowDocumentConfigEnum.md#end_nodes_refine_branch)
## Enumeration Members
### END\_NODES\_REFINE\_BRANCH
**END\_NODES\_REFINE\_BRANCH** = ``"END_NODES_REFINE_BRANCH"``
---
url: /auto-docs/document/enums/FlowLayoutDefault-1.md
---
# Enumeration: FlowLayoutDefault
## Table of contents
### Enumeration Members
- [HORIZONTAL\_FIXED\_LAYOUT](./FlowLayoutDefault-1.md#horizontal_fixed_layout)
- [VERTICAL\_FIXED\_LAYOUT](./FlowLayoutDefault-1.md#vertical_fixed_layout)
## Enumeration Members
### HORIZONTAL\_FIXED\_LAYOUT
**HORIZONTAL\_FIXED\_LAYOUT** = ``"horizontal-fixed-layout"``
___
### VERTICAL\_FIXED\_LAYOUT
**VERTICAL\_FIXED\_LAYOUT** = ``"vertical-fixed-layout"``
---
url: /auto-docs/document/enums/FlowNodeBaseType.md
---
# Enumeration: FlowNodeBaseType
## Table of contents
### Enumeration Members
- [BLOCK](./FlowNodeBaseType.md#block)
- [BLOCK\_ICON](./FlowNodeBaseType.md#block_icon)
- [BLOCK\_ORDER\_ICON](./FlowNodeBaseType.md#block_order_icon)
- [BREAK](./FlowNodeBaseType.md#break)
- [CONDITION](./FlowNodeBaseType.md#condition)
- [DEFAULT](./FlowNodeBaseType.md#default)
- [EMPTY](./FlowNodeBaseType.md#empty)
- [END](./FlowNodeBaseType.md#end)
- [GROUP](./FlowNodeBaseType.md#group)
- [INLINE\_BLOCKS](./FlowNodeBaseType.md#inline_blocks)
- [INPUT](./FlowNodeBaseType.md#input)
- [MULTI\_INPUTS](./FlowNodeBaseType.md#multi_inputs)
- [MULTI\_OUTPUTS](./FlowNodeBaseType.md#multi_outputs)
- [OUTPUT](./FlowNodeBaseType.md#output)
- [ROOT](./FlowNodeBaseType.md#root)
- [SLOT](./FlowNodeBaseType.md#slot)
- [SLOT\_BLOCK](./FlowNodeBaseType.md#slot_block)
- [START](./FlowNodeBaseType.md#start)
- [SUB\_CANVAS](./FlowNodeBaseType.md#sub_canvas)
## Enumeration Members
### BLOCK
**BLOCK** = ``"block"``
___
### BLOCK\_ICON
**BLOCK\_ICON** = ``"blockIcon"``
___
### BLOCK\_ORDER\_ICON
**BLOCK\_ORDER\_ICON** = ``"blockOrderIcon"``
___
### BREAK
**BREAK** = ``"break"``
___
### CONDITION
**CONDITION** = ``"condition"``
___
### DEFAULT
**DEFAULT** = ``"default"``
___
### EMPTY
**EMPTY** = ``"empty"``
___
### END
**END** = ``"end"``
___
### GROUP
**GROUP** = ``"group"``
___
### INLINE\_BLOCKS
**INLINE\_BLOCKS** = ``"inlineBlocks"``
___
### INPUT
**INPUT** = ``"input"``
___
### MULTI\_INPUTS
**MULTI\_INPUTS** = ``"multiInputs"``
___
### MULTI\_OUTPUTS
**MULTI\_OUTPUTS** = ``"multiOutputs"``
___
### OUTPUT
**OUTPUT** = ``"output"``
___
### ROOT
**ROOT** = ``"root"``
___
### SLOT
**SLOT** = ``"slot"``
___
### SLOT\_BLOCK
**SLOT\_BLOCK** = ``"slotBlock"``
___
### START
**START** = ``"start"``
___
### SUB\_CANVAS
**SUB\_CANVAS** = ``"subCanvas"``
---
url: /auto-docs/document/enums/FlowNodeSplitType.md
---
# Enumeration: FlowNodeSplitType
## Table of contents
### Enumeration Members
- [DYNAMIC\_SPLIT](./FlowNodeSplitType.md#dynamic_split)
- [SIMPLE\_SPLIT](./FlowNodeSplitType.md#simple_split)
- [STATIC\_SPLIT](./FlowNodeSplitType.md#static_split)
## Enumeration Members
### DYNAMIC\_SPLIT
**DYNAMIC\_SPLIT** = ``"dynamicSplit"``
___
### SIMPLE\_SPLIT
**SIMPLE\_SPLIT** = ``"simpleSplit"``
___
### STATIC\_SPLIT
**STATIC\_SPLIT** = ``"staticSplit"``
---
url: /auto-docs/document/enums/FlowTransitionLabelEnum.md
---
# Enumeration: FlowTransitionLabelEnum
## Table of contents
### Enumeration Members
- [ADDER\_LABEL](./FlowTransitionLabelEnum.md#adder_label)
- [BRANCH\_DRAGGING\_LABEL](./FlowTransitionLabelEnum.md#branch_dragging_label)
- [COLLAPSE\_ADDER\_LABEL](./FlowTransitionLabelEnum.md#collapse_adder_label)
- [COLLAPSE\_LABEL](./FlowTransitionLabelEnum.md#collapse_label)
- [CUSTOM\_LABEL](./FlowTransitionLabelEnum.md#custom_label)
- [TEXT\_LABEL](./FlowTransitionLabelEnum.md#text_label)
## Enumeration Members
### ADDER\_LABEL
**ADDER\_LABEL** = ``0``
___
### BRANCH\_DRAGGING\_LABEL
**BRANCH\_DRAGGING\_LABEL** = ``5``
___
### COLLAPSE\_ADDER\_LABEL
**COLLAPSE\_ADDER\_LABEL** = ``3``
___
### COLLAPSE\_LABEL
**COLLAPSE\_LABEL** = ``2``
___
### CUSTOM\_LABEL
**CUSTOM\_LABEL** = ``4``
___
### TEXT\_LABEL
**TEXT\_LABEL** = ``1``
---
url: /auto-docs/document/enums/FlowTransitionLineEnum.md
---
# Enumeration: FlowTransitionLineEnum
## Table of contents
### Enumeration Members
- [CUSTOM\_LINE](./FlowTransitionLineEnum.md#custom_line)
- [DIVERGE\_LINE](./FlowTransitionLineEnum.md#diverge_line)
- [DRAGGING\_LINE](./FlowTransitionLineEnum.md#dragging_line)
- [MERGE\_LINE](./FlowTransitionLineEnum.md#merge_line)
- [ROUNDED\_LINE](./FlowTransitionLineEnum.md#rounded_line)
- [STRAIGHT\_LINE](./FlowTransitionLineEnum.md#straight_line)
## Enumeration Members
### CUSTOM\_LINE
**CUSTOM\_LINE** = ``4``
___
### DIVERGE\_LINE
**DIVERGE\_LINE** = ``1``
___
### DRAGGING\_LINE
**DRAGGING\_LINE** = ``5``
___
### MERGE\_LINE
**MERGE\_LINE** = ``2``
___
### ROUNDED\_LINE
**ROUNDED\_LINE** = ``3``
___
### STRAIGHT\_LINE
**STRAIGHT\_LINE** = ``0``
---
url: /auto-docs/document/enums/LABEL_SIDE_TYPE.md
---
# Enumeration: LABEL\_SIDE\_TYPE
拖拽分支 Adder、Line 类型
## Table of contents
### Enumeration Members
- [NORMAL\_BRANCH](./LABEL_SIDE_TYPE.md#normal_branch)
- [PRE\_BRANCH](./LABEL_SIDE_TYPE.md#pre_branch)
## Enumeration Members
### NORMAL\_BRANCH
**NORMAL\_BRANCH** = ``"normal_branch"``
___
### PRE\_BRANCH
**PRE\_BRANCH** = ``"pre_branch"``
---
url: /auto-docs/document/enums/OperationType.md
---
# Enumeration: OperationType
## Table of contents
### Enumeration Members
- [addBlock](./OperationType.md#addblock)
- [addChildNode](./OperationType.md#addchildnode)
- [addFromNode](./OperationType.md#addfromnode)
- [addNode](./OperationType.md#addnode)
- [addNodes](./OperationType.md#addnodes)
- [createGroup](./OperationType.md#creategroup)
- [deleteBlock](./OperationType.md#deleteblock)
- [deleteChildNode](./OperationType.md#deletechildnode)
- [deleteFromNode](./OperationType.md#deletefromnode)
- [deleteNode](./OperationType.md#deletenode)
- [deleteNodes](./OperationType.md#deletenodes)
- [moveBlock](./OperationType.md#moveblock)
- [moveChildNodes](./OperationType.md#movechildnodes)
- [moveNodes](./OperationType.md#movenodes)
- [ungroup](./OperationType.md#ungroup)
## Enumeration Members
### addBlock
**addBlock** = ``"addBlock"``
___
### addChildNode
**addChildNode** = ``"addChildNode"``
___
### addFromNode
**addFromNode** = ``"addFromNode"``
___
### addNode
**addNode** = ``"addNode"``
___
### addNodes
**addNodes** = ``"addNodes"``
___
### createGroup
**createGroup** = ``"createGroup"``
___
### deleteBlock
**deleteBlock** = ``"deleteBlock"``
___
### deleteChildNode
**deleteChildNode** = ``"deleteChildNode"``
___
### deleteFromNode
**deleteFromNode** = ``"deleteFromNode"``
___
### deleteNode
**deleteNode** = ``"deleteNode"``
___
### deleteNodes
**deleteNodes** = ``"deleteNodes"``
___
### moveBlock
**moveBlock** = ``"moveBlock"``
___
### moveChildNodes
**moveChildNodes** = ``"moveChildNodes"``
___
### moveNodes
**moveNodes** = ``"moveNodes"``
___
### ungroup
**ungroup** = ``"ungroup"``
---
url: /auto-docs/document/functions/DEFAULT_FLOW_NODE_META.md
---
# Function: DEFAULT\_FLOW\_NODE\_META
**DEFAULT_FLOW_NODE_META**(`nodeType`, `document`): [`FlowNodeMeta`](../interfaces/FlowNodeMeta.md)
默认 meta 配置
#### Parameters
| Name | Type |
| :------ | :------ |
| `nodeType` | [`FlowNodeType`](../types/FlowNodeType.md) |
| `document` | [`FlowDocument`](../classes/FlowDocument.md)\<[`FlowDocumentJSON`](../types/FlowDocumentJSON.md)\> |
#### Returns
[`FlowNodeMeta`](../interfaces/FlowNodeMeta.md)
---
url: /auto-docs/document/functions/FlowLayoutDefault.isVertical.md
---
# Function: isVertical
[FlowLayoutDefault](../modules/FlowLayoutDefault.md).isVertical
**isVertical**(`layout`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `layout` | [`FlowLayout`](../variables/FlowLayout-1.md) |
#### Returns
`boolean`
---
url: /auto-docs/document/functions/FlowNodeEntity.is.md
---
# Function: is
[FlowNodeEntity](../modules/FlowNodeEntity.md).is
**is**(`obj`): obj is FlowNodeEntity
#### Parameters
| Name | Type |
| :------ | :------ |
| `obj` | `Entity`\<`EntityOpts`\> |
#### Returns
obj is FlowNodeEntity
---
url: /auto-docs/document/functions/FlowNodeRegistry.extend.md
---
# Function: extend
[FlowNodeRegistry](../modules/FlowNodeRegistry.md).extend
**extend**(`registry`, `extendRegistries`): [`FlowNodeRegistry`](../interfaces/FlowNodeRegistry-1.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry` | [`FlowNodeRegistry`](../interfaces/FlowNodeRegistry-1.md)\<[`FlowNodeMeta`](../interfaces/FlowNodeMeta.md)\> |
| `extendRegistries` | [`FlowNodeRegistry`](../interfaces/FlowNodeRegistry-1.md)\<[`FlowNodeMeta`](../interfaces/FlowNodeMeta.md)\>[] |
#### Returns
[`FlowNodeRegistry`](../interfaces/FlowNodeRegistry-1.md)
---
url: /auto-docs/document/functions/FlowNodeRegistry.merge.md
---
# Function: merge
[FlowNodeRegistry](../modules/FlowNodeRegistry.md).merge
**merge**(`registry1`, `registry2`, `finalType`): [`FlowNodeRegistry`](../interfaces/FlowNodeRegistry-1.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `registry1` | [`FlowNodeRegistry`](../interfaces/FlowNodeRegistry-1.md)\<[`FlowNodeMeta`](../interfaces/FlowNodeMeta.md)\> |
| `registry2` | [`FlowNodeRegistry`](../interfaces/FlowNodeRegistry-1.md)\<[`FlowNodeMeta`](../interfaces/FlowNodeMeta.md)\> |
| `finalType` | [`FlowNodeType`](../types/FlowNodeType.md) |
#### Returns
[`FlowNodeRegistry`](../interfaces/FlowNodeRegistry-1.md)
---
url: /auto-docs/document/functions/FlowNodeRegistry.mergeChildRegistries.md
---
# Function: mergeChildRegistries
[FlowNodeRegistry](../modules/FlowNodeRegistry.md).mergeChildRegistries
**mergeChildRegistries**(`r1?`, `r2?`): [`FlowNodeRegistry`](../interfaces/FlowNodeRegistry-1.md)[]
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `r1` | [`FlowNodeRegistry`](../interfaces/FlowNodeRegistry-1.md)\<[`FlowNodeMeta`](../interfaces/FlowNodeMeta.md)\>[] | `[]` |
| `r2` | [`FlowNodeRegistry`](../interfaces/FlowNodeRegistry-1.md)\<[`FlowNodeMeta`](../interfaces/FlowNodeMeta.md)\>[] | `[]` |
#### Returns
[`FlowNodeRegistry`](../interfaces/FlowNodeRegistry-1.md)[]
---
url: /auto-docs/document/functions/drawLineToBottom.md
---
# Function: drawLineToBottom
**drawLineToBottom**(`transition`): \{ `from`: `IPoint` = currentOutput; `to`: `IPoint` = parentOutput; `type`: [`FlowTransitionLineEnum`](../enums/FlowTransitionLineEnum.md) = FlowTransitionLineEnum.STRAIGHT\_LINE }[]
#### Parameters
| Name | Type |
| :------ | :------ |
| `transition` | [`FlowNodeTransitionData`](../classes/FlowNodeTransitionData.md) |
#### Returns
\{ `from`: `IPoint` = currentOutput; `to`: `IPoint` = parentOutput; `type`: [`FlowTransitionLineEnum`](../enums/FlowTransitionLineEnum.md) = FlowTransitionLineEnum.STRAIGHT\_LINE }[]
---
url: /auto-docs/document/functions/drawLineToNext.md
---
# Function: drawLineToNext
**drawLineToNext**(`transition`): \{ `from`: `IPoint` = currentOutput; `to`: `IPoint` = transform.next.inputPoint; `type`: [`FlowTransitionLineEnum`](../enums/FlowTransitionLineEnum.md) = FlowTransitionLineEnum.STRAIGHT\_LINE }[]
#### Parameters
| Name | Type |
| :------ | :------ |
| `transition` | [`FlowNodeTransitionData`](../classes/FlowNodeTransitionData.md) |
#### Returns
\{ `from`: `IPoint` = currentOutput; `to`: `IPoint` = transform.next.inputPoint; `type`: [`FlowTransitionLineEnum`](../enums/FlowTransitionLineEnum.md) = FlowTransitionLineEnum.STRAIGHT\_LINE }[]
---
url: /auto-docs/document/functions/getDefaultSpacing.md
---
# Function: getDefaultSpacing
**getDefaultSpacing**(`node`, `key`, `defaultSpacing?`): `any`
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `node` | [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md) | 节点 entity |
| `key` | `string` | 从 DocumentOptions 里获取 constants 的 key |
| `defaultSpacing?` | `number` | 默认从 DEFAULT_SPACING 获取 spacing，也可以外部传入默认值 |
#### Returns
`any`
---
url: /auto-docs/document/interfaces/AddBlockConfig.md
---
# Interface: AddBlockConfig
添加block时的配置
## Table of contents
### Properties
- [index](./AddBlockConfig.md#index)
- [parent](./AddBlockConfig.md#parent)
## Properties
### index
`Optional` **index**: `number`
___
### parent
`Optional` **parent**: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
---
url: /auto-docs/document/interfaces/AddBlockOperation.md
---
# Interface: AddBlockOperation
## Table of contents
### Properties
- [type](./AddBlockOperation.md#type)
- [value](./AddBlockOperation.md#value)
## Properties
### type
**type**: [`addBlock`](../enums/OperationType.md#addblock)
___
### value
**value**: [`AddOrDeleteBlockValue`](./AddOrDeleteBlockValue.md)
---
url: /auto-docs/document/interfaces/AddChildNodeOperation.md
---
# Interface: AddChildNodeOperation
## Table of contents
### Properties
- [type](./AddChildNodeOperation.md#type)
- [value](./AddChildNodeOperation.md#value)
## Properties
### type
**type**: [`addChildNode`](../enums/OperationType.md#addchildnode)
___
### value
**value**: [`AddOrDeleteChildNodeValue`](./AddOrDeleteChildNodeValue.md)
---
url: /auto-docs/document/interfaces/AddFromNodeOperation.md
---
# Interface: AddFromNodeOperation
## Table of contents
### Properties
- [type](./AddFromNodeOperation.md#type)
- [value](./AddFromNodeOperation.md#value)
## Properties
### type
**type**: [`addFromNode`](../enums/OperationType.md#addfromnode)
___
### value
**value**: [`AddOrDeleteFromNodeOperationValue`](./AddOrDeleteFromNodeOperationValue.md)
---
url: /auto-docs/document/interfaces/AddNodeOperation.md
---
# Interface: AddNodeOperation
## Table of contents
### Properties
- [type](./AddNodeOperation.md#type)
- [value](./AddNodeOperation.md#value)
## Properties
### type
**type**: [`addNode`](../enums/OperationType.md#addnode)
___
### value
**value**: [`AddOrDeleteNodeValue`](./AddOrDeleteNodeValue.md)
---
url: /auto-docs/document/interfaces/AddNodesOperation.md
---
# Interface: AddNodesOperation
## Table of contents
### Properties
- [type](./AddNodesOperation.md#type)
- [value](./AddNodesOperation.md#value)
## Properties
### type
**type**: [`addNodes`](../enums/OperationType.md#addnodes)
___
### value
**value**: [`AddOrDeleteNodesOperationValue`](./AddOrDeleteNodesOperationValue.md)
---
url: /auto-docs/document/interfaces/AddOrDeleteBlockValue.md
---
# Interface: AddOrDeleteBlockValue
## Table of contents
### Properties
- [blockData](./AddOrDeleteBlockValue.md#blockdata)
- [index](./AddOrDeleteBlockValue.md#index)
- [parentId](./AddOrDeleteBlockValue.md#parentid)
- [targetId](./AddOrDeleteBlockValue.md#targetid)
## Properties
### blockData
**blockData**: [`FlowNodeJSON`](./FlowNodeJSON.md)
___
### index
`Optional` **index**: `number`
___
### parentId
`Optional` **parentId**: `string`
___
### targetId
**targetId**: `string`
---
url: /auto-docs/document/interfaces/AddOrDeleteChildNodeValue.md
---
# Interface: AddOrDeleteChildNodeValue
## Table of contents
### Properties
- [data](./AddOrDeleteChildNodeValue.md#data)
- [hidden](./AddOrDeleteChildNodeValue.md#hidden)
- [index](./AddOrDeleteChildNodeValue.md#index)
- [originParentId](./AddOrDeleteChildNodeValue.md#originparentid)
- [parentId](./AddOrDeleteChildNodeValue.md#parentid)
## Properties
### data
**data**: [`FlowNodeJSON`](./FlowNodeJSON.md)
___
### hidden
`Optional` **hidden**: `boolean`
___
### index
`Optional` **index**: `number`
___
### originParentId
`Optional` **originParentId**: `string`
___
### parentId
`Optional` **parentId**: `string`
---
url: /auto-docs/document/interfaces/AddOrDeleteFromNodeOperationValue.md
---
# Interface: AddOrDeleteFromNodeOperationValue
## Table of contents
### Properties
- [data](./AddOrDeleteFromNodeOperationValue.md#data)
- [fromId](./AddOrDeleteFromNodeOperationValue.md#fromid)
## Properties
### data
**data**: [`FlowNodeJSON`](./FlowNodeJSON.md)
___
### fromId
**fromId**: `string`
---
url: /auto-docs/document/interfaces/AddOrDeleteNodeOperationValue.md
---
# Interface: AddOrDeleteNodeOperationValue
## Table of contents
### Properties
- [data](./AddOrDeleteNodeOperationValue.md#data)
- [fromId](./AddOrDeleteNodeOperationValue.md#fromid)
## Properties
### data
**data**: [`FlowNodeJSON`](./FlowNodeJSON.md)
___
### fromId
**fromId**: `string`
---
url: /auto-docs/document/interfaces/AddOrDeleteNodeValue.md
---
# Interface: AddOrDeleteNodeValue
## Table of contents
### Properties
- [data](./AddOrDeleteNodeValue.md#data)
- [hidden](./AddOrDeleteNodeValue.md#hidden)
- [index](./AddOrDeleteNodeValue.md#index)
- [parentId](./AddOrDeleteNodeValue.md#parentid)
## Properties
### data
**data**: [`FlowNodeJSON`](./FlowNodeJSON.md)
___
### hidden
`Optional` **hidden**: `boolean`
___
### index
`Optional` **index**: `number`
___
### parentId
`Optional` **parentId**: `string`
---
url: /auto-docs/document/interfaces/AddOrDeleteNodesOperationValue.md
---
# Interface: AddOrDeleteNodesOperationValue
## Table of contents
### Properties
- [fromId](./AddOrDeleteNodesOperationValue.md#fromid)
- [nodes](./AddOrDeleteNodesOperationValue.md#nodes)
## Properties
### fromId
**fromId**: `string`
___
### nodes
**nodes**: [`FlowNodeJSON`](./FlowNodeJSON.md)[]
---
url: /auto-docs/document/interfaces/AdderProps.md
---
# Interface: AdderProps
## Hierarchy
- **`AdderProps`**
↳ [`CollapseAdderProps`](./CollapseAdderProps.md)
## Indexable
▪ [key: `string`]: `any`
## Table of contents
### Properties
- [from](./AdderProps.md#from)
- [node](./AdderProps.md#node)
- [renderTo](./AdderProps.md#renderto)
- [to](./AdderProps.md#to)
## Properties
### from
**from**: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
___
### node
**node**: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
___
### renderTo
**renderTo**: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
___
### to
**to**: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
---
url: /auto-docs/document/interfaces/CollapseAdderProps.md
---
# Interface: CollapseAdderProps
## Hierarchy
- [`AdderProps`](./AdderProps.md)
- [`CollapseProps`](./CollapseProps.md)
↳ **`CollapseAdderProps`**
## Indexable
▪ [key: `string`]: `any`
## Table of contents
### Properties
- [activateNode](./CollapseAdderProps.md#activatenode)
- [collapseNode](./CollapseAdderProps.md#collapsenode)
- [forceVisible](./CollapseAdderProps.md#forcevisible)
- [from](./CollapseAdderProps.md#from)
- [node](./CollapseAdderProps.md#node)
- [renderTo](./CollapseAdderProps.md#renderto)
- [to](./CollapseAdderProps.md#to)
## Properties
### activateNode
`Optional` **activateNode**: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
#### Inherited from
[CollapseProps](./CollapseProps.md).[activateNode](./CollapseProps.md#activatenode)
___
### collapseNode
**collapseNode**: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
#### Inherited from
[CollapseProps](./CollapseProps.md).[collapseNode](./CollapseProps.md#collapsenode)
___
### forceVisible
`Optional` **forceVisible**: `boolean`
#### Inherited from
[CollapseProps](./CollapseProps.md).[forceVisible](./CollapseProps.md#forcevisible)
___
### from
**from**: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
#### Inherited from
[AdderProps](./AdderProps.md).[from](./AdderProps.md#from)
___
### node
**node**: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
#### Inherited from
[CollapseProps](./CollapseProps.md).[node](./CollapseProps.md#node)
___
### renderTo
**renderTo**: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
#### Inherited from
[AdderProps](./AdderProps.md).[renderTo](./AdderProps.md#renderto)
___
### to
**to**: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
#### Inherited from
[AdderProps](./AdderProps.md).[to](./AdderProps.md#to)
---
url: /auto-docs/document/interfaces/CollapseProps.md
---
# Interface: CollapseProps
## Hierarchy
- **`CollapseProps`**
↳ [`CollapseAdderProps`](./CollapseAdderProps.md)
## Indexable
▪ [key: `string`]: `any`
## Table of contents
### Properties
- [activateNode](./CollapseProps.md#activatenode)
- [collapseNode](./CollapseProps.md#collapsenode)
- [forceVisible](./CollapseProps.md#forcevisible)
- [node](./CollapseProps.md#node)
## Properties
### activateNode
`Optional` **activateNode**: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
___
### collapseNode
**collapseNode**: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
___
### forceVisible
`Optional` **forceVisible**: `boolean`
___
### node
**node**: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
---
url: /auto-docs/document/interfaces/CreateGroupOperation.md
---
# Interface: CreateGroupOperation
## Table of contents
### Properties
- [type](./CreateGroupOperation.md#type)
- [value](./CreateGroupOperation.md#value)
## Properties
### type
**type**: [`createGroup`](../enums/OperationType.md#creategroup)
___
### value
**value**: [`createOrUngroupValue`](./createOrUngroupValue.md)
---
url: /auto-docs/document/interfaces/CustomLabelProps.md
---
# Interface: CustomLabelProps
## Indexable
▪ [key: `string`]: `any`
## Table of contents
### Properties
- [node](./CustomLabelProps.md#node)
## Properties
### node
**node**: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
---
url: /auto-docs/document/interfaces/DeleteBlockOperation.md
---
# Interface: DeleteBlockOperation
## Table of contents
### Properties
- [type](./DeleteBlockOperation.md#type)
- [value](./DeleteBlockOperation.md#value)
## Properties
### type
**type**: [`deleteBlock`](../enums/OperationType.md#deleteblock)
___
### value
**value**: [`AddOrDeleteBlockValue`](./AddOrDeleteBlockValue.md)
---
url: /auto-docs/document/interfaces/DeleteChildNodeOperation.md
---
# Interface: DeleteChildNodeOperation
## Table of contents
### Properties
- [type](./DeleteChildNodeOperation.md#type)
- [value](./DeleteChildNodeOperation.md#value)
## Properties
### type
**type**: [`deleteChildNode`](../enums/OperationType.md#deletechildnode)
___
### value
**value**: [`AddOrDeleteChildNodeValue`](./AddOrDeleteChildNodeValue.md)
---
url: /auto-docs/document/interfaces/DeleteFromNodeOperation.md
---
# Interface: DeleteFromNodeOperation
## Table of contents
### Properties
- [type](./DeleteFromNodeOperation.md#type)
- [value](./DeleteFromNodeOperation.md#value)
## Properties
### type
**type**: [`deleteFromNode`](../enums/OperationType.md#deletefromnode)
___
### value
**value**: [`AddOrDeleteFromNodeOperationValue`](./AddOrDeleteFromNodeOperationValue.md)
---
url: /auto-docs/document/interfaces/DeleteNodeOperation.md
---
# Interface: DeleteNodeOperation
## Table of contents
### Properties
- [type](./DeleteNodeOperation.md#type)
- [value](./DeleteNodeOperation.md#value)
## Properties
### type
**type**: [`deleteNode`](../enums/OperationType.md#deletenode)
___
### value
**value**: [`AddOrDeleteNodeValue`](./AddOrDeleteNodeValue.md)
---
url: /auto-docs/document/interfaces/DeleteNodesOperation.md
---
# Interface: DeleteNodesOperation
## Table of contents
### Properties
- [type](./DeleteNodesOperation.md#type)
- [value](./DeleteNodesOperation.md#value)
## Properties
### type
**type**: [`deleteNodes`](../enums/OperationType.md#deletenodes)
___
### value
**value**: [`AddOrDeleteNodesOperationValue`](./AddOrDeleteNodesOperationValue.md)
---
url: /auto-docs/document/interfaces/DragNodeProps.md
---
# Interface: DragNodeProps
## Table of contents
### Properties
- [node](./DragNodeProps.md#node)
## Properties
### node
**node**: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
---
url: /auto-docs/document/interfaces/FlowDocumentContribution.md
---
# Interface: FlowDocumentContribution\
## Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends [`FlowDocument`](../classes/FlowDocument.md) = [`FlowDocument`](../classes/FlowDocument.md) |
## Table of contents
### Methods
- [loadDocument](./FlowDocumentContribution.md#loaddocument)
- [registerDocument](./FlowDocumentContribution.md#registerdocument)
## Methods
### loadDocument
`Optional` **loadDocument**(`document`): `Promise`\<`void`\>
加载数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `document` | `T` |
#### Returns
`Promise`\<`void`\>
___
### registerDocument
`Optional` **registerDocument**(`document`): `void`
注册
#### Parameters
| Name | Type |
| :------ | :------ |
| `document` | `T` |
#### Returns
`void`
---
url: /auto-docs/document/interfaces/FlowDocumentOptions.md
---
# Interface: FlowDocumentOptions
流程画布配置
## Table of contents
### Properties
- [allNodesDefaultExpanded](./FlowDocumentOptions.md#allnodesdefaultexpanded)
- [constants](./FlowDocumentOptions.md#constants)
- [defaultLayout](./FlowDocumentOptions.md#defaultlayout)
- [formatNodeLabels](./FlowDocumentOptions.md#formatnodelabels)
- [formatNodeLines](./FlowDocumentOptions.md#formatnodelines)
- [getNodeDefaultRegistry](./FlowDocumentOptions.md#getnodedefaultregistry)
- [preNodeCreate](./FlowDocumentOptions.md#prenodecreate)
### Methods
- [fromNodeJSON](./FlowDocumentOptions.md#fromnodejson)
- [toNodeJSON](./FlowDocumentOptions.md#tonodejson)
## Properties
### allNodesDefaultExpanded
`Optional` **allNodesDefaultExpanded**: `boolean`
所有节点的默认展开状态
___
### constants
`Optional` **constants**: `Record`\<`string`, `any`\>
___
### defaultLayout
`Optional` **defaultLayout**: `string`
布局，默认 垂直布局
___
### formatNodeLabels
`Optional` **formatNodeLabels**: (`node`: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md), `lines`: [`FlowTransitionLabel`](./FlowTransitionLabel.md)[]) => [`FlowTransitionLabel`](./FlowTransitionLabel.md)[]
#### Type declaration
(`node`, `lines`): [`FlowTransitionLabel`](./FlowTransitionLabel.md)[]
##### Parameters
| Name | Type |
| :------ | :------ |
| `node` | [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md) |
| `lines` | [`FlowTransitionLabel`](./FlowTransitionLabel.md)[] |
##### Returns
[`FlowTransitionLabel`](./FlowTransitionLabel.md)[]
___
### formatNodeLines
`Optional` **formatNodeLines**: (`node`: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md), `lines`: [`FlowTransitionLine`](./FlowTransitionLine.md)[]) => [`FlowTransitionLine`](./FlowTransitionLine.md)[]
#### Type declaration
(`node`, `lines`): [`FlowTransitionLine`](./FlowTransitionLine.md)[]
##### Parameters
| Name | Type |
| :------ | :------ |
| `node` | [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md) |
| `lines` | [`FlowTransitionLine`](./FlowTransitionLine.md)[] |
##### Returns
[`FlowTransitionLine`](./FlowTransitionLine.md)[]
___
### getNodeDefaultRegistry
`Optional` **getNodeDefaultRegistry**: (`type`: [`FlowNodeType`](../types/FlowNodeType.md)) => [`FlowNodeRegistry`](./FlowNodeRegistry-1.md)\<[`FlowNodeMeta`](./FlowNodeMeta.md)\>
#### Type declaration
(`type`): [`FlowNodeRegistry`](./FlowNodeRegistry-1.md)\<[`FlowNodeMeta`](./FlowNodeMeta.md)\>
获取默认的节点配置
##### Parameters
| Name | Type |
| :------ | :------ |
| `type` | [`FlowNodeType`](../types/FlowNodeType.md) |
##### Returns
[`FlowNodeRegistry`](./FlowNodeRegistry-1.md)\<[`FlowNodeMeta`](./FlowNodeMeta.md)\>
___
### preNodeCreate
`Optional` **preNodeCreate**: (`node`: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)) => `void`
#### Type declaration
(`node`): `void`
##### Parameters
| Name | Type |
| :------ | :------ |
| `node` | [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md) |
##### Returns
`void`
## Methods
### fromNodeJSON
`Optional` **fromNodeJSON**(`node`, `json`, `isFirstCreate`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md) |
| `json` | [`FlowNodeJSON`](./FlowNodeJSON.md) |
| `isFirstCreate` | `boolean` |
#### Returns
`void`
___
### toNodeJSON
`Optional` **toNodeJSON**(`node`): [`FlowNodeJSON`](./FlowNodeJSON.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md) |
#### Returns
[`FlowNodeJSON`](./FlowNodeJSON.md)
---
url: /auto-docs/document/interfaces/FlowGroupJSON.md
---
# Interface: FlowGroupJSON
Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
SPDX-License-Identifier: MIT
## Table of contents
### Properties
- [nodeIDs](./FlowGroupJSON.md#nodeids)
## Properties
### nodeIDs
**nodeIDs**: `string`[]
---
url: /auto-docs/document/interfaces/FlowLayout.md
---
# Interface: FlowLayout
流程布局算法
## Table of contents
### Properties
- [name](./FlowLayout.md#name)
### Methods
- [getDefaultInputPoint](./FlowLayout.md#getdefaultinputpoint)
- [getDefaultNodeOrigin](./FlowLayout.md#getdefaultnodeorigin)
- [getDefaultOutputPoint](./FlowLayout.md#getdefaultoutputpoint)
- [getInitScroll](./FlowLayout.md#getinitscroll)
- [getPadding](./FlowLayout.md#getpadding)
- [reload](./FlowLayout.md#reload)
- [update](./FlowLayout.md#update)
## Properties
### name
**name**: `string`
布局名字
## Methods
### getDefaultInputPoint
**getDefaultInputPoint**(`node`): `IPoint`
获取默认输入点
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md) |
#### Returns
`IPoint`
___
### getDefaultNodeOrigin
**getDefaultNodeOrigin**(): `IPoint`
获取默认远点
#### Returns
`IPoint`
___
### getDefaultOutputPoint
**getDefaultOutputPoint**(`node`): `IPoint`
获取默认输出点
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md) |
#### Returns
`IPoint`
___
### getInitScroll
**getInitScroll**(`contentSize`): `ScrollSchema`
获取默认滚动 目前用在 scroll-limit-layer
#### Parameters
| Name | Type |
| :------ | :------ |
| `contentSize` | `SizeSchema` |
#### Returns
`ScrollSchema`
___
### getPadding
**getPadding**(`node`): `PaddingSchema`
获取节点的 padding 数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md) |
#### Returns
`PaddingSchema`
___
### reload
`Optional` **reload**(): `void`
布局切换时候触发
#### Returns
`void`
___
### update
**update**(): `void`
更新布局
#### Returns
`void`
---
url: /auto-docs/document/interfaces/FlowLayoutContribution.md
---
# Interface: FlowLayoutContribution
## Table of contents
### Properties
- [onAfterUpdateLocalTransform](./FlowLayoutContribution.md#onafterupdatelocaltransform)
## Properties
### onAfterUpdateLocalTransform
`Optional` **onAfterUpdateLocalTransform**: (`transform`: [`FlowNodeTransformData`](../classes/FlowNodeTransformData.md), `layout`: [`FlowLayout`](../variables/FlowLayout-1.md)) => `void`
#### Type declaration
(`transform`, `layout`): `void`
##### Parameters
| Name | Type |
| :------ | :------ |
| `transform` | [`FlowNodeTransformData`](../classes/FlowNodeTransformData.md) |
| `layout` | [`FlowLayout`](../variables/FlowLayout-1.md) |
##### Returns
`void`
---
url: /auto-docs/document/interfaces/FlowNodeEntityConfig.md
---
# Interface: FlowNodeEntityConfig
## Hierarchy
- `EntityOpts`
↳ **`FlowNodeEntityConfig`**
## Table of contents
### Properties
- [datas](./FlowNodeEntityConfig.md#datas)
- [document](./FlowNodeEntityConfig.md#document)
- [entityManager](./FlowNodeEntityConfig.md#entitymanager)
- [flowNodeType](./FlowNodeEntityConfig.md#flownodetype)
- [id](./FlowNodeEntityConfig.md#id)
- [meta](./FlowNodeEntityConfig.md#meta)
- [originParent](./FlowNodeEntityConfig.md#originparent)
- [savedInManager](./FlowNodeEntityConfig.md#savedinmanager)
## Properties
### datas
`Optional` **datas**: \{ `data?`: `any` ; `registry`: `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\> }[]
#### Inherited from
EntityOpts.datas
___
### document
**document**: [`FlowDocument`](../classes/FlowDocument.md)\<[`FlowDocumentJSON`](../types/FlowDocumentJSON.md)\>
___
### entityManager
**entityManager**: `EntityManager`
#### Inherited from
EntityOpts.entityManager
___
### flowNodeType
**flowNodeType**: [`FlowNodeType`](../types/FlowNodeType.md)
___
### id
`Optional` **id**: `string`
#### Inherited from
EntityOpts.id
___
### meta
`Optional` **meta**: [`FlowNodeMeta`](./FlowNodeMeta.md)
___
### originParent
`Optional` **originParent**: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
___
### savedInManager
`Optional` **savedInManager**: `boolean`
#### Inherited from
EntityOpts.savedInManager
---
url: /auto-docs/document/interfaces/FlowNodeInitData.md
---
# Interface: FlowNodeInitData
## Table of contents
### Properties
- [hidden](./FlowNodeInitData.md#hidden)
- [index](./FlowNodeInitData.md#index)
- [meta](./FlowNodeInitData.md#meta)
- [originParent](./FlowNodeInitData.md#originparent)
- [parent](./FlowNodeInitData.md#parent)
## Properties
### hidden
`Optional` **hidden**: `boolean`
___
### index
`Optional` **index**: `number`
___
### meta
`Optional` **meta**: [`FlowNodeMeta`](./FlowNodeMeta.md)
___
### originParent
`Optional` **originParent**: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
___
### parent
`Optional` **parent**: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
---
url: /auto-docs/document/interfaces/FlowNodeJSON.md
---
# Interface: FlowNodeJSON
Flow node json data
## Table of contents
### Properties
- [blocks](./FlowNodeJSON.md#blocks)
- [data](./FlowNodeJSON.md#data)
- [id](./FlowNodeJSON.md#id)
- [meta](./FlowNodeJSON.md#meta)
- [type](./FlowNodeJSON.md#type)
## Properties
### blocks
`Optional` **blocks**: [`FlowNodeJSON`](./FlowNodeJSON.md)[]
___
### data
`Optional` **data**: `Record`\<`string`, `any`\>
___
### id
**id**: `string`
___
### meta
`Optional` **meta**: [`FlowNodeMeta`](./FlowNodeMeta.md)
___
### type
`Optional` **type**: `string` \| `number`
---
url: /auto-docs/document/interfaces/FlowNodeMeta.md
---
# Interface: FlowNodeMeta
节点渲染相关配置信息，可扩展
## Indexable
▪ [key: `string`]: `any`
## Table of contents
### Properties
- [addDisable](./FlowNodeMeta.md#adddisable)
- [addable](./FlowNodeMeta.md#addable)
- [autoResizeDisable](./FlowNodeMeta.md#autoresizedisable)
- [copyDisable](./FlowNodeMeta.md#copydisable)
- [defaultCollapsed](./FlowNodeMeta.md#defaultcollapsed)
- [defaultExpanded](./FlowNodeMeta.md#defaultexpanded)
- [deleteDisable](./FlowNodeMeta.md#deletedisable)
- [draggable](./FlowNodeMeta.md#draggable)
- [expandable](./FlowNodeMeta.md#expandable)
- [hidden](./FlowNodeMeta.md#hidden)
- [inlineSpacingAfter](./FlowNodeMeta.md#inlinespacingafter)
- [inlineSpacingPre](./FlowNodeMeta.md#inlinespacingpre)
- [isInlineBlocks](./FlowNodeMeta.md#isinlineblocks)
- [isNodeEnd](./FlowNodeMeta.md#isnodeend)
- [isStart](./FlowNodeMeta.md#isstart)
- [minInlineBlockSpacing](./FlowNodeMeta.md#mininlineblockspacing)
- [origin](./FlowNodeMeta.md#origin)
- [padding](./FlowNodeMeta.md#padding)
- [renderKey](./FlowNodeMeta.md#renderkey)
- [selectable](./FlowNodeMeta.md#selectable)
- [size](./FlowNodeMeta.md#size)
- [spacing](./FlowNodeMeta.md#spacing)
## Properties
### addDisable
`Optional` **addDisable**: `boolean`
___
### addable
`Optional` **addable**: `boolean`
___
### autoResizeDisable
`Optional` **autoResizeDisable**: `boolean`
___
### copyDisable
`Optional` **copyDisable**: `boolean`
___
### defaultCollapsed
`Optional` **defaultCollapsed**: `boolean`
___
### defaultExpanded
`Optional` **defaultExpanded**: `boolean`
___
### deleteDisable
`Optional` **deleteDisable**: `boolean`
___
### draggable
`Optional` **draggable**: `boolean` \| (`node`: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)) => `boolean`
___
### expandable
`Optional` **expandable**: `boolean`
___
### hidden
`Optional` **hidden**: `boolean`
___
### inlineSpacingAfter
`Optional` **inlineSpacingAfter**: `number` \| (`transform`: [`FlowNodeTransformData`](../classes/FlowNodeTransformData.md)) => `number`
___
### inlineSpacingPre
`Optional` **inlineSpacingPre**: `number` \| (`transform`: [`FlowNodeTransformData`](../classes/FlowNodeTransformData.md)) => `number`
___
### isInlineBlocks
`Optional` **isInlineBlocks**: `boolean` \| (`node`: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)) => `boolean`
___
### isNodeEnd
`Optional` **isNodeEnd**: `boolean`
___
### isStart
`Optional` **isStart**: `boolean`
___
### minInlineBlockSpacing
`Optional` **minInlineBlockSpacing**: `number` \| (`node`: [`FlowNodeTransformData`](../classes/FlowNodeTransformData.md)) => `number`
___
### origin
`Optional` **origin**: `OriginSchema`
**`Deprecated`**
使用 NodeRegister.getOrigin 代替
___
### padding
`Optional` **padding**: `PaddingSchema` \| (`transform`: [`FlowNodeTransformData`](../classes/FlowNodeTransformData.md)) => `PaddingSchema`
___
### renderKey
`Optional` **renderKey**: `string`
___
### selectable
`Optional` **selectable**: `boolean` \| (`node`: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md), `mousePos?`: `PositionSchema`) => `boolean`
___
### size
`Optional` **size**: `SizeSchema`
___
### spacing
`Optional` **spacing**: `number` \| (`transform`: [`FlowNodeTransformData`](../classes/FlowNodeTransformData.md)) => `number`
---
url: /auto-docs/document/interfaces/FlowNodeRegistry-1.md
---
# Interface: FlowNodeRegistry\
节点注册
## Type parameters
| Name | Type |
| :------ | :------ |
| `M` | extends [`FlowNodeMeta`](./FlowNodeMeta.md) = [`FlowNodeMeta`](./FlowNodeMeta.md) |
## Indexable
▪ [key: `string`]: `any`
## Table of contents
### Properties
- [\_\_extends\_\_](./FlowNodeRegistry-1.md#__extends__)
- [addChild](./FlowNodeRegistry-1.md#addchild)
- [dataRegistries](./FlowNodeRegistry-1.md#dataregistries)
- [extend](./FlowNodeRegistry-1.md#extend)
- [extendChildRegistries](./FlowNodeRegistry-1.md#extendchildregistries)
- [getChildDelta](./FlowNodeRegistry-1.md#getchilddelta)
- [getChildLabels](./FlowNodeRegistry-1.md#getchildlabels)
- [getChildLines](./FlowNodeRegistry-1.md#getchildlines)
- [getDelta](./FlowNodeRegistry-1.md#getdelta)
- [getInputPoint](./FlowNodeRegistry-1.md#getinputpoint)
- [getLabels](./FlowNodeRegistry-1.md#getlabels)
- [getLines](./FlowNodeRegistry-1.md#getlines)
- [getOriginDeltaX](./FlowNodeRegistry-1.md#getorigindeltax)
- [getOriginDeltaY](./FlowNodeRegistry-1.md#getorigindeltay)
- [getOutputPoint](./FlowNodeRegistry-1.md#getoutputpoint)
- [meta](./FlowNodeRegistry-1.md#meta)
- [onAfterUpdateLocalTransform](./FlowNodeRegistry-1.md#onafterupdatelocaltransform)
- [onBlockChildCreate](./FlowNodeRegistry-1.md#onblockchildcreate)
- [onCreate](./FlowNodeRegistry-1.md#oncreate)
- [type](./FlowNodeRegistry-1.md#type)
### Methods
- [getOrigin](./FlowNodeRegistry-1.md#getorigin)
## Properties
### \_\_extends\_\_
`Optional` **\_\_extends\_\_**: [`FlowNodeType`](../types/FlowNodeType.md)[]
内部用于继承逻辑判断，不要使用
___
### addChild
`Optional` **addChild**: (`node`: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md), `json`: [`FlowNodeJSON`](./FlowNodeJSON.md), `options?`: \{ `hidden?`: `boolean` ; `index?`: `number` }) => [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
#### Type declaration
(`node`, `json`, `options?`): [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
##### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `node` | [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md) | 节点 |
| `json` | [`FlowNodeJSON`](./FlowNodeJSON.md) | 添加的节点 JSON |
| `options?` | `Object` | 其它配置 |
| `options.hidden?` | `boolean` | - |
| `options.index?` | `number` | - |
##### Returns
[`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
**`Deprecated`**
自定义子节点添加逻辑
___
### dataRegistries
`Optional` **dataRegistries**: `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[]
节点注册的数据，可以理解为 ECS 里的 Component, 这里可以配置自定义数据
___
### extend
`Optional` **extend**: `string`
从另外一个注册扩展
___
### extendChildRegistries
`Optional` **extendChildRegistries**: [`FlowNodeRegistry`](./FlowNodeRegistry-1.md)\<[`FlowNodeMeta`](./FlowNodeMeta.md)\>[]
子节点的 registry 覆盖，这里通过 originParent 来查找
___
### getChildDelta
`Optional` **getChildDelta**: (`childBlock`: [`FlowNodeTransformData`](../classes/FlowNodeTransformData.md), `layout`: [`FlowLayout`](../variables/FlowLayout-1.md)) => `undefined` \| `IPoint`
#### Type declaration
(`childBlock`, `layout`): `undefined` \| `IPoint`
通过 parent 计算当前节点的偏移，规则同 getDelta
##### Parameters
| Name | Type |
| :------ | :------ |
| `childBlock` | [`FlowNodeTransformData`](../classes/FlowNodeTransformData.md) |
| `layout` | [`FlowLayout`](../variables/FlowLayout-1.md) |
##### Returns
`undefined` \| `IPoint`
___
### getChildLabels
`Optional` **getChildLabels**: (`transition`: [`FlowNodeTransitionData`](../classes/FlowNodeTransitionData.md), `layout`: [`FlowLayout`](../variables/FlowLayout-1.md)) => [`FlowTransitionLabel`](./FlowTransitionLabel.md)[]
#### Type declaration
(`transition`, `layout`): [`FlowTransitionLabel`](./FlowTransitionLabel.md)[]
调整子节点的 Labels，优先级高于子节点本身的 getLabels
##### Parameters
| Name | Type |
| :------ | :------ |
| `transition` | [`FlowNodeTransitionData`](../classes/FlowNodeTransitionData.md) |
| `layout` | [`FlowLayout`](../variables/FlowLayout-1.md) |
##### Returns
[`FlowTransitionLabel`](./FlowTransitionLabel.md)[]
___
### getChildLines
`Optional` **getChildLines**: (`transition`: [`FlowNodeTransitionData`](../classes/FlowNodeTransitionData.md), `layout`: [`FlowLayout`](../variables/FlowLayout-1.md)) => [`FlowTransitionLine`](./FlowTransitionLine.md)[]
#### Type declaration
(`transition`, `layout`): [`FlowTransitionLine`](./FlowTransitionLine.md)[]
调整子节点的线条，优先级高于子节点本身的 getLines
##### Parameters
| Name | Type |
| :------ | :------ |
| `transition` | [`FlowNodeTransitionData`](../classes/FlowNodeTransitionData.md) |
| `layout` | [`FlowLayout`](../variables/FlowLayout-1.md) |
##### Returns
[`FlowTransitionLine`](./FlowTransitionLine.md)[]
___
### getDelta
`Optional` **getDelta**: (`transform`: [`FlowNodeTransformData`](../classes/FlowNodeTransformData.md), `layout`: [`FlowLayout`](../variables/FlowLayout-1.md)) => `undefined` \| `IPoint`
#### Type declaration
(`transform`, `layout`): `undefined` \| `IPoint`
获取当前节点 Position 偏移量，偏移量计算只能使用已经计算完的数据，如上一个节点或者子节点，不然会造成 o(n^2) 复杂度
1. 切记不要用当前节点的 localBounds(相对位置 bbox)，因为 delta 计算发生在 localBounds 计算之前
2. 切记不要用 bounds(绝对位置 bbox, 会触发所有父节点绝对位置计算), bounds 只能在最终 render 时候使用
3. 可以用 pre 节点 和 子节点的 localBounds 或者 size 数据，因为子节点是先算的
4. 可以用当前节点的 size (所有子节点的最大 bbox), 这是已经确定下来的
##### Parameters
| Name | Type |
| :------ | :------ |
| `transform` | [`FlowNodeTransformData`](../classes/FlowNodeTransformData.md) |
| `layout` | [`FlowLayout`](../variables/FlowLayout-1.md) |
##### Returns
`undefined` \| `IPoint`
___
### getInputPoint
`Optional` **getInputPoint**: (`transform`: [`FlowNodeTransformData`](../classes/FlowNodeTransformData.md), `layout`: [`FlowLayout`](../variables/FlowLayout-1.md)) => `IPoint`
#### Type declaration
(`transform`, `layout`): `IPoint`
自定义输入节点
##### Parameters
| Name | Type |
| :------ | :------ |
| `transform` | [`FlowNodeTransformData`](../classes/FlowNodeTransformData.md) |
| `layout` | [`FlowLayout`](../variables/FlowLayout-1.md) |
##### Returns
`IPoint`
___
### getLabels
`Optional` **getLabels**: (`transition`: [`FlowNodeTransitionData`](../classes/FlowNodeTransitionData.md), `layout`: [`FlowLayout`](../variables/FlowLayout-1.md)) => [`FlowTransitionLabel`](./FlowTransitionLabel.md)[]
#### Type declaration
(`transition`, `layout`): [`FlowTransitionLabel`](./FlowTransitionLabel.md)[]
创建 label
##### Parameters
| Name | Type |
| :------ | :------ |
| `transition` | [`FlowNodeTransitionData`](../classes/FlowNodeTransitionData.md) |
| `layout` | [`FlowLayout`](../variables/FlowLayout-1.md) |
##### Returns
[`FlowTransitionLabel`](./FlowTransitionLabel.md)[]
___
### getLines
`Optional` **getLines**: (`transition`: [`FlowNodeTransitionData`](../classes/FlowNodeTransitionData.md), `layout`: [`FlowLayout`](../variables/FlowLayout-1.md)) => [`FlowTransitionLine`](./FlowTransitionLine.md)[]
#### Type declaration
(`transition`, `layout`): [`FlowTransitionLine`](./FlowTransitionLine.md)[]
创建线条
##### Parameters
| Name | Type |
| :------ | :------ |
| `transition` | [`FlowNodeTransitionData`](../classes/FlowNodeTransitionData.md) |
| `layout` | [`FlowLayout`](../variables/FlowLayout-1.md) |
##### Returns
[`FlowTransitionLine`](./FlowTransitionLine.md)[]
___
### getOriginDeltaX
`Optional` **getOriginDeltaX**: (`transform`: [`FlowNodeTransformData`](../classes/FlowNodeTransformData.md), `layout`: [`FlowLayout`](../variables/FlowLayout-1.md)) => `number`
#### Type declaration
(`transform`, `layout`): `number`
原点 X 偏移
##### Parameters
| Name | Type |
| :------ | :------ |
| `transform` | [`FlowNodeTransformData`](../classes/FlowNodeTransformData.md) |
| `layout` | [`FlowLayout`](../variables/FlowLayout-1.md) |
##### Returns
`number`
___
### getOriginDeltaY
`Optional` **getOriginDeltaY**: (`transform`: [`FlowNodeTransformData`](../classes/FlowNodeTransformData.md), `layout`: [`FlowLayout`](../variables/FlowLayout-1.md)) => `number`
#### Type declaration
(`transform`, `layout`): `number`
原点 Y 偏移
##### Parameters
| Name | Type |
| :------ | :------ |
| `transform` | [`FlowNodeTransformData`](../classes/FlowNodeTransformData.md) |
| `layout` | [`FlowLayout`](../variables/FlowLayout-1.md) |
##### Returns
`number`
___
### getOutputPoint
`Optional` **getOutputPoint**: (`transform`: [`FlowNodeTransformData`](../classes/FlowNodeTransformData.md), `layoutKey`: [`FlowLayout`](../variables/FlowLayout-1.md)) => `IPoint`
#### Type declaration
(`transform`, `layoutKey`): `IPoint`
自定义输出节点
##### Parameters
| Name | Type |
| :------ | :------ |
| `transform` | [`FlowNodeTransformData`](../classes/FlowNodeTransformData.md) |
| `layoutKey` | [`FlowLayout`](../variables/FlowLayout-1.md) |
##### Returns
`IPoint`
___
### meta
`Optional` **meta**: `Partial`\<`M`\>
节点画布相关初始化配置信息，会覆盖 DEFAULT_FLOW_NODE_META
___
### onAfterUpdateLocalTransform
`Optional` **onAfterUpdateLocalTransform**: (`transform`: [`FlowNodeTransformData`](../classes/FlowNodeTransformData.md), `layout`: [`FlowLayout`](../variables/FlowLayout-1.md)) => `void`
#### Type declaration
(`transform`, `layout`): `void`
在当前节点布局完成后调用，可以对布局做更精细的调整
##### Parameters
| Name | Type |
| :------ | :------ |
| `transform` | [`FlowNodeTransformData`](../classes/FlowNodeTransformData.md) |
| `layout` | [`FlowLayout`](../variables/FlowLayout-1.md) |
##### Returns
`void`
___
### onBlockChildCreate
`Optional` **onBlockChildCreate**: (`node`: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md), `json`: [`FlowNodeJSON`](./FlowNodeJSON.md), `addedNodes?`: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)[]) => [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
#### Type declaration
(`node`, `json`, `addedNodes?`): [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
添加子 block，一般用于分支的动态添加
##### Parameters
| Name | Type |
| :------ | :------ |
| `node` | [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md) |
| `json` | [`FlowNodeJSON`](./FlowNodeJSON.md) |
| `addedNodes?` | [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)[] |
##### Returns
[`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
___
### onCreate
`Optional` **onCreate**: (`node`: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md), `json`: [`FlowNodeJSON`](./FlowNodeJSON.md)) => `void` \| [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)[]
#### Type declaration
(`node`, `json`): `void` \| [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)[]
自定义创建节点，可以自定义节点的树形结构
返回新加入的节点，这样才能统计缓存
##### Parameters
| Name | Type |
| :------ | :------ |
| `node` | [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md) |
| `json` | [`FlowNodeJSON`](./FlowNodeJSON.md) |
##### Returns
`void` \| [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)[]
**`Action`**
使用该方法，在创建时候将会忽略 json blocks 数据，而是交给适用节点自己处理 json 逻辑
___
### type
**type**: [`FlowNodeType`](../types/FlowNodeType.md)
节点类型
## Methods
### getOrigin
`Optional` **getOrigin**(`transform`, `layout`): `IPoint`
动态获取原点，会覆盖 meta.origin
#### Parameters
| Name | Type |
| :------ | :------ |
| `transform` | [`FlowNodeTransformData`](../classes/FlowNodeTransformData.md) |
| `layout` | [`FlowLayout`](../variables/FlowLayout-1.md) |
#### Returns
`IPoint`
---
url: /auto-docs/document/interfaces/FlowNodeRenderSchema.md
---
# Interface: FlowNodeRenderSchema
## Table of contents
### Properties
- [activated](./FlowNodeRenderSchema.md#activated)
- [addable](./FlowNodeRenderSchema.md#addable)
- [collapsed](./FlowNodeRenderSchema.md#collapsed)
- [dragging](./FlowNodeRenderSchema.md#dragging)
- [expandable](./FlowNodeRenderSchema.md#expandable)
- [expanded](./FlowNodeRenderSchema.md#expanded)
- [extInfo](./FlowNodeRenderSchema.md#extinfo)
- [hovered](./FlowNodeRenderSchema.md#hovered)
- [stackIndex](./FlowNodeRenderSchema.md#stackindex)
## Properties
### activated
**activated**: `boolean`
___
### addable
**addable**: `boolean`
___
### collapsed
`Optional` **collapsed**: `boolean`
___
### dragging
**dragging**: `boolean`
___
### expandable
**expandable**: `boolean`
___
### expanded
**expanded**: `boolean`
___
### extInfo
`Optional` **extInfo**: `Record`\<`string`, `any`\>
___
### hovered
**hovered**: `boolean`
___
### stackIndex
**stackIndex**: `number`
---
url: /auto-docs/document/interfaces/FlowNodeTransformSchema.md
---
# Interface: FlowNodeTransformSchema
## Table of contents
### Properties
- [size](./FlowNodeTransformSchema.md#size)
## Properties
### size
**size**: `SizeSchema`
---
url: /auto-docs/document/interfaces/FlowNodeTransitionSchema.md
---
# Interface: FlowNodeTransitionSchema
---
url: /auto-docs/document/interfaces/FlowOperationBaseService.md
---
# Interface: FlowOperationBaseService
## Hierarchy
- `Disposable`
↳ **`FlowOperationBaseService`**
## Table of contents
### Properties
- [onNodeAdd](./FlowOperationBaseService.md#onnodeadd)
- [onNodeMove](./FlowOperationBaseService.md#onnodemove)
### Methods
- [addBlock](./FlowOperationBaseService.md#addblock)
- [addFromNode](./FlowOperationBaseService.md#addfromnode)
- [addNode](./FlowOperationBaseService.md#addnode)
- [apply](./FlowOperationBaseService.md#apply)
- [deleteNode](./FlowOperationBaseService.md#deletenode)
- [deleteNodes](./FlowOperationBaseService.md#deletenodes)
- [dispose](./FlowOperationBaseService.md#dispose)
- [dragNodes](./FlowOperationBaseService.md#dragnodes)
- [moveNode](./FlowOperationBaseService.md#movenode)
## Properties
### onNodeAdd
**onNodeAdd**: `Event`\<[`OnNodeAddEvent`](./OnNodeAddEvent.md)\>
添加节点的回调
___
### onNodeMove
**onNodeMove**: `Event`\<[`OnNodeMoveEvent`](./OnNodeMoveEvent.md)\>
节点移动的回调
## Methods
### addBlock
**addBlock**(`target`, `blockJSON`, `config?`): [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
添加块（分支）
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `target` | [`FlowNodeEntityOrId`](../types/FlowNodeEntityOrId.md) | 目标 |
| `blockJSON` | [`FlowNodeJSON`](./FlowNodeJSON.md) | 块数据 |
| `config?` | [`AddBlockConfig`](./AddBlockConfig.md) | 配置 |
#### Returns
[`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
___
### addFromNode
**addFromNode**(`fromNode`, `nodeJSON`): [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
基于某一个起始节点往后面添加
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `fromNode` | [`FlowNodeEntityOrId`](../types/FlowNodeEntityOrId.md) | 起始节点 |
| `nodeJSON` | [`FlowNodeJSON`](./FlowNodeJSON.md) | 添加的节点JSON |
#### Returns
[`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
___
### addNode
**addNode**(`nodeJSON`, `config?`): [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
添加节点，如果节点已经存在则不会重复创建
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `nodeJSON` | [`FlowNodeJSON`](./FlowNodeJSON.md) | 节点数据 |
| `config?` | [`AddNodeConfig`](../types/AddNodeConfig.md) | 配置 |
#### Returns
[`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
成功添加的节点
___
### apply
**apply**(`operation`): `any`
执行操作
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `operation` | [`FlowOperation`](../types/FlowOperation.md) | 可序列化的操作 |
#### Returns
`any`
操作返回
___
### deleteNode
**deleteNode**(`node`): `void`
删除节点
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `node` | [`FlowNodeEntityOrId`](../types/FlowNodeEntityOrId.md) | 节点 |
#### Returns
`void`
___
### deleteNodes
**deleteNodes**(`nodes`): `void`
批量删除节点
#### Parameters
| Name | Type |
| :------ | :------ |
| `nodes` | [`FlowNodeEntityOrId`](../types/FlowNodeEntityOrId.md)[] |
#### Returns
`void`
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Inherited from
Disposable.dispose
___
### dragNodes
**dragNodes**(`param0`): `void`
拖拽节点
#### Parameters
| Name | Type |
| :------ | :------ |
| `param0` | `Object` |
| `param0.dropNode` | [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md) |
| `param0.nodes` | [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)[] |
#### Returns
`void`
___
### moveNode
**moveNode**(`node`, `config?`): `void`
移动节点
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `node` | [`FlowNodeEntityOrId`](../types/FlowNodeEntityOrId.md) | 被移动的节点 |
| `config?` | [`MoveNodeConfig`](./MoveNodeConfig.md) | 移动节点配置 |
#### Returns
`void`
---
url: /auto-docs/document/interfaces/FlowTransitionLabel.md
---
# Interface: FlowTransitionLabel
## Table of contents
### Properties
- [labelId](./FlowTransitionLabel.md#labelid)
- [offset](./FlowTransitionLabel.md#offset)
- [origin](./FlowTransitionLabel.md#origin)
- [props](./FlowTransitionLabel.md#props)
- [renderKey](./FlowTransitionLabel.md#renderkey)
- [rotate](./FlowTransitionLabel.md#rotate)
- [type](./FlowTransitionLabel.md#type)
- [width](./FlowTransitionLabel.md#width)
## Properties
### labelId
`Optional` **labelId**: `string`
___
### offset
**offset**: `IPoint`
___
### origin
`Optional` **origin**: [`number`, `number`]
Anchor point for positioning, relative to the label's bounding box
重心偏移量，相对于标签边界框
Format: [x, y] / 格式：[x, y]
Default Value: [0.5, 0.5] indicates center / 默认值：[0.5, 0.5] 表示居中
___
### props
`Optional` **props**: `Record`\<`string`, `any`\>
___
### renderKey
`Optional` **renderKey**: `string`
___
### rotate
`Optional` **rotate**: `string`
___
### type
**type**: [`FlowTransitionLabelEnum`](../enums/FlowTransitionLabelEnum.md)
___
### width
`Optional` **width**: `number`
---
url: /auto-docs/document/interfaces/FlowTransitionLine.md
---
# Interface: FlowTransitionLine
## Table of contents
### Properties
- [activated](./FlowTransitionLine.md#activated)
- [arrow](./FlowTransitionLine.md#arrow)
- [from](./FlowTransitionLine.md#from)
- [isDraggingLine](./FlowTransitionLine.md#isdraggingline)
- [isHorizontal](./FlowTransitionLine.md#ishorizontal)
- [lineId](./FlowTransitionLine.md#lineid)
- [renderKey](./FlowTransitionLine.md#renderkey)
- [side](./FlowTransitionLine.md#side)
- [style](./FlowTransitionLine.md#style)
- [to](./FlowTransitionLine.md#to)
- [type](./FlowTransitionLine.md#type)
- [vertices](./FlowTransitionLine.md#vertices)
## Properties
### activated
`Optional` **activated**: `boolean`
___
### arrow
`Optional` **arrow**: `boolean`
___
### from
**from**: `IPoint`
___
### isDraggingLine
`Optional` **isDraggingLine**: `boolean`
___
### isHorizontal
`Optional` **isHorizontal**: `boolean`
___
### lineId
`Optional` **lineId**: `string`
___
### renderKey
`Optional` **renderKey**: `string`
___
### side
`Optional` **side**: [`LABEL_SIDE_TYPE`](../enums/LABEL_SIDE_TYPE.md)
___
### style
`Optional` **style**: `CSSProperties`
___
### to
**to**: `IPoint`
___
### type
**type**: [`FlowTransitionLineEnum`](../enums/FlowTransitionLineEnum.md)
___
### vertices
`Optional` **vertices**: [`Vertex`](./Vertex.md)[]
---
url: /auto-docs/document/interfaces/FlowVirtualTree.NodeInfo.md
---
# Interface: NodeInfo\
[FlowVirtualTree](../modules/FlowVirtualTree.md).NodeInfo
## Type parameters
| Name |
| :------ |
| `T` |
## Table of contents
### Properties
- [children](./FlowVirtualTree.NodeInfo.md#children)
- [next](./FlowVirtualTree.NodeInfo.md#next)
- [parent](./FlowVirtualTree.NodeInfo.md#parent)
- [pre](./FlowVirtualTree.NodeInfo.md#pre)
## Properties
### children
**children**: `T`[]
___
### next
`Optional` **next**: `T`
___
### parent
`Optional` **parent**: `T`
___
### pre
`Optional` **pre**: `T`
---
url: /auto-docs/document/interfaces/MoveBlockOperation.md
---
# Interface: MoveBlockOperation
## Table of contents
### Properties
- [type](./MoveBlockOperation.md#type)
- [value](./MoveBlockOperation.md#value)
## Properties
### type
**type**: [`moveBlock`](../enums/OperationType.md#moveblock)
___
### value
**value**: [`MoveBlockOperationValue`](../types/MoveBlockOperationValue.md)
---
url: /auto-docs/document/interfaces/MoveChildNodesOperation.md
---
# Interface: MoveChildNodesOperation
## Table of contents
### Properties
- [type](./MoveChildNodesOperation.md#type)
- [value](./MoveChildNodesOperation.md#value)
## Properties
### type
**type**: [`moveChildNodes`](../enums/OperationType.md#movechildnodes)
___
### value
**value**: [`MoveChildNodesOperationValue`](./MoveChildNodesOperationValue.md)
---
url: /auto-docs/document/interfaces/MoveChildNodesOperationValue.md
---
# Interface: MoveChildNodesOperationValue
## Table of contents
### Properties
- [fromIndex](./MoveChildNodesOperationValue.md#fromindex)
- [fromParentId](./MoveChildNodesOperationValue.md#fromparentid)
- [nodeIds](./MoveChildNodesOperationValue.md#nodeids)
- [toIndex](./MoveChildNodesOperationValue.md#toindex)
- [toParentId](./MoveChildNodesOperationValue.md#toparentid)
## Properties
### fromIndex
**fromIndex**: `number`
___
### fromParentId
**fromParentId**: `string`
___
### nodeIds
**nodeIds**: `string`[]
___
### toIndex
**toIndex**: `number`
___
### toParentId
**toParentId**: `string`
---
url: /auto-docs/document/interfaces/MoveNodeConfig.md
---
# Interface: MoveNodeConfig
移动节点时的配置
## Table of contents
### Properties
- [index](./MoveNodeConfig.md#index)
- [parent](./MoveNodeConfig.md#parent)
## Properties
### index
`Optional` **index**: `number`
___
### parent
`Optional` **parent**: [`FlowNodeEntityOrId`](../types/FlowNodeEntityOrId.md)
---
url: /auto-docs/document/interfaces/MoveNodesOperation.md
---
# Interface: MoveNodesOperation
## Table of contents
### Properties
- [type](./MoveNodesOperation.md#type)
- [value](./MoveNodesOperation.md#value)
## Properties
### type
**type**: [`moveNodes`](../enums/OperationType.md#movenodes)
___
### value
**value**: [`MoveNodesOperationValue`](./MoveNodesOperationValue.md)
---
url: /auto-docs/document/interfaces/MoveNodesOperationValue.md
---
# Interface: MoveNodesOperationValue
## Table of contents
### Properties
- [fromId](./MoveNodesOperationValue.md#fromid)
- [nodeIds](./MoveNodesOperationValue.md#nodeids)
- [toId](./MoveNodesOperationValue.md#toid)
## Properties
### fromId
**fromId**: `string`
___
### nodeIds
**nodeIds**: `string`[]
___
### toId
**toId**: `string`
---
url: /auto-docs/document/interfaces/OnNodeAddEvent.md
---
# Interface: OnNodeAddEvent
节点添加事件
## Table of contents
### Properties
- [data](./OnNodeAddEvent.md#data)
- [node](./OnNodeAddEvent.md#node)
## Properties
### data
**data**: [`AddNodeData`](../types/AddNodeData.md)
___
### node
**node**: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
---
url: /auto-docs/document/interfaces/OnNodeMoveEvent.md
---
# Interface: OnNodeMoveEvent
节点移动事件
## Table of contents
### Properties
- [fromIndex](./OnNodeMoveEvent.md#fromindex)
- [fromParent](./OnNodeMoveEvent.md#fromparent)
- [node](./OnNodeMoveEvent.md#node)
- [toIndex](./OnNodeMoveEvent.md#toindex)
- [toParent](./OnNodeMoveEvent.md#toparent)
## Properties
### fromIndex
**fromIndex**: `number`
___
### fromParent
**fromParent**: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
___
### node
**node**: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
___
### toIndex
**toIndex**: `number`
___
### toParent
**toParent**: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
---
url: /auto-docs/document/interfaces/UngroupOperation.md
---
# Interface: UngroupOperation
## Table of contents
### Properties
- [type](./UngroupOperation.md#type)
- [value](./UngroupOperation.md#value)
## Properties
### type
**type**: [`ungroup`](../enums/OperationType.md#ungroup)
___
### value
**value**: [`createOrUngroupValue`](./createOrUngroupValue.md)
---
url: /auto-docs/document/interfaces/Vertex.md
---
# Interface: Vertex
## Hierarchy
- `IPoint`
↳ **`Vertex`**
## Table of contents
### Properties
- [moveX](./Vertex.md#movex)
- [moveY](./Vertex.md#movey)
- [radiusOverflow](./Vertex.md#radiusoverflow)
- [radiusX](./Vertex.md#radiusx)
- [radiusY](./Vertex.md#radiusy)
- [x](./Vertex.md#x)
- [y](./Vertex.md#y)
## Properties
### moveX
`Optional` **moveX**: `number`
___
### moveY
`Optional` **moveY**: `number`
___
### radiusOverflow
`Optional` **radiusOverflow**: ``"compress"`` \| ``"truncate"``
Strategy for handling arc curvature when space is insufficient, defaults to compress
___
### radiusX
`Optional` **radiusX**: `number`
___
### radiusY
`Optional` **radiusY**: `number`
___
### x
**x**: `number`
X coord
#### Inherited from
IPoint.x
___
### y
**y**: `number`
Y coord
#### Inherited from
IPoint.y
---
url: /auto-docs/document/interfaces/createOrUngroupValue.md
---
# Interface: createOrUngroupValue
## Table of contents
### Properties
- [groupId](./createOrUngroupValue.md#groupid)
- [nodeIds](./createOrUngroupValue.md#nodeids)
- [targetId](./createOrUngroupValue.md#targetid)
## Properties
### groupId
**groupId**: `string`
___
### nodeIds
**nodeIds**: `string`[]
___
### targetId
**targetId**: `string`
---
url: /auto-docs/document/modules/FlowLayoutDefault.md
---
# Namespace: FlowLayoutDefault
## Table of contents
### Functions
- [isVertical](../functions/FlowLayoutDefault.isVertical.md)
---
url: /auto-docs/document/modules/FlowNodeEntity.md
---
# Namespace: FlowNodeEntity
## Table of contents
### Functions
- [is](../functions/FlowNodeEntity.is.md)
---
url: /auto-docs/document/modules/FlowNodeRegistry.md
---
# Namespace: FlowNodeRegistry
## Table of contents
### Functions
- [extend](../functions/FlowNodeRegistry.extend.md)
- [merge](../functions/FlowNodeRegistry.merge.md)
- [mergeChildRegistries](../functions/FlowNodeRegistry.mergeChildRegistries.md)
---
url: /auto-docs/document/modules/FlowVirtualTree.md
---
# Namespace: FlowVirtualTree
## Table of contents
### Interfaces
- [NodeInfo](../interfaces/FlowVirtualTree.NodeInfo.md)
---
url: /auto-docs/document/types/AddNodeConfig.md
---
# Type alias: AddNodeConfig
**AddNodeConfig**: `Object`
#### Type declaration
| Name | Type |
| :------ | :------ |
| `hidden?` | `boolean` |
| `index?` | `number` |
| `parent?` | [`FlowNodeEntityOrId`](./FlowNodeEntityOrId.md) |
---
url: /auto-docs/document/types/AddNodeData.md
---
# Type alias: AddNodeData
**AddNodeData**: [`FlowNodeJSON`](../interfaces/FlowNodeJSON.md) & \{ `hidden?`: `boolean` ; `index?`: `number` ; `originParent?`: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md) ; `parent?`: [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md) }
---
url: /auto-docs/document/types/FlowDocumentJSON.md
---
# Type alias: FlowDocumentJSON
**FlowDocumentJSON**: `Object`
#### Type declaration
| Name | Type |
| :------ | :------ |
| `nodes` | [`FlowNodeJSON`](../interfaces/FlowNodeJSON.md)[] |
---
url: /auto-docs/document/types/FlowDocumentProvider.md
---
# Type alias: FlowDocumentProvider
**FlowDocumentProvider**: () => [`FlowDocument`](../classes/FlowDocument.md)
#### Type declaration
(): [`FlowDocument`](../classes/FlowDocument.md)
##### Returns
[`FlowDocument`](../classes/FlowDocument.md)
---
url: /auto-docs/document/types/FlowNodeEntityOrId.md
---
# Type alias: FlowNodeEntityOrId
**FlowNodeEntityOrId**: `string` \| [`FlowNodeEntity`](../classes/FlowNodeEntity-1.md)
---
url: /auto-docs/document/types/FlowNodeType.md
---
# Type alias: FlowNodeType
**FlowNodeType**: `string` \| `number`
---
url: /auto-docs/document/types/FlowOperation.md
---
# Type alias: FlowOperation
**FlowOperation**: [`AddFromNodeOperation`](../interfaces/AddFromNodeOperation.md) \| [`DeleteFromNodeOperation`](../interfaces/DeleteFromNodeOperation.md) \| [`AddBlockOperation`](../interfaces/AddBlockOperation.md) \| [`DeleteBlockOperation`](../interfaces/DeleteBlockOperation.md) \| [`CreateGroupOperation`](../interfaces/CreateGroupOperation.md) \| [`UngroupOperation`](../interfaces/UngroupOperation.md) \| [`MoveNodesOperation`](../interfaces/MoveNodesOperation.md) \| [`AddNodesOperation`](../interfaces/AddNodesOperation.md) \| [`DeleteNodesOperation`](../interfaces/DeleteNodesOperation.md) \| [`MoveBlockOperation`](../interfaces/MoveBlockOperation.md) \| [`AddChildNodeOperation`](../interfaces/AddChildNodeOperation.md) \| [`DeleteChildNodeOperation`](../interfaces/DeleteChildNodeOperation.md) \| [`MoveChildNodesOperation`](../interfaces/MoveChildNodesOperation.md) \| [`AddNodeOperation`](../interfaces/AddNodeOperation.md) \| [`DeleteNodeOperation`](../interfaces/DeleteNodeOperation.md)
---
url: /auto-docs/document/types/MoveBlockOperationValue.md
---
# Type alias: MoveBlockOperationValue
**MoveBlockOperationValue**: `Object`
#### Type declaration
| Name | Type |
| :------ | :------ |
| `fromIndex` | `number` |
| `fromParentId` | `string` |
| `nodeId` | `string` |
| `toIndex` | `number` |
| `toParentId` | `string` |
---
url: /auto-docs/document/variables/ConstantKeys.md
---
# Variable: ConstantKeys
`Const` **ConstantKeys**: `Object`
支持外部 constants 自定义的 key 枚举
#### Type declaration
| Name | Type | Description |
| :------ | :------ | :------ |
| `BASE_ACTIVATED_COLOR` | `string` | 线条、label 激活后的颜色 |
| `BASE_COLOR` | `string` | 线条、label 默认颜色 |
| `BRANCH_SPACING` | `string` | 分支节点间距 |
| `COLLAPSED_SPACING` | `string` | 复合节点距离上个节点的距离 条件分支菱形下边和分支的距离 |
| `HOVER_AREA_WIDTH` | `string` | width of hover area |
| `INLINE_BLOCKS_INLINE_SPACING_BOTTOM` | `string` | inlineBlocks 的 inlineBottom loop 循环线条的下边距 |
| `INLINE_BLOCKS_INLINE_SPACING_TOP` | `string` | inlineBlocks 的 inlineTop loop 循环线条上边距 |
| `INLINE_BLOCKS_PADDING_BOTTOM` | `string` | dynamicSplit block list 下部留白间距，因为有两个拐弯，所以翻一倍 |
| `INLINE_BLOCKS_PADDING_TOP` | `string` | Branch bottom margin 分支下边距 |
| `INLINE_SPACING_BOTTOM` | `string` | loop 底部留白 |
| `NODE_SPACING` | `string` | 普通节点间距。垂直 / 水平 |
| `ROUNDED_LINE_RADIUS` | `string` | 圆弧线条拐角 radius |
| `ROUNDED_LINE_X_RADIUS` | `string` | 圆弧线条 x radius |
| `ROUNDED_LINE_Y_RADIUS` | `string` | 圆弧线条 y radius |
---
url: /auto-docs/document/variables/DEFAULT_SIZE.md
---
# Variable: DEFAULT\_SIZE
`Const` **DEFAULT\_SIZE**: `Object`
默认节点大小
#### Type declaration
| Name | Type |
| :------ | :------ |
| `height` | `number` |
| `width` | `number` |
---
url: /auto-docs/document/variables/DEFAULT_SPACING.md
---
# Variable: DEFAULT\_SPACING
`Const` **DEFAULT\_SPACING**: `Object`
默认一些间隔参数
#### Type declaration
| Name | Type | Description |
| :------ | :------ | :------ |
| `INLINE_BLOCKS_PADDING_TOP` | `number` | - |
| `INLINE_BLOCK_PADDING_BOTTOM` | `number` | - |
| `MARGIN_RIGHT` | `number` | **`Deprecated`** use 'BRANCH_SPACING' instead |
| `MIN_INLINE_BLOCK_SPACING` | `number` | - |
| `MIN_INLINE_BLOCK_SPACING_HORIZONTAL` | `number` | - |
| `NULL` | `number` | - |
---
url: /auto-docs/document/variables/DefaultSpacingKey.md
---
# Variable: DefaultSpacingKey
`Const` **DefaultSpacingKey**: `Object`
spacing default key 值
#### Type declaration
| Name | Type | Description |
| :------ | :------ | :------ |
| `BRANCH_SPACING` | `string` | 分支节点间距 |
| `COLLAPSED_SPACING` | `string` | 复合节点距离上个节点的距离 条件分支菱形下边和分支的距离 |
| `HOVER_AREA_WIDTH` | `string` | width of hover area |
| `INLINE_BLOCKS_PADDING_BOTTOM` | `string` | dynamicSplit block list 下部留白间距，因为有两个拐弯，所以翻一倍 |
| `NODE_SPACING` | `string` | 普通节点间距。垂直 / 水平 |
| `ROUNDED_LINE_RADIUS` | `string` | 圆弧线条拐角 radius |
| `ROUNDED_LINE_X_RADIUS` | `string` | 圆弧线条 x radius |
| `ROUNDED_LINE_Y_RADIUS` | `string` | 圆弧线条 y radius |
---
url: /auto-docs/document/variables/FLOW_DEFAULT_HIDDEN_TYPES.md
---
# Variable: FLOW\_DEFAULT\_HIDDEN\_TYPES
`Const` **FLOW\_DEFAULT\_HIDDEN\_TYPES**: [`FlowNodeType`](../types/FlowNodeType.md)[]
---
url: /auto-docs/document/variables/FlowDocumentConfigDefaultData.md
---
# Variable: FlowDocumentConfigDefaultData
`Const` **FlowDocumentConfigDefaultData**: typeof [`FlowDocumentConfigDefaultData`](./FlowDocumentConfigDefaultData.md)
---
url: /auto-docs/document/variables/FlowDocumentContainerModule.md
---
# Variable: FlowDocumentContainerModule
`Const` **FlowDocumentContainerModule**: `ContainerModule`
---
url: /auto-docs/document/variables/FlowDocumentContribution-1.md
---
# Variable: FlowDocumentContribution
`Const` **FlowDocumentContribution**: typeof [`FlowDocumentContribution`](./FlowDocumentContribution-1.md)
---
url: /auto-docs/document/variables/FlowDocumentOptions-1.md
---
# Variable: FlowDocumentOptions
`Const` **FlowDocumentOptions**: typeof [`FlowDocumentOptions`](./FlowDocumentOptions-1.md)
---
url: /auto-docs/document/variables/FlowDocumentOptionsDefault.md
---
# Variable: FlowDocumentOptionsDefault
`Const` **FlowDocumentOptionsDefault**: [`FlowDocumentOptions`](./FlowDocumentOptions-1.md)
---
url: /auto-docs/document/variables/FlowDocumentProvider-1.md
---
# Variable: FlowDocumentProvider
**FlowDocumentProvider**: typeof [`FlowDocumentProvider`](./FlowDocumentProvider-1.md)
---
url: /auto-docs/document/variables/FlowLayout-1.md
---
# Variable: FlowLayout
`Const` **FlowLayout**: typeof [`FlowLayout`](./FlowLayout-1.md)
---
url: /auto-docs/document/variables/FlowLayoutContribution-1.md
---
# Variable: FlowLayoutContribution
`Const` **FlowLayoutContribution**: typeof [`FlowLayoutContribution`](./FlowLayoutContribution-1.md)
---
url: /auto-docs/document/variables/FlowOperationBaseService-1.md
---
# Variable: FlowOperationBaseService
**FlowOperationBaseService**: typeof [`FlowOperationBaseService`](./FlowOperationBaseService-1.md)
---
url: /auto-docs/fixed-layout-core/variables/FixedLayoutContainerModule.md
---
# Variable: FixedLayoutContainerModule
`Const` **FixedLayoutContainerModule**: `ContainerModule`
---
url: /auto-docs/fixed-layout-core/variables/FixedLayoutRegistries.md
---
# Variable: FixedLayoutRegistries
`Const` **FixedLayoutRegistries**: `Object`
#### Type declaration
| Name | Type |
| :------ | :------ |
| `BlockIconRegistry` | `FlowNodeRegistry`\<`FlowNodeMeta`\> |
| `BlockOrderIconRegistry` | `FlowNodeRegistry`\<`FlowNodeMeta`\> |
| `BlockRegistry` | `FlowNodeRegistry`\<`FlowNodeMeta`\> |
| `DynamicSplitRegistry` | `FlowNodeRegistry`\<`FlowNodeMeta`\> |
| `EmptyRegistry` | `FlowNodeRegistry`\<`FlowNodeMeta`\> |
| `EndRegistry` | `FlowNodeRegistry`\<`FlowNodeMeta`\> |
| `InlineBlocksRegistry` | `FlowNodeRegistry`\<`FlowNodeMeta`\> |
| `LoopRegistry` | `FlowNodeRegistry`\<`FlowNodeMeta`\> |
| `RootRegistry` | `FlowNodeRegistry`\<`FlowNodeMeta`\> |
| `SlotBlockRegistry` | `FlowNodeRegistry`\<`FlowNodeMeta`\> |
| `SlotIconRegistry` | `FlowNodeRegistry`\<`FlowNodeMeta`\> |
| `SlotInlineBlocksRegistry` | `FlowNodeRegistry`\<`FlowNodeMeta`\> |
| `SlotRegistry` | `FlowNodeRegistry`\<`FlowNodeMeta`\> |
| `StartRegistry` | `FlowNodeRegistry`\<`FlowNodeMeta`\> |
| `StaticSplitRegistry` | `FlowNodeRegistry`\<`FlowNodeMeta`\> |
| `TryCatchRegistry` | `FlowNodeRegistry`\<`FlowNodeMeta`\> |
---
url: /auto-docs/fixed-layout-core/variables/SlotSpacingKey.md
---
# Variable: SlotSpacingKey
`Const` **SlotSpacingKey**: `Object`
#### Type declaration
| Name | Type | Description |
| :------ | :------ | :------ |
| `SLOT_BLOCK_PORT_DISTANCE` | `string` | = Slot Block - Slot Port |
| `SLOT_BLOCK_VERTICAL_SPACING` | `string` | Vertical Layout: Slot Block - Slot Block |
| `SLOT_LABEL_DISTANCE` | `string` | = Slot Label - Slot Start |
| `SLOT_PORT_DISTANCE` | `string` | = Slot Port - Slot Start |
| `SLOT_RADIUS` | `string` | = Slot Radius |
| `SLOT_SPACING` | `string` | = Next Node - Slot END |
| `SLOT_START_DISTANCE` | `string` | = Slot Start Line - Slot Icon Right |
---
url: /auto-docs/free-layout-core/classes/WorkflowDocument.md
---
# Class: WorkflowDocument
## Hierarchy
- `FlowDocument`
↳ **`WorkflowDocument`**
## Table of contents
### Constructors
- [constructor](./WorkflowDocument.md#constructor)
### Properties
- [config](./WorkflowDocument.md#config)
- [linesManager](./WorkflowDocument.md#linesmanager)
- [nodeEngineContext](./WorkflowDocument.md#nodeenginecontext)
- [onContentChange](./WorkflowDocument.md#oncontentchange)
- [onLayoutChange](./WorkflowDocument.md#onlayoutchange)
- [onLoaded](./WorkflowDocument.md#onloaded)
- [onNodeCreate](./WorkflowDocument.md#onnodecreate)
- [onNodeDispose](./WorkflowDocument.md#onnodedispose)
- [onNodeUpdate](./WorkflowDocument.md#onnodeupdate)
- [onReload](./WorkflowDocument.md#onreload)
- [options](./WorkflowDocument.md#options)
- [originTree](./WorkflowDocument.md#origintree)
- [playgroundConfig](./WorkflowDocument.md#playgroundconfig)
- [playgroundContext](./WorkflowDocument.md#playgroundcontext)
- [renderState](./WorkflowDocument.md#renderstate)
- [renderTree](./WorkflowDocument.md#rendertree)
- [root](./WorkflowDocument.md#root)
- [selectServices](./WorkflowDocument.md#selectservices)
- [transformer](./WorkflowDocument.md#transformer)
### Accessors
- [disposed](./WorkflowDocument.md#disposed)
- [layout](./WorkflowDocument.md#layout)
- [loading](./WorkflowDocument.md#loading)
- [size](./WorkflowDocument.md#size)
### Methods
- [addBlock](./WorkflowDocument.md#addblock)
- [addBlocksAsChildren](./WorkflowDocument.md#addblocksaschildren)
- [addFromNode](./WorkflowDocument.md#addfromnode)
- [addInlineBlocks](./WorkflowDocument.md#addinlineblocks)
- [addNode](./WorkflowDocument.md#addnode)
- [batchAddFromJSON](./WorkflowDocument.md#batchaddfromjson)
- [canRemove](./WorkflowDocument.md#canremove)
- [clear](./WorkflowDocument.md#clear)
- [copyNode](./WorkflowDocument.md#copynode)
- [copyNodeFromJSON](./WorkflowDocument.md#copynodefromjson)
- [createWorkflowNode](./WorkflowDocument.md#createworkflownode)
- [createWorkflowNodeByType](./WorkflowDocument.md#createworkflownodebytype)
- [dispose](./WorkflowDocument.md#dispose)
- [fireContentChange](./WorkflowDocument.md#firecontentchange)
- [fireRender](./WorkflowDocument.md#firerender)
- [fitView](./WorkflowDocument.md#fitview)
- [fromJSON](./WorkflowDocument.md#fromjson)
- [getAllEdges](./WorkflowDocument.md#getalledges)
- [getAllNodes](./WorkflowDocument.md#getallnodes)
- [getAllPorts](./WorkflowDocument.md#getallports)
- [getAssociatedNodes](./WorkflowDocument.md#getassociatednodes)
- [getNode](./WorkflowDocument.md#getnode)
- [getNodeRegister](./WorkflowDocument.md#getnoderegister)
- [getNodeRegistry](./WorkflowDocument.md#getnoderegistry)
- [getRenderDatas](./WorkflowDocument.md#getrenderdatas)
- [hasNode](./WorkflowDocument.md#hasnode)
- [init](./WorkflowDocument.md#init)
- [isErrorPort](./WorkflowDocument.md#iserrorport)
- [isExtend](./WorkflowDocument.md#isextend)
- [isTypeOrExtendType](./WorkflowDocument.md#istypeorextendtype)
- [load](./WorkflowDocument.md#load)
- [moveChildNodes](./WorkflowDocument.md#movechildnodes)
- [moveNodes](./WorkflowDocument.md#movenodes)
- [registerFlowNodes](./WorkflowDocument.md#registerflownodes)
- [registerLayout](./WorkflowDocument.md#registerlayout)
- [registerNodeDatas](./WorkflowDocument.md#registernodedatas)
- [reload](./WorkflowDocument.md#reload)
- [removeNode](./WorkflowDocument.md#removenode)
- [renderJSON](./WorkflowDocument.md#renderjson)
- [setLayout](./WorkflowDocument.md#setlayout)
- [toJSON](./WorkflowDocument.md#tojson)
- [toNodeJSON](./WorkflowDocument.md#tonodejson)
- [toString](./WorkflowDocument.md#tostring)
- [toggleFixedLayout](./WorkflowDocument.md#togglefixedlayout)
- [traverse](./WorkflowDocument.md#traverse)
## Constructors
### constructor
**new WorkflowDocument**()
#### Inherited from
FlowDocument.constructor
## Properties
### config
`Readonly` **config**: `FlowDocumentConfig`
#### Inherited from
FlowDocument.config
___
### linesManager
**linesManager**: [`WorkflowLinesManager`](./WorkflowLinesManager.md)
___
### nodeEngineContext
**nodeEngineContext**: `NodeEngineContext`
___
### onContentChange
`Readonly` **onContentChange**: `Event`\<[`WorkflowContentChangeEvent`](../interfaces/WorkflowContentChangeEvent.md)\>
___
### onLayoutChange
`Readonly` **onLayoutChange**: `Event`\<`FlowLayout`\>
#### Inherited from
FlowDocument.onLayoutChange
___
### onLoaded
`Readonly` **onLoaded**: `Event`\<`void`\>
数据加载完成
___
### onNodeCreate
`Readonly` **onNodeCreate**: `Event`\<\{ `data`: `FlowNodeJSON` ; `json`: `FlowNodeJSON` ; `node`: `FlowNodeEntity` }\>
#### Inherited from
FlowDocument.onNodeCreate
___
### onNodeDispose
`Readonly` **onNodeDispose**: `Event`\<\{ `node`: `FlowNodeEntity` }\>
#### Inherited from
FlowDocument.onNodeDispose
___
### onNodeUpdate
`Readonly` **onNodeUpdate**: `Event`\<\{ `data`: `FlowNodeJSON` ; `json`: `FlowNodeJSON` ; `node`: `FlowNodeEntity` }\>
#### Inherited from
FlowDocument.onNodeUpdate
___
### onReload
`Readonly` **onReload**: `Event`\<[`WorkflowDocument`](./WorkflowDocument.md)\>
___
### options
**options**: [`WorkflowDocumentOptions`](../variables/WorkflowDocumentOptions-1.md) = `{}`
#### Overrides
FlowDocument.options
___
### originTree
**originTree**: `FlowVirtualTree`\<`FlowNodeEntity`\>
原始的 tree 结构
#### Inherited from
FlowDocument.originTree
___
### playgroundConfig
**playgroundConfig**: `PlaygroundConfigEntity`
___
### playgroundContext
**playgroundContext**: `any`
___
### renderState
**renderState**: `FlowRendererStateEntity`
渲染相关的全局轧辊台
#### Inherited from
FlowDocument.renderState
___
### renderTree
**renderTree**: `FlowRenderTree`\<`FlowNodeEntity`\>
渲染后的 tree 结构
#### Inherited from
FlowDocument.renderTree
___
### root
**root**: `FlowNodeEntity`
#### Inherited from
FlowDocument.root
___
### selectServices
**selectServices**: [`WorkflowSelectService`](./WorkflowSelectService.md)
___
### transformer
**transformer**: `FlowDocumentTransformerEntity`
#### Inherited from
FlowDocument.transformer
## Accessors
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
FlowDocument.disposed
___
### layout
`get` **layout**(): `FreeLayout`
#### Returns
`FreeLayout`
#### Overrides
FlowDocument.layout
___
### loading
`get` **loading**(): `boolean`
#### Returns
`boolean`
#### Overrides
FlowDocument.loading
___
### size
`get` **size**(): `number`
#### Returns
`number`
#### Inherited from
FlowDocument.size
## Methods
### addBlock
**addBlock**(`target`, `blockData`, `addedNodes?`, `parent?`, `index?`): `FlowNodeEntity`
添加单个 block
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `target` | `string` \| `FlowNodeEntity` | |
| `blockData` | `FlowNodeJSON` | |
| `addedNodes?` | `FlowNodeEntity`[] | |
| `parent?` | `FlowNodeEntity` | 默认去找 $inlineBlocks$ |
| `index?` | `number` | - |
#### Returns
`FlowNodeEntity`
#### Inherited from
FlowDocument.addBlock
___
### addBlocksAsChildren
**addBlocksAsChildren**(`parent`, `blocks`, `addedNodes?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `parent` | `FlowNodeEntity` |
| `blocks` | `FlowNodeJSON`[] |
| `addedNodes?` | `FlowNodeEntity`[] |
#### Returns
`void`
#### Inherited from
FlowDocument.addBlocksAsChildren
___
### addFromNode
**addFromNode**(`fromNode`, `json`): `FlowNodeEntity`
从指定节点的下一个节点新增
#### Parameters
| Name | Type |
| :------ | :------ |
| `fromNode` | `string` \| `FlowNodeEntity` |
| `json` | `FlowNodeJSON` |
#### Returns
`FlowNodeEntity`
#### Inherited from
FlowDocument.addFromNode
___
### addInlineBlocks
**addInlineBlocks**(`node`, `blocks`, `addedNodes?`): `FlowNodeEntity`[]
block 格式：
node: (最原始的 id)
blockIcon
inlineBlocks
block
blockOrderIcon
block
blockOrderIcon
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `FlowNodeEntity` |
| `blocks` | `FlowNodeJSON`[] |
| `addedNodes?` | `FlowNodeEntity`[] |
#### Returns
`FlowNodeEntity`[]
#### Inherited from
FlowDocument.addInlineBlocks
___
### addNode
**addNode**(`data`, `addedNodes?`, `ignoreCreateAndUpdateEvent?`): `FlowNodeEntity`
添加节点，如果节点已经存在则不会重复创建
#### Parameters
| Name | Type |
| :------ | :------ |
| `data` | `AddNodeData` |
| `addedNodes?` | `FlowNodeEntity`[] |
| `ignoreCreateAndUpdateEvent?` | `boolean` |
#### Returns
`FlowNodeEntity`
#### Overrides
FlowDocument.addNode
___
### batchAddFromJSON
**batchAddFromJSON**(`json`, `options?`): `Object`
批量添加节点
#### Parameters
| Name | Type |
| :------ | :------ |
| `json` | [`WorkflowJSON`](../interfaces/WorkflowJSON.md) |
| `options?` | `Object` |
| `options.onEdgeCreated?` | (`edge`: [`WorkflowLineEntity`](./WorkflowLineEntity.md)) => `void` |
| `options.onNodeCreated?` | (`node`: `FlowNodeEntity`) => `void` |
| `options.parent?` | `FlowNodeEntity` |
#### Returns
`Object`
| Name | Type |
| :------ | :------ |
| `edges` | [`WorkflowLineEntity`](./WorkflowLineEntity.md)[] |
| `nodes` | `FlowNodeEntity`[] |
___
### canRemove
**canRemove**(`node`, `silent?`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `FlowNodeEntity` |
| `silent?` | `boolean` |
#### Returns
`boolean`
___
### clear
**clear**(): `void`
清空画布
#### Returns
`void`
___
### copyNode
**copyNode**(`node`, `newNodeId?`, `format?`, `position?`): `FlowNodeEntity`
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `FlowNodeEntity` |
| `newNodeId?` | `string` |
| `format?` | (`json`: [`WorkflowNodeJSON`](../interfaces/WorkflowNodeJSON.md)) => [`WorkflowNodeJSON`](../interfaces/WorkflowNodeJSON.md) |
| `position?` | `IPoint` |
#### Returns
`FlowNodeEntity`
___
### copyNodeFromJSON
**copyNodeFromJSON**(`flowNodeType`, `nodeJSON`, `newNodeId?`, `position?`, `parentID?`): `FlowNodeEntity`
#### Parameters
| Name | Type |
| :------ | :------ |
| `flowNodeType` | `string` |
| `nodeJSON` | [`WorkflowNodeJSON`](../interfaces/WorkflowNodeJSON.md) |
| `newNodeId?` | `string` |
| `position?` | `IPoint` |
| `parentID?` | `string` |
#### Returns
`FlowNodeEntity`
___
### createWorkflowNode
**createWorkflowNode**(`json`, `isClone?`, `parentID?`): `FlowNodeEntity`
创建流程节点
#### Parameters
| Name | Type | Default value | Description |
| :------ | :------ | :------ | :------ |
| `json` | [`WorkflowNodeJSON`](../interfaces/WorkflowNodeJSON.md) | `undefined` | |
| `isClone` | `boolean` | `false` | **`Deprecated`** |
| `parentID?` | `string` | `undefined` | - |
#### Returns
`FlowNodeEntity`
___
### createWorkflowNodeByType
**createWorkflowNodeByType**(`type`, `position?`, `json?`, `parentID?`): `FlowNodeEntity`
通过类型创建节点, 如果没有提供position 则直接放在画布中间
#### Parameters
| Name | Type |
| :------ | :------ |
| `type` | `string` \| `number` |
| `position?` | `IPoint` |
| `json` | `Partial`\<[`WorkflowNodeJSON`](../interfaces/WorkflowNodeJSON.md)\> |
| `parentID?` | `string` |
#### Returns
`FlowNodeEntity`
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Overrides
FlowDocument.dispose
___
### fireContentChange
**fireContentChange**(`event`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `event` | [`WorkflowContentChangeEvent`](../interfaces/WorkflowContentChangeEvent.md) |
#### Returns
`void`
___
### fireRender
**fireRender**(): `void`
触发渲染
#### Returns
`void`
#### Overrides
FlowDocument.fireRender
___
### fitView
**fitView**(`easing?`): `Promise`\<`void`\>
use `ctx.tools.fitView()` instead
#### Parameters
| Name | Type |
| :------ | :------ |
| `easing?` | `boolean` |
#### Returns
`Promise`\<`void`\>
**`Deprecated`**
___
### fromJSON
**fromJSON**(`json`, `fireRender?`): `void`
从数据加载
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `json` | `Partial`\<[`WorkflowJSON`](../interfaces/WorkflowJSON.md)\> | `undefined` |
| `fireRender` | `boolean` | `true` |
#### Returns
`void`
#### Overrides
FlowDocument.fromJSON
___
### getAllEdges
**getAllEdges**(): [`WorkflowLineEntity`](./WorkflowLineEntity.md)[]
#### Returns
[`WorkflowLineEntity`](./WorkflowLineEntity.md)[]
___
### getAllNodes
**getAllNodes**(): `FlowNodeEntity`[]
#### Returns
`FlowNodeEntity`[]
#### Overrides
FlowDocument.getAllNodes
___
### getAllPorts
**getAllPorts**(): [`WorkflowPortEntity`](./WorkflowPortEntity.md)[]
#### Returns
[`WorkflowPortEntity`](./WorkflowPortEntity.md)[]
___
### getAssociatedNodes
**getAssociatedNodes**(): `FlowNodeEntity`[]
获取画布中的非游离节点
1. 开始节点
2. 从开始节点出发能走到的节点
3. 结束节点
4. 默认所有子画布内节点为游离节点
#### Returns
`FlowNodeEntity`[]
___
### getNode
**getNode**(`id`): `undefined` \| `FlowNodeEntity`
根据 id 获取节点
#### Parameters
| Name | Type |
| :------ | :------ |
| `id` | `string` |
#### Returns
`undefined` \| `FlowNodeEntity`
#### Inherited from
FlowDocument.getNode
___
### getNodeRegister
**getNodeRegister**\<`T`\>(`type`, `originParent?`): `T`
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `FlowNodeRegistry`\<`FlowNodeMeta`, `T`\> = `FlowNodeRegistry`\<`FlowNodeMeta`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `type` | `FlowNodeType` |
| `originParent?` | `FlowNodeEntity` |
#### Returns
`T`
**`Deprecated`**
use `getNodeRegistry` instead
#### Inherited from
FlowDocument.getNodeRegister
___
### getNodeRegistry
**getNodeRegistry**\<`T`\>(`type`, `originParent?`): `T`
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `FlowNodeRegistry`\<`FlowNodeMeta`, `T`\> = `FlowNodeRegistry`\<`FlowNodeMeta`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `type` | `FlowNodeType` |
| `originParent?` | `FlowNodeEntity` |
#### Returns
`T`
#### Inherited from
FlowDocument.getNodeRegistry
___
### getRenderDatas
**getRenderDatas**\<`T`\>(`dataRegistry`, `containHiddenNodes?`): `T`[]
返回需要渲染的数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `EntityData`\<`any`, {}, `T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `dataRegistry` | `EntityDataRegistry`\<`T`\> |
| `containHiddenNodes?` | `boolean` |
#### Returns
`T`[]
#### Inherited from
FlowDocument.getRenderDatas
___
### hasNode
**hasNode**(`nodeId`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `nodeId` | `string` |
#### Returns
`boolean`
#### Inherited from
FlowDocument.hasNode
___
### init
**init**(): `void`
#### Returns
`void`
#### Overrides
FlowDocument.init
___
### isErrorPort
**isErrorPort**(`port`, `defaultValue?`): `boolean`
判断端口是否为错误态
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `port` | [`WorkflowPortEntity`](./WorkflowPortEntity.md) | `undefined` |
| `defaultValue` | `boolean` | `false` |
#### Returns
`boolean`
___
### isExtend
**isExtend**(`currentType`, `extendType`): `boolean`
Check node extend
#### Parameters
| Name | Type |
| :------ | :------ |
| `currentType` | `FlowNodeType` |
| `extendType` | `FlowNodeType` |
#### Returns
`boolean`
#### Inherited from
FlowDocument.isExtend
___
### isTypeOrExtendType
**isTypeOrExtendType**(`currentType`, `extendType`): `boolean`
Check node type
#### Parameters
| Name | Type |
| :------ | :------ |
| `currentType` | `FlowNodeType` |
| `extendType` | `FlowNodeType` |
#### Returns
`boolean`
#### Inherited from
FlowDocument.isTypeOrExtendType
___
### load
**load**(): `Promise`\<`void`\>
#### Returns
`Promise`\<`void`\>
#### Overrides
FlowDocument.load
___
### moveChildNodes
**moveChildNodes**(`param0`): `void`
移动子节点
#### Parameters
| Name | Type |
| :------ | :------ |
| `param0` | `Object` |
| `param0.nodeIds` | `string`[] |
| `param0.toIndex` | `number` |
| `param0.toParentId` | `string` |
#### Returns
`void`
#### Inherited from
FlowDocument.moveChildNodes
___
### moveNodes
**moveNodes**(`param0`): `void`
移动节点
#### Parameters
| Name | Type |
| :------ | :------ |
| `param0` | `Object` |
| `param0.dropNodeId` | `string` |
| `param0.inside?` | `boolean` |
| `param0.sortNodeIds` | `string`[] |
#### Returns
`void`
#### Inherited from
FlowDocument.moveNodes
___
### registerFlowNodes
**registerFlowNodes**\<`T`\>(`...registries`): `void`
注册节点
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `FlowNodeRegistry`\<`any`, `T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `...registries` | `T`[] |
#### Returns
`void`
#### Inherited from
FlowDocument.registerFlowNodes
___
### registerLayout
**registerLayout**(`layout`): `void`
注册布局
#### Parameters
| Name | Type |
| :------ | :------ |
| `layout` | `FlowLayout` |
#### Returns
`void`
#### Inherited from
FlowDocument.registerLayout
___
### registerNodeDatas
**registerNodeDatas**(`...nodeDatas`): `void`
节点注入数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `...nodeDatas` | `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[] |
#### Returns
`void`
#### Inherited from
FlowDocument.registerNodeDatas
___
### reload
**reload**(`json`, `delayTime?`): `Promise`\<`void`\>
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `json` | [`WorkflowJSON`](../interfaces/WorkflowJSON.md) | `undefined` |
| `delayTime` | `number` | `0` |
#### Returns
`Promise`\<`void`\>
**`Deprecated`**
use `ctx.operation.fromJSON` instead
___
### removeNode
**removeNode**(`node`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `string` \| `FlowNodeEntity` |
#### Returns
`void`
#### Inherited from
FlowDocument.removeNode
___
### renderJSON
**renderJSON**(`json`, `options?`): `Object`
批量添加节点
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `json` | [`WorkflowJSON`](../interfaces/WorkflowJSON.md) | |
| `options?` | `Object` | |
| `options.isClone?` | `boolean` | **`Deprecated`** useless api |
| `options.parent?` | `FlowNodeEntity` | - |
#### Returns
`Object`
| Name | Type |
| :------ | :------ |
| `edges` | [`WorkflowLineEntity`](./WorkflowLineEntity.md)[] |
| `nodes` | `FlowNodeEntity`[] |
**`Deprecated`**
use 'batchAddFromJSON' instead
___
### setLayout
**setLayout**(`layoutKey`): `void`
更新布局
#### Parameters
| Name | Type |
| :------ | :------ |
| `layoutKey` | `string` |
#### Returns
`void`
#### Inherited from
FlowDocument.setLayout
___
### toJSON
**toJSON**(): [`WorkflowJSON`](../interfaces/WorkflowJSON.md)
导出数据
#### Returns
[`WorkflowJSON`](../interfaces/WorkflowJSON.md)
#### Overrides
FlowDocument.toJSON
___
### toNodeJSON
**toNodeJSON**(`node`): [`WorkflowNodeJSON`](../interfaces/WorkflowNodeJSON.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `FlowNodeEntity` |
#### Returns
[`WorkflowNodeJSON`](../interfaces/WorkflowNodeJSON.md)
#### Overrides
FlowDocument.toNodeJSON
___
### toString
**toString**(`showType?`): `string`
#### Parameters
| Name | Type |
| :------ | :------ |
| `showType?` | `boolean` |
#### Returns
`string`
#### Inherited from
FlowDocument.toString
___
### toggleFixedLayout
**toggleFixedLayout**(): `void`
切换垂直或水平布局
#### Returns
`void`
#### Inherited from
FlowDocument.toggleFixedLayout
___
### traverse
**traverse**(`fn`, `node?`, `depth?`): `boolean` \| `void`
traverse all nodes, O(n)
R
|
+---1
| |
| +---1.1
| |
| +---1.2
| |
| +---1.3
| | |
| | +---1.3.1
| | |
| | +---1.3.2
| |
| +---1.4
|
+---2
|
+---2.1
sort: [1, 1.1, 1.2, 1.3, 1.3.1, 1.3.2, 1.4, 2, 2.1]
#### Parameters
| Name | Type |
| :------ | :------ |
| `fn` | (`node`: `FlowNodeEntity`, `depth`: `number`, `index`: `number`) => `boolean` \| `void` |
| `node?` | `FlowNodeEntity` |
| `depth?` | `number` |
#### Returns
`boolean` \| `void`
isBreak
#### Inherited from
FlowDocument.traverse
---
url: /auto-docs/free-layout-core/classes/WorkflowDragService.md
---
# Class: WorkflowDragService
## Table of contents
### Constructors
- [constructor](./WorkflowDragService.md#constructor)
### Properties
- [isDragging](./WorkflowDragService.md#isdragging)
- [onDragLineEventChange](./WorkflowDragService.md#ondraglineeventchange)
- [onNodesDrag](./WorkflowDragService.md#onnodesdrag)
- [options](./WorkflowDragService.md#options)
### Methods
- [adjustSubNodePosition](./WorkflowDragService.md#adjustsubnodeposition)
- [canDropToNode](./WorkflowDragService.md#candroptonode)
- [dispose](./WorkflowDragService.md#dispose)
- [dropCard](./WorkflowDragService.md#dropcard)
- [init](./WorkflowDragService.md#init)
- [onDragLineEnd](./WorkflowDragService.md#ondraglineend)
- [registerPosAdjuster](./WorkflowDragService.md#registerposadjuster)
- [resetLine](./WorkflowDragService.md#resetline)
- [startDragCard](./WorkflowDragService.md#startdragcard)
- [startDragSelectedNodes](./WorkflowDragService.md#startdragselectednodes)
- [startDrawingLine](./WorkflowDragService.md#startdrawingline)
## Constructors
### constructor
**new WorkflowDragService**()
## Properties
### isDragging
**isDragging**: `boolean` = `false`
___
### onDragLineEventChange
`Readonly` **onDragLineEventChange**: `Event`\<[`LineEventProps`](../interfaces/LineEventProps.md)\>
___
### onNodesDrag
`Readonly` **onNodesDrag**: `Event`\<[`NodesDragEvent`](../types/NodesDragEvent.md)\>
___
### options
`Readonly` **options**: [`WorkflowDocumentOptions`](../variables/WorkflowDocumentOptions-1.md)
## Methods
### adjustSubNodePosition
**adjustSubNodePosition**(`subNodeType?`, `containerNode?`, `mousePos?`): `IPoint`
如果存在容器节点，且传入鼠标坐标，需要用容器的坐标减去传入的鼠标坐标
#### Parameters
| Name | Type |
| :------ | :------ |
| `subNodeType?` | `string` |
| `containerNode?` | `FlowNodeEntity` |
| `mousePos?` | `IPoint` |
#### Returns
`IPoint`
___
### canDropToNode
**canDropToNode**(`params`): `Object`
判断是否可以放置节点
#### Parameters
| Name | Type |
| :------ | :------ |
| `params` | `Object` |
| `params.dragNode?` | `FlowNodeEntity` |
| `params.dragNodeType?` | `FlowNodeType` |
| `params.dropNode?` | `FlowNodeEntity` |
| `params.dropNodeType?` | `FlowNodeType` |
#### Returns
`Object`
| Name | Type |
| :------ | :------ |
| `allowDrop` | `boolean` |
| `dropNode?` | `FlowNodeEntity` |
| `message?` | `string` |
___
### dispose
**dispose**(): `void`
#### Returns
`void`
___
### dropCard
**dropCard**(`type`, `event`, `data?`, `parent?`): `Promise`\<`undefined` \| `FlowNodeEntity`\>
通过拖入卡片添加
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `type` | `string` | |
| `event` | `Object` | |
| `event.clientX` | `number` | - |
| `event.clientY` | `number` | - |
| `data?` | `Partial`\<[`WorkflowNodeJSON`](../interfaces/WorkflowNodeJSON.md)\> | 节点数据 |
| `parent?` | `FlowNodeEntity` | - |
#### Returns
`Promise`\<`undefined` \| `FlowNodeEntity`\>
___
### init
**init**(): `void`
#### Returns
`void`
___
### onDragLineEnd
**onDragLineEnd**(`callback`): `Disposable`
线条拖拽结束
#### Parameters
| Name | Type |
| :------ | :------ |
| `callback` | [`OnDragLineEnd`](../types/OnDragLineEnd.md) |
#### Returns
`Disposable`
___
### registerPosAdjuster
**registerPosAdjuster**(`adjuster`): `Object`
注册位置调整
#### Parameters
| Name | Type |
| :------ | :------ |
| `adjuster` | (`params`: \{ `position`: `IPoint` ; `selectedNodes`: `FlowNodeEntity`[] }) => `IPoint` |
#### Returns
`Object`
| Name | Type |
| :------ | :------ |
| `dispose` | () => `boolean` |
___
### resetLine
**resetLine**(`line`, `e`): `Promise`\<`void`\>
重新连接线条
#### Parameters
| Name | Type |
| :------ | :------ |
| `line` | [`WorkflowLineEntity`](./WorkflowLineEntity.md) |
| `e` | `MouseEvent` |
#### Returns
`Promise`\<`void`\>
___
### startDragCard
**startDragCard**(`type`, `event`, `data`, `cloneNode?`): `Promise`\<`undefined` \| `FlowNodeEntity`\>
拖拽卡片到画布
返回创建结果
#### Parameters
| Name | Type |
| :------ | :------ |
| `type` | `string` |
| `event` | `MouseEvent`\<`Element`, `MouseEvent`\> |
| `data` | `Partial`\<[`WorkflowNodeJSON`](../interfaces/WorkflowNodeJSON.md)\> |
| `cloneNode?` | (`e`: `PlaygroundDragEvent`) => `HTMLDivElement` |
#### Returns
`Promise`\<`undefined` \| `FlowNodeEntity`\>
___
### startDragSelectedNodes
**startDragSelectedNodes**(`triggerEvent`): `Promise`\<`boolean`\>
拖拽选中节点
#### Parameters
| Name | Type |
| :------ | :------ |
| `triggerEvent` | `MouseEvent` \| `MouseEvent`\<`Element`, `MouseEvent`\> |
#### Returns
`Promise`\<`boolean`\>
___
### startDrawingLine
**startDrawingLine**(`port`, `event`, `originLine?`): `Promise`\<\{ `dragSuccess?`: `boolean` ; `newLine?`: [`WorkflowLineEntity`](./WorkflowLineEntity.md) }\>
绘制线条
#### Parameters
| Name | Type |
| :------ | :------ |
| `port` | [`WorkflowPortEntity`](./WorkflowPortEntity.md) |
| `event` | `Object` |
| `event.clientX` | `number` |
| `event.clientY` | `number` |
| `originLine?` | [`WorkflowLineEntity`](./WorkflowLineEntity.md) |
#### Returns
`Promise`\<\{ `dragSuccess?`: `boolean` ; `newLine?`: [`WorkflowLineEntity`](./WorkflowLineEntity.md) }\>
---
url: /auto-docs/free-layout-core/classes/WorkflowHoverService.md
---
# Class: WorkflowHoverService
hover 状态管理
## Table of contents
### Constructors
- [constructor](./WorkflowHoverService.md#constructor)
### Properties
- [hoveredKey](./WorkflowHoverService.md#hoveredkey)
- [hoveredPos](./WorkflowHoverService.md#hoveredpos)
- [onHoveredChange](./WorkflowHoverService.md#onhoveredchange)
- [onUpdateHoverPosition](./WorkflowHoverService.md#onupdatehoverposition)
### Accessors
- [hoveredNode](./WorkflowHoverService.md#hoverednode)
- [someHovered](./WorkflowHoverService.md#somehovered)
### Methods
- [clearHovered](./WorkflowHoverService.md#clearhovered)
- [isHovered](./WorkflowHoverService.md#ishovered)
- [isSomeHovered](./WorkflowHoverService.md#issomehovered)
- [updateHoverPosition](./WorkflowHoverService.md#updatehoverposition)
- [updateHoveredKey](./WorkflowHoverService.md#updatehoveredkey)
## Constructors
### constructor
**new WorkflowHoverService**()
## Properties
### hoveredKey
**hoveredKey**: `string` = `''`
当前 hovered 的 节点或者线条或者点
1: nodeId / lineId （节点 / 线条）
2: nodeId:portKey （节点连接点）
___
### hoveredPos
**hoveredPos**: `PositionSchema`
___
### onHoveredChange
`Readonly` **onHoveredChange**: `Event`\<`string`\>
___
### onUpdateHoverPosition
`Readonly` **onUpdateHoverPosition**: `Event`\<[`HoverPosition`](../interfaces/HoverPosition.md)\>
## Accessors
### hoveredNode
`get` **hoveredNode**(): `undefined` \| [`WorkflowEntityHoverable`](../types/WorkflowEntityHoverable.md)
获取被 hover 的节点或线条
#### Returns
`undefined` \| [`WorkflowEntityHoverable`](../types/WorkflowEntityHoverable.md)
**`Deprecated`**
use 'someHovered' instead
___
### someHovered
`get` **someHovered**(): `undefined` \| [`WorkflowEntityHoverable`](../types/WorkflowEntityHoverable.md)
获取被 hover 的节点或线条
#### Returns
`undefined` \| [`WorkflowEntityHoverable`](../types/WorkflowEntityHoverable.md)
## Methods
### clearHovered
**clearHovered**(): `void`
清空 hover 内容
#### Returns
`void`
___
### isHovered
**isHovered**(`nodeId`): `boolean`
判断是否 hover
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `nodeId` | `string` | hoveredKey |
#### Returns
`boolean`
是否 hover
___
### isSomeHovered
**isSomeHovered**(): `boolean`
#### Returns
`boolean`
___
### updateHoverPosition
**updateHoverPosition**(`position`, `target?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `position` | `PositionSchema` |
| `target?` | `HTMLElement` |
#### Returns
`void`
___
### updateHoveredKey
**updateHoveredKey**(`hoveredKey`): `void`
更新 hover 的内容
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `hoveredKey` | `string` | hovered key |
#### Returns
`void`
---
url: /auto-docs/free-layout-core/classes/WorkflowLineEntity.md
---
# Class: WorkflowLineEntity
线条
## Hierarchy
- `Entity`\<[`WorkflowLineEntityOpts`](../interfaces/WorkflowLineEntityOpts.md)\>
↳ **`WorkflowLineEntity`**
## Table of contents
### Constructors
- [constructor](./WorkflowLineEntity.md#constructor)
### Properties
- [\_\_opts\_type\_\_](./WorkflowLineEntity.md#__opts_type__)
- [document](./WorkflowLineEntity.md#document)
- [entityManager](./WorkflowLineEntity.md#entitymanager)
- [info](./WorkflowLineEntity.md#info)
- [isDrawing](./WorkflowLineEntity.md#isdrawing)
- [linesManager](./WorkflowLineEntity.md#linesmanager)
- [onDataChange](./WorkflowLineEntity.md#ondatachange)
- [onEntityChange](./WorkflowLineEntity.md#onentitychange)
- [onLineDataChange](./WorkflowLineEntity.md#onlinedatachange)
- [preDispose](./WorkflowLineEntity.md#predispose)
- [stackIndex](./WorkflowLineEntity.md#stackindex)
- [toDispose](./WorkflowLineEntity.md#todispose)
- [type](./WorkflowLineEntity.md#type)
### Accessors
- [bounds](./WorkflowLineEntity.md#bounds)
- [center](./WorkflowLineEntity.md#center)
- [className](./WorkflowLineEntity.md#classname)
- [color](./WorkflowLineEntity.md#color)
- [context](./WorkflowLineEntity.md#context)
- [disabled](./WorkflowLineEntity.md#disabled)
- [disposed](./WorkflowLineEntity.md#disposed)
- [drawingFrom](./WorkflowLineEntity.md#drawingfrom)
- [drawingTo](./WorkflowLineEntity.md#drawingto)
- [flowing](./WorkflowLineEntity.md#flowing)
- [from](./WorkflowLineEntity.md#from)
- [fromPort](./WorkflowLineEntity.md#fromport)
- [hasError](./WorkflowLineEntity.md#haserror)
- [hideArrow](./WorkflowLineEntity.md#hidearrow)
- [highlightColor](./WorkflowLineEntity.md#highlightcolor)
- [id](./WorkflowLineEntity.md#id)
- [inContainer](./WorkflowLineEntity.md#incontainer)
- [isHidden](./WorkflowLineEntity.md#ishidden)
- [lineData](./WorkflowLineEntity.md#linedata)
- [lockedColor](./WorkflowLineEntity.md#lockedcolor)
- [node](./WorkflowLineEntity.md#node)
- [onDispose](./WorkflowLineEntity.md#ondispose)
- [position](./WorkflowLineEntity.md#position)
- [processing](./WorkflowLineEntity.md#processing)
- [renderType](./WorkflowLineEntity.md#rendertype)
- [reverse](./WorkflowLineEntity.md#reverse)
- [savedInManager](./WorkflowLineEntity.md#savedinmanager)
- [to](./WorkflowLineEntity.md#to)
- [toPort](./WorkflowLineEntity.md#toport)
- [type](./WorkflowLineEntity.md#type-1)
- [uiState](./WorkflowLineEntity.md#uistate)
- [version](./WorkflowLineEntity.md#version)
- [vertical](./WorkflowLineEntity.md#vertical)
### Methods
- [addData](./WorkflowLineEntity.md#adddata)
- [addInitializeData](./WorkflowLineEntity.md#addinitializedata)
- [canRemove](./WorkflowLineEntity.md#canremove)
- [dispose](./WorkflowLineEntity.md#dispose)
- [fireRender](./WorkflowLineEntity.md#firerender)
- [fromJSON](./WorkflowLineEntity.md#fromjson)
- [getData](./WorkflowLineEntity.md#getdata)
- [getDefaultDataRegistries](./WorkflowLineEntity.md#getdefaultdataregistries)
- [getHoverDist](./WorkflowLineEntity.md#gethoverdist)
- [getService](./WorkflowLineEntity.md#getservice)
- [hasData](./WorkflowLineEntity.md#hasdata)
- [is](./WorkflowLineEntity.md#is)
- [removeData](./WorkflowLineEntity.md#removedata)
- [reset](./WorkflowLineEntity.md#reset)
- [setFromPort](./WorkflowLineEntity.md#setfromport)
- [setToPort](./WorkflowLineEntity.md#settoport)
- [toJSON](./WorkflowLineEntity.md#tojson)
- [updateData](./WorkflowLineEntity.md#updatedata)
- [updateUIState](./WorkflowLineEntity.md#updateuistate)
- [validate](./WorkflowLineEntity.md#validate)
- [portInfoToLineId](./WorkflowLineEntity.md#portinfotolineid)
## Constructors
### constructor
**new WorkflowLineEntity**(`opts`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `opts` | [`WorkflowLineEntityOpts`](../interfaces/WorkflowLineEntityOpts.md) |
#### Overrides
Entity\<WorkflowLineEntityOpts\>.constructor
## Properties
### \_\_opts\_type\_\_
**\_\_opts\_type\_\_**: [`WorkflowLineEntityOpts`](../interfaces/WorkflowLineEntityOpts.md)
#### Inherited from
Entity.\_\_opts\_type\_\_
___
### document
`Readonly` **document**: [`WorkflowDocument`](./WorkflowDocument.md)
___
### entityManager
`Readonly` **entityManager**: `EntityManager`
全局的entity管理器
#### Inherited from
Entity.entityManager
___
### info
**info**: [`WorkflowLineInfo`](../interfaces/WorkflowLineInfo.md)
线条数据
___
### isDrawing
`Readonly` **isDrawing**: `boolean`
___
### linesManager
`Readonly` **linesManager**: [`WorkflowLinesManager`](./WorkflowLinesManager.md)
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<`EntityDataChangedEvent`\<`Entity`\<`EntityOpts`\>\>\>
数据更改事件
#### Inherited from
Entity.onDataChange
___
### onEntityChange
`Readonly` **onEntityChange**: `Event`\<`Entity`\<`EntityOpts`\>\>
修改会触发
#### Inherited from
Entity.onEntityChange
___
### onLineDataChange
`Readonly` **onLineDataChange**: `Event`\<\{ `newValue`: `any` ; `oldValue`: `any` }\>
___
### preDispose
`Readonly` **preDispose**: `DisposableCollection`
销毁前事件管理
#### Inherited from
Entity.preDispose
___
### stackIndex
**stackIndex**: `number` = `0`
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
销毁事件管理
#### Inherited from
Entity.toDispose
___
### type
`Static` **type**: `string` = `WORKFLOW_LINE_ENTITY`
#### Overrides
Entity.type
## Accessors
### bounds
`get` **bounds**(): `Rectangle`
获取线条的边框位置大小
#### Returns
`Rectangle`
___
### center
`get` **center**(): [`LineCenterPoint`](../interfaces/LineCenterPoint.md)
#### Returns
[`LineCenterPoint`](../interfaces/LineCenterPoint.md)
___
### className
`get` **className**(): `string`
获取线条样式
#### Returns
`string`
___
### color
`get` **color**(): `undefined` \| `string`
#### Returns
`undefined` \| `string`
___
### context
`get` **context**(): `any`
#### Returns
`any`
#### Inherited from
Entity.context
___
### disabled
`get` **disabled**(): `boolean`
是否禁用
#### Returns
`boolean`
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
Entity.disposed
___
### drawingFrom
`get` **drawingFrom**(): `undefined` \| [`LinePoint`](../interfaces/LinePoint.md)
#### Returns
`undefined` \| [`LinePoint`](../interfaces/LinePoint.md)
`set` **drawingFrom**(`pos`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `pos` | `undefined` \| [`LinePoint`](../interfaces/LinePoint.md) |
#### Returns
`void`
___
### drawingTo
`get` **drawingTo**(): `undefined` \| [`LinePoint`](../interfaces/LinePoint.md)
获取线条正在画线的位置
#### Returns
`undefined` \| [`LinePoint`](../interfaces/LinePoint.md)
`set` **drawingTo**(`pos`): `void`
设置线条画线时的目标位置
#### Parameters
| Name | Type |
| :------ | :------ |
| `pos` | `undefined` \| [`LinePoint`](../interfaces/LinePoint.md) |
#### Returns
`void`
___
### flowing
`get` **flowing**(): `boolean`
是否流动
#### Returns
`boolean`
`set` **flowing**(`flowing`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `flowing` | `boolean` |
#### Returns
`void`
___
### from
`get` **from**(): `undefined` \| `FlowNodeEntity`
获取线条的前置节点
#### Returns
`undefined` \| `FlowNodeEntity`
___
### fromPort
`get` **fromPort**(): `undefined` \| [`WorkflowPortEntity`](./WorkflowPortEntity.md)
#### Returns
`undefined` \| [`WorkflowPortEntity`](./WorkflowPortEntity.md)
___
### hasError
`get` **hasError**(): `boolean`
#### Returns
`boolean`
`set` **hasError**(`hasError`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `hasError` | `boolean` |
#### Returns
`void`
___
### hideArrow
`get` **hideArrow**(): `boolean`
是否隐藏箭头
#### Returns
`boolean`
___
### highlightColor
`get` **highlightColor**(): `string`
#### Returns
`string`
`set` **highlightColor**(`highlightColor`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `highlightColor` | `string` |
#### Returns
`void`
___
### id
`get` **id**(): `string`
实体 id
#### Returns
`string`
#### Inherited from
Entity.id
___
### inContainer
`get` **inContainer**(): `boolean`
#### Returns
`boolean`
___
### isHidden
`get` **isHidden**(): `boolean`
#### Returns
`boolean`
___
### lineData
`get` **lineData**(): `any`
线条的扩展数据
#### Returns
`any`
`set` **lineData**(`newValue`): `void`
更新线条扩展数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `newValue` | `any` |
#### Returns
`void`
___
### lockedColor
`get` **lockedColor**(): `string`
#### Returns
`string`
`set` **lockedColor**(`lockedColor`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `lockedColor` | `string` |
#### Returns
`void`
___
### node
`get` **node**(): `HTMLDivElement`
#### Returns
`HTMLDivElement`
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
销毁事件
#### Returns
`Event`\<`void`\>
#### Inherited from
Entity.onDispose
___
### position
`get` **position**(): [`LinePosition`](../interfaces/LinePosition.md)
获取线条真实的输入输出节点坐标
#### Returns
[`LinePosition`](../interfaces/LinePosition.md)
___
### processing
`get` **processing**(): `boolean`
获取是否 testrun processing
#### Returns
`boolean`
**`Deprecated`**
use `flowing` instead
`set` **processing**(`status`): `void`
设置 testrun processing 状态
#### Parameters
| Name | Type |
| :------ | :------ |
| `status` | `boolean` |
#### Returns
`void`
**`Deprecated`**
use `flowing` instead
___
### renderType
`get` **renderType**(): `undefined` \| [`LineRenderType`](../types/LineRenderType.md)
获取线条渲染器类型
#### Returns
`undefined` \| [`LineRenderType`](../types/LineRenderType.md)
___
### reverse
`get` **reverse**(): `boolean`
是否反转箭头
#### Returns
`boolean`
___
### savedInManager
`get` **savedInManager**(): `boolean`
是否存到全局 manager，默认 true
#### Returns
`boolean`
#### Inherited from
Entity.savedInManager
___
### to
`get` **to**(): `undefined` \| `FlowNodeEntity`
获取线条的后置节点
#### Returns
`undefined` \| `FlowNodeEntity`
___
### toPort
`get` **toPort**(): `undefined` \| [`WorkflowPortEntity`](./WorkflowPortEntity.md)
#### Returns
`undefined` \| [`WorkflowPortEntity`](./WorkflowPortEntity.md)
___
### type
`get` **type**(): `string`
实体类型
#### Returns
`string`
#### Inherited from
Entity.type
___
### uiState
`get` **uiState**(): [`WorkflowLineUIState`](../interfaces/WorkflowLineUIState.md)
线条的 UI 状态
#### Returns
[`WorkflowLineUIState`](../interfaces/WorkflowLineUIState.md)
___
### version
`get` **version**(): `number`
实体的版本
#### Returns
`number`
#### Inherited from
Entity.version
___
### vertical
`get` **vertical**(): `boolean`
#### Returns
`boolean`
**`Deprecated`**
## Methods
### addData
**addData**\<`D`\>(`Registry`, `defaultProps?`): `D`
添加数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\> |
| `defaultProps?` | `EntityDataProps`\<`D`\> |
#### Returns
`D`
#### Inherited from
Entity.addData
___
### addInitializeData
**addInitializeData**(`datas`, `dataConfig?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `datas` | `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[] |
| `dataConfig?` | `any` |
#### Returns
`void`
#### Inherited from
Entity.addInitializeData
___
### canRemove
**canRemove**(`newLineInfo?`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `newLineInfo?` | `Required`\<[`WorkflowLinePortInfo`](../interfaces/WorkflowLinePortInfo.md)\> |
#### Returns
`boolean`
___
### dispose
**dispose**(): `void`
销毁实体
#### Returns
`void`
#### Inherited from
Entity.dispose
___
### fireRender
**fireRender**(): `void`
触发线条渲染
#### Returns
`void`
___
### fromJSON
**fromJSON**(`data?`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data?` | `any` |
#### Returns
`void`
#### Inherited from
Entity.fromJSON
___
### getData
**getData**\<`D`\>(`Registry`): `D`
获取 data 数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`D`\> |
#### Returns
`D`
#### Inherited from
Entity.getData
___
### getDefaultDataRegistries
**getDefaultDataRegistries**(): `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[]
默认初始化的 Data
#### Returns
`EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[]
#### Inherited from
Entity.getDefaultDataRegistries
___
### getHoverDist
**getHoverDist**(`pos`): `number`
获取点和线最接近的距离
#### Parameters
| Name | Type |
| :------ | :------ |
| `pos` | `IPoint` |
#### Returns
`number`
___
### getService
**getService**\<`T`\>(`identifier`): `T`
获取 IOC 服务
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `identifier` | `ServiceIdentifier`\<`T`\> |
#### Returns
`T`
#### Inherited from
Entity.getService
___
### hasData
**hasData**(`Registry`): `boolean`
是否有指定数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\> |
#### Returns
`boolean`
#### Inherited from
Entity.hasData
___
### is
**is**(`line`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `line` | [`WorkflowLineEntity`](./WorkflowLineEntity.md) \| [`WorkflowLinePortInfo`](../interfaces/WorkflowLinePortInfo.md) |
#### Returns
`boolean`
___
### removeData
**removeData**\<`D`\>(`Registry`): `void`
删除数据，初始化状态注入的数据无法被删除
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`D`\> |
#### Returns
`void`
#### Inherited from
Entity.removeData
___
### reset
**reset**(): `void`
重制为初始化状态
#### Returns
`void`
#### Inherited from
Entity.reset
___
### setFromPort
**setFromPort**(`fromPort?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `fromPort?` | [`WorkflowPortEntity`](./WorkflowPortEntity.md) |
#### Returns
`void`
___
### setToPort
**setToPort**(`toPort?`): `void`
设置线条的后置节点
#### Parameters
| Name | Type |
| :------ | :------ |
| `toPort?` | [`WorkflowPortEntity`](./WorkflowPortEntity.md) |
#### Returns
`void`
___
### toJSON
**toJSON**(): [`WorkflowEdgeJSON`](../interfaces/WorkflowEdgeJSON.md)
#### Returns
[`WorkflowEdgeJSON`](../interfaces/WorkflowEdgeJSON.md)
#### Overrides
Entity.toJSON
___
### updateData
**updateData**\<`D`\>(`Registry`, `props`): `void`
更新实体的数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`D`\> |
| `props` | `EntityDataProps`\<`D`\> |
#### Returns
`void`
#### Inherited from
Entity.updateData
___
### updateUIState
**updateUIState**(`newState`): `void`
更新线条的 ui 状态
#### Parameters
| Name | Type |
| :------ | :------ |
| `newState` | `Partial`\<[`WorkflowLineUIState`](../interfaces/WorkflowLineUIState.md)\> |
#### Returns
`void`
___
### validate
**validate**(): `void`
#### Returns
`void`
___
### portInfoToLineId
`Static` **portInfoToLineId**(`info`): `string`
转成线条 id
#### Parameters
| Name | Type |
| :------ | :------ |
| `info` | [`WorkflowLinePortInfo`](../interfaces/WorkflowLinePortInfo.md) |
#### Returns
`string`
---
url: /auto-docs/free-layout-core/classes/WorkflowLineRenderData.md
---
# Class: WorkflowLineRenderData
## Hierarchy
- `EntityData`\<[`WorkflowLineRenderDataSchema`](../interfaces/WorkflowLineRenderDataSchema.md)\>
↳ **`WorkflowLineRenderData`**
## Table of contents
### Constructors
- [constructor](./WorkflowLineRenderData.md#constructor)
### Properties
- [entity](./WorkflowLineRenderData.md#entity)
- [onDataChange](./WorkflowLineRenderData.md#ondatachange)
- [onWillChange](./WorkflowLineRenderData.md#onwillchange)
- [opts](./WorkflowLineRenderData.md#opts)
- [toDispose](./WorkflowLineRenderData.md#todispose)
- [type](./WorkflowLineRenderData.md#type)
### Accessors
- [bounds](./WorkflowLineRenderData.md#bounds)
- [center](./WorkflowLineRenderData.md#center)
- [changeLocked](./WorkflowLineRenderData.md#changelocked)
- [data](./WorkflowLineRenderData.md#data)
- [disposed](./WorkflowLineRenderData.md#disposed)
- [onDispose](./WorkflowLineRenderData.md#ondispose)
- [path](./WorkflowLineRenderData.md#path)
- [position](./WorkflowLineRenderData.md#position)
- [renderVersion](./WorkflowLineRenderData.md#renderversion)
- [type](./WorkflowLineRenderData.md#type-1)
- [version](./WorkflowLineRenderData.md#version)
### Methods
- [calcDistance](./WorkflowLineRenderData.md#calcdistance)
- [checkChanged](./WorkflowLineRenderData.md#checkchanged)
- [dispose](./WorkflowLineRenderData.md#dispose)
- [fireChange](./WorkflowLineRenderData.md#firechange)
- [fireWillChange](./WorkflowLineRenderData.md#firewillchange)
- [fromJSON](./WorkflowLineRenderData.md#fromjson)
- [fullyUpdate](./WorkflowLineRenderData.md#fullyupdate)
- [getDefaultData](./WorkflowLineRenderData.md#getdefaultdata)
- [toJSON](./WorkflowLineRenderData.md#tojson)
- [update](./WorkflowLineRenderData.md#update)
## Constructors
### constructor
**new WorkflowLineRenderData**(`entity`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `entity` | [`WorkflowLineEntity`](./WorkflowLineEntity.md) |
#### Overrides
EntityData\<WorkflowLineRenderDataSchema\>.constructor
## Properties
### entity
**entity**: [`WorkflowLineEntity`](./WorkflowLineEntity.md)
#### Overrides
EntityData.entity
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<`EntityData`\<[`WorkflowLineRenderDataSchema`](../interfaces/WorkflowLineRenderDataSchema.md), {}\>\>
修改后触发
#### Inherited from
EntityData.onDataChange
___
### onWillChange
`Readonly` **onWillChange**: `Event`\<`EntityData`\<[`WorkflowLineRenderDataSchema`](../interfaces/WorkflowLineRenderDataSchema.md), {}\>\>
修改前触发
#### Inherited from
EntityData.onWillChange
___
### opts
`Optional` `Readonly` **opts**: `Object`
#### Inherited from
EntityData.opts
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
#### Inherited from
EntityData.toDispose
___
### type
`Static` **type**: `string` = `'WorkflowLineRenderData'`
#### Overrides
EntityData.type
## Accessors
### bounds
`get` **bounds**(): `Rectangle`
#### Returns
`Rectangle`
___
### center
`get` **center**(): [`LineCenterPoint`](../interfaces/LineCenterPoint.md)
获取 center 位置
#### Returns
[`LineCenterPoint`](../interfaces/LineCenterPoint.md)
___
### changeLocked
`get` **changeLocked**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.changeLocked
`set` **changeLocked**(`p`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `p` | `boolean` |
#### Returns
`void`
#### Inherited from
EntityData.changeLocked
___
### data
`get` **data**(): `DATA`
当前数据
#### Returns
`DATA`
#### Inherited from
EntityData.data
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.disposed
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
#### Returns
`Event`\<`void`\>
#### Inherited from
EntityData.onDispose
___
### path
`get` **path**(): `string`
#### Returns
`string`
___
### position
`get` **position**(): [`LinePosition`](../interfaces/LinePosition.md)
#### Returns
[`LinePosition`](../interfaces/LinePosition.md)
___
### renderVersion
`get` **renderVersion**(): `string`
#### Returns
`string`
___
### type
`get` **type**(): `string`
data 类型
#### Returns
`string`
#### Inherited from
EntityData.type
___
### version
`get` **version**(): `number`
#### Returns
`number`
#### Inherited from
EntityData.version
## Methods
### calcDistance
**calcDistance**(`pos`): `number`
#### Parameters
| Name | Type |
| :------ | :------ |
| `pos` | `IPoint` |
#### Returns
`number`
___
### checkChanged
**checkChanged**(`newProps`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `newProps` | [`WorkflowLineRenderDataSchema`](../interfaces/WorkflowLineRenderDataSchema.md) \| `Partial`\<[`WorkflowLineRenderDataSchema`](../interfaces/WorkflowLineRenderDataSchema.md)\> |
#### Returns
`boolean`
**`Deprecated`**
检测属性是否更改，默认采用浅比较
#### Inherited from
EntityData.checkChanged
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Inherited from
EntityData.dispose
___
### fireChange
**fireChange**(): `void`
#### Returns
`void`
#### Inherited from
EntityData.fireChange
___
### fireWillChange
**fireWillChange**(): `void`
#### Returns
`void`
#### Inherited from
EntityData.fireWillChange
___
### fromJSON
**fromJSON**(`data`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data` | `object` |
#### Returns
`void`
#### Inherited from
EntityData.fromJSON
___
### fullyUpdate
**fullyUpdate**(`props`): `void`
更新全量数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | [`WorkflowLineRenderDataSchema`](../interfaces/WorkflowLineRenderDataSchema.md) |
#### Returns
`void`
#### Inherited from
EntityData.fullyUpdate
___
### getDefaultData
**getDefaultData**(): [`WorkflowLineRenderDataSchema`](../interfaces/WorkflowLineRenderDataSchema.md)
#### Returns
[`WorkflowLineRenderDataSchema`](../interfaces/WorkflowLineRenderDataSchema.md)
#### Overrides
EntityData.getDefaultData
___
### toJSON
**toJSON**(): `any`
存储数据，一般在关闭浏览器后需要暂时存到 localStorage
#### Returns
`any`
#### Inherited from
EntityData.toJSON
___
### update
**update**(): `void`
更新数据
WARNING: 这个方法，必须在 requestAnimationFrame / useLayoutEffect 中调用，否则会引起浏览器强制重排
#### Returns
`void`
#### Overrides
EntityData.update
---
url: /auto-docs/free-layout-core/classes/WorkflowLinesManager.md
---
# Class: WorkflowLinesManager
线条管理
## Table of contents
### Constructors
- [constructor](./WorkflowLinesManager.md#constructor)
### Properties
- [contributionFactories](./WorkflowLinesManager.md#contributionfactories)
- [hoverService](./WorkflowLinesManager.md#hoverservice)
- [isDrawing](./WorkflowLinesManager.md#isdrawing)
- [onAvailableLinesChange](./WorkflowLinesManager.md#onavailablelineschange)
- [onForceUpdate](./WorkflowLinesManager.md#onforceupdate)
- [options](./WorkflowLinesManager.md#options)
- [selectService](./WorkflowLinesManager.md#selectservice)
### Accessors
- [disposed](./WorkflowLinesManager.md#disposed)
- [lineColor](./WorkflowLinesManager.md#linecolor)
- [lineType](./WorkflowLinesManager.md#linetype)
### Methods
- [canAddLine](./WorkflowLinesManager.md#canaddline)
- [canRemove](./WorkflowLinesManager.md#canremove)
- [canReset](./WorkflowLinesManager.md#canreset)
- [createLine](./WorkflowLinesManager.md#createline)
- [dispose](./WorkflowLinesManager.md#dispose)
- [forceUpdate](./WorkflowLinesManager.md#forceupdate)
- [getAllAvailableLines](./WorkflowLinesManager.md#getallavailablelines)
- [getAllLines](./WorkflowLinesManager.md#getalllines)
- [getCloseInLineFromMousePos](./WorkflowLinesManager.md#getcloseinlinefrommousepos)
- [getLine](./WorkflowLinesManager.md#getline)
- [getLineById](./WorkflowLinesManager.md#getlinebyid)
- [getLineColor](./WorkflowLinesManager.md#getlinecolor)
- [getLinesByPortId](./WorkflowLinesManager.md#getlinesbyportid)
- [getNodeFromMousePos](./WorkflowLinesManager.md#getnodefrommousepos)
- [getPortById](./WorkflowLinesManager.md#getportbyid)
- [getPortFromMousePos](./WorkflowLinesManager.md#getportfrommousepos)
- [hasLine](./WorkflowLinesManager.md#hasline)
- [init](./WorkflowLinesManager.md#init)
- [isDisabledLine](./WorkflowLinesManager.md#isdisabledline)
- [isErrorLine](./WorkflowLinesManager.md#iserrorline)
- [isFlowingLine](./WorkflowLinesManager.md#isflowingline)
- [isHideArrowLine](./WorkflowLinesManager.md#ishidearrowline)
- [isReverseLine](./WorkflowLinesManager.md#isreverseline)
- [rebindLinePorts](./WorkflowLinesManager.md#rebindlineports)
- [registerContribution](./WorkflowLinesManager.md#registercontribution)
- [replaceLine](./WorkflowLinesManager.md#replaceline)
- [setLineClassName](./WorkflowLinesManager.md#setlineclassname)
- [setLineRenderType](./WorkflowLinesManager.md#setlinerendertype)
- [switchLineType](./WorkflowLinesManager.md#switchlinetype)
- [toJSON](./WorkflowLinesManager.md#tojson)
## Constructors
### constructor
**new WorkflowLinesManager**()
## Properties
### contributionFactories
`Readonly` **contributionFactories**: [`WorkflowLineRenderContributionFactory`](../types/WorkflowLineRenderContributionFactory.md)[] = `[]`
___
### hoverService
**hoverService**: [`WorkflowHoverService`](./WorkflowHoverService.md)
___
### isDrawing
**isDrawing**: `boolean` = `false`
是否在调整线条
___
### onAvailableLinesChange
`Readonly` **onAvailableLinesChange**: `Event`\<[`WorkflowContentChangeEvent`](../interfaces/WorkflowContentChangeEvent.md)\>
有效的线条被添加或者删除时候触发，未连上的线条不算
___
### onForceUpdate
`Readonly` **onForceUpdate**: `Event`\<`void`\>
强制渲染 lines
___
### options
`Readonly` **options**: [`WorkflowDocumentOptions`](../variables/WorkflowDocumentOptions-1.md)
___
### selectService
**selectService**: [`WorkflowSelectService`](./WorkflowSelectService.md)
## Accessors
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
___
### lineColor
`get` **lineColor**(): [`LineColor`](../interfaces/LineColor.md)
#### Returns
[`LineColor`](../interfaces/LineColor.md)
___
### lineType
`get` **lineType**(): [`LineRenderType`](../types/LineRenderType.md)
#### Returns
[`LineRenderType`](../types/LineRenderType.md)
## Methods
### canAddLine
**canAddLine**(`fromPort`, `toPort`, `silent?`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `fromPort` | [`WorkflowPortEntity`](./WorkflowPortEntity.md) |
| `toPort` | [`WorkflowPortEntity`](./WorkflowPortEntity.md) |
| `silent?` | `boolean` |
#### Returns
`boolean`
___
### canRemove
**canRemove**(`line`, `newLineInfo?`, `silent?`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `line` | [`WorkflowLineEntity`](./WorkflowLineEntity.md) |
| `newLineInfo?` | `Required`\<`Omit`\<[`WorkflowLinePortInfo`](../interfaces/WorkflowLinePortInfo.md), ``"data"``\>\> |
| `silent?` | `boolean` |
#### Returns
`boolean`
___
### canReset
**canReset**(`oldLine`, `newLineInfo`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `oldLine` | [`WorkflowLineEntity`](./WorkflowLineEntity.md) |
| `newLineInfo` | `Required`\<[`WorkflowLinePortInfo`](../interfaces/WorkflowLinePortInfo.md)\> |
#### Returns
`boolean`
___
### createLine
**createLine**(`options`): `undefined` \| [`WorkflowLineEntity`](./WorkflowLineEntity.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `options` | \{ `drawingFrom?`: [`LinePoint`](../interfaces/LinePoint.md) ; `drawingTo?`: [`LinePoint`](../interfaces/LinePoint.md) ; `key?`: `string` } & [`WorkflowLinePortInfo`](../interfaces/WorkflowLinePortInfo.md) |
#### Returns
`undefined` \| [`WorkflowLineEntity`](./WorkflowLineEntity.md)
___
### dispose
**dispose**(): `void`
#### Returns
`void`
___
### forceUpdate
**forceUpdate**(): `void`
#### Returns
`void`
___
### getAllAvailableLines
**getAllAvailableLines**(): [`WorkflowLineEntity`](./WorkflowLineEntity.md)[]
#### Returns
[`WorkflowLineEntity`](./WorkflowLineEntity.md)[]
___
### getAllLines
**getAllLines**(): [`WorkflowLineEntity`](./WorkflowLineEntity.md)[]
#### Returns
[`WorkflowLineEntity`](./WorkflowLineEntity.md)[]
___
### getCloseInLineFromMousePos
**getCloseInLineFromMousePos**(`mousePos`, `minDistance?`): `undefined` \| [`WorkflowLineEntity`](./WorkflowLineEntity.md)
获取线条中距离鼠标位置最近的线条和距离
#### Parameters
| Name | Type | Default value | Description |
| :------ | :------ | :------ | :------ |
| `mousePos` | `IPoint` | `undefined` | 鼠标位置 |
| `minDistance` | `number` | `LINE_HOVER_DISTANCE` | 最小检测距离 |
#### Returns
`undefined` \| [`WorkflowLineEntity`](./WorkflowLineEntity.md)
距离鼠标位置最近的线条 以及距离
___
### getLine
**getLine**(`portInfo`): `undefined` \| [`WorkflowLineEntity`](./WorkflowLineEntity.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `portInfo` | `Omit`\<[`WorkflowLinePortInfo`](../interfaces/WorkflowLinePortInfo.md), ``"data"``\> |
#### Returns
`undefined` \| [`WorkflowLineEntity`](./WorkflowLineEntity.md)
___
### getLineById
**getLineById**(`id`): `undefined` \| [`WorkflowLineEntity`](./WorkflowLineEntity.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `id` | `string` |
#### Returns
`undefined` \| [`WorkflowLineEntity`](./WorkflowLineEntity.md)
___
### getLineColor
**getLineColor**(`line`): `undefined` \| `string`
#### Parameters
| Name | Type |
| :------ | :------ |
| `line` | [`WorkflowLineEntity`](./WorkflowLineEntity.md) |
#### Returns
`undefined` \| `string`
___
### getLinesByPortId
**getLinesByPortId**(`portId`): [`WorkflowLineEntity`](./WorkflowLineEntity.md)[]
#### Parameters
| Name | Type |
| :------ | :------ |
| `portId` | `string` |
#### Returns
[`WorkflowLineEntity`](./WorkflowLineEntity.md)[]
___
### getNodeFromMousePos
**getNodeFromMousePos**(`pos`): `undefined` \| `FlowNodeEntity`
根据鼠标位置找到 node
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `pos` | `IPoint` | 鼠标位置 |
#### Returns
`undefined` \| `FlowNodeEntity`
___
### getPortById
**getPortById**(`portId`): `undefined` \| [`WorkflowPortEntity`](./WorkflowPortEntity.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `portId` | `string` |
#### Returns
`undefined` \| [`WorkflowPortEntity`](./WorkflowPortEntity.md)
___
### getPortFromMousePos
**getPortFromMousePos**(`pos`, `portType?`): `undefined` \| [`WorkflowPortEntity`](./WorkflowPortEntity.md)
根据鼠标位置找到 port
#### Parameters
| Name | Type |
| :------ | :------ |
| `pos` | `IPoint` |
| `portType?` | [`WorkflowPortType`](../types/WorkflowPortType.md) |
#### Returns
`undefined` \| [`WorkflowPortEntity`](./WorkflowPortEntity.md)
___
### hasLine
**hasLine**(`portInfo`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `portInfo` | `Omit`\<[`WorkflowLinePortInfo`](../interfaces/WorkflowLinePortInfo.md), ``"data"``\> |
#### Returns
`boolean`
___
### init
**init**(`doc`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `doc` | [`WorkflowDocument`](./WorkflowDocument.md) |
#### Returns
`void`
___
### isDisabledLine
**isDisabledLine**(`line`, `defaultValue?`): `boolean`
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `line` | [`WorkflowLineEntity`](./WorkflowLineEntity.md) | `undefined` |
| `defaultValue` | `boolean` | `false` |
#### Returns
`boolean`
___
### isErrorLine
**isErrorLine**(`fromPort?`, `toPort?`, `defaultValue?`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `fromPort?` | [`WorkflowPortEntity`](./WorkflowPortEntity.md) |
| `toPort?` | [`WorkflowPortEntity`](./WorkflowPortEntity.md) |
| `defaultValue?` | `boolean` |
#### Returns
`boolean`
___
### isFlowingLine
**isFlowingLine**(`line`, `defaultValue?`): `boolean`
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `line` | [`WorkflowLineEntity`](./WorkflowLineEntity.md) | `undefined` |
| `defaultValue` | `boolean` | `false` |
#### Returns
`boolean`
___
### isHideArrowLine
**isHideArrowLine**(`line`, `defaultValue?`): `boolean`
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `line` | [`WorkflowLineEntity`](./WorkflowLineEntity.md) | `undefined` |
| `defaultValue` | `boolean` | `false` |
#### Returns
`boolean`
___
### isReverseLine
**isReverseLine**(`line`, `defaultValue?`): `boolean`
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `line` | [`WorkflowLineEntity`](./WorkflowLineEntity.md) | `undefined` |
| `defaultValue` | `boolean` | `false` |
#### Returns
`boolean`
___
### rebindLinePorts
**rebindLinePorts**(`line`, `prevInfo?`, `nextInfo?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `line` | [`WorkflowLineEntity`](./WorkflowLineEntity.md) |
| `prevInfo?` | [`WorkflowLineInfo`](../interfaces/WorkflowLineInfo.md) |
| `nextInfo?` | [`WorkflowLineInfo`](../interfaces/WorkflowLineInfo.md) |
#### Returns
`void`
___
### registerContribution
**registerContribution**(`factory`): [`WorkflowLinesManager`](./WorkflowLinesManager.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `factory` | [`WorkflowLineRenderContributionFactory`](../types/WorkflowLineRenderContributionFactory.md) |
#### Returns
[`WorkflowLinesManager`](./WorkflowLinesManager.md)
___
### replaceLine
**replaceLine**(`oldPortInfo`, `newPortInfo`): [`WorkflowLineEntity`](./WorkflowLineEntity.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `oldPortInfo` | `Omit`\<[`WorkflowLinePortInfo`](../interfaces/WorkflowLinePortInfo.md), ``"data"``\> |
| `newPortInfo` | `Omit`\<[`WorkflowLinePortInfo`](../interfaces/WorkflowLinePortInfo.md), ``"data"``\> |
#### Returns
[`WorkflowLineEntity`](./WorkflowLineEntity.md)
___
### setLineClassName
**setLineClassName**(`line`): `undefined` \| `string`
#### Parameters
| Name | Type |
| :------ | :------ |
| `line` | [`WorkflowLineEntity`](./WorkflowLineEntity.md) |
#### Returns
`undefined` \| `string`
___
### setLineRenderType
**setLineRenderType**(`line`): `undefined` \| [`LineRenderType`](../types/LineRenderType.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `line` | [`WorkflowLineEntity`](./WorkflowLineEntity.md) |
#### Returns
`undefined` \| [`LineRenderType`](../types/LineRenderType.md)
___
### switchLineType
**switchLineType**(`newType?`): [`LineRenderType`](../types/LineRenderType.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `newType?` | [`LineRenderType`](../types/LineRenderType.md) |
#### Returns
[`LineRenderType`](../types/LineRenderType.md)
___
### toJSON
**toJSON**(): [`WorkflowEdgeJSON`](../interfaces/WorkflowEdgeJSON.md)[]
#### Returns
[`WorkflowEdgeJSON`](../interfaces/WorkflowEdgeJSON.md)[]
---
url: /auto-docs/free-layout-core/classes/WorkflowNodeLinesData.md
---
# Class: WorkflowNodeLinesData
节点的关联的线条
## Hierarchy
- `EntityData`\<[`WorkflowNodeLines`](../interfaces/WorkflowNodeLines.md)\>
↳ **`WorkflowNodeLinesData`**
## Table of contents
### Constructors
- [constructor](./WorkflowNodeLinesData.md#constructor)
### Properties
- [entity](./WorkflowNodeLinesData.md#entity)
- [onDataChange](./WorkflowNodeLinesData.md#ondatachange)
- [onWillChange](./WorkflowNodeLinesData.md#onwillchange)
- [opts](./WorkflowNodeLinesData.md#opts)
- [toDispose](./WorkflowNodeLinesData.md#todispose)
- [type](./WorkflowNodeLinesData.md#type)
### Accessors
- [allInputNodes](./WorkflowNodeLinesData.md#allinputnodes)
- [allLines](./WorkflowNodeLinesData.md#alllines)
- [allOutputNodes](./WorkflowNodeLinesData.md#alloutputnodes)
- [availableLines](./WorkflowNodeLinesData.md#availablelines)
- [changeLocked](./WorkflowNodeLinesData.md#changelocked)
- [data](./WorkflowNodeLinesData.md#data)
- [disposed](./WorkflowNodeLinesData.md#disposed)
- [inputLines](./WorkflowNodeLinesData.md#inputlines)
- [inputNodes](./WorkflowNodeLinesData.md#inputnodes)
- [onDispose](./WorkflowNodeLinesData.md#ondispose)
- [outputLines](./WorkflowNodeLinesData.md#outputlines)
- [outputNodes](./WorkflowNodeLinesData.md#outputnodes)
- [type](./WorkflowNodeLinesData.md#type-1)
- [version](./WorkflowNodeLinesData.md#version)
### Methods
- [addLine](./WorkflowNodeLinesData.md#addline)
- [checkChanged](./WorkflowNodeLinesData.md#checkchanged)
- [dispose](./WorkflowNodeLinesData.md#dispose)
- [fireChange](./WorkflowNodeLinesData.md#firechange)
- [fireWillChange](./WorkflowNodeLinesData.md#firewillchange)
- [fromJSON](./WorkflowNodeLinesData.md#fromjson)
- [fullyUpdate](./WorkflowNodeLinesData.md#fullyupdate)
- [getDefaultData](./WorkflowNodeLinesData.md#getdefaultdata)
- [removeLine](./WorkflowNodeLinesData.md#removeline)
- [toJSON](./WorkflowNodeLinesData.md#tojson)
- [update](./WorkflowNodeLinesData.md#update)
## Constructors
### constructor
**new WorkflowNodeLinesData**(`entity`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `entity` | `FlowNodeEntity` |
#### Overrides
EntityData\<WorkflowNodeLines\>.constructor
## Properties
### entity
**entity**: `FlowNodeEntity`
#### Overrides
EntityData.entity
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<`EntityData`\<[`WorkflowNodeLines`](../interfaces/WorkflowNodeLines.md), {}\>\>
修改后触发
#### Inherited from
EntityData.onDataChange
___
### onWillChange
`Readonly` **onWillChange**: `Event`\<`EntityData`\<[`WorkflowNodeLines`](../interfaces/WorkflowNodeLines.md), {}\>\>
修改前触发
#### Inherited from
EntityData.onWillChange
___
### opts
`Optional` `Readonly` **opts**: `Object`
#### Inherited from
EntityData.opts
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
#### Inherited from
EntityData.toDispose
___
### type
`Static` **type**: `string` = `'WorkflowNodeLinesData'`
#### Overrides
EntityData.type
## Accessors
### allInputNodes
`get` **allInputNodes**(): `FlowNodeEntity`[]
所有输入节点
#### Returns
`FlowNodeEntity`[]
___
### allLines
`get` **allLines**(): [`WorkflowLineEntity`](./WorkflowLineEntity.md)[]
#### Returns
[`WorkflowLineEntity`](./WorkflowLineEntity.md)[]
___
### allOutputNodes
`get` **allOutputNodes**(): `FlowNodeEntity`[]
输入输出节点
#### Returns
`FlowNodeEntity`[]
___
### availableLines
`get` **availableLines**(): [`WorkflowLineEntity`](./WorkflowLineEntity.md)[]
#### Returns
[`WorkflowLineEntity`](./WorkflowLineEntity.md)[]
___
### changeLocked
`get` **changeLocked**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.changeLocked
`set` **changeLocked**(`p`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `p` | `boolean` |
#### Returns
`void`
#### Inherited from
EntityData.changeLocked
___
### data
`get` **data**(): `DATA`
当前数据
#### Returns
`DATA`
#### Inherited from
EntityData.data
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.disposed
___
### inputLines
`get` **inputLines**(): [`WorkflowLineEntity`](./WorkflowLineEntity.md)[]
输入线条
#### Returns
[`WorkflowLineEntity`](./WorkflowLineEntity.md)[]
___
### inputNodes
`get` **inputNodes**(): `FlowNodeEntity`[]
输入节点
#### Returns
`FlowNodeEntity`[]
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
#### Returns
`Event`\<`void`\>
#### Inherited from
EntityData.onDispose
___
### outputLines
`get` **outputLines**(): [`WorkflowLineEntity`](./WorkflowLineEntity.md)[]
输出线条
#### Returns
[`WorkflowLineEntity`](./WorkflowLineEntity.md)[]
___
### outputNodes
`get` **outputNodes**(): `FlowNodeEntity`[]
输出节点
#### Returns
`FlowNodeEntity`[]
___
### type
`get` **type**(): `string`
data 类型
#### Returns
`string`
#### Inherited from
EntityData.type
___
### version
`get` **version**(): `number`
#### Returns
`number`
#### Inherited from
EntityData.version
## Methods
### addLine
**addLine**(`line`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `line` | [`WorkflowLineEntity`](./WorkflowLineEntity.md) |
#### Returns
`void`
___
### checkChanged
**checkChanged**(`newProps`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `newProps` | [`WorkflowNodeLines`](../interfaces/WorkflowNodeLines.md) \| `Partial`\<[`WorkflowNodeLines`](../interfaces/WorkflowNodeLines.md)\> |
#### Returns
`boolean`
**`Deprecated`**
检测属性是否更改，默认采用浅比较
#### Inherited from
EntityData.checkChanged
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Inherited from
EntityData.dispose
___
### fireChange
**fireChange**(): `void`
#### Returns
`void`
#### Inherited from
EntityData.fireChange
___
### fireWillChange
**fireWillChange**(): `void`
#### Returns
`void`
#### Inherited from
EntityData.fireWillChange
___
### fromJSON
**fromJSON**(`data`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data` | `object` |
#### Returns
`void`
#### Inherited from
EntityData.fromJSON
___
### fullyUpdate
**fullyUpdate**(`props`): `void`
更新全量数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | [`WorkflowNodeLines`](../interfaces/WorkflowNodeLines.md) |
#### Returns
`void`
#### Inherited from
EntityData.fullyUpdate
___
### getDefaultData
**getDefaultData**(): [`WorkflowNodeLines`](../interfaces/WorkflowNodeLines.md)
#### Returns
[`WorkflowNodeLines`](../interfaces/WorkflowNodeLines.md)
#### Overrides
EntityData.getDefaultData
___
### removeLine
**removeLine**(`line`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `line` | [`WorkflowLineEntity`](./WorkflowLineEntity.md) |
#### Returns
`void`
___
### toJSON
**toJSON**(): `any`
存储数据，一般在关闭浏览器后需要暂时存到 localStorage
#### Returns
`any`
#### Inherited from
EntityData.toJSON
___
### update
**update**(`props`, `value?`): `void`
更新单个数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | [`WorkflowNodeLines`](../interfaces/WorkflowNodeLines.md) \| `Partial`\<[`WorkflowNodeLines`](../interfaces/WorkflowNodeLines.md)\> \| keyof [`WorkflowNodeLines`](../interfaces/WorkflowNodeLines.md) |
| `value?` | `any` |
#### Returns
`void`
#### Inherited from
EntityData.update
---
url: /auto-docs/free-layout-core/classes/WorkflowNodePortsData.md
---
# Class: WorkflowNodePortsData
节点的点位信息
portsData 只监听点位的数目和类型，不监听点位的 position 变化
## Hierarchy
- `EntityData`
↳ **`WorkflowNodePortsData`**
## Table of contents
### Constructors
- [constructor](./WorkflowNodePortsData.md#constructor)
### Properties
- [entity](./WorkflowNodePortsData.md#entity)
- [onDataChange](./WorkflowNodePortsData.md#ondatachange)
- [onWillChange](./WorkflowNodePortsData.md#onwillchange)
- [opts](./WorkflowNodePortsData.md#opts)
- [toDispose](./WorkflowNodePortsData.md#todispose)
- [type](./WorkflowNodePortsData.md#type)
### Accessors
- [allPorts](./WorkflowNodePortsData.md#allports)
- [changeLocked](./WorkflowNodePortsData.md#changelocked)
- [data](./WorkflowNodePortsData.md#data)
- [disposed](./WorkflowNodePortsData.md#disposed)
- [inputPoints](./WorkflowNodePortsData.md#inputpoints)
- [inputPorts](./WorkflowNodePortsData.md#inputports)
- [onDispose](./WorkflowNodePortsData.md#ondispose)
- [outputPoints](./WorkflowNodePortsData.md#outputpoints)
- [outputPorts](./WorkflowNodePortsData.md#outputports)
- [type](./WorkflowNodePortsData.md#type-1)
- [version](./WorkflowNodePortsData.md#version)
### Methods
- [checkChanged](./WorkflowNodePortsData.md#checkchanged)
- [dispose](./WorkflowNodePortsData.md#dispose)
- [fireChange](./WorkflowNodePortsData.md#firechange)
- [fireWillChange](./WorkflowNodePortsData.md#firewillchange)
- [fromJSON](./WorkflowNodePortsData.md#fromjson)
- [fullyUpdate](./WorkflowNodePortsData.md#fullyupdate)
- [getDefaultData](./WorkflowNodePortsData.md#getdefaultdata)
- [getInputPoint](./WorkflowNodePortsData.md#getinputpoint)
- [getOutputPoint](./WorkflowNodePortsData.md#getoutputpoint)
- [getPortEntityByKey](./WorkflowNodePortsData.md#getportentitybykey)
- [toJSON](./WorkflowNodePortsData.md#tojson)
- [update](./WorkflowNodePortsData.md#update)
- [updateAllPorts](./WorkflowNodePortsData.md#updateallports)
- [updateDynamicPorts](./WorkflowNodePortsData.md#updatedynamicports)
- [updateStaticPorts](./WorkflowNodePortsData.md#updatestaticports)
## Constructors
### constructor
**new WorkflowNodePortsData**(`entity`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `entity` | `FlowNodeEntity` |
#### Overrides
EntityData.constructor
## Properties
### entity
`Readonly` **entity**: `FlowNodeEntity`
#### Overrides
EntityData.entity
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<`EntityData`\<`any`, {}\>\>
修改后触发
#### Inherited from
EntityData.onDataChange
___
### onWillChange
`Readonly` **onWillChange**: `Event`\<`EntityData`\<`any`, {}\>\>
修改前触发
#### Inherited from
EntityData.onWillChange
___
### opts
`Optional` `Readonly` **opts**: `Object`
#### Inherited from
EntityData.opts
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
#### Inherited from
EntityData.toDispose
___
### type
`Static` `Readonly` **type**: ``"WorkflowNodePortsData"``
#### Overrides
EntityData.type
## Accessors
### allPorts
`get` **allPorts**(): [`WorkflowPortEntity`](./WorkflowPortEntity.md)[]
获取所有 port entities
#### Returns
[`WorkflowPortEntity`](./WorkflowPortEntity.md)[]
___
### changeLocked
`get` **changeLocked**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.changeLocked
`set` **changeLocked**(`p`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `p` | `boolean` |
#### Returns
`void`
#### Inherited from
EntityData.changeLocked
___
### data
`get` **data**(): `DATA`
当前数据
#### Returns
`DATA`
#### Inherited from
EntityData.data
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
EntityData.disposed
___
### inputPoints
`get` **inputPoints**(): [`LinePoint`](../interfaces/LinePoint.md)[]
获取输入点位置
#### Returns
[`LinePoint`](../interfaces/LinePoint.md)[]
___
### inputPorts
`get` **inputPorts**(): [`WorkflowPortEntity`](./WorkflowPortEntity.md)[]
获取输入点位
#### Returns
[`WorkflowPortEntity`](./WorkflowPortEntity.md)[]
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
#### Returns
`Event`\<`void`\>
#### Inherited from
EntityData.onDispose
___
### outputPoints
`get` **outputPoints**(): [`LinePoint`](../interfaces/LinePoint.md)[]
获取输出点位置
#### Returns
[`LinePoint`](../interfaces/LinePoint.md)[]
___
### outputPorts
`get` **outputPorts**(): [`WorkflowPortEntity`](./WorkflowPortEntity.md)[]
获取输出点位
#### Returns
[`WorkflowPortEntity`](./WorkflowPortEntity.md)[]
___
### type
`get` **type**(): `string`
data 类型
#### Returns
`string`
#### Inherited from
EntityData.type
___
### version
`get` **version**(): `number`
#### Returns
`number`
#### Inherited from
EntityData.version
## Methods
### checkChanged
**checkChanged**(`newProps`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `newProps` | `any` |
#### Returns
`boolean`
**`Deprecated`**
检测属性是否更改，默认采用浅比较
#### Inherited from
EntityData.checkChanged
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Inherited from
EntityData.dispose
___
### fireChange
**fireChange**(): `void`
#### Returns
`void`
#### Inherited from
EntityData.fireChange
___
### fireWillChange
**fireWillChange**(): `void`
#### Returns
`void`
#### Inherited from
EntityData.fireWillChange
___
### fromJSON
**fromJSON**(`data`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data` | `object` |
#### Returns
`void`
#### Inherited from
EntityData.fromJSON
___
### fullyUpdate
**fullyUpdate**(`props`): `void`
更新全量数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | `any` |
#### Returns
`void`
#### Inherited from
EntityData.fullyUpdate
___
### getDefaultData
**getDefaultData**(): `any`
#### Returns
`any`
#### Overrides
EntityData.getDefaultData
___
### getInputPoint
**getInputPoint**(`key?`): [`LinePoint`](../interfaces/LinePoint.md)
根据 key 获取 输入点位置
#### Parameters
| Name | Type |
| :------ | :------ |
| `key?` | `string` \| `number` |
#### Returns
[`LinePoint`](../interfaces/LinePoint.md)
___
### getOutputPoint
**getOutputPoint**(`key?`): [`LinePoint`](../interfaces/LinePoint.md)
根据 key 获取输出点位置
#### Parameters
| Name | Type |
| :------ | :------ |
| `key?` | `string` \| `number` |
#### Returns
[`LinePoint`](../interfaces/LinePoint.md)
___
### getPortEntityByKey
**getPortEntityByKey**(`portType`, `portKey?`): [`WorkflowPortEntity`](./WorkflowPortEntity.md)
根据 key 获取 port 实体
#### Parameters
| Name | Type |
| :------ | :------ |
| `portType` | [`WorkflowPortType`](../types/WorkflowPortType.md) |
| `portKey?` | `string` \| `number` |
#### Returns
[`WorkflowPortEntity`](./WorkflowPortEntity.md)
___
### toJSON
**toJSON**(): `any`
存储数据，一般在关闭浏览器后需要暂时存到 localStorage
#### Returns
`any`
#### Inherited from
EntityData.toJSON
___
### update
**update**(`props`, `value?`): `void`
更新单个数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | `any` |
| `value?` | `any` |
#### Returns
`void`
#### Inherited from
EntityData.update
___
### updateAllPorts
**updateAllPorts**(`ports?`): `void`
Update all ports data, includes static ports and dynamic ports
#### Parameters
| Name | Type |
| :------ | :------ |
| `ports?` | [`WorkflowPorts`](../types/WorkflowPorts.md) |
#### Returns
`void`
___
### updateDynamicPorts
**updateDynamicPorts**(): `void`
动态计算点位，通过 dom 的 data-port-key
#### Returns
`void`
___
### updateStaticPorts
**updateStaticPorts**(`ports`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `ports` | [`WorkflowPorts`](../types/WorkflowPorts.md) |
#### Returns
`void`
**`Deprecated`**
use `updateAllPorts` instead
---
url: /auto-docs/free-layout-core/classes/WorkflowOperationBaseServiceImpl.md
---
# Class: WorkflowOperationBaseServiceImpl
## Hierarchy
- `FlowOperationBaseServiceImpl`
↳ **`WorkflowOperationBaseServiceImpl`**
## Implements
- [`WorkflowOperationBaseService`](../variables/WorkflowOperationBaseService-1.md)
## Table of contents
### Constructors
- [constructor](./WorkflowOperationBaseServiceImpl.md#constructor)
### Properties
- [linesManager](./WorkflowOperationBaseServiceImpl.md#linesmanager)
- [onNodeAdd](./WorkflowOperationBaseServiceImpl.md#onnodeadd)
- [onNodeMove](./WorkflowOperationBaseServiceImpl.md#onnodemove)
- [onNodePostionUpdate](./WorkflowOperationBaseServiceImpl.md#onnodepostionupdate)
### Methods
- [addBlock](./WorkflowOperationBaseServiceImpl.md#addblock)
- [addFromNode](./WorkflowOperationBaseServiceImpl.md#addfromnode)
- [addNode](./WorkflowOperationBaseServiceImpl.md#addnode)
- [apply](./WorkflowOperationBaseServiceImpl.md#apply)
- [deleteNode](./WorkflowOperationBaseServiceImpl.md#deletenode)
- [deleteNodes](./WorkflowOperationBaseServiceImpl.md#deletenodes)
- [dispose](./WorkflowOperationBaseServiceImpl.md#dispose)
- [dragNodes](./WorkflowOperationBaseServiceImpl.md#dragnodes)
- [fromJSON](./WorkflowOperationBaseServiceImpl.md#fromjson)
- [moveNode](./WorkflowOperationBaseServiceImpl.md#movenode)
- [transact](./WorkflowOperationBaseServiceImpl.md#transact)
- [updateNodePosition](./WorkflowOperationBaseServiceImpl.md#updatenodeposition)
## Constructors
### constructor
**new WorkflowOperationBaseServiceImpl**()
#### Inherited from
FlowOperationBaseServiceImpl.constructor
## Properties
### linesManager
**linesManager**: [`WorkflowLinesManager`](./WorkflowLinesManager.md)
___
### onNodeAdd
`Readonly` **onNodeAdd**: `Event`\<`OnNodeAddEvent`\>
#### Implementation of
WorkflowOperationBaseService.onNodeAdd
#### Inherited from
FlowOperationBaseServiceImpl.onNodeAdd
___
### onNodeMove
`Readonly` **onNodeMove**: `Event`\<`OnNodeMoveEvent`\>
#### Implementation of
WorkflowOperationBaseService.onNodeMove
#### Inherited from
FlowOperationBaseServiceImpl.onNodeMove
___
### onNodePostionUpdate
`Readonly` **onNodePostionUpdate**: `Event`\<[`NodePostionUpdateEvent`](../interfaces/NodePostionUpdateEvent.md)\>
#### Implementation of
WorkflowOperationBaseService.onNodePostionUpdate
## Methods
### addBlock
**addBlock**(`target`, `blockJSON`, `config?`): `FlowNodeEntity`
#### Parameters
| Name | Type |
| :------ | :------ |
| `target` | `FlowNodeEntityOrId` |
| `blockJSON` | `FlowNodeJSON` |
| `config?` | `AddBlockConfig` |
#### Returns
`FlowNodeEntity`
#### Implementation of
WorkflowOperationBaseService.addBlock
#### Inherited from
FlowOperationBaseServiceImpl.addBlock
___
### addFromNode
**addFromNode**(`fromNode`, `nodeJSON`): `FlowNodeEntity`
#### Parameters
| Name | Type |
| :------ | :------ |
| `fromNode` | `FlowNodeEntityOrId` |
| `nodeJSON` | `FlowNodeJSON` |
#### Returns
`FlowNodeEntity`
#### Implementation of
WorkflowOperationBaseService.addFromNode
#### Inherited from
FlowOperationBaseServiceImpl.addFromNode
___
### addNode
**addNode**(`nodeJSON`, `config?`): `FlowNodeEntity`
#### Parameters
| Name | Type |
| :------ | :------ |
| `nodeJSON` | `FlowNodeJSON` |
| `config?` | `AddNodeConfig` |
#### Returns
`FlowNodeEntity`
#### Implementation of
WorkflowOperationBaseService.addNode
#### Inherited from
FlowOperationBaseServiceImpl.addNode
___
### apply
**apply**(`operation`): `any`
执行操作
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `operation` | `FlowOperation` | 可序列化的操作 |
#### Returns
`any`
操作返回
#### Implementation of
WorkflowOperationBaseService.apply
#### Inherited from
FlowOperationBaseServiceImpl.apply
___
### deleteNode
**deleteNode**(`node`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `FlowNodeEntityOrId` |
#### Returns
`void`
#### Implementation of
WorkflowOperationBaseService.deleteNode
#### Inherited from
FlowOperationBaseServiceImpl.deleteNode
___
### deleteNodes
**deleteNodes**(`nodes`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `nodes` | `FlowNodeEntityOrId`[] |
#### Returns
`void`
#### Implementation of
WorkflowOperationBaseService.deleteNodes
#### Inherited from
FlowOperationBaseServiceImpl.deleteNodes
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Implementation of
WorkflowOperationBaseService.dispose
#### Inherited from
FlowOperationBaseServiceImpl.dispose
___
### dragNodes
**dragNodes**(`param0`): `any`
拖拽节点
#### Parameters
| Name | Type |
| :------ | :------ |
| `param0` | `Object` |
| `param0.dropNode` | `FlowNodeEntity` |
| `param0.nodes` | `FlowNodeEntity`[] |
#### Returns
`any`
#### Implementation of
WorkflowOperationBaseService.dragNodes
#### Inherited from
FlowOperationBaseServiceImpl.dragNodes
___
### fromJSON
**fromJSON**(`json`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `json` | [`WorkflowJSON`](../interfaces/WorkflowJSON.md) |
#### Returns
`void`
#### Implementation of
WorkflowOperationBaseService.fromJSON
___
### moveNode
**moveNode**(`node`, `config?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `FlowNodeEntityOrId` |
| `config?` | `MoveNodeConfig` |
#### Returns
`void`
#### Implementation of
WorkflowOperationBaseService.moveNode
#### Inherited from
FlowOperationBaseServiceImpl.moveNode
___
### transact
**transact**(`transaction`): `void`
事务执行
#### Parameters
| Name | Type |
| :------ | :------ |
| `transaction` | () => `void` |
#### Returns
`void`
#### Inherited from
FlowOperationBaseServiceImpl.transact
___
### updateNodePosition
**updateNodePosition**(`nodeOrId`, `position`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `nodeOrId` | `FlowNodeEntityOrId` |
| `position` | `IPoint` |
#### Returns
`void`
#### Implementation of
WorkflowOperationBaseService.updateNodePosition
---
url: /auto-docs/free-layout-core/classes/WorkflowPortEntity.md
---
# Class: WorkflowPortEntity
Port 抽象的 Entity
## Hierarchy
- `Entity`\<[`WorkflowPortEntityOpts`](../interfaces/WorkflowPortEntityOpts.md)\>
↳ **`WorkflowPortEntity`**
## Table of contents
### Constructors
- [constructor](./WorkflowPortEntity.md#constructor)
### Properties
- [\_\_opts\_type\_\_](./WorkflowPortEntity.md#__opts_type__)
- [entityManager](./WorkflowPortEntity.md#entitymanager)
- [node](./WorkflowPortEntity.md#node)
- [onDataChange](./WorkflowPortEntity.md#ondatachange)
- [onEntityChange](./WorkflowPortEntity.md#onentitychange)
- [onErrorChanged](./WorkflowPortEntity.md#onerrorchanged)
- [portID](./WorkflowPortEntity.md#portid)
- [portType](./WorkflowPortEntity.md#porttype)
- [preDispose](./WorkflowPortEntity.md#predispose)
- [targetElement](./WorkflowPortEntity.md#targetelement)
- [toDispose](./WorkflowPortEntity.md#todispose)
- [type](./WorkflowPortEntity.md#type)
### Accessors
- [allLines](./WorkflowPortEntity.md#alllines)
- [availableLines](./WorkflowPortEntity.md#availablelines)
- [bounds](./WorkflowPortEntity.md#bounds)
- [context](./WorkflowPortEntity.md#context)
- [disabled](./WorkflowPortEntity.md#disabled)
- [disposed](./WorkflowPortEntity.md#disposed)
- [hasError](./WorkflowPortEntity.md#haserror)
- [id](./WorkflowPortEntity.md#id)
- [lines](./WorkflowPortEntity.md#lines)
- [location](./WorkflowPortEntity.md#location)
- [onDispose](./WorkflowPortEntity.md#ondispose)
- [point](./WorkflowPortEntity.md#point)
- [position](./WorkflowPortEntity.md#position)
- [relativePosition](./WorkflowPortEntity.md#relativeposition)
- [savedInManager](./WorkflowPortEntity.md#savedinmanager)
- [type](./WorkflowPortEntity.md#type-1)
- [version](./WorkflowPortEntity.md#version)
### Methods
- [addData](./WorkflowPortEntity.md#adddata)
- [addInitializeData](./WorkflowPortEntity.md#addinitializedata)
- [dispose](./WorkflowPortEntity.md#dispose)
- [fromJSON](./WorkflowPortEntity.md#fromjson)
- [getData](./WorkflowPortEntity.md#getdata)
- [getDefaultDataRegistries](./WorkflowPortEntity.md#getdefaultdataregistries)
- [getService](./WorkflowPortEntity.md#getservice)
- [hasData](./WorkflowPortEntity.md#hasdata)
- [isErrorPort](./WorkflowPortEntity.md#iserrorport)
- [isHovered](./WorkflowPortEntity.md#ishovered)
- [removeData](./WorkflowPortEntity.md#removedata)
- [reset](./WorkflowPortEntity.md#reset)
- [toJSON](./WorkflowPortEntity.md#tojson)
- [update](./WorkflowPortEntity.md#update)
- [updateData](./WorkflowPortEntity.md#updatedata)
- [updateTargetElement](./WorkflowPortEntity.md#updatetargetelement)
- [validate](./WorkflowPortEntity.md#validate)
- [getPortEntityId](./WorkflowPortEntity.md#getportentityid)
## Constructors
### constructor
**new WorkflowPortEntity**(`opts`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `opts` | [`WorkflowPortEntityOpts`](../interfaces/WorkflowPortEntityOpts.md) |
#### Overrides
Entity\<WorkflowPortEntityOpts\>.constructor
## Properties
### \_\_opts\_type\_\_
**\_\_opts\_type\_\_**: [`WorkflowPortEntityOpts`](../interfaces/WorkflowPortEntityOpts.md)
#### Inherited from
Entity.\_\_opts\_type\_\_
___
### entityManager
`Readonly` **entityManager**: `EntityManager`
全局的entity管理器
#### Inherited from
Entity.entityManager
___
### node
`Readonly` **node**: `FlowNodeEntity`
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<`EntityDataChangedEvent`\<`Entity`\<`EntityOpts`\>\>\>
数据更改事件
#### Inherited from
Entity.onDataChange
___
### onEntityChange
`Readonly` **onEntityChange**: `Event`\<`Entity`\<`EntityOpts`\>\>
修改会触发
#### Inherited from
Entity.onEntityChange
___
### onErrorChanged
**onErrorChanged**: `Event`\<`void`\>
___
### portID
`Readonly` **portID**: `string` \| `number` = `''`
___
### portType
`Readonly` **portType**: [`WorkflowPortType`](../types/WorkflowPortType.md)
___
### preDispose
`Readonly` **preDispose**: `DisposableCollection`
销毁前事件管理
#### Inherited from
Entity.preDispose
___
### targetElement
`Optional` **targetElement**: `HTMLElement`
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
销毁事件管理
#### Inherited from
Entity.toDispose
___
### type
`Static` **type**: `string` = `'WorkflowPortEntity'`
#### Overrides
Entity.type
## Accessors
### allLines
`get` **allLines**(): [`WorkflowLineEntity`](./WorkflowLineEntity.md)[]
当前点位上连接的线条（包含 isDrawing === true 的线条）
#### Returns
[`WorkflowLineEntity`](./WorkflowLineEntity.md)[]
___
### availableLines
`get` **availableLines**(): [`WorkflowLineEntity`](./WorkflowLineEntity.md)[]
当前有效的线条，不包含正在画的线条和隐藏的线条（这个出现在线条重连会先把原来的线条隐藏）
#### Returns
[`WorkflowLineEntity`](./WorkflowLineEntity.md)[]
___
### bounds
`get` **bounds**(): `Rectangle`
端口热区
#### Returns
`Rectangle`
___
### context
`get` **context**(): `any`
#### Returns
`any`
#### Inherited from
Entity.context
___
### disabled
`get` **disabled**(): `boolean`
是否被禁用
#### Returns
`boolean`
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
Entity.disposed
___
### hasError
`get` **hasError**(): `boolean`
#### Returns
`boolean`
`set` **hasError**(`hasError`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `hasError` | `boolean` |
#### Returns
`void`
___
### id
`get` **id**(): `string`
实体 id
#### Returns
`string`
#### Inherited from
Entity.id
___
### lines
`get` **lines**(): [`WorkflowLineEntity`](./WorkflowLineEntity.md)[]
当前点位上连接的线条
#### Returns
[`WorkflowLineEntity`](./WorkflowLineEntity.md)[]
**`Deprecated`**
use `availableLines` instead
___
### location
`get` **location**(): [`LinePointLocation`](../types/LinePointLocation.md)
#### Returns
[`LinePointLocation`](../types/LinePointLocation.md)
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
销毁事件
#### Returns
`Event`\<`void`\>
#### Inherited from
Entity.onDispose
___
### point
`get` **point**(): [`LinePoint`](../interfaces/LinePoint.md)
#### Returns
[`LinePoint`](../interfaces/LinePoint.md)
___
### position
`get` **position**(): `undefined` \| [`LinePointLocation`](../types/LinePointLocation.md)
#### Returns
`undefined` \| [`LinePointLocation`](../types/LinePointLocation.md)
___
### relativePosition
`get` **relativePosition**(): `IPoint`
相对节点左上角的位置
#### Returns
`IPoint`
___
### savedInManager
`get` **savedInManager**(): `boolean`
是否存到全局 manager，默认 true
#### Returns
`boolean`
#### Inherited from
Entity.savedInManager
___
### type
`get` **type**(): `string`
实体类型
#### Returns
`string`
#### Inherited from
Entity.type
___
### version
`get` **version**(): `number`
实体的版本
#### Returns
`number`
#### Inherited from
Entity.version
## Methods
### addData
**addData**\<`D`\>(`Registry`, `defaultProps?`): `D`
添加数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\> |
| `defaultProps?` | `EntityDataProps`\<`D`\> |
#### Returns
`D`
#### Inherited from
Entity.addData
___
### addInitializeData
**addInitializeData**(`datas`, `dataConfig?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `datas` | `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[] |
| `dataConfig?` | `any` |
#### Returns
`void`
#### Inherited from
Entity.addInitializeData
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Overrides
Entity.dispose
___
### fromJSON
**fromJSON**(`data?`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data?` | `any` |
#### Returns
`void`
#### Inherited from
Entity.fromJSON
___
### getData
**getData**\<`D`\>(`Registry`): `D`
获取 data 数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`D`\> |
#### Returns
`D`
#### Inherited from
Entity.getData
___
### getDefaultDataRegistries
**getDefaultDataRegistries**(): `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[]
默认初始化的 Data
#### Returns
`EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[]
#### Inherited from
Entity.getDefaultDataRegistries
___
### getService
**getService**\<`T`\>(`identifier`): `T`
获取 IOC 服务
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `identifier` | `ServiceIdentifier`\<`T`\> |
#### Returns
`T`
#### Inherited from
Entity.getService
___
### hasData
**hasData**(`Registry`): `boolean`
是否有指定数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\> |
#### Returns
`boolean`
#### Inherited from
Entity.hasData
___
### isErrorPort
**isErrorPort**(): `boolean`
#### Returns
`boolean`
___
### isHovered
**isHovered**(`x`, `y`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `x` | `number` |
| `y` | `number` |
#### Returns
`boolean`
___
### removeData
**removeData**\<`D`\>(`Registry`): `void`
删除数据，初始化状态注入的数据无法被删除
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`D`\> |
#### Returns
`void`
#### Inherited from
Entity.removeData
___
### reset
**reset**(): `void`
重制为初始化状态
#### Returns
`void`
#### Inherited from
Entity.reset
___
### toJSON
**toJSON**(): `any`
存储数据，用于持久化存储
#### Returns
`any`
#### Inherited from
Entity.toJSON
___
### update
**update**(`data`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `data` | [`WorkflowPort`](../interfaces/WorkflowPort.md) |
#### Returns
`void`
___
### updateData
**updateData**\<`D`\>(`Registry`, `props`): `void`
更新实体的数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`D`\> |
| `props` | `EntityDataProps`\<`D`\> |
#### Returns
`void`
#### Inherited from
Entity.updateData
___
### updateTargetElement
**updateTargetElement**(`el?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `el?` | `HTMLElement` |
#### Returns
`void`
___
### validate
**validate**(): `void`
#### Returns
`void`
___
### getPortEntityId
`Static` **getPortEntityId**(`node`, `portType`, `portID?`): `string`
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `node` | `FlowNodeEntity` | `undefined` |
| `portType` | [`WorkflowPortType`](../types/WorkflowPortType.md) | `undefined` |
| `portID` | `string` \| `number` | `''` |
#### Returns
`string`
---
url: /auto-docs/free-layout-core/classes/WorkflowResetLayoutService.md
---
# Class: WorkflowResetLayoutService
重置布局服务
## Table of contents
### Constructors
- [constructor](./WorkflowResetLayoutService.md#constructor)
### Properties
- [onResetLayout](./WorkflowResetLayoutService.md#onresetlayout)
### Methods
- [dispose](./WorkflowResetLayoutService.md#dispose)
- [fireResetLayout](./WorkflowResetLayoutService.md#fireresetlayout)
- [init](./WorkflowResetLayoutService.md#init)
- [layoutToPositions](./WorkflowResetLayoutService.md#layouttopositions)
## Constructors
### constructor
**new WorkflowResetLayoutService**()
## Properties
### onResetLayout
`Readonly` **onResetLayout**: `Event`\<\{ `nodeIds`: `string`[] ; `oldPositionMap`: [`PositionMap`](../types/PositionMap.md) ; `positionMap`: [`PositionMap`](../types/PositionMap.md) }\>
reset layout事件
## Methods
### dispose
**dispose**(): `void`
销毁
#### Returns
`void`
___
### fireResetLayout
**fireResetLayout**(`nodeIds`, `positionMap`, `oldPositionMap`): `void`
触发重置布局
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `nodeIds` | `string`[] | 节点id |
| `positionMap` | [`PositionMap`](../types/PositionMap.md) | 新布局数据 |
| `oldPositionMap` | [`PositionMap`](../types/PositionMap.md) | 老布局数据 |
#### Returns
`void`
___
### init
**init**(): `void`
初始化
#### Returns
`void`
___
### layoutToPositions
**layoutToPositions**(`nodeIds`, `positionMap`): `Promise`\<`Record`\<`string`, `IPoint`\>\>
根据数据重新布局
#### Parameters
| Name | Type |
| :------ | :------ |
| `nodeIds` | `string`[] |
| `positionMap` | [`PositionMap`](../types/PositionMap.md) |
#### Returns
`Promise`\<`Record`\<`string`, `IPoint`\>\>
---
url: /auto-docs/free-layout-core/classes/WorkflowSelectService.md
---
# Class: WorkflowSelectService
## Table of contents
### Constructors
- [constructor](./WorkflowSelectService.md#constructor)
### Accessors
- [activatedNode](./WorkflowSelectService.md#activatednode)
- [onSelectionChanged](./WorkflowSelectService.md#onselectionchanged)
- [selectedNodes](./WorkflowSelectService.md#selectednodes)
- [selection](./WorkflowSelectService.md#selection)
### Methods
- [clear](./WorkflowSelectService.md#clear)
- [isActivated](./WorkflowSelectService.md#isactivated)
- [isSelected](./WorkflowSelectService.md#isselected)
- [select](./WorkflowSelectService.md#select)
- [selectNode](./WorkflowSelectService.md#selectnode)
- [selectNodeAndFocus](./WorkflowSelectService.md#selectnodeandfocus)
- [selectNodeAndScrollToView](./WorkflowSelectService.md#selectnodeandscrolltoview)
- [toggleSelect](./WorkflowSelectService.md#toggleselect)
## Constructors
### constructor
**new WorkflowSelectService**()
## Accessors
### activatedNode
`get` **activatedNode**(): `undefined` \| `FlowNodeEntity`
当前激活的节点只能有一个
#### Returns
`undefined` \| `FlowNodeEntity`
___
### onSelectionChanged
`get` **onSelectionChanged**(): `Event`\<`void`\>
#### Returns
`Event`\<`void`\>
___
### selectedNodes
`get` **selectedNodes**(): `FlowNodeEntity`[]
选中的节点
#### Returns
`FlowNodeEntity`[]
___
### selection
`get` **selection**(): `Entity`\<`EntityOpts`\>[]
#### Returns
`Entity`\<`EntityOpts`\>[]
`set` **selection**(`entities`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `entities` | `Entity`\<`EntityOpts`\>[] |
#### Returns
`void`
## Methods
### clear
**clear**(): `void`
#### Returns
`void`
___
### isActivated
**isActivated**(`id`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `id` | `string` |
#### Returns
`boolean`
___
### isSelected
**isSelected**(`id`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `id` | `string` |
#### Returns
`boolean`
___
### select
**select**(`node`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | [`WorkflowEntityHoverable`](../types/WorkflowEntityHoverable.md) |
#### Returns
`void`
___
### selectNode
**selectNode**(`node`): `void`
选中
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `FlowNodeEntity` |
#### Returns
`void`
___
### selectNodeAndFocus
**selectNodeAndFocus**(`node`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `FlowNodeEntity` |
#### Returns
`void`
___
### selectNodeAndScrollToView
**selectNodeAndScrollToView**(`node`, `fitView?`): `Promise`\<`void`\>
选中并滚动到节点
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `FlowNodeEntity` |
| `fitView?` | `boolean` |
#### Returns
`Promise`\<`void`\>
___
### toggleSelect
**toggleSelect**(`node`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `FlowNodeEntity` |
#### Returns
`void`
---
url: /auto-docs/free-layout-core/enums/EditorCursorState.md
---
# Enumeration: EditorCursorState
Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
SPDX-License-Identifier: MIT
## Table of contents
### Enumeration Members
- [GRAB](./EditorCursorState.md#grab)
- [SELECT](./EditorCursorState.md#select)
## Enumeration Members
### GRAB
**GRAB** = ``"GRAB"``
___
### SELECT
**SELECT** = ``"SELECT"``
---
url: /auto-docs/free-layout-core/enums/InteractiveType.md
---
# Enumeration: InteractiveType
## Table of contents
### Enumeration Members
- [MOUSE](./InteractiveType.md#mouse)
- [PAD](./InteractiveType.md#pad)
## Enumeration Members
### MOUSE
**MOUSE** = ``"MOUSE"``
鼠标优先交互模式
___
### PAD
**PAD** = ``"PAD"``
触控板优先交互模式
---
url: /auto-docs/free-layout-core/enums/LineColors.md
---
# Enumeration: LineColors
## Table of contents
### Enumeration Members
- [DEFUALT](./LineColors.md#defualt)
- [DRAWING](./LineColors.md#drawing)
- [ERROR](./LineColors.md#error)
- [FLOWING](./LineColors.md#flowing)
- [HIDDEN](./LineColors.md#hidden)
- [HOVER](./LineColors.md#hover)
- [SELECTED](./LineColors.md#selected)
## Enumeration Members
### DEFUALT
**DEFUALT** = ``"var(--g-workflow-line-color-default,#4d53e8)"``
___
### DRAWING
**DRAWING** = ``"var(--g-workflow-line-color-drawing, #5DD6E3)"``
___
### ERROR
**ERROR** = ``"var(--g-workflow-line-color-error,red)"``
___
### FLOWING
**FLOWING** = ``"var(--g-workflow-line-color-flowing,#4d53e8)"``
___
### HIDDEN
**HIDDEN** = ``"var(--g-workflow-line-color-hidden,transparent)"``
___
### HOVER
**HOVER** = ``"var(--g-workflow-line-color-hover,#37d0ff)"``
___
### SELECTED
**SELECTED** = ``"var(--g-workflow-line-color-selected,#37d0ff)"``
---
url: /auto-docs/free-layout-core/enums/LineType.md
---
# Enumeration: LineType
## Table of contents
### Enumeration Members
- [BEZIER](./LineType.md#bezier)
- [LINE\_CHART](./LineType.md#line_chart)
- [STRAIGHT](./LineType.md#straight)
## Enumeration Members
### BEZIER
**BEZIER** = ``0``
___
### LINE\_CHART
**LINE\_CHART** = ``1``
___
### STRAIGHT
**STRAIGHT** = ``2``
---
url: /auto-docs/free-layout-core/enums/WorkflowCommands.md
---
# Enumeration: WorkflowCommands
Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
SPDX-License-Identifier: MIT
## Table of contents
### Enumeration Members
- [COPY\_NODES](./WorkflowCommands.md#copy_nodes)
- [DELETE\_NODES](./WorkflowCommands.md#delete_nodes)
- [PASTE\_NODES](./WorkflowCommands.md#paste_nodes)
- [REDO](./WorkflowCommands.md#redo)
- [UNDO](./WorkflowCommands.md#undo)
- [ZOOM\_IN](./WorkflowCommands.md#zoom_in)
- [ZOOM\_OUT](./WorkflowCommands.md#zoom_out)
## Enumeration Members
### COPY\_NODES
**COPY\_NODES** = ``"COPY_NODES"``
___
### DELETE\_NODES
**DELETE\_NODES** = ``"DELETE_NODES"``
___
### PASTE\_NODES
**PASTE\_NODES** = ``"PASTE_NODES"``
___
### REDO
**REDO** = ``"REDO"``
___
### UNDO
**UNDO** = ``"UNDO"``
___
### ZOOM\_IN
**ZOOM\_IN** = ``"ZOOM_IN"``
___
### ZOOM\_OUT
**ZOOM\_OUT** = ``"ZOOM_OUT"``
---
url: /auto-docs/free-layout-core/enums/WorkflowContentChangeType.md
---
# Enumeration: WorkflowContentChangeType
## Table of contents
### Enumeration Members
- [ADD\_LINE](./WorkflowContentChangeType.md#add_line)
- [ADD\_NODE](./WorkflowContentChangeType.md#add_node)
- [DELETE\_LINE](./WorkflowContentChangeType.md#delete_line)
- [DELETE\_NODE](./WorkflowContentChangeType.md#delete_node)
- [LINE\_DATA\_CHANGE](./WorkflowContentChangeType.md#line_data_change)
- [META\_CHANGE](./WorkflowContentChangeType.md#meta_change)
- [MOVE\_NODE](./WorkflowContentChangeType.md#move_node)
- [NODE\_DATA\_CHANGE](./WorkflowContentChangeType.md#node_data_change)
## Enumeration Members
### ADD\_LINE
**ADD\_LINE** = ``"ADD_LINE"``
添加线条
___
### ADD\_NODE
**ADD\_NODE** = ``"ADD_NODE"``
添加节点
___
### DELETE\_LINE
**DELETE\_LINE** = ``"DELETE_LINE"``
删除线条
___
### DELETE\_NODE
**DELETE\_NODE** = ``"DELETE_NODE"``
删除节点
___
### LINE\_DATA\_CHANGE
**LINE\_DATA\_CHANGE** = ``"LINE_DATA_CHANGE"``
线条数据修改
___
### META\_CHANGE
**META\_CHANGE** = ``"META_CHANGE"``
节点Meta信息变更
___
### MOVE\_NODE
**MOVE\_NODE** = ``"MOVE_NODE"``
移动节点
___
### NODE\_DATA\_CHANGE
**NODE\_DATA\_CHANGE** = ``"NODE_DATA_CHANGE"``
节点数据更新 （表单引擎数据 或者 extInfo 数据）
---
url: /auto-docs/free-layout-core/functions/bindConfigEntity.md
---
# Function: bindConfigEntity
**bindConfigEntity**(`bind`, `entityRegistry`): `void`
让 entity 可以注入到类中
#### Parameters
| Name | Type |
| :------ | :------ |
| `bind` | `Bind` |
| `entityRegistry` | `EntityRegistry`\<`Entity`\<`EntityOpts`\>\> |
#### Returns
`void`
**`Example`**
```
class SomeClass {
@inject(PlaygroundConfigEntity) playgroundConfig: PlaygroundConfigEntity
}
```
---
url: /auto-docs/free-layout-core/functions/buildGroupJSON.md
---
# Function: buildGroupJSON
**buildGroupJSON**(`json`): [`WorkflowJSON`](../interfaces/WorkflowJSON.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `json` | [`WorkflowJSON`](../interfaces/WorkflowJSON.md) |
#### Returns
[`WorkflowJSON`](../interfaces/WorkflowJSON.md)
---
url: /auto-docs/free-layout-core/functions/compose.md
---
# Function: compose
**compose**\<`D`\>(`...fns`): `Func`\<`D`\>
#### Type parameters
| Name |
| :------ |
| `D` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `...fns` | `Func`\<`D`\>[] |
#### Returns
`Func`\<`D`\>
---
url: /auto-docs/free-layout-core/functions/composeAsync.md
---
# Function: composeAsync
**composeAsync**\<`D`\>(`...fns`): `FuncPromise`\<`D`\>
#### Type parameters
| Name |
| :------ |
| `D` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `...fns` | `FuncMaybePromise`\<`D`\>[] |
#### Returns
`FuncPromise`\<`D`\>
---
url: /auto-docs/free-layout-core/functions/delay.md
---
# Function: delay
**delay**(`ms`, `token?`): `Promise`\<`void`\>
#### Parameters
| Name | Type |
| :------ | :------ |
| `ms` | `number` |
| `token?` | `Readonly`\<`CancellationToken`\> |
#### Returns
`Promise`\<`void`\>
resolves after a specified number of milliseconds
**`Throws`**
cancelled if a given token is cancelled before a specified number of milliseconds
---
url: /auto-docs/free-layout-core/functions/domReactToBounds.md
---
# Function: domReactToBounds
**domReactToBounds**(`react`): `Rectangle`
#### Parameters
| Name | Type |
| :------ | :------ |
| `react` | `DOMRect` |
#### Returns
`Rectangle`
---
url: /auto-docs/free-layout-core/functions/fitView.md
---
# Function: fitView
**fitView**(`doc`, `playgroundConfig`, `easing?`): `Promise`\<`void`\>
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `doc` | [`WorkflowDocument`](../classes/WorkflowDocument.md) | `undefined` |
| `playgroundConfig` | `PlaygroundConfigEntity` | `undefined` |
| `easing` | `boolean` | `true` |
#### Returns
`Promise`\<`void`\>
---
url: /auto-docs/free-layout-core/functions/getAntiOverlapPosition.md
---
# Function: getAntiOverlapPosition
**getAntiOverlapPosition**(`doc`, `position`, `containerNode?`): `IPoint`
获取没有碰撞的位置
距离很小时，xy 各偏移 30
#### Parameters
| Name | Type |
| :------ | :------ |
| `doc` | [`WorkflowDocument`](../classes/WorkflowDocument.md) |
| `position` | `IPoint` |
| `containerNode?` | `FlowNodeEntity` |
#### Returns
`IPoint`
---
url: /auto-docs/free-layout-core/functions/getLineCenter.md
---
# Function: getLineCenter
**getLineCenter**(`from`, `to`, `bbox`, `linePadding`): [`LineCenterPoint`](../interfaces/LineCenterPoint.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `from` | `IPoint` |
| `to` | `IPoint` |
| `bbox` | `Rectangle` |
| `linePadding` | `number` |
#### Returns
[`LineCenterPoint`](../interfaces/LineCenterPoint.md)
---
url: /auto-docs/free-layout-core/functions/getPortEntityId.md
---
# Function: getPortEntityId
**getPortEntityId**(`node`, `portType`, `portID?`): `string`
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `node` | `FlowNodeEntity` | `undefined` |
| `portType` | [`WorkflowPortType`](../types/WorkflowPortType.md) | `undefined` |
| `portID` | `string` \| `number` | `''` |
#### Returns
`string`
---
url: /auto-docs/free-layout-core/functions/getPortEntityIdByNodeId.md
---
# Function: getPortEntityIdByNodeId
**getPortEntityIdByNodeId**(`nodeId`, `portType`, `portID?`): `string`
#### Parameters
| Name | Type | Default value |
| :------ | :------ | :------ |
| `nodeId` | `string` | `undefined` |
| `portType` | [`WorkflowPortType`](../types/WorkflowPortType.md) | `undefined` |
| `portID` | `string` \| `number` | `''` |
#### Returns
`string`
---
url: /auto-docs/free-layout-core/functions/nanoid.md
---
# Function: nanoid
**nanoid**(`n?`): `string`
#### Parameters
| Name | Type |
| :------ | :------ |
| `n?` | `number` |
#### Returns
`string`
---
url: /auto-docs/free-layout-core/functions/useConfigEntity.md
---
# Function: useConfigEntity
**useConfigEntity**\<`T`\>(`entityRegistry`, `listenChange?`): `T`
获取 config entity
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `ConfigEntity`\<`ConfigEntityProps`, `EntityOpts`, `T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `entityRegistry` | `EntityRegistry`\<`T`\> |
| `listenChange?` | `boolean` |
#### Returns
`T`
---
url: /auto-docs/free-layout-core/functions/useCurrentDomNode.md
---
# Function: useCurrentDomNode
**useCurrentDomNode**(): `HTMLDivElement`
获取当前渲染的 dom 节点
#### Returns
`HTMLDivElement`
---
url: /auto-docs/free-layout-core/functions/useCurrentEntity.md
---
# Function: useCurrentEntity
**useCurrentEntity**(): [`WorkflowNodeEntity`](../variables/WorkflowNodeEntity-1.md)
获取当前节点
#### Returns
[`WorkflowNodeEntity`](../variables/WorkflowNodeEntity-1.md)
---
url: /auto-docs/free-layout-core/functions/useEntities.md
---
# Function: useEntities
**useEntities**\<`T`\>(`entityRegistry`): `T`[]
获取 entities 并监听变化
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `Entity`\<`EntityOpts`, `T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `entityRegistry` | `EntityRegistry`\<`Entity`\<`EntityOpts`\>\> |
#### Returns
`T`[]
**`Deprecated`**
---
url: /auto-docs/free-layout-core/functions/useEntityDataFromContext.md
---
# Function: useEntityDataFromContext
**useEntityDataFromContext**\<`T`\>(`dataRegistry`, `listenChange?`): `T`
从上下 PlaygroundEntityContext 获取 entity data 并监听变化 (默认不监听)
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `EntityData`\<`any`, {}, `T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `dataRegistry` | `EntityDataRegistry`\<`any`\> |
| `listenChange?` | `boolean` |
#### Returns
`T`
---
url: /auto-docs/free-layout-core/functions/useEntityFromContext.md
---
# Function: useEntityFromContext
**useEntityFromContext**\<`T`\>(`listenChange?`): `T`
从上下 PlaygroundEntityContext 获取 entity 并监听变化(默认不监听)
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `Entity`\<`EntityOpts`, `T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `listenChange?` | `boolean` |
#### Returns
`T`
---
url: /auto-docs/free-layout-core/functions/useListenEvents.md
---
# Function: useListenEvents
**useListenEvents**(`...events`): `void`
监听 event 事件变化
#### Parameters
| Name | Type |
| :------ | :------ |
| `...events` | `Event`\<`any`\>[] |
#### Returns
`void`
---
url: /auto-docs/free-layout-core/functions/useNodeRender.md
---
# Function: useNodeRender
**useNodeRender**(`nodeFromProps?`): [`NodeRenderReturnType`](../interfaces/NodeRenderReturnType.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `nodeFromProps?` | `FlowNodeEntity` |
#### Returns
[`NodeRenderReturnType`](../interfaces/NodeRenderReturnType.md)
---
url: /auto-docs/free-layout-core/functions/usePlayground.md
---
# Function: usePlayground
**usePlayground**(): `Playground`
获取 playground
#### Returns
`Playground`
---
url: /auto-docs/free-layout-core/functions/usePlaygroundContainer.md
---
# Function: usePlaygroundContainer
**usePlaygroundContainer**(): `interfaces.Container`
获取 playground inversify container
#### Returns
`interfaces.Container`
---
url: /auto-docs/free-layout-core/functions/usePlaygroundContext.md
---
# Function: usePlaygroundContext
**usePlaygroundContext**\<`T`\>(): `T`
获取 playground context 数据
#### Type parameters
| Name |
| :------ |
| `T` |
#### Returns
`T`
---
url: /auto-docs/free-layout-core/functions/usePlaygroundReadonlyState.md
---
# Function: usePlaygroundReadonlyState
**usePlaygroundReadonlyState**(`listenChange?`): `boolean`
获取 readonly 状态
#### Parameters
| Name | Type |
| :------ | :------ |
| `listenChange?` | `boolean` |
#### Returns
`boolean`
---
url: /auto-docs/free-layout-core/functions/useRefresh.md
---
# Function: useRefresh
**useRefresh**(`defaultValue?`): (`v?`: `any`) => `void`
Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
SPDX-License-Identifier: MIT
#### Parameters
| Name | Type |
| :------ | :------ |
| `defaultValue?` | `any` |
#### Returns
`fn`
(`v?`): `void`
##### Parameters
| Name | Type |
| :------ | :------ |
| `v?` | `any` |
##### Returns
`void`
---
url: /auto-docs/free-layout-core/functions/useService.md
---
# Function: useService
**useService**\<`T`\>(`identifier`): `T`
获取画布的 IOC 模块
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `identifier` | `ServiceIdentifier`\<`T`\> |
#### Returns
`T`
---
url: /auto-docs/free-layout-core/functions/useWorkflowDocument.md
---
# Function: useWorkflowDocument
**useWorkflowDocument**(): [`WorkflowDocument`](../classes/WorkflowDocument.md)
#### Returns
[`WorkflowDocument`](../classes/WorkflowDocument.md)
---
url: /auto-docs/free-layout-core/interfaces/HoverPosition.md
---
# Interface: HoverPosition
## Table of contents
### Properties
- [position](./HoverPosition.md#position)
- [target](./HoverPosition.md#target)
## Properties
### position
**position**: `PositionSchema`
___
### target
`Optional` **target**: `HTMLElement`
---
url: /auto-docs/free-layout-core/interfaces/LineCenterPoint.md
---
# Interface: LineCenterPoint
## Table of contents
### Properties
- [labelX](./LineCenterPoint.md#labelx)
- [labelY](./LineCenterPoint.md#labely)
- [x](./LineCenterPoint.md#x)
- [y](./LineCenterPoint.md#y)
## Properties
### labelX
**labelX**: `number`
___
### labelY
**labelY**: `number`
___
### x
**x**: `number`
___
### y
**y**: `number`
---
url: /auto-docs/free-layout-core/interfaces/LineColor.md
---
# Interface: LineColor
## Table of contents
### Properties
- [default](./LineColor.md#default)
- [drawing](./LineColor.md#drawing)
- [error](./LineColor.md#error)
- [flowing](./LineColor.md#flowing)
- [hidden](./LineColor.md#hidden)
- [hovered](./LineColor.md#hovered)
- [selected](./LineColor.md#selected)
## Properties
### default
**default**: `string`
___
### drawing
**drawing**: `string`
___
### error
**error**: `string`
___
### flowing
**flowing**: `string`
___
### hidden
**hidden**: `string`
___
### hovered
**hovered**: `string`
___
### selected
**selected**: `string`
---
url: /auto-docs/free-layout-core/interfaces/LineEventProps.md
---
# Interface: LineEventProps
## Table of contents
### Properties
- [event](./LineEventProps.md#event)
- [onDragNodeId](./LineEventProps.md#ondragnodeid)
- [type](./LineEventProps.md#type)
## Properties
### event
`Optional` **event**: `MouseEvent`
___
### onDragNodeId
`Optional` **onDragNodeId**: `string`
___
### type
**type**: ``"onDrag"`` \| ``"onDragEnd"``
---
url: /auto-docs/free-layout-core/interfaces/LinePoint.md
---
# Interface: LinePoint
## Table of contents
### Properties
- [location](./LinePoint.md#location)
- [x](./LinePoint.md#x)
- [y](./LinePoint.md#y)
## Properties
### location
**location**: [`LinePointLocation`](../types/LinePointLocation.md)
___
### x
**x**: `number`
___
### y
**y**: `number`
---
url: /auto-docs/free-layout-core/interfaces/LinePosition.md
---
# Interface: LinePosition
## Table of contents
### Properties
- [from](./LinePosition.md#from)
- [to](./LinePosition.md#to)
## Properties
### from
**from**: [`LinePoint`](./LinePoint.md)
___
### to
**to**: [`LinePoint`](./LinePoint.md)
---
url: /auto-docs/free-layout-core/interfaces/NodePostionUpdateEvent.md
---
# Interface: NodePostionUpdateEvent
## Table of contents
### Properties
- [newPosition](./NodePostionUpdateEvent.md#newposition)
- [node](./NodePostionUpdateEvent.md#node)
- [oldPosition](./NodePostionUpdateEvent.md#oldposition)
## Properties
### newPosition
**newPosition**: `IPoint`
___
### node
**node**: `FlowNodeEntity`
___
### oldPosition
**oldPosition**: `IPoint`
---
url: /auto-docs/free-layout-core/interfaces/NodeRenderReturnType.md
---
# Interface: NodeRenderReturnType
## Table of contents
### Properties
- [activated](./NodeRenderReturnType.md#activated)
- [data](./NodeRenderReturnType.md#data)
- [deleteNode](./NodeRenderReturnType.md#deletenode)
- [expanded](./NodeRenderReturnType.md#expanded)
- [form](./NodeRenderReturnType.md#form)
- [id](./NodeRenderReturnType.md#id)
- [linkingNodeId](./NodeRenderReturnType.md#linkingnodeid)
- [node](./NodeRenderReturnType.md#node)
- [nodeRef](./NodeRenderReturnType.md#noderef)
- [onBlur](./NodeRenderReturnType.md#onblur)
- [onFocus](./NodeRenderReturnType.md#onfocus)
- [ports](./NodeRenderReturnType.md#ports)
- [readonly](./NodeRenderReturnType.md#readonly)
- [selectNode](./NodeRenderReturnType.md#selectnode)
- [selected](./NodeRenderReturnType.md#selected)
- [startDrag](./NodeRenderReturnType.md#startdrag)
- [type](./NodeRenderReturnType.md#type)
- [updateData](./NodeRenderReturnType.md#updatedata)
### Methods
- [getExtInfo](./NodeRenderReturnType.md#getextinfo)
- [toggleExpand](./NodeRenderReturnType.md#toggleexpand)
- [updateExtInfo](./NodeRenderReturnType.md#updateextinfo)
## Properties
### activated
**activated**: `boolean`
节点激活
___
### data
**data**: `any`
节点 data 数据
___
### deleteNode
**deleteNode**: () => `void`
#### Type declaration
(): `void`
删除节点
##### Returns
`void`
___
### expanded
**expanded**: `boolean`
节点展开
___
### form
**form**: `undefined` \| `NodeFormProps`\<`any`\>
渲染表单，只有节点引擎开启才能使用
___
### id
**id**: `string`
___
### linkingNodeId
**linkingNodeId**: `string`
拖拽线条的目标 node id
___
### node
**node**: `FlowNodeEntity`
当前节点
___
### nodeRef
**nodeRef**: `MutableRefObject`\<``null`` \| `HTMLDivElement`\>
节点 ref
___
### onBlur
**onBlur**: () => `void`
#### Type declaration
(): `void`
节点 blur 事件
##### Returns
`void`
___
### onFocus
**onFocus**: () => `void`
#### Type declaration
(): `void`
节点 focus 事件
##### Returns
`void`
___
### ports
**ports**: [`WorkflowPortEntity`](../classes/WorkflowPortEntity.md)[]
当前节点的点位信息
___
### readonly
**readonly**: `boolean`
全局 readonly 状态
___
### selectNode
**selectNode**: (`e`: `MouseEvent`\<`Element`, `MouseEvent`\>) => `void`
#### Type declaration
(`e`): `void`
选中节点
##### Parameters
| Name | Type |
| :------ | :------ |
| `e` | `MouseEvent`\<`Element`, `MouseEvent`\> |
##### Returns
`void`
___
### selected
**selected**: `boolean`
节点选中
___
### startDrag
**startDrag**: (`e`: `MouseEvent`\<`Element`, `MouseEvent`\>) => `void`
#### Type declaration
(`e`): `void`
触发拖拽
##### Parameters
| Name | Type |
| :------ | :------ |
| `e` | `MouseEvent`\<`Element`, `MouseEvent`\> |
##### Returns
`void`
___
### type
**type**: `string` \| `number`
___
### updateData
**updateData**: (`newData`: `any`) => `void`
#### Type declaration
(`newData`): `void`
更新节点 data 数据
##### Parameters
| Name | Type |
| :------ | :------ |
| `newData` | `any` |
##### Returns
`void`
## Methods
### getExtInfo
**getExtInfo**\<`T`\>(): `T`
获取节点的扩展数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | `any` |
#### Returns
`T`
___
### toggleExpand
**toggleExpand**(): `void`
展开/收起节点
#### Returns
`void`
___
### updateExtInfo
**updateExtInfo**\<`T`\>(`extInfo`, `fullUpdate?`): `void`
更新节点的扩展数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | `any` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `extInfo` | `T` |
| `fullUpdate?` | `boolean` |
#### Returns
`void`
---
url: /auto-docs/free-layout-core/interfaces/NodesDragEndEvent.md
---
# Interface: NodesDragEndEvent
## Hierarchy
- `INodesDragEvent`
↳ **`NodesDragEndEvent`**
## Table of contents
### Properties
- [dragEvent](./NodesDragEndEvent.md#dragevent)
- [dragger](./NodesDragEndEvent.md#dragger)
- [nodes](./NodesDragEndEvent.md#nodes)
- [startPositions](./NodesDragEndEvent.md#startpositions)
- [triggerEvent](./NodesDragEndEvent.md#triggerevent)
- [type](./NodesDragEndEvent.md#type)
## Properties
### dragEvent
**dragEvent**: `PlaygroundDragEvent`
#### Inherited from
INodesDragEvent.dragEvent
___
### dragger
**dragger**: `PlaygroundDrag`\<`undefined`\>
#### Inherited from
INodesDragEvent.dragger
___
### nodes
**nodes**: `FlowNodeEntity`[]
#### Inherited from
INodesDragEvent.nodes
___
### startPositions
**startPositions**: `PositionSchema`[]
#### Inherited from
INodesDragEvent.startPositions
___
### triggerEvent
**triggerEvent**: `MouseEvent` \| `MouseEvent`\<`Element`, `MouseEvent`\>
#### Inherited from
INodesDragEvent.triggerEvent
___
### type
**type**: ``"onDragEnd"``
#### Overrides
INodesDragEvent.type
---
url: /auto-docs/free-layout-core/interfaces/NodesDragStartEvent.md
---
# Interface: NodesDragStartEvent
## Hierarchy
- `INodesDragEvent`
↳ **`NodesDragStartEvent`**
## Table of contents
### Properties
- [dragEvent](./NodesDragStartEvent.md#dragevent)
- [dragger](./NodesDragStartEvent.md#dragger)
- [nodes](./NodesDragStartEvent.md#nodes)
- [startPositions](./NodesDragStartEvent.md#startpositions)
- [triggerEvent](./NodesDragStartEvent.md#triggerevent)
- [type](./NodesDragStartEvent.md#type)
## Properties
### dragEvent
**dragEvent**: `PlaygroundDragEvent`
#### Inherited from
INodesDragEvent.dragEvent
___
### dragger
**dragger**: `PlaygroundDrag`\<`undefined`\>
#### Inherited from
INodesDragEvent.dragger
___
### nodes
**nodes**: `FlowNodeEntity`[]
#### Inherited from
INodesDragEvent.nodes
___
### startPositions
**startPositions**: `PositionSchema`[]
#### Inherited from
INodesDragEvent.startPositions
___
### triggerEvent
**triggerEvent**: `MouseEvent` \| `MouseEvent`\<`Element`, `MouseEvent`\>
#### Inherited from
INodesDragEvent.triggerEvent
___
### type
**type**: ``"onDragStart"``
#### Overrides
INodesDragEvent.type
---
url: /auto-docs/free-layout-core/interfaces/NodesDraggingEvent.md
---
# Interface: NodesDraggingEvent
## Hierarchy
- `INodesDragEvent`
↳ **`NodesDraggingEvent`**
## Table of contents
### Properties
- [dragEvent](./NodesDraggingEvent.md#dragevent)
- [dragger](./NodesDraggingEvent.md#dragger)
- [nodes](./NodesDraggingEvent.md#nodes)
- [positions](./NodesDraggingEvent.md#positions)
- [startPositions](./NodesDraggingEvent.md#startpositions)
- [triggerEvent](./NodesDraggingEvent.md#triggerevent)
- [type](./NodesDraggingEvent.md#type)
## Properties
### dragEvent
**dragEvent**: `PlaygroundDragEvent`
#### Inherited from
INodesDragEvent.dragEvent
___
### dragger
**dragger**: `PlaygroundDrag`\<`undefined`\>
#### Inherited from
INodesDragEvent.dragger
___
### nodes
**nodes**: `FlowNodeEntity`[]
#### Inherited from
INodesDragEvent.nodes
___
### positions
**positions**: `PositionSchema`[]
___
### startPositions
**startPositions**: `PositionSchema`[]
#### Inherited from
INodesDragEvent.startPositions
___
### triggerEvent
**triggerEvent**: `MouseEvent` \| `MouseEvent`\<`Element`, `MouseEvent`\>
#### Inherited from
INodesDragEvent.triggerEvent
___
### type
**type**: ``"onDragging"``
#### Overrides
INodesDragEvent.type
---
url: /auto-docs/free-layout-core/interfaces/URLParams.md
---
# Interface: URLParams
## Indexable
▪ [key: `string`]: `string`
---
url: /auto-docs/free-layout-core/interfaces/WorkflowContentChangeEvent.md
---
# Interface: WorkflowContentChangeEvent
## Table of contents
### Properties
- [entity](./WorkflowContentChangeEvent.md#entity)
- [oldValue](./WorkflowContentChangeEvent.md#oldvalue)
- [toJSON](./WorkflowContentChangeEvent.md#tojson)
- [type](./WorkflowContentChangeEvent.md#type)
## Properties
### entity
**entity**: `FlowNodeEntity` \| [`WorkflowLineEntity`](../classes/WorkflowLineEntity.md)
___
### oldValue
`Optional` **oldValue**: `any`
oldValue
___
### toJSON
**toJSON**: () => `any`
#### Type declaration
(): `any`
当前触发的元素的json数据，toJSON 需要主动触发
##### Returns
`any`
___
### type
**type**: [`WorkflowContentChangeType`](../enums/WorkflowContentChangeType.md)
---
url: /auto-docs/free-layout-core/interfaces/WorkflowDocumentOptions.md
---
# Interface: WorkflowDocumentOptions
线条配置
## Hierarchy
- `FlowDocumentOptions`
↳ **`WorkflowDocumentOptions`**
## Table of contents
### Properties
- [allNodesDefaultExpanded](./WorkflowDocumentOptions.md#allnodesdefaultexpanded)
- [canAddLine](./WorkflowDocumentOptions.md#canaddline)
- [canDeleteLine](./WorkflowDocumentOptions.md#candeleteline)
- [canDeleteNode](./WorkflowDocumentOptions.md#candeletenode)
- [canDropToNode](./WorkflowDocumentOptions.md#candroptonode)
- [canResetLine](./WorkflowDocumentOptions.md#canresetline)
- [constants](./WorkflowDocumentOptions.md#constants)
- [cursors](./WorkflowDocumentOptions.md#cursors)
- [defaultLayout](./WorkflowDocumentOptions.md#defaultlayout)
- [enableReadonlyNodeDragging](./WorkflowDocumentOptions.md#enablereadonlynodedragging)
- [formatNodeLabels](./WorkflowDocumentOptions.md#formatnodelabels)
- [formatNodeLines](./WorkflowDocumentOptions.md#formatnodelines)
- [getNodeDefaultRegistry](./WorkflowDocumentOptions.md#getnodedefaultregistry)
- [isDisabledLine](./WorkflowDocumentOptions.md#isdisabledline)
- [isDisabledPort](./WorkflowDocumentOptions.md#isdisabledport)
- [isErrorLine](./WorkflowDocumentOptions.md#iserrorline)
- [isErrorPort](./WorkflowDocumentOptions.md#iserrorport)
- [isFlowingLine](./WorkflowDocumentOptions.md#isflowingline)
- [isHideArrowLine](./WorkflowDocumentOptions.md#ishidearrowline)
- [isReverseLine](./WorkflowDocumentOptions.md#isreverseline)
- [lineColor](./WorkflowDocumentOptions.md#linecolor)
- [onDragLineEnd](./WorkflowDocumentOptions.md#ondraglineend)
- [preNodeCreate](./WorkflowDocumentOptions.md#prenodecreate)
- [setLineClassName](./WorkflowDocumentOptions.md#setlineclassname)
- [setLineRenderType](./WorkflowDocumentOptions.md#setlinerendertype)
- [twoWayConnection](./WorkflowDocumentOptions.md#twowayconnection)
### Methods
- [fromNodeJSON](./WorkflowDocumentOptions.md#fromnodejson)
- [toNodeJSON](./WorkflowDocumentOptions.md#tonodejson)
## Properties
### allNodesDefaultExpanded
`Optional` **allNodesDefaultExpanded**: `boolean`
所有节点的默认展开状态
#### Inherited from
FlowDocumentOptions.allNodesDefaultExpanded
___
### canAddLine
`Optional` **canAddLine**: (`fromPort`: [`WorkflowPortEntity`](../classes/WorkflowPortEntity.md), `toPort`: [`WorkflowPortEntity`](../classes/WorkflowPortEntity.md), `lines`: [`WorkflowLinesManager`](../classes/WorkflowLinesManager.md), `silent?`: `boolean`) => `boolean`
#### Type declaration
(`fromPort`, `toPort`, `lines`, `silent?`): `boolean`
能否添加线条
##### Parameters
| Name | Type |
| :------ | :------ |
| `fromPort` | [`WorkflowPortEntity`](../classes/WorkflowPortEntity.md) |
| `toPort` | [`WorkflowPortEntity`](../classes/WorkflowPortEntity.md) |
| `lines` | [`WorkflowLinesManager`](../classes/WorkflowLinesManager.md) |
| `silent?` | `boolean` |
##### Returns
`boolean`
___
### canDeleteLine
`Optional` **canDeleteLine**: (`line`: [`WorkflowLineEntity`](../classes/WorkflowLineEntity.md), `newLineInfo?`: `Required`\<`Omit`\<[`WorkflowLinePortInfo`](./WorkflowLinePortInfo.md), ``"data"``\>\>, `silent?`: `boolean`) => `boolean`
#### Type declaration
(`line`, `newLineInfo?`, `silent?`): `boolean`
能否删除线条
##### Parameters
| Name | Type |
| :------ | :------ |
| `line` | [`WorkflowLineEntity`](../classes/WorkflowLineEntity.md) |
| `newLineInfo?` | `Required`\<`Omit`\<[`WorkflowLinePortInfo`](./WorkflowLinePortInfo.md), ``"data"``\>\> |
| `silent?` | `boolean` |
##### Returns
`boolean`
___
### canDeleteNode
`Optional` **canDeleteNode**: (`node`: `FlowNodeEntity`, `silent?`: `boolean`) => `boolean`
#### Type declaration
(`node`, `silent?`): `boolean`
能否删除节点
##### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `FlowNodeEntity` |
| `silent?` | `boolean` |
##### Returns
`boolean`
___
### canDropToNode
`Optional` **canDropToNode**: (`params`: \{ `dragNode?`: `FlowNodeEntity` ; `dragNodeType?`: `FlowNodeType` ; `dropNode?`: `FlowNodeEntity` ; `dropNodeType?`: `FlowNodeType` }) => `boolean`
#### Type declaration
(`params`): `boolean`
是否允许拖入子画布 (loop or group)
Whether to allow dragging into the sub-canvas (loop or group)
##### Parameters
| Name | Type |
| :------ | :------ |
| `params` | `Object` |
| `params.dragNode?` | `FlowNodeEntity` |
| `params.dragNodeType?` | `FlowNodeType` |
| `params.dropNode?` | `FlowNodeEntity` |
| `params.dropNodeType?` | `FlowNodeType` |
##### Returns
`boolean`
___
### canResetLine
`Optional` **canResetLine**: (`oldLine`: [`WorkflowLineEntity`](../classes/WorkflowLineEntity.md), `newLineInfo`: `Required`\<[`WorkflowLinePortInfo`](./WorkflowLinePortInfo.md)\>, `lines`: [`WorkflowLinesManager`](../classes/WorkflowLinesManager.md)) => `boolean`
#### Type declaration
(`oldLine`, `newLineInfo`, `lines`): `boolean`
##### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `oldLine` | [`WorkflowLineEntity`](../classes/WorkflowLineEntity.md) | - |
| `newLineInfo` | `Required`\<[`WorkflowLinePortInfo`](./WorkflowLinePortInfo.md)\> | - |
| `lines` | [`WorkflowLinesManager`](../classes/WorkflowLinesManager.md) | 线条管理器 |
##### Returns
`boolean`
___
### constants
`Optional` **constants**: `Record`\<`string`, `any`\>
#### Inherited from
FlowDocumentOptions.constants
___
### cursors
`Optional` **cursors**: `Object`
#### Type declaration
| Name | Type |
| :------ | :------ |
| `grab?` | `string` |
| `grabbing?` | `string` |
___
### defaultLayout
`Optional` **defaultLayout**: `string`
布局，默认 垂直布局
#### Inherited from
FlowDocumentOptions.defaultLayout
___
### enableReadonlyNodeDragging
`Optional` **enableReadonlyNodeDragging**: `boolean`
允许拖拽只读节点
___
### formatNodeLabels
`Optional` **formatNodeLabels**: (`node`: `FlowNodeEntity`, `lines`: `FlowTransitionLabel`[]) => `FlowTransitionLabel`[]
#### Type declaration
(`node`, `lines`): `FlowTransitionLabel`[]
##### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `FlowNodeEntity` |
| `lines` | `FlowTransitionLabel`[] |
##### Returns
`FlowTransitionLabel`[]
#### Inherited from
FlowDocumentOptions.formatNodeLabels
___
### formatNodeLines
`Optional` **formatNodeLines**: (`node`: `FlowNodeEntity`, `lines`: `FlowTransitionLine`[]) => `FlowTransitionLine`[]
#### Type declaration
(`node`, `lines`): `FlowTransitionLine`[]
##### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `FlowNodeEntity` |
| `lines` | `FlowTransitionLine`[] |
##### Returns
`FlowTransitionLine`[]
#### Inherited from
FlowDocumentOptions.formatNodeLines
___
### getNodeDefaultRegistry
`Optional` **getNodeDefaultRegistry**: (`type`: `FlowNodeType`) => `FlowNodeRegistry`\<`FlowNodeMeta`\>
#### Type declaration
(`type`): `FlowNodeRegistry`\<`FlowNodeMeta`\>
获取默认的节点配置
##### Parameters
| Name | Type |
| :------ | :------ |
| `type` | `FlowNodeType` |
##### Returns
`FlowNodeRegistry`\<`FlowNodeMeta`\>
#### Inherited from
FlowDocumentOptions.getNodeDefaultRegistry
___
### isDisabledLine
`Optional` **isDisabledLine**: (`line`: [`WorkflowLineEntity`](../classes/WorkflowLineEntity.md)) => `boolean`
#### Type declaration
(`line`): `boolean`
是否禁用线条
##### Parameters
| Name | Type |
| :------ | :------ |
| `line` | [`WorkflowLineEntity`](../classes/WorkflowLineEntity.md) |
##### Returns
`boolean`
___
### isDisabledPort
`Optional` **isDisabledPort**: (`port`: [`WorkflowPortEntity`](../classes/WorkflowPortEntity.md)) => `boolean`
#### Type declaration
(`port`): `boolean`
是否禁用端口
##### Parameters
| Name | Type |
| :------ | :------ |
| `port` | [`WorkflowPortEntity`](../classes/WorkflowPortEntity.md) |
##### Returns
`boolean`
___
### isErrorLine
`Optional` **isErrorLine**: (`fromPort`: `undefined` \| [`WorkflowPortEntity`](../classes/WorkflowPortEntity.md), `toPort`: `undefined` \| [`WorkflowPortEntity`](../classes/WorkflowPortEntity.md), `lines`: [`WorkflowLinesManager`](../classes/WorkflowLinesManager.md)) => `boolean`
#### Type declaration
(`fromPort`, `toPort`, `lines`): `boolean`
是否显示错误线条
##### Parameters
| Name | Type |
| :------ | :------ |
| `fromPort` | `undefined` \| [`WorkflowPortEntity`](../classes/WorkflowPortEntity.md) |
| `toPort` | `undefined` \| [`WorkflowPortEntity`](../classes/WorkflowPortEntity.md) |
| `lines` | [`WorkflowLinesManager`](../classes/WorkflowLinesManager.md) |
##### Returns
`boolean`
___
### isErrorPort
`Optional` **isErrorPort**: (`port`: [`WorkflowPortEntity`](../classes/WorkflowPortEntity.md)) => `boolean`
#### Type declaration
(`port`): `boolean`
是否错误端口
##### Parameters
| Name | Type |
| :------ | :------ |
| `port` | [`WorkflowPortEntity`](../classes/WorkflowPortEntity.md) |
##### Returns
`boolean`
___
### isFlowingLine
`Optional` **isFlowingLine**: (`line`: [`WorkflowLineEntity`](../classes/WorkflowLineEntity.md)) => `boolean`
#### Type declaration
(`line`): `boolean`
是否流动线条
##### Parameters
| Name | Type |
| :------ | :------ |
| `line` | [`WorkflowLineEntity`](../classes/WorkflowLineEntity.md) |
##### Returns
`boolean`
___
### isHideArrowLine
`Optional` **isHideArrowLine**: (`line`: [`WorkflowLineEntity`](../classes/WorkflowLineEntity.md)) => `boolean`
#### Type declaration
(`line`): `boolean`
是否隐藏线条箭头
##### Parameters
| Name | Type |
| :------ | :------ |
| `line` | [`WorkflowLineEntity`](../classes/WorkflowLineEntity.md) |
##### Returns
`boolean`
___
### isReverseLine
`Optional` **isReverseLine**: (`line`: [`WorkflowLineEntity`](../classes/WorkflowLineEntity.md)) => `boolean`
#### Type declaration
(`line`): `boolean`
是否反转线条箭头
##### Parameters
| Name | Type |
| :------ | :------ |
| `line` | [`WorkflowLineEntity`](../classes/WorkflowLineEntity.md) |
##### Returns
`boolean`
___
### lineColor
`Optional` **lineColor**: `Partial`\<[`LineColor`](./LineColor.md)\>
线条颜色
___
### onDragLineEnd
`Optional` **onDragLineEnd**: (`params`: [`onDragLineEndParams`](../types/onDragLineEndParams.md)) => `Promise`\<`void`\>
#### Type declaration
(`params`): `Promise`\<`void`\>
拖拽线条结束
##### Parameters
| Name | Type |
| :------ | :------ |
| `params` | [`onDragLineEndParams`](../types/onDragLineEndParams.md) |
##### Returns
`Promise`\<`void`\>
___
### preNodeCreate
`Optional` **preNodeCreate**: (`node`: `FlowNodeEntity`) => `void`
#### Type declaration
(`node`): `void`
##### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `FlowNodeEntity` |
##### Returns
`void`
#### Inherited from
FlowDocumentOptions.preNodeCreate
___
### setLineClassName
`Optional` **setLineClassName**: (`line`: [`WorkflowLineEntity`](../classes/WorkflowLineEntity.md)) => `undefined` \| `string`
#### Type declaration
(`line`): `undefined` \| `string`
设置线条样式
##### Parameters
| Name | Type |
| :------ | :------ |
| `line` | [`WorkflowLineEntity`](../classes/WorkflowLineEntity.md) |
##### Returns
`undefined` \| `string`
___
### setLineRenderType
`Optional` **setLineRenderType**: (`line`: [`WorkflowLineEntity`](../classes/WorkflowLineEntity.md)) => `undefined` \| [`LineRenderType`](../types/LineRenderType.md)
#### Type declaration
(`line`): `undefined` \| [`LineRenderType`](../types/LineRenderType.md)
获取线条渲染器
##### Parameters
| Name | Type |
| :------ | :------ |
| `line` | [`WorkflowLineEntity`](../classes/WorkflowLineEntity.md) |
##### Returns
`undefined` \| [`LineRenderType`](../types/LineRenderType.md)
___
### twoWayConnection
`Optional` **twoWayConnection**: `boolean`
双向连接
## Methods
### fromNodeJSON
`Optional` **fromNodeJSON**(`node`, `json`, `isFirstCreate`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `FlowNodeEntity` |
| `json` | `FlowNodeJSON` |
| `isFirstCreate` | `boolean` |
#### Returns
`void`
#### Inherited from
FlowDocumentOptions.fromNodeJSON
___
### toNodeJSON
`Optional` **toNodeJSON**(`node`): `FlowNodeJSON`
#### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `FlowNodeEntity` |
#### Returns
`FlowNodeJSON`
#### Inherited from
FlowDocumentOptions.toNodeJSON
---
url: /auto-docs/free-layout-core/interfaces/WorkflowEdgeJSON.md
---
# Interface: WorkflowEdgeJSON
边数据
## Table of contents
### Properties
- [data](./WorkflowEdgeJSON.md#data)
- [sourceNodeID](./WorkflowEdgeJSON.md#sourcenodeid)
- [sourcePortID](./WorkflowEdgeJSON.md#sourceportid)
- [targetNodeID](./WorkflowEdgeJSON.md#targetnodeid)
- [targetPortID](./WorkflowEdgeJSON.md#targetportid)
## Properties
### data
`Optional` **data**: `any`
___
### sourceNodeID
**sourceNodeID**: `string`
___
### sourcePortID
`Optional` **sourcePortID**: `string` \| `number`
___
### targetNodeID
**targetNodeID**: `string`
___
### targetPortID
`Optional` **targetPortID**: `string` \| `number`
---
url: /auto-docs/free-layout-core/interfaces/WorkflowJSON.md
---
# Interface: WorkflowJSON
## Table of contents
### Properties
- [edges](./WorkflowJSON.md#edges)
- [nodes](./WorkflowJSON.md#nodes)
## Properties
### edges
**edges**: [`WorkflowEdgeJSON`](./WorkflowEdgeJSON.md)[]
___
### nodes
**nodes**: [`WorkflowNodeJSON`](./WorkflowNodeJSON.md)[]
---
url: /auto-docs/free-layout-core/interfaces/WorkflowLineEntityOpts.md
---
# Interface: WorkflowLineEntityOpts
## Hierarchy
- `EntityOpts`
- [`WorkflowLinePortInfo`](./WorkflowLinePortInfo.md)
↳ **`WorkflowLineEntityOpts`**
## Table of contents
### Properties
- [data](./WorkflowLineEntityOpts.md#data)
- [datas](./WorkflowLineEntityOpts.md#datas)
- [document](./WorkflowLineEntityOpts.md#document)
- [drawingFrom](./WorkflowLineEntityOpts.md#drawingfrom)
- [drawingTo](./WorkflowLineEntityOpts.md#drawingto)
- [entityManager](./WorkflowLineEntityOpts.md#entitymanager)
- [from](./WorkflowLineEntityOpts.md#from)
- [fromPort](./WorkflowLineEntityOpts.md#fromport)
- [id](./WorkflowLineEntityOpts.md#id)
- [linesManager](./WorkflowLineEntityOpts.md#linesmanager)
- [savedInManager](./WorkflowLineEntityOpts.md#savedinmanager)
- [to](./WorkflowLineEntityOpts.md#to)
- [toPort](./WorkflowLineEntityOpts.md#toport)
## Properties
### data
`Optional` **data**: `any`
#### Inherited from
[WorkflowLinePortInfo](./WorkflowLinePortInfo.md).[data](./WorkflowLinePortInfo.md#data)
___
### datas
`Optional` **datas**: \{ `data?`: `any` ; `registry`: `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\> }[]
#### Inherited from
EntityOpts.datas
___
### document
**document**: [`WorkflowDocument`](../classes/WorkflowDocument.md)
___
### drawingFrom
`Optional` **drawingFrom**: [`LinePoint`](./LinePoint.md)
___
### drawingTo
`Optional` **drawingTo**: [`LinePoint`](./LinePoint.md)
___
### entityManager
**entityManager**: `EntityManager`
#### Inherited from
EntityOpts.entityManager
___
### from
`Optional` **from**: `string`
#### Inherited from
[WorkflowLinePortInfo](./WorkflowLinePortInfo.md).[from](./WorkflowLinePortInfo.md#from)
___
### fromPort
`Optional` **fromPort**: `string` \| `number`
#### Inherited from
[WorkflowLinePortInfo](./WorkflowLinePortInfo.md).[fromPort](./WorkflowLinePortInfo.md#fromport)
___
### id
`Optional` **id**: `string`
#### Inherited from
EntityOpts.id
___
### linesManager
**linesManager**: [`WorkflowLinesManager`](../classes/WorkflowLinesManager.md)
___
### savedInManager
`Optional` **savedInManager**: `boolean`
#### Inherited from
EntityOpts.savedInManager
___
### to
`Optional` **to**: `string`
#### Inherited from
[WorkflowLinePortInfo](./WorkflowLinePortInfo.md).[to](./WorkflowLinePortInfo.md#to)
___
### toPort
`Optional` **toPort**: `string` \| `number`
#### Inherited from
[WorkflowLinePortInfo](./WorkflowLinePortInfo.md).[toPort](./WorkflowLinePortInfo.md#toport)
---
url: /auto-docs/free-layout-core/interfaces/WorkflowLineInfo.md
---
# Interface: WorkflowLineInfo
## Hierarchy
- [`WorkflowLinePortInfo`](./WorkflowLinePortInfo.md)
↳ **`WorkflowLineInfo`**
## Table of contents
### Properties
- [data](./WorkflowLineInfo.md#data)
- [drawingFrom](./WorkflowLineInfo.md#drawingfrom)
- [drawingTo](./WorkflowLineInfo.md#drawingto)
- [from](./WorkflowLineInfo.md#from)
- [fromPort](./WorkflowLineInfo.md#fromport)
- [to](./WorkflowLineInfo.md#to)
- [toPort](./WorkflowLineInfo.md#toport)
## Properties
### data
`Optional` **data**: `any`
#### Inherited from
[WorkflowLinePortInfo](./WorkflowLinePortInfo.md).[data](./WorkflowLinePortInfo.md#data)
___
### drawingFrom
`Optional` **drawingFrom**: [`LinePoint`](./LinePoint.md)
___
### drawingTo
`Optional` **drawingTo**: [`LinePoint`](./LinePoint.md)
___
### from
`Optional` **from**: `string`
#### Inherited from
[WorkflowLinePortInfo](./WorkflowLinePortInfo.md).[from](./WorkflowLinePortInfo.md#from)
___
### fromPort
`Optional` **fromPort**: `string` \| `number`
#### Inherited from
[WorkflowLinePortInfo](./WorkflowLinePortInfo.md).[fromPort](./WorkflowLinePortInfo.md#fromport)
___
### to
`Optional` **to**: `string`
#### Inherited from
[WorkflowLinePortInfo](./WorkflowLinePortInfo.md).[to](./WorkflowLinePortInfo.md#to)
___
### toPort
`Optional` **toPort**: `string` \| `number`
#### Inherited from
[WorkflowLinePortInfo](./WorkflowLinePortInfo.md).[toPort](./WorkflowLinePortInfo.md#toport)
---
url: /auto-docs/free-layout-core/interfaces/WorkflowLinePortInfo.md
---
# Interface: WorkflowLinePortInfo
## Hierarchy
- **`WorkflowLinePortInfo`**
↳ [`WorkflowLineEntityOpts`](./WorkflowLineEntityOpts.md)
↳ [`WorkflowLineInfo`](./WorkflowLineInfo.md)
## Table of contents
### Properties
- [data](./WorkflowLinePortInfo.md#data)
- [from](./WorkflowLinePortInfo.md#from)
- [fromPort](./WorkflowLinePortInfo.md#fromport)
- [to](./WorkflowLinePortInfo.md#to)
- [toPort](./WorkflowLinePortInfo.md#toport)
## Properties
### data
`Optional` **data**: `any`
___
### from
`Optional` **from**: `string`
___
### fromPort
`Optional` **fromPort**: `string` \| `number`
___
### to
`Optional` **to**: `string`
___
### toPort
`Optional` **toPort**: `string` \| `number`
---
url: /auto-docs/free-layout-core/interfaces/WorkflowLineRenderContribution.md
---
# Interface: WorkflowLineRenderContribution
## Table of contents
### Properties
- [bounds](./WorkflowLineRenderContribution.md#bounds)
- [calcDistance](./WorkflowLineRenderContribution.md#calcdistance)
- [center](./WorkflowLineRenderContribution.md#center)
- [entity](./WorkflowLineRenderContribution.md#entity)
- [path](./WorkflowLineRenderContribution.md#path)
- [update](./WorkflowLineRenderContribution.md#update)
## Properties
### bounds
**bounds**: `Rectangle`
___
### calcDistance
**calcDistance**: (`pos`: `IPoint`) => `number`
#### Type declaration
(`pos`): `number`
##### Parameters
| Name | Type |
| :------ | :------ |
| `pos` | `IPoint` |
##### Returns
`number`
___
### center
`Optional` **center**: [`LineCenterPoint`](./LineCenterPoint.md)
___
### entity
**entity**: [`WorkflowLineEntity`](../classes/WorkflowLineEntity.md)
___
### path
**path**: `string`
___
### update
**update**: (`params`: \{ `fromPos`: [`LinePoint`](./LinePoint.md) ; `toPos`: [`LinePoint`](./LinePoint.md) }) => `void`
#### Type declaration
(`params`): `void`
##### Parameters
| Name | Type |
| :------ | :------ |
| `params` | `Object` |
| `params.fromPos` | [`LinePoint`](./LinePoint.md) |
| `params.toPos` | [`LinePoint`](./LinePoint.md) |
##### Returns
`void`
---
url: /auto-docs/free-layout-core/interfaces/WorkflowLineRenderDataSchema.md
---
# Interface: WorkflowLineRenderDataSchema
## Table of contents
### Properties
- [contributions](./WorkflowLineRenderDataSchema.md#contributions)
- [position](./WorkflowLineRenderDataSchema.md#position)
- [version](./WorkflowLineRenderDataSchema.md#version)
## Properties
### contributions
**contributions**: `Map`\<[`LineRenderType`](../types/LineRenderType.md), [`WorkflowLineRenderContribution`](./WorkflowLineRenderContribution.md)\>
___
### position
**position**: [`LinePosition`](./LinePosition.md)
___
### version
**version**: `string`
---
url: /auto-docs/free-layout-core/interfaces/WorkflowLineUIState.md
---
# Interface: WorkflowLineUIState
## Table of contents
### Properties
- [className](./WorkflowLineUIState.md#classname)
- [curvature](./WorkflowLineUIState.md#curvature)
- [disabled](./WorkflowLineUIState.md#disabled)
- [flowing](./WorkflowLineUIState.md#flowing)
- [hasError](./WorkflowLineUIState.md#haserror)
- [hideArrow](./WorkflowLineUIState.md#hidearrow)
- [highlightColor](./WorkflowLineUIState.md#highlightcolor)
- [lockedColor](./WorkflowLineUIState.md#lockedcolor)
- [reverse](./WorkflowLineUIState.md#reverse)
- [shrink](./WorkflowLineUIState.md#shrink)
- [strokeWidth](./WorkflowLineUIState.md#strokewidth)
- [strokeWidthSelected](./WorkflowLineUIState.md#strokewidthselected)
- [style](./WorkflowLineUIState.md#style)
## Properties
### className
`Optional` **className**: `string`
React className
___
### curvature
**curvature**: `number`
曲率
only for Bezier,
**`Default`**
```ts
0.25
```
___
### disabled
**disabled**: `boolean`
禁用
___
### flowing
**flowing**: `boolean`
流动
___
### hasError
**hasError**: `boolean`
是否出错
___
### hideArrow
**hideArrow**: `boolean`
隐藏箭头
___
### highlightColor
**highlightColor**: `string`
**`Deprecated`**
use `lockedColor` instead
___
### lockedColor
**lockedColor**: `string`
Line locked color
___
### reverse
**reverse**: `boolean`
箭头反转
___
### shrink
**shrink**: `number`
收缩
**`Default`**
```ts
10
```
___
### strokeWidth
`Optional` **strokeWidth**: `number`
线条宽度
**`Default`**
```ts
2
```
___
### strokeWidthSelected
`Optional` **strokeWidthSelected**: `number`
选中后的线条宽度
**`Default`**
```ts
3
```
___
### style
`Optional` **style**: `CSSProperties`
React style
---
url: /auto-docs/free-layout-core/interfaces/WorkflowNodeJSON.md
---
# Interface: WorkflowNodeJSON
节点数据
## Hierarchy
- `FlowNodeJSON`
↳ **`WorkflowNodeJSON`**
## Table of contents
### Properties
- [blocks](./WorkflowNodeJSON.md#blocks)
- [data](./WorkflowNodeJSON.md#data)
- [edges](./WorkflowNodeJSON.md#edges)
- [id](./WorkflowNodeJSON.md#id)
- [meta](./WorkflowNodeJSON.md#meta)
- [type](./WorkflowNodeJSON.md#type)
## Properties
### blocks
`Optional` **blocks**: [`WorkflowNodeJSON`](./WorkflowNodeJSON.md)[]
子节点
#### Overrides
FlowNodeJSON.blocks
___
### data
`Optional` **data**: `any`
表单数据
#### Overrides
FlowNodeJSON.data
___
### edges
`Optional` **edges**: [`WorkflowEdgeJSON`](./WorkflowEdgeJSON.md)[]
子节点间连线
___
### id
**id**: `string`
#### Overrides
FlowNodeJSON.id
___
### meta
`Optional` **meta**: [`WorkflowNodeMeta`](./WorkflowNodeMeta.md)
ui 数据
#### Overrides
FlowNodeJSON.meta
___
### type
**type**: `string` \| `number`
#### Overrides
FlowNodeJSON.type
---
url: /auto-docs/free-layout-core/interfaces/WorkflowNodeLines.md
---
# Interface: WorkflowNodeLines
## Table of contents
### Properties
- [inputLines](./WorkflowNodeLines.md#inputlines)
- [outputLines](./WorkflowNodeLines.md#outputlines)
## Properties
### inputLines
**inputLines**: [`WorkflowLineEntity`](../classes/WorkflowLineEntity.md)[]
___
### outputLines
**outputLines**: [`WorkflowLineEntity`](../classes/WorkflowLineEntity.md)[]
---
url: /auto-docs/free-layout-core/interfaces/WorkflowNodeMeta.md
---
# Interface: WorkflowNodeMeta
节点 meta 信息
## Hierarchy
- `FlowNodeMeta`
↳ **`WorkflowNodeMeta`**
## Table of contents
### Properties
- [addDisable](./WorkflowNodeMeta.md#adddisable)
- [addable](./WorkflowNodeMeta.md#addable)
- [autoResizeDisable](./WorkflowNodeMeta.md#autoresizedisable)
- [canvasPosition](./WorkflowNodeMeta.md#canvasposition)
- [copyDisable](./WorkflowNodeMeta.md#copydisable)
- [defaultCollapsed](./WorkflowNodeMeta.md#defaultcollapsed)
- [defaultExpanded](./WorkflowNodeMeta.md#defaultexpanded)
- [defaultPorts](./WorkflowNodeMeta.md#defaultports)
- [deleteDisable](./WorkflowNodeMeta.md#deletedisable)
- [draggable](./WorkflowNodeMeta.md#draggable)
- [expandable](./WorkflowNodeMeta.md#expandable)
- [hidden](./WorkflowNodeMeta.md#hidden)
- [inlineSpacingAfter](./WorkflowNodeMeta.md#inlinespacingafter)
- [inlineSpacingPre](./WorkflowNodeMeta.md#inlinespacingpre)
- [inputDisable](./WorkflowNodeMeta.md#inputdisable)
- [isContainer](./WorkflowNodeMeta.md#iscontainer)
- [isInlineBlocks](./WorkflowNodeMeta.md#isinlineblocks)
- [isNodeEnd](./WorkflowNodeMeta.md#isnodeend)
- [isStart](./WorkflowNodeMeta.md#isstart)
- [minInlineBlockSpacing](./WorkflowNodeMeta.md#mininlineblockspacing)
- [origin](./WorkflowNodeMeta.md#origin)
- [outputDisable](./WorkflowNodeMeta.md#outputdisable)
- [padding](./WorkflowNodeMeta.md#padding)
- [position](./WorkflowNodeMeta.md#position)
- [renderKey](./WorkflowNodeMeta.md#renderkey)
- [selectable](./WorkflowNodeMeta.md#selectable)
- [size](./WorkflowNodeMeta.md#size)
- [spacing](./WorkflowNodeMeta.md#spacing)
- [subCanvas](./WorkflowNodeMeta.md#subcanvas)
- [useDynamicPort](./WorkflowNodeMeta.md#usedynamicport)
## Properties
### addDisable
`Optional` **addDisable**: `boolean`
#### Inherited from
FlowNodeMeta.addDisable
___
### addable
`Optional` **addable**: `boolean`
#### Inherited from
FlowNodeMeta.addable
___
### autoResizeDisable
`Optional` **autoResizeDisable**: `boolean`
#### Inherited from
FlowNodeMeta.autoResizeDisable
___
### canvasPosition
`Optional` **canvasPosition**: `IPoint`
___
### copyDisable
`Optional` **copyDisable**: `boolean`
#### Overrides
FlowNodeMeta.copyDisable
___
### defaultCollapsed
`Optional` **defaultCollapsed**: `boolean`
#### Inherited from
FlowNodeMeta.defaultCollapsed
___
### defaultExpanded
`Optional` **defaultExpanded**: `boolean`
#### Inherited from
FlowNodeMeta.defaultExpanded
___
### defaultPorts
`Optional` **defaultPorts**: [`WorkflowPorts`](../types/WorkflowPorts.md)
___
### deleteDisable
`Optional` **deleteDisable**: `boolean`
#### Overrides
FlowNodeMeta.deleteDisable
___
### draggable
`Optional` **draggable**: `boolean` \| (`node`: `FlowNodeEntity`) => `boolean`
#### Inherited from
FlowNodeMeta.draggable
___
### expandable
`Optional` **expandable**: `boolean`
#### Inherited from
FlowNodeMeta.expandable
___
### hidden
`Optional` **hidden**: `boolean`
#### Inherited from
FlowNodeMeta.hidden
___
### inlineSpacingAfter
`Optional` **inlineSpacingAfter**: `number` \| (`transform`: `FlowNodeTransformData`) => `number`
#### Inherited from
FlowNodeMeta.inlineSpacingAfter
___
### inlineSpacingPre
`Optional` **inlineSpacingPre**: `number` \| (`transform`: `FlowNodeTransformData`) => `number`
#### Inherited from
FlowNodeMeta.inlineSpacingPre
___
### inputDisable
`Optional` **inputDisable**: `boolean`
___
### isContainer
`Optional` **isContainer**: `boolean`
___
### isInlineBlocks
`Optional` **isInlineBlocks**: `boolean` \| (`node`: `FlowNodeEntity`) => `boolean`
#### Inherited from
FlowNodeMeta.isInlineBlocks
___
### isNodeEnd
`Optional` **isNodeEnd**: `boolean`
#### Inherited from
FlowNodeMeta.isNodeEnd
___
### isStart
`Optional` **isStart**: `boolean`
#### Inherited from
FlowNodeMeta.isStart
___
### minInlineBlockSpacing
`Optional` **minInlineBlockSpacing**: `number` \| (`node`: `FlowNodeTransformData`) => `number`
#### Inherited from
FlowNodeMeta.minInlineBlockSpacing
___
### origin
`Optional` **origin**: `OriginSchema`
**`Deprecated`**
使用 NodeRegister.getOrigin 代替
#### Inherited from
FlowNodeMeta.origin
___
### outputDisable
`Optional` **outputDisable**: `boolean`
___
### padding
`Optional` **padding**: `PaddingSchema` \| (`transform`: `FlowNodeTransformData`) => `PaddingSchema`
#### Inherited from
FlowNodeMeta.padding
___
### position
`Optional` **position**: `IPoint`
___
### renderKey
`Optional` **renderKey**: `string`
#### Inherited from
FlowNodeMeta.renderKey
___
### selectable
`Optional` **selectable**: `boolean` \| (`node`: `FlowNodeEntity`, `mousePos?`: `PositionSchema`) => `boolean`
#### Inherited from
FlowNodeMeta.selectable
___
### size
`Optional` **size**: `SizeSchema`
#### Inherited from
FlowNodeMeta.size
___
### spacing
`Optional` **spacing**: `number` \| (`transform`: `FlowNodeTransformData`) => `number`
#### Inherited from
FlowNodeMeta.spacing
___
### subCanvas
`Optional` **subCanvas**: (`node`: `FlowNodeEntity`) => `undefined` \| [`WorkflowSubCanvas`](../types/WorkflowSubCanvas.md)
#### Type declaration
(`node`): `undefined` \| [`WorkflowSubCanvas`](../types/WorkflowSubCanvas.md)
##### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `FlowNodeEntity` |
##### Returns
`undefined` \| [`WorkflowSubCanvas`](../types/WorkflowSubCanvas.md)
___
### useDynamicPort
`Optional` **useDynamicPort**: `boolean`
---
url: /auto-docs/free-layout-core/interfaces/WorkflowNodeRegistry.md
---
# Interface: WorkflowNodeRegistry
节点注册
## Hierarchy
- `FlowNodeRegistry`\<[`WorkflowNodeMeta`](./WorkflowNodeMeta.md)\>
↳ **`WorkflowNodeRegistry`**
## Table of contents
### Properties
- [\_\_extends\_\_](./WorkflowNodeRegistry.md#__extends__)
- [addChild](./WorkflowNodeRegistry.md#addchild)
- [canAddLine](./WorkflowNodeRegistry.md#canaddline)
- [dataRegistries](./WorkflowNodeRegistry.md#dataregistries)
- [extend](./WorkflowNodeRegistry.md#extend)
- [extendChildRegistries](./WorkflowNodeRegistry.md#extendchildregistries)
- [formMeta](./WorkflowNodeRegistry.md#formmeta)
- [getChildDelta](./WorkflowNodeRegistry.md#getchilddelta)
- [getChildLabels](./WorkflowNodeRegistry.md#getchildlabels)
- [getChildLines](./WorkflowNodeRegistry.md#getchildlines)
- [getDelta](./WorkflowNodeRegistry.md#getdelta)
- [getInputPoint](./WorkflowNodeRegistry.md#getinputpoint)
- [getLabels](./WorkflowNodeRegistry.md#getlabels)
- [getLines](./WorkflowNodeRegistry.md#getlines)
- [getOriginDeltaX](./WorkflowNodeRegistry.md#getorigindeltax)
- [getOriginDeltaY](./WorkflowNodeRegistry.md#getorigindeltay)
- [getOutputPoint](./WorkflowNodeRegistry.md#getoutputpoint)
- [meta](./WorkflowNodeRegistry.md#meta)
- [onAfterUpdateLocalTransform](./WorkflowNodeRegistry.md#onafterupdatelocaltransform)
- [onBlockChildCreate](./WorkflowNodeRegistry.md#onblockchildcreate)
- [onCreate](./WorkflowNodeRegistry.md#oncreate)
- [type](./WorkflowNodeRegistry.md#type)
### Methods
- [getOrigin](./WorkflowNodeRegistry.md#getorigin)
## Properties
### \_\_extends\_\_
`Optional` **\_\_extends\_\_**: `FlowNodeType`[]
内部用于继承逻辑判断，不要使用
#### Inherited from
FlowNodeRegistry.\_\_extends\_\_
___
### addChild
`Optional` **addChild**: (`node`: `FlowNodeEntity`, `json`: `FlowNodeJSON`, `options?`: \{ `hidden?`: `boolean` ; `index?`: `number` }) => `FlowNodeEntity`
#### Type declaration
(`node`, `json`, `options?`): `FlowNodeEntity`
##### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `node` | `FlowNodeEntity` | 节点 |
| `json` | `FlowNodeJSON` | 添加的节点 JSON |
| `options?` | `Object` | 其它配置 |
| `options.hidden?` | `boolean` | - |
| `options.index?` | `number` | - |
##### Returns
`FlowNodeEntity`
**`Deprecated`**
自定义子节点添加逻辑
#### Inherited from
FlowNodeRegistry.addChild
___
### canAddLine
`Optional` **canAddLine**: (`fromPort`: [`WorkflowPortEntity`](../classes/WorkflowPortEntity.md), `toPort`: [`WorkflowPortEntity`](../classes/WorkflowPortEntity.md), `lines`: [`WorkflowLinesManager`](../classes/WorkflowLinesManager.md), `silent?`: `boolean`) => `boolean`
#### Type declaration
(`fromPort`, `toPort`, `lines`, `silent?`): `boolean`
##### Parameters
| Name | Type |
| :------ | :------ |
| `fromPort` | [`WorkflowPortEntity`](../classes/WorkflowPortEntity.md) |
| `toPort` | [`WorkflowPortEntity`](../classes/WorkflowPortEntity.md) |
| `lines` | [`WorkflowLinesManager`](../classes/WorkflowLinesManager.md) |
| `silent?` | `boolean` |
##### Returns
`boolean`
___
### dataRegistries
`Optional` **dataRegistries**: `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[]
节点注册的数据，可以理解为 ECS 里的 Component, 这里可以配置自定义数据
#### Inherited from
FlowNodeRegistry.dataRegistries
___
### extend
`Optional` **extend**: `string`
从另外一个注册扩展
#### Inherited from
FlowNodeRegistry.extend
___
### extendChildRegistries
`Optional` **extendChildRegistries**: `FlowNodeRegistry`\<`FlowNodeMeta`\>[]
子节点的 registry 覆盖，这里通过 originParent 来查找
#### Inherited from
FlowNodeRegistry.extendChildRegistries
___
### formMeta
`Optional` **formMeta**: [`WorkflowNodeFormMeta`](../types/WorkflowNodeFormMeta.md)
___
### getChildDelta
`Optional` **getChildDelta**: (`childBlock`: `FlowNodeTransformData`, `layout`: `FlowLayout`) => `undefined` \| `IPoint`
#### Type declaration
(`childBlock`, `layout`): `undefined` \| `IPoint`
通过 parent 计算当前节点的偏移，规则同 getDelta
##### Parameters
| Name | Type |
| :------ | :------ |
| `childBlock` | `FlowNodeTransformData` |
| `layout` | `FlowLayout` |
##### Returns
`undefined` \| `IPoint`
#### Inherited from
FlowNodeRegistry.getChildDelta
___
### getChildLabels
`Optional` **getChildLabels**: (`transition`: `FlowNodeTransitionData`, `layout`: `FlowLayout`) => `FlowTransitionLabel`[]
#### Type declaration
(`transition`, `layout`): `FlowTransitionLabel`[]
调整子节点的 Labels，优先级高于子节点本身的 getLabels
##### Parameters
| Name | Type |
| :------ | :------ |
| `transition` | `FlowNodeTransitionData` |
| `layout` | `FlowLayout` |
##### Returns
`FlowTransitionLabel`[]
#### Inherited from
FlowNodeRegistry.getChildLabels
___
### getChildLines
`Optional` **getChildLines**: (`transition`: `FlowNodeTransitionData`, `layout`: `FlowLayout`) => `FlowTransitionLine`[]
#### Type declaration
(`transition`, `layout`): `FlowTransitionLine`[]
调整子节点的线条，优先级高于子节点本身的 getLines
##### Parameters
| Name | Type |
| :------ | :------ |
| `transition` | `FlowNodeTransitionData` |
| `layout` | `FlowLayout` |
##### Returns
`FlowTransitionLine`[]
#### Inherited from
FlowNodeRegistry.getChildLines
___
### getDelta
`Optional` **getDelta**: (`transform`: `FlowNodeTransformData`, `layout`: `FlowLayout`) => `undefined` \| `IPoint`
#### Type declaration
(`transform`, `layout`): `undefined` \| `IPoint`
获取当前节点 Position 偏移量，偏移量计算只能使用已经计算完的数据，如上一个节点或者子节点，不然会造成 o(n^2) 复杂度
1. 切记不要用当前节点的 localBounds(相对位置 bbox)，因为 delta 计算发生在 localBounds 计算之前
2. 切记不要用 bounds(绝对位置 bbox, 会触发所有父节点绝对位置计算), bounds 只能在最终 render 时候使用
3. 可以用 pre 节点 和 子节点的 localBounds 或者 size 数据，因为子节点是先算的
4. 可以用当前节点的 size (所有子节点的最大 bbox), 这是已经确定下来的
##### Parameters
| Name | Type |
| :------ | :------ |
| `transform` | `FlowNodeTransformData` |
| `layout` | `FlowLayout` |
##### Returns
`undefined` \| `IPoint`
#### Inherited from
FlowNodeRegistry.getDelta
___
### getInputPoint
`Optional` **getInputPoint**: (`transform`: `FlowNodeTransformData`, `layout`: `FlowLayout`) => `IPoint`
#### Type declaration
(`transform`, `layout`): `IPoint`
自定义输入节点
##### Parameters
| Name | Type |
| :------ | :------ |
| `transform` | `FlowNodeTransformData` |
| `layout` | `FlowLayout` |
##### Returns
`IPoint`
#### Inherited from
FlowNodeRegistry.getInputPoint
___
### getLabels
`Optional` **getLabels**: (`transition`: `FlowNodeTransitionData`, `layout`: `FlowLayout`) => `FlowTransitionLabel`[]
#### Type declaration
(`transition`, `layout`): `FlowTransitionLabel`[]
创建 label
##### Parameters
| Name | Type |
| :------ | :------ |
| `transition` | `FlowNodeTransitionData` |
| `layout` | `FlowLayout` |
##### Returns
`FlowTransitionLabel`[]
#### Inherited from
FlowNodeRegistry.getLabels
___
### getLines
`Optional` **getLines**: (`transition`: `FlowNodeTransitionData`, `layout`: `FlowLayout`) => `FlowTransitionLine`[]
#### Type declaration
(`transition`, `layout`): `FlowTransitionLine`[]
创建线条
##### Parameters
| Name | Type |
| :------ | :------ |
| `transition` | `FlowNodeTransitionData` |
| `layout` | `FlowLayout` |
##### Returns
`FlowTransitionLine`[]
#### Inherited from
FlowNodeRegistry.getLines
___
### getOriginDeltaX
`Optional` **getOriginDeltaX**: (`transform`: `FlowNodeTransformData`, `layout`: `FlowLayout`) => `number`
#### Type declaration
(`transform`, `layout`): `number`
原点 X 偏移
##### Parameters
| Name | Type |
| :------ | :------ |
| `transform` | `FlowNodeTransformData` |
| `layout` | `FlowLayout` |
##### Returns
`number`
#### Inherited from
FlowNodeRegistry.getOriginDeltaX
___
### getOriginDeltaY
`Optional` **getOriginDeltaY**: (`transform`: `FlowNodeTransformData`, `layout`: `FlowLayout`) => `number`
#### Type declaration
(`transform`, `layout`): `number`
原点 Y 偏移
##### Parameters
| Name | Type |
| :------ | :------ |
| `transform` | `FlowNodeTransformData` |
| `layout` | `FlowLayout` |
##### Returns
`number`
#### Inherited from
FlowNodeRegistry.getOriginDeltaY
___
### getOutputPoint
`Optional` **getOutputPoint**: (`transform`: `FlowNodeTransformData`, `layoutKey`: `FlowLayout`) => `IPoint`
#### Type declaration
(`transform`, `layoutKey`): `IPoint`
自定义输出节点
##### Parameters
| Name | Type |
| :------ | :------ |
| `transform` | `FlowNodeTransformData` |
| `layoutKey` | `FlowLayout` |
##### Returns
`IPoint`
#### Inherited from
FlowNodeRegistry.getOutputPoint
___
### meta
`Optional` **meta**: `Partial`\<[`WorkflowNodeMeta`](./WorkflowNodeMeta.md)\>
节点画布相关初始化配置信息，会覆盖 DEFAULT_FLOW_NODE_META
#### Inherited from
FlowNodeRegistry.meta
___
### onAfterUpdateLocalTransform
`Optional` **onAfterUpdateLocalTransform**: (`transform`: `FlowNodeTransformData`, `layout`: `FlowLayout`) => `void`
#### Type declaration
(`transform`, `layout`): `void`
在当前节点布局完成后调用，可以对布局做更精细的调整
##### Parameters
| Name | Type |
| :------ | :------ |
| `transform` | `FlowNodeTransformData` |
| `layout` | `FlowLayout` |
##### Returns
`void`
#### Inherited from
FlowNodeRegistry.onAfterUpdateLocalTransform
___
### onBlockChildCreate
`Optional` **onBlockChildCreate**: (`node`: `FlowNodeEntity`, `json`: `FlowNodeJSON`, `addedNodes?`: `FlowNodeEntity`[]) => `FlowNodeEntity`
#### Type declaration
(`node`, `json`, `addedNodes?`): `FlowNodeEntity`
添加子 block，一般用于分支的动态添加
##### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `FlowNodeEntity` |
| `json` | `FlowNodeJSON` |
| `addedNodes?` | `FlowNodeEntity`[] |
##### Returns
`FlowNodeEntity`
#### Inherited from
FlowNodeRegistry.onBlockChildCreate
___
### onCreate
`Optional` **onCreate**: (`node`: `FlowNodeEntity`, `json`: `FlowNodeJSON`) => `void` \| `FlowNodeEntity`[]
#### Type declaration
(`node`, `json`): `void` \| `FlowNodeEntity`[]
自定义创建节点，可以自定义节点的树形结构
返回新加入的节点，这样才能统计缓存
##### Parameters
| Name | Type |
| :------ | :------ |
| `node` | `FlowNodeEntity` |
| `json` | `FlowNodeJSON` |
##### Returns
`void` \| `FlowNodeEntity`[]
**`Action`**
使用该方法，在创建时候将会忽略 json blocks 数据，而是交给适用节点自己处理 json 逻辑
#### Inherited from
FlowNodeRegistry.onCreate
___
### type
**type**: `FlowNodeType`
节点类型
#### Inherited from
FlowNodeRegistry.type
## Methods
### getOrigin
`Optional` **getOrigin**(`transform`, `layout`): `IPoint`
动态获取原点，会覆盖 meta.origin
#### Parameters
| Name | Type |
| :------ | :------ |
| `transform` | `FlowNodeTransformData` |
| `layout` | `FlowLayout` |
#### Returns
`IPoint`
#### Inherited from
FlowNodeRegistry.getOrigin
---
url: /auto-docs/free-layout-core/interfaces/WorkflowNodeRenderProps.md
---
# Interface: WorkflowNodeRenderProps
## Table of contents
### Properties
- [node](./WorkflowNodeRenderProps.md#node)
## Properties
### node
**node**: `FlowNodeEntity`
---
url: /auto-docs/free-layout-core/interfaces/WorkflowOperationBaseService.md
---
# Interface: WorkflowOperationBaseService
## Hierarchy
- `FlowOperationBaseService`
↳ **`WorkflowOperationBaseService`**
## Table of contents
### Properties
- [onNodeAdd](./WorkflowOperationBaseService.md#onnodeadd)
- [onNodeMove](./WorkflowOperationBaseService.md#onnodemove)
- [onNodePostionUpdate](./WorkflowOperationBaseService.md#onnodepostionupdate)
### Methods
- [addBlock](./WorkflowOperationBaseService.md#addblock)
- [addFromNode](./WorkflowOperationBaseService.md#addfromnode)
- [addNode](./WorkflowOperationBaseService.md#addnode)
- [apply](./WorkflowOperationBaseService.md#apply)
- [deleteNode](./WorkflowOperationBaseService.md#deletenode)
- [deleteNodes](./WorkflowOperationBaseService.md#deletenodes)
- [dispose](./WorkflowOperationBaseService.md#dispose)
- [dragNodes](./WorkflowOperationBaseService.md#dragnodes)
- [fromJSON](./WorkflowOperationBaseService.md#fromjson)
- [moveNode](./WorkflowOperationBaseService.md#movenode)
- [updateNodePosition](./WorkflowOperationBaseService.md#updatenodeposition)
## Properties
### onNodeAdd
**onNodeAdd**: `Event`\<`OnNodeAddEvent`\>
添加节点的回调
#### Inherited from
FlowOperationBaseService.onNodeAdd
___
### onNodeMove
**onNodeMove**: `Event`\<`OnNodeMoveEvent`\>
节点移动的回调
#### Inherited from
FlowOperationBaseService.onNodeMove
___
### onNodePostionUpdate
`Readonly` **onNodePostionUpdate**: `Event`\<[`NodePostionUpdateEvent`](./NodePostionUpdateEvent.md)\>
节点位置更新事件
## Methods
### addBlock
**addBlock**(`target`, `blockJSON`, `config?`): `FlowNodeEntity`
添加块（分支）
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `target` | `FlowNodeEntityOrId` | 目标 |
| `blockJSON` | `FlowNodeJSON` | 块数据 |
| `config?` | `AddBlockConfig` | 配置 |
#### Returns
`FlowNodeEntity`
#### Inherited from
FlowOperationBaseService.addBlock
___
### addFromNode
**addFromNode**(`fromNode`, `nodeJSON`): `FlowNodeEntity`
基于某一个起始节点往后面添加
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `fromNode` | `FlowNodeEntityOrId` | 起始节点 |
| `nodeJSON` | `FlowNodeJSON` | 添加的节点JSON |
#### Returns
`FlowNodeEntity`
#### Inherited from
FlowOperationBaseService.addFromNode
___
### addNode
**addNode**(`nodeJSON`, `config?`): `FlowNodeEntity`
添加节点，如果节点已经存在则不会重复创建
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `nodeJSON` | `FlowNodeJSON` | 节点数据 |
| `config?` | `AddNodeConfig` | 配置 |
#### Returns
`FlowNodeEntity`
成功添加的节点
#### Inherited from
FlowOperationBaseService.addNode
___
### apply
**apply**(`operation`): `any`
执行操作
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `operation` | `FlowOperation` | 可序列化的操作 |
#### Returns
`any`
操作返回
#### Inherited from
FlowOperationBaseService.apply
___
### deleteNode
**deleteNode**(`node`): `void`
删除节点
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `node` | `FlowNodeEntityOrId` | 节点 |
#### Returns
`void`
#### Inherited from
FlowOperationBaseService.deleteNode
___
### deleteNodes
**deleteNodes**(`nodes`): `void`
批量删除节点
#### Parameters
| Name | Type |
| :------ | :------ |
| `nodes` | `FlowNodeEntityOrId`[] |
#### Returns
`void`
#### Inherited from
FlowOperationBaseService.deleteNodes
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Inherited from
FlowOperationBaseService.dispose
___
### dragNodes
**dragNodes**(`param0`): `void`
拖拽节点
#### Parameters
| Name | Type |
| :------ | :------ |
| `param0` | `Object` |
| `param0.dropNode` | `FlowNodeEntity` |
| `param0.nodes` | `FlowNodeEntity`[] |
#### Returns
`void`
#### Inherited from
FlowOperationBaseService.dragNodes
___
### fromJSON
**fromJSON**(`json`): `void`
更新节点与线条
#### Parameters
| Name | Type |
| :------ | :------ |
| `json` | [`WorkflowJSON`](./WorkflowJSON.md) |
#### Returns
`void`
___
### moveNode
**moveNode**(`node`, `config?`): `void`
移动节点
#### Parameters
| Name | Type | Description |
| :------ | :------ | :------ |
| `node` | `FlowNodeEntityOrId` | 被移动的节点 |
| `config?` | `MoveNodeConfig` | 移动节点配置 |
#### Returns
`void`
#### Inherited from
FlowOperationBaseService.moveNode
___
### updateNodePosition
**updateNodePosition**(`nodeOrId`, `position`): `void`
更新节点位置
#### Parameters
| Name | Type |
| :------ | :------ |
| `nodeOrId` | `FlowNodeEntityOrId` |
| `position` | `IPoint` |
#### Returns
`void`
---
url: /auto-docs/free-layout-core/interfaces/WorkflowPort.md
---
# Interface: WorkflowPort
## Hierarchy
- **`WorkflowPort`**
↳ [`WorkflowPortEntityOpts`](./WorkflowPortEntityOpts.md)
## Table of contents
### Properties
- [disabled](./WorkflowPort.md#disabled)
- [location](./WorkflowPort.md#location)
- [locationConfig](./WorkflowPort.md#locationconfig)
- [offset](./WorkflowPort.md#offset)
- [portID](./WorkflowPort.md#portid)
- [size](./WorkflowPort.md#size)
- [targetElement](./WorkflowPort.md#targetelement)
- [type](./WorkflowPort.md#type)
## Properties
### disabled
`Optional` **disabled**: `boolean`
禁用端口
___
### location
`Optional` **location**: [`LinePointLocation`](../types/LinePointLocation.md)
端口位置
___
### locationConfig
`Optional` **locationConfig**: `Object`
端口位置配置
**`Example`**
```ts
// bottom-center
{
left: '50%',
bottom: 0
}
// right-center
{
right: 0,
top: '50%'
}
```
#### Type declaration
| Name | Type |
| :------ | :------ |
| `bottom?` | `string` \| `number` |
| `left?` | `string` \| `number` |
| `right?` | `string` \| `number` |
| `top?` | `string` \| `number` |
___
### offset
`Optional` **offset**: `IPoint`
相对于 location 的偏移
___
### portID
`Optional` **portID**: `string` \| `number`
没有代表 默认连接点，默认 input 类型 为最左边中心，output 类型为最右边中心
___
### size
`Optional` **size**: `Object`
端口热区大小
#### Type declaration
| Name | Type |
| :------ | :------ |
| `height` | `number` |
| `width` | `number` |
___
### targetElement
`Optional` **targetElement**: `HTMLElement`
将点位渲染到该父节点上
___
### type
**type**: [`WorkflowPortType`](../types/WorkflowPortType.md)
输入或者输出点
---
url: /auto-docs/free-layout-core/interfaces/WorkflowPortEntityOpts.md
---
# Interface: WorkflowPortEntityOpts
## Hierarchy
- `EntityOpts`
- [`WorkflowPort`](./WorkflowPort.md)
↳ **`WorkflowPortEntityOpts`**
## Table of contents
### Properties
- [datas](./WorkflowPortEntityOpts.md#datas)
- [disabled](./WorkflowPortEntityOpts.md#disabled)
- [entityManager](./WorkflowPortEntityOpts.md#entitymanager)
- [id](./WorkflowPortEntityOpts.md#id)
- [location](./WorkflowPortEntityOpts.md#location)
- [locationConfig](./WorkflowPortEntityOpts.md#locationconfig)
- [node](./WorkflowPortEntityOpts.md#node)
- [offset](./WorkflowPortEntityOpts.md#offset)
- [portID](./WorkflowPortEntityOpts.md#portid)
- [savedInManager](./WorkflowPortEntityOpts.md#savedinmanager)
- [size](./WorkflowPortEntityOpts.md#size)
- [targetElement](./WorkflowPortEntityOpts.md#targetelement)
- [type](./WorkflowPortEntityOpts.md#type)
## Properties
### datas
`Optional` **datas**: \{ `data?`: `any` ; `registry`: `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\> }[]
#### Inherited from
EntityOpts.datas
___
### disabled
`Optional` **disabled**: `boolean`
禁用端口
#### Inherited from
[WorkflowPort](./WorkflowPort.md).[disabled](./WorkflowPort.md#disabled)
___
### entityManager
**entityManager**: `EntityManager`
#### Inherited from
EntityOpts.entityManager
___
### id
`Optional` **id**: `string`
#### Inherited from
EntityOpts.id
___
### location
`Optional` **location**: [`LinePointLocation`](../types/LinePointLocation.md)
端口位置
#### Inherited from
[WorkflowPort](./WorkflowPort.md).[location](./WorkflowPort.md#location)
___
### locationConfig
`Optional` **locationConfig**: `Object`
端口位置配置
**`Example`**
```ts
// bottom-center
{
left: '50%',
bottom: 0
}
// right-center
{
right: 0,
top: '50%'
}
```
#### Type declaration
| Name | Type |
| :------ | :------ |
| `bottom?` | `string` \| `number` |
| `left?` | `string` \| `number` |
| `right?` | `string` \| `number` |
| `top?` | `string` \| `number` |
#### Inherited from
[WorkflowPort](./WorkflowPort.md).[locationConfig](./WorkflowPort.md#locationconfig)
___
### node
**node**: `FlowNodeEntity`
port 属于哪个节点
___
### offset
`Optional` **offset**: `IPoint`
相对于 location 的偏移
#### Inherited from
[WorkflowPort](./WorkflowPort.md).[offset](./WorkflowPort.md#offset)
___
### portID
`Optional` **portID**: `string` \| `number`
没有代表 默认连接点，默认 input 类型 为最左边中心，output 类型为最右边中心
#### Inherited from
[WorkflowPort](./WorkflowPort.md).[portID](./WorkflowPort.md#portid)
___
### savedInManager
`Optional` **savedInManager**: `boolean`
#### Inherited from
EntityOpts.savedInManager
___
### size
`Optional` **size**: `Object`
端口热区大小
#### Type declaration
| Name | Type |
| :------ | :------ |
| `height` | `number` |
| `width` | `number` |
#### Inherited from
[WorkflowPort](./WorkflowPort.md).[size](./WorkflowPort.md#size)
___
### targetElement
`Optional` **targetElement**: `HTMLElement`
将点位渲染到该父节点上
#### Inherited from
[WorkflowPort](./WorkflowPort.md).[targetElement](./WorkflowPort.md#targetelement)
___
### type
**type**: [`WorkflowPortType`](../types/WorkflowPortType.md)
输入或者输出点
#### Inherited from
[WorkflowPort](./WorkflowPort.md).[type](./WorkflowPort.md#type)
---
url: /auto-docs/free-layout-core/types/LinePointLocation.md
---
# Type alias: LinePointLocation
**LinePointLocation**: ``"left"`` \| ``"top"`` \| ``"right"`` \| ``"bottom"``
---
url: /auto-docs/free-layout-core/types/LineRenderType.md
---
# Type alias: LineRenderType
**LineRenderType**: [`LineType`](../enums/LineType.md) \| `string`
---
url: /auto-docs/free-layout-core/types/NodesDragEvent.md
---
# Type alias: NodesDragEvent
**NodesDragEvent**: [`NodesDragStartEvent`](../interfaces/NodesDragStartEvent.md) \| [`NodesDraggingEvent`](../interfaces/NodesDraggingEvent.md) \| [`NodesDragEndEvent`](../interfaces/NodesDragEndEvent.md)
---
url: /auto-docs/free-layout-core/types/OnDragLineEnd.md
---
# Type alias: OnDragLineEnd
**OnDragLineEnd**: (`params`: [`onDragLineEndParams`](./onDragLineEndParams.md)) => `Promise`\<`void`\>
#### Type declaration
(`params`): `Promise`\<`void`\>
##### Parameters
| Name | Type |
| :------ | :------ |
| `params` | [`onDragLineEndParams`](./onDragLineEndParams.md) |
##### Returns
`Promise`\<`void`\>
---
url: /auto-docs/free-layout-core/types/PositionMap.md
---
# Type alias: PositionMap
**PositionMap**: `Record`\<`string`, `IPoint`\>
---
url: /auto-docs/free-layout-core/types/WorkfloEntityHoverable.md
---
# Type alias: WorkfloEntityHoverable
**WorkfloEntityHoverable**: [`WorkflowEntityHoverable`](./WorkflowEntityHoverable.md)
**`Deprecated`**
---
url: /auto-docs/free-layout-core/types/WorkflowDocumentProvider.md
---
# Type alias: WorkflowDocumentProvider
**WorkflowDocumentProvider**: () => [`WorkflowDocument`](../classes/WorkflowDocument.md)
#### Type declaration
(): [`WorkflowDocument`](../classes/WorkflowDocument.md)
##### Returns
[`WorkflowDocument`](../classes/WorkflowDocument.md)
---
url: /auto-docs/free-layout-core/types/WorkflowEntityHoverable.md
---
# Type alias: WorkflowEntityHoverable
**WorkflowEntityHoverable**: [`WorkflowNodeEntity`](../variables/WorkflowNodeEntity-1.md) \| [`WorkflowLineEntity`](../classes/WorkflowLineEntity.md) \| [`WorkflowPortEntity`](../classes/WorkflowPortEntity.md)
可 Hover 的节点 类型
---
url: /auto-docs/free-layout-core/types/WorkflowLineRenderContributionFactory.md
---
# Type alias: WorkflowLineRenderContributionFactory
**WorkflowLineRenderContributionFactory**: (`entity`: [`WorkflowLineEntity`](../classes/WorkflowLineEntity.md)) => [`WorkflowLineRenderContribution`](../interfaces/WorkflowLineRenderContribution.md) & \{ `type`: [`LineRenderType`](./LineRenderType.md) }
---
url: /auto-docs/free-layout-core/types/WorkflowNodeEntity.md
---
# Type alias: WorkflowNodeEntity
**WorkflowNodeEntity**: `FlowNodeEntity`
---
url: /auto-docs/free-layout-core/types/WorkflowNodeFormMeta.md
---
# Type alias: WorkflowNodeFormMeta
**WorkflowNodeFormMeta**: `FormMetaOrFormMetaGenerator` \| `FormMeta`
节点表单引擎配置
---
url: /auto-docs/free-layout-core/types/WorkflowPortType.md
---
# Type alias: WorkflowPortType
**WorkflowPortType**: ``"input"`` \| ``"output"``
---
url: /auto-docs/free-layout-core/types/WorkflowPorts.md
---
# Type alias: WorkflowPorts
**WorkflowPorts**: [`WorkflowPort`](../interfaces/WorkflowPort.md)[]
---
url: /auto-docs/free-layout-core/types/WorkflowSubCanvas.md
---
# Type alias: WorkflowSubCanvas
**WorkflowSubCanvas**: `Object`
子画布配置
#### Type declaration
| Name | Type |
| :------ | :------ |
| `canvasNode` | [`WorkflowNodeEntity`](../variables/WorkflowNodeEntity-1.md) |
| `isCanvas` | `boolean` |
| `parentNode` | [`WorkflowNodeEntity`](../variables/WorkflowNodeEntity-1.md) |
---
url: /auto-docs/free-layout-core/types/onDragLineEndParams.md
---
# Type alias: onDragLineEndParams
**onDragLineEndParams**: `Object`
#### Type declaration
| Name | Type |
| :------ | :------ |
| `event` | `PlaygroundDragEvent` |
| `fromPort?` | [`WorkflowPortEntity`](../classes/WorkflowPortEntity.md) |
| `line?` | [`WorkflowLineEntity`](../classes/WorkflowLineEntity.md) |
| `mousePos` | `PositionSchema` |
| `originLine?` | [`WorkflowLineEntity`](../classes/WorkflowLineEntity.md) |
| `toPort?` | [`WorkflowPortEntity`](../classes/WorkflowPortEntity.md) |
---
url: /auto-docs/free-layout-core/variables/LINE_HOVER_DISTANCE.md
---
# Variable: LINE\_HOVER\_DISTANCE
`Const` **LINE\_HOVER\_DISTANCE**: ``8``
---
url: /auto-docs/free-layout-core/variables/POINT_RADIUS.md
---
# Variable: POINT\_RADIUS
`Const` **POINT\_RADIUS**: ``10``
---
url: /auto-docs/free-layout-core/variables/PORT_SIZE.md
---
# Variable: PORT\_SIZE
`Const` **PORT\_SIZE**: ``24``
---
url: /auto-docs/free-layout-core/variables/URLParams-1.md
---
# Variable: URLParams
`Const` **URLParams**: typeof [`URLParams`](./URLParams-1.md)
---
url: /auto-docs/free-layout-core/variables/WORKFLOW_LINE_ENTITY.md
---
# Variable: WORKFLOW\_LINE\_ENTITY
`Const` **WORKFLOW\_LINE\_ENTITY**: ``"WorkflowLineEntity"``
---
url: /auto-docs/free-layout-core/variables/WorkflowDocumentContainerModule.md
---
# Variable: WorkflowDocumentContainerModule
`Const` **WorkflowDocumentContainerModule**: `ContainerModule`
---
url: /auto-docs/free-layout-core/variables/WorkflowDocumentOptions-1.md
---
# Variable: WorkflowDocumentOptions
`Const` **WorkflowDocumentOptions**: typeof [`WorkflowDocumentOptions`](./WorkflowDocumentOptions-1.md)
---
url: /auto-docs/free-layout-core/variables/WorkflowDocumentOptionsDefault.md
---
# Variable: WorkflowDocumentOptionsDefault
`Const` **WorkflowDocumentOptionsDefault**: [`WorkflowDocumentOptions`](./WorkflowDocumentOptions-1.md)
---
url: /auto-docs/free-layout-core/variables/WorkflowDocumentProvider-1.md
---
# Variable: WorkflowDocumentProvider
`Const` **WorkflowDocumentProvider**: typeof [`WorkflowDocumentProvider`](./WorkflowDocumentProvider-1.md)
---
url: /auto-docs/free-layout-core/variables/WorkflowNodeEntity-1.md
---
# Variable: WorkflowNodeEntity
**WorkflowNodeEntity**: typeof `FlowNodeEntity`
---
url: /auto-docs/free-layout-core/variables/WorkflowOperationBaseService-1.md
---
# Variable: WorkflowOperationBaseService
**WorkflowOperationBaseService**: typeof [`WorkflowOperationBaseService`](./WorkflowOperationBaseService-1.md)
---
url: /auto-docs/renderer/classes/FlowContextMenuLayer.md
---
# Class: FlowContextMenuLayer
流程右键菜单
## Hierarchy
- `Layer`
↳ **`FlowContextMenuLayer`**
## Table of contents
### Constructors
- [constructor](./FlowContextMenuLayer.md#constructor)
### Properties
- [commandRegistry](./FlowContextMenuLayer.md#commandregistry)
- [config](./FlowContextMenuLayer.md#config)
- [context](./FlowContextMenuLayer.md#context)
- [contextMenuService](./FlowContextMenuLayer.md#contextmenuservice)
- [entityManager](./FlowContextMenuLayer.md#entitymanager)
- [getOtherLayer](./FlowContextMenuLayer.md#getotherlayer)
- [isFocused](./FlowContextMenuLayer.md#isfocused)
- [listenGlobalEvent](./FlowContextMenuLayer.md#listenglobalevent)
- [listenPlaygroundEvent](./FlowContextMenuLayer.md#listenplaygroundevent)
- [node](./FlowContextMenuLayer.md#node)
- [nodeRef](./FlowContextMenuLayer.md#noderef)
- [observeManager](./FlowContextMenuLayer.md#observemanager)
- [options](./FlowContextMenuLayer.md#options)
- [pipelineNode](./FlowContextMenuLayer.md#pipelinenode)
- [playgroundNode](./FlowContextMenuLayer.md#playgroundnode)
- [reloadEntities](./FlowContextMenuLayer.md#reloadentities)
- [renderWithReactMemo](./FlowContextMenuLayer.md#renderwithreactmemo)
- [rendererRegistry](./FlowContextMenuLayer.md#rendererregistry)
- [selectionService](./FlowContextMenuLayer.md#selectionservice)
### Methods
- [autorun](./FlowContextMenuLayer.md#autorun)
- [createDOMCache](./FlowContextMenuLayer.md#createdomcache)
- [dispose](./FlowContextMenuLayer.md#dispose)
- [getPosFromMouseEvent](./FlowContextMenuLayer.md#getposfrommouseevent)
- [isEnabled](./FlowContextMenuLayer.md#isenabled)
- [onBlur](./FlowContextMenuLayer.md#onblur)
- [onFocus](./FlowContextMenuLayer.md#onfocus)
- [onReadonlyOrDisabledChange](./FlowContextMenuLayer.md#onreadonlyordisabledchange)
- [onReady](./FlowContextMenuLayer.md#onready)
- [onResize](./FlowContextMenuLayer.md#onresize)
- [onScroll](./FlowContextMenuLayer.md#onscroll)
- [onViewportChange](./FlowContextMenuLayer.md#onviewportchange)
- [onZoom](./FlowContextMenuLayer.md#onzoom)
- [render](./FlowContextMenuLayer.md#render)
- [renderCommandMenus](./FlowContextMenuLayer.md#rendercommandmenus)
## Constructors
### constructor
**new FlowContextMenuLayer**()
#### Inherited from
Layer.constructor
## Properties
### commandRegistry
`Readonly` **commandRegistry**: `CommandRegistry`
___
### config
**config**: `PlaygroundConfigEntity`
全局画布配置
#### Inherited from
Layer.config
___
### context
`Readonly` **context**: `any`
#### Inherited from
Layer.context
___
### contextMenuService
`Readonly` **contextMenuService**: `ContextMenuService`
___
### entityManager
`Readonly` **entityManager**: `EntityManager`
实体管理器
#### Inherited from
Layer.entityManager
___
### getOtherLayer
**getOtherLayer**: \(`layerRegistry`: `LayerRegistry`\<`T`\>) => `undefined` \| `T`
#### Type declaration
\<`T`\>(`layerRegistry`): `undefined` \| `T`
可以用于获取别的 layer
##### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `Layer`\<`any`, `any`, `T`\> |
##### Parameters
| Name | Type |
| :------ | :------ |
| `layerRegistry` | `LayerRegistry`\<`T`\> |
##### Returns
`undefined` \| `T`
#### Inherited from
Layer.getOtherLayer
___
### isFocused
`Readonly` **isFocused**: `boolean`
playground 是否 focused
#### Inherited from
Layer.isFocused
___
### listenGlobalEvent
**listenGlobalEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 document 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
#### Inherited from
Layer.listenGlobalEvent
___
### listenPlaygroundEvent
**listenPlaygroundEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 playground 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
#### Inherited from
Layer.listenPlaygroundEvent
___
### node
`Readonly` **node**: `HTMLDivElement`
#### Overrides
Layer.node
___
### nodeRef
`Readonly` **nodeRef**: `RefObject`\<\{ `setVisible`: (`v`: `boolean`) => `void` }\>
___
### observeManager
**observeManager**: `PipelineEntities`
当前 layer 的所有监听的实体数据
#### Inherited from
Layer.observeManager
___
### options
**options**: `any`
layer 的配置, 由 registerLayer(Layer, LayerOptions) 传入
#### Inherited from
Layer.options
___
### pipelineNode
**pipelineNode**: `HTMLElement`
父节点
#### Inherited from
Layer.pipelineNode
___
### playgroundNode
**playgroundNode**: `HTMLElement`
画布根节点
#### Inherited from
Layer.playgroundNode
___
### reloadEntities
**reloadEntities**: () => `boolean`
#### Type declaration
(): `boolean`
加载 layer 注册的实体数据，内部使用，不需要手动触发
##### Returns
`boolean`
数据是否变化
#### Inherited from
Layer.reloadEntities
___
### renderWithReactMemo
**renderWithReactMemo**: `boolean`
默认在渲染时候都会启用 react memo 进行隔离，这种情况就需要数据驱动更新
#### Inherited from
Layer.renderWithReactMemo
___
### rendererRegistry
`Readonly` **rendererRegistry**: [`FlowRendererRegistry`](./FlowRendererRegistry.md)
___
### selectionService
`Readonly` **selectionService**: `SelectionService`
## Methods
### autorun
`Optional` **autorun**(): `void`
自动触发更新，在不需要 react 的时候用这个方法
#### Returns
`void`
#### Inherited from
Layer.autorun
___
### createDOMCache
**createDOMCache**\<`T`\>(`className`, `children?`): `CacheManager`\<`T`, `CacheOriginItem`\>
创建 dom 缓冲池
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `DOMCache`\<`T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `className` | `string` \| () => `HTMLElement` |
| `children?` | `string` |
#### Returns
`CacheManager`\<`T`, `CacheOriginItem`\>
#### Inherited from
Layer.createDOMCache
___
### dispose
**dispose**(): `void`
Destroy
#### Returns
`void`
#### Overrides
Layer.dispose
___
### getPosFromMouseEvent
**getPosFromMouseEvent**(`event`, `addScale?`): `PositionSchema`
获取鼠标在 Playground 的位置
#### Parameters
| Name | Type |
| :------ | :------ |
| `event` | `Object` |
| `event.clientX` | `number` |
| `event.clientY` | `number` |
| `addScale?` | `boolean` |
#### Returns
`PositionSchema`
#### Inherited from
Layer.getPosFromMouseEvent
___
### isEnabled
**isEnabled**(): `boolean`
#### Returns
`boolean`
___
### onBlur
`Optional` **onBlur**(): `void`
playground blur 时候触发
#### Returns
`void`
#### Inherited from
Layer.onBlur
___
### onFocus
`Optional` **onFocus**(): `void`
playground focus 时候触发
#### Returns
`void`
#### Inherited from
Layer.onFocus
___
### onReadonlyOrDisabledChange
`Optional` **onReadonlyOrDisabledChange**(`state`): `void`
readonly 或 disable 状态变化
#### Parameters
| Name | Type |
| :------ | :------ |
| `state` | `Object` |
| `state.disabled` | `boolean` |
| `state.readonly` | `boolean` |
#### Returns
`void`
#### Inherited from
Layer.onReadonlyOrDisabledChange
___
### onReady
**onReady**(): `void`
#### Returns
`void`
#### Overrides
Layer.onReady
___
### onResize
`Optional` **onResize**(`size`): `void`
playground 大小变化时候会触发
#### Parameters
| Name | Type |
| :------ | :------ |
| `size` | `PipelineDimension` |
#### Returns
`void`
#### Inherited from
Layer.onResize
___
### onScroll
**onScroll**(): `void`
#### Returns
`void`
#### Overrides
Layer.onScroll
___
### onViewportChange
`Optional` **onViewportChange**(): `void`
viewport 更新触发
#### Returns
`void`
#### Inherited from
Layer.onViewportChange
___
### onZoom
**onZoom**(): `void`
#### Returns
`void`
#### Overrides
Layer.onZoom
___
### render
**render**(): `Element`
#### Returns
`Element`
#### Overrides
Layer.render
___
### renderCommandMenus
**renderCommandMenus**(): `Element`[]
渲染工具栏
#### Returns
`Element`[]
---
url: /auto-docs/renderer/classes/FlowDebugLayer.md
---
# Class: FlowDebugLayer
调试用，会绘出所有节点的边界
## Hierarchy
- `Layer`
↳ **`FlowDebugLayer`**
## Table of contents
### Constructors
- [constructor](./FlowDebugLayer.md#constructor)
### Properties
- [\_transforms](./FlowDebugLayer.md#_transforms)
- [boundsNodes](./FlowDebugLayer.md#boundsnodes)
- [config](./FlowDebugLayer.md#config)
- [context](./FlowDebugLayer.md#context)
- [document](./FlowDebugLayer.md#document)
- [documentTransformer](./FlowDebugLayer.md#documenttransformer)
- [domCache](./FlowDebugLayer.md#domcache)
- [entityManager](./FlowDebugLayer.md#entitymanager)
- [filterKey](./FlowDebugLayer.md#filterkey)
- [getOtherLayer](./FlowDebugLayer.md#getotherlayer)
- [isFocused](./FlowDebugLayer.md#isfocused)
- [listenGlobalEvent](./FlowDebugLayer.md#listenglobalevent)
- [listenPlaygroundEvent](./FlowDebugLayer.md#listenplaygroundevent)
- [node](./FlowDebugLayer.md#node)
- [observeManager](./FlowDebugLayer.md#observemanager)
- [options](./FlowDebugLayer.md#options)
- [pipelineNode](./FlowDebugLayer.md#pipelinenode)
- [playgroundNode](./FlowDebugLayer.md#playgroundnode)
- [pointsNodes](./FlowDebugLayer.md#pointsnodes)
- [reloadEntities](./FlowDebugLayer.md#reloadentities)
- [renderWithReactMemo](./FlowDebugLayer.md#renderwithreactmemo)
- [versionNodes](./FlowDebugLayer.md#versionnodes)
- [viewport](./FlowDebugLayer.md#viewport)
### Accessors
- [transforms](./FlowDebugLayer.md#transforms)
### Methods
- [autorun](./FlowDebugLayer.md#autorun)
- [createBounds](./FlowDebugLayer.md#createbounds)
- [createDOMCache](./FlowDebugLayer.md#createdomcache)
- [dispose](./FlowDebugLayer.md#dispose)
- [getPosFromMouseEvent](./FlowDebugLayer.md#getposfrommouseevent)
- [onBlur](./FlowDebugLayer.md#onblur)
- [onFocus](./FlowDebugLayer.md#onfocus)
- [onReadonlyOrDisabledChange](./FlowDebugLayer.md#onreadonlyordisabledchange)
- [onReady](./FlowDebugLayer.md#onready)
- [onResize](./FlowDebugLayer.md#onresize)
- [onScroll](./FlowDebugLayer.md#onscroll)
- [onViewportChange](./FlowDebugLayer.md#onviewportchange)
- [onZoom](./FlowDebugLayer.md#onzoom)
- [render](./FlowDebugLayer.md#render)
- [renderScrollViewportBounds](./FlowDebugLayer.md#renderscrollviewportbounds)
## Constructors
### constructor
**new FlowDebugLayer**()
#### Inherited from
Layer.constructor
## Properties
### \_transforms
**\_transforms**: `FlowNodeTransformData`[]
___
### boundsNodes
**boundsNodes**: `HTMLDivElement`
___
### config
**config**: `PlaygroundConfigEntity`
全局画布配置
#### Inherited from
Layer.config
___
### context
`Readonly` **context**: `any`
#### Inherited from
Layer.context
___
### document
`Readonly` **document**: `FlowDocument`\<`FlowDocumentJSON`\>
___
### documentTransformer
`Readonly` **documentTransformer**: `FlowDocumentTransformerEntity`
___
### domCache
**domCache**: `WeakMap`\<`FlowNodeTransformData`, \{ `bbox`: `HTMLDivElement` ; `color`: `string` ; `input`: `HTMLDivElement` ; `output`: `HTMLDivElement` ; `version`: `HTMLDivElement` }\>
___
### entityManager
`Readonly` **entityManager**: `EntityManager`
实体管理器
#### Inherited from
Layer.entityManager
___
### filterKey
**filterKey**: `string`
?debug=xxxx, 则返回 xxxx
___
### getOtherLayer
**getOtherLayer**: \(`layerRegistry`: `LayerRegistry`\<`T`\>) => `undefined` \| `T`
#### Type declaration
\<`T`\>(`layerRegistry`): `undefined` \| `T`
可以用于获取别的 layer
##### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `Layer`\<`any`, `any`, `T`\> |
##### Parameters
| Name | Type |
| :------ | :------ |
| `layerRegistry` | `LayerRegistry`\<`T`\> |
##### Returns
`undefined` \| `T`
#### Inherited from
Layer.getOtherLayer
___
### isFocused
`Readonly` **isFocused**: `boolean`
playground 是否 focused
#### Inherited from
Layer.isFocused
___
### listenGlobalEvent
**listenGlobalEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 document 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
#### Inherited from
Layer.listenGlobalEvent
___
### listenPlaygroundEvent
**listenPlaygroundEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 playground 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
#### Inherited from
Layer.listenPlaygroundEvent
___
### node
**node**: `HTMLElement`
#### Overrides
Layer.node
___
### observeManager
**observeManager**: `PipelineEntities`
当前 layer 的所有监听的实体数据
#### Inherited from
Layer.observeManager
___
### options
**options**: `any`
layer 的配置, 由 registerLayer(Layer, LayerOptions) 传入
#### Inherited from
Layer.options
___
### pipelineNode
**pipelineNode**: `HTMLElement`
父节点
#### Inherited from
Layer.pipelineNode
___
### playgroundNode
**playgroundNode**: `HTMLElement`
画布根节点
#### Inherited from
Layer.playgroundNode
___
### pointsNodes
**pointsNodes**: `HTMLDivElement`
___
### reloadEntities
**reloadEntities**: () => `boolean`
#### Type declaration
(): `boolean`
加载 layer 注册的实体数据，内部使用，不需要手动触发
##### Returns
`boolean`
数据是否变化
#### Inherited from
Layer.reloadEntities
___
### renderWithReactMemo
**renderWithReactMemo**: `boolean`
默认在渲染时候都会启用 react memo 进行隔离，这种情况就需要数据驱动更新
#### Inherited from
Layer.renderWithReactMemo
___
### versionNodes
**versionNodes**: `HTMLDivElement`
___
### viewport
**viewport**: `HTMLDivElement`
## Accessors
### transforms
`get` **transforms**(): `FlowNodeTransformData`[]
#### Returns
`FlowNodeTransformData`[]
## Methods
### autorun
**autorun**(): `void`
#### Returns
`void`
#### Overrides
Layer.autorun
___
### createBounds
**createBounds**(`transform`, `color`, `depth`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `transform` | `FlowNodeTransformData` |
| `color` | `string` |
| `depth` | `number` |
#### Returns
`void`
___
### createDOMCache
**createDOMCache**\<`T`\>(`className`, `children?`): `CacheManager`\<`T`, `CacheOriginItem`\>
创建 dom 缓冲池
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `DOMCache`\<`T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `className` | `string` \| () => `HTMLElement` |
| `children?` | `string` |
#### Returns
`CacheManager`\<`T`, `CacheOriginItem`\>
#### Inherited from
Layer.createDOMCache
___
### dispose
**dispose**(): `void`
销毁
#### Returns
`void`
#### Inherited from
Layer.dispose
___
### getPosFromMouseEvent
**getPosFromMouseEvent**(`event`, `addScale?`): `PositionSchema`
获取鼠标在 Playground 的位置
#### Parameters
| Name | Type |
| :------ | :------ |
| `event` | `Object` |
| `event.clientX` | `number` |
| `event.clientY` | `number` |
| `addScale?` | `boolean` |
#### Returns
`PositionSchema`
#### Inherited from
Layer.getPosFromMouseEvent
___
### onBlur
`Optional` **onBlur**(): `void`
playground blur 时候触发
#### Returns
`void`
#### Inherited from
Layer.onBlur
___
### onFocus
`Optional` **onFocus**(): `void`
playground focus 时候触发
#### Returns
`void`
#### Inherited from
Layer.onFocus
___
### onReadonlyOrDisabledChange
`Optional` **onReadonlyOrDisabledChange**(`state`): `void`
readonly 或 disable 状态变化
#### Parameters
| Name | Type |
| :------ | :------ |
| `state` | `Object` |
| `state.disabled` | `boolean` |
| `state.readonly` | `boolean` |
#### Returns
`void`
#### Inherited from
Layer.onReadonlyOrDisabledChange
___
### onReady
**onReady**(): `void`
#### Returns
`void`
#### Overrides
Layer.onReady
___
### onResize
**onResize**(): `void`
#### Returns
`void`
#### Overrides
Layer.onResize
___
### onScroll
**onScroll**(): `void`
#### Returns
`void`
#### Overrides
Layer.onScroll
___
### onViewportChange
`Optional` **onViewportChange**(): `void`
viewport 更新触发
#### Returns
`void`
#### Inherited from
Layer.onViewportChange
___
### onZoom
**onZoom**(`scale`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `scale` | `number` |
#### Returns
`void`
#### Overrides
Layer.onZoom
___
### render
`Optional` **render**(): `Element`
绘制 react
#### Returns
`Element`
#### Inherited from
Layer.render
___
### renderScrollViewportBounds
**renderScrollViewportBounds**(): `void`
显示 viewport 可滚动区域
#### Returns
`void`
---
url: /auto-docs/renderer/classes/FlowDragEntity.md
---
# Class: FlowDragEntity
## Hierarchy
- `ConfigEntity`\<`FlowDragEntityConfig`\>
↳ **`FlowDragEntity`**
## Table of contents
### Constructors
- [constructor](./FlowDragEntity.md#constructor)
### Properties
- [\_\_opts\_type\_\_](./FlowDragEntity.md#__opts_type__)
- [entityManager](./FlowDragEntity.md#entitymanager)
- [onDataChange](./FlowDragEntity.md#ondatachange)
- [onEntityChange](./FlowDragEntity.md#onentitychange)
- [preDispose](./FlowDragEntity.md#predispose)
- [toDispose](./FlowDragEntity.md#todispose)
- [type](./FlowDragEntity.md#type)
### Accessors
- [config](./FlowDragEntity.md#config)
- [context](./FlowDragEntity.md#context)
- [disposed](./FlowDragEntity.md#disposed)
- [hasScroll](./FlowDragEntity.md#hasscroll)
- [id](./FlowDragEntity.md#id)
- [onDispose](./FlowDragEntity.md#ondispose)
- [savedInManager](./FlowDragEntity.md#savedinmanager)
- [type](./FlowDragEntity.md#type-1)
- [version](./FlowDragEntity.md#version)
### Methods
- [addData](./FlowDragEntity.md#adddata)
- [addInitializeData](./FlowDragEntity.md#addinitializedata)
- [checkChanged](./FlowDragEntity.md#checkchanged)
- [dispose](./FlowDragEntity.md#dispose)
- [fromJSON](./FlowDragEntity.md#fromjson)
- [getData](./FlowDragEntity.md#getdata)
- [getDefaultConfig](./FlowDragEntity.md#getdefaultconfig)
- [getDefaultDataRegistries](./FlowDragEntity.md#getdefaultdataregistries)
- [getService](./FlowDragEntity.md#getservice)
- [hasData](./FlowDragEntity.md#hasdata)
- [isBranchCollision](./FlowDragEntity.md#isbranchcollision)
- [isCollision](./FlowDragEntity.md#iscollision)
- [isNodeCollision](./FlowDragEntity.md#isnodecollision)
- [onConfigChanged](./FlowDragEntity.md#onconfigchanged)
- [removeData](./FlowDragEntity.md#removedata)
- [reset](./FlowDragEntity.md#reset)
- [scrollDirection](./FlowDragEntity.md#scrolldirection)
- [stopAllScroll](./FlowDragEntity.md#stopallscroll)
- [toJSON](./FlowDragEntity.md#tojson)
- [updateConfig](./FlowDragEntity.md#updateconfig)
- [updateData](./FlowDragEntity.md#updatedata)
## Constructors
### constructor
**new FlowDragEntity**(`conf`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `conf` | `any` |
#### Overrides
ConfigEntity\<FlowDragEntityConfig\>.constructor
## Properties
### \_\_opts\_type\_\_
**\_\_opts\_type\_\_**: `EntityOpts`
#### Inherited from
ConfigEntity.\_\_opts\_type\_\_
___
### entityManager
`Readonly` **entityManager**: `EntityManager`
全局的entity管理器
#### Inherited from
ConfigEntity.entityManager
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<`EntityDataChangedEvent`\<`Entity`\<`EntityOpts`\>\>\>
数据更改事件
#### Inherited from
ConfigEntity.onDataChange
___
### onEntityChange
`Readonly` **onEntityChange**: `Event`\<`Entity`\<`EntityOpts`\>\>
修改会触发
#### Inherited from
ConfigEntity.onEntityChange
___
### preDispose
`Readonly` **preDispose**: `DisposableCollection`
销毁前事件管理
#### Inherited from
ConfigEntity.preDispose
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
销毁事件管理
#### Inherited from
ConfigEntity.toDispose
___
### type
`Static` **type**: `string` = `'FlowDragEntity'`
#### Overrides
ConfigEntity.type
## Accessors
### config
`get` **config**(): `P`
#### Returns
`P`
#### Inherited from
ConfigEntity.config
___
### context
`get` **context**(): `any`
#### Returns
`any`
#### Inherited from
ConfigEntity.context
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
ConfigEntity.disposed
___
### hasScroll
`get` **hasScroll**(): `boolean`
#### Returns
`boolean`
___
### id
`get` **id**(): `string`
实体 id
#### Returns
`string`
#### Inherited from
ConfigEntity.id
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
销毁事件
#### Returns
`Event`\<`void`\>
#### Inherited from
ConfigEntity.onDispose
___
### savedInManager
`get` **savedInManager**(): `boolean`
是否存到全局 manager，默认 true
#### Returns
`boolean`
#### Inherited from
ConfigEntity.savedInManager
___
### type
`get` **type**(): `string`
实体类型
#### Returns
`string`
#### Inherited from
ConfigEntity.type
___
### version
`get` **version**(): `number`
实体的版本
#### Returns
`number`
#### Inherited from
ConfigEntity.version
## Methods
### addData
**addData**\<`D`\>(`Registry`, `defaultProps?`): `D`
添加数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\> |
| `defaultProps?` | `EntityDataProps`\<`D`\> |
#### Returns
`D`
#### Inherited from
ConfigEntity.addData
___
### addInitializeData
**addInitializeData**(`datas`, `dataConfig?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `datas` | `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[] |
| `dataConfig?` | `any` |
#### Returns
`void`
#### Inherited from
ConfigEntity.addInitializeData
___
### checkChanged
**checkChanged**(`oldData`, `newData`): `boolean`
判断 config 数据是否变化
#### Parameters
| Name | Type |
| :------ | :------ |
| `oldData` | `FlowDragEntityConfig` |
| `newData` | `Partial`\<`FlowDragEntityConfig`\> |
#### Returns
`boolean`
#### Inherited from
ConfigEntity.checkChanged
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Overrides
ConfigEntity.dispose
___
### fromJSON
**fromJSON**(`data?`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data?` | `any` |
#### Returns
`void`
#### Inherited from
ConfigEntity.fromJSON
___
### getData
**getData**\<`D`\>(`Registry`): `D`
获取 data 数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`D`\> |
#### Returns
`D`
#### Inherited from
ConfigEntity.getData
___
### getDefaultConfig
**getDefaultConfig**(): `FlowDragEntityConfig`
#### Returns
`FlowDragEntityConfig`
#### Inherited from
ConfigEntity.getDefaultConfig
___
### getDefaultDataRegistries
**getDefaultDataRegistries**(): `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[]
默认初始化的 Data
#### Returns
`EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[]
#### Inherited from
ConfigEntity.getDefaultDataRegistries
___
### getService
**getService**\<`T`\>(`identifier`): `T`
获取 IOC 服务
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `identifier` | `ServiceIdentifier`\<`T`\> |
#### Returns
`T`
#### Inherited from
ConfigEntity.getService
___
### hasData
**hasData**(`Registry`): `boolean`
是否有指定数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\> |
#### Returns
`boolean`
#### Inherited from
ConfigEntity.hasData
___
### isBranchCollision
**isBranchCollision**(`transition`, `rect`, `scale`): [`CollisionRetType`](../interfaces/CollisionRetType.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `transition` | `FlowNodeTransitionData` |
| `rect` | `Rectangle` |
| `scale` | `number` |
#### Returns
[`CollisionRetType`](../interfaces/CollisionRetType.md)
___
### isCollision
**isCollision**(`transition`, `rect`, `isBranch`): [`CollisionRetType`](../interfaces/CollisionRetType.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `transition` | `FlowNodeTransitionData` |
| `rect` | `Rectangle` |
| `isBranch` | `boolean` |
#### Returns
[`CollisionRetType`](../interfaces/CollisionRetType.md)
___
### isNodeCollision
**isNodeCollision**(`transition`, `rect`, `scale`): [`CollisionRetType`](../interfaces/CollisionRetType.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `transition` | `FlowNodeTransitionData` |
| `rect` | `Rectangle` |
| `scale` | `number` |
#### Returns
[`CollisionRetType`](../interfaces/CollisionRetType.md)
___
### onConfigChanged
**onConfigChanged**(`fn`): `Disposable`
#### Parameters
| Name | Type |
| :------ | :------ |
| `fn` | (`data`: `FlowDragEntityConfig`) => `void` |
#### Returns
`Disposable`
#### Inherited from
ConfigEntity.onConfigChanged
___
### removeData
**removeData**\<`D`\>(`Registry`): `void`
删除数据，初始化状态注入的数据无法被删除
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`D`\> |
#### Returns
`void`
#### Inherited from
ConfigEntity.removeData
___
### reset
**reset**(): `void`
重制为初始化状态
#### Returns
`void`
#### Inherited from
ConfigEntity.reset
___
### scrollDirection
**scrollDirection**(`e`, `x`, `y`): `undefined` \| `ScrollDirection`
#### Parameters
| Name | Type |
| :------ | :------ |
| `e` | `MouseEvent` |
| `x` | `number` |
| `y` | `number` |
#### Returns
`undefined` \| `ScrollDirection`
___
### stopAllScroll
**stopAllScroll**(): `void`
#### Returns
`void`
___
### toJSON
**toJSON**(): `any`
存储数据，用于持久化存储
#### Returns
`any`
#### Inherited from
ConfigEntity.toJSON
___
### updateConfig
**updateConfig**(`props`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | `Partial`\<`FlowDragEntityConfig`\> |
#### Returns
`void`
#### Inherited from
ConfigEntity.updateConfig
___
### updateData
**updateData**\<`D`\>(`Registry`, `props`): `void`
更新实体的数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`D`\> |
| `props` | `EntityDataProps`\<`D`\> |
#### Returns
`void`
#### Inherited from
ConfigEntity.updateData
---
url: /auto-docs/renderer/classes/FlowDragLayer.md
---
# Class: FlowDragLayer
监听节点的激活状态
## Hierarchy
- `Layer`\<[`FlowDragOptions`](../interfaces/FlowDragOptions.md)\>
↳ **`FlowDragLayer`**
## Table of contents
### Constructors
- [constructor](./FlowDragLayer.md#constructor)
### Properties
- [config](./FlowDragLayer.md#config)
- [containerRef](./FlowDragLayer.md#containerref)
- [context](./FlowDragLayer.md#context)
- [document](./FlowDragLayer.md#document)
- [dragOffset](./FlowDragLayer.md#dragoffset)
- [draggingNodeMask](./FlowDragLayer.md#draggingnodemask)
- [entityManager](./FlowDragLayer.md#entitymanager)
- [flowDragService](./FlowDragLayer.md#flowdragservice)
- [getOtherLayer](./FlowDragLayer.md#getotherlayer)
- [isFocused](./FlowDragLayer.md#isfocused)
- [listenGlobalEvent](./FlowDragLayer.md#listenglobalevent)
- [listenPlaygroundEvent](./FlowDragLayer.md#listenplaygroundevent)
- [node](./FlowDragLayer.md#node)
- [observeManager](./FlowDragLayer.md#observemanager)
- [options](./FlowDragLayer.md#options)
- [pipelineNode](./FlowDragLayer.md#pipelinenode)
- [playgroundNode](./FlowDragLayer.md#playgroundnode)
- [reloadEntities](./FlowDragLayer.md#reloadentities)
- [renderWithReactMemo](./FlowDragLayer.md#renderwithreactmemo)
- [rendererRegistry](./FlowDragLayer.md#rendererregistry)
- [transforms](./FlowDragLayer.md#transforms)
### Accessors
- [dragEntities](./FlowDragLayer.md#dragentities)
- [dragStartEntity](./FlowDragLayer.md#dragstartentity)
- [transitions](./FlowDragLayer.md#transitions)
### Methods
- [autorun](./FlowDragLayer.md#autorun)
- [createDOMCache](./FlowDragLayer.md#createdomcache)
- [dispose](./FlowDragLayer.md#dispose)
- [dragEnable](./FlowDragLayer.md#dragenable)
- [getPosFromMouseEvent](./FlowDragLayer.md#getposfrommouseevent)
- [handleMouseMove](./FlowDragLayer.md#handlemousemove)
- [handleMouseUp](./FlowDragLayer.md#handlemouseup)
- [onBlur](./FlowDragLayer.md#onblur)
- [onFocus](./FlowDragLayer.md#onfocus)
- [onReadonlyOrDisabledChange](./FlowDragLayer.md#onreadonlyordisabledchange)
- [onReady](./FlowDragLayer.md#onready)
- [onResize](./FlowDragLayer.md#onresize)
- [onScroll](./FlowDragLayer.md#onscroll)
- [onViewportChange](./FlowDragLayer.md#onviewportchange)
- [onZoom](./FlowDragLayer.md#onzoom)
- [render](./FlowDragLayer.md#render)
- [setDraggingStatus](./FlowDragLayer.md#setdraggingstatus)
- [startDrag](./FlowDragLayer.md#startdrag)
## Constructors
### constructor
**new FlowDragLayer**()
#### Inherited from
Layer\.constructor
## Properties
### config
**config**: `PlaygroundConfigEntity`
全局画布配置
#### Inherited from
Layer.config
___
### containerRef
**containerRef**: `RefObject`\<`HTMLDivElement`\>
___
### context
`Readonly` **context**: `any`
#### Inherited from
Layer.context
___
### document
`Readonly` **document**: `FlowDocument`\<`FlowDocumentJSON`\>
___
### dragOffset
**dragOffset**: `Object`
#### Type declaration
| Name | Type |
| :------ | :------ |
| `x` | `number` |
| `y` | `number` |
___
### draggingNodeMask
**draggingNodeMask**: `HTMLDivElement`
___
### entityManager
`Readonly` **entityManager**: `EntityManager`
实体管理器
#### Inherited from
Layer.entityManager
___
### flowDragService
`Readonly` **flowDragService**: `FlowDragService`
___
### getOtherLayer
**getOtherLayer**: \(`layerRegistry`: `LayerRegistry`\<`T`\>) => `undefined` \| `T`
#### Type declaration
\<`T`\>(`layerRegistry`): `undefined` \| `T`
可以用于获取别的 layer
##### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `Layer`\<`any`, `any`, `T`\> |
##### Parameters
| Name | Type |
| :------ | :------ |
| `layerRegistry` | `LayerRegistry`\<`T`\> |
##### Returns
`undefined` \| `T`
#### Inherited from
Layer.getOtherLayer
___
### isFocused
`Readonly` **isFocused**: `boolean`
playground 是否 focused
#### Inherited from
Layer.isFocused
___
### listenGlobalEvent
**listenGlobalEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 document 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
#### Inherited from
Layer.listenGlobalEvent
___
### listenPlaygroundEvent
**listenPlaygroundEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 playground 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
#### Inherited from
Layer.listenPlaygroundEvent
___
### node
**node**: `HTMLElement`
layer 可能存在 dom 也可能没有，如果有，则会加入到 pipeline 的 dom 节点上
#### Inherited from
Layer.node
___
### observeManager
**observeManager**: `PipelineEntities`
当前 layer 的所有监听的实体数据
#### Inherited from
Layer.observeManager
___
### options
**options**: [`FlowDragOptions`](../interfaces/FlowDragOptions.md)
layer 的配置, 由 registerLayer(Layer, LayerOptions) 传入
#### Inherited from
Layer.options
___
### pipelineNode
**pipelineNode**: `HTMLElement`
父节点
#### Inherited from
Layer.pipelineNode
___
### playgroundNode
**playgroundNode**: `HTMLElement`
画布根节点
#### Inherited from
Layer.playgroundNode
___
### reloadEntities
**reloadEntities**: () => `boolean`
#### Type declaration
(): `boolean`
加载 layer 注册的实体数据，内部使用，不需要手动触发
##### Returns
`boolean`
数据是否变化
#### Inherited from
Layer.reloadEntities
___
### renderWithReactMemo
**renderWithReactMemo**: `boolean`
默认在渲染时候都会启用 react memo 进行隔离，这种情况就需要数据驱动更新
#### Inherited from
Layer.renderWithReactMemo
___
### rendererRegistry
`Readonly` **rendererRegistry**: [`FlowRendererRegistry`](./FlowRendererRegistry.md)
___
### transforms
**transforms**: `FlowNodeTransformData`[]
## Accessors
### dragEntities
`get` **dragEntities**(): `FlowNodeEntity`[]
#### Returns
`FlowNodeEntity`[]
`set` **dragEntities**(`entities`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `entities` | `FlowNodeEntity`[] |
#### Returns
`void`
___
### dragStartEntity
`get` **dragStartEntity**(): `undefined` \| `FlowNodeEntity`
#### Returns
`undefined` \| `FlowNodeEntity`
`set` **dragStartEntity**(`entity`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `entity` | `undefined` \| `FlowNodeEntity` |
#### Returns
`void`
___
### transitions
`get` **transitions**(): `FlowNodeTransitionData`[]
#### Returns
`FlowNodeTransitionData`[]
## Methods
### autorun
`Optional` **autorun**(): `void`
自动触发更新，在不需要 react 的时候用这个方法
#### Returns
`void`
#### Inherited from
Layer.autorun
___
### createDOMCache
**createDOMCache**\<`T`\>(`className`, `children?`): `CacheManager`\<`T`, `CacheOriginItem`\>
创建 dom 缓冲池
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `DOMCache`\<`T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `className` | `string` \| () => `HTMLElement` |
| `children?` | `string` |
#### Returns
`CacheManager`\<`T`, `CacheOriginItem`\>
#### Inherited from
Layer.createDOMCache
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Overrides
Layer.dispose
___
### dragEnable
**dragEnable**(`e`): `boolean`
#### Parameters
| Name | Type |
| :------ | :------ |
| `e` | `MouseEvent` |
#### Returns
`boolean`
___
### getPosFromMouseEvent
**getPosFromMouseEvent**(`event`, `addScale?`): `PositionSchema`
获取鼠标在 Playground 的位置
#### Parameters
| Name | Type |
| :------ | :------ |
| `event` | `Object` |
| `event.clientX` | `number` |
| `event.clientY` | `number` |
| `addScale?` | `boolean` |
#### Returns
`PositionSchema`
#### Inherited from
Layer.getPosFromMouseEvent
___
### handleMouseMove
**handleMouseMove**(`event`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `event` | `MouseEvent` |
#### Returns
`void`
___
### handleMouseUp
**handleMouseUp**(): `Promise`\<`void`\>
#### Returns
`Promise`\<`void`\>
___
### onBlur
`Optional` **onBlur**(): `void`
playground blur 时候触发
#### Returns
`void`
#### Inherited from
Layer.onBlur
___
### onFocus
`Optional` **onFocus**(): `void`
playground focus 时候触发
#### Returns
`void`
#### Inherited from
Layer.onFocus
___
### onReadonlyOrDisabledChange
`Optional` **onReadonlyOrDisabledChange**(`state`): `void`
readonly 或 disable 状态变化
#### Parameters
| Name | Type |
| :------ | :------ |
| `state` | `Object` |
| `state.disabled` | `boolean` |
| `state.readonly` | `boolean` |
#### Returns
`void`
#### Inherited from
Layer.onReadonlyOrDisabledChange
___
### onReady
**onReady**(): `void`
#### Returns
`void`
#### Overrides
Layer.onReady
___
### onResize
`Optional` **onResize**(`size`): `void`
playground 大小变化时候会触发
#### Parameters
| Name | Type |
| :------ | :------ |
| `size` | `PipelineDimension` |
#### Returns
`void`
#### Inherited from
Layer.onResize
___
### onScroll
`Optional` **onScroll**(`scroll`): `void`
监听滚动
#### Parameters
| Name | Type |
| :------ | :------ |
| `scroll` | `Object` |
| `scroll.scrollX` | `number` |
| `scroll.scrollY` | `number` |
#### Returns
`void`
#### Inherited from
Layer.onScroll
___
### onViewportChange
`Optional` **onViewportChange**(): `void`
viewport 更新触发
#### Returns
`void`
#### Inherited from
Layer.onViewportChange
___
### onZoom
`Optional` **onZoom**(`zoom`): `void`
监听缩放
#### Parameters
| Name | Type |
| :------ | :------ |
| `zoom` | `number` |
#### Returns
`void`
#### Inherited from
Layer.onZoom
___
### render
**render**(): `ReactPortal`
#### Returns
`ReactPortal`
#### Overrides
Layer.render
___
### setDraggingStatus
**setDraggingStatus**(`status`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `status` | `boolean` |
#### Returns
`void`
___
### startDrag
**startDrag**(`e`, `«destructured»`, `options?`): `Promise`\<`void`\>
开始拖拽事件
#### Parameters
| Name | Type |
| :------ | :------ |
| `e` | `Object` |
| `e.clientX` | `number` |
| `e.clientY` | `number` |
| `«destructured»` | `StartDragProps` |
| `options?` | `Object` |
| `options.disableDragScroll?` | `boolean` |
| `options.dragOffsetX?` | `number` |
| `options.dragOffsetY?` | `number` |
#### Returns
`Promise`\<`void`\>
---
url: /auto-docs/renderer/classes/FlowLabelsLayer.md
---
# Class: FlowLabelsLayer
## Hierarchy
- `Layer`
↳ **`FlowLabelsLayer`**
## Table of contents
### Constructors
- [constructor](./FlowLabelsLayer.md#constructor)
### Properties
- [\_transitions](./FlowLabelsLayer.md#_transitions)
- [config](./FlowLabelsLayer.md#config)
- [context](./FlowLabelsLayer.md#context)
- [document](./FlowLabelsLayer.md#document)
- [documentTransformer](./FlowLabelsLayer.md#documenttransformer)
- [entityManager](./FlowLabelsLayer.md#entitymanager)
- [flowRenderState](./FlowLabelsLayer.md#flowrenderstate)
- [getOtherLayer](./FlowLabelsLayer.md#getotherlayer)
- [isFocused](./FlowLabelsLayer.md#isfocused)
- [listenGlobalEvent](./FlowLabelsLayer.md#listenglobalevent)
- [listenPlaygroundEvent](./FlowLabelsLayer.md#listenplaygroundevent)
- [node](./FlowLabelsLayer.md#node)
- [observeManager](./FlowLabelsLayer.md#observemanager)
- [onViewportChange](./FlowLabelsLayer.md#onviewportchange)
- [options](./FlowLabelsLayer.md#options)
- [pipelineNode](./FlowLabelsLayer.md#pipelinenode)
- [playgroundNode](./FlowLabelsLayer.md#playgroundnode)
- [reloadEntities](./FlowLabelsLayer.md#reloadentities)
- [renderWithReactMemo](./FlowLabelsLayer.md#renderwithreactmemo)
- [rendererRegistry](./FlowLabelsLayer.md#rendererregistry)
### Accessors
- [transitions](./FlowLabelsLayer.md#transitions)
### Methods
- [autorun](./FlowLabelsLayer.md#autorun)
- [createDOMCache](./FlowLabelsLayer.md#createdomcache)
- [dispose](./FlowLabelsLayer.md#dispose)
- [getPosFromMouseEvent](./FlowLabelsLayer.md#getposfrommouseevent)
- [onBlur](./FlowLabelsLayer.md#onblur)
- [onFocus](./FlowLabelsLayer.md#onfocus)
- [onReadonlyOrDisabledChange](./FlowLabelsLayer.md#onreadonlyordisabledchange)
- [onReady](./FlowLabelsLayer.md#onready)
- [onResize](./FlowLabelsLayer.md#onresize)
- [onScroll](./FlowLabelsLayer.md#onscroll)
- [onZoom](./FlowLabelsLayer.md#onzoom)
- [render](./FlowLabelsLayer.md#render)
## Constructors
### constructor
**new FlowLabelsLayer**()
#### Inherited from
Layer.constructor
## Properties
### \_transitions
**\_transitions**: `FlowNodeTransitionData`[]
监听 transition 变化
___
### config
**config**: `PlaygroundConfigEntity`
全局画布配置
#### Inherited from
Layer.config
___
### context
`Readonly` **context**: `any`
#### Inherited from
Layer.context
___
### document
`Readonly` **document**: `FlowDocument`\<`FlowDocumentJSON`\>
___
### documentTransformer
`Readonly` **documentTransformer**: `FlowDocumentTransformerEntity`
___
### entityManager
`Readonly` **entityManager**: `EntityManager`
实体管理器
#### Inherited from
Layer.entityManager
___
### flowRenderState
`Readonly` **flowRenderState**: `FlowRendererStateEntity`
___
### getOtherLayer
**getOtherLayer**: \(`layerRegistry`: `LayerRegistry`\<`T`\>) => `undefined` \| `T`
#### Type declaration
\<`T`\>(`layerRegistry`): `undefined` \| `T`
可以用于获取别的 layer
##### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `Layer`\<`any`, `any`, `T`\> |
##### Parameters
| Name | Type |
| :------ | :------ |
| `layerRegistry` | `LayerRegistry`\<`T`\> |
##### Returns
`undefined` \| `T`
#### Inherited from
Layer.getOtherLayer
___
### isFocused
`Readonly` **isFocused**: `boolean`
playground 是否 focused
#### Inherited from
Layer.isFocused
___
### listenGlobalEvent
**listenGlobalEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 document 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
#### Inherited from
Layer.listenGlobalEvent
___
### listenPlaygroundEvent
**listenPlaygroundEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 playground 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
#### Inherited from
Layer.listenPlaygroundEvent
___
### node
**node**: `HTMLDivElement`
#### Overrides
Layer.node
___
### observeManager
**observeManager**: `PipelineEntities`
当前 layer 的所有监听的实体数据
#### Inherited from
Layer.observeManager
___
### onViewportChange
**onViewportChange**: `DebouncedFunc`\<(...`args`: `any`) => `any`\>
可视区域变化
#### Overrides
Layer.onViewportChange
___
### options
**options**: `any`
layer 的配置, 由 registerLayer(Layer, LayerOptions) 传入
#### Inherited from
Layer.options
___
### pipelineNode
**pipelineNode**: `HTMLElement`
父节点
#### Inherited from
Layer.pipelineNode
___
### playgroundNode
**playgroundNode**: `HTMLElement`
画布根节点
#### Inherited from
Layer.playgroundNode
___
### reloadEntities
**reloadEntities**: () => `boolean`
#### Type declaration
(): `boolean`
加载 layer 注册的实体数据，内部使用，不需要手动触发
##### Returns
`boolean`
数据是否变化
#### Inherited from
Layer.reloadEntities
___
### renderWithReactMemo
**renderWithReactMemo**: `boolean`
默认在渲染时候都会启用 react memo 进行隔离，这种情况就需要数据驱动更新
#### Inherited from
Layer.renderWithReactMemo
___
### rendererRegistry
`Readonly` **rendererRegistry**: [`FlowRendererRegistry`](./FlowRendererRegistry.md)
## Accessors
### transitions
`get` **transitions**(): `FlowNodeTransitionData`[]
#### Returns
`FlowNodeTransitionData`[]
## Methods
### autorun
`Optional` **autorun**(): `void`
自动触发更新，在不需要 react 的时候用这个方法
#### Returns
`void`
#### Inherited from
Layer.autorun
___
### createDOMCache
**createDOMCache**\<`T`\>(`className`, `children?`): `CacheManager`\<`T`, `CacheOriginItem`\>
创建 dom 缓冲池
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `DOMCache`\<`T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `className` | `string` \| () => `HTMLElement` |
| `children?` | `string` |
#### Returns
`CacheManager`\<`T`, `CacheOriginItem`\>
#### Inherited from
Layer.createDOMCache
___
### dispose
**dispose**(): `void`
销毁
#### Returns
`void`
#### Inherited from
Layer.dispose
___
### getPosFromMouseEvent
**getPosFromMouseEvent**(`event`, `addScale?`): `PositionSchema`
获取鼠标在 Playground 的位置
#### Parameters
| Name | Type |
| :------ | :------ |
| `event` | `Object` |
| `event.clientX` | `number` |
| `event.clientY` | `number` |
| `addScale?` | `boolean` |
#### Returns
`PositionSchema`
#### Inherited from
Layer.getPosFromMouseEvent
___
### onBlur
`Optional` **onBlur**(): `void`
playground blur 时候触发
#### Returns
`void`
#### Inherited from
Layer.onBlur
___
### onFocus
`Optional` **onFocus**(): `void`
playground focus 时候触发
#### Returns
`void`
#### Inherited from
Layer.onFocus
___
### onReadonlyOrDisabledChange
**onReadonlyOrDisabledChange**(): `void`
监听readonly和 disabled 状态 并刷新layer, 并刷新
#### Returns
`void`
#### Overrides
Layer.onReadonlyOrDisabledChange
___
### onReady
**onReady**(): `void`
#### Returns
`void`
#### Overrides
Layer.onReady
___
### onResize
`Optional` **onResize**(`size`): `void`
playground 大小变化时候会触发
#### Parameters
| Name | Type |
| :------ | :------ |
| `size` | `PipelineDimension` |
#### Returns
`void`
#### Inherited from
Layer.onResize
___
### onScroll
`Optional` **onScroll**(`scroll`): `void`
监听滚动
#### Parameters
| Name | Type |
| :------ | :------ |
| `scroll` | `Object` |
| `scroll.scrollX` | `number` |
| `scroll.scrollY` | `number` |
#### Returns
`void`
#### Inherited from
Layer.onScroll
___
### onZoom
**onZoom**(`scale`): `void`
监听缩放，目前采用整体缩放
#### Parameters
| Name | Type |
| :------ | :------ |
| `scale` | `number` |
#### Returns
`void`
#### Overrides
Layer.onZoom
___
### render
**render**(): `Element`
#### Returns
`Element`
#### Overrides
Layer.render
---
url: /auto-docs/renderer/classes/FlowLinesLayer.md
---
# Class: FlowLinesLayer
## Hierarchy
- `Layer`
↳ **`FlowLinesLayer`**
## Table of contents
### Constructors
- [constructor](./FlowLinesLayer.md#constructor)
### Properties
- [\_transitions](./FlowLinesLayer.md#_transitions)
- [config](./FlowLinesLayer.md#config)
- [context](./FlowLinesLayer.md#context)
- [document](./FlowLinesLayer.md#document)
- [documentTransformer](./FlowLinesLayer.md#documenttransformer)
- [entityManager](./FlowLinesLayer.md#entitymanager)
- [flowRenderState](./FlowLinesLayer.md#flowrenderstate)
- [getOtherLayer](./FlowLinesLayer.md#getotherlayer)
- [isFocused](./FlowLinesLayer.md#isfocused)
- [listenGlobalEvent](./FlowLinesLayer.md#listenglobalevent)
- [listenPlaygroundEvent](./FlowLinesLayer.md#listenplaygroundevent)
- [node](./FlowLinesLayer.md#node)
- [observeManager](./FlowLinesLayer.md#observemanager)
- [onViewportChange](./FlowLinesLayer.md#onviewportchange)
- [options](./FlowLinesLayer.md#options)
- [pipelineNode](./FlowLinesLayer.md#pipelinenode)
- [playgroundNode](./FlowLinesLayer.md#playgroundnode)
- [reloadEntities](./FlowLinesLayer.md#reloadentities)
- [renderWithReactMemo](./FlowLinesLayer.md#renderwithreactmemo)
- [rendererRegistry](./FlowLinesLayer.md#rendererregistry)
### Accessors
- [transitions](./FlowLinesLayer.md#transitions)
- [viewBox](./FlowLinesLayer.md#viewbox)
### Methods
- [autorun](./FlowLinesLayer.md#autorun)
- [createDOMCache](./FlowLinesLayer.md#createdomcache)
- [dispose](./FlowLinesLayer.md#dispose)
- [getPosFromMouseEvent](./FlowLinesLayer.md#getposfrommouseevent)
- [onBlur](./FlowLinesLayer.md#onblur)
- [onFocus](./FlowLinesLayer.md#onfocus)
- [onReadonlyOrDisabledChange](./FlowLinesLayer.md#onreadonlyordisabledchange)
- [onReady](./FlowLinesLayer.md#onready)
- [onResize](./FlowLinesLayer.md#onresize)
- [onScroll](./FlowLinesLayer.md#onscroll)
- [onZoom](./FlowLinesLayer.md#onzoom)
- [render](./FlowLinesLayer.md#render)
## Constructors
### constructor
**new FlowLinesLayer**()
#### Inherited from
Layer.constructor
## Properties
### \_transitions
**\_transitions**: `FlowNodeTransitionData`[]
监听 transition 变化
___
### config
**config**: `PlaygroundConfigEntity`
全局画布配置
#### Inherited from
Layer.config
___
### context
`Readonly` **context**: `any`
#### Inherited from
Layer.context
___
### document
`Readonly` **document**: `FlowDocument`\<`FlowDocumentJSON`\>
___
### documentTransformer
`Readonly` **documentTransformer**: `FlowDocumentTransformerEntity`
___
### entityManager
`Readonly` **entityManager**: `EntityManager`
实体管理器
#### Inherited from
Layer.entityManager
___
### flowRenderState
`Readonly` **flowRenderState**: `FlowRendererStateEntity`
___
### getOtherLayer
**getOtherLayer**: \(`layerRegistry`: `LayerRegistry`\<`T`\>) => `undefined` \| `T`
#### Type declaration
\<`T`\>(`layerRegistry`): `undefined` \| `T`
可以用于获取别的 layer
##### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `Layer`\<`any`, `any`, `T`\> |
##### Parameters
| Name | Type |
| :------ | :------ |
| `layerRegistry` | `LayerRegistry`\<`T`\> |
##### Returns
`undefined` \| `T`
#### Inherited from
Layer.getOtherLayer
___
### isFocused
`Readonly` **isFocused**: `boolean`
playground 是否 focused
#### Inherited from
Layer.isFocused
___
### listenGlobalEvent
**listenGlobalEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 document 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
#### Inherited from
Layer.listenGlobalEvent
___
### listenPlaygroundEvent
**listenPlaygroundEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 playground 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
#### Inherited from
Layer.listenPlaygroundEvent
___
### node
**node**: `HTMLDivElement`
#### Overrides
Layer.node
___
### observeManager
**observeManager**: `PipelineEntities`
当前 layer 的所有监听的实体数据
#### Inherited from
Layer.observeManager
___
### onViewportChange
**onViewportChange**: `DebouncedFunc`\<(...`args`: `any`) => `any`\>
可视区域变化
#### Overrides
Layer.onViewportChange
___
### options
**options**: `any`
layer 的配置, 由 registerLayer(Layer, LayerOptions) 传入
#### Inherited from
Layer.options
___
### pipelineNode
**pipelineNode**: `HTMLElement`
父节点
#### Inherited from
Layer.pipelineNode
___
### playgroundNode
**playgroundNode**: `HTMLElement`
画布根节点
#### Inherited from
Layer.playgroundNode
___
### reloadEntities
**reloadEntities**: () => `boolean`
#### Type declaration
(): `boolean`
加载 layer 注册的实体数据，内部使用，不需要手动触发
##### Returns
`boolean`
数据是否变化
#### Inherited from
Layer.reloadEntities
___
### renderWithReactMemo
**renderWithReactMemo**: `boolean`
默认在渲染时候都会启用 react memo 进行隔离，这种情况就需要数据驱动更新
#### Inherited from
Layer.renderWithReactMemo
___
### rendererRegistry
`Readonly` **rendererRegistry**: [`FlowRendererRegistry`](./FlowRendererRegistry.md)
## Accessors
### transitions
`get` **transitions**(): `FlowNodeTransitionData`[]
#### Returns
`FlowNodeTransitionData`[]
___
### viewBox
`get` **viewBox**(): `string`
#### Returns
`string`
## Methods
### autorun
`Optional` **autorun**(): `void`
自动触发更新，在不需要 react 的时候用这个方法
#### Returns
`void`
#### Inherited from
Layer.autorun
___
### createDOMCache
**createDOMCache**\<`T`\>(`className`, `children?`): `CacheManager`\<`T`, `CacheOriginItem`\>
创建 dom 缓冲池
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `DOMCache`\<`T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `className` | `string` \| () => `HTMLElement` |
| `children?` | `string` |
#### Returns
`CacheManager`\<`T`, `CacheOriginItem`\>
#### Inherited from
Layer.createDOMCache
___
### dispose
**dispose**(): `void`
销毁
#### Returns
`void`
#### Inherited from
Layer.dispose
___
### getPosFromMouseEvent
**getPosFromMouseEvent**(`event`, `addScale?`): `PositionSchema`
获取鼠标在 Playground 的位置
#### Parameters
| Name | Type |
| :------ | :------ |
| `event` | `Object` |
| `event.clientX` | `number` |
| `event.clientY` | `number` |
| `addScale?` | `boolean` |
#### Returns
`PositionSchema`
#### Inherited from
Layer.getPosFromMouseEvent
___
### onBlur
`Optional` **onBlur**(): `void`
playground blur 时候触发
#### Returns
`void`
#### Inherited from
Layer.onBlur
___
### onFocus
`Optional` **onFocus**(): `void`
playground focus 时候触发
#### Returns
`void`
#### Inherited from
Layer.onFocus
___
### onReadonlyOrDisabledChange
`Optional` **onReadonlyOrDisabledChange**(`state`): `void`
readonly 或 disable 状态变化
#### Parameters
| Name | Type |
| :------ | :------ |
| `state` | `Object` |
| `state.disabled` | `boolean` |
| `state.readonly` | `boolean` |
#### Returns
`void`
#### Inherited from
Layer.onReadonlyOrDisabledChange
___
### onReady
**onReady**(): `void`
#### Returns
`void`
#### Overrides
Layer.onReady
___
### onResize
`Optional` **onResize**(`size`): `void`
playground 大小变化时候会触发
#### Parameters
| Name | Type |
| :------ | :------ |
| `size` | `PipelineDimension` |
#### Returns
`void`
#### Inherited from
Layer.onResize
___
### onScroll
`Optional` **onScroll**(`scroll`): `void`
监听滚动
#### Parameters
| Name | Type |
| :------ | :------ |
| `scroll` | `Object` |
| `scroll.scrollX` | `number` |
| `scroll.scrollY` | `number` |
#### Returns
`void`
#### Inherited from
Layer.onScroll
___
### onZoom
**onZoom**(): `void`
#### Returns
`void`
#### Overrides
Layer.onZoom
___
### render
**render**(): `Element`
#### Returns
`Element`
#### Overrides
Layer.render
---
url: /auto-docs/renderer/classes/FlowNodesContentLayer.md
---
# Class: FlowNodesContentLayer
渲染节点内容
## Hierarchy
- `Layer`
↳ **`FlowNodesContentLayer`**
## Table of contents
### Constructors
- [constructor](./FlowNodesContentLayer.md#constructor)
### Properties
- [\_renderStates](./FlowNodesContentLayer.md#_renderstates)
- [config](./FlowNodesContentLayer.md#config)
- [context](./FlowNodesContentLayer.md#context)
- [document](./FlowNodesContentLayer.md#document)
- [documentTransformer](./FlowNodesContentLayer.md#documenttransformer)
- [entityManager](./FlowNodesContentLayer.md#entitymanager)
- [getOtherLayer](./FlowNodesContentLayer.md#getotherlayer)
- [isFocused](./FlowNodesContentLayer.md#isfocused)
- [listenGlobalEvent](./FlowNodesContentLayer.md#listenglobalevent)
- [listenPlaygroundEvent](./FlowNodesContentLayer.md#listenplaygroundevent)
- [node](./FlowNodesContentLayer.md#node)
- [observeManager](./FlowNodesContentLayer.md#observemanager)
- [options](./FlowNodesContentLayer.md#options)
- [pipelineNode](./FlowNodesContentLayer.md#pipelinenode)
- [playgroundNode](./FlowNodesContentLayer.md#playgroundnode)
- [reloadEntities](./FlowNodesContentLayer.md#reloadentities)
- [renderWithReactMemo](./FlowNodesContentLayer.md#renderwithreactmemo)
- [rendererRegistry](./FlowNodesContentLayer.md#rendererregistry)
### Accessors
- [renderStatesVisible](./FlowNodesContentLayer.md#renderstatesvisible)
### Methods
- [autorun](./FlowNodesContentLayer.md#autorun)
- [createDOMCache](./FlowNodesContentLayer.md#createdomcache)
- [dispose](./FlowNodesContentLayer.md#dispose)
- [getPortalRenderer](./FlowNodesContentLayer.md#getportalrenderer)
- [getPortals](./FlowNodesContentLayer.md#getportals)
- [getPosFromMouseEvent](./FlowNodesContentLayer.md#getposfrommouseevent)
- [onBlur](./FlowNodesContentLayer.md#onblur)
- [onFocus](./FlowNodesContentLayer.md#onfocus)
- [onReadonlyOrDisabledChange](./FlowNodesContentLayer.md#onreadonlyordisabledchange)
- [onReady](./FlowNodesContentLayer.md#onready)
- [onResize](./FlowNodesContentLayer.md#onresize)
- [onScroll](./FlowNodesContentLayer.md#onscroll)
- [onViewportChange](./FlowNodesContentLayer.md#onviewportchange)
- [onZoom](./FlowNodesContentLayer.md#onzoom)
- [render](./FlowNodesContentLayer.md#render)
## Constructors
### constructor
**new FlowNodesContentLayer**()
#### Inherited from
Layer.constructor
## Properties
### \_renderStates
**\_renderStates**: `FlowNodeRenderData`[]
___
### config
**config**: `PlaygroundConfigEntity`
全局画布配置
#### Inherited from
Layer.config
___
### context
`Readonly` **context**: `any`
#### Inherited from
Layer.context
___
### document
`Readonly` **document**: `FlowDocument`\<`FlowDocumentJSON`\>
___
### documentTransformer
`Readonly` **documentTransformer**: `FlowDocumentTransformerEntity`
___
### entityManager
`Readonly` **entityManager**: `EntityManager`
实体管理器
#### Inherited from
Layer.entityManager
___
### getOtherLayer
**getOtherLayer**: \(`layerRegistry`: `LayerRegistry`\<`T`\>) => `undefined` \| `T`
#### Type declaration
\<`T`\>(`layerRegistry`): `undefined` \| `T`
可以用于获取别的 layer
##### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `Layer`\<`any`, `any`, `T`\> |
##### Parameters
| Name | Type |
| :------ | :------ |
| `layerRegistry` | `LayerRegistry`\<`T`\> |
##### Returns
`undefined` \| `T`
#### Inherited from
Layer.getOtherLayer
___
### isFocused
`Readonly` **isFocused**: `boolean`
playground 是否 focused
#### Inherited from
Layer.isFocused
___
### listenGlobalEvent
**listenGlobalEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 document 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
#### Inherited from
Layer.listenGlobalEvent
___
### listenPlaygroundEvent
**listenPlaygroundEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 playground 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
#### Inherited from
Layer.listenPlaygroundEvent
___
### node
**node**: `HTMLDivElement`
#### Overrides
Layer.node
___
### observeManager
**observeManager**: `PipelineEntities`
当前 layer 的所有监听的实体数据
#### Inherited from
Layer.observeManager
___
### options
**options**: `any`
layer 的配置, 由 registerLayer(Layer, LayerOptions) 传入
#### Inherited from
Layer.options
___
### pipelineNode
**pipelineNode**: `HTMLElement`
父节点
#### Inherited from
Layer.pipelineNode
___
### playgroundNode
**playgroundNode**: `HTMLElement`
画布根节点
#### Inherited from
Layer.playgroundNode
___
### reloadEntities
**reloadEntities**: () => `boolean`
#### Type declaration
(): `boolean`
加载 layer 注册的实体数据，内部使用，不需要手动触发
##### Returns
`boolean`
数据是否变化
#### Inherited from
Layer.reloadEntities
___
### renderWithReactMemo
**renderWithReactMemo**: `boolean`
默认在渲染时候都会启用 react memo 进行隔离，这种情况就需要数据驱动更新
#### Inherited from
Layer.renderWithReactMemo
___
### rendererRegistry
`Readonly` **rendererRegistry**: [`FlowRendererRegistry`](./FlowRendererRegistry.md)
## Accessors
### renderStatesVisible
`get` **renderStatesVisible**(): `FlowNodeRenderData`[]
#### Returns
`FlowNodeRenderData`[]
## Methods
### autorun
`Optional` **autorun**(): `void`
自动触发更新，在不需要 react 的时候用这个方法
#### Returns
`void`
#### Inherited from
Layer.autorun
___
### createDOMCache
**createDOMCache**\<`T`\>(`className`, `children?`): `CacheManager`\<`T`, `CacheOriginItem`\>
创建 dom 缓冲池
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `DOMCache`\<`T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `className` | `string` \| () => `HTMLElement` |
| `children?` | `string` |
#### Returns
`CacheManager`\<`T`, `CacheOriginItem`\>
#### Inherited from
Layer.createDOMCache
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Overrides
Layer.dispose
___
### getPortalRenderer
**getPortalRenderer**(`data`): (`props`: `any`) => `Element`
#### Parameters
| Name | Type |
| :------ | :------ |
| `data` | `FlowNodeRenderData` |
#### Returns
`fn`
(`props`): `Element`
##### Parameters
| Name | Type |
| :------ | :------ |
| `props` | `any` |
##### Returns
`Element`
___
### getPortals
**getPortals**(): `NodePortal`[]
#### Returns
`NodePortal`[]
___
### getPosFromMouseEvent
**getPosFromMouseEvent**(`event`, `addScale?`): `PositionSchema`
获取鼠标在 Playground 的位置
#### Parameters
| Name | Type |
| :------ | :------ |
| `event` | `Object` |
| `event.clientX` | `number` |
| `event.clientY` | `number` |
| `addScale?` | `boolean` |
#### Returns
`PositionSchema`
#### Inherited from
Layer.getPosFromMouseEvent
___
### onBlur
`Optional` **onBlur**(): `void`
playground blur 时候触发
#### Returns
`void`
#### Inherited from
Layer.onBlur
___
### onFocus
`Optional` **onFocus**(): `void`
playground focus 时候触发
#### Returns
`void`
#### Inherited from
Layer.onFocus
___
### onReadonlyOrDisabledChange
**onReadonlyOrDisabledChange**(): `void`
监听readonly和 disabled 状态 并刷新layer, 并刷新节点
#### Returns
`void`
#### Overrides
Layer.onReadonlyOrDisabledChange
___
### onReady
**onReady**(): `void`
#### Returns
`void`
#### Overrides
Layer.onReady
___
### onResize
`Optional` **onResize**(`size`): `void`
playground 大小变化时候会触发
#### Parameters
| Name | Type |
| :------ | :------ |
| `size` | `PipelineDimension` |
#### Returns
`void`
#### Inherited from
Layer.onResize
___
### onScroll
`Optional` **onScroll**(`scroll`): `void`
监听滚动
#### Parameters
| Name | Type |
| :------ | :------ |
| `scroll` | `Object` |
| `scroll.scrollX` | `number` |
| `scroll.scrollY` | `number` |
#### Returns
`void`
#### Inherited from
Layer.onScroll
___
### onViewportChange
`Optional` **onViewportChange**(): `void`
viewport 更新触发
#### Returns
`void`
#### Inherited from
Layer.onViewportChange
___
### onZoom
**onZoom**(`scale`): `void`
监听缩放，目前采用整体缩放
#### Parameters
| Name | Type |
| :------ | :------ |
| `scale` | `number` |
#### Returns
`void`
#### Overrides
Layer.onZoom
___
### render
**render**(): `Element`
#### Returns
`Element`
#### Overrides
Layer.render
---
url: /auto-docs/renderer/classes/FlowNodesTransformLayer.md
---
# Class: FlowNodesTransformLayer
渲染节点位置
## Hierarchy
- `Layer`\<[`FlowNodesTransformLayerOptions`](../interfaces/FlowNodesTransformLayerOptions.md)\>
↳ **`FlowNodesTransformLayer`**
## Table of contents
### Constructors
- [constructor](./FlowNodesTransformLayer.md#constructor)
### Properties
- [\_transforms](./FlowNodesTransformLayer.md#_transforms)
- [config](./FlowNodesTransformLayer.md#config)
- [context](./FlowNodesTransformLayer.md#context)
- [document](./FlowNodesTransformLayer.md#document)
- [documentTransformer](./FlowNodesTransformLayer.md#documenttransformer)
- [entityManager](./FlowNodesTransformLayer.md#entitymanager)
- [getOtherLayer](./FlowNodesTransformLayer.md#getotherlayer)
- [isFocused](./FlowNodesTransformLayer.md#isfocused)
- [listenGlobalEvent](./FlowNodesTransformLayer.md#listenglobalevent)
- [listenPlaygroundEvent](./FlowNodesTransformLayer.md#listenplaygroundevent)
- [node](./FlowNodesTransformLayer.md#node)
- [observeManager](./FlowNodesTransformLayer.md#observemanager)
- [options](./FlowNodesTransformLayer.md#options)
- [pipelineNode](./FlowNodesTransformLayer.md#pipelinenode)
- [playgroundNode](./FlowNodesTransformLayer.md#playgroundnode)
- [reloadEntities](./FlowNodesTransformLayer.md#reloadentities)
- [renderWithReactMemo](./FlowNodesTransformLayer.md#renderwithreactmemo)
- [resizeObserver](./FlowNodesTransformLayer.md#resizeobserver)
### Accessors
- [transformVisibles](./FlowNodesTransformLayer.md#transformvisibles)
- [visibeBounds](./FlowNodesTransformLayer.md#visibebounds)
### Methods
- [autorun](./FlowNodesTransformLayer.md#autorun)
- [createDOMCache](./FlowNodesTransformLayer.md#createdomcache)
- [dispose](./FlowNodesTransformLayer.md#dispose)
- [getPosFromMouseEvent](./FlowNodesTransformLayer.md#getposfrommouseevent)
- [onBlur](./FlowNodesTransformLayer.md#onblur)
- [onFocus](./FlowNodesTransformLayer.md#onfocus)
- [onReadonlyOrDisabledChange](./FlowNodesTransformLayer.md#onreadonlyordisabledchange)
- [onReady](./FlowNodesTransformLayer.md#onready)
- [onResize](./FlowNodesTransformLayer.md#onresize)
- [onScroll](./FlowNodesTransformLayer.md#onscroll)
- [onViewportChange](./FlowNodesTransformLayer.md#onviewportchange)
- [onZoom](./FlowNodesTransformLayer.md#onzoom)
- [render](./FlowNodesTransformLayer.md#render)
- [updateNodesBounds](./FlowNodesTransformLayer.md#updatenodesbounds)
## Constructors
### constructor
**new FlowNodesTransformLayer**()
#### Inherited from
Layer\.constructor
## Properties
### \_transforms
**\_transforms**: `FlowNodeTransformData`[]
___
### config
**config**: `PlaygroundConfigEntity`
全局画布配置
#### Inherited from
Layer.config
___
### context
`Readonly` **context**: `any`
#### Inherited from
Layer.context
___
### document
`Readonly` **document**: `FlowDocument`\<`FlowDocumentJSON`\>
___
### documentTransformer
`Readonly` **documentTransformer**: `FlowDocumentTransformerEntity`
___
### entityManager
`Readonly` **entityManager**: `EntityManager`
实体管理器
#### Inherited from
Layer.entityManager
___
### getOtherLayer
**getOtherLayer**: \(`layerRegistry`: `LayerRegistry`\<`T`\>) => `undefined` \| `T`
#### Type declaration
\<`T`\>(`layerRegistry`): `undefined` \| `T`
可以用于获取别的 layer
##### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `Layer`\<`any`, `any`, `T`\> |
##### Parameters
| Name | Type |
| :------ | :------ |
| `layerRegistry` | `LayerRegistry`\<`T`\> |
##### Returns
`undefined` \| `T`
#### Inherited from
Layer.getOtherLayer
___
### isFocused
`Readonly` **isFocused**: `boolean`
playground 是否 focused
#### Inherited from
Layer.isFocused
___
### listenGlobalEvent
**listenGlobalEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 document 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
#### Inherited from
Layer.listenGlobalEvent
___
### listenPlaygroundEvent
**listenPlaygroundEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 playground 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
#### Inherited from
Layer.listenPlaygroundEvent
___
### node
**node**: `HTMLDivElement`
#### Overrides
Layer.node
___
### observeManager
**observeManager**: `PipelineEntities`
当前 layer 的所有监听的实体数据
#### Inherited from
Layer.observeManager
___
### options
**options**: [`FlowNodesTransformLayerOptions`](../interfaces/FlowNodesTransformLayerOptions.md)
layer 的配置, 由 registerLayer(Layer, LayerOptions) 传入
#### Inherited from
Layer.options
___
### pipelineNode
**pipelineNode**: `HTMLElement`
父节点
#### Inherited from
Layer.pipelineNode
___
### playgroundNode
**playgroundNode**: `HTMLElement`
画布根节点
#### Inherited from
Layer.playgroundNode
___
### reloadEntities
**reloadEntities**: () => `boolean`
#### Type declaration
(): `boolean`
加载 layer 注册的实体数据，内部使用，不需要手动触发
##### Returns
`boolean`
数据是否变化
#### Inherited from
Layer.reloadEntities
___
### renderWithReactMemo
**renderWithReactMemo**: `boolean`
默认在渲染时候都会启用 react memo 进行隔离，这种情况就需要数据驱动更新
#### Inherited from
Layer.renderWithReactMemo
___
### resizeObserver
`Readonly` **resizeObserver**: `FlowRendererResizeObserver`
## Accessors
### transformVisibles
`get` **transformVisibles**(): `FlowNodeTransformData`[]
#### Returns
`FlowNodeTransformData`[]
___
### visibeBounds
`get` **visibeBounds**(): `Rectangle`[]
#### Returns
`Rectangle`[]
## Methods
### autorun
**autorun**(): `void`
#### Returns
`void`
#### Overrides
Layer.autorun
___
### createDOMCache
**createDOMCache**\<`T`\>(`className`, `children?`): `CacheManager`\<`T`, `CacheOriginItem`\>
创建 dom 缓冲池
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `DOMCache`\<`T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `className` | `string` \| () => `HTMLElement` |
| `children?` | `string` |
#### Returns
`CacheManager`\<`T`, `CacheOriginItem`\>
#### Inherited from
Layer.createDOMCache
___
### dispose
**dispose**(): `void`
#### Returns
`void`
#### Overrides
Layer.dispose
___
### getPosFromMouseEvent
**getPosFromMouseEvent**(`event`, `addScale?`): `PositionSchema`
获取鼠标在 Playground 的位置
#### Parameters
| Name | Type |
| :------ | :------ |
| `event` | `Object` |
| `event.clientX` | `number` |
| `event.clientY` | `number` |
| `addScale?` | `boolean` |
#### Returns
`PositionSchema`
#### Inherited from
Layer.getPosFromMouseEvent
___
### onBlur
`Optional` **onBlur**(): `void`
playground blur 时候触发
#### Returns
`void`
#### Inherited from
Layer.onBlur
___
### onFocus
`Optional` **onFocus**(): `void`
playground focus 时候触发
#### Returns
`void`
#### Inherited from
Layer.onFocus
___
### onReadonlyOrDisabledChange
`Optional` **onReadonlyOrDisabledChange**(`state`): `void`
readonly 或 disable 状态变化
#### Parameters
| Name | Type |
| :------ | :------ |
| `state` | `Object` |
| `state.disabled` | `boolean` |
| `state.readonly` | `boolean` |
#### Returns
`void`
#### Inherited from
Layer.onReadonlyOrDisabledChange
___
### onReady
**onReady**(): `void`
#### Returns
`void`
#### Overrides
Layer.onReady
___
### onResize
`Optional` **onResize**(`size`): `void`
playground 大小变化时候会触发
#### Parameters
| Name | Type |
| :------ | :------ |
| `size` | `PipelineDimension` |
#### Returns
`void`
#### Inherited from
Layer.onResize
___
### onScroll
`Optional` **onScroll**(`scroll`): `void`
监听滚动
#### Parameters
| Name | Type |
| :------ | :------ |
| `scroll` | `Object` |
| `scroll.scrollX` | `number` |
| `scroll.scrollY` | `number` |
#### Returns
`void`
#### Inherited from
Layer.onScroll
___
### onViewportChange
`Optional` **onViewportChange**(): `void`
viewport 更新触发
#### Returns
`void`
#### Inherited from
Layer.onViewportChange
___
### onZoom
**onZoom**(`scale`): `void`
监听缩放，目前采用整体缩放
#### Parameters
| Name | Type |
| :------ | :------ |
| `scale` | `number` |
#### Returns
`void`
#### Overrides
Layer.onZoom
___
### render
`Optional` **render**(): `Element`
绘制 react
#### Returns
`Element`
#### Inherited from
Layer.render
___
### updateNodesBounds
**updateNodesBounds**(): `void`
更新节点的 bounds 数据
#### Returns
`void`
---
url: /auto-docs/renderer/classes/FlowRendererRegistry.md
---
# Class: FlowRendererRegistry
## Table of contents
### Constructors
- [constructor](./FlowRendererRegistry.md#constructor)
### Properties
- [pipeline](./FlowRendererRegistry.md#pipeline)
### Methods
- [getRendererComponent](./FlowRendererRegistry.md#getrenderercomponent)
- [getText](./FlowRendererRegistry.md#gettext)
- [init](./FlowRendererRegistry.md#init)
- [registerLayer](./FlowRendererRegistry.md#registerlayer)
- [registerLayers](./FlowRendererRegistry.md#registerlayers)
- [registerReactComponent](./FlowRendererRegistry.md#registerreactcomponent)
- [registerRendererComponents](./FlowRendererRegistry.md#registerrenderercomponents)
- [registerText](./FlowRendererRegistry.md#registertext)
- [tryToGetRendererComponent](./FlowRendererRegistry.md#trytogetrenderercomponent)
## Constructors
### constructor
**new FlowRendererRegistry**()
## Properties
### pipeline
`Readonly` **pipeline**: `PipelineRegistry`
## Methods
### getRendererComponent
**getRendererComponent**(`renderKey`): [`FlowRendererComponent`](../interfaces/FlowRendererComponent.md)
TODO: support memo
#### Parameters
| Name | Type |
| :------ | :------ |
| `renderKey` | `string` |
#### Returns
[`FlowRendererComponent`](../interfaces/FlowRendererComponent.md)
___
### getText
**getText**(`textKey`): `undefined` \| `string`
#### Parameters
| Name | Type |
| :------ | :------ |
| `textKey` | `string` |
#### Returns
`undefined` \| `string`
___
### init
**init**(): `void`
#### Returns
`void`
___
### registerLayer
**registerLayer**\<`P`\>(`layerRegistry`, `options?`): `void`
根据配置注册画布
#### Type parameters
| Name | Type |
| :------ | :------ |
| `P` | extends `Layer`\<`any`, `any`, `P`\> = `Layer`\<`any`, `any`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `layerRegistry` | `LayerRegistry`\<`Layer`\<`any`, `any`\>\> |
| `options?` | `P`[``"options"``] |
#### Returns
`void`
___
### registerLayers
**registerLayers**(`...layerRegistries`): `void`
注册画布层
#### Parameters
| Name | Type |
| :------ | :------ |
| `...layerRegistries` | `LayerRegistry`\<`Layer`\<`any`, `any`\>\>[] |
#### Returns
`void`
___
### registerReactComponent
**registerReactComponent**(`renderKey`, `renderer`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `renderKey` | `string` |
| `renderer` | (`props`: `any`) => `any` |
#### Returns
`void`
___
### registerRendererComponents
**registerRendererComponents**(`renderKey`, `comp`): `void`
注册 组件数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `renderKey` | `string` |
| `comp` | [`FlowRendererComponent`](../interfaces/FlowRendererComponent.md) |
#### Returns
`void`
___
### registerText
**registerText**(`configs`): `void`
注册文案
#### Parameters
| Name | Type |
| :------ | :------ |
| `configs` | `Record`\<`string`, `string`\> |
#### Returns
`void`
___
### tryToGetRendererComponent
**tryToGetRendererComponent**(`renderKey`): `undefined` \| [`FlowRendererComponent`](../interfaces/FlowRendererComponent.md)
#### Parameters
| Name | Type |
| :------ | :------ |
| `renderKey` | `string` |
#### Returns
`undefined` \| [`FlowRendererComponent`](../interfaces/FlowRendererComponent.md)
---
url: /auto-docs/renderer/classes/FlowScrollBarLayer.md
---
# Class: FlowScrollBarLayer
渲染滚动条 layer
## Hierarchy
- `Layer`\<[`ScrollBarOptions`](../interfaces/ScrollBarOptions.md)\>
↳ **`FlowScrollBarLayer`**
## Table of contents
### Constructors
- [constructor](./FlowScrollBarLayer.md#constructor)
### Properties
- [bottomScrollBar](./FlowScrollBarLayer.md#bottomscrollbar)
- [bottomScrollBarBlock](./FlowScrollBarLayer.md#bottomscrollbarblock)
- [config](./FlowScrollBarLayer.md#config)
- [context](./FlowScrollBarLayer.md#context)
- [entityManager](./FlowScrollBarLayer.md#entitymanager)
- [events](./FlowScrollBarLayer.md#events)
- [flowDocument](./FlowScrollBarLayer.md#flowdocument)
- [getOtherLayer](./FlowScrollBarLayer.md#getotherlayer)
- [isFocused](./FlowScrollBarLayer.md#isfocused)
- [listenGlobalEvent](./FlowScrollBarLayer.md#listenglobalevent)
- [listenPlaygroundEvent](./FlowScrollBarLayer.md#listenplaygroundevent)
- [node](./FlowScrollBarLayer.md#node)
- [observeManager](./FlowScrollBarLayer.md#observemanager)
- [options](./FlowScrollBarLayer.md#options)
- [pipelineNode](./FlowScrollBarLayer.md#pipelinenode)
- [playgroundNode](./FlowScrollBarLayer.md#playgroundnode)
- [reloadEntities](./FlowScrollBarLayer.md#reloadentities)
- [renderWithReactMemo](./FlowScrollBarLayer.md#renderwithreactmemo)
- [rightScrollBar](./FlowScrollBarLayer.md#rightscrollbar)
- [rightScrollBarBlock](./FlowScrollBarLayer.md#rightscrollbarblock)
### Accessors
- [clientViewportHeight](./FlowScrollBarLayer.md#clientviewportheight)
- [clientViewportWidth](./FlowScrollBarLayer.md#clientviewportwidth)
- [viewportFullHeight](./FlowScrollBarLayer.md#viewportfullheight)
- [viewportFullWidth](./FlowScrollBarLayer.md#viewportfullwidth)
- [viewportMoveHeight](./FlowScrollBarLayer.md#viewportmoveheight)
- [viewportMoveWidth](./FlowScrollBarLayer.md#viewportmovewidth)
### Methods
- [autorun](./FlowScrollBarLayer.md#autorun)
- [clickBottomScrollBar](./FlowScrollBarLayer.md#clickbottomscrollbar)
- [clickRightScrollBar](./FlowScrollBarLayer.md#clickrightscrollbar)
- [createDOMCache](./FlowScrollBarLayer.md#createdomcache)
- [dispose](./FlowScrollBarLayer.md#dispose)
- [getPosFromMouseEvent](./FlowScrollBarLayer.md#getposfrommouseevent)
- [getToLeft](./FlowScrollBarLayer.md#gettoleft)
- [getToTop](./FlowScrollBarLayer.md#gettotop)
- [onBlur](./FlowScrollBarLayer.md#onblur)
- [onBoardingToast](./FlowScrollBarLayer.md#onboardingtoast)
- [onFocus](./FlowScrollBarLayer.md#onfocus)
- [onReadonlyOrDisabledChange](./FlowScrollBarLayer.md#onreadonlyordisabledchange)
- [onReady](./FlowScrollBarLayer.md#onready)
- [onResize](./FlowScrollBarLayer.md#onresize)
- [onScroll](./FlowScrollBarLayer.md#onscroll)
- [onViewportChange](./FlowScrollBarLayer.md#onviewportchange)
- [onZoom](./FlowScrollBarLayer.md#onzoom)
- [render](./FlowScrollBarLayer.md#render)
## Constructors
### constructor
**new FlowScrollBarLayer**()
#### Inherited from
Layer\.constructor
## Properties
### bottomScrollBar
`Readonly` **bottomScrollBar**: `HTMLDivElement`
___
### bottomScrollBarBlock
`Readonly` **bottomScrollBarBlock**: `HTMLDivElement`
___
### config
**config**: `PlaygroundConfigEntity`
全局画布配置
#### Inherited from
Layer.config
___
### context
`Readonly` **context**: `any`
#### Inherited from
Layer.context
___
### entityManager
`Readonly` **entityManager**: `EntityManager`
实体管理器
#### Inherited from
Layer.entityManager
___
### events
`Optional` `Readonly` **events**: [`ScrollBarEvents`](../variables/ScrollBarEvents-1.md)
___
### flowDocument
`Optional` **flowDocument**: `FlowDocument`\<`FlowDocumentJSON`\>
___
### getOtherLayer
**getOtherLayer**: \(`layerRegistry`: `LayerRegistry`\<`T`\>) => `undefined` \| `T`
#### Type declaration
\<`T`\>(`layerRegistry`): `undefined` \| `T`
可以用于获取别的 layer
##### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `Layer`\<`any`, `any`, `T`\> |
##### Parameters
| Name | Type |
| :------ | :------ |
| `layerRegistry` | `LayerRegistry`\<`T`\> |
##### Returns
`undefined` \| `T`
#### Inherited from
Layer.getOtherLayer
___
### isFocused
`Readonly` **isFocused**: `boolean`
playground 是否 focused
#### Inherited from
Layer.isFocused
___
### listenGlobalEvent
**listenGlobalEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 document 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
#### Inherited from
Layer.listenGlobalEvent
___
### listenPlaygroundEvent
**listenPlaygroundEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 playground 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
#### Inherited from
Layer.listenPlaygroundEvent
___
### node
**node**: `HTMLElement`
layer 可能存在 dom 也可能没有，如果有，则会加入到 pipeline 的 dom 节点上
#### Inherited from
Layer.node
___
### observeManager
**observeManager**: `PipelineEntities`
当前 layer 的所有监听的实体数据
#### Inherited from
Layer.observeManager
___
### options
**options**: [`ScrollBarOptions`](../interfaces/ScrollBarOptions.md)
layer 的配置, 由 registerLayer(Layer, LayerOptions) 传入
#### Inherited from
Layer.options
___
### pipelineNode
**pipelineNode**: `HTMLElement`
父节点
#### Inherited from
Layer.pipelineNode
___
### playgroundNode
**playgroundNode**: `HTMLElement`
画布根节点
#### Inherited from
Layer.playgroundNode
___
### reloadEntities
**reloadEntities**: () => `boolean`
#### Type declaration
(): `boolean`
加载 layer 注册的实体数据，内部使用，不需要手动触发
##### Returns
`boolean`
数据是否变化
#### Inherited from
Layer.reloadEntities
___
### renderWithReactMemo
**renderWithReactMemo**: `boolean`
默认在渲染时候都会启用 react memo 进行隔离，这种情况就需要数据驱动更新
#### Inherited from
Layer.renderWithReactMemo
___
### rightScrollBar
`Readonly` **rightScrollBar**: `HTMLDivElement`
___
### rightScrollBarBlock
`Readonly` **rightScrollBarBlock**: `HTMLDivElement`
## Accessors
### clientViewportHeight
`get` **clientViewportHeight**(): `number`
#### Returns
`number`
___
### clientViewportWidth
`get` **clientViewportWidth**(): `number`
#### Returns
`number`
___
### viewportFullHeight
`get` **viewportFullHeight**(): `number`
#### Returns
`number`
___
### viewportFullWidth
`get` **viewportFullWidth**(): `number`
#### Returns
`number`
___
### viewportMoveHeight
`get` **viewportMoveHeight**(): `number`
#### Returns
`number`
___
### viewportMoveWidth
`get` **viewportMoveWidth**(): `number`
#### Returns
`number`
## Methods
### autorun
**autorun**(): `void`
#### Returns
`void`
#### Overrides
Layer.autorun
___
### clickBottomScrollBar
**clickBottomScrollBar**(`e`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `e` | `MouseEvent` |
#### Returns
`void`
___
### clickRightScrollBar
**clickRightScrollBar**(`e`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `e` | `MouseEvent` |
#### Returns
`void`
___
### createDOMCache
**createDOMCache**\<`T`\>(`className`, `children?`): `CacheManager`\<`T`, `CacheOriginItem`\>
创建 dom 缓冲池
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `DOMCache`\<`T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `className` | `string` \| () => `HTMLElement` |
| `children?` | `string` |
#### Returns
`CacheManager`\<`T`, `CacheOriginItem`\>
#### Inherited from
Layer.createDOMCache
___
### dispose
**dispose**(): `void`
销毁
#### Returns
`void`
#### Inherited from
Layer.dispose
___
### getPosFromMouseEvent
**getPosFromMouseEvent**(`event`, `addScale?`): `PositionSchema`
获取鼠标在 Playground 的位置
#### Parameters
| Name | Type |
| :------ | :------ |
| `event` | `Object` |
| `event.clientX` | `number` |
| `event.clientY` | `number` |
| `addScale?` | `boolean` |
#### Returns
`PositionSchema`
#### Inherited from
Layer.getPosFromMouseEvent
___
### getToLeft
**getToLeft**(`scrollX`): `number`
#### Parameters
| Name | Type |
| :------ | :------ |
| `scrollX` | `number` |
#### Returns
`number`
___
### getToTop
**getToTop**(`scrollY`): `number`
#### Parameters
| Name | Type |
| :------ | :------ |
| `scrollY` | `number` |
#### Returns
`number`
___
### onBlur
`Optional` **onBlur**(): `void`
playground blur 时候触发
#### Returns
`void`
#### Inherited from
Layer.onBlur
___
### onBoardingToast
**onBoardingToast**(): `void`
#### Returns
`void`
___
### onFocus
`Optional` **onFocus**(): `void`
playground focus 时候触发
#### Returns
`void`
#### Inherited from
Layer.onFocus
___
### onReadonlyOrDisabledChange
`Optional` **onReadonlyOrDisabledChange**(`state`): `void`
readonly 或 disable 状态变化
#### Parameters
| Name | Type |
| :------ | :------ |
| `state` | `Object` |
| `state.disabled` | `boolean` |
| `state.readonly` | `boolean` |
#### Returns
`void`
#### Inherited from
Layer.onReadonlyOrDisabledChange
___
### onReady
**onReady**(): `void`
#### Returns
`void`
#### Overrides
Layer.onReady
___
### onResize
`Optional` **onResize**(`size`): `void`
playground 大小变化时候会触发
#### Parameters
| Name | Type |
| :------ | :------ |
| `size` | `PipelineDimension` |
#### Returns
`void`
#### Inherited from
Layer.onResize
___
### onScroll
`Optional` **onScroll**(`scroll`): `void`
监听滚动
#### Parameters
| Name | Type |
| :------ | :------ |
| `scroll` | `Object` |
| `scroll.scrollX` | `number` |
| `scroll.scrollY` | `number` |
#### Returns
`void`
#### Inherited from
Layer.onScroll
___
### onViewportChange
`Optional` **onViewportChange**(): `void`
viewport 更新触发
#### Returns
`void`
#### Inherited from
Layer.onViewportChange
___
### onZoom
`Optional` **onZoom**(`zoom`): `void`
监听缩放
#### Parameters
| Name | Type |
| :------ | :------ |
| `zoom` | `number` |
#### Returns
`void`
#### Inherited from
Layer.onZoom
___
### render
`Optional` **render**(): `Element`
绘制 react
#### Returns
`Element`
#### Inherited from
Layer.render
---
url: /auto-docs/renderer/classes/FlowScrollLimitLayer.md
---
# Class: FlowScrollLimitLayer
控制滚动边界
## Hierarchy
- `Layer`
↳ **`FlowScrollLimitLayer`**
## Table of contents
### Constructors
- [constructor](./FlowScrollLimitLayer.md#constructor)
### Properties
- [config](./FlowScrollLimitLayer.md#config)
- [context](./FlowScrollLimitLayer.md#context)
- [document](./FlowScrollLimitLayer.md#document)
- [entityManager](./FlowScrollLimitLayer.md#entitymanager)
- [getOtherLayer](./FlowScrollLimitLayer.md#getotherlayer)
- [isFocused](./FlowScrollLimitLayer.md#isfocused)
- [listenGlobalEvent](./FlowScrollLimitLayer.md#listenglobalevent)
- [listenPlaygroundEvent](./FlowScrollLimitLayer.md#listenplaygroundevent)
- [node](./FlowScrollLimitLayer.md#node)
- [observeManager](./FlowScrollLimitLayer.md#observemanager)
- [options](./FlowScrollLimitLayer.md#options)
- [pipelineNode](./FlowScrollLimitLayer.md#pipelinenode)
- [playgroundNode](./FlowScrollLimitLayer.md#playgroundnode)
- [reloadEntities](./FlowScrollLimitLayer.md#reloadentities)
- [renderWithReactMemo](./FlowScrollLimitLayer.md#renderwithreactmemo)
### Methods
- [autorun](./FlowScrollLimitLayer.md#autorun)
- [createDOMCache](./FlowScrollLimitLayer.md#createdomcache)
- [dispose](./FlowScrollLimitLayer.md#dispose)
- [getInitScroll](./FlowScrollLimitLayer.md#getinitscroll)
- [getPosFromMouseEvent](./FlowScrollLimitLayer.md#getposfrommouseevent)
- [onBlur](./FlowScrollLimitLayer.md#onblur)
- [onFocus](./FlowScrollLimitLayer.md#onfocus)
- [onReadonlyOrDisabledChange](./FlowScrollLimitLayer.md#onreadonlyordisabledchange)
- [onReady](./FlowScrollLimitLayer.md#onready)
- [onResize](./FlowScrollLimitLayer.md#onresize)
- [onScroll](./FlowScrollLimitLayer.md#onscroll)
- [onViewportChange](./FlowScrollLimitLayer.md#onviewportchange)
- [onZoom](./FlowScrollLimitLayer.md#onzoom)
- [render](./FlowScrollLimitLayer.md#render)
## Constructors
### constructor
**new FlowScrollLimitLayer**()
#### Inherited from
Layer.constructor
## Properties
### config
**config**: `PlaygroundConfigEntity`
全局画布配置
#### Inherited from
Layer.config
___
### context
`Readonly` **context**: `any`
#### Inherited from
Layer.context
___
### document
`Readonly` **document**: `FlowDocument`\<`FlowDocumentJSON`\>
___
### entityManager
`Readonly` **entityManager**: `EntityManager`
实体管理器
#### Inherited from
Layer.entityManager
___
### getOtherLayer
**getOtherLayer**: \(`layerRegistry`: `LayerRegistry`\<`T`\>) => `undefined` \| `T`
#### Type declaration
\<`T`\>(`layerRegistry`): `undefined` \| `T`
可以用于获取别的 layer
##### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `Layer`\<`any`, `any`, `T`\> |
##### Parameters
| Name | Type |
| :------ | :------ |
| `layerRegistry` | `LayerRegistry`\<`T`\> |
##### Returns
`undefined` \| `T`
#### Inherited from
Layer.getOtherLayer
___
### isFocused
`Readonly` **isFocused**: `boolean`
playground 是否 focused
#### Inherited from
Layer.isFocused
___
### listenGlobalEvent
**listenGlobalEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 document 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
#### Inherited from
Layer.listenGlobalEvent
___
### listenPlaygroundEvent
**listenPlaygroundEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 playground 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
#### Inherited from
Layer.listenPlaygroundEvent
___
### node
**node**: `HTMLElement`
layer 可能存在 dom 也可能没有，如果有，则会加入到 pipeline 的 dom 节点上
#### Inherited from
Layer.node
___
### observeManager
**observeManager**: `PipelineEntities`
当前 layer 的所有监听的实体数据
#### Inherited from
Layer.observeManager
___
### options
**options**: `any`
layer 的配置, 由 registerLayer(Layer, LayerOptions) 传入
#### Inherited from
Layer.options
___
### pipelineNode
**pipelineNode**: `HTMLElement`
父节点
#### Inherited from
Layer.pipelineNode
___
### playgroundNode
**playgroundNode**: `HTMLElement`
画布根节点
#### Inherited from
Layer.playgroundNode
___
### reloadEntities
**reloadEntities**: () => `boolean`
#### Type declaration
(): `boolean`
加载 layer 注册的实体数据，内部使用，不需要手动触发
##### Returns
`boolean`
数据是否变化
#### Inherited from
Layer.reloadEntities
___
### renderWithReactMemo
**renderWithReactMemo**: `boolean`
默认在渲染时候都会启用 react memo 进行隔离，这种情况就需要数据驱动更新
#### Inherited from
Layer.renderWithReactMemo
## Methods
### autorun
`Optional` **autorun**(): `void`
自动触发更新，在不需要 react 的时候用这个方法
#### Returns
`void`
#### Inherited from
Layer.autorun
___
### createDOMCache
**createDOMCache**\<`T`\>(`className`, `children?`): `CacheManager`\<`T`, `CacheOriginItem`\>
创建 dom 缓冲池
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `DOMCache`\<`T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `className` | `string` \| () => `HTMLElement` |
| `children?` | `string` |
#### Returns
`CacheManager`\<`T`, `CacheOriginItem`\>
#### Inherited from
Layer.createDOMCache
___
### dispose
**dispose**(): `void`
销毁
#### Returns
`void`
#### Inherited from
Layer.dispose
___
### getInitScroll
**getInitScroll**(): `ScrollSchema`
#### Returns
`ScrollSchema`
___
### getPosFromMouseEvent
**getPosFromMouseEvent**(`event`, `addScale?`): `PositionSchema`
获取鼠标在 Playground 的位置
#### Parameters
| Name | Type |
| :------ | :------ |
| `event` | `Object` |
| `event.clientX` | `number` |
| `event.clientY` | `number` |
| `addScale?` | `boolean` |
#### Returns
`PositionSchema`
#### Inherited from
Layer.getPosFromMouseEvent
___
### onBlur
`Optional` **onBlur**(): `void`
playground blur 时候触发
#### Returns
`void`
#### Inherited from
Layer.onBlur
___
### onFocus
`Optional` **onFocus**(): `void`
playground focus 时候触发
#### Returns
`void`
#### Inherited from
Layer.onFocus
___
### onReadonlyOrDisabledChange
`Optional` **onReadonlyOrDisabledChange**(`state`): `void`
readonly 或 disable 状态变化
#### Parameters
| Name | Type |
| :------ | :------ |
| `state` | `Object` |
| `state.disabled` | `boolean` |
| `state.readonly` | `boolean` |
#### Returns
`void`
#### Inherited from
Layer.onReadonlyOrDisabledChange
___
### onReady
**onReady**(): `void`
#### Returns
`void`
#### Overrides
Layer.onReady
___
### onResize
`Optional` **onResize**(`size`): `void`
playground 大小变化时候会触发
#### Parameters
| Name | Type |
| :------ | :------ |
| `size` | `PipelineDimension` |
#### Returns
`void`
#### Inherited from
Layer.onResize
___
### onScroll
`Optional` **onScroll**(`scroll`): `void`
监听滚动
#### Parameters
| Name | Type |
| :------ | :------ |
| `scroll` | `Object` |
| `scroll.scrollX` | `number` |
| `scroll.scrollY` | `number` |
#### Returns
`void`
#### Inherited from
Layer.onScroll
___
### onViewportChange
`Optional` **onViewportChange**(): `void`
viewport 更新触发
#### Returns
`void`
#### Inherited from
Layer.onViewportChange
___
### onZoom
`Optional` **onZoom**(`zoom`): `void`
监听缩放
#### Parameters
| Name | Type |
| :------ | :------ |
| `zoom` | `number` |
#### Returns
`void`
#### Inherited from
Layer.onZoom
___
### render
`Optional` **render**(): `Element`
绘制 react
#### Returns
`Element`
#### Inherited from
Layer.render
---
url: /auto-docs/renderer/classes/FlowSelectConfigEntity.md
---
# Class: FlowSelectConfigEntity
圈选节点相关数据存储
## Hierarchy
- `ConfigEntity`\<`FlowSelectConfigEntityData`\>
↳ **`FlowSelectConfigEntity`**
## Table of contents
### Constructors
- [constructor](./FlowSelectConfigEntity.md#constructor)
### Properties
- [\_\_opts\_type\_\_](./FlowSelectConfigEntity.md#__opts_type__)
- [boundsPadding](./FlowSelectConfigEntity.md#boundspadding)
- [entityManager](./FlowSelectConfigEntity.md#entitymanager)
- [onDataChange](./FlowSelectConfigEntity.md#ondatachange)
- [onEntityChange](./FlowSelectConfigEntity.md#onentitychange)
- [preDispose](./FlowSelectConfigEntity.md#predispose)
- [toDispose](./FlowSelectConfigEntity.md#todispose)
- [type](./FlowSelectConfigEntity.md#type)
### Accessors
- [config](./FlowSelectConfigEntity.md#config)
- [context](./FlowSelectConfigEntity.md#context)
- [disposed](./FlowSelectConfigEntity.md#disposed)
- [id](./FlowSelectConfigEntity.md#id)
- [onDispose](./FlowSelectConfigEntity.md#ondispose)
- [savedInManager](./FlowSelectConfigEntity.md#savedinmanager)
- [selectedNodes](./FlowSelectConfigEntity.md#selectednodes)
- [type](./FlowSelectConfigEntity.md#type-1)
- [version](./FlowSelectConfigEntity.md#version)
### Methods
- [addData](./FlowSelectConfigEntity.md#adddata)
- [addInitializeData](./FlowSelectConfigEntity.md#addinitializedata)
- [checkChanged](./FlowSelectConfigEntity.md#checkchanged)
- [clearSelectedNodes](./FlowSelectConfigEntity.md#clearselectednodes)
- [dispose](./FlowSelectConfigEntity.md#dispose)
- [fromJSON](./FlowSelectConfigEntity.md#fromjson)
- [getData](./FlowSelectConfigEntity.md#getdata)
- [getDefaultConfig](./FlowSelectConfigEntity.md#getdefaultconfig)
- [getDefaultDataRegistries](./FlowSelectConfigEntity.md#getdefaultdataregistries)
- [getSelectedBounds](./FlowSelectConfigEntity.md#getselectedbounds)
- [getService](./FlowSelectConfigEntity.md#getservice)
- [hasData](./FlowSelectConfigEntity.md#hasdata)
- [onConfigChanged](./FlowSelectConfigEntity.md#onconfigchanged)
- [removeData](./FlowSelectConfigEntity.md#removedata)
- [reset](./FlowSelectConfigEntity.md#reset)
- [selectFromBounds](./FlowSelectConfigEntity.md#selectfrombounds)
- [toJSON](./FlowSelectConfigEntity.md#tojson)
- [updateConfig](./FlowSelectConfigEntity.md#updateconfig)
- [updateData](./FlowSelectConfigEntity.md#updatedata)
## Constructors
### constructor
**new FlowSelectConfigEntity**(`opts`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `opts` | `EntityOpts` |
#### Inherited from
ConfigEntity\.constructor
## Properties
### \_\_opts\_type\_\_
**\_\_opts\_type\_\_**: `EntityOpts`
#### Inherited from
ConfigEntity.\_\_opts\_type\_\_
___
### boundsPadding
**boundsPadding**: `number` = `BOUNDS_PADDING_DEFAULT`
___
### entityManager
`Readonly` **entityManager**: `EntityManager`
全局的entity管理器
#### Inherited from
ConfigEntity.entityManager
___
### onDataChange
`Readonly` **onDataChange**: `Event`\<`EntityDataChangedEvent`\<`Entity`\<`EntityOpts`\>\>\>
数据更改事件
#### Inherited from
ConfigEntity.onDataChange
___
### onEntityChange
`Readonly` **onEntityChange**: `Event`\<`Entity`\<`EntityOpts`\>\>
修改会触发
#### Inherited from
ConfigEntity.onEntityChange
___
### preDispose
`Readonly` **preDispose**: `DisposableCollection`
销毁前事件管理
#### Inherited from
ConfigEntity.preDispose
___
### toDispose
`Readonly` **toDispose**: `DisposableCollection`
销毁事件管理
#### Inherited from
ConfigEntity.toDispose
___
### type
`Static` **type**: `string` = `'FlowSelectConfigEntity'`
#### Overrides
ConfigEntity.type
## Accessors
### config
`get` **config**(): `P`
#### Returns
`P`
#### Inherited from
ConfigEntity.config
___
### context
`get` **context**(): `any`
#### Returns
`any`
#### Inherited from
ConfigEntity.context
___
### disposed
`get` **disposed**(): `boolean`
#### Returns
`boolean`
#### Inherited from
ConfigEntity.disposed
___
### id
`get` **id**(): `string`
实体 id
#### Returns
`string`
#### Inherited from
ConfigEntity.id
___
### onDispose
`get` **onDispose**(): `Event`\<`void`\>
销毁事件
#### Returns
`Event`\<`void`\>
#### Inherited from
ConfigEntity.onDispose
___
### savedInManager
`get` **savedInManager**(): `boolean`
是否存到全局 manager，默认 true
#### Returns
`boolean`
#### Inherited from
ConfigEntity.savedInManager
___
### selectedNodes
`get` **selectedNodes**(): `FlowNodeEntity`[]
#### Returns
`FlowNodeEntity`[]
`set` **selectedNodes**(`nodes`): `void`
选中节点
#### Parameters
| Name | Type |
| :------ | :------ |
| `nodes` | `FlowNodeEntity`[] |
#### Returns
`void`
___
### type
`get` **type**(): `string`
实体类型
#### Returns
`string`
#### Inherited from
ConfigEntity.type
___
### version
`get` **version**(): `number`
实体的版本
#### Returns
`number`
#### Inherited from
ConfigEntity.version
## Methods
### addData
**addData**\<`D`\>(`Registry`, `defaultProps?`): `D`
添加数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\> |
| `defaultProps?` | `EntityDataProps`\<`D`\> |
#### Returns
`D`
#### Inherited from
ConfigEntity.addData
___
### addInitializeData
**addInitializeData**(`datas`, `dataConfig?`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `datas` | `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[] |
| `dataConfig?` | `any` |
#### Returns
`void`
#### Inherited from
ConfigEntity.addInitializeData
___
### checkChanged
**checkChanged**(`oldData`, `newData`): `boolean`
判断 config 数据是否变化
#### Parameters
| Name | Type |
| :------ | :------ |
| `oldData` | `FlowSelectConfigEntityData` |
| `newData` | `Partial`\<`FlowSelectConfigEntityData`\> |
#### Returns
`boolean`
#### Inherited from
ConfigEntity.checkChanged
___
### clearSelectedNodes
**clearSelectedNodes**(): `void`
清除选中节点
#### Returns
`void`
___
### dispose
**dispose**(): `void`
销毁实体
#### Returns
`void`
#### Inherited from
ConfigEntity.dispose
___
### fromJSON
**fromJSON**(`data?`): `void`
还原数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `data?` | `any` |
#### Returns
`void`
#### Inherited from
ConfigEntity.fromJSON
___
### getData
**getData**\<`D`\>(`Registry`): `D`
获取 data 数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`D`\> |
#### Returns
`D`
#### Inherited from
ConfigEntity.getData
___
### getDefaultConfig
**getDefaultConfig**(): `FlowSelectConfigEntityData`
#### Returns
`FlowSelectConfigEntityData`
#### Overrides
ConfigEntity.getDefaultConfig
___
### getDefaultDataRegistries
**getDefaultDataRegistries**(): `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[]
默认初始化的 Data
#### Returns
`EntityDataRegistry`\<`EntityData`\<`any`, {}\>\>[]
#### Inherited from
ConfigEntity.getDefaultDataRegistries
___
### getSelectedBounds
**getSelectedBounds**(): `Rectangle`
获取选中节点外围的最大边框
#### Returns
`Rectangle`
___
### getService
**getService**\<`T`\>(`identifier`): `T`
获取 IOC 服务
#### Type parameters
| Name |
| :------ |
| `T` |
#### Parameters
| Name | Type |
| :------ | :------ |
| `identifier` | `ServiceIdentifier`\<`T`\> |
#### Returns
`T`
#### Inherited from
ConfigEntity.getService
___
### hasData
**hasData**(`Registry`): `boolean`
是否有指定数据
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`EntityData`\<`any`, {}\>\> |
#### Returns
`boolean`
#### Inherited from
ConfigEntity.hasData
___
### onConfigChanged
**onConfigChanged**(`fn`): `Disposable`
#### Parameters
| Name | Type |
| :------ | :------ |
| `fn` | (`data`: `FlowSelectConfigEntityData`) => `void` |
#### Returns
`Disposable`
#### Inherited from
ConfigEntity.onConfigChanged
___
### removeData
**removeData**\<`D`\>(`Registry`): `void`
删除数据，初始化状态注入的数据无法被删除
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`D`\> |
#### Returns
`void`
#### Inherited from
ConfigEntity.removeData
___
### reset
**reset**(): `void`
重制为初始化状态
#### Returns
`void`
#### Inherited from
ConfigEntity.reset
___
### selectFromBounds
**selectFromBounds**(`rect`, `transforms`): `void`
通过选择框选中节点
#### Parameters
| Name | Type |
| :------ | :------ |
| `rect` | `Rectangle` |
| `transforms` | `FlowNodeTransformData`[] |
#### Returns
`void`
___
### toJSON
**toJSON**(): `any`
存储数据，用于持久化存储
#### Returns
`any`
#### Inherited from
ConfigEntity.toJSON
___
### updateConfig
**updateConfig**(`props`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | `Partial`\<`FlowSelectConfigEntityData`\> |
#### Returns
`void`
#### Inherited from
ConfigEntity.updateConfig
___
### updateData
**updateData**\<`D`\>(`Registry`, `props`): `void`
更新实体的数据
#### Type parameters
| Name | Type |
| :------ | :------ |
| `D` | extends `EntityData`\<`any`, {}, `D`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `Registry` | `EntityDataRegistry`\<`D`\> |
| `props` | `EntityDataProps`\<`D`\> |
#### Returns
`void`
#### Inherited from
ConfigEntity.updateData
---
url: /auto-docs/renderer/classes/FlowSelectorBoundsLayer.md
---
# Class: FlowSelectorBoundsLayer
流程节点被框选后的边界区域渲染
## Hierarchy
- `Layer`\<[`FlowSelectorBoundsLayerOptions`](../interfaces/FlowSelectorBoundsLayerOptions.md)\>
↳ **`FlowSelectorBoundsLayer`**
## Table of contents
### Constructors
- [constructor](./FlowSelectorBoundsLayer.md#constructor)
### Properties
- [\_transforms](./FlowSelectorBoundsLayer.md#_transforms)
- [commandRegistry](./FlowSelectorBoundsLayer.md#commandregistry)
- [config](./FlowSelectorBoundsLayer.md#config)
- [context](./FlowSelectorBoundsLayer.md#context)
- [entityManager](./FlowSelectorBoundsLayer.md#entitymanager)
- [getOtherLayer](./FlowSelectorBoundsLayer.md#getotherlayer)
- [isFocused](./FlowSelectorBoundsLayer.md#isfocused)
- [listenGlobalEvent](./FlowSelectorBoundsLayer.md#listenglobalevent)
- [listenPlaygroundEvent](./FlowSelectorBoundsLayer.md#listenplaygroundevent)
- [node](./FlowSelectorBoundsLayer.md#node)
- [observeManager](./FlowSelectorBoundsLayer.md#observemanager)
- [options](./FlowSelectorBoundsLayer.md#options)
- [pipelineNode](./FlowSelectorBoundsLayer.md#pipelinenode)
- [playgroundNode](./FlowSelectorBoundsLayer.md#playgroundnode)
- [reloadEntities](./FlowSelectorBoundsLayer.md#reloadentities)
- [renderStates](./FlowSelectorBoundsLayer.md#renderstates)
- [renderWithReactMemo](./FlowSelectorBoundsLayer.md#renderwithreactmemo)
- [rendererRegistry](./FlowSelectorBoundsLayer.md#rendererregistry)
- [selectBoundsBackground](./FlowSelectorBoundsLayer.md#selectboundsbackground)
### Methods
- [autorun](./FlowSelectorBoundsLayer.md#autorun)
- [createDOMCache](./FlowSelectorBoundsLayer.md#createdomcache)
- [dispose](./FlowSelectorBoundsLayer.md#dispose)
- [getPosFromMouseEvent](./FlowSelectorBoundsLayer.md#getposfrommouseevent)
- [isEnabled](./FlowSelectorBoundsLayer.md#isenabled)
- [onBlur](./FlowSelectorBoundsLayer.md#onblur)
- [onFocus](./FlowSelectorBoundsLayer.md#onfocus)
- [onReadonlyOrDisabledChange](./FlowSelectorBoundsLayer.md#onreadonlyordisabledchange)
- [onReady](./FlowSelectorBoundsLayer.md#onready)
- [onResize](./FlowSelectorBoundsLayer.md#onresize)
- [onScroll](./FlowSelectorBoundsLayer.md#onscroll)
- [onViewportChange](./FlowSelectorBoundsLayer.md#onviewportchange)
- [onZoom](./FlowSelectorBoundsLayer.md#onzoom)
- [render](./FlowSelectorBoundsLayer.md#render)
## Constructors
### constructor
**new FlowSelectorBoundsLayer**()
#### Inherited from
Layer\.constructor
## Properties
### \_transforms
**\_transforms**: `FlowNodeTransformData`[]
___
### commandRegistry
`Readonly` **commandRegistry**: `CommandRegistry`
___
### config
**config**: `PlaygroundConfigEntity`
全局画布配置
#### Inherited from
Layer.config
___
### context
`Readonly` **context**: `any`
#### Inherited from
Layer.context
___
### entityManager
`Readonly` **entityManager**: `EntityManager`
实体管理器
#### Inherited from
Layer.entityManager
___
### getOtherLayer
**getOtherLayer**: \(`layerRegistry`: `LayerRegistry`\<`T`\>) => `undefined` \| `T`
#### Type declaration
\<`T`\>(`layerRegistry`): `undefined` \| `T`
可以用于获取别的 layer
##### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `Layer`\<`any`, `any`, `T`\> |
##### Parameters
| Name | Type |
| :------ | :------ |
| `layerRegistry` | `LayerRegistry`\<`T`\> |
##### Returns
`undefined` \| `T`
#### Inherited from
Layer.getOtherLayer
___
### isFocused
`Readonly` **isFocused**: `boolean`
playground 是否 focused
#### Inherited from
Layer.isFocused
___
### listenGlobalEvent
**listenGlobalEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 document 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
#### Inherited from
Layer.listenGlobalEvent
___
### listenPlaygroundEvent
**listenPlaygroundEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 playground 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
#### Inherited from
Layer.listenPlaygroundEvent
___
### node
`Readonly` **node**: `HTMLDivElement`
#### Overrides
Layer.node
___
### observeManager
**observeManager**: `PipelineEntities`
当前 layer 的所有监听的实体数据
#### Inherited from
Layer.observeManager
___
### options
**options**: [`FlowSelectorBoundsLayerOptions`](../interfaces/FlowSelectorBoundsLayerOptions.md)
layer 的配置, 由 registerLayer(Layer, LayerOptions) 传入
#### Inherited from
Layer.options
___
### pipelineNode
**pipelineNode**: `HTMLElement`
父节点
#### Inherited from
Layer.pipelineNode
___
### playgroundNode
**playgroundNode**: `HTMLElement`
画布根节点
#### Inherited from
Layer.playgroundNode
___
### reloadEntities
**reloadEntities**: () => `boolean`
#### Type declaration
(): `boolean`
加载 layer 注册的实体数据，内部使用，不需要手动触发
##### Returns
`boolean`
数据是否变化
#### Inherited from
Layer.reloadEntities
___
### renderStates
**renderStates**: `FlowNodeRenderData`[]
需要监听节点的展开和收起状态，重新绘制边框
___
### renderWithReactMemo
**renderWithReactMemo**: `boolean`
默认在渲染时候都会启用 react memo 进行隔离，这种情况就需要数据驱动更新
#### Inherited from
Layer.renderWithReactMemo
___
### rendererRegistry
`Readonly` **rendererRegistry**: [`FlowRendererRegistry`](./FlowRendererRegistry.md)
___
### selectBoundsBackground
`Readonly` **selectBoundsBackground**: `HTMLDivElement`
## Methods
### autorun
`Optional` **autorun**(): `void`
自动触发更新，在不需要 react 的时候用这个方法
#### Returns
`void`
#### Inherited from
Layer.autorun
___
### createDOMCache
**createDOMCache**\<`T`\>(`className`, `children?`): `CacheManager`\<`T`, `CacheOriginItem`\>
创建 dom 缓冲池
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `DOMCache`\<`T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `className` | `string` \| () => `HTMLElement` |
| `children?` | `string` |
#### Returns
`CacheManager`\<`T`, `CacheOriginItem`\>
#### Inherited from
Layer.createDOMCache
___
### dispose
**dispose**(): `void`
销毁
#### Returns
`void`
#### Inherited from
Layer.dispose
___
### getPosFromMouseEvent
**getPosFromMouseEvent**(`event`, `addScale?`): `PositionSchema`
获取鼠标在 Playground 的位置
#### Parameters
| Name | Type |
| :------ | :------ |
| `event` | `Object` |
| `event.clientX` | `number` |
| `event.clientY` | `number` |
| `addScale?` | `boolean` |
#### Returns
`PositionSchema`
#### Inherited from
Layer.getPosFromMouseEvent
___
### isEnabled
**isEnabled**(): `boolean`
#### Returns
`boolean`
___
### onBlur
`Optional` **onBlur**(): `void`
playground blur 时候触发
#### Returns
`void`
#### Inherited from
Layer.onBlur
___
### onFocus
`Optional` **onFocus**(): `void`
playground focus 时候触发
#### Returns
`void`
#### Inherited from
Layer.onFocus
___
### onReadonlyOrDisabledChange
`Optional` **onReadonlyOrDisabledChange**(`state`): `void`
readonly 或 disable 状态变化
#### Parameters
| Name | Type |
| :------ | :------ |
| `state` | `Object` |
| `state.disabled` | `boolean` |
| `state.readonly` | `boolean` |
#### Returns
`void`
#### Inherited from
Layer.onReadonlyOrDisabledChange
___
### onReady
**onReady**(): `void`
#### Returns
`void`
#### Overrides
Layer.onReady
___
### onResize
`Optional` **onResize**(`size`): `void`
playground 大小变化时候会触发
#### Parameters
| Name | Type |
| :------ | :------ |
| `size` | `PipelineDimension` |
#### Returns
`void`
#### Inherited from
Layer.onResize
___
### onScroll
`Optional` **onScroll**(`scroll`): `void`
监听滚动
#### Parameters
| Name | Type |
| :------ | :------ |
| `scroll` | `Object` |
| `scroll.scrollX` | `number` |
| `scroll.scrollY` | `number` |
#### Returns
`void`
#### Inherited from
Layer.onScroll
___
### onViewportChange
**onViewportChange**(): `void`
#### Returns
`void`
#### Overrides
Layer.onViewportChange
___
### onZoom
**onZoom**(`scale`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `scale` | `number` |
#### Returns
`void`
#### Overrides
Layer.onZoom
___
### render
**render**(): `Element`
#### Returns
`Element`
#### Overrides
Layer.render
---
url: /auto-docs/renderer/classes/FlowSelectorBoxLayer.md
---
# Class: FlowSelectorBoxLayer
流程选择框
## Hierarchy
- `Layer`\<[`FlowSelectorBoxOptions`](../interfaces/FlowSelectorBoxOptions.md)\>
↳ **`FlowSelectorBoxLayer`**
## Table of contents
### Constructors
- [constructor](./FlowSelectorBoxLayer.md#constructor)
### Properties
- [config](./FlowSelectorBoxLayer.md#config)
- [context](./FlowSelectorBoxLayer.md#context)
- [contextMenuService](./FlowSelectorBoxLayer.md#contextmenuservice)
- [entityManager](./FlowSelectorBoxLayer.md#entitymanager)
- [getOtherLayer](./FlowSelectorBoxLayer.md#getotherlayer)
- [isFocused](./FlowSelectorBoxLayer.md#isfocused)
- [listenGlobalEvent](./FlowSelectorBoxLayer.md#listenglobalevent)
- [listenPlaygroundEvent](./FlowSelectorBoxLayer.md#listenplaygroundevent)
- [node](./FlowSelectorBoxLayer.md#node)
- [observeManager](./FlowSelectorBoxLayer.md#observemanager)
- [options](./FlowSelectorBoxLayer.md#options)
- [pipelineNode](./FlowSelectorBoxLayer.md#pipelinenode)
- [playgroundNode](./FlowSelectorBoxLayer.md#playgroundnode)
- [reloadEntities](./FlowSelectorBoxLayer.md#reloadentities)
- [renderWithReactMemo](./FlowSelectorBoxLayer.md#renderwithreactmemo)
- [selectionService](./FlowSelectorBoxLayer.md#selectionservice)
### Methods
- [autorun](./FlowSelectorBoxLayer.md#autorun)
- [createDOMCache](./FlowSelectorBoxLayer.md#createdomcache)
- [dispose](./FlowSelectorBoxLayer.md#dispose)
- [getPosFromMouseEvent](./FlowSelectorBoxLayer.md#getposfrommouseevent)
- [isEnabled](./FlowSelectorBoxLayer.md#isenabled)
- [onBlur](./FlowSelectorBoxLayer.md#onblur)
- [onFocus](./FlowSelectorBoxLayer.md#onfocus)
- [onReadonlyOrDisabledChange](./FlowSelectorBoxLayer.md#onreadonlyordisabledchange)
- [onReady](./FlowSelectorBoxLayer.md#onready)
- [onResize](./FlowSelectorBoxLayer.md#onresize)
- [onScroll](./FlowSelectorBoxLayer.md#onscroll)
- [onViewportChange](./FlowSelectorBoxLayer.md#onviewportchange)
- [onZoom](./FlowSelectorBoxLayer.md#onzoom)
- [render](./FlowSelectorBoxLayer.md#render)
## Constructors
### constructor
**new FlowSelectorBoxLayer**()
#### Inherited from
Layer\.constructor
## Properties
### config
**config**: `PlaygroundConfigEntity`
全局画布配置
#### Inherited from
Layer.config
___
### context
`Readonly` **context**: `any`
#### Inherited from
Layer.context
___
### contextMenuService
`Readonly` **contextMenuService**: `ContextMenuService`
___
### entityManager
`Readonly` **entityManager**: `EntityManager`
实体管理器
#### Inherited from
Layer.entityManager
___
### getOtherLayer
**getOtherLayer**: \(`layerRegistry`: `LayerRegistry`\<`T`\>) => `undefined` \| `T`
#### Type declaration
\<`T`\>(`layerRegistry`): `undefined` \| `T`
可以用于获取别的 layer
##### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `Layer`\<`any`, `any`, `T`\> |
##### Parameters
| Name | Type |
| :------ | :------ |
| `layerRegistry` | `LayerRegistry`\<`T`\> |
##### Returns
`undefined` \| `T`
#### Inherited from
Layer.getOtherLayer
___
### isFocused
`Readonly` **isFocused**: `boolean`
playground 是否 focused
#### Inherited from
Layer.isFocused
___
### listenGlobalEvent
**listenGlobalEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 document 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
#### Inherited from
Layer.listenGlobalEvent
___
### listenPlaygroundEvent
**listenPlaygroundEvent**: (`name`: `string`, `handle`: (`event`: `any`) => `boolean` \| `void`, `priority?`: `number`, `options?`: `AddEventListenerOptions`) => `Disposable`
#### Type declaration
(`name`, `handle`, `priority?`, `options?`): `Disposable`
监听 playground 上的事件
规则：
1. 按 priority 排序，越高先执行
2. 没有提供，按 layer 的注册顺序，后注册先执行 (符合冒泡排序)
3. 执行返回 true，则阻止后续的执行
##### Parameters
| Name | Type |
| :------ | :------ |
| `name` | `string` |
| `handle` | (`event`: `any`) => `boolean` \| `void` |
| `priority?` | `number` |
| `options?` | `AddEventListenerOptions` |
##### Returns
`Disposable`
#### Inherited from
Layer.listenPlaygroundEvent
___
### node
`Readonly` **node**: `HTMLDivElement`
#### Overrides
Layer.node
___
### observeManager
**observeManager**: `PipelineEntities`
当前 layer 的所有监听的实体数据
#### Inherited from
Layer.observeManager
___
### options
**options**: [`FlowSelectorBoxOptions`](../interfaces/FlowSelectorBoxOptions.md)
layer 的配置, 由 registerLayer(Layer, LayerOptions) 传入
#### Inherited from
Layer.options
___
### pipelineNode
**pipelineNode**: `HTMLElement`
父节点
#### Inherited from
Layer.pipelineNode
___
### playgroundNode
**playgroundNode**: `HTMLElement`
画布根节点
#### Inherited from
Layer.playgroundNode
___
### reloadEntities
**reloadEntities**: () => `boolean`
#### Type declaration
(): `boolean`
加载 layer 注册的实体数据，内部使用，不需要手动触发
##### Returns
`boolean`
数据是否变化
#### Inherited from
Layer.reloadEntities
___
### renderWithReactMemo
**renderWithReactMemo**: `boolean`
默认在渲染时候都会启用 react memo 进行隔离，这种情况就需要数据驱动更新
#### Inherited from
Layer.renderWithReactMemo
___
### selectionService
`Readonly` **selectionService**: `SelectionService`
## Methods
### autorun
`Optional` **autorun**(): `void`
自动触发更新，在不需要 react 的时候用这个方法
#### Returns
`void`
#### Inherited from
Layer.autorun
___
### createDOMCache
**createDOMCache**\<`T`\>(`className`, `children?`): `CacheManager`\<`T`, `CacheOriginItem`\>
创建 dom 缓冲池
#### Type parameters
| Name | Type |
| :------ | :------ |
| `T` | extends `DOMCache`\<`T`\> |
#### Parameters
| Name | Type |
| :------ | :------ |
| `className` | `string` \| () => `HTMLElement` |
| `children?` | `string` |
#### Returns
`CacheManager`\<`T`, `CacheOriginItem`\>
#### Inherited from
Layer.createDOMCache
___
### dispose
**dispose**(): `void`
Destroy
#### Returns
`void`
#### Overrides
Layer.dispose
___
### getPosFromMouseEvent
**getPosFromMouseEvent**(`event`, `addScale?`): `PositionSchema`
获取鼠标在 Playground 的位置
#### Parameters
| Name | Type |
| :------ | :------ |
| `event` | `Object` |
| `event.clientX` | `number` |
| `event.clientY` | `number` |
| `addScale?` | `boolean` |
#### Returns
`PositionSchema`
#### Inherited from
Layer.getPosFromMouseEvent
___
### isEnabled
**isEnabled**(): `boolean`
#### Returns
`boolean`
___
### onBlur
`Optional` **onBlur**(): `void`
playground blur 时候触发
#### Returns
`void`
#### Inherited from
Layer.onBlur
___
### onFocus
`Optional` **onFocus**(): `void`
playground focus 时候触发
#### Returns
`void`
#### Inherited from
Layer.onFocus
___
### onReadonlyOrDisabledChange
`Optional` **onReadonlyOrDisabledChange**(`state`): `void`
readonly 或 disable 状态变化
#### Parameters
| Name | Type |
| :------ | :------ |
| `state` | `Object` |
| `state.disabled` | `boolean` |
| `state.readonly` | `boolean` |
#### Returns
`void`
#### Inherited from
Layer.onReadonlyOrDisabledChange
___
### onReady
**onReady**(): `void`
#### Returns
`void`
#### Overrides
Layer.onReady
___
### onResize
`Optional` **onResize**(`size`): `void`
playground 大小变化时候会触发
#### Parameters
| Name | Type |
| :------ | :------ |
| `size` | `PipelineDimension` |
#### Returns
`void`
#### Inherited from
Layer.onResize
___
### onScroll
`Optional` **onScroll**(`scroll`): `void`
监听滚动
#### Parameters
| Name | Type |
| :------ | :------ |
| `scroll` | `Object` |
| `scroll.scrollX` | `number` |
| `scroll.scrollY` | `number` |
#### Returns
`void`
#### Inherited from
Layer.onScroll
___
### onViewportChange
`Optional` **onViewportChange**(): `void`
viewport 更新触发
#### Returns
`void`
#### Inherited from
Layer.onViewportChange
___
### onZoom
`Optional` **onZoom**(`zoom`): `void`
监听缩放
#### Parameters
| Name | Type |
| :------ | :------ |
| `zoom` | `number` |
#### Returns
`void`
#### Inherited from
Layer.onZoom
___
### render
`Optional` **render**(): `Element`
绘制 react
#### Returns
`Element`
#### Inherited from
Layer.render
---
url: /auto-docs/renderer/classes/SelectorBoxConfigEntity.md
---
# Class: SelectorBoxConfigEntity
选择框配置
## Hierarchy
- `ConfigEntity`\<[`SelectorBoxConfigData`](../interfaces/SelectorBoxConfigData.md)\>
↳ **`SelectorBoxConfigEntity`**
## Table of contents
### Constructors
- [constructor](./SelectorBoxConfigEntity.md#constructor)
### Properties
- [\_\_opts\_type\_\_](./SelectorBoxConfigEntity.md#__opts_type__)
- [entityManager](./SelectorBoxConfigEntity.md#entitymanager)
- [onDataChange](./SelectorBoxConfigEntity.md#ondatachange)
- [onEntityChange](./SelectorBoxConfigEntity.md#onentitychange)
- [preDispose](./SelectorBoxConfigEntity.md#predispose)
- [toDispose](./SelectorBoxConfigEntity.md#todispose)
- [type](./SelectorBoxConfigEntity.md#type)
### Accessors
- [collapsed](./SelectorBoxConfigEntity.md#collapsed)
- [config](./SelectorBoxConfigEntity.md#config)
- [context](./SelectorBoxConfigEntity.md#context)
- [disabled](./SelectorBoxConfigEntity.md#disabled)
- [disposed](./SelectorBoxConfigEntity.md#disposed)
- [dragInfo](./SelectorBoxConfigEntity.md#draginfo)
- [id](./SelectorBoxConfigEntity.md#id)
- [isMoving](./SelectorBoxConfigEntity.md#ismoving)
- [isStart](./SelectorBoxConfigEntity.md#isstart)
- [onDispose](./SelectorBoxConfigEntity.md#ondispose)
- [position](./SelectorBoxConfigEntity.md#position)
- [savedInManager](./SelectorBoxConfigEntity.md#savedinmanager)
- [size](./SelectorBoxConfigEntity.md#size)
- [type](./SelectorBoxConfigEntity.md#type-1)
- [version](./SelectorBoxConfigEntity.md#version)
### Methods
- [addData](./SelectorBoxConfigEntity.md#adddata)
- [addInitializeData](./SelectorBoxConfigEntity.md#addinitializedata)
- [checkChanged](./SelectorBoxConfigEntity.md#checkchanged)
- [collapse](./SelectorBoxConfigEntity.md#collapse)
- [dispose](./SelectorBoxConfigEntity.md#dispose)
- [fromJSON](./SelectorBoxConfigEntity.md#fromjson)
- [getData](./SelectorBoxConfigEntity.md#getdata)
- [getDefaultConfig](./SelectorBoxConfigEntity.md#getdefaultconfig)
- [getDefaultDataRegistries](./SelectorBoxConfigEntity.md#getdefaultdataregistries)
- [getService](./SelectorBoxConfigEntity.md#getservice)
- [hasData](./SelectorBoxConfigEntity.md#hasdata)
- [onConfigChanged](./SelectorBoxConfigEntity.md#onconfigchanged)
- [removeData](./SelectorBoxConfigEntity.md#removedata)
- [reset](./SelectorBoxConfigEntity.md#reset)
- [setDragInfo](./SelectorBoxConfigEntity.md#setdraginfo)
- [toJSON](./SelectorBoxConfigEntity.md#tojson)
- [toRectangle](./SelectorBoxConfigEntity.md#torectangle)
- [updateConfig](./SelectorBoxConfigEntity.md#updateconfig)
- [updateData](./SelectorBoxConfigEntity.md#updatedata)
## Constructors
### constructor
**new SelectorBoxConfigEntity**(`opts`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `opts` | `EntityOpts` |
#### Inherited from
ConfigEntity\
