fix(edge): 修复删除边不生效的问题

fix(edge): 修复删除边不生效的问题

Author: noonnightstorm

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 {nodeMenu, edgeMenu, actionMenu} from './menu';
 import TableBuilding from '../src/index.tsx';
+import {nodeMenu, edgeMenu, actionMenu} from './menu';
 import * as MockData from './mock_data/data.jsx';
 
 import 'antd/dist/antd.css';
@@ -89,6 +89,31 @@ 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
@@ -121,14 +146,16 @@ class Component extends React.Component {
                 e.stopPropagation();
                 console.log('自定义空状态');
               }}
-            >+ 添加字段</p>
+            >
+              + 添加字段
+            </p>
           </div>
         }
 
         // =========== 菜单相关属性 ===========
         nodeMenu={nodeMenu}
         edgeMenu={edgeMenu}
-        actionMenu={actionMenu}
+        actionMenu={actionMenu({onAddEdge: this.onAddEdge, onDelEdge: this.onDelEdge})}
 
         // =========== 画布配置 ===========
         config={config}

example/menu.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {StarOutlined} from '@ant-design/icons';
+import {StarOutlined, PlusOutlined, MinusOutlined} from '@ant-design/icons';
 
 // 节点菜单
 export const nodeMenu = [
@@ -41,7 +41,10 @@ export const edgeMenu= [
   }
 ];
 
-export const actionMenu = [
+export const actionMenu = ({
+  onAddEdge,
+  onDelEdge
+}) => [
   {
     key: 'zoom-in',
     disable: true
@@ -52,5 +55,21 @@ export const actionMenu = [
     onClick: () => {
       alert('点击收藏！')
     }
+  },
+  {
+    icon: <PlusOutlined />,
+    key: 'plus',
+    title: '添加一条连线',
+    onClick: () => {
+      onAddEdge();
+    }
+  },
+  {
+    icon: <MinusOutlined />,
+    key: 'minus',
+    title: '删除一条连线',
+    onClick: () => {
+      onDelEdge();
+    }
   }
 ]

package.json

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

src/adaptor.js

@@ -23,22 +23,21 @@ export const transformInitData = (info) => {
 
   let edges = (data.edges || []).map((item) => {
     return _.assign(item, {
-      id: `${item.source}-${item.target}`,
+      id: `${item.sourceNode}-${item.source}-${item.targetNode}-${item.target}`,
       type: 'endpoint',
       _config: config,
       _menu: edgeMenu,
       Class: Edge,
       label: item.label,
     });
-  })
+  });
 
   return {
     nodes,
     edges
   }
 }
 
-
 export const diffPropsData = (newData, oldData, columns) => {
   const isSameNode = (a, b) => a.id === b.id;
   let addNodes = _.differenceWith(newData.nodes, oldData.nodes, isSameNode);
@@ -48,8 +47,8 @@ export const diffPropsData = (newData, oldData, columns) => {
     return (
       a.sourceNode === b.sourceNode &&
       a.targetNode === b.targetNode &&
-      a.sourceEndpoint === b.sourceEndpoint &&
-      a.targetEndpoint === b.targetEndpoint
+      a.source === b.source &&
+      a.target === b.target
     );
   }
 
@@ -111,10 +110,12 @@ export const diffPropsData = (newData, oldData, columns) => {
       nodeId: newNode.id,
       fields: _addFields
     });
+
     _rmFields.length > 0 && rmFields.push({
       nodeId: newNode.id,
       fields: _rmFields
     });
+
     _updateFields.length > 0 && updateFields.push({
       nodeId: newNode.id,
       fields: _updateFields

src/index.tsx

@@ -272,6 +272,7 @@ 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);
     }
@@ -281,8 +282,9 @@ 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);
+      this.canvas.removeEdges(diffInfo.rmEdges.map(edge => edge.id));
     }
 
     // 更新节点中的字段
@@ -298,7 +300,7 @@ export default class TableBuilding extends React.Component<ComProps, any> {
     }
 
     this.canvasData = result;
-    return false;
+    return true;
   }
 
   componentWillUnmount() {
@@ -356,6 +358,7 @@ 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