feat(docs): add docs and example for InserNodeInPolyline

Author: lvhongxin

docs/.vuepress/config.js

@@ -36,6 +36,7 @@ const guide = [
       'extension/adapter',
       'extension/bpmn-element',
       'extension/extension-node-resize',
+      'extension/extension-insert-node-in-polyline.md',
       {
         title: '组件',
         collapsable: true,

docs/guide/extension/extension-insert-node-in-polyline.md

@@ -0,0 +1,26 @@
+# 连线上插入节点
+## 功能
+拖动节点到连线中间，自动成为连线中间的点。
+举例：存在一条节点A到节点B的折线E，拖拽一个节点N到折线E上，当节点N的中心点恰好在折线E的路径上时松开鼠标，这时节点N就成为A与B的中间节点，原来的连线E被删除，生成两条新的折线，分别是A到N，N到B。示例如下。
+<example href="/examples/#/extension/InserNodeInPolyline" :height="450" ></example>
+
+## 支持
+目前仅支持折线
+
+## 使用
+```js
+import LogicFlow from '@logicflow/core';
+import { InsertNodeInPolyline } from '@logicflow/extension';
+import '@logicflow/extension/lib/style/index.css'
+LogicFlow.use(InsertNodeInPolyline);
+```
+## 个性化配置
+节点拖拽分为2种情况：
+- 第一种是从控制面板拖拽到画布中，调用Dnd的Api进行节点添加，本插件默认支持。关闭此功能设置如下：
+    ```js
+    InsertNodeInPolyline.dndAdd = false;
+    ```
+- 第二种是画布中的游离节点，即与其他节点没有连线的节点，拖拽调整位置到连线上，本插件默认支持。关闭此功能设置如下：
+    ```js
+    InsertNodeInPolyline.dropAdd = false;
+    ```

examples/src/pages/extension/InserNodeInPolyline/index.css

@@ -0,0 +1,13 @@
+.circle .lf-dnd-shape {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    border: 2px solid black;
+    border-radius: 20px;
+}
+.rect .lf-dnd-shape {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    border: 2px solid black;
+}

examples/src/pages/extension/InserNodeInPolyline/index.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect } from 'react';
+import LogicFlow from '@logicflow/core';
+import { InsertNodeInPolyline, DndPanel, SelectionSelect } from '@logicflow/extension';
+import ExampleHeader from '../../../components/example-header';
+import 'antd/lib/button/style/index.css';
+import './index.css';
+
+const config = {
+    grid: {
+        type: 'dot',
+        size: 20,
+    },
+}
+
+const data = {
+    nodes: [
+        {
+            id: 10,
+            type: 'rect',
+            x: 150,
+            y: 70,
+            text: '矩形'
+        },
+        {
+            id: 20,
+            type: 'circle',
+            x: 400,
+            y: 70,
+            text: '圆形'
+        }
+    ],
+    edges: [
+        {
+            type: 'polyline',
+            sourceNodeId: 10,
+            targetNodeId: 20,
+        }
+    ]
+};
+
+const contentStyle = {
+    display: 'flex',
+    alignItems: 'center'
+}
+
+let lf: LogicFlow;
+
+export default function SnapshotExample() {
+
+    useEffect(() => {
+        LogicFlow.use(InsertNodeInPolyline);
+        LogicFlow.use(DndPanel);
+        LogicFlow.use(SelectionSelect);
+        lf = new LogicFlow({
+            ...config,
+            container: document.querySelector('#graph') as HTMLElement
+        });
+        lf.setPatternItems([
+            {
+                type: 'circle',
+                text: '圆形',
+                className: 'circle'
+            },
+            {
+                type: 'rect',
+                text: '矩形',
+                className: 'rect'
+            },
+        ]);
+        lf.render(data)
+    }, []);
+
+    return (
+        <>
+            <ExampleHeader contentStyle={contentStyle}>
+                拖拽节点到线中间进行节点插入：
+            </ExampleHeader>
+            <div id="graph" className="viewport" />
+        </>
+    )
+}
+

examples/src/routes.tsx

@@ -31,6 +31,7 @@ import Approve from './pages/usage/approve';
 import ApprovePreview from './pages/usage/approvePreview';
 import BpmnElements from './pages/extension/bpmn/Elements';
 import AdapterExample from './pages/extension/adapter';
+import InserNodeInPolyline from './pages/extension/InserNodeInPolyline';
 
 
 export default (
@@ -62,6 +63,7 @@ export default (
     <Route path="/extension/bpmn-elements" exact component={BpmnElements} />
     <Route path="/extension/adapter" exact component={AdapterExample} />
     <Route path="/extension/node-resize" exact component={NodeResizeExample} />
+    <Route path="/extension/InserNodeInPolyline" exact component={InserNodeInPolyline} />
     <Route path="/usage/bpmn" exact component={Bpmn} />
     <Route path="/usage/approve" exact component={Approve} />
     <Route path="/usage/approve/preview" exact component={ApprovePreview} />