提交 9b6fa893 编写于 作者: doc_wei's avatar doc_wei

更新

上级 882bffd4
......@@ -24,5 +24,14 @@
<arguments>1.0-name-matches-false-false-node_modules</arguments>
</matcher>
</filter>
<filter>
<id>1542973126259</id>
<name></name>
<type>26</type>
<matcher>
<id>org.eclipse.ui.ide.multiFilter</id>
<arguments>1.0-name-matches-false-false-node_modules</arguments>
</matcher>
</filter>
</filteredResources>
</projectDescription>
layui.config({
base: basePath,
}).extend({ //指定js别名
g6: '../layui/lay/modules/flowchart/g6.min',
reactDomProductionMin: '../layui/lay/modules/flowchart/react-dom.production.min'
}).define(['jquery', 'g6', 'reactDomProductionMin'], function (exports) {
var jQuery = layui.jquery;
(function($) {
/** @license React v16.4.0
* react.production.min.js
*
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
'use strict';(function(p,h){"object"===typeof exports&&"undefined"!==typeof module?module.exports=h():"function"===typeof define&&define.amd?define(h):p.React=h()})(this,function(){function p(a){for(var b=arguments.length-1,f="https://reactjs.org/docs/error-decoder.html?invariant="+a,d=0;d<b;d++)f+="&args[]="+encodeURIComponent(arguments[d+1]);O(!1,"Minified React error #"+a+"; visit %s for the full message or use the non-minified dev environment for full errors and additional helpful warnings. ",
f)}function h(a){return function(){return a}}function q(a,b,f){this.props=a;this.context=b;this.refs=D;this.updater=f||E}function F(){}function v(a,b,f){this.props=a;this.context=b;this.refs=D;this.updater=f||E}function G(a,b,f){var d=void 0,e={},k=null,c=null;if(null!=b)for(d in void 0!==b.ref&&(c=b.ref),void 0!==b.key&&(k=""+b.key),b)H.call(b,d)&&!I.hasOwnProperty(d)&&(e[d]=b[d]);var g=arguments.length-2;if(1===g)e.children=f;else if(1<g){for(var m=Array(g),l=0;l<g;l++)m[l]=arguments[l+2];e.children=
m}if(a&&a.defaultProps)for(d in g=a.defaultProps,g)void 0===e[d]&&(e[d]=g[d]);return{$$typeof:r,type:a,key:k,ref:c,props:e,_owner:w.current}}function x(a){return"object"===typeof a&&null!==a&&a.$$typeof===r}function P(a){var b={"=":"=0",":":"=2"};return"$"+(""+a).replace(/[=:]/g,function(a){return b[a]})}function J(a,b,f,d){if(u.length){var e=u.pop();e.result=a;e.keyPrefix=b;e.func=f;e.context=d;e.count=0;return e}return{result:a,keyPrefix:b,func:f,context:d,count:0}}function K(a){a.result=null;a.keyPrefix=
null;a.func=null;a.context=null;a.count=0;10>u.length&&u.push(a)}function t(a,b,f,d){var e=typeof a;if("undefined"===e||"boolean"===e)a=null;var k=!1;if(null===a)k=!0;else switch(e){case "string":case "number":k=!0;break;case "object":switch(a.$$typeof){case r:case Q:k=!0}}if(k)return f(d,a,""===b?"."+y(a,0):b),1;k=0;b=""===b?".":b+":";if(Array.isArray(a))for(var c=0;c<a.length;c++){e=a[c];var g=b+y(e,c);k+=t(e,g,f,d)}else if(null===a||"undefined"===typeof a?g=null:(g=L&&a[L]||a["@@iterator"],g="function"===
typeof g?g:null),"function"===typeof g)for(a=g.call(a),c=0;!(e=a.next()).done;)e=e.value,g=b+y(e,c++),k+=t(e,g,f,d);else"object"===e&&(f=""+a,p("31","[object Object]"===f?"object with keys {"+Object.keys(a).join(", ")+"}":f,""));return k}function y(a,b){return"object"===typeof a&&null!==a&&null!=a.key?P(a.key):b.toString(36)}function R(a,b,f){a.func.call(a.context,b,a.count++)}function S(a,b,f){var d=a.result,e=a.keyPrefix;a=a.func.call(a.context,b,a.count++);Array.isArray(a)?z(a,d,f,A.thatReturnsArgument):
null!=a&&(x(a)&&(b=e+(!a.key||b&&b.key===a.key?"":(""+a.key).replace(M,"$&/")+"/")+f,a={$$typeof:r,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}),d.push(a))}function z(a,b,f,d,e){var c="";null!=f&&(c=(""+f).replace(M,"$&/")+"/");b=J(b,c,d,e);null==a||t(a,"",S,b);K(b)}var N=Object.getOwnPropertySymbols,T=Object.prototype.hasOwnProperty,U=Object.prototype.propertyIsEnumerable,B=function(){try{if(!Object.assign)return!1;var a=new String("abc");a[5]="de";if("5"===Object.getOwnPropertyNames(a)[0])return!1;
var b={};for(a=0;10>a;a++)b["_"+String.fromCharCode(a)]=a;if("0123456789"!==Object.getOwnPropertyNames(b).map(function(a){return b[a]}).join(""))return!1;var f={};"abcdefghijklmnopqrst".split("").forEach(function(a){f[a]=a});return"abcdefghijklmnopqrst"!==Object.keys(Object.assign({},f)).join("")?!1:!0}catch(d){return!1}}()?Object.assign:function(a,b){if(null===a||void 0===a)throw new TypeError("Object.assign cannot be called with null or undefined");var f=Object(a);for(var d,e=1;e<arguments.length;e++){var c=
Object(arguments[e]);for(var h in c)T.call(c,h)&&(f[h]=c[h]);if(N){d=N(c);for(var g=0;g<d.length;g++)U.call(c,d[g])&&(f[d[g]]=c[d[g]])}}return f},c="function"===typeof Symbol&&Symbol.for,r=c?Symbol.for("react.element"):60103,Q=c?Symbol.for("react.portal"):60106,n=c?Symbol.for("react.fragment"):60107,C=c?Symbol.for("react.strict_mode"):60108,V=c?Symbol.for("react.profiler"):60114,W=c?Symbol.for("react.provider"):60109,X=c?Symbol.for("react.context"):60110,Y=c?Symbol.for("react.async_mode"):60111,Z=
c?Symbol.for("react.forward_ref"):60112;c&&Symbol.for("react.timeout");var L="function"===typeof Symbol&&Symbol.iterator,O=function(a,b,f,d,c,k,h,g){if(!a){if(void 0===b)a=Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var e=[f,d,c,k,h,g],l=0;a=Error(b.replace(/%s/g,function(){return e[l++]}));a.name="Invariant Violation"}a.framesToPop=1;throw a;}},D={};c=function(){};c.thatReturns=h;c.thatReturnsFalse=h(!1);
c.thatReturnsTrue=h(!0);c.thatReturnsNull=h(null);c.thatReturnsThis=function(){return this};c.thatReturnsArgument=function(a){return a};var A=c,E={isMounted:function(a){return!1},enqueueForceUpdate:function(a,b,c){},enqueueReplaceState:function(a,b,c,d){},enqueueSetState:function(a,b,c,d){}};q.prototype.isReactComponent={};q.prototype.setState=function(a,b){"object"!==typeof a&&"function"!==typeof a&&null!=a?p("85"):void 0;this.updater.enqueueSetState(this,a,b,"setState")};q.prototype.forceUpdate=
function(a){this.updater.enqueueForceUpdate(this,a,"forceUpdate")};F.prototype=q.prototype;c=v.prototype=new F;c.constructor=v;B(c,q.prototype);c.isPureReactComponent=!0;var w={current:null},H=Object.prototype.hasOwnProperty,I={key:!0,ref:!0,__self:!0,__source:!0},M=/\/+/g,u=[];n={Children:{map:function(a,b,c){if(null==a)return a;var d=[];z(a,d,null,b,c);return d},forEach:function(a,b,c){if(null==a)return a;b=J(null,null,b,c);null==a||t(a,"",R,b);K(b)},count:function(a){return null==a?0:t(a,"",A.thatReturnsNull,
null)},toArray:function(a){var b=[];z(a,b,null,A.thatReturnsArgument);return b},only:function(a){x(a)?void 0:p("143");return a}},createRef:function(){return{current:null}},Component:q,PureComponent:v,createContext:function(a,b){void 0===b&&(b=null);a={$$typeof:X,_calculateChangedBits:b,_defaultValue:a,_currentValue:a,_currentValue2:a,_changedBits:0,_changedBits2:0,Provider:null,Consumer:null};a.Provider={$$typeof:W,_context:a};return a.Consumer=a},forwardRef:function(a){return{$$typeof:Z,render:a}},
Fragment:n,StrictMode:C,unstable_AsyncMode:Y,unstable_Profiler:V,createElement:G,cloneElement:function(a,b,c){null===a||void 0===a?p("267",a):void 0;var d=void 0,e=B({},a.props),f=a.key,h=a.ref,g=a._owner;if(null!=b){void 0!==b.ref&&(h=b.ref,g=w.current);void 0!==b.key&&(f=""+b.key);var m=void 0;a.type&&a.type.defaultProps&&(m=a.type.defaultProps);for(d in b)H.call(b,d)&&!I.hasOwnProperty(d)&&(e[d]=void 0===b[d]&&void 0!==m?m[d]:b[d])}d=arguments.length-2;if(1===d)e.children=c;else if(1<d){m=Array(d);
for(var l=0;l<d;l++)m[l]=arguments[l+2];e.children=m}return{$$typeof:r,type:a.type,key:f,ref:h,props:e,_owner:g}},createFactory:function(a){var b=G.bind(null,a);b.type=a;return b},isValidElement:x,version:"16.4.0",__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{ReactCurrentOwner:w,assign:B}};n=(C={default:n},n)||C;return n.default?n.default:n});
})(jQuery);
exports('reactProductionMin', null);
});
......@@ -125,9 +125,6 @@ function isNull(str){
tableSelect: 'modules/tableSelect',//tableSelect 下拉表格选择器
treeGrid: 'modules/treetable/treeGrid',//树表格
g6: 'modules/flowchart/g6.min',//流程图
reactProductionMin: 'modules/flowchart/react.production.min',//流程图
reactDomProductionMin: 'modules/flowchart/react-dom.production.min',//流程图
flowchart: 'modules/flowchart/base',//流程图
};
// 记录基础数据
......
......@@ -4041,6 +4041,63 @@ body .layer-ext-winconfirm {
margin-top: 20px;
}
/*** 流程图样式start ***/
.lct-toolBar{
position: absolute;
z-index: 10;
height: 35px;
border-bottom: 1px solid gainsboro;
}
.lct-toolBar ul{
height: 100%;
width: 100%;
margin-left: 10px;
}
.lct-toolBar ul li{
height: 100%;
line-height: 100%;
width: 35px;
float: left;
}
.lct-toolBar ul li button{
height: 100%;
line-height: 100%;
width: 100%;
border: 0px;
}
.coverModel{
margin-top: 35px;
}
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1542985580470'); /* IE9*/
src: url('iconfont.eot?t=1542985580470#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAATAAAsAAAAAByQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8k0iFY21hcAAAAYAAAABcAAABlM3eNVNnbHlmAAAB3AAAANgAAADopAxsYGhlYWQAAAK0AAAAMQAAADYUXLTUaGhlYQAAAugAAAAgAAAAJAjgBIFobXR4AAADCAAAABAAAAAQEQH//WxvY2EAAAMYAAAACgAAAAoAigAmbWF4cAAAAyQAAAAfAAAAIAEPADpuYW1lAAADRAAAAUUAAAJtPlT+fXBvc3QAAASMAAAAMwAAAEi3GinzeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkcWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeyTwLZm7438AQw9zA0AgUZgTJAQD6YwyTeJztkMENgDAMAy9tQQgxAt0A8WKT/ngxfdYoacIYWLpYdn4GJiAbh1FAHoSh21rxPrN6Xzgtz+ZC0qqtd9A93CT2W9wzyWzm1+b3+lIeewVjW62B9y0gvYUsESZ4nGNgZGD4v5f5MLMzAxsDAyO7OCMQMh+apv7ntQKzqDqzkwaUxQAECLXMQI44ozrzIoU/cxSYnUAkSP7/3//1rCzMDQy6QI4eozofo6gYGzsfo7IakzoQsTEB2exscox2jPaMZkLmcoziYkLiRmbmdoysDIxqkrLKjLJaEjZqzilqug2V6/cbcQlzcYob6YtwSypNyTKNUTLsa7fPUAuWY5SSVGMEalCfZCIhysXI3X2IUZyd/1/ZQTUHYUkDYTFDJZ+JjFH8XD9rj/w7y6mhnXIVADeUMVl4nGNgZGBgAOKQvdpc8fw2Xxm4WRhA4IacRQ6M/v/3fz0rC3MDkMvBwAQSBQANBQo7AAAAeJxjYGRgYG7438AQw8rw/+//P6wsDEARFMACAKC9BmoEAAAABAAAAAQBAAAFAP/9AAAAAAAWACYAdAAAeJxjYGRgYGBh0GMA0QwMTEDMBYQMDP/BfAYADUsBSgB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxjYGKAAC4G7ICFkYmRmZGFkZWBLz8vVTcnE0gkFhXll7OAmGyFpRWZiXkMDACdqwnoAA==') format('woff'),
url('iconfont.ttf?t=1542985580470') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1542985580470#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-one-line-arrow:before { content: "\e61c"; }
.icon-line:before { content: "\e653"; }
.icon-quxian:before { content: "\e61d"; }
/*** 流程图样式end ***/
/*******************************************自定义样式end********************************************/
......@@ -9,28 +9,163 @@ layui.config({
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
var $ = layui.$;
var tip_index = 0;//鼠标移上去的tip的index
// 关闭 G6 的体验改进计划打点请求
G6.track(false);
//左右框高度
$(".left-div").css({height:window.innerHeight});
$(".right-div").css({height:window.innerHeight});
var data = {
"source" : {
"nodes" : [ {
"shape" : "circle",
"label" : "文本",
"shape" : "circle",// 所用图形
"label" : "文本",// 文本标签 || 文本图形配置
"x" : 925.8749997662843,
"y" : 286.9586341796129,
"id" : "8b2a15da",
"size" : [ 116.25000046743139, 108.08273164077423 ]
"id" : "8b2a15da",// id 必须唯一
"size" : [ 116.25000046743139, 108.08273164077423 ]// 尺寸 || [宽, 高]
} ],
"edges" : []
}
};
var net = new G6.Net({
id : "mountNode", // 此处替换容器id
height : 900, // 此处替换高度
height: window.innerHeight, // 此处替换高度
rollback : true, // 是否启用回滚机制
mode : "edit", // 编辑模式
grid: {//背景网格
forceAlign: true, // 是否支持网格对齐
cell: 10, // 网格大小
},
});
net.read(data);
net.render();
var i = 1;//位置坐标
$("body").on("mouseenter", "#addCircle", function(e){//添加圆形节点
tip_index = layer.tips('添加圆形', '#addCircle', {time: 0, tips: 3});
}).on('mouseleave', '#addCircle', function(){
layer.close(tip_index);
});
$("body").on("click", "#addCircle", function(e){//添加圆形节点
net.add('node', {
shape: 'circle',
id: 'id' + i++,
x: 50 + i * 10,
y: 50 + i * 10
});
net.refresh();
});
$("body").on("mouseenter", "#addRect", function(e){//添加矩形
tip_index = layer.tips('添加矩形', '#addRect', {time: 0, tips: 3});
}).on('mouseleave', '#addRect', 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
});
net.refresh();
});
$('#delete').on('click', function() {//根据添加顺序删除
if (i > 1) {
i = i - 1;
const item = net.find('id' + i);
net.remove(item);
net.refresh();
}
});
$('#addCustom1').on('click', function() {//添加自定义节点图形
net.beginAdd('node', {
label: '[未定义]',
shape: 'circle'
});
});
$('#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(){
layer.close(tip_index);
});
$("body").on("click", "#addLine", function(e){//添加普通直线
net.beginAdd('edge', {
shape: 'line'
});
});
$("body").on("mouseenter", "#addArrowLine", function(e){//添加箭头直线
tip_index = layer.tips('添加箭头直线', '#addArrowLine', {time: 0, tips: 3});
}).on('mouseleave', '#addArrowLine', function(){
layer.close(tip_index);
});
$("body").on("click", "#addArrowLine", function(e){//添加箭头直线
net.beginAdd('edge', {
shape: 'arrow'
});
});
$("body").on("mouseenter", "#addSmooth", function(e){//添加曲线
tip_index = layer.tips('添加曲线', '#addSmooth', {time: 0, tips: 3});
}).on('mouseleave', '#addSmooth', function(){
layer.close(tip_index);
});
$("body").on("click", "#addSmooth", function(e){//添加曲线
net.beginAdd('edge', {
shape: 'smooth'
});
});
$("body").on("mouseenter", "#drag", function(e){//拖拽模式
tip_index = layer.tips('拖拽模式', '#drag', {time: 0, tips: 3});
}).on('mouseleave', '#drag', function(){
layer.close(tip_index);
});
$("body").on("click", "#drag", function(e){//拖拽模式
net.changeMode('drag');
});
$("body").on("mouseenter", "#edit", function(e){//编辑模式
tip_index = layer.tips('编辑模式', '#edit', {time: 0, tips: 3});
}).on('mouseleave', '#edit', function(){
layer.close(tip_index);
});
$("body").on("click", "#edit", function(e){//编辑模式
net.changeMode('edit');
});
$("body").on("mouseenter", "#consoleJSON", function(e){//保存
tip_index = layer.tips('保存', '#consoleJSON', {time: 0, tips: 3});
}).on('mouseleave', '#consoleJSON', function(){
layer.close(tip_index);
});
$("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
});
exports('makeflowchart', {});
});
......@@ -6,19 +6,54 @@
<link href="../../assets/lib/layui/css/layui.css" rel="stylesheet" />
<link href="../../assets/lib/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
<link href="../../assets/lib/layui/lay/modules/flowchart/base.css" rel="stylesheet" />
</head>
<body>
<div style="margin:auto 10px;">
<div class="layui-col-xs12" id="mountNode">
<div class="layui-col-xs12">
<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>
</li>
<li>
<button class="layui-btn layui-btn-primary layui-btn-sm" id="addRect"><i class="fa fa-object-ungroup"></i></button>
</li>
<li>
<button class="layui-btn layui-btn-primary layui-btn-sm" id="addLine"><i class="iconfont icon-line"></i></button>
</li>
<li>
<button class="layui-btn layui-btn-primary layui-btn-sm" id="addArrowLine"><i class="iconfont icon-one-line-arrow"></i></button>
</li>
<li>
<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="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>
<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="addCustom1">自定义形1</button>
<button id="addCustom2">自定义形2</button>
<button id="addCustom3">自定义形3</button> -->
<div class="layui-col-xs12">
<div class="layui-col-xs2 left-div">
</div>
<div class="layui-col-xs8 coverModel" id="mountNode">
</div>
<div class="layui-col-xs2 right-div">
</div>
</div>
</div>
<script src="../../assets/lib/layui/layui.js"></script>
<script src="../../assets/lib/layui/custom.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/react-16.4.0/react.production.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/react-16.4.0/react-dom.production.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-editor-1.0.7/build/base.js"></script>
<script type="text/javascript">
layui.config({base: '../../js/flowchart/'}).use('makeflowchart');
</script>
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册