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 ServiceCanvas = require('./src/service/sevice.js');
 module.exports = {
   Canvas,
   Edge,
   Endpoint,
   Group,
-  Node
+  Node,
+  ServiceCanvas
 };

src/canvas/baseCanvas.less

@@ -41,7 +41,79 @@
     display: block;
   }
 }
-
+.endpoint-tips-menu{
+  position: fixed;
+  background: #fff;
+  z-index: 1000;
+  min-width: 220px;
+  border-radius: 3px;
+  .endpoint-tips-menu-title{
+    padding: 3px 10px;
+    border-bottom: 1px solid #dcdcdc
+  }
+  .endpoint-tips-menu-content{
+    padding: 3px 10px;
+   .yellow-point{
+      background: yellowgreen;
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      margin-right: 5px;
+    }
+  }
+}
+.node-menu, .label-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;
+  }
+  &.dag-node-menu{
+    padding: 3px 0;
+    border-bottom: 1px solid #DCDCDC;
+    .node-menu-item{
+      text-align: left;
+      padding: 3px 10px 3px 10px;
+      cursor: pointer; 
+      width: auto;
+      min-width: 90px;
+      height: 24px;
+    }
+    .node-menu-item:last-child{
+      border-bottom: none;
+   }
+  }
+}
 .butterfly-gird-canvas {
   position: absolute;
   top: 0;

src/service/sevice.js

@@ -0,0 +1,55 @@
+const $ = require('jquery');
+const _ = require('lodash');
+
+
+function createMenuList(param, callBack, e) {
+/** 
+ * param.type:
+ * 若tips： param是个对象: {type: 'tips', title: '必须有', contente: '必须有'} 
+ * 其他： param是： {list: [{code: '', title: ''}]}  里面的字段必须传的
+ * 
+*/
+let evt = e || window.event;
+let pos = {
+    left: evt.clientX,
+    top: evt.clientY
+};
+if (param.type === 'tips') {
+    $(document.body).find('.endpoint-tips-menu').remove();
+    let _content = $('<div class="endpoint-tips-menu-content"><div class="content-box"><span class="yellow-point"></span><span class="text">' + param.content + '</span></div></div>');
+    let _dom =  $('<div class="endpoint-tips-menu"></div>').css('top', pos.top + 5).css('left', pos.left - 100);
+    let _title = $('<div class="endpoint-tips-menu-title"></div>')
+    .text(param.title);
+    _title.appendTo(_dom);
+    _content.appendTo(_dom);
+    _dom.appendTo($(document.body));
+} else {
+    $(document.body).find('.node-menu').remove();
+    let nodeMenu = $('<ul class="node-menu"></ul>').css('top', pos.top).css('left', pos.left);
+    _.get(param, 'list', []).forEach((item) => {
+    $('<li class="node-menu-item"></li>')
+        .attr('key', item.code)
+        .text(item.title)
+        .on('click', (e) => {
+        e.stopPropagation();
+        if (typeof callBack === 'function') {
+            return callBack(item);
+        }
+        })
+        .appendTo(nodeMenu);
+    });
+    nodeMenu.appendTo($(document.body));
+}
+}
+function hideMenuList(type) {
+    if (type === 'tips') {
+        $(document.body).find('.endpoint-tips-menu').remove();
+    } else {
+        $(document.body).find('.node-menu').remove();
+    }
+}
+
+module.exports = {
+    createMenuList,
+    hideMenuList
+}