rightMenu

index.js

@@ -6,11 +6,12 @@ const Edge = require('./src/edge/baseEdge');
 const Endpoint = require('./src/endpoint/baseEndpoint');
 const Group = require('./src/group/baseGroup');
 const Node = require('./src/node/baseNode');
-
+const MenuService = require('./src/service/sevice.js');
 module.exports = {
   Canvas,
   Edge,
   Endpoint,
   Group,
-  Node
+  Node,
+  MenuService
 };

src/canvas/baseCanvas.less

@@ -41,7 +41,64 @@
     display: block;
   }
 }
-
+.butterfly-tips-menu{
+  position: fixed;
+  background: #fff;
+  z-index: 1000;
+  min-width: 220px;
+  border-radius: 3px;
+  .tips-menu-title{
+    padding: 3px 10px;
+    border-bottom: 1px solid #dcdcdc
+  }
+  .tips-menu-content{
+    padding: 3px 10px;
+   .yellow-point{
+      background: yellowgreen;
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      margin-right: 5px;
+    }
+  }
+}
+.butterfly-node-menu{
+  position: fixed;
+  min-width: 90px;
+  background-color: #fff;
+  background-clip: padding-box;
+  text-align: center;
+  color:#333333;
+  z-index: 200;
+  border-top:  1px solid #DCDCDC;
+  border-right:  1px solid #DCDCDC;
+  border-left:  1px solid #DCDCDC;
+  .link-menu-item:hover{
+    background: #7C93A0;
+    color: #fff;
+  }
+  .node-menu-item{
+    text-align: left;
+    padding: 6px 10px 6px 10px;
+    cursor: pointer; 
+    width: auto;
+    min-width: 90px;
+    height: 30px;
+  }
+  .node-menu-item-bottm{
+    border-bottom: none;
+    padding: 6px 10px 6px 10px;
+    height: 30px;
+  }
+  .node-menu-item:last-child{
+     border-bottom: 1px solid #DCDCDC;
+  }
+  .node-menu-item:hover{
+     background: #00C1DE;
+     color: #fff;
+  }
+}
 .butterfly-gird-canvas {
   position: absolute;
   top: 0;

src/service/sevice.js

@@ -0,0 +1,60 @@
+const $ = require('jquery');
+const _ = require('lodash');
+
+class MenuService {
+  constructor(){}
+  /** 
+   * 创建提示框
+  */
+  creatTips(param){
+      /**
+       *  param是个对象: {title: '必须有', contente: '必须有', pos: {left: '', top: ''}} 
+       */
+    $('.butterfly-tips-menu').remove();
+      let _content = $('<div class="tips-menu-content"><div class="content-box"><span class="yellow-point"></span><span class="text">' + param.content + '</span></div></div>');
+      let _dom =  $('<div class="butterfly-tips-menu"></div>').css('top', _.get(param, 'pos.top', 0) + 5).css('left', _.get(param, 'pos.left', 0) - 100);
+      let _title = $('<div class="tips-menu-title"></div>')
+                    .text(param.title);
+                    _title.appendTo(_dom);
+                    _content.appendTo(_dom);
+                    _dom.appendTo($(document.body));
+  }
+  /** 
+   * 创建菜单浮层
+  */
+  createMenu(param, callBack) {
+    /** 
+     * 其他： param是个特定字段的对象，例如{list: [{code: '', title: ''}], pos: {left: '', top: ''}}
+    */
+    $('.butterfly-node-menu').remove();
+      let nodeMenu = $('<ul class="butterfly-node-menu"></ul>').css('top', _.get(param, 'pos.top', 0)).css('left', _.get(param, 'pos.left', 0));
+      _.get(param, 'list', []).forEach((item, index) => {
+      $('<li class="node-menu-item"></li>')
+            .attr('key', `${item.code}_${index}`)
+            .text(item.title)
+            .on('click', (e) => {
+            e.stopPropagation();
+            if (typeof callBack === 'function') {
+              return callBack(item);
+              }
+            })
+            .appendTo(nodeMenu);
+        });
+        nodeMenu.appendTo($(document.body));
+  }
+  /** 
+   * 隐藏tips
+  */
+
+  hideTips(type) {
+    $('.butterfly-tips-menu').remove();
+  }
+  /** 
+   * 隐藏菜单
+   */
+  hideMenu(){
+    $('.butterfly-node-menu').remove();
+  }       
+}
+
+module.exports = MenuService;