object
机型
参数设置
宽度:
高度:
圆角:
线框
样式:
无线框
实线框
虚线框
点线框
双线框
线粗:
线颜色:
链路连线设置
样式:
直线
线颜色:
阈值:
字体
字体名称:
字体大小:
字体颜色:
字体样式:
对齐
对齐方式:
文字高度:
文字间距:
JSON
JSON数据:
工作流程图
UAV Drag Platform
保存
保存为json:
保存为图片:
//标识右侧工具栏是否已显示,默认显示
sessionStorage['rightToolsIsDisplay']=true;
//标识当前点击的流程图框,默认为none
sessionStorage['currentChartSelected']='none';
//栈,记录用户操作的先后顺序,用来进行撤销操作,数据结构为JSON,其中的copy用来复制部件
//是个二维栈,包括新增/删除/粘贴操作
var chartOperationStack=new Array;
chartOperationStack['add']=[];
chartOperationStack['delete']=[];
chartOperationStack['paste']=[];
chartOperationStack['copy']=[];
//记录用户具体操作,有copy,add,delete,paste
var chartRareOperationStack=new Array;
//记录当前流程框的数量
sessionStorage['currentChartAmount']=0;
//鼠标放在画布上显示坐标
function cnvs_getCoordinates(e){
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}
//鼠标离开画布上坐标消失
function cnvs_clearCoordinates(){
document.getElementById("xycoordinates").innerHTML="";
}
//指定流程图设计区域宽度高度
function adjustDesignWidth(){
var designWidth=0;
var domWidth=$(window).width();
designWidth=domWidth-$('.chart-right-panel').width();
$('.chart-design').css('width',designWidth-4);
}
//对页面进行缩小或放大
function setZoom(instance,scale,container){
//jsPlumb.setContainer("chart-container");
$("#"+container).css({
"-webkit-transform":"scale("+scale+")",
"-moz-transform":"scale("+scale+")",
"-ms-transform":"scale("+scale+")",
"-o-transform":"scale("+scale+")",
"transform":"scale("+scale+")",
"TransformOrigin":"0% 0%"
});
instance.setZoom(scale);
}
//滑动条改变时触发的事件
function ratioDisplay(){
var chartRatioDom=document.getElementById('rear-ratio');
var chartRatioDisplayDom=document.getElementById('rear-ratio-display');
chartRatioDisplayDom.value=chartRatioDom.value;
setZoom(jsPlumb,chartRatioDom.value/100,'chart-container');
$('#chart-container').css({
'left':'0px',
'right':'180px'
});
}
//大小选择框值改变时触发
function ratioDisplay2(){
var chartRatioDisplayDom=document.getElementById('rear-ratio-display');
var chartRatioDom=document.getElementById('rear-ratio');
chartRatioDom.value=chartRatioDisplayDom.value;
setZoom(jsPlumb,chartRatioDisplayDom.value/100,'chart-container');
$('#chart-container').css({
'left':'0px',
'right':'180px'
});
}
//设置右边属性栏当前显示的是哪个工具(object/text/style)
function setChartRightListFlag(value){
$('.chart-right-list-flag').html(value);
}
//获得当前右边属性栏当前显示的是哪个工具(object/text/style)
function getChartRightListFlag(){
return $('.chart-right-list-flag').html();
}
//负责属性面板的切换,
//参数will代表即将要切换的属性面板[text|object|style]
//参数current代表当前属性面板,可由getChartRightListFlag()获得
function attrToggle(will,current){
if(sessionStorage['rightToolsIsDisplay']=='false'){
$('.chart-right-panel').show();
sessionStorage['rightToolsIsDisplay']=true;
if(current!=will){
$('.chart-design').css("right","230px");
$(".chart-"+current).hide();
$('.chart-'+will).fadeIn();
setChartRightListFlag(will);
}
$('.chart-design').css("right","230px");
}else{
$('.chart-right-panel').hide();
sessionStorage['rightToolsIsDisplay']=false;
//递归调用切换属性面板函数
attrToggle(will,current);
$('.chart-design').css("right","0px");//扩充设计区域宽度
if(will==current){
//如果当前点击的和将要切换的属性面板相同则隐藏整个右侧
$('.chart-right-panel').hide();
sessionStorage['rightToolsIsDisplay']=false;
}else{
//如果当前点击和将要切换的属性面板不同则缩小设计区域宽度
$('.chart-design').css("right","230px");
}
}
}
//****************负责属性面板的内容设置*****************
//设置当前部件top,left
function setChartLocation(top,left){
$('#lo-x-display').val(top);
$('#lo-y-display').val(left);
}
//设置当前部件的飞行高度
function setChartFlyHeight(height){
$('#chart-flight-height-display').val(height);
}
//设置当前部件的飞行速度
function setChartFlySpeed(speed) {
$('#chart-flight-speed-display').val(speed);
}
//获得当前部件top,left,返回一个数组,第一个元素是'top',第二个元素是'left'
function getChartLocation(){
var location=new Array();
location['top']=$('#lo-x-display').val();
location['left']=$('#lo-y-display').val();
return location;
}
//设置当前部件的width和height
function setChartSize(width,height){
$('#chart-width-display').val(width);
$('#chart-height-display').val(height);
}
//获得当前部件的width和height,返回一个数组,第一个元素是'width',第二个元素是'height'
function getChartSize(){
var size=new Array();
size['width']=$('#chart-width-display').val();
size['height']=$('#chart-height-display').val();
return size;
}
//设置当前部件的字体
function setChartFont(font){
$('#chart-font-display').val(font);
}
function getChartFont(){
var font=$('#'+sessionStorage['currentChartSelected']).css('font');
return (font=='') ? '微软雅黑':font;
}
//设置当前部件的字体大小
function setChartFontSize(size){
$('#chart-font-size-display').val(size);
}
//取当前部件的字体大小
function getChartFontSize(){
var fontSize=$('#'+sessionStorage['currentChartSelected']).css('font-size');
return (fontSize=='') ? 12:fontSize.substring(0,fontSize.length-2);
}
//设置当前部件的对齐方式
function setChartAlign(lign){
$('#btn-align-'+lign).addClass('fl-align-style-active');
if(lign=='left'){
$('#btn-align-right').removeClass('fl-align-style-active');
$('#btn-align-center').removeClass('fl-align-style-active');
$('#btn-align-none').removeClass('fl-align-style-active');
}
if(lign=='right'){
$('#btn-align-left').removeClass('fl-align-style-active');
$('#btn-align-center').removeClass('fl-align-style-active');
$('#btn-align-none').removeClass('fl-align-style-active');
}
if(lign=='center'){
$('#btn-align-left').removeClass('fl-align-style-active');
$('#btn-align-right').removeClass('fl-align-style-active');
$('#btn-align-none').removeClass('fl-align-style-active');
}
if(lign=='none'){
$('#btn-align-left').removeClass('fl-align-style-active');
$('#btn-align-center').removeClass('fl-align-style-active');
$('#btn-align-right').removeClass('fl-align-style-active');
}
}
//线条类型 选择框的选择项被改变时触发
// $('.chart-fill-line-type-selector').change(function(){
// var valSelected=$(this).children('option:selected').val();//selected的值
// setChartLineType(valSelected);
// });
//取当前部件的对齐方式
function getChartAlign(){
var align=$('#'+sessionStorage['currentChartSelected']).css('text-align');
return (align=='') ? 'center':align;
}
//设置当前部件的字体颜色,参数color只能为rgb或16进制颜色值
function setChartFontColor(color){
$('#chart-font-color-display').val(color);
}
//取当前部件的字体颜色
function getChartFontColor(){
var color=$('#'+sessionStorage['currentChartSelected']).css('color');
return (color=='') ? 'rgb(0,0,0)':color;
}
//设置json展示框的数据
function setChartJson2Box(json){
$('#json-display-area').val(json);
}
//设置当前部件的border-radius
function setChartBorderRadius(radius){
$('#chart-border-display').attr('value',radius);
}
//取当前部件的border
function getChartBorderRadius(){
var radius=$('#'+sessionStorage['currentChartSelected']).css('border-top-left-radius');
return (radius=='') ? '0':radius;
}
//设置当前部件的border
function setChartBorderLineStyle(style){
$(".chart-fill-border-selector").val(style);
}
//取当前部件的border
function getChartBorderLineStyle(){
//console.log(document.getElementById(sessionStorage['currentChartSelected']).style.border);
var style=$('#'+sessionStorage['currentChartSelected']).css('border-left-style');
return (style=='') ? 'solid':style;
}
//设置当前部件的border-width
function setChartBorderWidthStyle(style){
$('#chart-fill-border-width-display').val(style);
}
//获得当前部件的border-width
function getChartBorderWidthStyle(){
var style=$('#'+sessionStorage['currentChartSelected']).css('border-left-width');
return (style=='') ? '2':style.split('px')[0];
}
//设置当前部件的border-color
function setChartBorderColorStyle(style){
$('#chart-fill-border-color-display').attr('value',style);
}
//取得当前部件的border-color
function getChartBorderColorStyle(){
var style=$('#'+sessionStorage['currentChartSelected']).css('border-left-color');
return (style=='') ? 'rgb(0,0,0)':style;
}
//把 #fffff 格式的颜色值码转换成 rgb格式
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
//获取当前曲线的选择的颜色值
$('#chart-fill-line-color-display').change(function(){
var chooseColor = $(this).val();
var lineColor =hexToRgb(chooseColor);
console.log(lineColor);
setChartLineColor(chooseColor);
});
//设置当前部件的填充背景色
function setChartBackgroundColor(color){
$('#chart-background-color-display').attr('value',color);
}
//取当前部件的填充背景色
function getChartBackgroundColor(){
var bg=$('#'+sessionStorage['currentChartSelected']).css('backgroundColor');
return (bg=='') ? 'rgb(255,255,255)':bg;
}
//设置当前部件的渐近度
function setChartBlurRange(range){
$('#chart-blur-range-display').attr('value',range);
}
//取当前部件的渐近度
function getChartBlurRange(){
var range=$('#'+sessionStorage['currentChartSelected']).css('box-shadow');
return (range=='none') ? '0':range;
}
//设置当前部件的渐近色
function setChartBlurColor(color){
$('#chart-fill-blur-color-display').attr('value',color);
}
//通过颜色选择器选择渐近色
function getChartBlurColorByColorSelector(){
return $('#chart-fill-blur-color-display').val();
}
//取当前部件的渐近色
function getChartBlurColor(){
var color=$('#'+sessionStorage['currentChartSelected']).css('boxShadow');
return (color=='none') ? 'rgb(255,255,255)':color;
}
//设置当前部件的水平阴影
function setChartHShadow(h){
$('#chart-h-shadow-display').val(h);
}
//取得当前部件的水平阴影
function getChartHShadow(){
var h=$('#'+sessionStorage['currentChartSelected']).css('boxShadow');
return (h=='none') ? '0':h;
}
//通过选择器获得水平阴影
function getChartHShadowBySelector(){
return $('#chart-h-shadow-display').val();
}
//设置当前部件的垂直阴影
function setChartVShadow(v){
$('#chart-v-shadow-display').val(v);
}
//取得当前部件的垂直阴影
function getChartVshadow(){
var v=$('#'+sessionStorage['currentChartSelected']).css('boxShadow');
return (v=='none') ? '0':v;
}
//通过选择器获得垂直阴影
function getChartVShadowBySelector(){
return $('#chart-v-shadow-display').val();
}
//设置当前部件的模糊距离
function setChartShadowBlur(blur){
$('#chart-shadow-blur-display').val(blur);
}
//取得当前部件的模糊距离
function getChartShadowBlur(){
var blur=$('#'+sessionStorage['currentChartSelected']).css('boxShadow');
return (blur=='blur') ? '0':blur;
}
//通过选择器获得模糊距离
function getChartShadowBlurBySelector(){
return $('#chart-shadow-blur-display').val();
}
//设置当前部件的阴影尺寸
function setChartShadowSpread(spread){
$('#chart-shadow-spread-display').val(spread);
}
//取得当前部件的阴影尺寸
function getChartShadowSpread(){
var spread=$('#'+sessionStorage['currentChartSelected']).css('boxShadow');
return (spread=='blur') ? '0':spread;
}
//通过选择器获得阴影尺寸
function getChartShadowSpreadBySelector(){
return $('#chart-shadow-spread-display').val();
}
//设置当前部件的阴影颜色
function setChartShadowColor(color){
$('#chart-shadow-color-display').val(color);
}
//通过颜色选择器获取当前部件的阴影颜色
function getChartShadowColorBySelector(){
return $('#chart-shadow-color-display').val();
}
//取得当前部件的阴影颜色
function getChartShadowColor(){
var color=$('#'+sessionStorage['currentChartSelected']).css('box-shadow');
return (color=='none') ? 'rgb(255,255,255)':color;
}
//设置属性栏的按钮样式
function setChartFontStyleBtn(style){
if(style!='normal'){
var singleStyle=style.split('|');
for(var i=0;i
$('#'+singleStyle[i]).addClass('fl-font-style-active');
};
}else{
$('#B,#I,#U').removeClass('fl-font-style-active');
}
}
//取当前部件的font-style
function getChartFontStyle(id){
if(id!=''){
var style='';
if($('#'+id).hasClass('fl-font-style-bold')){
style+='B|';
}
if($('#'+id).hasClass('fl-font-style-italic')){
style+='I|';
}
if($('#'+id).hasClass('fl-font-style-underline')){
style+='U|';
}
if(style!=''){
return style;
}else{
return 'normal';
}
}
}
//设置文字高度
function setChartLineHeight(height){
$('#chart-font-height-display').val(height);
}
//取得文字高度
function getChartLineHeight(){
var height=$('#'+sessionStorage['currentChartSelected']).css('line-height');
return (height=='') ? '0':height.split('px')[0];
}
//设置文字间距
function setChartLetterSpacing(space){
$('#chart-font-spacing-display').val(space);
}
//取得文字间距
function getChartLetterSpacing(){
var space=$('#'+sessionStorage['currentChartSelected']).css('letterSpacing');
return (space=='') ? '0':space;
}
//****************负责属性面板的内容设置*****************
//*********************************jsPlumb基础信息配置区域*********************************
//流程图ID唯一标识,用来防止重复,每次新建一个部件时此值必须加1,否则会出现异常
sessionStorage['idIndex']=0;
//检测设计区域中间区域是否被占据,页面刚加载时默认没有被占据
sessionStorage['midIsOccupied']='not';
//根蒂根基连接线样式
var connectorPaintStyle = {
lineWidth: 2,
strokeStyle: "rgb(95,158,160)",
joinstyle: "round",
outlineColor: "rgb(251,251,251)",
outlineWidth: 2
};
// 鼠标悬浮在连接线上的样式
var connectorHoverStyle = {
lineWidth: 4,
strokeStyle: "#216477",
outlineWidth: 0,
outlineColor: "rgb(95,158,160)"
};
//添加jsPlumb连接点
var hollowCircle = {
endpoint: ["Dot", { radius: 8 }], //端点的外形
connectorStyle: connectorPaintStyle,//连接线的色彩,大小样式
connectorHoverStyle: connectorHoverStyle,
paintStyle: {
strokeStyle: "rgb(0,32,80)",
fillStyle: "rgb(0,32,80)",
opacity: 0.5,
radius: 2,
lineWidth: 2
},//端点的色彩样式
//anchor: "AutoDefault",
isSource: true, //是否可以拖动(作为连线出发点)
//connector: ["Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }], //连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ]
connector: ["Straight", { curviness:100 } ],//设置连线为贝塞尔曲线
isTarget: true, //是否可以放置(连线终点)
maxConnections: -1, // 设置连接点最多可以连接几条线
connectorOverlays: [["Arrow", { width: 10, length: 10, location: 1 }]]
};
//设置线条展现方式为Straight
function setLineStraight(){hollowCircle['connector'][0]='Straight';}
//设置线条展现方式为Bezier
function setLineBezier(){hollowCircle['connector'][0]='Bezier';}
//设置线条展现方式为Flowchart
function setLineFlowchart(){hollowCircle['connector'][0]='Flowchart';}
//灵活设置线条表现方式,参数type只能为Straight|Bezier|Flowchart
function setChartLineType(type){hollowCircle['connector'][0]=type;}
//线条的颜色 选择框的选择项被改变时触发
function setChartLineColor(type){
hollowCircle['connectorStyle'].strokeStyle=type;
hollowCircle['connectorStyle'].outlineColor=type;
hollowCircle['connectorHoverStyle'].strokeStyle=type;
hollowCircle['connectorHoverStyle'].outlineColor=type;
}
//设置流程框内字体对齐方式
//参数type只能为left,right或者center
//参数ele若留空则默认全局设置,默认为空
function setChartTextAlign(ele,type){
ele=(arguments[0]=='') ? '':arguments[0];
if(ele==''){
$('.draggable').css('text-align',type);
}else{
$("#"+ele).css('text-align',type);
}
}
//*********************************jsPlumb基础信息配置区域*********************************
//*********************************流程图数据操作区域*********************************
var list=[];//全部的连接点列表
//序列化全部流程图数据,json格式
function save(){
var connects=[];
for(var i in list){
for(var j in list[i]){
connects.push({
ConnectionId:list[i][j]['id'],
PageSourceId:list[i][j]['sourceId'],
PageTargetId:list[i][j]['targetId']
});
}
}
var blocks=[];
$(".droppable .draggable").each(function(idx, elem){
var elem=$(elem);
var rareHTML=elem.html();
var resultHTML=rareHTML;
//去掉在进行复制操作时误复制的img部件
if(rareHTML.indexOf('
rareHTML=rareHTML.split('
resultHTML=rareHTML[0];
}
if(resultHTML.indexOf('
resultHTML=resultHTML.split('
}
/**********************字体**********************/
//字体
var Bfont=elem.css("font");
//字体颜色
var fontSize=elem.css('font-size');
//字体对齐方式
var fontAlign=elem.css('text-align');
//字体颜色
var fontColor=elem.css('color');
(Bfont=='') ? Bfont="微软雅黑":Bfont;
(fontSize=='') ? fontSize='12':fontSize;
(fontAlign=='') ? fontAlign='center':fontAlign;
(fontColor=='') ? fontColor='rgb(0,0,0)':fontColor;
/**********************物件**********************/
//圆角
var borderRadius=elem.css('borderRadius');
var elemType=elem.attr('id').split('-')[0];
(borderRadius=='') ? borderRadius='0':borderRadius;
//如果当前部件是圆角矩形,且borderRadius为空或者为0就把默认borderradius设置为4,下同
(elemType=='roundedRect' && (borderRadius=='' || borderRadius=='0')) ? borderRadius='4':borderRadius;
(elemType=='circle' && (borderRadius=='' || borderRadius=='0')) ? borderRadius='15':borderRadius;
//填充
var fillColor=elem.css('backgroundColor');
(fillColor=='') ? fillColor='rgb(255,255,255)':fillColor;
//渐近度
var fillBlurRange=elem.css('boxShadow');//rgb(0, 0, 0) 10px 10px 17px 20px inset
var fillBlurSplit=fillBlurRange.split(' ');
(fillBlurRange=='') ? fillBlurRange='0':fillBlurRange=fillBlurSplit[5];
//渐近色
var fillBlurColor=fillBlurSplit[0]+fillBlurSplit[1]+fillBlurSplit[2];
//线框样式
var borderStyle=elem.css('border-left-style');
(borderStyle=='') ? borderStyle='solid':borderStyle;
//线框宽度
var borderWidth=elem.css('border-left-width');
(borderWidth=='') ? borderWidth='2':borderWidth.split('px')[0];
//线框颜色
var borderColor=elem.css('border-left-color');
(borderColor=='') ? borderColor='rgb(136,242,75)':borderColor;
//阴影数据
var shadow=elem.css('box-shadow');
//字体样式数据
var fontStyle=elem.css('fontStyle');
var fontWeight=elem.css('fontWeight');
var fontUnderline=elem.css('textDecoration');
//文字高度
var lineHeight=elem.css('line-height');
// 飞行速度 and 飞行高度
var flyHeight = $(elem).attr("flyHeight");
var flySpeed = $(elem).attr("flySpeed");
blocks.push({
BlockId:elem.attr('id'),
// BlockContent:resultHTML,
BlockX:parseInt(elem.css("left"), 10),
BlockY:parseInt(elem.css("top"), 10),
BlockWidth:parseInt(elem.css("width"),10),
BlockHeight:parseInt(elem.css("height"),10),
BlockFlyHeight:parseInt(flyHeight),
BlockFlySpeet:parseInt(flySpeed)
// BlockFont:Bfont,
// BlockFontSize:fontSize,
// BlockFontAlign:fontAlign,
// BlockFontColor:fontColor,
// BlockBorderRadius:borderRadius,
// BlockBackground:fillColor,
// BlockFillBlurRange:fillBlurRange,
// BlockFillBlurColor:fillBlurColor,
// BlockBorderStyle:borderStyle,
// BlockBorderWidth:borderWidth,
// BlockborderColor:borderColor,
// BlockShadow:shadow,
// BlockFontStyle:fontStyle,
// BlockFontWeight:fontWeight,
// BlockFontUnderline:fontUnderline,
// BlockLineHeight:lineHeight
});
});
var serliza="{"+'"connects":'+JSON.stringify(connects)+',"block":'+JSON.stringify(blocks)+"}";
console.log(serliza);
return serliza;
}
//生成单个流程图数据,用在新建流程图框时使用
//参数ID表示被push进栈的ID
function getSingleChartJson(id){
var connects=[];
for(var i in list){
for(var j in list[i]){
connects.push({
ConnectionId:list[i][j]['id'],
PageSourceId:list[i][j]['sourceId'],
PageTargetId:list[i][j]['targetId'],
});
}
}
var blocks=[];
var elem=$("#"+id);
var rareHTML=elem.html();
var resultHTML=rareHTML;
//console.log(rareHTML);
//去掉在进行复制操作时误复制的img部件
if(rareHTML.indexOf('
rareHTML=rareHTML.split('
resultHTML=rareHTML[0];
}
if(resultHTML.indexOf('
resultHTML=resultHTML.split('
}
/**********************字体**********************/
//字体
var Bfont=elem.css("font");
//字体颜色
var fontSize=elem.css('font-size');
//字体对齐方式
var fontAlign=elem.css('text-align');
//字体颜色
var fontColor=elem.css('color');
(Bfont=='') ? Bfont="微软雅黑":Bfont;
(fontSize=='') ? fontSize='12':fontSize;
(fontAlign=='') ? fontAlign='center':fontAlign;
(fontColor=='') ? fontColor='rgb(0,0,0)':fontColor;
/**********************物件**********************/
//圆角
var borderRadius=elem.css('borderRadius');
var elemType=id.split('-')[0];
(borderRadius=='') ? borderRadius='0':borderRadius;
//如果当前部件是圆角矩形,且borderRadius为空或者为0就把默认borderradius设置为4,下同
(elemType=='roundedRect' && (borderRadius=='' || borderRadius=='0')) ? borderRadius='4':borderRadius;
(elemType=='circle' && (borderRadius=='' || borderRadius=='0')) ? borderRadius='15':borderRadius;
//填充
var fillColor=elem.css('backgroundColor');
(fillColor=='') ? fillColor='rgb(255,255,255)':fillColor;
//渐近度
var fillBlurRange=elem.css('boxShadow');//rgb(0, 0, 0) 10px 10px 17px 20px inset
var fillBlurSplit=fillBlurRange.split(' ');
(fillBlurRange=='') ? fillBlurRange='0':fillBlurRange=fillBlurSplit[5];
//渐近色
var fillBlurColor=fillBlurSplit[0]+fillBlurSplit[1]+fillBlurSplit[2];
//线框样式
var borderStyle=elem.css('border-left-style');
(borderStyle=='') ? borderStyle='solid':borderStyle;
//线框宽度
var borderWidth=elem.css('border-left-width');
(borderWidth=='') ? borderWidth='2':borderWidth.split('px')[0];
//线框颜色
var borderColor=elem.css('border-left-color');
(borderColor=='') ? borderColor='rgb(136,242,75)':borderColor;
//阴影数据
var shadow=elem.css('box-shadow');
//字体样式数据
var fontStyle=elem.css('fontStyle');
var fontWeight=elem.css('fontWeight');
var fontUnderline=elem.css('textDecoration');
//文字高度
var lineHeight=elem.css('line-height');
blocks.push({
BlockId:elem.attr('id'),
BlockContent:resultHTML,
BlockX:parseInt(elem.css("left"), 10),
BlockY:parseInt(elem.css("top"), 10),
BlockWidth:parseInt(elem.css("width"),10),
BlockHeight:parseInt(elem.css("height"),10),
BlockFont:Bfont,
BlockFontSize:fontSize,
BlockFontAlign:fontAlign,
BlockFontColor:fontColor,
BlockBorderRadius:borderRadius,
BlockBackground:fillColor,
BlockFillBlurRange:fillBlurRange,
BlockFillBlurColor:fillBlurColor,
BlockBorderStyle:borderStyle,
BlockBorderWidth:borderWidth,
BlockborderColor:borderColor,
BlockShadow:shadow,
BlockFontStyle:fontStyle,
BlockFontWeight:fontWeight,
BlockFontUnderline:fontUnderline,
BlockLineHeight:lineHeight
});
var serliza="{"+'"connects":'+JSON.stringify(connects)+',"block":'+JSON.stringify(blocks)+"}";
console.log(serliza);
return serliza;
}
function changeValue(id){
var onOff =1; //为了防止双击出现两次编辑框。
$(id).dblclick(function() {
var flySpeed = $(id).attr("flySpeed"); //获取部件的飞行速度
var flyHeight = $(id).attr("flyHeight"); //获取部件的飞行高度
var flyLeft = $(id).css("left"); //获取部件的横坐标
var flyTop = $(id).css("top"); //获取部件的纵坐标
if(onOff){
onOff = 0;
$(id).append(
'
' +
');
'
' +
' +
'
' +
' 飞行高度:' +
' ' +
'
' +
'
' +
' 飞行速度:' +
'' +
'
' +
'
' +
' 飞行坐标:' +
' ' +
' ' +
'' +
' ' +
'
' +
'
'确定' +
'取消' +
'
}
$('#mb_btn_ok').click(function () {
$(id).attr("flyHeight", $("#btn-height").val());
$(id).attr("flySpeed", $("#btn-speed").val());
$(id).attr("left", $("#left").val());
$(id).attr("top", $("#top").val());
setChartDesignTop(parseInt($("#top").val())); //设置横坐标
setChartDesignLeft(parseInt($("#left").val())); //设置纵坐标
setChartDesignFlyHeight($("#btn-height").val()); //设置飞行高度
setChartDesignFlySpeed($("#btn-speed").val()); //设置飞行速度
$("#dialog").remove(); //移除编辑矿的样式
$("#dialogShow").remove();//删除鼠标经过的样式
onOff = 1;
});
$("#mb_btn_no").click(function () {
$("#dialog").remove(); //移除编辑矿的样式
$("#dialogShow").remove();//删除鼠标经过的样式
onOff =1;
});
});
}
//新增一个部件
//参数newChartArea代表新增部件的区域
//参数chartID代表新流程图部件的ID,格式为元素名称-index
//参数left,top代表新部件的插入位置
//参数blockName代表新部件的文本
//参数undo表示是否进行撤销操作,如果进行撤销操作则不进行入栈,默认为false
function addNewChart(newChartArea,chartID,left,top,blockName,undo){
undo=(undo=='') ? false:arguments[5];
var name=chartID.split('-')[0];
//在div内append元素
$(newChartArea).append("
"+blockName+"
");
$("#"+chartID).css("left",left).css("top",top).css("position","absolute").css("margin","0px");
$("#"+chartID).attr('flyHeight','0').attr('flySpeed','0');
//用jsPlumb添加锚点
jsPlumb.addEndpoint(chartID,{anchors: "TopCenter"},hollowCircle);
// jsPlumb.addEndpoint(chartID,{anchors: "RightMiddle"},hollowCircle);
// jsPlumb.addEndpoint(chartID,{anchors: "BottomCenter"},hollowCircle);
// jsPlumb.addEndpoint(chartID,{anchors: "LeftMiddle"},hollowCircle);
jsPlumb.draggable(chartID);
$("#"+chartID).draggable({containment: "parent"});//保证拖动不跨界
sessionStorage['idIndex']=sessionStorage['idIndex']+1;
changeValue("#"+chartID);
if(undo==false){
chartOperationStack['add'].push(getSingleChartJson(chartID));
chartRareOperationStack.push('add');
}
}
//通过json加载流程图
function loadChartByJSON(data){
var unpack=JSON.parse(data);
if(!unpack){
return false;
}
/*flowConnector={
anchors:["BottomCenter","TopCenter"],
endpoints:["dot","blank"]
};*/
for(var i=0;i
var BlockId=unpack['block'][i]['BlockId'];
var BlockContent=unpack['block'][i]['BlockContent'];
var BlockX=unpack['block'][i]['BlockX'];
var BlockY=unpack['block'][i]['BlockY'];
var width=unpack['block'][i]['BlockWidth'];
var height=unpack['block'][i]['BlockHeight'];
var font=unpack['block'][i]['BlockFont'];
var fontSize=unpack['block'][i]['BlockFontSize'];
var fontAlign=unpack['block'][i]['BlockFontAlign'];
var fontColor=unpack['block'][i]['BlockFontColor'];
var borderRadius=unpack['block'][i]['BlockBorderRadius'];
var backgroundColor=unpack['block'][i]['BlockBackground'];
var fillBlurRange=unpack['block'][i]['BlockFillBlurRange'];
var fillBlurColor=unpack['block'][i]['BlockFillBlurColor'];
var borderStyle=unpack['block'][i]['BlockBorderStyle'];
var borderColor=unpack['block'][i]['BlockborderColor'];
var shadow=unpack['block'][i]['BlockShadow'];
var fontStyle=unpack['block'][i]['BlockFontStyle'];
var fontWeight=unpack['block'][i]['BlockFontWeight'];
var fontUnderline=unpack['block'][i]['BlockFontUnderline'];
var lineHeight=unpack['block'][i]['BlockLineHeight'];
var blockAttr=BlockId.split('-')[0];
var boxInsetShadowStyle='10px 10px '+fillBlurRange+"px 20px "+fillBlurColor+' inset';
$('.chart-design').append("
"+BlockContent+"
");
$("#"+BlockId)
.css("left",BlockX)
.css("top",BlockY)
.css("position","absolute")
.css("margin","0px")
.css("width",width)
.css("height",height)
.css('font',font)
.css('font-size',fontSize)
.css('text-align',fontAlign)
.css('color',fontColor)
.css('border-radius',borderRadius)
.css('background',backgroundColor)
.css('box-shadow',boxInsetShadowStyle)
.css('border-style',borderStyle)
.css('border-color',borderColor)
.css('box-shadow',shadow)
.css('font-style',fontStyle)
.css('font-weight',fontWeight)
.css('font-underline',fontUnderline)
.css('line-height',lineHeight);
}
/*for(i=0;i
var ConnectionId=unpack['connects'][i]['ConnectionId'];
var PageSourceId=unpack['connects'][i]['PageSourceId'];
var PageTargetId=unpack['connects'][i]['PageTargetId'];
//用jsPlumb添加锚点
jsPlumb.addEndpoint(PageSourceId,{anchors: "TopCenter"},hollowCircle);
jsPlumb.addEndpoint(PageSourceId,{anchors: "RightMiddle"},hollowCircle);
jsPlumb.addEndpoint(PageSourceId,{anchors: "BottomCenter"},hollowCircle);
jsPlumb.addEndpoint(PageSourceId,{anchors: "LeftMiddle"},hollowCircle);
jsPlumb.addEndpoint(PageTargetId,{anchors: "TopCenter"},hollowCircle);
jsPlumb.addEndpoint(PageTargetId,{anchors: "RightMiddle"},hollowCircle);
jsPlumb.addEndpoint(PageTargetId,{anchors: "BottomCenter"},hollowCircle);
jsPlumb.addEndpoint(PageTargetId,{anchors: "LeftMiddle"},hollowCircle);
jsPlumb.draggable(PageSourceId);
jsPlumb.draggable(PageTargetId);
$("#"+PageSourceId).draggable({containment: "parent"});//保证拖动不跨界
$("#"+PageTargetId).draggable({containment: "parent"});//保证拖动不跨界
jsPlumb.connect({
source:PageSourceId,target:PageTargetId},
flowConnector);
}*/
return true;
}
//loadChartByJSON('{"connects":[],"block":[{"BlockId":"rect-01","BlockContent":"文本","BlockX":648,"BlockY":40,"BlockWidth":120,"BlockHeight":120,"BlockFont":"微软雅黑","BlockFontSize":"60px","BlockFontAlign":"center","BlockFontColor":"rgb(255, 255, 255)","BlockBorderRadius":"0","BlockBackground":"rgb(128, 0, 255)","BlockFillBlurRange":"85px","BlockFillBlurColor":"rgb(0,0,0)","BlockBorderStyle":"dashed","BlockBorderWidth":"2px","BlockborderColor":"rgb(136, 242, 75)","BlockShadow":"rgb(0, 0, 0) 30px 51px 85px 0px"},{"BlockId":"roundedRect-0111","BlockContent":"文本","BlockX":464,"BlockY":94,"BlockWidth":120,"BlockHeight":20,"BlockFont":"微软雅黑","BlockFontSize":"12px","BlockFontAlign":"center","BlockFontColor":"rgb(0, 0, 0)","BlockBorderRadius":"4","BlockBackground":"rgb(128, 0, 255)","BlockFillBlurColor":"noneundefinedundefined","BlockBorderStyle":"solid","BlockBorderWidth":"2px","BlockborderColor":"rgb(136, 242, 75)","BlockShadow":"none"}]}');
//sessionStorage['currentChartAmount']=sessionStorage['currentChartAmount']+2;
//删除一个流程框图,若参数undo为true则在进行操作时不进行入栈操作,默认为false
function deleteChart(id,undo){
undo=(undo=='') ? false:'';
var DOM=$('#'+id);
if(undo==false){
chartOperationStack['delete'].push(getSingleChartJson(id));
}
jsPlumb.removeAllEndpoints(id);
DOM.remove();
if(undo==false){
chartRareOperationStack.push('delete');
}
}
//设置流程框图宽度,如果当前选择的部件为none则默认改变全局,下同
function setChartDesignWidth(width){
if(sessionStorage['currentChartSelected']=='none'){
$('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('width',width);
}else{
$('#'+sessionStorage['currentChartSelected']).css('width',width);
}
}
//设置流程框图高度
function setChartDesignHeight(height){
if(sessionStorage['currentChartSelected']=='none'){
$('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('height',height);
}else{
$('#'+sessionStorage['currentChartSelected']).css('height',height);
}
}
//设置流程框图的飞行高度
function setChartDesignFlyHeight(flyHeight) {
if(sessionStorage['currentChartSelected']=='none'){
$('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').attr('flyHeight',flyHeight);
}else{
$('#'+sessionStorage['currentChartSelected']).attr('flyHeight',flyHeight);
}
}
//设置流程框图的飞行速度
function setChartDesignFlySpeed(flySpeed) {
if(sessionStorage['currentChartSelected']=='none'){
$('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').attr('flySpeed',flySpeed);
}else{
$('#'+sessionStorage['currentChartSelected']).attr('flySpeed',flySpeed);
}
}
//设置流程框图top
function setChartDesignTop(top){
console.log(top);
if(sessionStorage['currentChartSelected']=='none'){
$('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('top',top);
}else{
$('#'+sessionStorage['currentChartSelected']).css('top',top);
}
}
//设置流程框图left
function setChartDesignLeft(left){
if(sessionStorage['currentChartSelected']=='none'){
$('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('left',left);
}else{
$('#'+sessionStorage['currentChartSelected']).css('left',left);
}
}
//设置流程框图字体
function setChartDesignFont(font){
if(sessionStorage['currentChartSelected']=='none'){
$('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('font',font);
}else{
$('#'+sessionStorage['currentChartSelected']).css('font',font);
}
}
//设置流程框图字体大小
function setChartDesignFontSize(size){
if(sessionStorage['currentChartSelected']=='none'){
$('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('font-size',size);
}else{
$('#'+sessionStorage['currentChartSelected']).css('font-size',size);
}
}
//设置流程框图字体颜色
function setChartDesignFontColor(color){
if(sessionStorage['currentChartSelected']=='none'){
$('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('color',color);
}else{
$('#'+sessionStorage['currentChartSelected']).css('color',color);
}
}
//设置流程图框的对齐方式
function setChartDesignFontAlign(align){
var lign={'居左':'left','居右':'right','居中':'center'};
if(sessionStorage['currentChartSelected']=='none'){
$('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('text-align',lign[align]);
}else{
$('#'+sessionStorage['currentChartSelected']).css('text-align',lign[align]);
}
}
//设置流程图框的圆角大小
function setChartDesignBorderRadius(radius){
if(sessionStorage['currentChartSelected']=='none'){
$('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('border-top-left-radius',radius);
}else{
$('#'+sessionStorage['currentChartSelected']).css('border-top-left-radius',radius);
}
}
//设置流程图框的线样式
//参数style只能为solid|dotted|double|dashed
function setChartDeignBorderLineStyle(style){
if(sessionStorage['currentChartSelected']=='none'){
$('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('border-style',style);
}else{
$('#'+sessionStorage['currentChartSelected']).css('border-style',style);
}
}
//设置流程图框的线宽度
function setChartDesignBorderWidthStyle(style){
if(sessionStorage['currentChartSelected']=='none'){
$('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('border-width',style);
}else{
$('#'+sessionStorage['currentChartSelected']).css('border-width',style);
}
}
//设置流程图框的线颜色
function setChartDesignBorderColorStyle(style){
if(sessionStorage['currentChartSelected']=='none'){
$('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('border-color',style);
}else{
$('#'+sessionStorage['currentChartSelected']).css('border-color',style);
}
}
//设置流程图框背景色
function setChartDesignBackground(style){
if(sessionStorage['currentChartSelected']=='none'){
$('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('backgroundColor',style);
}else{
$('#'+sessionStorage['currentChartSelected']).css('backgroundColor',style);
}
}
//设置流程图框渐近色,参数rate表示渐近度,blurColor表示渐近色
function setChartDesignBoxShadow(rate,blurColor){
var style='10px 10px '+rate+"px 20px "+blurColor+' inset';
if(sessionStorage['currentChartSelected']=='none'){
$('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('box-shadow',style);
}else{
$('#'+sessionStorage['currentChartSelected']).css('box-shadow',style);
}
}
//设置流程图框阴影
//参数h表示水平阴影
//参数v表示垂直阴影
//参数blur表示模糊距离
//参数spread表示阴影尺寸
//参数color表示阴影颜色
function setChartDesignBoxShadowA(h,v,blur,spread,color){
var style=h+'px '+v+'px '+blur+'px '+spread+'px '+color;
if(sessionStorage['currentChartSelected']=='none'){
$('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('box-shadow',style);
}else{
$('#'+sessionStorage['currentChartSelected']).css('box-shadow',style);
}
}
//设置文字高度
function setChartDesignLineHeight(height){
$('#'+sessionStorage['currentChartSelected']).css('line-height',height);
}
//设置文字间距
function setChartDesignLetterSpacing(space){
$('#'+sessionStorage['currentChartSelected']).css('letter-spacing',space);
}
//*********************************流程图数据操作区域*********************************
$(document).ready(function(){
//**************************************画网格***************************************
//网格方法
// var c=document.getElementById("chart-container");
// var cxt=c.getContext("2d");
// cxt.fillStyle="#FF0000";
// for (var i=0;i<910;i++) {
// horLine({x:i,y:0},{x:i,y:510});
// i = i+20
// }
// for (var j=0;j<510;i++) {
// horLine({x:0,y:j},{x:900,y:j});
// j = j+20
// }
// //画线
// function horLine (originPoint, targetPoint) {
// cxt.moveTo(originPoint.x,originPoint.y);
// cxt.lineTo(targetPoint.x,targetPoint.y);
// }
//**************************************UI控制部分***************************************
//初始化动画效果
$('.chart-ratio-form,.chart-fill-border-selector,#chart-v-shadow-display,#chart-h-shadow-display,#chart-blur-range-display,#chart-shadow-blur-display,#chart-shadow-color-display,#chart-shadow-spread-display').css("opacity",'0.6');
//隐藏右侧属性面板
//$('.chart-right-panel').hide();
//为按钮,列表添加动画效果
$('.fl-btn,h4').hover(
function(){$(this).stop().animate({opacity:0.5},'fast');},
function(){$(this).stop().animate({opacity:1},'fast');}
);
//为左下角大小调节添加动画效果
$('.chart-ratio-form,.chart-fill-border-selector,#chart-v-shadow-display,#chart-h-shadow-display,#chart-blur-range-display,#chart-shadow-blur-display,#chart-shadow-color-display,#chart-shadow-spread-display').hover(
function(){$(this).stop().animate({opacity:1},'fast');},
function(){$(this).stop().animate({opacity:0.6},'fast');}
);
//给左侧工具栏分页
$(".chart-object").accordion();
//调节区域双击可输入数字更改
$('.rare-ratio').dblclick(function(){
var chartRatioValue=document.getElementById('rear-ratio').value;
});
//页面上方按钮事件
//标识线条选择器有没有被展开,默认不展开
sessionStorage['topLineSelectIsDisplayed']=false;
//标识排列选择器有没有被展开,默认不展开
sessionStorage['topAlignSelectIsDisplayed']=false;
//对页面上方的工具菜单进行折叠
function selectorToggle(event,element){
//取消事件冒泡
event.stopPropagation();
//设置弹出层的位置
var offset=$(event.target).offset();
$(element).css({
top:offset.top+$(event.target).height()+"px",
left:offset.left
});
//按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。
$(element).toggle('fast');
}
//上方工具栏的按钮点击事件
$('.fl-btn').click(function(event){
//取被点击按钮的ID
var flBtnID=$(this).attr('id');
var currentListFlag=getChartRightListFlag();//当前显示的属性面板
switch(flBtnID){
case 'new-text':
//测试自动连接线
break;
case 'new-box':
//新建流程图框
if(sessionStorage['midIsOccupied']=='not'){
//如果中间位置没有被占据则在中间位置新建一个部件
var left=$('.chart-design').width()/2;
var top=$('.chart-design').height()/2;
addNewChart('.chart-design',"roundedRect-"+sessionStorage['idIndex']+sessionStorage['currentChartAmount'],left,top-20,'新部件');
sessionStorage['midIsOccupied']='yes';
sessionStorage['currentChartAmount']=sessionStorage['currentChartAmount']+2;
}else{
//如果中间位置被占据则根据随机数新建一个部件
var randomLeft=Math.ceil(Math.random()*$('.chart-design').width());
var randomTop=Math.ceil(Math.random()*($('.chart-design').height()-25));
addNewChart('.chart-design',"roundedRect-"+sessionStorage['idIndex']+sessionStorage['currentChartAmount'],randomLeft,randomTop,'新部件');
sessionStorage['currentChartAmount']=sessionStorage['currentChartAmount']+2;
}
break;
case 'line-mode':
//设置线条样式
if(sessionStorage['topAlignSelectIsDisplayed']=='true'){
$('#align-select-div').toggle('fast');
sessionStorage['topAlignSelectIsDisplayed']=false;
}
selectorToggle(event,'#line-select-div');
sessionStorage['topLineSelectIsDisplayed']=true;
break;
case 'text-chart-align':
//流程图框对齐或文本对齐
if(sessionStorage['topLineSelectIsDisplayed']=='true'){
$('#line-select-div').toggle('fast');
sessionStorage['topLineSelectIsDisplayed']=false;
}
selectorToggle(event,'#align-select-div');
sessionStorage['topAlignSelectIsDisplayed']=true;
break;
case 'chart-save':
//分享或保存(生成JSON)
var jsondata=save();
var nowTime = new Date().getTime();
var jsonName = nowTime + '.json';
var imgName = nowTime + '.png';
$('.save-form').slideToggle('slow');
var blob = new Blob([jsondata]);
var jsonUrl = URL.createObjectURL(blob);
$('.save-json-href').html('下载jsons数据');
html2canvas($('.droppable'), {
onrendered: function(canvas) {
var data=canvas.toDataURL("image/png");
$('.save-img-href').html('下载图片');
}
});
break;
case 'btn-object':
//显示object面板
attrToggle('object',currentListFlag);
break;
case 'btn-text':
//显示text面板
attrToggle('text',currentListFlag);
break;
case 'btn-style':
//显示style面板`
attrToggle('style',currentListFlag);
break;
case 'btn-align-left':
//居左显示
setChartTextAlign(sessionStorage['currentChartSelected'],'left');
$('#btn-align-left').addClass('fl-align-style-active');
$('#btn-align-right,#btn-align-center,#btn-align-none').removeClass('fl-align-style-active');
break;
case 'btn-align-right':
//居右显示
setChartTextAlign(sessionStorage['currentChartSelected'],'right');
$('#btn-align-right').addClass('fl-align-style-active');
$('#btn-align-left,#btn-align-center,#btn-align-none').removeClass('fl-align-style-active');
break;
case 'btn-align-center':
//居中显示
setChartTextAlign(sessionStorage['currentChartSelected'],'center');
$('#btn-align-center').addClass('fl-align-style-active');
$('#btn-align-right,#btn-align-left,#btn-align-none').removeClass('fl-align-style-active');
break;
case 'btn-align-none':
//居无显示
setChartTextAlign(sessionStorage['currentChartSelected'],'left');
$('#btn-align-none').addClass('fl-align-style-active');
$('#btn-align-right,#btn-align-center,#btn-align-left').removeClass('fl-align-style-active');
break;
default:
break;
}
});
//切换字体样式按钮状态
function fontStyleBtnToggle(will){
$('#'+will).toggleClass('fl-font-style-active');
}
//字体样式按钮控制区域
$('.fl-font-style').click(function(){
var id=$(this).attr('id');
switch(id){
case 'B'://bold
fontStyleBtnToggle('B');
$('#'+sessionStorage['currentChartSelected']).toggleClass("fl-font-style-bold");
break;
case 'I'://italic
fontStyleBtnToggle('I');
$('#'+sessionStorage['currentChartSelected']).toggleClass("fl-font-style-italic");
break;
case 'U'://underline
fontStyleBtnToggle('U');
$('#'+sessionStorage['currentChartSelected']).toggleClass("fl-font-style-underline");
break;
default:
break;
}
});
//**************************************UI控制部分***************************************
//***********************************元素拖动控制部分************************************
//允许元素拖动
$(".list-content .area").children().draggable({
//revert: "valid",//拖动之后原路返回
helper: "clone",//复制自身
scope: "dragflag"//标识
});
$(".droppable").droppable({
accept: ".draggable", //只接受来自类.dragable的元素
activeClass:"drop-active", //开始拖动时放置区域显示
scope: "dragflag",
drop:function(event,ui){
sessionStorage['idIndex']=sessionStorage['idIndex']+1;
//获取鼠标坐标
var left=parseInt(ui.offset.left-$(this).offset().left);
console.log(left);
var top=parseInt(ui.offset.top-$(this).offset().top)+4;
console.log(top);
setChartLocation(top,left);//设置坐标
//设置当前部件的飞行高度，具体200这个值怎么算，待商议。
setChartFlyHeight(200);
//设置当前部件的飞行速度，具体200这个值怎么算，待商议。
setChartFlySpeed(200);
var name=ui.draggable[0].id;//返回被拖动元素的ID
var trueId=name+"-"+sessionStorage['idIndex']+sessionStorage['currentChartAmount'];
console.log(trueId);
//在div内append元素
$(this).append("
"+$(ui.helper).html()+"
");
$("#"+trueId).css("left",left).css("top",top).css("position","absolute").css("margin","0px");
$("#"+trueId).attr("flyHeight","0").attr("flySpeed","0");
//鼠标放在部件上显示部件属性
$("#"+trueId).mouseover(function(){
var flySpeed=$("#"+trueId).attr("flySpeed"); //获取部件的飞行速度
var flyHeight=$("#"+trueId).attr("flyHeight"); //获取部件的飞行高度
var flyLeft = $("#"+trueId).css("left"); //获取部件的横坐标
var flyTop = $("#"+trueId).css("top"); //获取部件的纵坐标
$("#"+trueId).append(
'
'+
');
'
' +
' 飞行高度:' +
''+
'
' +
'
' +
' 飞行速度:' +
''+
'
' +
'
' +
' 飞行坐标:' +
''+
'' +
''+
' ' +
'
' +
'
});
//鼠标移除部件取消部件属性
$("#"+trueId).mouseout(function(){
$("#dialogShow").remove();
});
//用jsPlumb添加锚点
jsPlumb.addEndpoint(trueId,{anchors: "TopCenter"},hollowCircle);
// jsPlumb.addEndpoint(trueId,{anchors: "RightMiddle"},hollowCircle);
// jsPlumb.addEndpoint(trueId,{anchors: "BottomCenter"},hollowCircle);
// jsPlumb.addEndpoint(trueId,{anchors: "LeftMiddle"},hollowCircle);
jsPlumb.draggable(trueId);
$("#"+trueId).draggable({containment: "parent"});//保证拖动不跨界
changeValue("#"+trueId);
list=jsPlumb.getAllConnections();//获取所有的连接
//元素ID网上加,防止重复
sessionStorage['idIndex']=sessionStorage['idIndex']+1;
//设置当前选择的流程框图
sessionStorage['currentChartSelected']=trueId;
//将新拖进来的流程图框JSON数据push进栈
chartOperationStack['add'].push(getSingleChartJson(trueId));
chartRareOperationStack.push('add');
sessionStorage['currentChartAmount']=parseInt(sessionStorage['currentChartAmount'],10)+2;
}
});
$('.droppable .draggable').resizable({
ghost: true
});
//删除元素按钮
$(".droppable").on("mouseenter",".draggable",function(){
$(this).append("
");
//因为流程图的形状不一样,所以要获取特定的流程图名称来指定删除按钮的位置
var wholeID=$(this).attr('id');
var wholeIDSep=wholeID.split('-');
if(wholeIDSep[0]=="circle") {
$("img").css("left", $(this).width()-20).css("top", 20);
}else if(wholeIDSep[0]=="rhombus"){
$("img").css("left", $(this).width()-18).css("top", 10);
}else{
$("img").css("left", $(this).width()-20).css("top", 10);
}
});
$(".droppable").on("mouseleave",".draggable",function(){
$(".chart-content img").remove();
});
$(".droppable").on("click","img",function(){
//要先保存父元素的DOM,因为出现确认对话框之后(this)会消失
var parentDOM=$(this).parent();
var parentID=parentDOM.attr('id');
if(confirm("确定要删除吗?")) {
chartOperationStack['delete'].push(getSingleChartJson(parentID));
jsPlumb.removeAllEndpoints(parentID);
parentDOM.remove();
chartRareOperationStack.push('delete');
}
});
//设计区域元素被点击事件,同步右侧属性面板
$('.droppable').on('click','.draggable',function(){
//获得当前选择部件的ID
sessionStorage['currentChartSelected']=$(this).attr('id');
//设置当前部件的坐标和大小
setChartLocation($(this).offset().top,$(this).offset().left);
setChartSize($(this).width(),$(this).height());
//设置当前选择部件的字体
setChartFont(getChartFont());
//设置当前选择部件的字体大小
setChartFontSize(getChartFontSize());
//设置当前选择部件的对齐方式
setChartAlign(getChartAlign());
//设置当前选择部件的字体颜色
setChartFontColor(getChartFontColor());
//设置JSON数据放置区域的值
setChartJson2Box(getSingleChartJson(sessionStorage['currentChartSelected']));
//设置圆角
setChartBorderRadius(getChartBorderRadius());
//设置border属性width style color
setChartBorderLineStyle(getChartBorderLineStyle());
setChartBorderWidthStyle(getChartBorderWidthStyle());
setChartBorderColorStyle(getChartBorderColorStyle());
//设置背景色
setChartBackgroundColor(getChartLineColorStyle());
//设置渐近度和渐近色
setChartBlurRange(getChartBlurRange());
setChartBlurColor(getChartBlurColor());
//设置当前部件的阴影
setChartHShadow(getChartHShadow());
setChartVShadow(getChartVshadow());
setChartShadowSpread(getChartShadowSpread());
setChartShadowColor(getChartShadowColor());
setChartShadowBlur(getChartShadowBlur());
//设置字体样式
setChartFontStyleBtn(getChartFontStyle(sessionStorage['currentChartSelected']));
//设置文字高度
setChartLineHeight(getChartLineHeight());
//设置文字间距
setChartLetterSpacing(getChartLetterSpacing());
});
//设计区域被双击时
$('.droppable').on(function(){
sessionStorage['currentChartSelected']='none';//置当前选择的流程图框为空
$('#B,#I,#U').removeClass('fl-font-style-active');//置当前字体样式选择器为空
$('#btn-align-center,#btn-align-left,#btn-align-right,#btn-align-none').removeClass('fl-align-style-active');//置当前对齐方式为空
});
//页面顶部工具栏选择事件
$('.line-select-div').on('click','.top-menu-selector',function(){
var idSelected=$(this).attr('id').split('-');
if(idSelected[0]=='line'){
setChartLineType(idSelected[1]);
}else if(idSelected[0]=='align'){
if(sessionStorage['currentChartSelected']!='none'){
setChartTextAlign(sessionStorage['currentChartSelected'],idSelected[1]);
}else{
setChartTextAlign('',idSelected[1]);
}
}
});
//设计区域元素被拖动时,触发同步坐标
/** $(".droppable").droppable({
activate:function(event,ui){
console.log('sdsd');
//console.log(this);
setChartLocation($(this).offset().top,$(this).offset().left);
}
});*/
$(".draggable").draggable({
start:function(){
console.log('start');
},
drag:function(){
console.log('drag');
},
stop:function(){
console.log('stop');
}
});
//*****************右侧属性面板内容改变同步到设计区域******************
预加载
jQuery(function($){
txtValue=$(".chart-location-form").val();
给txtbox绑定键盘事件
$(".chart-location-form").bind("keydown",function(){
var currentValue=$(this).val();
console.log(1111);
console.log(currentValue);
var currentID=$(this).attr('id');
if(currentValue!=txtValue){
switch(currentID){
case 'chart-font-display'://字体
setChartDesignFont(currentValue);
break;
case 'chart-font-size-display'://字体大小
setChartDesignFontSize(currentValue*10);
break;
case 'chart-align-display'://字体对齐样式
setChartDesignFontAlign(currentValue);
break;
case 'chart-font-color-display'://字体颜色
setChartDesignFontColor(currentValue);
break;
case 'lo-x-display'://top
setChartDesignTop(currentValue*10);
break;
case 'lo-y-display'://left
setChartDesignLeft(currentValue*10);
break;
case 'chart-width-display'://宽度
setChartDesignWidth(currentValue*10);
break;
case 'chart-flight-height-display':
setChartDesignFlyHeight(currentValue*10);
break;
case 'chart-flight-speed-display':
setChartDesignFlySpeed(currentValue*10);
break;
case 'chart-height-display'://高度
setChartDesignHeight(currentValue*10);
break;
case 'chart-border-display'://框线style
setChartDesignBorderRadius(currentValue);
break;
case 'chart-fill-border-width-display'://框线粗细
setChartDesignBorderWidthStyle(currentValue);
break;
case 'chart-fill-border-color-display'://框线颜色
setChartDesignBorderColorStyle(currentValue);
break;
case 'chart-font-height-display'://文字高度
setChartDesignLineHeight(currentValue);
break;
case 'chart-font-height-display'://文字间距
setChartDesignLetterSpacing(currentValue);
break;
default:
break;
}
}
});
});
//选择框的选择项被改变时触发
$('.chart-fill-border-selector').change(function(){
var valSelected=$(this).children('option:selected').val();//selected的值
setChartDeignBorderLineStyle(valSelected);
})
//线条颜色选择器值被改变时触发
$('#chart-fill-border-color-display').change(function(){
setChartDesignBorderColorStyle($(this).val());
});
//字体颜色选择器值被改变时触发
$('#chart-font-color-display').change(function(){
setChartDesignFontColor($(this).val());
});
//背景颜色选择器值被改变时触发
$('#chart-background-color-display').change(function(){
setChartDesignBackground($(this).val());
});
//渐近度被改变时触发
$('#chart-blur-range-display').change(function(){
var chartblurDom=document.getElementById('chart-blur-range-display');
setChartDesignBoxShadow(chartblurDom.value,getChartBlurColorByColorSelector());
});
//同步设计区域的流程图框阴影
function synChartShadowInDesign(){
h=getChartHShadowBySelector();
v=getChartVShadowBySelector();
blur=getChartShadowBlurBySelector();
spread=getChartShadowSpreadBySelector();
color=getChartShadowColorBySelector();
setChartDesignBoxShadowA(h,v,blur,spread,color);
}
//垂直阴影改变时触发
$('#chart-h-shadow-display').change(function(){
synChartShadowInDesign();
});
//水平阴影改变时触发
$('#chart-v-shadow-display').change(function(){
synChartShadowInDesign();
});
//模糊距离改变时触发
$('#chart-shadow-blur-display').change(function(){
synChartShadowInDesign();
});
//阴影尺寸改变时触发
$('#chart-shadow-spread-display').change(function(){
synChartShadowInDesign();
});
//阴影颜色选择器改变时触发
$('#chart-shadow-color-display').change(function(){
synChartShadowInDesign();
});
目标选择框文本发生更改时触发的事件,根据ID不同
//$(".chart-fill-border-selector option:selected").attr('value')
//*****************右侧属性面板内容改变同步到设计区域******************
//删除连接线
jsPlumb.bind("click",function(conn,originalEvent){
if(confirm("确定删除吗?")){
jsPlumb.detach(conn);
}
});
// 连接事件监听
jsPlumb.bind("connection",function(info){
var sourcePoint = info.sourceEndpoint.endpoint;
var targetPoint = info.targetEndpoint.endpoint;
console.log(info);
// 获取阀值
var threshold = $('#chart-threshold-display').val();
var distance = pointDistance(sourcePoint,targetPoint);
if (distance>threshold){
alert(' 警告: 链接的两个部件距离超过了阀值')
}
});
//DOCUMENT快捷键操作
$(document).on("keydown", function(event){
if(event.ctrlKey && event.which==90){
//按下 CTRL+Z 进行撤销操作
var rareOperation=chartRareOperationStack.pop();//取出用户最近一次的操作
var operationJSON=chartOperationStack[rareOperation].pop();//根据用户最后一次进行的操作弹出最近一次的流程框图数据
operationJSON=JSON.parse(operationJSON);
var chartOperationData=operationJSON['block'][0];
switch(rareOperation){
case 'delete':
//用户操作为删除,撤销操作为添加
addNewChart('.chart-design',chartOperationData['BlockId']+sessionStorage['idIndex']+sessionStorage['currentChartAmount'],chartOperationData['BlockX'],chartOperationData['BlockY'],chartOperationData['BlockContent'],true);
break;
case 'add':
//用户操作为添加,撤销操作为删除
deleteChart(chartOperationData['BlockId'],true);
break;
case 'paste':
//用户操作为粘贴,撤销操作为删除
deleteChart(chartOperationData['BlockId'],true);
break;
}
}
if(event.ctrlKey && event.which==67){
//CTRL+C 进行复制部件操作
if(sessionStorage['currentChartSelected']!='none'){
chartOperationStack['copy'].push(getSingleChartJson(sessionStorage['currentChartSelected']));
//console.log(sessionStorage['currentChartSelected']);
chartRareOperationStack.push('copy');
}
}
if(event.ctrlKey && event.which==86){
//CTRL+V 进行粘贴部件操作
var chartCopiedJson=chartOperationStack['copy'][chartOperationStack['copy'].length-1];
var unpack=JSON.parse(chartCopiedJson);
var chartBlockObj=unpack['block'][0];
var chartPastedID=chartBlockObj['BlockId']+sessionStorage['idIndex'];//设置被粘贴部件的新ID
var BlockContent=chartBlockObj['BlockContent'];
var BlockX=chartBlockObj['BlockX'];
var BlockY=chartBlockObj['BlockY'];
var width=chartBlockObj['BlockWidth'];
var height=chartBlockObj['BlockHeight'];
var font=chartBlockObj['BlockFont'];
var fontSize=chartBlockObj['BlockFontSize'];
var fontAlign=chartBlockObj['BlockFontAlign'];
var fontColor=chartBlockObj['BlockFontColor'];
var borderRadius=chartBlockObj['BlockBorderRadius'];
var backgroundColor=chartBlockObj['BlockBackground'];
var fillBlurRange=chartBlockObj['BlockFillBlurRange'];
var fillBlurColor=chartBlockObj['BlockFillBlurColor'];
var borderStyle=chartBlockObj['BlockBorderStyle'];
var borderColor=chartBlockObj['BlockborderColor'];
var shadow=chartBlockObj['BlockShadow'];
var fontStyle=chartBlockObj['BlockFontStyle'];
var fontWeight=chartBlockObj['BlockFontWeight'];
var fontUnderline=chartBlockObj['BlockFontUnderline'];
var lineHeight=chartBlockObj['BlockLineHeight'];
var blockAttr=chartPastedID.split('-')[0];
var boxInsetShadowStyle='10px 10px '+fillBlurRange+"px 20px "+fillBlurColor+' inset';
if(unpack['connects'].length==0){
addNewChart('.chart-design',chartPastedID,chartBlockObj['BlockX'],chartBlockObj['BlockY']-20,chartBlockObj['BlockContent']);
$("#"+chartPastedID)
.css("left",BlockX)
.css("top",BlockY)
.css("position","absolute")
.css("margin","0px")
.css("width",width)
.css("height",height)
.css('font',font)
.css('font-size',fontSize)
.css('text-align',fontAlign)
.css('color',fontColor)
.css('border-radius',borderRadius)
.css('background',backgroundColor)
.css('box-shadow',boxInsetShadowStyle)
.css('border-style',borderStyle)
.css('border-color',borderColor)
.css('box-shadow',shadow)
.css('font-style',fontStyle)
.css('font-weight',fontWeight)
.css('font-underline',fontUnderline)
.css('line-height',lineHeight);
}else{
}
unpack['block'][0]['BlockId']=chartPastedID;
chartOperationStack['paste'].push(JSON.stringify(unpack));
chartRareOperationStack.push('paste');
}
if(event.which==46){
//DELETE 进行删除部件操作
if(sessionStorage['currentChartSelected']!='none'){
if(confirm("确定要删除吗?")){
deleteChart(sessionStorage['currentChartSelected']);
setChartLocation(0,0);
setChartSize(0,0);
}
}
}
});
//点击空白处或者自身隐藏弹出层，下面分别为滑动和淡出效果。
$(document).click(function(event){
$('.line-select').slideUp('fast');
sessionStorage['topLineSelectIsDisplayed']=false;
sessionStorage['topAlignSelectIsDisplayed']=false;
});
//设置style
function setEnvironmentStyle(styleName){
switch(styleName){
case 'entertainment':
console.log(styleName);
$('.droppable').css('background','rgb(173,219,225)');
break;
case 'enterprises':
$('.droppable').css('background','rgb(255,255,255)');
break;
case 'blue':
$('.droppable').css('background','rgb(255,235,190)');
break;
case 'dark':
$('.droppable').css('background','rgb(6,1,0)');
break;
case 'pink':
$('.droppable').css('background','rgb(127,0,185)');
break;
}
}
/***
* 计算两个点之间的距离
* @param sourcePoint {x:,y:}
* @param targetPoint {x:,y:}
*/
function pointDistance (sourcePoint,targetPoint) {
var absX = Math.abs(targetPoint.x - sourcePoint.x);
var absY = Math.abs(targetPoint.y - sourcePoint.y);
return Math.sqrt(Math.pow(absX,2) + Math.pow(absY,2));
}
//选择相应的style
$('.right-style-selector').click(function(){
var styleName=$(this).attr('id').split('-')[1];
setEnvironmentStyle(styleName);
});
//***********************************元素拖动控制部分************************************
});
一键复制
编辑
Web IDE
原始数据
按行查看
历史
1014
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
