feat: 支持节点菜单函数类型 & 支持节点菜单样式

Author: senfish

README.en-US.md

@@ -35,7 +35,8 @@ npm install react-monitor-dag
 | width | component width | <font color="c41d7f">number &#124; string</font> | - |
 | height | component height | <font color="c41d7f">number &#124; string </font> | - |
 | className | component className | <font color="c41d7f">string</font> | - |
-| nodeMenu | Node Right-click Menu Configuration | <font color="c41d7f">Array&#60; [menu](#menu-type)&#62; </font> | [ ] |
+| nodeMenu | Node Right-click Menu Configuration | <font color="c41d7f">Array&#60; [menu](#menu-type)&#62; &#124; (node) => Array&#60; [menu](#menu-type)&#62; </font> | - |
+| nodeMenuClassName | Node Right-click Menu classname | <font color="c41d7f">string</font> | - |
 | edgeMenu | Edge Right-click Menu Configuration | <font color="c41d7f">Array&#60; [menu]
 | groupMenu | Group Right-click Menu Configuration | <font color="c41d7f">Array&#60; [menu]
 (#menu-type)&#62; </font> | [ ] |

README.md

@@ -35,7 +35,8 @@ npm install react-monitor-dag
 | width | 组件宽度 | <font color="c41d7f">number &#124; string</font> | - |
 | height | 组件高度 | <font color="c41d7f">number &#124; string </font> | - |
 | className | 组件类名 | <font color="c41d7f">string</font> | - |
-| nodeMenu | 节点右键菜单配置 | <font color="c41d7f">Array&#60; [menu](#menu-type)&#62; </font> | [ ] |
+| nodeMenu | 节点右键菜单配置 | <font color="c41d7f">Array&#60; [menu](#menu-type)&#62; &#124; (node) => Array&#60; [menu](#menu-type)&#62;</font> | - |
+| nodeMenuClassName | 节点右键菜单样式 | string | - |
 | edgeMenu | 线段右键菜单配置 | <font color="c41d7f">Array&#60; [menu](#menu-type)&#62; </font> | [ ] |
 | config | 组件的画布配置，见[config Prop](#config) | <font color="c41d7f">any </font> | - |
 | polling | 组件的轮训属性配置，见[polling Prop](#polling) | <font color="c41d7f">object</font> | { } |

package.json

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

src/adaptor.js

@@ -25,13 +25,18 @@ import * as _ from 'lodash';
 
 
 export let transformInitData = (info) => {
- let {data, config, nodeMenu, edgeMenu,groupMenu, registerStatus} = info;
+ let {
+ data, config, nodeMenu,
+ edgeMenu,groupMenu, registerStatus,
+ nodeMenuClassName
+ } = info;
 
  let nodes = (data.nodes || []).map((item) => {
  return _.assign(item, {
  _config: config,
  _menu: nodeMenu,
  _registerStatus: registerStatus,
+ _nodeMenuClassName: nodeMenuClassName,
  Class: ScheduleNode
  });
  });

src/canvas/node.js

@@ -7,7 +7,7 @@ import * as _ from 'lodash';
 import * as ReactDOM from 'react-dom';
 import RightMenuGen from './right-menu';
 import { Tips } from 'butterfly-dag';
-
+import getType from './../utils/getType';
 export default class ScheduleNode extends Node {
  constructor(opts) {
  super(opts);
@@ -164,12 +164,13 @@ export default class ScheduleNode extends Node {
  }
  // 生成右键菜单
  _createRightMenu() {
- let menus = _.get(this, 'options._menu', []);
- if (menus.length > 0) {
+ let menus = _.get(this, 'options._menu');
+ let nodeMenuClassName = _.get(this, 'options._nodeMenuClassName', '');
+ if(['function', 'array'].includes(getType(menus))) {
  $(this.dom).contextmenu((e) => {
  e.preventDefault();
  e.stopPropagation();
- RightMenuGen(this.dom, 'node', [e.clientX, e.clientY], menus, this.options);
+ RightMenuGen(this.dom, 'node', [e.clientX, e.clientY], menus, this.options, nodeMenuClassName);
  this.emit('custom.node.rightClick', {
  node: this
  });

src/canvas/right-menu.js

@@ -1,11 +1,14 @@
 'use strict';
 import $ from 'jquery';
 import * as ReactDOM from 'react-dom';
+import getType from '../utils/getType';
 
 const Tips = require('butterfly-dag').Tips;
 
-let _genTipDom = (menuData, data) => {
+let _genTipDom = (menu, data) => {
  let dom = $('<div class="menu-container"></div>');
+ let menuType = getType(menu);
+ let menuData = menuType === 'function' ? menu(data) : menu;
  menuData.forEach((item) => {
  let menuItem = $('<div class="menu-item"></div>');
  if (item.onClick) {
@@ -26,15 +29,15 @@ let _genTipDom = (menuData, data) => {
  return dom[0]
 }
 
-export default (container, type, pos, menuData, data) => {
+export default (container, type, pos, menu, data, classname = '') => {
  Tips.createMenu({
- className: `butterfly-${type}-monitor-menu`,
+ className: `butterfly-${type}-monitor-menu ${classname}`,
  targetDom: container,
- genTipDom: () => { return _genTipDom(menuData, data) },
+ genTipDom: () => { return _genTipDom(menu, data) },
  placement: 'right',
  action: null,
  x: pos[0],
  y: pos[1],
  closable: true
  });
-}
+}

src/index.tsx

@@ -59,7 +59,8 @@ interface ComProps {
  width?: number | string, // 组件宽
  height?: number | string, // 组件高
  className?: string, // 组件classname
- nodeMenu: Array<menu>, // 节点右键菜单配置
+ nodeMenu: Array<menu> | ((node) => Array<menu>), // 节点右键菜单配置
+ nodeMenuClassName?: string, // 节点菜单样式
  edgeMenu: Array<menu>, // 线段右键菜单配置
  groupMenu: Array<menu>, // group右键配置
  config?: config, // 画布配置
@@ -139,6 +140,7 @@ export default class MonitorDag extends React.Component<ComProps, any> {
  nodeMenu: this.props.nodeMenu,
  edgeMenu: this.props.edgeMenu,
  groupMenu: this.props.groupMenu,
+ nodeMenuClassName: this.props.nodeMenuClassName,
  data: _.cloneDeep(this.props.data || {nodes: [], edges: [], groups: []}),
  registerStatus: _.cloneDeep(this.props.registerStatus)
  });

src/utils/getType.js

@@ -0,0 +1,7 @@
+const originToString = Object.prototype.toString;
+const getType = (data) => {
+ let type = originToString.call(data);
+ return type.match(/\[object (.*?)\]/)[1].toLowerCase();
+};
+
+export default getType;