feat: 支持节点更新时自定义diff字段

feat: 支持节点更新时自定义diff字段

Author: noonnightstorm

README.en-US.md

@@ -84,7 +84,7 @@ the configuration of canvas
 | minimap | whether to show minimap | [minimap Prop](#minimap-prop)<font color="c41d7f"> { }</font> | - |
 | delayDraw | Delayed rendering. This component must ensure that the canvas container rendering (including animation execution) is completed before rendering, otherwise the coordinates will be offset, for example：Animation of Ant Design Modal | <font color="c41d7f"> number</font> | 0 |
 | autoLayout | custom layout | [autoLayout Prop](#auto-layout-prop)<font color="c41d7f"> {}</font> | - |
-
+| diffOptions | Collection of diff fields for node updates| Array&#60; string&#62; | - |
 
 <br>
 

README.md

@@ -82,6 +82,7 @@ npm install react-monitor-dag
 | minimap | 是否开启缩略图 | [minimap Prop](#minimap-prop)<font color="c41d7f"> { }</font> | - |
 | delayDraw | 是否延迟加载 | <font color="c41d7f"> number</font> | 0 |
 | autoLayout | 自定义布局 | [autoLayout Prop](#auto-layout-prop)<font color="c41d7f"> {}</font> | - |
+| diffOptions | 节点更新时diff的字段集合| Array&#60; string&#62; | - |
 <br>
 
 ### <a name='edge-prop'></a><b>edge</b>

example/index.jsx

@@ -1,39 +1,24 @@
 'use strict';
 
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
-import {BrowserRouter as Router} from 'react-router-dom';
-import {Layout, Pagination, Input} from 'antd';
-import {CloseCircleOutlined, CheckOutlined} from '@ant-design/icons';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Layout, Pagination, Input } from 'antd';
+import { CloseCircleOutlined, CheckOutlined } from '@ant-design/icons';
 import MonitorDag from '../src/index.tsx';
 import mockData from './mock_data/data';
+import _ from 'lodash';
 import 'antd/dist/antd.css';
 import './index.less';
 
-const {Header} = Layout;
+const { Header } = Layout;
 const { Search } = Input;
 
-const nodeMenu = [{
- key: 'detail',
- title: '节点信息',
- onClick: (key, data) => {
- console.log('click detail info')
- }
-}, {
- key: 'run',
- render: (key, data) => {
- return <span>节点运行</span>
- },
- onClick: (key, data) => {
- console.log('run node');
- }
-}]
-
 const edgeMenu = [{
  key: 'detail',
  title: '线段信息',
  onClick: (key, data) => {
- console.log('click detail info',data)
+ console.log('click detail info', data)
  }
 }, {
  key: '监控流程',
@@ -60,74 +45,92 @@ const groupMenu = [{
  console.log('run node');
  }
 }]
-
+const Demo = () => {
+ const [canvasData, setCanvasData] = useState(mockData);
+ const nodeMenu = [{
+ key: 'detail',
+ title: '节点信息',
+ onClick: (key, data) => {
+ console.log('click detail info');
+ }
+ }, {
+ key: 'run',
+ render: (key, data) => {
+ return <span>节点运行</span>
+ },
+ onClick: (key, data) => {
+ console.log('run node');
+ }
+ }];
+ return <MonitorDag
+ data={canvasData}
+ nodeMenu={nodeMenu}
+ edgeMenu={edgeMenu}
+ groupMenu={groupMenu}
+ config={{
+ focusCenter: true,
+ direction: 'top-bottom',
+ autoLayout: {
+ enable: false,
+ isAlways: false,
+ },
+ labelRender: (label, info) => {
+ return label;
+ },
+ labelTipsRender: (label, info) => {
+ return `${label}: 自定义label tips`;
+ },
+ nodeRender: (nodeOpts) => {
+ return (
+ <span className="node-text">{nodeOpts.title + nodeOpts.id + nodeOpts.status}</span>
+ )
+ },
+ // diffOptions: ['status'],
+ // statusNote: {
+ // notes: [{
+ // code: 'fail',
+ // render: () => {
+ // return <span><CloseCircleOutlined />失败</span>
+ // }
+ // }, {
+ // code: 'success',
+ // render: () => {
+ // return <span><CheckOutlined />成功</span>
+ // }
+ // }]
+ // },
+ nodeTipsRender: (nodeOpts) => {
+ return <span>{nodeOpts.title}: 自定义节点tips</span>
+ },
+ endpointTipsRender: (pointOpts) => {
+ return <span>自定义锚点tips</span>
+ },
+ group: {
+ enablePagination: true,
+ enableSearch: true
+ },
+ minimap: {
+ enable: true,
+ config: {
+ nodeColor: 'rgba(216, 216, 216, 0.13)',
+ activeNodeColor: '#F66902',
+ viewportStyle: {
+ 'background-color': 'rgba(216, 216, 216, 0.07)'
+ },
+ groups: mockData.groups,
+ nodes: mockData.nodes
+ }
+ },
+ }}
+ />
+}
 
 ReactDOM.render((
  <Router>
  <Layout>
  <Header className='header'>DTDesign-React运维/监控图</Header>
  <Layout>
- <MonitorDag
- data={mockData}
- nodeMenu={nodeMenu}
- edgeMenu={edgeMenu}
- groupMenu={groupMenu}
- config={{
- focusCenter: true,
- direction: 'top-bottom',
- autoLayout: {
- enable: false,
- isAlways: false,
- },
- labelRender: (label, info) => {
- return label;
- },
- labelTipsRender: (label, info) => {
- return `${label}: 自定义label tips`;
- },
- // nodeRender: (nodeOpts) => {
- // return (
- // <span className="node-text">{nodeOpts.title + nodeOpts
- // .id}</span>
- // )
- // },
- // statusNote: {
- // notes: [{
- // code: 'fail',
- // render: () => {
- // return <span><CloseCircleOutlined />失败</span>
- // }
- // }, {
- // code: 'success',
- // render: () => {
- // return <span><CheckOutlined />成功</span>
- // }
- // }]
- // },
- nodeTipsRender: (nodeOpts) => {
- return <span>{nodeOpts.title}: 自定义节点tips</span>
- },
- endpointTipsRender: (pointOpts) => {
- return <span>自定义锚点tips</span>
- },
- group: {
- enablePagination: true,
- enableSearch: true
- },
- minimap: {
- enable: true,
- config: {
- nodeColor: 'rgba(216, 216, 216, 0.13)',
- activeNodeColor: '#F66902',
- viewportStyle: {
- 'background-color': 'rgba(216, 216, 216, 0.07)'
- },
- groups: mockData.groups,
- nodes: mockData.nodes
- }
- },
- }}
- />
+ <Demo />
  </Layout>
  </Layout>
  </Router>

example/package.json

@@ -35,6 +35,7 @@
  "html-webpack-plugin": "^3.2.0",
  "less": "~3.7.0",
  "less-loader": "~4.1.0",
+ "lodash": "^4.17.21",
  "mini-css-extract-plugin": "~0.9.0",
  "style-loader": "~0.21.0",
  "ts-loader": "~8.0.14",

package.json

@@ -1,6 +1,6 @@
 {
  "name": "react-monitor-dag",
- "version": "1.0.17",
+ "version": "1.0.18",
  "description": "一个基于React的运维/监控DAG图",
  "main": "dist/index.js",
  "pack": "pack/index.js",

src/adaptor.js

@@ -73,13 +73,21 @@ export let transformInitData = (info) => {
  }
 }
 
-export let diffPropsData = (newData, oldData) => {
+export let diffPropsData = (newData, oldData, diffOptions = []) => {
+ let updateNodes = [];
  let addNodes = _.differenceWith(newData.nodes, oldData.nodes, (a, b) => {
  return a.id === b.id;
  });
  let rmNodes = _.differenceWith(oldData.nodes, newData.nodes, (a, b) => {
  return a.id === b.id;
  });
+ if (diffOptions.length > 0) {
+ updateNodes = _.differenceWith(newData.nodes, oldData.nodes, (a, b) => {
+ return diffOptions.reduce((pre, cur) => {
+ return pre && a[cur] === b[cur];
+ }, a[diffOptions[0]] === b[diffOptions[0]]);
+ })
+ }
  let addEdges = _.differenceWith(newData.edges, oldData.edges, (a, b) => {
  return (
  a.sourceNode === b.sourceNode &&
@@ -112,6 +120,7 @@ export let diffPropsData = (newData, oldData) => {
  return {
  addNodes,
  rmNodes,
+ updateNodes,
  addEdges,
  rmEdges,
  updateStatus

src/canvas/canvas.js

@@ -43,4 +43,4 @@ export default class MonitorCanvas extends Canvas {
  });
  this.focusCenterWithAnimate();
  }
-};
+};

src/index.tsx

@@ -23,6 +23,7 @@ interface config {
  showActionIcon?: boolean,// 是否操作icon：放大，缩小，聚焦
  focusCenter?: boolean, //是否初始化的时候把所有节点居中
  draggable?: boolean, // 是否允许节点拖拽
+ diffOptions?: Array<string>, // 更新节点时，需要diff的字段集合（默认节点diff节点id）
  edge?: { //定制线段的类型，todo需要思考
  type: string,
  config: any,
@@ -254,12 +255,22 @@ export default class MonitorDag extends React.Component<ComProps, any> {
  data: _.cloneDeep(newProps.data),
  registerStatus: _.cloneDeep(newProps.registerStatus)
  });
- let diffInfo = diffPropsData(result, this.canvasData);
+ let diffInfo = diffPropsData(result, this.canvasData, _.get(this, 'props.config.diffOptions', []));
+ if (diffInfo.rmNodes.length > 0) {
+ this.canvas.removeNodes(diffInfo.rmNodes.map(item => item.id));
+ }
  if (diffInfo.addNodes.length > 0) {
  this.canvas.addNodes(diffInfo.addNodes);
  }
- if (diffInfo.rmNodes.length > 0) {
- this.canvas.removeNodes(diffInfo.rmNodes.map(item => item.id));
+ if(diffInfo.updateNodes.length > 0) {
+ let removeData = this.canvas.removeNodes(diffInfo.updateNodes.map(item => item.id), false, true);
+ let _addNodes = this.canvas.addNodes(diffInfo.updateNodes, true);
+ _addNodes.forEach(item => {
+ item.mounted && item.mounted();
+ });
+ this.canvas.addEdges(removeData.edges.map(edge => {
+ return edge.options;
+ }), true);
  }
  if (diffInfo.addEdges.length > 0) {
  this.canvas.addEdges(diffInfo.addEdges);