feat: 添加双击节点时间

Author: wb-zyx597643

README.en-US.md

@@ -46,6 +46,7 @@ npm install react-visual-modeling
 |  onFocusNode  |                          focus node events                          |            <font color="c41d7f">(node) => void</font>            |    -    |
 |  onFocusEdge  |                          focus edge events                          |            <font color="c41d7f">(edge) => void</font>            |    -    |
 | onFocusCanvas |                      focus canvas blank events                      |              <font color="c41d7f">() => void</font>              |    -    |
+| onDblClickNode|                      double click node events                       |               <font color="c41d7f">() => void</font>             |    -    |
 
 <br>
 
@@ -141,6 +142,7 @@ import 'react-visual-modeling/dist/index.css';
   onFocusNode={() => {}}
   onFocusEdge={() => {}}
   onFocusCanvas={() => {}}
+  onDblClickNode={() => {}}
 >
 </VisualModeling>
 ```

README.md

@@ -47,6 +47,7 @@ $ npm install react-visual-modeling butterfly-dag -S
 |onFocusNode  |聚焦节点事件  |`(node) => void`| - |
 |onFocusEdge  |聚焦线段事件  |`(edge) => void`| - |
 |onFocusCanvas |  聚焦空白处事件 | `() => void` |  |-|
+|onDblClickNode|  双击节点事件 |`(node) => void`| -
 
 <br />
 
@@ -144,6 +145,7 @@ import 'react-visual-modeling/dist/index.css';
   onFocusNode={() => {}}
   onFocusEdge={() => {}}
   onFocusCanvas={() => {}}
+  onDblClickNode={(node) => {}}     // Double Click Node Event
 />
 ```
 
@@ -168,6 +170,7 @@ interface IProps {
   onFocusNode(node: any): void,                  // 聚焦节点事件
   onFocusEdge(edge: any): void,                  // 聚焦线段事件
   onFocusCanvas(): void,                         // 聚焦空白处事件
+  onDblClickNode ? (node: any) : void,           // 双击节点事件
 };
 
 // 节点字段每列的属性设置

example/index.jsx

@@ -4,8 +4,8 @@ import ReactDOM from 'react-dom';
 import {Layout, Tooltip} from 'antd';
 import {BrowserRouter as Router} from 'react-router-dom';
 
-import TableBuilding from '../src/index.tsx';
 import {nodeMenu, edgeMenu, actionMenu} from './menu';
+import TableBuilding from '../src/index.tsx';
 import * as MockData from './mock_data/data.jsx';
 
 import 'antd/dist/antd.css';
@@ -89,31 +89,6 @@ class Component extends React.Component {
     });
   }
 
-  onAddEdge = () => {
-    const data = this.state.data;
-
-    data.edges.push({
-      "id": 1,
-      "sourceNode": "aaa",
-      "targetNode": "bbb",
-      "source": "field_1",
-      "target": "field_2"
-    });
-
-    this.setState({
-      data: {...data}
-    });
-  }
-
-  onDelEdge = () => {
-    const data = this.state.data;
-    data.edges.pop();
-
-    this.setState({
-      data: {...data}
-    });
-  }
-
   render() {
     return (
       <TableBuilding
@@ -137,6 +112,7 @@ class Component extends React.Component {
         // =========== 节点Table相关属性 ===========
         columns={this.state.columns}
         data={this.state.data}
+        onDblClickNode={(node) => {}}
         emptyContent={
           <div className="empty-content">
             <p className="desc">暂无数据</p>
@@ -146,16 +122,14 @@ class Component extends React.Component {
                 e.stopPropagation();
                 console.log('自定义空状态');
               }}
-            >
-              + 添加字段
-            </p>
+            >+ 添加字段</p>
           </div>
         }
 
         // =========== 菜单相关属性 ===========
         nodeMenu={nodeMenu}
         edgeMenu={edgeMenu}
-        actionMenu={actionMenu({onAddEdge: this.onAddEdge, onDelEdge: this.onDelEdge})}
+        actionMenu={actionMenu}
 
         // =========== 画布配置 ===========
         config={config}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-visual-modeling",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "一个基于React的数据可视化建模的DAG图，适用于UML，数据库建模，数据仓库建设等业务",
   "main": "dist/index.js",
   "pack": "pack/index.js",

src/canvas/node.js

@@ -50,6 +50,12 @@ export default class TableNode extends Node {
     } else {
       $(this.dom).find('.title').css('width', this.options._emptyWidth || 150);
     }
+
+    $(this.dom).on('dblclick', (e) => {
+      this.emit('system.node.dblClick', {
+        node: this
+      });
+    });
     // 生成右键菜单
     this._createRightMenu();
   }

src/index.tsx

@@ -74,6 +74,7 @@ interface ComProps {
   onFocusNode(node: any): void,                     // 聚焦节点事件
   onFocusEdge(edge: any): void,                     // 聚焦线段事件
   onFocusCanvas(): void,                            // 聚焦空白处事件
+  onDblClickNode?(node: any): void,                 // 双击节点事件
 
   // TODO: 展开/收缩节点
   // onDeteleNodes(nodeInfo: any): void,
@@ -236,6 +237,10 @@ export default class TableBuilding extends React.Component<ComProps, any> {
       this._focusNode(data.node);
     });
 
+    this.canvas.on('system.node.dblClick', (data: any) => {
+      this.props.onDblClickNode && this.props.onDblClickNode(data.node);
+    });
+
     this.canvas.on('system.link.click', (data: any) => {
       this._focusLink(data.edge);
     });
@@ -272,7 +277,6 @@ export default class TableBuilding extends React.Component<ComProps, any> {
     });
 
     let diffInfo = diffPropsData(result, this.canvasData, this.props.columns);
-
     if (diffInfo.addNodes.length > 0) {
       this.canvas.addNodes(diffInfo.addNodes);
     }
@@ -282,9 +286,8 @@ export default class TableBuilding extends React.Component<ComProps, any> {
     if (diffInfo.addEdges.length > 0) {
       this.canvas.addEdges(diffInfo.addEdges);
     }
-
     if (diffInfo.rmEdges.length > 0) {
-      this.canvas.removeEdges(diffInfo.rmEdges.map(edge => edge.id));
+      this.canvas.removeEdges(diffInfo.rmEdges);
     }
 
     // 更新节点中的字段
@@ -300,7 +303,7 @@ export default class TableBuilding extends React.Component<ComProps, any> {
     }
 
     this.canvasData = result;
-    return true;
+    return false;
   }
 
   componentWillUnmount() {
@@ -358,7 +361,6 @@ export default class TableBuilding extends React.Component<ComProps, any> {
     let linksInfo = links.map((item) => {
       return item.options;
     });
-
     this.props.onChange && this.props.onChange({
       type: 'system.link.delete',
       links: linksInfo