Merge pull request #208 from xinxin93/docs

Docs

Author: towersxu

docs/api/nodeApi.md

@@ -5,6 +5,7 @@ LogicFlow 的内置节点包括
 - 矩形(rect)
 - 圆形(circle)
 - 椭圆（ellipse)
+- 菱形(diamond)
 - 多边形(polygon)
 - 文本(text)
 
@@ -281,6 +282,12 @@ lf.focusOn({
 | :---- | :----- | :------- | :------------- |
 | rx | number | ✅ | 椭圆x轴半径 |
 | ry | number | ✅ | 椭圆y轴半径 |
+### 菱形
+
+| 名称  | 类型   | 是否必须 | 描述           |
+| :---- | :----- | :------- | :------------- |
+| rx | number | ✅ | 菱形x轴宽度的1/2 |
+| ry | number | ✅ | 菱形y轴高度的1/2 |
 
 ### 多边形
 

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/event.md

@@ -22,6 +22,10 @@ lf.on('element:type', (eventObject) => {});
 | 'node:mouseleave' | 鼠标离开节点 | data, e |
 | 'node:delete' | 节点的删除 | data |
 | 'node:add' | 节点的添加 | data |
+| 'node:dnd-add' | 节点拖拽添加 | data |
+| 'node:dragstart' | 节点开始拖拽 | data, e |
+| 'node:drag' | 节点拖拽 | data, e |
+| 'node:drop' | 节点拖拽放开 | data, e |
 | 'node:contextmenu' | 右键点击节点 | data, e, position |
 
 事件对象包含如下内容。
@@ -64,6 +68,9 @@ lf.on('element:type', (eventObject) => {});
 | 'blank:mouseup' | 画布鼠标抬起 | e |
 | 'blank:click' | 画布单击 | e |
 | 'blank:contextmenu'| 画布右键 | e, position |
+| 'blank:dragstart' | 画布开始拖拽 | e |
+| 'blank:drag' | 画布拖拽 | e |
+| 'blank:drop' | 画布拖拽放开 | e |
 
 事件对象包含如下内容。
 

docs/guide/advance/theme.md

@@ -254,6 +254,44 @@ lf.setTheme({
 ```
 </details>
 
+## 菱形
+
+|key|type|description|default|
+|-|-|-|-|
+|rx|number|x轴尺寸|50|
+|ry|number|y轴尺寸|50|
+|fill|color|填充颜色|#FFFFFF|
+|fillOpacity|number|填充透明度|1|
+|stroke|color|边框颜色|#000000|
+|strokeWidth|number|边框宽度|2|
+|strokeOpacity|number|边框透明度|1|
+|opacity|number|整体透明度|1|
+|outlineColor|color|外边框颜色|#000000|
+|hoverOutlineColor|color|hover外边框颜色|#000000|
+|outlineStrokeDashArray|string|控制用来描外边框的点划线的图案范式, 设置为空是为实线|'3,3'|
+|hoverOutlineStrokeDashArray|string|控制用来描hover外边框的点划线的图案范式, 设置为空是为实线|'3,3'|
+<details>
+<summary>点击展开查看多边形样式设置</summary>
+
+```ts
+lf.setTheme({
+  diamond: {
+    rx: 50,
+    ry: 50,
+    fill: '#FFFFFF',
+    stroke: '#000000',
+    strokeWidth: 2,
+    fillOpacity: 1,
+    strokeOpacity: 1,
+    opacity: 1,
+    outlineColor: '#000000',
+    hoverOutlineColor: '#000000',
+    outlineStrokeDashArray: '3,3',
+    hoverOutlineStrokeDashArray: '3,3'
+  },
+})
+```
+</details>
 
 ## 多边形
 

docs/guide/basic/edge.md

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

docs/guide/basic/node.md

@@ -4,6 +4,7 @@ LogicFlow 的内置节点包括：
 - 矩形(rect)
 - 圆形(circle)
 - 椭圆（ellipse)
+- 菱形(diamond)
 - 多边形(polygon)
 - 文本(text)
 
@@ -38,6 +39,11 @@ LogicFlow 的内置节点包括：
 | rx | number | ✅ | 椭圆x轴半径 |
 | ry | number | ✅ | 椭圆y轴半径 |
 
+#### 菱形
+| 名称  | 类型   | 是否必须 | 描述           |
+| :---- | :----- | :------- | :------------- |
+| rx | number | ✅ | 菱形x轴宽度的1/2 |
+| ry | number | ✅ | 菱形y轴高度的1/2 |
 #### 多边形
 | 名称  | 类型   | 是否必须 | 描述           |
 | :---- | :----- | :------- | :------------- |
@@ -322,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;