fix(docs): docs fix

Author: xinxin93

docs/guide/advance/customNode.md

@@ -35,7 +35,7 @@ class View extends RectNode {}
 
 
 lf.register({
-  type: 'customNodeType'
+  type: 'customNodeType',
   view: View,
   model: Model,
 });

docs/guide/advance/theme.md

@@ -259,7 +259,7 @@ lf.setTheme({
 |key|type|description|default|
 |-|-|-|-|
 |rx|number|x轴尺寸|50|
-|ry|number|y轴尺寸|40|
+|ry|number|y轴尺寸|50|
 |fill|color|填充颜色|#FFFFFF|
 |fillOpacity|number|填充透明度|1|
 |stroke|color|边框颜色|#000000|

docs/guide/basic/edge.md

@@ -6,7 +6,7 @@ LogicFlow 的内置连线包括
 - 直角折线(polyline)
 - 贝塞尔曲线(bezier)
 
-LogicFlow在扩展中还提供了跟多类型的连线
+LogicFlow在扩展中还提供了更多类型的连线
 - 圆角折线(curved-edge)
 
 ## 创建边

docs/guide/basic/node.md

@@ -328,7 +328,7 @@ LogicFlow 内部为各个图形设置了默认的样式属性，例如：宽、
   <img src="../../assets/images/nodeApi/node-rect.png" width="200" alt="矩形主题图片">
 
 
-  主题的完整设置，参见 [Theme API](/guide/advance/theme.html)
+  主题的完整设置，参见 [主题 Theme 样式 API](/guide/advance/theme.html)
 
   ### 自定义节点
-  > 如果想要更高维度的个性化设置，例如不同样式的矩形、业务属性，可以通过自定义节点的方式实现，具体参见[customNode API](/guide/advance/customNode.html)。
+  > 如果想要更高维度的个性化设置，例如不同样式的矩形、业务属性，可以通过自定义节点的方式实现，具体参见 [自定义节点 API](/guide/advance/customNode.html)。

docs/guide/extension/adapter.md

@@ -99,4 +99,4 @@ lf.getGraphData();
 
 ### 转换结果示例
 
-<example :height="400"></example>
+<example :height="400" href="/examples#/extension/adapter"></example>

examples/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@ant-design/icons": "^4.3.0",
     "@babel/core": "7.12.3",
-    "@logicflow/core": "^0.4.11",
+    "@logicflow/core": "^0.4.12",
     "@logicflow/extension": "^0.4.12",
     "@pmmmwh/react-refresh-webpack-plugin": "0.4.2",
     "@svgr/webpack": "5.4.0",

examples/src/pages/advance/custom-edge/index.tsx

@@ -79,7 +79,8 @@ export default function CustomEdgeExample() {
       ...config,
       container: document.querySelector('#graph') as HTMLElement
     });
-    lf.register(registerProcess);
+    const process = registerProcess();
+    lf.register(process);
     lf.render(data);
   }, []);
 

examples/src/pages/advance/custom-edge/process.ts

@@ -1,7 +1,9 @@
-export const registerProcess: any = ({ LineEdge, LineEdgeModel }: any) => {
-  class ProcessModel extends LineEdgeModel {
+import { LineEdge, LineEdgeModel } from '@logicflow/core'
+export const registerProcess: any = () => {
+    class ProcessModel extends LineEdgeModel {
     setAttributes() {
       const {
+         // @ts-ignore
         properties: { isExecuted },
       } = this;
 

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

@@ -0,0 +1,9 @@
+.adpter-shape .lf-dnd-shape  {
+  display: inline-table;
+  width: 36px;
+  height: 36px;
+  border: 2px solid black;
+}
+.adpter-circle .lf-dnd-shape {
+  border-radius: 18px;
+}

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

@@ -4,15 +4,18 @@ import { BpmnAdapter, Control, DndPanel } from '@logicflow/extension';
 import ExampleHeader from '../../../components/example-header';
 import { Button } from 'antd';
 import { ExportOutlined } from '@ant-design/icons';
+import './index.css';
 
 const dndItem = [
   {
     type: 'rect',
     text: '矩形',
+    className: 'adpter-shape adpter-rect',
   },
   {
     type: 'circle',
-    text: '圆形'
+    text: '圆形',
+    className: 'adpter-shape adpter-circle',
   }
 ]
 
@@ -30,7 +33,7 @@ export default function AdapterExample() {
       stopScrollGraph: true,
       stopZoomGraph: true,
     });
-    lf.setShapeList(dndItem);
+    lf.setPatternItems(dndItem);
     lf.render();
   }, []);