流程图修改

skyeye-web/src/main/webapp/assets/lib/winui/css/winui.css

@@ -4094,6 +4094,44 @@ body .layer-ext-winconfirm {
 .icon-line:before { content: "\e653"; }
 .icon-quxian:before { content: "\e61d"; }
 
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1543110763663'); /* IE9*/
+  src: url('iconfont.eot?t=1543110763663#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAWAAAsAAAAACCwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8d0gdY21hcAAAAYAAAABeAAABnLN9GtxnbHlmAAAB4AAAAZgAAAHcZqOybmhlYWQAAAN4AAAALAAAADYTXoaeaGhlYQAAA6QAAAAcAAAAJAfeA4VobXR4AAADwAAAAA4AAAAQEAAAAGxvY2EAAAPQAAAACgAAAAoBBAA2bWF4cAAAA9wAAAAfAAAAIAEUAIRuYW1lAAAD/AAAAUUAAAJtPlT+fXBvc3QAAAVEAAAAOgAAAFHQeYYUeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeMT7TZm7438AQw9zA0AAUZgTJAQDgawwPeJztkEEOgDAIBAeppjEe+o96ND7Iky/vNypQDz7CJUNgQzgsMANq7EYCuRFcl7kSvrKGnzhtz1YTNGml1d6/U0jiIsc0+WdZ+LVFP95NPbWBZ9zKIHKtA/QB3voSGgAAeJxtjcFOGlEUhs+9E2BBNNUOoomi3AE1Yc7AECKBuXOHGXHTF2gs+AZdVAlxoSZDG6Nv4HJIkO5JE8vKuGnShDcxbtnBpHdm0ZX/ybn5c8537g8UpJQX+gcUSAEU82t5Ilt5WfiKvwgUb/HM6f3ygX6SWMxmqIjZNADSFYIkkU8goRDOSZqkw3n4RlSiLl8JJTQM/06n02epyWQCyfh+RmewCQgefIavcCkz2f6BrFr9qC5IdSMrS00lU6tEYdGrbmRzpBrtavsHhhwaJIIFreZIRK7Sd7ns/4+SqXgYZRQjMBMlHVHaGbkOKxSY03p8GrlCkxLuqPNl6Njttu0Mfw1bvN3mreFpdzxgxaLmj3+PB1qhoA3GndNA8GPPFsEkcLjncSf4md8WTNOYYIeHmn2iMXsnTNR0IZ3QLdPApn3LLUSzYqDFb+0mGib1K1jq+Rc6ViqoX/i9klFeXplnlrgTVtc0u5a4t3lXcmUsfbs5L2FZmvPr2HxQscG/W019a/3jpt7/YTVQ3cvs6X3X5Q3chX/MzG3WeJxjYGRgYADiaxeKlOP5bb4ycLMwgMANBcVsZJqFgek0kOJgYALxAPzFB894nGNgZGBgbvjfwBDDwgACQJKRARWwAABHCgJteJxjYWBgYEHCAACwABEAAAAAAAAAFgA2AO4AAHicY2BkYGBgYahgYGMAASYg5gJCBob/YD4DABT4AZkAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAhZGJkZmRhZGVgTc5IzEvPQ2IKzLz0nkzUvPSczIhHF32ktL8ytLEPAYGABuaDdsAAA==') format('woff'),
+  url('iconfont.ttf?t=1543110763663') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('iconfont.svg?t=1543110763663#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.icon-changfangxing:before { content: "\e601"; }
+.icon-tuoyuan:before { content: "\e62b"; }
+
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1543114806922'); /* IE9*/
+  src: url('iconfont.eot?t=1543114806922#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAPkAAsAAAAABigAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8gUf9Y21hcAAAAYAAAABLAAABcOcztctnbHlmAAABzAAAADAAAAAwwqMQ/2hlYWQAAAH8AAAALQAAADYTXqX+aGhlYQAAAiwAAAAcAAAAJAfeA4NobXR4AAACSAAAAAgAAAAICAAAAGxvY2EAAAJQAAAABgAAAAYAGAAAbWF4cAAAAlgAAAAeAAAAIAEOABRuYW1lAAACeAAAAUUAAAJtPlT+fXBvc3QAAAPAAAAAIQAAADQTJd3aeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByecT/jZm7438AQw9zA0AAUZgTJAQDe3Qv5eJxjYGBgZWBgYAZiHSBmYWBgDGFgZAABP6AoI1icmYELLM7CoARWwwISf8b9/z+MBPJZwCQDIxvDKOABkzJQHjisIJiBEQBD0AmVAAACAAAAAAMVApUAAwAHAAAlCQIhFzcnAgD+7AEUART+CuLi4mwBFAEU/uzi4uIAAHicY2BkYGAAYufbC1fE89t8ZeBmYQCBGwqGZsg0CwPTVCDFwcAE4gEA+d0HewAAAHicY2BkYGBu+N/AEMPCAAJAkpEBFTABAEcIAmsEAAAABAAAAAAAAAAAGAAAeJxjYGRgYGBi4ABiBjCLgYELCBkY/oP5DAAJdgEjAAB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxjYGKAAC4G7ICJkYmRmYErJzMvvQKIdZ0YGAAhjwPvAAAA') format('woff'),
+  url('iconfont.ttf?t=1543114806922') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('iconfont.svg?t=1543114806922#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.icon-lingxing-B:before { content: "\e60b"; }
+
+.s-line{
+	width: 5px !important;
+    font-size: 20px;
+    color: gainsboro;
+    padding-top: 6px;
+}
+
+
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1543114437517'); /* IE9*/
+  src: url('iconfont.eot?t=1543114437517#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAARcAAsAAAAABqgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY9VkjSY21hcAAAAYAAAABLAAABcOgIuEpnbHlmAAABzAAAAKsAAACsKBuqg2hlYWQAAAJ4AAAALAAAADYTXqMIaGhlYQAAAqQAAAAcAAAAJAfeA4NobXR4AAACwAAAAAgAAAAICAAAAGxvY2EAAALIAAAABgAAAAYAVgAAbWF4cAAAAtAAAAAeAAAAIAENAEJuYW1lAAAC8AAAAUUAAAJtPlT+fXBvc3QAAAQ4AAAAJAAAADeqY1hQeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByePXj2gLnhfwNDDHMDQwNQmBEkBwAANA2jeJxjYGBgZWBgYAZiHSBmYWBgDGFgZAABP6AoI1icmYELLM7CoARWwwISf/bg/38YCeSzgEkGRjaGUcADJmWgPHBYQTADIwBMyAzpAHicY2BkAALmPUyNDKYMDIzM7OJ8jOxApKSmrscIQcpq7GxAyMcoamxixyRuJiYuxyguJi5mbGRuZm7HaM68x+hzFYuIgIiaILOUqJACr4i2kKKftoayvLSOnKRYvJCejbKujwSHqrSUtJqGsa6CjIA4OyMLo9Z6Jl4jaQUlRlFFaXcNC08RVTVGIT5ZXW/nSgWx9FJ7RsZwT+kIHU0JRTUZPWlTMQYADoQXYQB4nGNgZGBgAGK3hSU74/ltvjJwszCAwA0F/aPINAsDUyOQ4mBgAvEAA9kILnicY2BkYGBu+N/AEMPCAAJAkpEBFTABAEcIAmsEAAAABAAAAAAAAAAAVgAAeJxjYGRgYGBiMGMA0SAWAwMXEDIw/AfzGQAN3QFQAAB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxjYGKAAC4G7ICJkYmRmYG3sLQiMzEvC4hL8ksZGAA2DQWz') format('woff'),
+  url('iconfont.ttf?t=1543114437517') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('iconfont.svg?t=1543114437517#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.icon-quxianjiantou:before { content: "\e6e0"; }
 
 
 /*** 流程图样式end ***/

skyeye-web/src/main/webapp/js/flowchart/makeflowchart.js

@@ -50,74 +50,60 @@ layui.config({
 	//设置点击选中项
 	net.on("itemactived", function(e){
 		sel = e.item;
-		console.log(sel);
 	});
 	
-	var i = 1;//位置坐标
-	$("body").on("mouseenter", "#addCircle", function(e){//添加圆形节点
-		tip_index = layer.tips('添加圆形', '#addCircle', {time: 0, tips: 3});
-	}).on('mouseleave', '#addCircle', function(){
+	$("body").on("mouseenter", "#delete", function(e){//删除
+		tip_index = layer.tips('删除', '#delete', {time: 0, tips: 3});
+	}).on('mouseleave', '#delete', function(){
         layer.close(tip_index);
     });
-	$("body").on("click", "#addCircle", function(e){//添加圆形节点
-		net.add('node', {
+	$("body").on("click", "#delete", function(e){//删除
+		if(sel){
+			net.remove(sel);
+		}
+		sel = null;
+	});
+	
+	$("body").on("mouseenter", "#addCustom1", function(e){//添加起止节点
+		tip_index = layer.tips('起止节点', '#addCustom1', {time: 0, tips: 3});
+	}).on('mouseleave', '#addCustom1', function(){
+        layer.close(tip_index);
+    });
+	$("body").on("click", "#addCustom1", function(e){//添加起止节点
+		net.beginAdd('node', {
+	        label: '[起止节点]',
 	        shape: 'circle',
-	        id: 'id' + i++,
-	        x: 50 + i * 10,
-	        y: 50 + i * 10
+	        color: '#EE4000'
 	    });
-	    net.refresh();
 	});
 	
-	$("body").on("mouseenter", "#addRect", function(e){//添加矩形
-		tip_index = layer.tips('添加矩形', '#addRect', {time: 0, tips: 3});
-	}).on('mouseleave', '#addRect', function(){
+	$("body").on("mouseenter", "#addCustom2", function(e){//添加常规节点
+		tip_index = layer.tips('常规节点', '#addCustom2', {time: 0, tips: 3});
+	}).on('mouseleave', '#addCustom2', function(){
         layer.close(tip_index);
     });
-	$("body").on("click", "#addRect", function(e){//添加矩形
-		net.add('node', {
-	        shape: 'rect',
-	        id: 'id' + i++,
-	        x: 50 + i * 10,
-	        y: 50 + i * 10
-	    });
+	$("body").on("click", "#addCustom2", function(e){//添加常规节点
+		net.beginAdd('node', {
+			label: '[常规节点]',
+			shape: 'rect',
+			color: '#5CACEE',
+		});
 	    net.refresh();
 	});
-
-	$('#delete').on('click', function() {//根据添加顺序删除
-	    if (i > 1) {
-	        i = i - 1;
-	        const item = net.find('id' + i);
-	        net.remove(item);
-	        net.refresh();
-	    }
-	});
 	
-	$("body").on("mouseenter", "#addCustom1", function(e){//添加自定义节点图形
-		tip_index = layer.tips('添加自定义节点图形', '#addCustom1', {time: 0, tips: 3});
-	}).on('mouseleave', '#addCustom1', function(){
+	$("body").on("mouseenter", "#addCustom3", function(e){//添加条件节点
+		tip_index = layer.tips('条件节点', '#addCustom3', {time: 0, tips: 3});
+	}).on('mouseleave', '#addCustom3', function(){
         layer.close(tip_index);
     });
-	$("body").on("click", "#addCustom1", function(e){//添加自定义节点图形
+	$("body").on("click", "#addCustom3", function(e){//添加条件节点
 		net.beginAdd('node', {
-	        label: '[未定义]',
-	        shape: 'circle'
+	        label: '[条件节点]',
+	        shape: 'rhombus',
+	        color: '#54FF9F',
 	    });
 	});
 
-	$('#addCustom2').on('click', function() {//添加自定义节点图形
-		console.log(1);
-	    net.beginAdd('node', {label: '[未定义]'});
-	    net.refresh();
-	});
-
-	$('#addCustom3').on('click', function() {//添加自定义节点图形
-	    net.beginAdd('node', {
-	        label: '[未定义]',
-	        shape: 'customNode1'//<====
-	    });
-	});
-	
 	$("body").on("mouseenter", "#addLine", function(e){//添加普通直线
 		tip_index = layer.tips('添加普通直线', '#addLine', {time: 0, tips: 3});
 	}).on('mouseleave', '#addLine', function(){
@@ -125,7 +111,8 @@ layui.config({
     });
 	$("body").on("click", "#addLine", function(e){//添加普通直线
 		net.beginAdd('edge', {
-	        shape: 'line'
+	        shape: 'line',
+	        color: 'red',
 	    });
 	});
 	
@@ -136,7 +123,7 @@ layui.config({
     });
 	$("body").on("click", "#addArrowLine", function(e){//添加箭头直线
 		net.beginAdd('edge', {
-	        shape: 'arrow'
+	        shape: 'arrow',
 	    });
 	});
 	
@@ -151,6 +138,17 @@ layui.config({
 	    });
 	});
 	
+	$("body").on("mouseenter", "#addArrowSmooth", function(e){//添加箭头曲线
+		tip_index = layer.tips('添加箭头曲线', '#addArrowSmooth', {time: 0, tips: 3});
+	}).on('mouseleave', '#addArrowSmooth', function(){
+        layer.close(tip_index);
+    });
+	$("body").on("click", "#addArrowSmooth", function(e){//添加箭头曲线
+		net.beginAdd('edge', {
+	        shape: 'smoothArrow'
+	    });
+	});
+	
 	$("body").on("mouseenter", "#drag", function(e){//拖拽模式
 		tip_index = layer.tips('拖拽模式', '#drag', {time: 0, tips: 3});
 	}).on('mouseleave', '#drag', function(){
@@ -177,8 +175,139 @@ layui.config({
 	$("body").on("click", "#consoleJSON", function(e){//保存
 		const saveData = net.save();
 	    const json = JSON.stringify(saveData, null, 2);
-	    console.log(saveData, json); // eslint-disable-line no-console
+	    console.log(saveData, json);
+	});
+	
+	//可编辑标签属性
+	var Util = G6.Util;
+	var input = Util.createDOM('<input class="g6-label-input" />', {
+		position : 'absolute',
+		zIndex : 10,
+		display : 'none'
+	});
+	function hasClass(shape, className) {
+		if (shape) {
+			const
+			clasees = shape.get('class');
+			if (clasees && clasees.indexOf(className) !== -1) {
+				return true;
+			}
+		}
+		return false;
+	}
+	function showInputLabel(node) {
+		if (!node) {
+			return;
+		}
+		const group = node.get('group');
+		const label = group.findBy(function(child) {
+			if (hasClass(child, 'label')) {
+				return true;
+			}
+			return false;
+		});
+		const rootGroup = net.get('rootGroup');
+		const bbox = Util.getBBox(label, rootGroup);
+		const borderWidth = 1;
+		const text = label.attr('text');
+		clearAllActived();
+		input.value = text;
+		input.show();
+		input.css({
+			top : bbox.minY - borderWidth + 'px',
+			left : bbox.minX - borderWidth + 'px',
+			width : bbox.width + 'px',
+			height : bbox.height + 'px',
+			padding : '0px',
+			margin : '0px',
+			border : borderWidth + 'px solid #999'
+		});
+		input.focus();
+		input.node = node;
+	}
+	function updateLabel() {
+		if (input.visibility) {
+			const node = input.node;
+			clearAllActived();
+			if (input.value !== node.get('model').name) {
+				if (input.value) {
+					net.update(node, {
+						label : input.value
+					});
+				}
+			}
+			input.hide();
+		}
+	}
+	function clearAllActived() {
+		net.clearAllActived();
+		net.refresh(false);
+	}
+	input.hide = function() {
+		input.css({
+			display : 'none'
+		});
+		input.visibility = false;
+	};
+	input.show = function() {
+		input.css({
+			display : 'block'
+		});
+		input.visibility = true;
+	};
+	input.on('keydown', function(ev) {
+		if (ev.keyCode === 13) {
+			updateLabel();
+		}
+	});
+	input.on('blur', function(ev) {
+		updateLabel();
+	});
+	const graphContainer = net.get('graphContainer');//获取图表内部容器
+	graphContainer.appendChild(input);//追加input输入框
+	graphContainer.oncontextmenu = function (e) { return false; }//阻止默认右键菜单
+	net.on('contextmenu', function(ev) {// 鼠标右键点击事件
+	    console.log("选中类型:", ev.itemType);
+	    console.log(ev);
+	});
+	net.on('itemmouseenter', function(ev) {//子项鼠标悬浮
+	    const item = ev.item;
+	    net.update(item, {
+//	        color: 'red',
+	    });
+	    net.refresh();
+	});
+	net.on('itemmouseleave', function(ev) {//子项鼠标离开事件
+	    const item = ev.item;
+	    net.update(item, {
+//	        color: null
+	    });
+	    net.refresh();
+	});
+	net.on('itemmousedown', function(ev) {//子项鼠标按下
+	    const item = ev.item;
+	    net.update(item, {
+//	        color: '#9ef'
+	    });
+	    net.refresh();
+	});
+	net.on('itemmouseup', function(ev) {//子项鼠标弹起
+	    const item = ev.item;
+	    net.update(item, {
+//	        color: 'null'
+	    });
+	    net.refresh();
+	});
+	net.on('dragmove', function(ev) {//拖拽隐藏
+	    input.hide();
+	});
+	net.on('dblclick', function(ev) {//双击显示
+	    const item = ev.item;
+	    const shape = ev.shape;
+	    if (hasClass(shape, 'label') && item && item.get('type') === 'node') {//节点的情况下
+	        showInputLabel(item);
+	    }
 	});
 	
-    exports('makeflowchart', {});
+	exports('makeflowchart', {});
 });

skyeye-web/src/main/webapp/tpl/flowchart/makeflowchart.html

@@ -12,11 +12,15 @@
     	<div id="toolBar" class="lct-toolBar layui-col-xs12">
 			<ul>
 				<li>
-					<button class="layui-btn layui-btn-primary layui-btn-sm" id="addCircle"><i class="fa fa-circle-o"></i></button>
+					<button class="layui-btn layui-btn-primary layui-btn-sm" id="addCustom1"><i class="iconfont icon-tuoyuan"></i></button>
 				</li>
 				<li>
-					<button class="layui-btn layui-btn-primary layui-btn-sm" id="addRect"><i class="fa fa-object-ungroup"></i></button>
+					<button class="layui-btn layui-btn-primary layui-btn-sm" id="addCustom2"><i class="iconfont icon-changfangxing"></i></button>
 				</li>
+				<li>
+					<button class="layui-btn layui-btn-primary layui-btn-sm" id="addCustom3"><i class="iconfont icon-lingxing-B"></i></button>
+				</li>
+				<li class="s-line">|</li>
 				<li>
 					<button class="layui-btn layui-btn-primary layui-btn-sm" id="addLine"><i class="iconfont icon-line"></i></button>
 				</li>
@@ -27,24 +31,25 @@
 					<button class="layui-btn layui-btn-primary layui-btn-sm" id="addSmooth"><i class="iconfont icon-quxian"></i></button>
 				</li>
 				<li>
-					<button class="layui-btn layui-btn-primary layui-btn-sm" id="addCustom1"><i class="iconfont icon-quxian"></i></button>
+					<button class="layui-btn layui-btn-primary layui-btn-sm" id="addArrowSmooth"><i class="iconfont icon-quxianjiantou"></i></button>
 				</li>
+				<li class="s-line">|</li>
 				<li>
 					<button class="layui-btn layui-btn-primary layui-btn-sm" id="drag"><i class="fa fa-arrows"></i></button>
 				</li>
 				<li>
 					<button class="layui-btn layui-btn-primary layui-btn-sm" id="edit"><i class="fa fa-edit"></i></button>
 				</li>
+				<li class="s-line">|</li>
+				<li>
+					<button class="layui-btn layui-btn-primary layui-btn-sm" id="delete"><i class="fa fa-trash-o"></i></button>
+				</li>
 				<li>
 					<button class="layui-btn layui-btn-primary layui-btn-sm" id="consoleJSON"><i class="fa fa-save"></i></button>
 				</li>
 			</ul>
 		</div>
-	    
-	        <!-- 
-	        <button id="delete">删除</button>
-	        <button id="addCustom2">自定义形2</button>
-	        <button id="addCustom3">自定义形3</button> -->
+		
         <div class="layui-col-xs12">
         	<div class="layui-col-xs2 left-div">
 	        </div>