fix: group redraw bug

Author: noonnightstorm

package.json

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

src/adaptor.js

@@ -28,7 +28,7 @@ export let transformInitData = (info) => {
  let {
  data, config, nodeMenu,
  edgeMenu,groupMenu, registerStatus,
- nodeMenuClassName
+ nodeMenuClassName, groupCfg = {}
  } = info;
 
  let nodes = (data.nodes || []).map((item) => {
@@ -66,6 +66,52 @@ export let transformInitData = (info) => {
  });
  });
 
+
+ // group的分页处理
+ let _groupEnablePagination = groupCfg.enablePagination;
+ let _groupPageSize = groupCfg.pageSize || 20;
+ if (_groupEnablePagination && groups && groups.length > 0) {
+
+ let _groupsObj = {};
+ let _groupHiddenNodes = {};
+
+ for(let i = 0; i < groups.length; i++) {
+ let _group = groups[i];
+ if (!_groupsObj[_group.id]) {
+ _groupsObj[_group.id] = [];
+ }
+ }
+ for(let i = 0; i < nodes.length; i++) {
+ let _node = nodes[i];
+ if (_node.group) {
+ _groupsObj[_node.group].push(_node);
+ }
+ }
+
+ groups.forEach((item) => {
+ let _nodes = _groupsObj[item.id];
+ item._enablePagination = _groupEnablePagination;
+ item._allNodeList = item._showNodeList = _nodes;
+ item._pageSize = _groupPageSize;
+ item._pageNum = 1;
+ item._totolNum = _nodes.length;
+ });
+
+ let _rmNodes = [];
+ for(let key in _groupsObj) {
+ let _group = _groupsObj[key];
+ _rmNodes = _rmNodes.concat(_group.slice(_groupPageSize, _group.length));
+ }
+ 
+ nodes = nodes.filter((item) => {
+ let isRmNode = _.some(_rmNodes, (node) => node.id === item.id);
+ if (isRmNode) {
+ _groupHiddenNodes[item.id] = item;
+ }
+ return !isRmNode;
+ });
+ }
+
  return {
  nodes,
  edges,
@@ -81,6 +127,13 @@ export let diffPropsData = (newData, oldData, diffOptions = []) => {
  let rmNodes = _.differenceWith(oldData.nodes, newData.nodes, (a, b) => {
  return a.id === b.id;
  });
+ let addGroups = _.differenceWith(newData.groups, oldData.groups, (a, b) => {
+ return a.id === b.id;
+ });
+ let rmGroups = _.differenceWith(oldData.groups, newData.groups, (a, b) => {
+ return a.id === b.id;
+ });
+
  if (diffOptions.length > 0) {
  updateNodes = _.differenceWith(newData.nodes, oldData.nodes, (a, b) => {
  return diffOptions.reduce((pre, cur) => {
@@ -118,6 +171,8 @@ export let diffPropsData = (newData, oldData, diffOptions = []) => {
  });
 
  return {
+ addGroups,
+ rmGroups,
  addNodes,
  rmNodes,
  updateNodes,

src/canvas/canvas.js

@@ -1,6 +1,6 @@
 'use strict';
 import { Canvas, Layout } from 'butterfly-dag';
-import {Node} from './node';
+import AutoLayout from '../utils/layout';
 
 export default class MonitorCanvas extends Canvas {
  constructor(opts) {
@@ -23,64 +23,30 @@ export default class MonitorCanvas extends Canvas {
  result._onSearchGroup = this._onSearchGroup;
  return result;
  }
- draw(opts, callback) {
-
- // group的分页处理
- if (this._groupEnablePagination && opts.groups && opts.groups.length > 0) {
-
- let _groupsObj = {};
- let _groupHiddenNodes = {};
-
- for(let i = 0; i < opts.groups.length; i++) {
- let _group = opts.groups[i];
- if (!_groupsObj[_group.id]) {
- _groupsObj[_group.id] = [];
- }
- }
- for(let i = 0; i < opts.nodes.length; i++) {
- let _node = opts.nodes[i];
- if (_node.group) {
- _groupsObj[_node.group].push(_node);
- }
- }
-
- opts.groups.forEach((item) => {
- let nodes = _groupsObj[item.id];
- item._enablePagination = this._groupEnablePagination;
- item._allNodeList = item._showNodeList = nodes;
- item._pageSize = this._groupPageSize;
- item._pageNum = 1;
- item._totolNum = nodes.length;
- });
-
- let _rmNodes = [];
- for(let key in _groupsObj) {
- let _group = _groupsObj[key];
- _rmNodes = _rmNodes.concat(_group.slice(this._groupPageSize, _group.length));
- }
- 
- opts.nodes = opts.nodes.filter((item) => {
- let isRmNode = _.some(_rmNodes, (node) => node.id === item.id);
- if (isRmNode) {
- _groupHiddenNodes[item.id] = item;
- }
- return !isRmNode;
- });
- }
-
- super.draw(opts, callback);
- }
  redraw() {
  let nodes = this.nodes.map((item) => {
  return item.options;
  });
+ let groups = this.groups.map((item) => {
+ return {
+ id: item.id,
+ width: item.width,
+ height: item.height,
+ isGroup: true
+ }
+ });
  let edges = this.edges.map((item) => {
  return {
- source: item.sourceNode.id,
- target: item.targetNode.id
+ sourceNode: item.sourceNode.id,
+ targetNode: item.targetNode.id
  }
  });
- Layout.dagreLayout({
+
+ AutoLayout({
+ nodes: nodes,
+ groups: groups,
+ edges: edges
+ }, {
  rankdir: _.get(this.layout, 'options.rankdir') || 'TB',
  align: _.get(this.layout, 'options.align'),
  nodeSize: _.get(this.layout, 'options.nodeSize'),
@@ -89,14 +55,10 @@ export default class MonitorCanvas extends Canvas {
  nodesep: _.get(this.layout, 'options.nodesep') || 50,
  ranksep: _.get(this.layout, 'options.ranksep') || 50,
  controlPoints: _.get(this.layout, 'options.controlPoints') || false,
- data: {
- nodes: nodes,
- edges: edges.map(item => ({
- source: item.type === 'endpoint' ? item.sourceNode : item.source,
- target: item.type === 'endpoint' ? item.targetNode : item.target
- }))
- }
+ }, {
+ rowCtn: this._groupRowCnt
  });
+
  this.nodes.forEach((item, index) => {
  let newLeft = nodes[index].left;
  let newTop = nodes[index].top;
@@ -106,6 +68,18 @@ export default class MonitorCanvas extends Canvas {
  item.moveTo(newLeft, newTop);
  }
  });
+
+ this.groups.forEach((item, index) => {
+ let newLeft = groups[index].left;
+ let newTop = groups[index].top;
+ if (item.top !== newTop || item.left !== newLeft) {
+ item.options.top = newTop;
+ item.options.left = newLeft;
+ item.moveTo(newLeft, newTop);
+ }
+ });
+
+
  this.focusCenterWithAnimate();
  }
 

src/canvas/group.js

@@ -65,7 +65,6 @@ class BaseGroup extends Group {
  group.append(this._container);
 
  this._titleContainer = titleContainer;
- console.log(this._titleContainer);
 
  return _dom;
  }

src/index.tsx

@@ -149,7 +149,8 @@ export default class MonitorDag extends React.Component<ComProps, any> {
  groupMenu: this.props.groupMenu,
  nodeMenuClassName: this.props.nodeMenuClassName,
  data: _.cloneDeep(this.props.data || {nodes: [], edges: [], groups: []}),
- registerStatus: _.cloneDeep(this.props.registerStatus)
+ registerStatus: _.cloneDeep(this.props.registerStatus),
+ groupCfg: _.get(this, 'props.config.group'),
  });
  let canvasObj = ({
  root: root,
@@ -196,14 +197,6 @@ export default class MonitorDag extends React.Component<ComProps, any> {
  rowCtn: _.get(this.props, 'config.group.rowCnt')
  });
 
- // canvasObj['layout'] = {
- // type: 'dagreLayout',
- // options: {
- // rankdir: _.get(this.props, 'config.direction', 'top-bottom') === 'top-bottom' ? 'TB' : 'LR',
- // nodesep: 40,
- // ranksep: 40
- // }
- // };
  }
 
  setTimeout(() => {
@@ -278,9 +271,16 @@ export default class MonitorDag extends React.Component<ComProps, any> {
  groupMenu: this.props.groupMenu,
  nodeMenuClassName: this.props.nodeMenuClassName,
  data: _.cloneDeep(newProps.data),
- registerStatus: _.cloneDeep(newProps.registerStatus)
+ registerStatus: _.cloneDeep(newProps.registerStatus),
+ groupCfg: _.get(newProps, 'config.group'),
  });
  let diffInfo = diffPropsData(result, this.canvasData, _.get(this, 'props.config.diffOptions', []));
+ if (diffInfo.rmGroups.length > 0) {
+ this.canvas.removeGroups(diffInfo.rmNodes.map(item => item.id));
+ }
+ if (diffInfo.addGroups.length > 0) {
+ this.canvas.addGroups(diffInfo.addGroups);
+ }
  if (diffInfo.rmNodes.length > 0) {
  this.canvas.removeNodes(diffInfo.rmNodes.map(item => item.id));
  }
@@ -312,19 +312,21 @@ export default class MonitorDag extends React.Component<ComProps, any> {
  });
  }
 
+ this.canvasData = result;
+
  if (
  _.get(this.props, 'config.autoLayout.isAlways', false) && (
  diffInfo.addNodes.length > 0 ||
  diffInfo.rmNodes.length > 0 ||
  diffInfo.addEdges.length > 0 ||
- diffInfo.rmEdges.length > 0
+ diffInfo.rmEdges.length > 0 ||
+ diffInfo.addGroups.length > 0 ||
+ diffInfo.rmGroups.length > 0
  )
  ) {
  this.canvas.redraw();
  }
 
- this.canvasData = result;
-
  // 检测轮训
  this._polling(newProps.polling);