@logicflow/core 2.2.1 → 2.2.3

package/dist/docs/api/type/index.zh.md

@@ -0,0 +1,99 @@
+---
+nav: API
+group:
+  title: 类型字典
+  order: 3
+title: 总览
+toc: content
+order: 0
+---
+
+欢迎阅读 LogicFlow 类型说明。本页为 **API「类型字典」分组入口**，收录与构造方法、实例能力相关的类型索引与正文。
+
+**分组内文档**
+
+- [`配置相关`](./MainTypes.zh.md)
+- [`画布相关`](./canvas-types.zh.md)
+- [`节点相关`](./node-types.zh.md)
+- [`内置插件相关`](./plugin-types.zh.md)
+- [`主题相关`](./Theme.zh.md)
+
+下面是 LogicFlow 中定义的每种类型的简介（条目与旧版类型字典一致，便于检索）：
+
+## 主题样式相关类型
+
+- [Theme](Theme.zh.md#theme主题配置)：LogicFlow主题配置项，提供了目前LogicFlow支持的元素的样式配置。
+- [CommonTheme](Theme.zh.md#commontheme通用主题)：各种主题类型的基础，提供了诸如 `fill`、`stroke` 和 `strokeWidth` 等通用属性。
+- [NodeTheme](Theme.zh.md#nodetheme节点主题)：节点主题类型，例如 `RectTheme`、`CircleTheme`、`PolygonTheme` 和 `EllipseTheme`，继承自 `CommonTheme` 并定义了特定于每种形状的属性。
+- [EdgeTheme](Theme.zh.md#edgetheme边主题)：扩展了 `CommonTheme`，并包含了特定于边样式的附加属性，允许对边的外观进行详细的自定义。
+- [TextTheme](Theme.zh.md#texttheme文本主题)：概述了与文本样式相关的属性，包括 `color`、`fontSize` 和 `textAnchor`，同时也扩展了 `CommonTheme`。
+
+## 实例相关
+
+- [Common](MainTypes.zh.md#common实例基础配置项)：LogicFlow 实例的基础配置项，包括画布的 DOM 节点、宽度、高度等。
+- [BackgroundConfig](MainTypes.zh.md#backgroundconfig背景配置)：定义画布背景的配置，包括背景图片和背景平铺方式。
+- [GridOptions](MainTypes.zh.md#gridoptions网格配置)：定义画布网格的配置，包括网格大小、可见性和网格类型。
+- [KeyboardDef](MainTypes.zh.md#keyboarddef快捷键参数类型)：定义快捷键的配置，包括启用状态和快捷键组合。
+- [EdgeType](MainTypes.zh.md#edgetype边类型)：定义边的类型，包括直线、折线和贝塞尔曲线。
+- [AnimationConfig](MainTypes.zh.md#animationconfig动画配置)：定义动画的配置，包括节点和边的动画启用状态。
+- [EdgeGeneratorType](MainTypes.zh.md#edgegeneratortype自定义边生成函数)：定义自定义边生成函数的类型，用于根据节点类型生成不同类型的边。
+- [customTargetAnchorType](MainTypes.zh.md#customtargetanchortype自定义锚点连接规则)：定义自定义锚点连接规则函数类型，用于决定手动连线落到目标节点时连接哪个锚点。
+- [GuardsConfig](MainTypes.zh.md#guardsconfig守卫函数类型)：定义守卫函数的配置，用于在克隆或删除节点/边之前进行拦截。
+- [AppendConfig](MainTypes.zh.md#appendconfig折线边选区信息)：定义折线边选区的信息，包括起点、终点、方向和是否可拖动。
+- [ArrowConfig](MainTypes.zh.md#arrowconfig箭头配置)：定义箭头的配置，包括箭头起点和终点的样式。
+- [AttributesType](MainTypes.zh.md#attributestype通用属性类型)：定义通用属性类型，允许为 LogicFlow 元素附加自定义属性。
+- [RegisterConfig](MainTypes.zh.md#registerconfig注册配置)：定义注册新元素的配置，包括元素类型、视图组件和模型构造函数。
+- [RegisterElement](MainTypes.zh.md#registerelement注册元素配置)：定义注册新元素类型的配置，包括视图组件和数据模型。
+- [RegisterElementFunc](MainTypes.zh.md#registerelementfunc)：定义注册元素的函数类型，接受注册参数并返回注册元素对象。
+- [RegisterParam](MainTypes.zh.md#registerparam)：定义注册元素时的参数类型，包括 hyperscript 函数和其他自定义属性。
+- [BaseNodeModelCtor](MainTypes.zh.md#basenodemodelctor基础节点构造函数)：定义基础节点模型的构造函数类型，用于创建节点模型实例。
+- [BaseEdgeModelCtor](MainTypes.zh.md#baseedgemodelctor基础边构造函数)：定义基础边模型的构造函数类型，用于创建边模型实例。
+
+## 画布相关
+
+- [GraphConfigData](MainTypes.zh.md#graphconfigdata流程图渲染数据类型)：定义流程图渲染数据的类型，包括节点和边的配置。
+- [GraphData](MainTypes.zh.md#graphdata画布数据)：定义画布数据的类型，包括节点和边的数据结构。
+- [GraphElement](MainTypes.zh.md#graphelement)：定义画布上的元素类型，包括节点和边。
+- [GraphElementCtor](MainTypes.zh.md#graphelementctor画布元素构造函数)：定义画布元素的构造函数类型，用于创建节点或边的实例。
+- [Position](MainTypes.zh.md#position坐标类型)：定义二维空间中的点的坐标类型，包括 x 和 y 坐标。
+- [Point](MainTypes.zh.md#point点类型)：扩展自 Position 类型，表示二维空间中的点，包含可选的 id 和其他属性。
+- [PointTuple](MainTypes.zh.md#pointtuple点坐标组)：表示二维空间中点的元组，由两个数值组成，分别对应 x 和 y 坐标。
+- [PropertiesType](MainTypes.zh.md#propertiestype元素属性)：定义元素的属性类型，包括宽度、高度、样式和文本样式。
+- [TextConfig](MainTypes.zh.md#textconfig文本配置)：定义文本元素的配置，包括文本内容、位置、编辑和拖动选项。
+- [ClientPosition](MainTypes.zh.md#clientposition元素位置)：表示事件相对于 DOM 覆盖层和画布覆盖层的位置。
+
+## 节点相关
+
+- [NodeConfig](MainTypes.zh.md#nodeconfig节点配置)：定义节点的配置结构，包括节点的特性、位置和行为。
+- [OffsetData](MainTypes.zh.md#offsetdata移动偏移)：定义节点在拖拽时移动偏移值的数据结构。
+- [FakeNodeConfig](MainTypes.zh.md#fakenodeconfig虚拟节点配置)：定义虚拟节点的配置，用于拖拽创建节点过程中的临时节点。
+- [VectorData](MainTypes.zh.md#vectordata向量数据)：定义二维空间中的向量数据，包括 x 轴和 y 轴的变化量。
+- [DomAttributes](MainTypes.zh.md#domattributesdom属性)：定义节点的 DOM 属性，包括 CSS 类名和其他自定义属性。
+
+## 边相关
+
+- [EdgeConfig](MainTypes.zh.md#edgeconfig边配置)：定义边的配置结构，包括边的特性、起点和终点。
+- [EdgeData](MainTypes.zh.md#edgedata边数据)：扩展自 EdgeConfig，表示边的数据结构，包括边的特性和行为。
+
+## 插件相关
+
+- [Extension](MainTypes.zh.md#extension插件)：定义 LogicFlow 框架中扩展的结构和行为，包括渲染和销毁方法。
+- [ExtensionRenderFunc](MainTypes.zh.md#extensionrenderfunc插件渲染函数)：定义插件的渲染函数类型，用于在 LogicFlow 环境中渲染扩展内容。
+- [ExtensionType](MainTypes.zh.md#extensiontype插件类型)：定义 LogicFlow 框架中可用的不同形式的扩展，包括构造函数和对象定义。
+- [ExtensionConfig](MainTypes.zh.md#extensionconfig插件配置)：定义插件的配置结构，包括插件标识符、扩展行为和额外属性。
+- [IExtensionProps](MainTypes.zh.md#iextensionprops插件参数类型)：定义插件的参数类型，包括 LogicFlow 实例和扩展属性。
+- [ExtensionConstructor](MainTypes.zh.md#extensionconstructor插件构造函数)：定义插件的构造函数类型，用于创建插件实例。
+- [ExtensionDefinition](MainTypes.zh.md#extensiondefinition插件定义)：定义插件的对象形式，包括插件名称、安装和渲染方法。
+- [LabelConfig](MainTypes.zh.md#labelconfiglabel插件数据类型)：定义 Label 插件支持的渲染数据结构，包括标签位置、内容和样式。
+- [LabelOption](MainTypes.zh.md#labeloptionlabel插件配置项类型)：定义 Label 插件的配置设置，包括标签方向和最大数量。
+- [MenuConfig](MainTypes.zh.md#menuconfigmenu插件菜单项类型)：定义 Menu 插件中菜单项的配置结构，包括显示文本、CSS 类名、图标和回调函数。
+
+有关每种类型的详细信息，请参阅上面链接的相应文档。
+
+## 相关跳转
+
+- 运行时主题与主题类型：[`LogicFlow 实例 > 主题`](../logicflow-instance/theme.zh.md)
+- 构造期配置与嵌套类型：[`构造方法`](../logicflow-constructor/index.zh.md)
+- model 相关文档：[graphModel](../runtime-model/graphModel.zh.md)
+- 插件全局注册：[`LogicFlow.use`](../logicflow-constructor/use.zh.md)
+- 节点/边注册能力：[`实例 > 注册`](../logicflow-instance/register.zh.md)

package/dist/docs/api/type/node-types.en.md

@@ -0,0 +1,21 @@
+---
+nav: API
+group:
+  title: Type dictionary
+  order: 3
+title: Node-related types
+toc: content
+order: 3
+---
+
+This page indexes node and edge data-structure types. Full definitions are in [`MainTypes.en.md`](./MainTypes.en.md).
+
+| Type | Description |
+| :--- | :--- |
+| [`NodeConfig`](./MainTypes.en.md#nodeconfig) | Node configuration |
+| [`OffsetData`](./MainTypes.en.md#offsetdata) | Drag offset payload |
+| [`FakeNodeConfig`](./MainTypes.en.md#fakenodeconfig) | Placeholder node while dragging in |
+| [`VectorData`](./MainTypes.en.md#vectordata) | Vector math helper |
+| [`DomAttributes`](./MainTypes.en.md#domattributes) | DOM attribute bag for nodes |
+| [`EdgeConfig`](./MainTypes.en.md#edgeconfig) | Edge configuration |
+| [`EdgeData`](./MainTypes.en.md#edgedata) | Serialized edge payload |

package/dist/docs/api/type/node-types.zh.md

@@ -0,0 +1,21 @@
+---
+nav: API
+group:
+  title: 类型字典
+  order: 3
+title: 节点相关
+toc: content
+order: 3
+---
+
+本页汇总节点与边数据结构相关类型。详细定义见 [`配置相关`](./MainTypes.zh.md) 对应章节。
+
+| 类型 | 说明 |
+| :--- | :--- |
+| [`NodeConfig`](./MainTypes.zh.md#nodeconfig节点配置) | 节点配置类型。 |
+| [`OffsetData`](./MainTypes.zh.md#offsetdata移动偏移) | 节点移动偏移量类型。 |
+| [`FakeNodeConfig`](./MainTypes.zh.md#fakenodeconfig虚拟节点配置) | 拖拽中的虚拟节点配置类型。 |
+| [`VectorData`](./MainTypes.zh.md#vectordata向量数据) | 向量数据类型。 |
+| [`DomAttributes`](./MainTypes.zh.md#domattributesdom属性) | 节点 DOM 属性类型。 |
+| [`EdgeConfig`](./MainTypes.zh.md#edgeconfig边配置) | 边配置类型。 |
+| [`EdgeData`](./MainTypes.zh.md#edgedata边数据) | 边数据类型。 |

package/dist/docs/api/type/plugin-types.en.md

@@ -0,0 +1,24 @@
+---
+nav: API
+group:
+  title: Type dictionary
+  order: 3
+title: Built-in plugin types
+toc: content
+order: 4
+---
+
+This page indexes extension and built-in plugin typings. Full descriptions live in [`MainTypes.en.md`](./MainTypes.en.md).
+
+| Type | Description |
+| :--- | :--- |
+| [`Extension`](./MainTypes.en.md#extension) | Extension instance contract |
+| [`ExtensionRenderFunc`](./MainTypes.en.md#extensionrenderfunc) | Render hook signature |
+| [`ExtensionType`](./MainTypes.en.md#extensiontype) | Extension union |
+| [`ExtensionConfig`](./MainTypes.en.md#extensionconfig) | Extension registration config |
+| [`IExtensionProps`](./MainTypes.en.md#iextensionprops) | Constructor props |
+| [`ExtensionConstructor`](./MainTypes.en.md#extensionconstructor) | Class-based plugin |
+| [`ExtensionDefinition`](./MainTypes.en.md#extensiondefinition) | Object-style plugin |
+| [`LabelConfig`](./MainTypes.en.md#labelconfig) | Label plugin data |
+| [`LabelOption`](./MainTypes.en.md#labeloption) | Label plugin options |
+| [`MenuConfig`](./MainTypes.en.md#menuconfig) | Context menu entries |

package/dist/docs/api/type/plugin-types.zh.md

@@ -0,0 +1,24 @@
+---
+nav: API
+group:
+  title: 类型字典
+  order: 3
+title: 内置插件相关
+toc: content
+order: 4
+---
+
+本页汇总内置插件与扩展机制相关类型。详细定义见 [`配置相关`](./MainTypes.zh.md) 对应章节。
+
+| 类型 | 说明 |
+| :--- | :--- |
+| [`Extension`](./MainTypes.zh.md#extension插件) | 插件实例接口。 |
+| [`ExtensionRenderFunc`](./MainTypes.zh.md#extensionrenderfunc插件渲染函数) | 插件渲染函数类型。 |
+| [`ExtensionType`](./MainTypes.zh.md#extensiontype插件类型) | 插件联合类型。 |
+| [`ExtensionConfig`](./MainTypes.zh.md#extensionconfig插件配置) | 插件配置结构。 |
+| [`IExtensionProps`](./MainTypes.zh.md#iextensionprops插件参数类型) | 插件构造参数类型。 |
+| [`ExtensionConstructor`](./MainTypes.zh.md#extensionconstructor插件构造函数) | 插件构造函数类型。 |
+| [`ExtensionDefinition`](./MainTypes.zh.md#extensiondefinition插件定义) | 对象式插件定义类型。 |
+| [`LabelConfig`](./MainTypes.zh.md#labelconfiglabel插件数据类型) | Label 插件数据类型。 |
+| [`LabelOption`](./MainTypes.zh.md#labeloptionlabel插件配置项类型) | Label 插件配置类型。 |
+| [`MenuConfig`](./MainTypes.zh.md#menuconfigmenu插件菜单项类型) | Menu 插件菜单项类型。 |

package/dist/docs/index.md

@@ -0,0 +1,11 @@
+# LogicFlow 文档
+
+## 入门教程
+- tutorial/get-started.zh.md - 快速上手（中文）
+- tutorial/get-started.en.md - Quick Start（英文）
+
+## 核心 API
+- api/ - API 参考
+
+## 扩展插件
+- tutorial/extension/ - 插件使用指南（MiniMap、Group、DndPanel 等）

package/dist/docs/tutorial/about.en.md

@@ -0,0 +1,38 @@
+---
+nav: Guide
+group:
+  title: Introduce
+  order: 0
+title: What's LogicFlow
+order: 0
+toc: content
+---
+
+LogicFlow is a flowchart editing framework, provides a series of flowchart interaction, editing the necessary functions and flexible node customization, plug-ins and other expansion mechanisms.
+LogicFlow supports the front-end custom development of a variety of logic orchestration scenarios, such as flowcharts, ER diagrams, BPMN processes and so on.
+In the work approval flow configuration, robot logic orchestration, no code platform process configuration have better applications.
+
+If you can't wait to try LogicFlow, come to [Get Started](./get-started.en.md)!
+
+## Features
+
+- **Visual Modeling**: With the intuitive visual interface provided by LogicFlow, users can easily create, edit and manage complex logic flow diagrams.
+- **Highly Customizable**: Users can customize nodes, connectors, and styles to create customized logic flow diagrams that fit specific use cases.
+- **Self-executing engine**: The execution engine supports browser-side execution of flowchart logic, providing a new way of thinking about code-free execution.
+
+In order to help you get a more comprehensive understanding of LogicFlow's design concepts and implementation principles, we have also compiled a number of in-depth technical articles, interested parties can visit [LogicFlow series of articles](../article/architecture-of-logicflow.en.md). 
+
+## How to contribute
+
+### Bugs
+
+If you're having trouble with something, start by checking
+out [issues](https://github.com/didi/LogicFlow/issues) to see if there are any similar bugs or suggestions. Before you report a bug, make sure you've searched for existing issues and read our [FAQ](https://github.com/didi/LogicFlow/discussions).
+
+### PR
+
+If you want to build LogicFlow together, you are welcome to PR to us~[Code Contribution Guidelines](https://github.com/didi/LogicFlow/blob/master/CONTRUBUTING.en-US.md)
+
+<!-- ### Code of Conduct
+
+### Join the community -->

package/dist/docs/tutorial/about.zh.md

@@ -0,0 +1,65 @@
+---
+nav: 指南
+group:
+  title: 介绍
+  order: 0
+title: LogicFlow是什么
+order: 0
+toc: content
+---
+
+LogicFlow是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。
+LogicFlow支持前端自定义开发各种逻辑编排场景，如流程图、ER图、BPMN流程等。在工作审批流配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。
+
+如果你已经迫不及待想试试 LogicFlow，那就来 [快速上手](./get-started.zh.md) 吧！
+
+## 推荐阅读顺序
+
+如果你是第一次接触 LogicFlow，推荐按下面的顺序阅读：
+
+1. [快速上手](./get-started.zh.md)：先把最小示例跑通
+2. [实例与图数据](./basic/class.zh.md)：理解 `LogicFlow` 实例和 `graphData`
+3. [主题](./basic/theme.zh.md) / [事件](./basic/event.zh.md)：掌握样式和交互入口
+4. [节点](./basic/node.zh.md) / [边](./basic/edge.zh.md)：开始进入业务自定义
+5. [进阶节点](./advanced/node.zh.md)：理解连接规则、锚点和框架节点
+6. [插件简介](./extension/intro.zh.md) / [API 导览](../api/logicflow-instance/index.zh.md)：按目标扩展或精确查阅
+
+## 特性
+
+- **可视化模型**：通过 LogicFlow 提供的直观可视化界面，用户可以轻松创建、编辑和管理复杂的逻辑流程图。
+- **高可定制性**：用户可以根据自己的需要定制节点、连接器和样式，创建符合特定用例的定制逻辑流程图。
+- **自执行引擎**：执行引擎支持浏览器端执行流程图逻辑，为无代码执行提供新思路。
+
+为了帮助大家更全面地了解 LogicFlow 的设计理念和实现原理，我们还整理了一些深入的技术文章，感兴趣的朋友可以访问 [LogicFlow 系列文章](../article/architecture-of-logicflow.zh.md) 
+此外，我们也会在掘金的「[LogicFlow官方号](https://juejin.cn/user/2885546018354925)」持续分享开发实践与框架动态，欢迎关注，与我们一起探索更多可能！
+
+## 如何交流
+
+如果您有任何的问题、建议、反馈或者交流意愿，可以通过如下方式联系我们：
+
+- 官方推荐：[GitHub issues](https://github.com/didi/LogicFlow/issues)
+- 官方微信：请添加「LogicFlow官方号 👨 」
+
+<div>
+  <img alt="LogicFlow WeChat 交流群" style="border-radius: 18px; margin-left: 20px" src="https://cdn.jsdelivr.net/gh/Logic-Flow/static@latest/assets/wechat.png" width="300" />
+</div>
+
+- QQ讨论群：
+
+<div>
+  <img alt="LogicFlow QQ 交流群" style="border-radius: 18px; margin-left: 20px" src="https://cdn.jsdelivr.net/gh/Logic-Flow/static@latest/assets/qq.png" width="300" />
+</div>
+
+## 如何贡献
+
+### Bugs Or Questions
+
+如果您在使用的过程中碰到问题，可以查阅我们的 [issues](https://github.com/didi/LogicFlow/issues) 看看有没有类似的
+bug 或者建议。在你报告一个 bug 之前，请先确保已经搜索过已有的 issue 和 [常见问题](https://github.com/didi/LogicFlow/discussions)。
+
+### PR
+
+如果您想一起共建LogicFlow，也欢迎您提PR给我们~[代码贡献指引](https://github.com/didi/LogicFlow/blob/master/CONTRIBUTING.md)
+<!-- ### 行为准则
+
+### 加入社区 -->

package/dist/docs/tutorial/advanced/dnd.en.md

@@ -0,0 +1,62 @@
+---
+nav: Guide
+group:
+  title: Intermediate
+  order: 2
+title: Dnd
+order: 4
+toc: content
+---
+
+#### In a flowchart editing scenario rather than creating nodes through code configuration, we may need to manipulate the creation of the flowchart through the graphical user interface, which can be achieved through drag and drop. <Badge>info</Badge>
+
+Drag and drop needs to be combined with a graphical panel, steps: create panel → initialize drag and
+drop → listen to drop event to create node
+
+The example is as follows:
+
+```tsx | pure
+lf.dnd.startDrag({
+  type,
+  text: `${type}-node`,
+})
+```
+
+<a href="https://codesandbox.io/embed/logicflow-base18-odj3g?fontsize=14&hidenavigation=1&theme=dark&view=preview" target="_blank"> Go to CodeSandbox for examples </a>
+
+As you can see from the code above, the nodes are drawn to the panel by means of `div` tags + `css`
+styles, and the `onMouseDown` event is bound to it, and when the graph is dragged and dropped,
+the `lf.dnd.startDrag` function is triggered to indicate that dragging and dropping has begun, and
+the configuration of the selected graph is passed in, in the format of the `startDrag` entry
+parameter:
+
+```tsx | pure
+lf.dnd.startDrag = (nodeConfig: NodeConfig): void => {}
+
+type NodeConfig = {
+  id?: string; // It is not recommended to pass ids directly, logicflow ids are not allowed to be duplicated.
+  type: string;
+  text?: TextConfig;
+  properties?: Record<string, unknown>;
+};
+```
+
+When the mouse is released at the end of the drag, the current mouse position is converted to
+coordinates on the canvas and used as the center point coordinates of the node `x`, `y`, merged with
+the `nodeConfig` passed in by the dragging node, and the `lf.addNode` method is called to create the
+node when it listens to the drop event.
+
+:::warning
+If you are using an image as an element to add a node in the configuration panel, you need to set it
+to be non-draggable. For more details, please refer
+to[#267](https://github.com/didi/LogicFlow/issues/267)<br>
+If you encounter the error "No node with id xx exists" when you add a node by dragging, you need to
+trigger `dnd.startDrag` when mousedown. For more details, please refer
+to[#185](https://github.com/didi/LogicFlow/issues/185)
+:::
+
+**Use drag and drop panel plugin**
+
+LogicFlow has built-in **Drag & Drop Panel Plugin** in extension, if you don't want to customize the
+graphic panel, you can use this plugin to do it quickly.
+See [DndPanel](../extension/dnd-panel.en.md) for more details.

package/dist/docs/tutorial/advanced/dnd.zh.md

@@ -0,0 +1,52 @@
+---
+nav: 指南
+group:
+  title: 进阶
+  order: 2
+title: 拖拽创建节点
+order: 4
+toc: content
+---
+
+#### 在流程图编辑场景中比起通过代码配置创建节点，我们可能更需要通过图形用户界面来操作创建流程图，这时候就可以通过拖拽的方式来实现。 <Badge>info</Badge>
+
+拖拽需要结合图形面板来实现，步骤：创建面板 → 拖拽初始化 → 监听 drop 事件创建节点
+
+示例如下：
+
+```tsx | pure
+lf.dnd.startDrag({
+  type,
+  text: `${type}节点`,
+})
+```
+
+<a href="https://codesandbox.io/embed/logicflow-base18-odj3g?fontsize=14&hidenavigation=1&theme=dark&view=preview" target="_blank"> 去 CodeSandbox 查看示例</a>
+
+通过上面的代码可以看出，将节点通过`div`标签+`css`样式的方式绘制到面板中，并为其绑定`onMouseDown`
+事件，当拖拽图形时，会触发`lf.dnd.startDrag`函数，表示开始拖拽，并传入选中图形的配置，`startDrag`入参格式：
+
+```tsx | pure
+lf.dnd.startDrag = (nodeConfig: NodeConfig): void => {}
+
+type NodeConfig = {
+  id?: string; // 不建议直接传id, logicflow id不允许重复
+  type: string;
+  text?: TextConfig;
+  properties?: Record<string, unknown>;
+};
+```
+
+拖拽结束鼠标松开时，将当前鼠标的位置转换为画布上的坐标，并以此为节点的中心点坐标`x`、`y`
+，合并拖拽节点传入的`nodeConfig`，监听到 drop 事件后会调用`lf.addNode`方法创建节点。
+
+:::warning{title=注意}
+如果是用图片作为配置面板中添加节点的元素，需要将其设置为不可拖动的。详细请参考[#267](https://github.com/didi/LogicFlow/issues/267)<br>
+如果遇到拖拽添加节点报错“不存在 id 为 xx 的节点”，需要在 mousedown 时触发`dnd.startDrag`
+。详情参考[#185](https://github.com/didi/LogicFlow/issues/185)
+:::
+
+**使用拖拽面板插件**
+
+LogicFlow 在 extension 中内置了**拖拽面板插件**
+，如果不想自定义图形面板，可以使用此插件快速实现。详情见[拖拽面板](../extension/dnd-panel.zh.md)。

package/dist/docs/tutorial/advanced/edge.en.md

@@ -0,0 +1,64 @@
+---
+nav: Guide
+group:
+  title: Intermediate
+  order: 2
+title: Edge
+order: 1
+toc: content
+---
+
+## React edge
+
+You can customize the edges based on React components using the following method, you can add any
+React component you want to the edges, or even hide the original edges by styling them and redrawing
+them using React
+
+<code id="edge-react" src="../../../src/tutorial/advanced/edge/reactEdge"></code>
+
+## Anchor Points
+
+By default, LogicFlow only records node to node information. However, in some business scenarios, it
+is necessary to pay attention to the anchor points, such as the correlation relationship in the UML
+class diagram; or the anchor points indicate the entrance and exit of the nodes and so on. At this
+time, you need to rewrite the save method of connectivity to save the anchor point information
+together.
+
+```tsx | pure
+class CustomEdgeModel2 extends LineEdgeModel {
+  // Rewrite this method to save the data with the anchors.
+  getData() {
+    const data = super.getData()
+    data.sourceAnchorId = this.sourceAnchorId
+    data.targetAnchorId = this.targetAnchorId
+    return data
+  }
+}
+```
+
+<a href="https://codesandbox.io/embed/logicflow-base17-h5pis?fontsize=14&hidenavigation=1&theme=dark&view=preview" target="_blank">
+Go to CodeSandbox for examples</a>
+
+## Animation
+
+Since LogicFlow is a flowchart editing framework based on svg, we can animate flowcharts the same
+way we animate svg. For ease of use, we have built-in basic animation effects as well. When defining
+edges, you can set the property `isAnimation` to true to make the edge move, or you can
+use `lf.openEdgeAnimation(edgeId)` to turn on the default animation for edges.
+
+```tsx | pure
+class CustomEdgeModel extends PolylineEdgeModel {
+  setAttributes() {
+    this.isAnimation = true;
+  }
+
+  getEdgeAnimationStyle() {
+    const style = super.getEdgeAnimationStyle();
+    style.strokeDasharray = "5 5";
+    style.animationDuration = "10s";
+    return style;
+  }
+}
+```
+
+<code id="edge-animation" src="../../../src/tutorial/advanced/edge/animation"></code>

package/dist/docs/tutorial/advanced/edge.zh.md

@@ -0,0 +1,66 @@
+---
+nav: 指南
+group:
+  title: 进阶
+  order: 2
+title: 边进阶
+order: 1
+toc: content
+---
+
+这页适合已经完成基础自定义边、准备继续处理**边上的 React 内容、锚点信息和动画效果**的读者。
+
+::::info{title=阅读提示}
+- 前置知识：建议先读 [边](../basic/edge.zh.md)
+- 本页不展开节点规则和框架节点注册；这些内容请看 [进阶节点](node.zh.md)
+- 相关 API：[`edgeModel`](../../api/runtime-model/edgeModel.zh.md)、[`事件`](../../api/logicflow-instance/event.zh.md)、[`主题`](../../api/logicflow-instance/theme.zh.md)
+::::
+
+## React 边
+
+使用以下方法可以基于 React 组件自定义边，你可以在边上添加任何你想要的 React 组件，甚至将原有的边通过样式隐藏，使用
+React 重新绘制
+
+<code id="edge-react" src="../../../src/tutorial/advanced/edge/reactEdge"></code>
+
+## 锚点
+
+默认情况下，LogicFlow 只记录节点与节点的信息。但是在一些业务场景下，需要关注到锚点，比如在 UML
+类图中的关联关系；或者锚点表示节点的入口和出口之类。这个时候需要重写连线的保存方法，将锚点信息也一起保存。
+
+```tsx | pure
+class CustomEdgeModel2 extends LineEdgeModel {
+  // 重写此方法，使保存数据是能带上锚点数据。
+  getData() {
+    const data = super.getData()
+    data.sourceAnchorId = this.sourceAnchorId
+    data.targetAnchorId = this.targetAnchorId
+    return data
+  }
+}
+```
+
+<a href="https://codesandbox.io/embed/logicflow-base17-h5pis?fontsize=14&hidenavigation=1&theme=dark&view=preview" target="_blank"> 去 CodeSandbox 查看示例</a>
+
+## 动画
+
+由于 LogicFlow 是基于 svg 的流程图编辑框架，所以我们可以给 svg
+添加动画的方式来给流程图添加动画效果。为了方便使用，我们也内置了基础的动画效果。在定义边的时候，可以将属性`isAnimation`
+设置为 true 就可以让边动起来，也可以使用`lf.openEdgeAnimation(edgeId)`来开启边的默认动画。
+
+```tsx | pure
+class CustomEdgeModel extends PolylineEdgeModel {
+  setAttributes() {
+    this.isAnimation = true
+  }
+
+  getEdgeAnimationStyle() {
+    const style = super.getEdgeAnimationStyle()
+    style.strokeDasharray = '5 5'
+    style.animationDuration = '10s'
+    return style
+  }
+}
+```
+
+<code id="edge-animation" src="../../../src/tutorial/advanced/edge/animation"></code>

package/dist/docs/tutorial/advanced/keyboard.en.md

@@ -0,0 +1,70 @@
+---
+nav: Guide
+group:
+  title: Intermediate
+  order: 2
+title: Keyboard
+order: 3
+toc: content
+---
+
+## Shortcut Configuration
+
+Shortcuts can be enabled by passing the keyboard attribute to options when creating a `LogicFlow`
+instance.
+You can configure only the enabled attribute, which, when true, enables the default shortcut keys.
+
+```tsx | pure
+const lf = new LogicFlow({
+  container: document.querySelector('#app'),
+  keyboard: {
+    enabled: true,
+  },
+})
+```
+
+## 内置快捷键功能
+
+Built-in shortcuts for copying, pasting, redoing/undoing, and deleting are available for different
+products.
+
+| Shortcuts           | Functions  |
+|:--------------------|:-----------|
+| cmd + c or ctrl + c | copy node  |
+| cmd + v or ctrl + v | Paste Node |
+| cmd + z or ctrl + z | Undo       |
+| cmd + y or ctrl + y | Redo       |
+| backspace           | Delete     |
+
+## Customized shortcuts
+
+shortcuts allow you to define a user-defined set of shortcuts.
+It is worth mentioning the rules for keys, which are consistent
+with [mousetrap](https://www.npmjs.com/package/mousetrap).
+
+Use a custom delete shortcut as an example: add a confirmation action before deletion.
+
+```tsx | pure
+const lf = new LogicFlow({
+  // ...
+  keyboard: {
+    enabled: true,
+    shortcuts: [
+      {
+        keys: ["backspace"],
+        callback: () => {
+          const r = window.confirm("Are you sure you want to delete it？");
+          if (r) {
+            const elements = lf.getSelectElements(true);
+            lf.clearSelectElements();
+            elements.edges.forEach((edge) => lf.deleteEdge(edge.id));
+            elements.nodes.forEach((node) => lf.deleteNode(node.id));
+          }
+        },
+      },
+    ],
+  },
+});
+```
+
+<a href="https://codesandbox.io/embed/logicflow-base10-eerft?fontsize=14&hidenavigation=1&theme=dark&view=preview" target="_blank"> Go to CodeSandbox for examples </a>