Merge pull request #7 from yhlchao/master

fix(core): fix checking repeatedly verification rules

Author: sunyongjian

.markdownlint.json

@@ -0,0 +1,9 @@
+{
+  "default": true,
+  "MD013": {
+    "line_length": 200
+  },
+  "MD024": {
+    "allow_different_nesting": true
+  }
+}

docs/.vuepress/config.js

@@ -31,6 +31,7 @@ const guide = [
     title: '拓展',
     collapsable: false,
     children: [
+      'extension/extension-intro',
       'extension/extension-components',
       'extension/bpmn-element',
       'extension/snapshot',
@@ -48,7 +49,15 @@ const api = [
       'nodeApi',
       'edgeApi',
     ]
-  }
+  },
+  {
+    title: '自定义元素',
+    collapsable: false,
+    children: [
+      'customNodeApi',
+      'customEdgeApi',
+    ]
+  },
 ];
 
 const usage = ["bpmn", "approve"];

docs/api/edgeApi.md

@@ -64,7 +64,7 @@ Logic Flow 的内置连线类型包括
 
 创建边
 
-参数：
+#### 参数
 
 | 名称   | 类型   | 描述            |
 | :----- | :----- | :------- | :-------------- |
@@ -83,21 +83,21 @@ export type EdgeConifg = {
 };
 ```
 
-返回值：
+#### 返回值
 
 无
 
 ### lf.getEdgeData
 
 获取边数据
 
-参数：
+#### 参数
 
 | 名称   | 类型   | 描述            |
 | :----- | :----- | :------- | :-------------- |
 | edgeId | string | 边Id |
 
-返回值：
+#### 返回值
 
 | 名称   | 类型   | 描述            |
 | :----- | :----- | :------- | :-------------- |
@@ -121,7 +121,7 @@ type EdgeData = {
 
 修改边数据
 
-参数：
+#### 参数
 
 | 名称   | 类型   | 描述            |
 | :----- | :----- | :------- | :-------------- |
@@ -141,29 +141,29 @@ type EdgeAttribute = {
 };
 ```
 
-返回值：
+#### 返回值
 
 无
 
 ### lf.deleteEdge
 
 删除边
 
-参数：
+#### 参数
 
 | 名称   | 类型   | 描述            |
 | :----- | :----- | :------- | :-------------- |
 | edgeId | string | 删除边Id |
 
-返回值：
+#### 返回值
 
 无
 
 ### lf.removeEdge
 
 基于连线的起终点删除连线
 
-参数：
+#### 参数
 
 | 名称   | 类型   | 描述            |
 | :----- | :----- | :------- | :-------------- |
@@ -184,7 +184,7 @@ type EdgeFilter = {
 - 仅存在targetNodeId，删除以targetNodeId为结束节点的边
 - 存在targetNodeId和targetNodeId，删除以sourceNodeId为开始节点，并且以targetNodeId为结束节点的边
 
-返回值：
+#### 返回值
 
 无
 
@@ -196,7 +196,7 @@ type EdgeFilter = {
 setDefaultEdgeType(type: string): void
 ```
 
-参数：
+#### 参数
 
 | 名称 | 类型 | 必传 | 默认值 | 描述 |
 | :- | :- | :- |:- | :- |
@@ -209,7 +209,7 @@ setDefaultEdgeType(type: string): void
 lf.setDefaultEdgeType('beizer')
 ```
 
-返回值：
+#### 返回值
 
 无
 

docs/article/article01.md

@@ -139,10 +139,6 @@ const lf = new LogicFlow({ // 实例化 lf 对象
   container: document.querySelector('#graph'), // 获取渲染容器
   width: 700,
   height: 600,
-  tool: {
-    menu: true,
-    control: true,
-  },
   background: {
     color: '#F0F0F0'
   },

docs/guide/basic/dnd.md

@@ -15,10 +15,6 @@ export default class App extends Component<IProps, IState> {
       container: document.querySelector('#graph'),
       width: 700,
       height: 600,
-      tool: {
-        menu: true,
-        control: false,
-      },
     });
     this.lf.render();
   }

docs/guide/basic/snapline.md

@@ -1,12 +1,12 @@
 # 对齐线 Snapline
 
+对齐线能够在节点移动过程中，将移动节点的位置与画布中其他节点位置进行对比，辅助位置调整。位置对比有如下两个方面。
 
-对齐线能够在节点移动过程中，将移动节点的位置与画布中其他节点位置进行对比，辅助位置调整。 
-> 位置对比有两个方面
-> - 节点中心位置
-> - 节点的边框
+- 节点中心位置
+- 节点的边框
 
 ## 对齐线使用
+
 普通编辑模式下，默认开启对齐线，也可通过配置进行关闭。  
 在[静默模式](/guide/basic/silent-mode.html)下，无法移动节点，所以关闭了对齐线功能，无法通过配置开启。
 
@@ -20,6 +20,7 @@ const lf = new LogicFlow({
 ## 对齐线样式设置
 
 对齐线的样式包括颜色和宽度，可以通过设置主题的方式进行修改。
+
 ```ts
 // 默认配置
 {

docs/guide/extension/extension-intro.md

@@ -0,0 +1,32 @@
+# 简介
+
+> Logic Flow 最初的目标就是支持一个扩展性强的流程绘制工具，用来满足各种业务需求。
+
+目前所有内置的拓展都在`@logicflow/extension`包中，其中包括`BpmnElement`、`Snapshot`、`Adapter`以及三个内置组件。
+
+## 使用拓展
+
+```js
+import { BpmnElement } from '@didi/lf-extension';
+LogicFlow.use(BpmnElement);
+```
+
+```html
+<script src="/logic-flow.js"></script>
+<script src="/lib/BpmnElement.js"></script>
+<script>
+  LogicFlow.use(BpmnElement);
+</script>
+```
+
+## 自定义拓展
+
+实现一个 Logic Flow 的扩展非常简单，那就是对外暴露一个对象，这个对象有一个方法 install。Logic Flow 会在初始化的时候执行这个方法，将其实例传递进来。开发者基于这个实例，利用 Logic Flow 的自定义机制开发，就可以实现一个插件。
+
+```js
+window.ResizeNode = {
+  install: function(lf) {
+    // 基于lf进行扩展
+  }
+}
+```

docs/guide/start.md

@@ -65,9 +65,6 @@ const data = {
 ```js
 const lf = new LogicFlow({
   container: document.querySelector('#container'),
-  tool: {
-    control: false,
-  },
   stopScrollGraph: true,
   stopZoomGraph: true,
   grid: {
@@ -78,10 +75,11 @@ const lf = new LogicFlow({
 ```
 
 通过刚才创建的实例，来渲染画布。
+
 ```js
 lf.render(data);
 ```
 
 到此，我们就创建好了一个最简单的示例。
 
-<example :height="300" ></example>
+<example :height="300" ></example>

docs/usage/approve.md

@@ -19,7 +19,7 @@
 - 连线规则  
   在审批流配置过程中，需要有一些控制连接的规则保证流程的正确性，比如申请节点不能被其它节点连接、结束节点不能连接其他节点等，Logic Flow提供了自定义节点`连线规则`功能来实现这个需求。  
 
-<example href="/examples/#/extension/approve" :height="650"></example>
+<example href="/examples/#/usage/approve" :height="650"></example>
 
 ## 审批流配置
 ### 创建节点
@@ -31,7 +31,7 @@
 ### 事件
 LogicFlow提供了节点和边的交互事件，可以通过监听这些事件，拿到对应的节点和边的`数据`以及`原生事件`信息。事件的详细内容见[事件API](/guide/advance/event.html)  
 审批中的流程进度预览，设置[静默模式](/guide/basic/silent-mode.html)，监听节点hover，使用React组件展示审批详情。
-<example :height="350" href="/examples/#/extension/approve/preview"></example>
+<example :height="350" href="/examples/#/usage/approve/preview"></example>
 
 
 ## 审批流程主题设置

docs/usage/bpmn.md

@@ -2,4 +2,4 @@
 
 该示例绘制的图可以在 BPMN 官方 Demo 中正常使用。（此处仅实现了 BPMN 中的一部分节点）
 
-<example href="/examples/#/extension/bpmn" :height="600" ></example>
+<example href="/examples/#/usage/bpmn" :height="600" ></example>

examples/package.json

@@ -57,6 +57,7 @@
     "postcss-normalize": "8.0.1",
     "postcss-preset-env": "6.7.0",
     "postcss-safe-parser": "5.0.2",
+    "prettier": "^2.2.1",
     "prompts": "2.4.0",
     "react": "^17.0.1",
     "react-app-polyfill": "^2.0.0",

examples/src/pages/basic/keyboard/index.tsx

@@ -4,6 +4,8 @@ import ExampleHeader from '../../../components/example-header';
 import './index.css';
 
 const config = {
+  stopScrollGraph: true,
+  stopZoomGraph: true,
   textEdit: false,
   keyboard: {
     enabled: true,

examples/src/pages/approve/components/NodePanel.tsx renamed to examples/src/pages/usage/approve/components/NodePanel.tsx

@@ -3,7 +3,7 @@ import { message } from 'antd';
 import LogicFlow from '@logicflow/core';
 import PropertyPanel from './components/property';
 import NodePanel from './components/NodePanel';
-import RegisteNode from './components/registernNode';
+import RegisteNode from './components/registerNode';
 import { themeApprove, data } from './config';
 import './index.css';
 

examples/src/pages/approve/components/property.tsx renamed to examples/src/pages/usage/approve/components/property.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import LogicFlow from '@logicflow/core';
-import RegisteNode from './components/registernNode';
+import RegisteNode from './components/registerNode';
 import hoverPanel from './components/hoverPanel';
 import { themeApprove, data } from './config';
 import './index.css';

examples/src/pages/approve/components/registernNode.ts renamed to examples/src/pages/usage/approve/components/registerNode.ts

@@ -23,8 +23,8 @@ import Rule from './pages/advance/custom-node/rule';
 import Process from './pages/advance/custom-edge/process';
 import Arrow from './pages/advance/custom-edge/arrow';
 import Event from './pages/advance/event';
-import Approve from './pages/approve';
-import ApprovePreview from './pages/approvePreview';
+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';
 
@@ -52,11 +52,11 @@ export default (
     <Route path="/extension/components/dnd" exact component={DndPandel} />
     <Route path="/extension/components/custom-menu" exact component={CustomMenu} />
     <Route path="/extension/components/custom-dnd" exact component={CustomDnd} />
-    <Route path="/extension/approve" exact component={Approve} />
-    <Route path="/extension/approve/preview" exact component={ApprovePreview} />
     <Route path="/extension/bpmn-elements" exact component={BpmnElements} />
     <Route path="/extension/adapter" exact component={AdapterExample} />
     <Route path="/usage/bpmn" exact component={Bpmn} />
+    <Route path="/usage/approve" exact component={Approve} />
+    <Route path="/usage/approve/preview" exact component={ApprovePreview} />
     <Route path="/" component={Start} />
   </Switch>
 );

examples/src/pages/approve/config.ts renamed to examples/src/pages/usage/approve/config.ts

@@ -63,7 +63,8 @@
     "webpack": "^4.43.0",
     "webpack-bundle-analyzer": "^3.7.0",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "webpack-dev-server": "^3.10.3",
+    "prettier": "^2.2.1"
   },
   "browserslist": [
     "> 3%",

examples/src/pages/approve/index.css renamed to examples/src/pages/usage/approve/index.css

@@ -48,6 +48,8 @@ export default class BaseNodeModel implements IBaseModel {
   menu?: MenuConfig[];
   targetRules: ConnectRule[] = [];
   sourceRules: ConnectRule[] = [];
+  hasSetTargetRules = false; // 用来限制rules的重复值
+  hasSetSourceRules = false; // 用来限制rules的重复值
   @observable properties = {};
   @observable type = '';
   @observable x = defaultConfig.x;
@@ -140,7 +142,10 @@ export default class BaseNodeModel implements IBaseModel {
    * 在连线的时候，是否允许这个节点为source节点，连线到target节点。
    */
   isAllowConnectedAsSource(target: BaseNodeModel): ConnectRuleResult {
-    const rules = this.getConnectedSourceRules();
+    const rules = !this.hasSetSourceRules
+      ? this.getConnectedSourceRules()
+      : this.sourceRules;
+    this.hasSetSourceRules = true;
     let isAllPass = true;
     let msg: string;
     for (let i = 0; i < rules.length; i++) {
@@ -168,7 +173,10 @@ export default class BaseNodeModel implements IBaseModel {
    */
 
   isAllowConnectedAsTarget(source: BaseNodeModel): ConnectRuleResult {
-    const rules = this.getConnectedTargetRules();
+    const rules = !this.hasSetTargetRules
+      ? this.getConnectedTargetRules()
+      : this.targetRules;
+    this.hasSetTargetRules = true;
     let isAllPass = true;
     let msg: string;
     for (let i = 0; i < rules.length; i++) {