只能上传jpg/png文件，且不超过500kb
{{data.value}}
{{item.title}}
{{item.title}}
{{item.title}}
{{item.title}}
只能上传jpg/png文件，且不超过500kb
{{data.value}}
Draggable 1
{{ element.name }}
Draggable 2
{{ element.name }}
{{ col.name }}
Nested draggable
{{ title }}
{{ valueString }}
只能上传jpg/png文件，且不超过500kb
{{item.value}}
{{item2.value}}
400
抱歉！您访问的页面失联啦 ...
项目介绍
- renren-fast-vue基于vue、element-ui构建开发，实现renren-fast后台管理前端功能，提供一套更优的前端解决方案
- 前后端分离，通过token进行数据交互，可独立部署
- 主题定制，通过scss变量统一一站式定制
- 动态菜单，通过菜单管理统一管理访问路由
- 数据切换，通过mock配置对接口数据／mock模拟数据进行切换
- 发布时，可动态配置CDN静态资源／切换新旧版本
- 演示地址：fast.demo.renren.io (账号密码：admin/admin)
获取帮助
- 官方社区：renren.io
- 前端Git地址：github.com/daxiongYang/renren-fast-vue
- 后台Git地址：git.oschina.net/renrenio/renren-fast
- 代码生成器：git.oschina.net/renrenio/renren-generator
- 如需关注项目最新动态，请Watch、Star项目，同时也是对项目最好的支持
官方QQ群
- 高级群：324780204(大牛云集，跟大牛学习新技能)
- 普通群：145799952(学习交流，互相解答各种疑问)
renren-fast-vue
renren-fast-vue基于vue、element-ui构建开发，实现renren-fast后台管理前端功能，提供一套更优的前端解决方案。
管理员登录
布局设置
只能上传jpg/png文件，且不超过500kb
{{item.value}}
{{item2.value}}
{{item.value}}
{{item2.value}}
1. 此Demo只提供ECharts官方使用文档，入门部署和体验功能。具体使用请参考：http://echarts.baidu.com/index.html
1. 此Demo只提供UEditor官方使用文档，入门部署和体验功能。具体使用请参考：http://fex.baidu.com/ueditor/
2. 浏览器控制台报错“请求后台配置项http错误，上传功能将不能正常使用！”，此错需要后台提供上传接口方法（赋值给serverUrl属性）
将文件拖到此处，或点击上传
只支持jpg、png、gif格式的图片！
全站推荐使用SVG Sprite, 详细请参考:icons/index.js描述
2017-10-11 15:03:19 [com.xxl.job.core.thread.JobThread]-[run]-[117]-[Thread-12]
----------- xxl-job job execute start -----------
----------- Params:[123] 2017-10-11 15:03:19 [com.xxl.job.executor.service.jobhandler.DemoJobHandler]-[execute]-[29]-[Thread-12] XXL-JOB, Hello World. 2017-10-11 15:03:19 [com.xxl.job.executor.service.jobhandler.DemoJobHandler]-[execute]-[32]-[Thread-12] beat at:0 2017-10-11 15:03:21 [com.xxl.job.executor.service.jobhandler.DemoJobHandler]-[execute]-[32]-[Thread-12] beat at:1 2017-10-11 15:03:23 [com.xxl.job.executor.service.jobhandler.DemoJobHandler]-[execute]-[32]-[Thread-12] beat at:2 2017-10-11 15:03:25 [com.xxl.job.executor.service.jobhandler.DemoJobHandler]-[execute]-[32]-[Thread-12] beat at:3 2017-10-11 15:03:27 [com.xxl.job.executor.service.jobhandler.DemoJobHandler]-[execute]-[32]-[Thread-12] beat at:4 2017-10-11 15:03:29 [com.xxl.job.core.thread.JobThread]-[run]-[124]-[Thread-12]
----------- xxl-job job execute end(finish) -----------
----------- ReturnT:ReturnT [code=200, msg=null, content=null]
',
selected: ['control', 'query', 'rule', 'ruleSet', 'assign'],
status: 0,
fontStyle: {
fontFamily: '微软雅黑',
size: 13,
color: '255,255,255',
bold: false,
italic: false,
underline: false,
textAlign: 'center',
vAlign: 'middle',
orientation: 'vertical'
},
lineStyle: {
lineWidth: 1,
lineColor: '228,75,78',
lineStyle: 'solid'
},
fillStyle: {
type: 'solid',
color: '228,75,78'
}
},
{
name: 'textarea',
title: '多行文本',
icon: '
',
selected: ['control', 'query', 'rule', 'ruleSet', 'assign'],
status: 0,
fontStyle: {
fontFamily: '微软雅黑',
size: 13,
color: '255,255,255',
bold: false,
italic: false,
underline: false,
textAlign: 'center',
vAlign: 'middle',
orientation: 'vertical'
},
lineStyle: {
lineWidth: 1,
lineColor: '228,75,78',
lineStyle: 'solid'
},
fillStyle: {
type: 'solid',
color: '228,75,78'
}
},
{
name: 'number',
title: '数字文本框',
icon: '
',
selected: ['control', 'query', 'rule', 'ruleSet', 'assign'],
status: 0,
fontStyle: {
fontFamily: '微软雅黑',
size: 13,
color: '255,255,255',
bold: false,
italic: false,
underline: false,
textAlign: 'center',
vAlign: 'middle',
orientation: 'vertical'
},
lineStyle: {
lineWidth: 1,
lineColor: '228,75,78',
lineStyle: 'solid'
},
fillStyle: {
type: 'solid',
color: '228,75,78'
}
},
{
name: 'radio',
title: '单选框组',
icon: '
',
selected: ['control', 'query', 'rule', 'ruleSet', 'assign'],
status: 0,
fontStyle: {
fontFamily: '微软雅黑',
size: 13,
color: '255,255,255',
bold: false,
italic: false,
underline: false,
textAlign: 'center',
vAlign: 'middle',
orientation: 'vertical'
},
lineStyle: {
lineWidth: 1,
lineColor: '228,75,78',
lineStyle: 'solid'
},
fillStyle: {
type: 'solid',
color: '228,75,78'
}
},
{
name: 'checkbox',
title: '多选框组',
icon: '
',
selected: ['control', 'query', 'rule', 'ruleSet', 'assign'],
status: 0,
fontStyle: {
fontFamily: '微软雅黑',
size: 13,
color: '255,255,255',
bold: false,
italic: false,
underline: false,
textAlign: 'center',
vAlign: 'middle',
orientation: 'vertical'
},
lineStyle: {
lineWidth: 1,
lineColor: '228,75,78',
lineStyle: 'solid'
},
fillStyle: {
type: 'solid',
color: '228,75,78'
}
},
{
name: 'dateTime',
title: '时间日期选择器',
icon: '
',
selected: ['control', 'query', 'rule', 'ruleSet', 'assign'],
status: 0,
fontStyle: {
fontFamily: '微软雅黑',
size: 13,
color: '255,255,255',
bold: false,
italic: false,
underline: false,
textAlign: 'center',
vAlign: 'middle',
orientation: 'vertical'
},
lineStyle: {
lineWidth: 1,
lineColor: '228,75,78',
lineStyle: 'solid'
},
fillStyle: {
type: 'solid',
color: '228,75,78'
}
},
{
name: 'select',
title: '下拉选择框',
icon: '
',
selected: ['control', 'query', 'rule', 'ruleSet', 'assign'],
status: 0,
fontStyle: {
fontFamily: '微软雅黑',
size: 13,
color: '255,255,255',
bold: false,
italic: false,
underline: false,
textAlign: 'center',
vAlign: 'middle',
orientation: 'vertical'
},
lineStyle: {
lineWidth: 1,
lineColor: '228,75,78',
lineStyle: 'solid'
},
fillStyle: {
type: 'solid',
color: '228,75,78'
}
},
{
name: 'switch',
title: '开关',
icon: '
',
selected: ['control', 'query', 'rule', 'ruleSet', 'assign'],
status: 0,
fontStyle: {
fontFamily: '微软雅黑',
size: 13,
color: '255,255,255',
bold: false,
italic: false,
underline: false,
textAlign: 'center',
vAlign: 'middle',
orientation: 'vertical'
},
lineStyle: {
lineWidth: 1,
lineColor: '228,75,78',
lineStyle: 'solid'
},
fillStyle: {
type: 'solid',
color: '228,75,78'
}
}
]
},
'senior': {
title: '高级字段',
child: [
{
name: 'img',
title: '图片上传',
icon: '
',
selected: ['control', 'query', 'rule', 'ruleSet', 'assign'],
status: 0,
fontStyle: {
fontFamily: '微软雅黑',
size: 13,
color: '255,255,255',
bold: false,
italic: false,
underline: false,
textAlign: 'center',
vAlign: 'middle',
orientation: 'vertical'
},
lineStyle: {
lineWidth: 1,
lineColor: '228,75,78',
lineStyle: 'solid'
},
fillStyle: {
type: 'solid',
color: '228,75,78'
}
}
]
},
'layout': {
title: '布局字段',
child: [
{
name: 'grid',
title: '栅格布局',
icon: '
',
selected: ['control', 'query', 'rule', 'ruleSet', 'assign'],
status: 0,
fontStyle: {
fontFamily: '微软雅黑',
size: 13,
color: '255,255,255',
bold: false,
italic: false,
underline: false,
textAlign: 'center',
vAlign: 'middle',
orientation: 'vertical'
},
lineStyle: {
lineWidth: 1,
lineColor: '228,75,78',
lineStyle: 'solid'
},
fillStyle: {
type: 'solid',
color: '228,75,78'
}
}
]
}
}
$.each(categorys, function (k, v) {
Schema.addCategory({
name: k,
text: v.title,
dataAttributes: []
})
$.each(v.child, function () {
var key = this.name
if (this.name === 'start') {
Schema.addShape({
name: this.name,
title: this.title,
category: k,
icon: this.icon,
selected: this.selected,
fontStyle: this.fontStyle,
lineStyle: this.lineStyle,
fillStyle: this.fillStyle,
props: { w: 150, h: 40 },
path: [{
actions: [{ action: 'move', x: 'Math.min(w,h)/2.5', y: '0' },
{ action: 'line', x: 'w-Math.min(w,h)/2.5', y: '0' },
{ action: 'curve', x1: 'w+Math.min(w,h)/2.5/2.5', y1: '0', x2: 'w+Math.min(w,h)/2.5/2.5', y2: 'h', x: 'w-Math.min(w,h)/2.5', y: 'h' },
{ action: 'line', x: 'Math.min(w,h)/2.5', y: 'h' },
{ action: 'curve', x1: '-Math.min(w,h)/2.5/2.5', y1: 'h', x2: '-Math.min(w,h)/2.5/2.5', y2: '0', x: 'Math.min(w,h)/2.5', y: '0' },
{ action: 'close' }]
}]
})
} else {
Schema.addShape({
name: this.name,
title: this.title,
category: k,
icon: this.icon,
selected: this.selected,
fontStyle: this.fontStyle,
lineStyle: this.lineStyle,
fillStyle: this.fillStyle,
props: { w: 150, h: 40 },
path: [{
actions: [{ action: 'move', x: 'Math.min(w,h)/5/5', y: '0' },
{ action: 'line', x: 'w-Math.min(w,h)/5/5', y: '0' },
{ action: 'curve', x1: 'w+Math.min(w,h)/5/5', y1: '0', x2: 'w+Math.min(w,h)/5/5', y2: 'h', x: 'w-Math.min(w,h)/5/5', y: 'h' },
{ action: 'line', x: 'Math.min(w,h)/5/5', y: 'h' },
{ action: 'curve', x1: '-Math.min(w,h)/5/5', y1: 'h', x2: '-Math.min(w,h)/5/5', y2: '0', x: 'Math.min(w,h)/5/5', y: '0' },
{ action: 'close' }]
}]
})
}
var temp = $('#configure .template')
var _div = temp.find('#temp_' + key)
if (_div.length == 0 && this.formEL) {
temp.append('')
_div = temp.find('#temp_' + key)
$.each(this.formEL, function () {
var require = ' *', required = 'required', tipHtml = ''
if (this.hide) required = ''
if (this.require == false) require = ''
if (!this.tips) tipHtml = ''
var startHtml = '' + '' + '
'
//title="'+this.title+'"
if (this.type == 'select') {
_div.append(startHtml +
'' +
tipHtml + endHtml)
var select = _div.find('select[name="' + this.name + '"]')
if (this.child)
{var nn = this.name;}
$.each(this.child, function () {
select.append('')
})
} else if (this.type == 'textarea') {
_div.append(startHtml +
'' +
tipHtml + endHtml)
} else {
var num = this.type
if (this.type != 'number') num = ''
_div.append(startHtml +
'' +
tipHtml + endHtml)
}
if (this.hide) {
_div.find('.' + this.name).hide()
}
})
}
})
})
//把下面的layui的代码抽取出有用的出来
$('a.plus').click(function () {
Designer.zoomIn()
})
$('a.minus').click(function () {
Designer.zoomOut()
})
setTimeout(() => {
// alert($(window).height())
$('#canvas_container').height($(window).height())
}, 2000)
//layui使用开始
// layui.use(['layer', 'element', 'form', 'laytpl'], function () {
// var layer = layui.layer, el = layui.element, form = layui.form, $ = layui.jquery;
// var conf = $("#configure"), cancel = conf.find('#cancel');
// $('a.plus').click(Designer.zoomIn);
// $('a.minus').click(Designer.zoomOut);
// setTimeout(() => {
// // alert($(window).height())
// $('#canvas_container').height($(window).height());
// }, 1000);
// if ($('.layui-edit').length > 0) {
// $('#canvas_container').height($(window).height());
// definition = localStorage['chart'];
// }
// if ($('.layui-log').length > 0) {
// $('#shape_panel').hide();
// $('a.time').html('时间：' + new Date().format('yyyy-MM-dd'));
// $('#configure .layui-hide-div').show();
// }
// //ajax还原
// if (definition) {
// console.log("definition", definition)
// Designer.selectAll();
// Designer.op.removeShape();
// Designer.open(definition);
// chartId = '1';//赋值jobId
// //组件 data 绑定
// }
// var active = {
// addJob: function () {
// var addJob = function () {
// var _index;
// layer.open({
// type: 1,
// title: '新建任务',
// offset: 'auto',
// area: ['400px', '300px'],
// content: $('#addJob'),
// btn: ['保存', '关闭'],
// btnAlign: 'c',
// shade: 0,
// move: 0,
// closeBtn: 0,
// success: function (layero, index) {
// layero.find('.layui-reset').click();
// form.render();
// },
// yes: function (index, layero) {
// _index = index;
// layero.find('.layui-addJob').click();
// },
// btn2: function (index, layero) {
// layer.close(index);
// }
// });
// form.on('submit(addJob)', function (data) {
// layer.msg('新建任务成功!');
// $('.middle a.name').html('名称：' + data.field.name);
// layer.close(_index);
// chartId = 1;//_index;
// $('#canvas_container').height($(window).height());
// return false;
// });
// }
// if (!$.isEmptyObject(Model.define.elements)) {
// layer.open({
// type: 1,
// title: '提示',
// offset: 'auto',
// content: ''
var endHtml = '
亲, 画布不为空, 清空画布吗?
',
// btn: ['清空', '保留'],
// btnAlign: 'c',
// shade: 0,
// move: 0,
// closeBtn: 0,
// yes: function (index, layero) {
// Designer.selectAll();
// Designer.op.removeShape();
// layer.close(index);
// addJob();
// },
// btn2: function (index, layero) {
// layer.close(index);
// addJob();
// }
// });
// } else {
// addJob();
// }
// },
// testJob: function () {
// //测试组件是否正常
// //CLB.offline();
// localStorage['chart'] = JSON.stringify(Model.define);
// if (autoFn())
// layer.load(0, {
// content: '测试中...', time: 3 * 1000, end: function () {
// layer.msg('测试成功')
// }
// });
// },
// downJob: function () {
// //CLB.offline();
// localStorage['chart'] = JSON.stringify(Model.define);
// layer.load(0, {
// content: '下载中...', time: 3 * 1000, end: function () {
// layer.msg('下载成功')
// }
// });
// }
// };
// //自动校验
// var autoFn = function () {
// nodes = [], definition = JSON.stringify(Model.define);
// var retFlag = true;
// if (!chartId) {
// layer.msg('请先创建任务');
// return;
// }
// $.each(Model.define.elements, function (k, v) {
// if (!retFlag) return retFlag;
// if (!$('#' + k).hasClass('linker_box')) {
// var node = $('#' + k).data('node');
// if (!node || !node.nodeId) {
// retFlag = false;
// layer.msg('请双击【' + v.title + '】组件，配置对应的参数');
// } else {
// nodes.push(node);
// }
// }
// });
// if (!retFlag) return retFlag;
// if (!definition || nodes.length == 0) {
// layer.msg('请拖动组件并且关联任务');
// return retFlag;
// }
// return retFlag;
// };
// //check
// form.on('select(fileSystem)', function (d) {
// var p = d.othis.parent().parent();
// var c2 = p.nextAll('.col2');
// var c3 = p.nextAll('.col3');
// if (d.value == 'local') {
// c2.find('[name="col2"]').attr('lay-verify', 'col2');
// c2.hide();
// c3.find('[name="col3"]').attr('lay-verify', 'required|col3');
// c3.show();
// } else {
// c2.find('[name="col2"]').attr('lay-verify', 'required|col2');
// c2.show();
// c3.find('[name="col3"]').attr('lay-verify', 'col3');
// c3.hide();
// }
// });
// form.verify({
// remark: function (value, item) {
// if (!value) {
// conf.find('.layui-tab-title li:last').click();
// return '描述信息不能为空';
// }
// }
// });
// form.on('submit(nodesave)', function (d) {
// var nodeId = d.field.nodeId;
// $('#' + nodeId).find('.text_canvas').val(d.field.name);
// $('#' + nodeId).data('node', d.field);
// cancel.click();
// });
// cancel.unbind('click').bind('click', function () {
// cancel.unbind('click.cancel');
// conf.hide();
// });
// $('body').mousedown(function () {
// $('.ui_tip_close').click();
// });
// $('a').on('click', function () {
// var othis = $(this), type = othis.data('click');
// active[type] ? active[type].call(this, othis) : '';
// });
// });
//layui使用结束
function nodeConf (node) {
var nodeId = node.id, data = $('#' + nodeId).data('node') || {}, conf = $('#configure')
var form = layui.form, laytpl = layui.laytpl
var temp = $('#temp_' + node.name).html()
temp = temp.replaceAll('xx="{{', '{{')
temp = temp.replaceAll('xx}}"', '}}')
if (node.title && !data.name) {
data.name = node.title
}
$('#' + nodeId).find('.text_canvas').val(data.name)
laytpl(temp).render(data, function (html) {
conf.find('[name="nodeId"').val(nodeId)
conf.find('[name="remark"').val(data.remark || '')
conf.find('.layui-tab-content .layui-tab-item:eq(0)').html(html)
form.render()
conf.show()
conf.find('.layui-tab-title li:first').click()
})
}
function showMenu (m) {
if ($('.layui-log').length > 0) {
m.children().show()
m.children('li[ac=log]').unbind('click').click(function () {
layer.open({
type: 1,
title: false,
offset: 'auto',
area: ['80%', '500px'],
content: '',
btn: '关闭',
btnAlign: 'c',
shade: 0.1,
move: 0,
shadeClose: true,
success: function () {
$('.layui-code-log').append($('#log-demo').html())
layui.use('code', function () {
layui.code({
title: '日志',
about: false
})
})
}
})
})
}
}
================================================
FILE: static/flow-editor/demo/js/dmp/index/index.js
================================================
layui.use(['layer','element'], function() {
var $ = layui.jquery, el = layui.element, layer = layui.layer;
var custom = $('.layui-body-custom');
var active = {
resizeTab: function() {
var height = $(window).height() - 60;
custom.find('.layui-tab-title').css('cssText', 'height:'+height+'px !important;');
custom.find('.layui-tab-content').height(height);
custom.find('.layui-tab-content').find('iframe').height(height);
},
userMsg: function(){
custom.find('.layui-user').click();
},
logout: function(){
location.href = '../../html/login/login.html';
}
}
var navFlag = false;
el.on('nav(headNav)', function(elem) {
navFlag = true;
var othis = $(this), type = othis.data('click');
if(!type){
othis = othis.children('a');
type = othis.data('click');
var ref = othis.data('ref');
custom.find(ref).click();
}
active[type] ? active[type].call(this, othis) : '';
});
el.on('tab(indexTab)', function(){
if(!navFlag)
$('.layui-layout-right .layui-this').removeClass('layui-this');
navFlag = false;
});
custom.find('.layui-home').click();
$(window).on('resize', active.resizeTab);
active.resizeTab();
});
function toHome(){
console.log(123456)
}
================================================
FILE: static/flow-editor/demo/js/dmp/pub/pub.js
================================================
String.prototype.replaceAll = function(o, n, i) {
if(!RegExp.prototype.isPrototypeOf(o)) {
return this.replace(new RegExp(o, (i ? "gi": "g")), n);
}else{
return this.replace(o, n);
}
};
================================================
FILE: static/flow-editor/demo/js/layui/examples/admin.html
================================================
内容主体区域
按钮图标：
按钮尺寸：
按钮圆角：
按钮图文：
按钮组：
================================================ FILE: static/flow-editor/demo/js/layui/examples/carousel.html ================================================
条目1
条目2
条目3
条目4
条目1
条目2
条目1
条目2
条目3
条目4
//路由
LAY.fn.router = function(hash){
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
for(var i = 0; i < hashs.length; i++){
item = hashs[i].split('=');
/^\w+=/.test(hashs[i]) ? function(){
if(item[0] !== 'dir'){
param[item[0]] = item[1];
}
}() : param.dir.push(hashs[i]);
item = null;
}
return param;
};
//路由
LAY.fn.router = function(hash){
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
for(var i = 0; i < hashs.length; i++){
item = hashs[i].split('=');
/^\w+=/.test(hashs[i]) ? function(){
if(item[0] !== 'dir'){
param[item[0]] = item[1];
}
}() : param.dir.push(hashs[i]);
item = null;
}
return param;
};
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
//代码中的代码
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
//路由
LAY.fn.router = function(hash){
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
for(var i = 0; i < hashs.length; i++){
item = hashs[i].split('=');
/^\w+=/.test(hashs[i]) ? function(){
if(item[0] !== 'dir'){
param[item[0]] = item[1];
}
}() : param.dir.push(hashs[i]);
item = null;
}
return param;
};
//代码中的代码
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
//代码中的代码
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
//代码中的代码
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
================================================ FILE: static/flow-editor/demo/js/layui/examples/element.html ================================================123
-
2.0.0
杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名
- 思想
- 虽然在
-
1.0.9
哈哈哈 -
标题内容
徽章： 6 99 61728 赤 橙 绿 青 蓝 黑 灰 Hot
杜甫
杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。
李清照
李清照出生于书香门第，早期生活优裕，其父李格非藏书甚富，她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期多悲叹身世，情调感伤。形式上善用白描手法，自辟途径，语言清丽。
鲁迅
鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响，蜚声世界文坛，尤其在韩国、日本思想文化领域有极其重要的地位和影响，被誉为“二十世纪东亚文化地图上占最大领土的作家”。
Layui正是你苦苦寻找的前端UI框架
Layui正是你苦苦寻找的前端UI框架Layui正是你苦苦寻找的前端UI框架Layui正是你苦苦寻找的前端UI框架Layui正是你苦苦寻找的前端UI框架Layui正是你苦苦寻找的前端UI框架默认分割线
赤色分割线
橙色分割线
墨绿分割线
青色分割线
蓝色分割线
黑色分割线
灰色分割线
- 标题1
- 标题2
- 标题3
- 标题4
- 标题5
1
2
3
4
5
- 标题1
- 标题2
- 标题3
- 标题4
- 标题5
- 标题6
- 标题一
- 标题2
- 标题3
- 标题4
- 标题5
- 标题6
2
3
4
5
6
- 标题1
- 标题2
- 标题3
- 标题4
- 标题5
- 标题6
- 标题7
- 标题8
================================================ FILE: static/flow-editor/demo/js/layui/examples/js/child/test.js ================================================ layui.define(function(exports){ exports('test', { title: '子目录模块加载' }) }); ================================================ FILE: static/flow-editor/demo/js/layui/examples/js/index.js ================================================ layui.define(function(exports){ exports('index', { title: '模块入口' }); }); ================================================ FILE: static/flow-editor/demo/js/layui/examples/json/table/demo1.json ================================================ { "code": 0 ,"msg": "" ,"count": 8 ,"data": [{ "id": "10001" ,"username": "杜甫" ,"email": "xianxin@layui.com" ,"sex": "男" ,"city": "浙江杭州" ,"sign": "点击此处，显示更多。当内容超出时，点击单元格会自动显示更多内容。" ,"experience": "7" ,"ip": "192.168.0.8" ,"logins": 0 ,"joinTime": "2016-10-14" }, { "id": "10002" ,"username": "李白" ,"email": "xianxin@layui.com" ,"sex": "男" ,"city": "浙江杭州" ,"sign": "君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听) 钟鼓馔玉不足贵，但愿长醉不复醒。(不足贵 一作：何足贵；不复醒 一作：不愿醒/不用醒) 古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯) 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。" ,"experience": "9" ,"ip": "192.168.0.8" ,"logins": "106" ,"joinTime": "2016-10-14" ,"LAY_CHECKED": true }, { "id": "10003" ,"username": "王勃" ,"email": "xianxin@layui.com" ,"sex": "男" ,"city": "浙江杭州" ,"sign": "人生恰似一场修行" ,"experience": "8" ,"ip": "192.168.0.8" ,"logins": "106" ,"joinTime": "2016-10-14" }, { "id": "10004" ,"username": "李清照" ,"email": "xianxin@layui.com" ,"sex": "女" ,"city": "浙江杭州" ,"sign": "人生恰似一场修行" ,"experience": "6" ,"ip": "192.168.0.8" ,"logins": "106" ,"joinTime": "2016-10-14" }, { "id": "10005" ,"username": "冰心" ,"email": "xianxin@layui.com" ,"sex": "女" ,"city": "浙江杭州" ,"sign": "人生恰似一场修行" ,"experience": "64" ,"ip": "192.168.0.8" ,"logins": "106" ,"joinTime": "2016-10-14" }, { "id": "10006" ,"username": "贤心" ,"email": "xianxin@layui.com" ,"sex": "男" ,"city": "浙江杭州" ,"sign": "人生恰似一场修行" ,"experience": "65" ,"ip": "192.168.0.8" ,"logins": "106" ,"joinTime": "2016-10-14" }, { "id": "10007" ,"username": "贤心" ,"email": "xianxin@layui.com" ,"sex": "男" ,"city": "浙江杭州" ,"sign": "人生恰似一场修行" ,"experience": "49" ,"ip": "192.168.0.8" ,"logins": "106" ,"joinTime": "2016-10-14" }, { "id": "10008" ,"username": "贤心" ,"email": "xianxin@layui.com" ,"sex": "男" ,"city": "浙江杭州" ,"sign": "人生恰似一场修行" ,"experience": "5" ,"ip": "192.168.0.8" ,"logins": "106" ,"joinTime": "2016-10-14" }, { "id": "10009" ,"username": "贤心" ,"email": "xianxin@layui.com" ,"sex": "男" ,"city": "浙江杭州" ,"sign": "人生恰似一场修行" ,"experience": "49" ,"ip": "192.168.0.8" ,"logins": "106" ,"joinTime": "2016-10-14" }, { "id": "10010" ,"username": "贤心" ,"email": "xianxin@layui.com" ,"sex": "男" ,"city": "浙江杭州" ,"sign": "人生恰似一场修行" ,"experience": "5" ,"ip": "192.168.0.8" ,"logins": "106" ,"joinTime": "2016-10-14" }] } ================================================ FILE: static/flow-editor/demo/js/layui/examples/json/table/demo2.json ================================================ { "code": 0 ,"msg": "" ,"count": 66 ,"data": [{ "username": "张小三" ,"amount": 18 ,"province": "浙江" ,"city": "杭州" ,"zone": "西湖区" ,"street": "西溪街道" ,"address": "西溪花园" ,"house": "30栋1单元" }, { "username": "李小四" ,"amount": 39 ,"province": "江苏" ,"city": "苏州" ,"zone": "姑苏区" ,"street": "丝绸路" ,"address": "天墅之城" ,"house": "9幢2单元" }, { "username": "王小四" ,"amount": 8 ,"province": "江西" ,"city": "南昌" ,"zone": "青山湖区" ,"street": "艾溪湖办事处" ,"address": "中兴和园" ,"house": "1幢3单元" }, { "username": "赵小六" ,"amount": 16 ,"province": "福建" ,"city": "泉州" ,"zone": "丰泽区" ,"street": "南洋街道" ,"address": "南洋村" ,"house": "6幢1单元" }, { "username": "孙小七" ,"amount": 12 ,"province": "湖北" ,"city": "武汉" ,"zone": "武昌区" ,"street": "武昌大道" ,"address": "两湖花园" ,"house": "16幢2单元" }, { "username": "周小八" ,"amount": 11 ,"province": "安徽" ,"city": "黄山" ,"zone": "黄山区" ,"street": "汤口镇" ,"address": "温泉村" ,"house": "21号" }] } ================================================ FILE: static/flow-editor/demo/js/layui/examples/json/upload/demoLayEdit.json ================================================ { "code": 0 ,"msg": "" ,"data": { "src": "http://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" ,"title": "图片名称" } } ================================================ FILE: static/flow-editor/demo/js/layui/examples/laydate.html ================================================
日期选择器：
年选择器：
时间范围选择
同时绑定多个：
墨绿主题：
直接嵌套在指定容器中：
================================================ FILE: static/flow-editor/demo/js/layui/examples/layedit.html ================================================
50%
50%
25%
25%
25%
25%
移动设备：100%、桌面：60%
移动设备：50%、桌面：40%
移动设备：50%、桌面：100%
50% | 33.33% | 33.33%
50% | 66.67% | 33.33%
33.33% | 100% | 33.33%
33.33% | 50% | 66.67%
33.33% | 50% | 33.33%
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
75%
25%
33.33%
33.33%
33.33%
50%
50%
1/4
1/4
1/4
1/4
1/3
1/3
1/3
75%
25%
58.33%
41.67%
33.33%
33.33%
33.33%
33.33%
偏移4列
偏移5列
不偏移
偏移3列
偏移1列
内部列
内部列
内部列
内部列
内部列
内部列
25%
25%
25%
25%
================================================ FILE: static/flow-editor/demo/js/layui/examples/laypage.html ================================================
| ID | 用户名 | 邮箱 | 性别 | 城市 | 签名 | 积分 | IP | 登入次数 | 加入时间 | 操作 |
|---|
| ID | 用户名 | 邮箱 | 性别 | 城市 | 签名 | 积分 | IP | 登入次数 | 加入时间 | 操作 |
|---|
| 联系人 | 金额 | 地址 | 操作 | |||
|---|---|---|---|---|---|---|
| 省 | 市 | 区 | ||||
| 联系人 | 金额 | 地址1 | 地址2 | 操作 | |||||
|---|---|---|---|---|---|---|---|---|---|
| 省 | 市 | 详细 | 区 | 省 | 市 | ||||
| 小区 | 单元 | ||||||||
| 昵称 | 加入时间 | 签名 | |
|---|---|---|---|
| 贤心1 | 2016-11-28 | 人生就像是一场修行a | |
| 贤心2 | 2016-11-29 | 人生就像是一场修行b | |
| 贤心3 | 2016-11-30 | 人生就像是一场修行c |
| 楼层 | 1单元 | 2单元 | ||
| 1门 | 2门 | 1门 | 2门 | |
| 3楼 | 301 | 302 | 301 | 302 |
| 2楼 | 201 | 202 | 201 | 202 |
| 1楼 | 101 | 102 | 101 | 102 |
# layui.tree-v2 备忘 * check参数 - checkbox、radio的支持 * 拖拽的支持================================================ FILE: static/flow-editor/demo/js/layui/examples/upload.html ================================================
| 文件名 | 大小 | 状态 | 操作 |
|---|
点击上传，或将文件拖拽到此处
绑定原始文件域： ================================================ FILE: static/flow-editor/demo/js/layui/examples/util.html ================================================
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
================================================ FILE: static/flow-editor/demo/js/layui/examples/xingzuo.html ================================================
- 天秤座
- 处女座
- 水瓶座
- 双子座
- 双鱼座
- 白羊座
"); $("#chat_messages").append("
");
for (var f = 0; f < Schema.categories.length; f++) {
var g = Schema.categories[f];
if (g.name == "standard") {
continue
}
//隐藏开始的分类
if (g.name == 'dataSource') {
$("#shape_panel").append("
" + g.text + "
" + g.text + "
ProcessOn图形
")
}
$("#panel_search").append("网络图标
");
var o = 0;
function i() {
$("#panel_search").append("正在搜索网络图标...
");
$(".search_panel_btn").remove();
var s = Schema.shapes.standardImage;
$.getJSON("https://api.iconfinder.com/v2/icons/search?query=" + n + "&offset=" + o + "&count=24&minimum_size=64&vector=false&premium=false", function (w) {
if (w.total_count == 0) {
$(".search_panel_loading").text("没有搜索到网络图标，建议使用常用英文单词进行搜索。");
return
}
$(".search_panel_loading").remove();
var D = w.icons;
for (var x = 0; x < D.length; x++) {
var y = D[x];
var F = y.raster_sizes;
F.sort(function (H, G) {
if (H.size == 128) {
return -1
}
return H.size - G.size
});
var B = "image_search_" + Utils.newId();
var z = false;
var A = y.tags.join(", ");
for (var v = 0; v < F.length; v++) {
var E = F[v];
var t = E.formats[0].preview_url;
if (typeof s == "undefined") {
continue
}
var C = Utils.copy(s);
C.props = {
w: E.size_width,
h: E.size_height
};
C.fillStyle = {
type: "image",
fileId: t,
display: "fill",
imageW: E.size_width,
imageH: E.size_height
};
C.attribute.visible = true;
C.name = "image_search_" + Utils.newId();
C.category = "search";
C.title = A + "" + E.size_width + "x" + E.size_height; C.groupName = B; Schema.shapes[C.name] = C; SchemaGroup.addGroupShape(B, C.name); if ((E.size == 128 || v == F.length - 1) && z == false) { e(C, C.groupName); z = true } } } o += 24; if (o < w.total_count) { var u = $("").appendTo("#panel_search"); u.bind("click", function () { i() }) } }) } i() } else { $("#panel_search").parent().addClass("panel_collapsed") } } }) } }, hotkey: { init: function () { var a = null; $(window).unbind("keydown.hotkey").bind("keydown.hotkey", function (j) { if ((j.ctrlKey || j.metaKey) && j.keyCode == 83) { j.preventDefault() } else { if ((j.ctrlKey || j.metaKey) && j.keyCode == 65) {//全选 Designer.selectAll(); j.preventDefault() } else { if (j.keyCode == 46 || j.keyCode == 8) {//删除 Designer.op.removeShape(); j.preventDefault() } else { if ((j.ctrlKey || j.metaKey) && j.keyCode == 90) {//撤销 MessageSource.undo(); j.preventDefault() } else { if ((j.ctrlKey || j.metaKey) && j.keyCode == 89) {//重做 MessageSource.redo(); j.preventDefault() } else { if ((j.ctrlKey || j.metaKey) && !j.shiftKey && j.keyCode == 67) {//复制 Designer.clipboard.copy(); j.preventDefault() } else { if ((j.ctrlKey || j.metaKey) && j.keyCode == 88) {//剪切 Designer.clipboard.cut(); j.preventDefault() } else { if ((j.ctrlKey || j.metaKey) && j.keyCode == 86) {//粘贴 Designer.clipboard.paste(); j.preventDefault() } else { if ((j.ctrlKey || j.metaKey) && j.keyCode == 68) {//ctrl+d Designer.clipboard.duplicate(); j.preventDefault() } else { if ((j.ctrlKey || j.metaKey) && j.shiftKey && j.keyCode == 66) {//ctrl+shift+b Designer.clipboard.brush(); j.preventDefault() } else { if ((j.altKey || j.metaKey) && (j.keyCode == 187 || j.keyCode == 107)) {//ctrl +'+' Designer.zoomIn(); j.preventDefault() } else { if ((j.altKey || j.metaKey) && (j.keyCode == 189 || j.keyCode == 109)) {//ctrl +'-' Designer.zoomOut(); j.preventDefault() } else { if (j.keyCode >= 37 && j.keyCode <= 40) { if (a == null || Utils.getSelected().length > 0) { var d = Utils.getSelected(); var m = Utils.getFamilyShapes(d); d = d.concat(m); var g = Utils.getContainedShapes(d); d = d.concat(g); var f = Utils.getAttachedShapes(d); d = d.concat(f); var k = Utils.getCollapsedShapes(d); d = d.concat(k); var n = Utils.getOutlinkers(d); a = d.concat(n) } if (a.length > 0) { j.preventDefault(); var b = 10; if (j.ctrlKey || j.shiftKey) { b = 1 } Utils.hideLinkerCursor(); UI.hideShapeOptions(); if (j.keyCode == 37) { Designer.op.moveShape(a, { x: -b, y: 0 }) } else { if (j.keyCode == 38) { Designer.op.moveShape(a, { x: 0, y: -b }); j.preventDefault() } else { if (j.keyCode == 39) { Designer.op.moveShape(a, { x: b, y: 0 }) } else { if (j.keyCode == 40) { Designer.op.moveShape(a, { x: 0, y: b }); j.preventDefault() } } } } $(document).unbind("keyup.moveshape").bind("keyup.moveshape", function () { Model.updateMulti(a); a = null; $(document).unbind("keyup.moveshape"); Designer.op.hideTip(); Utils.showLinkerCursor(); UI.showShapeOptions() }) } } else { if ((j.ctrlKey || j.metaKey) && j.keyCode == 221) { var l = "front"; if (j.shiftKey) { l = "forward" } Designer.layerShapes(l) } else { if ((j.ctrlKey || j.metaKey) && j.keyCode == 219) { var l = "back"; if (j.shiftKey) { l = "backward" } Designer.layerShapes(l) } else { if ((j.ctrlKey || j.metaKey) && j.keyCode == 71) { j.preventDefault(); if (j.shiftKey) { Designer.ungroup() } else { Designer.group() } } else { if ((j.ctrlKey || j.metaKey) && j.keyCode == 76) { j.preventDefault(); if (j.shiftKey) { Designer.unlockShapes() } else { Designer.lockShapes() } } else { if (j.keyCode == 18) { Designer.op.changeState("drag_canvas") } else { if (j.keyCode == 27) { if (!Designer.op.state) { Utils.unselect(); $(".options_menu").hide(); $(".color_picker").hide() } else { if (Designer.op.state == "creating_free_text" || Designer.op.state == "creating_free_linker") { Designer.op.resetState() } } } else { if (j.keyCode == 84 && !(j.ctrlKey || j.metaKey)) { $(".menu.list").hide(); Designer.op.changeState("creating_free_text") } else { if (j.keyCode == 73 && !(j.ctrlKey || j.metaKey)) { $(".menu.list").hide(); UI.showImageSelect(function (o, e, p) { UI.insertImage(o, e, p) }); $("#designer_contextmenu").hide() } else { if (j.keyCode == 76 && !(j.ctrlKey || j.metaKey)) { $(".menu.list").hide(); Designer.op.changeState("creating_free_linker"); $("#designer_contextmenu").hide() } else { if (j.keyCode == 66 && (j.ctrlKey || j.metaKey)) { var i = Utils.getSelectedIds(); if (i.length > 0) { var h = Model.getShapeById(i[0]); var c = Utils.getShapeFontStyle(h.fontStyle); Designer.setFontStyle({ bold: !c.bold }); UI.update() } j.preventDefault() } else { if (j.keyCode == 73 && (j.ctrlKey || j.metaKey)) { var i = Utils.getSelectedIds(); if (i.length > 0) { var h = Model.getShapeById(i[0]); var c = Utils.getShapeFontStyle(h.fontStyle); Designer.setFontStyle({ italic: !h.fontStyle.italic }); UI.update() } j.preventDefault() } else { if (j.keyCode == 85 && (j.ctrlKey || j.metaKey)) { var i = Utils.getSelectedIds(); if (i.length > 0) { var h = Model.getShapeById(i[0]); var c = Utils.getShapeFontStyle(h.fontStyle); Designer.setFontStyle({ underline: !c.underline }); UI.update() } j.preventDefault() } else { if (j.keyCode == 32 && !(j.ctrlKey || j.metaKey)) { var i = Utils.getSelectedIds(); if (i.length == 1) { var h = Model.getShapeById(i[0]); Designer.op.editShapeText(h) } j.preventDefault() } else { if (j.keyCode == 121) { j.preventDefault(); Dock.enterPresentation() } else { if (j.keyCode == 91) { Designer.op.isMetaKey = true; j.preventDefault(); return false } } } } } } } } } } } } } } } } } } } } } } } } } } } } }); $("input,textarea,select").die().live("keydown.hotkey", function (b) { b.stopPropagation() }); $(window).unbind("keyup.hotkey").bind("keyup.hotkey", function (b) { if (b.keyCode == 91) { b.preventDefault(); Designer.op.isMetaKey = false; return false } }) }, cancel: function () { $(window).unbind("keydown.hotkey") } }, contextMenu: { init: function () { $("#designer_contextmenu").unbind("mousedown").bind("mousedown", function (a) { a.stopPropagation() }); $("#designer_contextmenu").find("li:not(.devider)").unbind("click").bind("click", function () { var a = $(this); if (!a.menuitem("isDisabled") && a.children(".extend_menu").length == 0) { Designer.contextMenu.execAction(a); Designer.contextMenu.hide() } }); $("#canvas_container").unbind("contextmenu").bind("contextmenu", function (b) { b.preventDefault(); if (!b.ctrlKey) { var a = $("#designer_canvas"); var c = Utils.getRelativePos(b.pageX, b.pageY, a); Designer.contextMenu.show(c.x, c.y) console.log("右键") } }) }, destroy: function () { $("#canvas_container").unbind("contextmenu"); this.hide() }, menuPos: { x: 0, y: 0, shape: null }, show: function (i, h) { this.menuPos.x = i; this.menuPos.y = h; var c = $("#designer_contextmenu"); var a = Utils.getShapeByPosition(i, h, false); c.children().hide(); c.children("li[ac=selectall]").show(); c.children(".devi_selectall").show(); c.children("li[ac=drawline]").show(); var b = Designer.clipboard.elements.length; if (b == 0) { if (localStorage.clipboard) { var d = JSON.parse(localStorage.clipboard); b = d.length } } if (a == null) { if (b > 0) { c.children("li[ac=paste]").show(); c.children(".devi_clip").show() } } else { var f = a.shape; this.menuPos.shape = f; if (f.locked) { if (b > 0) { c.children("li[ac=paste]").show(); c.children(".devi_clip").show() } c.children("li[ac=unlock]").show(); c.children(".devi_shape").show() } else { c.children("li[ac=cut]").show(); c.children("li[ac=copy]").show(); c.children("li[ac=duplicate]").show(); if (b > 0) { c.children("li[ac=paste]").show() } c.children(".devi_clip").show(); c.children("li[ac=front]").show(); c.children("li[ac=back]").show(); c.children("li[ac=lock]").show(); var g = Utils.getSelectedIds(); var e = g.length; if (e >= 2) { c.children("li[ac=group]").show(); $("#ctxmenu_align").show() } var j = Utils.getSelectedGroups().length; if (j >= 1) { c.children("li[ac=ungroup]").show() } c.children(".devi_shape").show(); if (e == 1 && f.name != "linker" && f.link) { c.children("li[ac=changelink]").show() } if (f.name == "linker" || (f.textBlock && f.textBlock.length > 0)) { c.children("li[ac=edit]").show() } c.children("li[ac=delete]").show(); c.children(".devi_del").show() } } try { if (showMenu && typeof (showMenu) == "function") showMenu(c); } catch (e) { } c.css({ display: "block", "z-index": Model.orderList.length + 3, left: i, top: h }); $(document).bind("mousedown.ctxmenu", function () { Designer.contextMenu.hide() }) }, hide: function () { $("#designer_contextmenu").hide(); $(document).unbind("mousedown.ctxmenu") }, execAction: function (a) { var b = a.attr("ac"); if (b == "cut") { Designer.clipboard.cut() } else { if (b == "copy") { Designer.clipboard.copy() } else { if (b == "paste") { Designer.clipboard.paste(this.menuPos.x, this.menuPos.y) } else { if (b == "duplicate") { Designer.clipboard.duplicate() } else { if (b == "front") { Designer.layerShapes("front") } else { if (b == "back") { Designer.layerShapes("back") } else { if (b == "lock") { Designer.lockShapes() } else { if (b == "unlock") { Designer.unlockShapes() } else { if (b == "group") { Designer.group() } else { if (b == "ungroup") { Designer.ungroup() } else { if (b == "align_shape") { var c = a.attr("al"); Designer.alignShapes(c) } else { if (b == "edit") { Designer.op.editShapeText(this.menuPos.shape, this.menuPos) } else { if (b == "delete") { Designer.op.removeShape() } else { if (b == "selectall") { Designer.selectAll() } else { if (b == "drawline") { Designer.op.changeState("creating_free_linker") } else { if (b == "changelink") { UI.showInsertLink() } } } } } } } } } } } } } } } } } }, init: function () { this.initialize.initLayout(); this.initialize.initModel(); if (localRuntime == false) { this.initialize.initCanvas() } this.initialize.initShapes(); this.hotkey.init(); this.contextMenu.init(); Designer.op.init(); this.initialize.initialized = true; Designer.events.push("initialized"); $("#designer_layout").on("scroll", function () { $(document).trigger("mouseup.multiselect") }); }, op: { init: function () { var b = $("#designer_canvas"); var a = $("#canvas_container"); a.unbind("mousemove.operate").bind("mousemove.operate", function (g) { if (Designer.op.state != null) { return } Designer.op.destroy(); var f = Utils.getRelativePos(g.pageX, g.pageY, b); var c = Utils.getShapeByPosition(f.x, f.y); if (c != null) { if (c.type == "dataAttribute") { Designer.op.linkClickable(c.attribute.value, f) } else { if (c.type == "linker") { a.css("cursor", "pointer"); Designer.op.shapeSelectable(c.shape); var e = c.shape; var d = c.pointIndex; if (e.linkerType == "broken" && d > 1 && d <= e.points.length) { Designer.op.brokenLinkerChangable(e, d - 1) } else { if (e.from.id == null && e.to.id == null) { a.css("cursor", "move"); Designer.op.shapeDraggable() } } Designer.op.linkerClickable(e) } else { if (c.type == "linker_point") { a.css("cursor", "move"); Designer.op.shapeSelectable(c.shape); Designer.op.linkerDraggable(c.shape, c.point); Designer.op.linkerEditable(c.shape) } else { if (c.type == "linker_text") { a.css("cursor", "text"); Designer.op.shapeSelectable(c.shape); Designer.op.linkerEditable(c.shape) } else { if (c.type == "shape") { if (c.shape.locked) { a.css("cursor", "default"); Designer.op.shapeSelectable(c.shape); } else { a.css("cursor", "move"); Designer.op.shapeSelectable(c.shape); Designer.op.shapeClickable(c.shape); Designer.op.shapeEditable(c.shape); Designer.op.shapeDraggable(); if (c.shape.link) { Designer.op.linkClickable(c.shape.link, f) } } } else { a.css("cursor", "crosshair"); Designer.op.shapeSelectable(c.shape); Designer.op.shapeLinkable(c.shape, c.linkPoint) } if (c.shape.parent) { Utils.showAnchors(Model.getShapeById(c.shape.parent)) } else { Utils.showAnchors(c.shape) } } } } } } else { a.css("cursor", "default"); Designer.op.shapeMultiSelectable() } }) }, cancel: function () { $("#canvas_container").unbind("mousemove.operate").css("cursor", "default"); this.destroy() }, destroy: function () { $("#designer_canvas").unbind("mousedown.drag").unbind("dblclick.edit").unbind("mousedown.draglinker").unbind("mousedown.select").unbind("mousedown.brokenLinker").unbind("dblclick.edit_linker"); $("#canvas_container").unbind("mousedown.link").unbind("mousedown.create_text").unbind("mousedown.drag_canvas"); $("#designer_layout").unbind("mousedown.multiselect"); Utils.hideAnchors(); $("#link_spot").hide() }, state: null, changeState: function (a) { this.state = a; if (a == "creating_free_text") { this.destroy(); $("#canvas_container").css("cursor", "crosshair"); this.textCreatable() } else { if (a == "creating_free_linker") { this.destroy(); $("#canvas_container").css("cursor", "crosshair"); this.shapeLinkable() } else { if (a == "drag_canvas") { this.destroy(); this.canvasDraggable() } else { if (a == "changing_curve") { this.destroy() } } } } }, resetState: function () { this.state = null; $("#canvas_container").css("cursor", "default") }, shapeSelectable: function (a) { // console.log("选择了组件"); var b = $("#designer_canvas"); b.bind("mousedown.select", function (d) { Designer.op.changeState("seelcting_shapes"); var e = a.id; var c = []; if (d.ctrlKey) { var c = Utils.getSelectedIds(); if (Utils.isSelected(e)) { Utils.removeFromArray(c, e) } else { c.push(e) } Utils.unselect(); if (c.length > 0) { Utils.selectShape(c) } } else { if (Utils.selectIds.indexOf(e) < 0) { Utils.unselect(); Utils.selectShape(e) } } $(document).bind("mouseup.select", function () { Designer.op.resetState(); b.unbind("mousedown.select"); $(document).unbind("mouseup.select") }) }) }, isMetaKey: false, shapeDraggable: function () { var c = $("#designer_canvas"); var b = $("#canvas_container"); var a = false; c.bind("mousedown.drag", function (f) { Utils.hideLinkerCursor(); Utils.hideLinkerControls(); Designer.op.changeState("dragging"); var r = Utils.getSelected(); var u = Utils.getRelativePos(f.pageX, f.pageY, c); var q = true; if (r.length == 1 && r[0].name == "linker") { q = false } var l = null; if (q) { l = Utils.getShapesBounding(r) } var p = Utils.getFamilyShapes(r); r = r.concat(p); var n = Utils.getContainedShapes(r); r = r.concat(n); var x = Utils.getAttachedShapes(r); r = r.concat(x); var j = Utils.getCollapsedShapes(r); r = r.concat(j); var d = []; if (q) { for (var t = 0; t < r.length; t++) { var h = r[t]; if (h.name == "linker") { if (h.from.id && d.indexOf(h.from.id) < 0) { d.push(h.from.id) } if (h.to.id && d.indexOf(h.to.id) < 0) { d.push(h.to.id) } } if (d.indexOf(h.id) < 0) { d.push(h.id) } } } var w = r; if (r.length == 0) { c.unbind("mousedown.drag"); return } var e = Utils.getOutlinkers(r); r = r.concat(e); var s = []; for (var v = 0; v < r.length; v++) { var h = r[v]; s.push(h.id) } var g = Model.define.page.width.toScale(); var m = Model.define.page.height.toScale(); var k = w[0].props.w; var o = w[0].props.h; b.bind("mousemove.drag", function (B) { if (Designer.op.isMetaKey) { if (a == false) { Designer.clipboard.copy(); Designer.clipboard.paste(); r = Utils.getSelected(); a = true } } UI.hideShapeOptions(); var A = Utils.getRelativePos(B.pageX, B.pageY, c); var D = { x: A.x - u.x, y: A.y - u.y }; var i = null; if (q) { var E = Utils.copy(l); E.x += D.x; E.y += D.y; var C = Designer.op.snapLine(E, d); D = { x: E.x - l.x, y: E.y - l.y }; A = { x: u.x + D.x, y: u.y + D.y }; l.x += D.x; l.y += D.y; if (w.length == 1 && w[0].groupName == "boundaryEvent") { if (C.attach) { w[0].attachTo = C.attach.id } else { delete r[0].attachTo } } if (C.container) { i = C.container } } if (D.x == 0 && D.y == 0) { return } for (var z = 0; z < r.length; z++) { var y = r[z]; if (y.name == "linker") { continue } else { if (y.container && s.indexOf(y.container) >= 0) { continue } } if (i) { y.container = i.id } else { delete y.container } } Designer.op.moveShape(r, D); u = A; $(document).unbind("mouseup.drop").bind("mouseup.drop", function () { Model.updateMulti(r); $(document).unbind("mouseup.drop") }) }); $(document).bind("mouseup.drag", function () { Designer.op.isMetaKey = false; a = false; UI.showShapeOptions(); Designer.op.resetState(); b.unbind("mousemove.drag"); c.unbind("mousedown.drag"); $(document).unbind("mouseup.drag"); Designer.op.hideTip(); Designer.op.hideSnapLine(); Utils.showLinkerCursor(); Utils.showLinkerControls(); if (Model.define.page.orientation == "portrait" && Designer.config.scale == 1) { if (u.x + k / 2 > g) { Designer.setPageStyle({ width: g + 120 }) } if (u.y + o / 2 > m) { Designer.setPageStyle({ height: m + 120 }) } } }) }) }, changeSpacing: function (n, c) { var j = Utils.getSelectedIds(); var r = Utils.getSelected(); Utils.hideLinkerCursor(); var l = $("#canvas_container"); var f = $("#designer_canvas"); var q = Utils.getControlBox(j); var y = n.attr("resizeDir"); var x = {}; if (y.indexOf("l") >= 0) { x.x = q.x + q.w } else { if (y.indexOf("r") >= 0) { x.x = q.x } else { x.x = q.x + q.w / 2 } } if (y.indexOf("t") >= 0) { x.y = q.y + q.h } else { if (y.indexOf("b") >= 0) { x.y = q.y } else { x.y = q.y + q.h / 2 } } function v(i, C) { if (i.id == null) { if (C) { return { type: "box", x: (i.x - q.x) / q.w, y: (i.y - q.y) / q.h } } else { return { type: "fixed" } } } else { if (Utils.isSelected(i.id)) { var A = Model.getShapeById(i.id); var B = { x: A.props.x + A.props.w / 2, y: A.props.y + A.props.h / 2 }; var p = Utils.getRotated(B, i, -A.props.angle); return { type: "shape", x: (p.x - A.props.x) / A.props.w, y: (p.y - A.props.y) / A.props.h } } else { return { type: "fixed" } } } } var h = []; var a = {}; var e = []; var z = Utils.getAttachedShapes(r); r = r.concat(z); var s = []; var b = { w: 20, h: 20 }; for (var u = 0; u < r.length; u++) { var d = r[u]; s.push(d.id); if (d.parent) { s.push(d.parent) } if (d.name == "linker") { if (e.indexOf(d.id) == -1) { e.push(d.id) } } else { h.push(d); if (d.props.w > b.w) { b.w = d.props.w } if (d.props.h > b.h) { b.h = d.props.h } if (d.attachTo && !Utils.isSelected(d.id)) { a[d.id] = { type: "attached", x: (d.props.x + d.props.w / 2 - q.x) / q.w, y: (d.props.y + d.props.h / 2 - q.y) / q.h } } else { a[d.id] = { x: (d.props.x - q.x) / q.w, y: (d.props.y - q.y) / q.h } } var t = Model.getShapeLinkers(d.id); if (t && t.length > 0) { for (var k = 0; k < t.length; k++) { var o = t[k]; if (e.indexOf(o) == -1) { e.push(o) } } } } } for (var u = 0; u < e.length; u++) { var o = e[u]; var m = Model.getShapeById(o); h.push(m); var r = Utils.isSelected(o); a[m.id] = { from: v(m.from, r), to: v(m.to, r) } } var g = n.css("cursor"); l.css("cursor", g); var w = []; Designer.events.push("beforeResize", { minSize: b, shapes: h, dir: y }); l.bind("mousemove.resize", function (A) { UI.hideShapeOptions(); w = []; var B = Utils.getRelativePos(A.pageX, A.pageY, f); B = Utils.restoreScale(B); var D = Utils.copy(q); if (y.indexOf("r") >= 0) { D.w = B.x - x.x } else { if (y.indexOf("l") >= 0) { D.w = x.x - B.x } } if (y.indexOf("b") >= 0) { D.h = B.y - x.y } else { if (y.indexOf("t") >= 0) { D.h = x.y - B.y } } if (D.w < b.w) { D.w = b.w } if (D.h < b.h) { D.h = b.h } if (y.indexOf("l") >= 0) { D.x = x.x - D.w } if (y.indexOf("t") >= 0) { D.y = x.y - D.h } Utils.removeAnchors(); for (var E = 0; E < h.length; E++) { var H = h[E]; var G = a[H.id]; if (H.name != "linker") { if (G.type == "attached") { H.props.x = D.x + D.w * G.x - H.props.w / 2; H.props.y = D.y + D.h * G.y - H.props.h / 2 } else { H.props.x = D.x + D.w * G.x; H.props.y = D.y + D.h * G.y; Designer.painter.renderShape(H); Utils.showAnchors(H) } } else { if (G.from.type == "box") { H.from.x = D.x + D.w * G.from.x; H.from.y = D.y + D.h * G.from.y } else { if (G.from.type == "shape") { var p = Model.getShapeById(H.from.id); var J = { x: p.props.x + p.props.w * G.from.x, y: p.props.y + p.props.h * G.from.y }; var F = { x: p.props.x + p.props.w / 2, y: p.props.y + p.props.h / 2 }; var C = Utils.getRotated(F, J, p.props.angle); H.from.x = C.x; H.from.y = C.y } } if (G.to.type == "box") { H.to.x = D.x + D.w * G.to.x; H.to.y = D.y + D.h * G.to.y } else { if (G.to.type == "shape") { var p = Model.getShapeById(H.to.id); var J = { x: p.props.x + p.props.w * G.to.x, y: p.props.y + p.props.h * G.to.y }; var F = { x: p.props.x + p.props.w / 2, y: p.props.y + p.props.h / 2 }; var C = Utils.getRotated(F, J, p.props.angle); H.to.x = C.x; H.to.y = C.y } } Designer.painter.renderLinker(H, true) } } Designer.painter.drawControls(j); var I = "W: " + Math.round(D.w) + " H: " + Math.round(D.h); if (D.x != q.x) { I = "X: " + Math.round(D.x) + " Y: " + Math.round(D.y) + "
" + I } Designer.op.showTip(I); $(document).unbind("mouseup.resize_ok").bind("mouseup.resize_ok", function () { if (w.length > 0) { h = h.concat(w) } if (y.indexOf("t") >= 0 || y.indexOf("l") >= 0) { for (var M = 0; M < h.length; M++) { var L = h[M]; if (L.attribute && L.attribute.collapsed) { var O = Utils.getCollapsedShapesById(L.id); if (O.length > 0) { var N = Utils.getOutlinkers(O); O = O.concat(N); var K = Model.getPersistenceById(L.id); var i = L.props.x - K.props.x; var P = L.props.y - K.props.y; Designer.op.moveShape(O, { x: i, y: P }, true); h = h.concat(O) } } } Designer.painter.drawControls(j) } Model.updateMulti(h); $(document).unbind("mouseup.resize_ok") }) }); $(document).bind("mouseup.resize", function () { UI.showShapeOptions(); l.css("cursor", "default"); Designer.op.resetState(); l.unbind("mousemove.resize"); $(document).unbind("mouseup.resize"); Designer.op.hideTip(); Utils.showLinkerCursor(); Designer.op.hideSnapLine() }) }, shapeResizable: function () { $(".shape_controller").bind("mousedown", function (c) { c.stopPropagation(); Designer.op.changeState("resizing"); var j = Utils.getSelectedIds(); var r = Utils.getSelected(); if ($("#shape_text_edit").length > 0) { if (r[0].name != "cls" && r[0].name != "interface") { var v = $("#shape_text_edit").val(); r[0].textBlock[0].text = v } } Utils.hideLinkerCursor(); var l = $("#canvas_container"); var f = $("#designer_canvas"); var n = $(this); var q; if (j.length == 1) { var d = Model.getShapeById(j[0]); q = Utils.copy(d.props) } else { q = Utils.getControlBox(j); q.angle = 0 } var z = { x: q.x + q.w / 2, y: q.y + q.h / 2 }; var A = n.attr("resizeDir"); var y = {}; if (A.indexOf("l") >= 0) { y.x = q.x + q.w } else { if (A.indexOf("r") >= 0) { y.x = q.x } else { y.x = q.x + q.w / 2 } } if (A.indexOf("t") >= 0) { y.y = q.y + q.h } else { if (A.indexOf("b") >= 0) { y.y = q.y } else { y.y = q.y + q.h / 2 } } y = Utils.getRotated(z, y, q.angle); function w(i, E) { if (i.id == null) { if (E) { return { type: "box", x: (i.x - q.x) / q.w, y: (i.y - q.y) / q.h } } else { return { type: "fixed" } } } else { if (Utils.isSelected(i.id)) { var C = Model.getShapeById(i.id); var D = { x: C.props.x + C.props.w / 2, y: C.props.y + C.props.h / 2 }; var p = Utils.getRotated(D, i, -C.props.angle); return { type: "shape", x: (p.x - C.props.x) / C.props.w, y: (p.y - C.props.y) / C.props.h } } else { return { type: "fixed" } } } } var h = []; var b = {}; var e = []; var B = Utils.getAttachedShapes(r); r = r.concat(B); var s = []; for (var u = 0; u < r.length; u++) { var d = r[u]; s.push(d.id); if (d.parent) { s.push(d.parent) } if (d.name == "linker") { if (e.indexOf(d.id) == -1) { e.push(d.id) } } else { h.push(d); if (d.attachTo && !Utils.isSelected(d.id)) { b[d.id] = { type: "attached", x: (d.props.x + d.props.w / 2 - q.x) / q.w, y: (d.props.y + d.props.h / 2 - q.y) / q.h } } else { b[d.id] = { x: (d.props.x - q.x) / q.w, y: (d.props.y - q.y) / q.h, w: d.props.w / q.w, h: d.props.h / q.h } } var t = Model.getShapeLinkers(d.id); if (t && t.length > 0) { for (var k = 0; k < t.length; k++) { var o = t[k]; if (e.indexOf(o) == -1) { e.push(o) } } } } } for (var u = 0; u < e.length; u++) { var o = e[u]; var m = Model.getShapeById(o); h.push(m); var r = Utils.isSelected(o); b[m.id] = { from: w(m.from, r), to: w(m.to, r) } } var g = n.css("cursor"); l.css("cursor", g); var x = []; var a = { w: 20, h: 20 }; Designer.events.push("beforeResize", { minSize: a, shapes: h, dir: A }); l.bind("mousemove.resize", function (X) { UI.hideShapeOptions(); x = []; var G = Utils.getRelativePos(X.pageX, X.pageY, f); G = Utils.restoreScale(G); var O = Utils.getRotated(y, G, -q.angle); var D = Utils.copy(q); if (A.indexOf("r") >= 0) { D.w = O.x - y.x } else { if (A.indexOf("l") >= 0) { D.w = y.x - O.x } } if (A.indexOf("b") >= 0) { D.h = O.y - y.y } else { if (A.indexOf("t") >= 0) { D.h = y.y - O.y } } if (X.ctrlKey && A.length == 2) { if (q.w >= q.h) { D.h = q.h / q.w * D.w; if (D.h < a.h) { D.h = a.h; D.w = q.w / q.h * D.h } } else { D.w = q.w / q.h * D.h; if (D.w < a.w) { D.w = a.w; D.h = q.h / q.w * D.w } } } else { if (D.w < a.w) { D.w = a.w } if (D.h < a.h) { D.h = a.h } } var U = {}; if (A.indexOf("r") >= 0) { U.x = y.x + D.w } else { if (A.indexOf("l") >= 0) { U.x = y.x - D.w } else { U.x = y.x } } if (A.indexOf("b") >= 0) { U.y = y.y + D.h } else { if (A.indexOf("t") >= 0) { U.y = y.y - D.h } else { U.y = y.y } } var K = Utils.getRotated(y, U, q.angle); var M = { x: 0.5 * y.x + 0.5 * K.x, y: 0.5 * y.y + 0.5 * K.y }; var S = Utils.getRotated(M, y, -q.angle); if (A.indexOf("r") >= 0) { D.x = S.x } else { if (A.indexOf("l") >= 0) { D.x = S.x - D.w } else { D.x = S.x - D.w / 2 } } if (A.indexOf("b") >= 0) { D.y = S.y } else { if (A.indexOf("t") >= 0) { D.y = S.y - D.h } else { D.y = S.y - D.h / 2 } } if (D.angle == 0) { var p = h[0]; var Q = Designer.op.snapResizeLine(D, s, A) } Utils.removeAnchors(); for (var T = 0; T < h.length; T++) { var F = h[T]; var P = b[F.id]; if (F.name == "linker") { if (P.from.type == "box") { F.from.x = D.x + D.w * P.from.x; F.from.y = D.y + D.h * P.from.y } else { if (P.from.type == "shape") { var V = Model.getShapeById(F.from.id); var R = { x: V.props.x + V.props.w * P.from.x, y: V.props.y + V.props.h * P.from.y }; var W = { x: V.props.x + V.props.w / 2, y: V.props.y + V.props.h / 2 }; var H = Utils.getRotated(W, R, V.props.angle); F.from.x = H.x; F.from.y = H.y } } if (P.to.type == "box") { F.to.x = D.x + D.w * P.to.x; F.to.y = D.y + D.h * P.to.y } else { if (P.to.type == "shape") { var V = Model.getShapeById(F.to.id); var R = { x: V.props.x + V.props.w * P.to.x, y: V.props.y + V.props.h * P.to.y }; var W = { x: V.props.x + V.props.w / 2, y: V.props.y + V.props.h / 2 }; var H = Utils.getRotated(W, R, V.props.angle); F.to.x = H.x; F.to.y = H.y } } Designer.painter.renderLinker(F, true) } else { if (P.type == "attached") { F.props.x = D.x + D.w * P.x - F.props.w / 2; F.props.y = D.y + D.h * P.y - F.props.h / 2 } else { var C = Utils.copy(F.props); F.props.x = D.x + D.w * P.x; F.props.y = D.y + D.h * P.y; F.props.w = D.w * P.w; F.props.h = D.h * P.h; var E = Model.getShapeById(F.id).props; E.x = D.x + D.w * P.x; E.y = D.y + D.h * P.y; E.w = D.w * P.w; E.h = D.h * P.h; var J = { x: F.props.x - C.x, y: F.props.y - C.y, w: F.props.w - C.w, h: F.props.h - C.h }; var N = { shape: F, offset: J, dir: A }; var L = Designer.events.push("resizing", N); if (L) { x = x.concat(L) } } Designer.painter.renderShape(F); Utils.showAnchors(F) } } Designer.painter.drawControls(j); var I = "W: " + Math.round(D.w) + " H: " + Math.round(D.h); if (D.x != q.x) { I = "X: " + Math.round(D.x) + " Y: " + Math.round(D.y) + "
" + I } Designer.op.showTip(I); $(document).unbind("mouseup.resize_ok").bind("mouseup.resize_ok", function () { if (x.length > 0) { h = h.concat(x) } if (A.indexOf("t") >= 0 || A.indexOf("l") >= 0) { for (var aa = 0; aa < h.length; aa++) { var Z = h[aa]; if (Z.attribute && Z.attribute.collapsed) { var ac = Utils.getCollapsedShapesById(Z.id); if (ac.length > 0) { var ab = Utils.getOutlinkers(ac); ac = ac.concat(ab); var Y = Model.getPersistenceById(Z.id); var i = Z.props.x - Y.props.x; var ad = Z.props.y - Y.props.y; Designer.op.moveShape(ac, { x: i, y: ad }, true); h = h.concat(ac) } } } Designer.painter.drawControls(j) } Model.updateMulti(h); $(document).unbind("mouseup.resize_ok") }) }); $(document).bind("mouseup.resize", function () { UI.showShapeOptions(); l.css("cursor", "default"); Designer.op.resetState(); l.unbind("mousemove.resize"); $(document).unbind("mouseup.resize"); Designer.op.hideTip(); Utils.showLinkerCursor(); Designer.op.hideSnapLine() }) }) }, shapeRotatable: function () { $(".shape_rotater").bind("mousemove", function (d) { var c = $(this); var a = d.pageX - c.offset().left; var f = d.pageY - c.offset().top; var b = c[0].getContext("2d"); c.unbind("mousedown"); c.removeClass("rotate_enable"); if (b.isPointInPath(a, f)) { c.addClass("rotate_enable"); c.bind("mousedown", function (p) { Utils.hideLinkerCursor(); if ($("#shape_text_edit").length) { $("#shape_text_edit").trigger("blur") } p.stopPropagation(); Designer.op.changeState("rotating"); var l = Utils.getSelectedIds(); var o; var k; if (l.length == 1) { var m = Model.getShapeById(l[0]); o = m.props; k = m.props.angle } else { o = Utils.getControlBox(l); k = 0 } var e = { x: o.x + o.w / 2, y: o.y + o.h / 2 }; var n = Utils.toScale(e); var g = $("#designer_canvas"); var i = Utils.getSelected(); var j = Utils.getAttachedShapes(i); i = i.concat(j); var q = Utils.getOutlinkers(i); i = i.concat(q); var h = k; $(document).bind("mousemove.rotate", function (r) { UI.hideShapeOptions(); var C = Utils.getRelativePos(r.pageX, r.pageY, g); var v = Math.atan(Math.abs(C.x - n.x) / Math.abs(n.y - C.y)); if (C.x >= n.x && C.y >= n.y) { v = Math.PI - v } else { if (C.x <= n.x && C.y >= n.y) { v = Math.PI + v } else { if (C.x <= n.x && C.y <= n.y) { v = Math.PI * 2 - v } } } v = v % (Math.PI * 2); var D = Math.PI / 36; var A = Math.round(v / D); v = D * A; if (v == h) { return } h = v; Designer.op.showTip(A * 5 % 360 + "°"); Designer.painter.rotateControls(o, v); Utils.removeAnchors(); var E = v - k; for (var w = 0; w < i.length; w++) { var y = i[w]; var u = Model.getPersistenceById(y.id); if (y.name != "linker") { y.props.angle = Math.abs((E + u.props.angle) % (Math.PI * 2)); var x = { x: u.props.x + u.props.w / 2, y: u.props.y + u.props.h / 2 }; var B = Utils.getRotated(e, x, E); y.props.x = B.x - y.props.w / 2; y.props.y = B.y - y.props.h / 2; Designer.painter.renderShape(y); Utils.showAnchors(y) } else { var z = false; if ((Utils.isSelected(y.id) && y.from.id == null) || Utils.isSelected(y.from.id)) { var s = Utils.getRotated(e, u.from, E); y.from.x = s.x; y.from.y = s.y; if (y.from.angle != null) { y.from.angle = Math.abs((u.from.angle + E) % (Math.PI * 2)) } z = true } var t = false; if ((Utils.isSelected(y.id) && y.to.id == null) || Utils.isSelected(y.to.id)) { var s = Utils.getRotated(e, u.to, E); y.to.x = s.x; y.to.y = s.y; if (y.to.angle != null) { y.to.angle = Math.abs((u.to.angle + E) % (Math.PI * 2)) } t = true } if (z || t) { Designer.painter.renderLinker(y, true) } } } }).bind("mouseup.rotate", function () { UI.showShapeOptions(); $(document).unbind("mousemove.rotate").unbind("mouseup.rotate"); Designer.op.resetState(); Model.updateMulti(i); Designer.painter.drawControls(l); Designer.op.hideTip(); Utils.showLinkerCursor() }) }) } else { c.removeClass("rotate_enable"); c.unbind("mousedown") } }) }, groupShapeChangable: function () { $(".change_shape_icon").bind("mousedown", function (f) { f.stopPropagation(); var a = Utils.getSelected()[0]; var h = a.groupName; var d = $(this).parent(); var g = d.position(); var c = g.left + d.width(); var b = g.top + d.height() + 10; Designer.op.groupDashboard(h, c, b, function (e) { if (a.name != e) { var i = Designer.events.push("shapeChanged", { shape: a, name: e }); Model.changeShape(a, e); var j = [a]; if (i && i.length > 0) { j = j.concat(i) } Model.updateMulti(j) } }) }) }, shapeMultiSelectable: function () { var a = $("#designer_canvas"); var b = $("#designer_layout"); b.unbind("mousedown.multiselect").bind("mousedown.multiselect", function (e) { var d = null; if (!e.ctrlKey) { Utils.unselect() } var c = Utils.getRelativePos(e.pageX, e.pageY, a); Designer.op.changeState("multi_selecting"); b.bind("mousemove.multiselect", function (g) { if (d == null) { d = $("").appendTo(a) } var f = Utils.getRelativePos(g.pageX, g.pageY, a); var h = { "z-index": Model.orderList.length, left: f.x, top: f.y }; if (f.x > c.x) { h.left = c.x } if (f.y > c.y) { h.top = c.y } h.width = Math.abs(f.x - c.x); h.height = Math.abs(f.y - c.y); d.css(h) }); $(document).unbind("mouseup.multiselect").bind("mouseup.multiselect", function (h) { if (d != null) { var f = { x: d.position().left.restoreScale(), y: d.position().top.restoreScale(), w: d.width().restoreScale(), h: d.height().restoreScale() }; var i = Utils.getShapesByRange(f); if (h.ctrlKey) { var g = Utils.getSelectedIds(); Utils.mergeArray(i, g) } Utils.unselect(); Utils.selectShape(i); d.remove() } Designer.op.resetState(); $(document).unbind("mouseup.multiselect"); b.unbind("mousemove.multiselect") }); b.unbind("mousedown.multiselect") }) }, shapeEditable: function (a) { var b = $("#designer_canvas"); b.unbind("dblclick.edit").bind("dblclick.edit", function (c) { b.unbind("dblclick.edit"); var d = Utils.getRelativePos(c.pageX, c.pageY, b); console.log("双击了组件"); parent.postMessage(JSON.stringify({ code: 1, value: a }), '*'); //window.postMessage // Designer.op.editShapeText(a, d) }) }, shapeClickable: function (a) { var b = $("#designer_canvas"); b.unbind("click").bind("click", function (c) { b.unbind("click"); var d = Utils.getRelativePos(c.pageX, c.pageY, b); console.log("单击了组件"); Designer.op.editShapeText(a, d); var uiData = JSON.parse(localStorage.def_local_1); var fromNode = {}; for (const key in uiData) { if (uiData.hasOwnProperty(key)) { const element = uiData[key]; if (element.name == 'linker') { if (element.to.id == a.id) { fromNode = uiData[element.from.id]; } } } } parent.postMessage(JSON.stringify({ code: 0, value: a, from: fromNode }), '*'); //window.postMessage }) }, linkerClickable: function (a) { var b = $("#designer_canvas"); b.unbind("click").bind("click", function (c) { b.unbind("click"); var d = Utils.getRelativePos(c.pageX, c.pageY, b); console.log("单击了连线"); //判断是否条件控制节点下面的连线 var isControl_linker = false; var def_local_1_data = JSON.parse(localStorage.def_local_1); for (const key in def_local_1_data.elements) { if (def_local_1_data.elements.hasOwnProperty(key)) { const element = def_local_1_data.elements[key]; if (key === a.from.id) { if (element.name == 'control') { Designer.op.editShapeText(a, d); isControl_linker = true; parent.postMessage(JSON.stringify({ code: 0, value: a }), '*'); //window.postMessage } } } } if (!isControl_linker) parent.postMessage(JSON.stringify({ code: -1, value: a }), '*');//如果不是控制节点的连线，那就隐藏右边所有的属性面板 }) }, editShapeText: function (a, h) { console.log("a = ", a); console.log("h = ", h); // parent.postMessage('来自iframe的信息 我新建或者双击了组件 当前双击的组件类型是' + a, '*'); //window.postMessage if (a.name == "linker") { // this.editLinkerText(a); return } if (!a.textBlock || a.textBlock.length == 0) { return } if (a) { try { if (nodeConf && typeof (nodeConf) == "function") nodeConf(a); } catch (e) { } return; } var g = a.getTextBlock(); var j = 0; if (h) { h.x = h.x.restoreScale(); h.y = h.y.restoreScale(); if (a.props.angle != 0) { var s = { x: a.props.x + a.props.w / 2, y: a.props.y + a.props.h / 2 }; h = Utils.getRotated(s, h, -a.props.angle) } var f = h.x - a.props.x; var e = h.y - a.props.y; for (var o = 0; o < g.length; o++) { var l = g[o]; if (Utils.pointInRect(f, e, l.position)) { j = o; break } } } Designer.contextMenu.hide(); var n = $("#shape_text_edit"); if (n.length == 0) { n = $("").appendTo("#designer_canvas") } var m = $("#shape_text_ruler"); if (m.length == 0) { m = $("").appendTo("#designer_canvas") } $(".text_canvas[forshape=" + a.id + "][ind=" + j + "]").hide(); var r = g[j]; var t = a.textBlock[j]; var b = Utils.getShapeFontStyle(a.fontStyle); b = $.extend({}, b, r.fontStyle); var p = r.position; if (b.orientation == "horizontal") { var k = { x: p.x + p.w / 2, y: p.y + p.h / 2 }; p = { x: k.x - p.h / 2, y: k.y - p.w / 2, w: p.h, h: p.w } } var q = { width: p.w + "px", "z-index": Model.orderList.length + 2, "line-height": Math.round(b.size * 1.25) + "px", "font-size": b.size + "px", "font-family": b.fontFamily, "font-weight": b.bold ? "bold" : "normal", "font-style": b.italic ? "italic" : "normal", "text-align": b.textAlign, color: "rgb(" + b.color + ")", "text-decoration": b.underline ? "underline" : "none" }; n.css(q); m.css(q); n.show(); p.x += a.props.x; p.y += a.props.y; n.val(r.text); var d = 0; $("#shape_text_edit").unbind().bind("keyup", function () { var B = $(this).val(); m.val(B); m.scrollTop(99999); d = m.scrollTop(); n.css({ height: d }); var v = { x: p.x + p.w / 2, y: p.y + p.h / 2 }; var w = 0; var y = 0; var D = p.h; if (b.vAlign == "middle") { if (d > D) { D = d; w = (v.y - D / 2); y = 0 } else { w = (v.y - p.h / 2); y = (p.h - d) / 2; D = p.h - y } } else { if (b.vAlign == "bottom") { if (d > D) { D = d; w = (v.y + p.h / 2 - D); y = 0 } else { w = (v.y - p.h / 2); y = p.h - d; D = p.h - y } } else { w = (v.y - p.h / 2); y = 0; if (d > D) { D = d } else { D = p.h } } } var C = y + D; var A = { x: p.x + p.w / 2, y: w + C / 2 }; var z = a.props.angle; if (z != 0) { var i = { x: a.props.x + a.props.w / 2, y: a.props.y + a.props.h / 2 }; A = Utils.getRotated(i, A, z) } if (b.orientation == "horizontal") { z = (Math.PI * 1.5 + z) % (Math.PI * 2) } var u = Math.round(z / (Math.PI * 2) * 360); var x = "rotate(" + u + "deg) scale(" + Designer.config.scale + ")"; n.css({ width: p.w, height: D, "padding-top": y, left: A.x.toScale() - p.w / 2 - 2, top: A.y.toScale() - C / 2 - 2, "-webkit-transform": x, "-ms-transform": x, "-o-transform": x, "-moz-transform": x, transform: x }) }).bind("keydown", function (w) { var i = $(this); if (w.keyCode == 13 && w.ctrlKey) { c(); return false } else { if (w.keyCode == 27) { i.unbind().remove(); $(".text_canvas[forshape=" + a.id + "][ind=" + j + "]").show() } else { if (w.keyCode == 66 && w.ctrlKey) { var u = !b.bold; if (a.textBlock.length == 1) { a.fontStyle.bold = u } else { t.fontStyle = $.extend(t.fontStyle, { bold: u }) } b.bold = u; Model.update(a); var v = u ? "bold" : "normal"; $(this).css("font-weight", v); m.css("font-weight", v); UI.update(); w.preventDefault() } else { if (w.keyCode == 73 && w.ctrlKey) { var u = !b.italic; if (a.textBlock.length == 1) { a.fontStyle.italic = u } else { t.fontStyle = $.extend(t.fontStyle, { italic: u }) } b.italic = u; Model.update(a); var v = u ? "italic" : "normal"; $(this).css("font-style", v); m.css("font-style", v); UI.update(); w.preventDefault() } else { if (w.keyCode == 85 && w.ctrlKey) { var u = !b.underline; if (a.textBlock.length == 1) { a.fontStyle.underline = u } else { t.fontStyle = $.extend(t.fontStyle, { underline: u }) } b.underline = u; Model.update(a); var v = u ? "underline" : "none"; $(this).css("text-decoration", v); m.css("text-decoration", v); w.preventDefault(); UI.update(); w.preventDefault() } } } } } }).bind("blur", function (i) { c() }).bind("mousemove", function (i) { i.stopPropagation() }).bind("mousedown", function (i) { i.stopPropagation() }).bind("mouseenter", function (i) { Designer.op.destroy() }); $("#shape_text_edit").trigger("keyup"); n.select(); function c() { var i = $("#shape_text_edit").val(); if ($("#shape_text_edit").length && $("#shape_text_edit").is(":visible")) { if (i != t.text) { t.text = i; if (a.name == "interface" || a.name == "cls") { Designer.op.shapeChangeHeight(a, j, d, i) } Model.update(a) } Designer.painter.renderShape(a); $("#shape_text_edit").remove() } } }, shapeChangeHeight: function (f, d, a, i) { if (f.name == "interface") { if (d == 1) { a = a < 30 ? 30 : a; var b = f.props.h - f.textBlock[0].position.h; f.props.h += a - b } else { if (d == 0) { a = a < 30 ? 30 : a; var c = "h-" + a; f.props.h += (a - f.path[1].actions[0].y); f.path[1].actions[0].y = a; f.path[1].actions[1].y = a; f.textBlock[0].position.h = a; f.textBlock[1].position.y = a; f.textBlock[1].position.h = c } } Schema.initShapeFunctions(f) } else { if (f.name == "cls") { var h = Number(f.textBlock[0].position.h); var g = f.textBlock[1].position.h + ""; var e = f.textBlock[2].position.h + ""; if (g.indexOf("h") >= 0) { g = (f.props.h - h) / 2 } if (e.indexOf("h") >= 0) { e = (f.props.h - h) / 2 } g = Number(g); e = Number(e); a = a < 30 ? 30 : a; if (d == 0) { var j = a - h; if (j == 0) { return } f.props.h = a + g + e; f.textBlock[0].position.h = a; f.textBlock[1].position.y = a; f.textBlock[1].position.h = (f.props.h - a) / 2; f.textBlock[2].position.y = (f.props.h - a) / 2 + a; f.textBlock[2].position.h = (f.props.h - a) / 2; f.path[1].actions[0].y = a; f.path[1].actions[1].y = a; f.path[1].actions[2].y = f.props.h / 2 + a / 2; f.path[1].actions[3].y = f.props.h / 2 + a / 2 } if (d == 1) { var j = a - g; if (j == 0) { return } f.props.h += j; f.textBlock[1].position.h = a; f.textBlock[1].position.y = h; f.textBlock[2].position.y = h + a + 2; f.textBlock[2].position.h = f.props.h - a - h; f.path[1].actions[0].y = h; f.path[1].actions[1].y = h; f.path[1].actions[2].y = h + a + 2; f.path[1].actions[3].y = h + a + 2 } else { if (d == 2) { var j = a - e; if (j == 0) { return } f.props.h = a + g + h; f.textBlock[1].position.h = g; f.path[1].actions[2].y = h + g; f.path[1].actions[3].y = h + g; f.textBlock[2].position.y = Number(h) + Number(g); f.textBlock[2].position.h = a } } Schema.initShapeFunctions(f) } } }, shapeLinkable: function (c, a) { var d = $("#designer_canvas"); var b = $("#canvas_container"); b.unbind("mousedown.link").bind("mousedown.link", function (h) { Designer.op.changeState("linking_from_shape"); var f = null; var g = null; var j; if (!c) { var i = Utils.getRelativePos(h.pageX, h.pageY, d); j = { x: i.x.restoreScale(), y: i.y.restoreScale(), id: null, angle: null } } else { j = a; j.id = c.id } b.bind("mousemove.link", function (l) { b.css("cursor", "default"); var k = Utils.getRelativePos(l.pageX, l.pageY, d); if (g == null) { g = e(j, k); Designer.events.push("linkerCreating", g) } Designer.op.moveLinker(g, "to", k.x, k.y); $(document).unbind("mouseup.droplinker").bind("mouseup.droplinker", function () { if (Math.abs(k.x - j.x) > 20 || Math.abs(k.y - j.y) > 20) { Model.add(g); Designer.events.push("linkerCreated", g); if (g.to.id == null && g.from.id != null) { Designer.op.linkDashboard(g) } Utils.showLinkerCursor() } else { $("#" + g.id).remove() } Designer.op.hideSnapLine(); $(document).unbind("mouseup.droplinker") }) }); $(document).bind("mouseup.link", function () { Designer.op.hideLinkPoint(); Designer.op.resetState(); b.unbind("mousedown.link"); b.unbind("mousemove.link"); $(document).unbind("mouseup.link"); //判断组件之间关联 if (!g || g == null || !g.from || g.from == null) return; var from = Model.getShapeById(g.from.id); var to = Model.getShapeById(g.to.id); console.log("连接线"); console.log("to", to); console.log("from", from); console.log(JSON.parse(localStorage.def_local_1)); var linked = false; if (from && from.selected && from.selected.length > 0) { $.each(from.selected, function () { var name = this; if (to && name == to.name) { linked = true; return false; } }); } else { linked = false; } if (!linked && to) { Utils.unselect(); $('.shape_dashboard.menu').remove(); Model.add(g); Utils.selectShape(g.id) setTimeout(Designer.op.removeShape); UI.showTip('节点之间无关联!'); console.warn("节点之间无关联!"); } }) }); function e(j, i) { console.log("创建linker"); console.log('j = ', j); console.log('i = ', i); if (localStorage.def_local_1) { var fromId = j.id; var uiData = JSON.parse(localStorage.def_local_1);//本地的数据 //限制连线的个数 switch (uiData.elements[fromId].name) { case 'control'://如果是条件控制节点，限制只能拉两条线（命中和非命中） var linkerCount = 0; for (const key in uiData.elements) { if (uiData.elements.hasOwnProperty(key)) { const element = uiData.elements[key]; if (element.name === 'linker' && element.from.id === fromId) { linkerCount++; } } } if (linkerCount >= 2) { UI.showTip('条件控制节点只能有两条分支'); return null } break; case 'dataSource'://如果是数据源节点，限制只能拉一条线 var linkerCount = 0; for (const key in uiData.elements) { if (uiData.elements.hasOwnProperty(key)) { const element = uiData.elements[key]; if (element.name === 'linker' && element.from.id === fromId) { linkerCount++; } } } if (linkerCount >= 1) { UI.showTip('数据源节点只能有一条分支'); return null } break; case 'output'://如果是输出节点，不能拉线 UI.showTip('输出节点没有分支'); return null case 'start'://如果是根节点，限制只能拉一条线 var linkerCount = 0; for (const key in uiData.elements) { if (uiData.elements.hasOwnProperty(key)) { const element = uiData.elements[key]; if (element.name === 'linker' && element.from.id === fromId) { linkerCount++; } } } if (linkerCount >= 1) { UI.showTip('根节点只能有一条分支'); return null } break; default: break; } } if (localStorage.def_local_1) { console.log(JSON.parse(localStorage.def_local_1)); } var g = Utils.newId(); var h = Utils.copy(Schema.linkerDefaults); h.from = j; h.to = { id: null, x: i.x, y: i.y, angle: null }; h.props = { zindex: Model.maxZIndex + 1 }; delete h.fontStyle; var f = {}; if (Designer.defaults.linkerBeginArrowStyle) { f.beginArrowStyle = Designer.defaults.linkerBeginArrowStyle } if (Designer.defaults.linkerEndArrowStyle) { f.endArrowStyle = Designer.defaults.linkerEndArrowStyle } h.lineStyle = f; h.id = g; return h } }, linkerEditable: function (b) { var a = $("#designer_canvas"); a.unbind("dblclick.edit_linker").bind("dblclick.edit_linker", function () { console.log("双击了连线", b); // Designer.op.editLinkerText(b); //判断是否条件控制节点下面的连线 // var def_local_1_data = JSON.parse(localStorage.def_local_1); // for (const key in def_local_1_data.elements) { // if (def_local_1_data.elements.hasOwnProperty(key)) { // const element = def_local_1_data.elements[key]; // if (key === b.from.id) { // if (element.name == 'control') { // parent.postMessage(JSON.stringify({ code: 1, value: b }), '*'); //window.postMessage // } // } // } // } a.unbind("dblclick.edit_linker") }) }, editLinkerText: function (e) { Designer.contextMenu.hide(); var d = Designer.painter.getLinkerMidpoint(e); var h = $("#" + e.id).find(".text_canvas"); var b = $("#linker_text_edit"); if (b.length == 0) { b = $("").appendTo("#designer_canvas") } $("#" + e.id).find(".text_canvas").hide(); var g = Utils.getLinkerFontStyle(e.fontStyle); var f = "scale(" + Designer.config.scale + ")"; var a = Math.round(g.size * 1.25); b.css({ "z-index": Model.orderList.length, "line-height": a + "px", "font-size": g.size + "px", "font-family": g.fontFamily, "font-weight": g.bold ? "bold" : "normal", "font-style": g.italic ? "italic" : "normal", "text-align": g.textAlign, color: "rgb(" + g.color + ")", "text-decoration": g.underline ? "underline" : "none", "-webkit-transform": f, "-ms-transform": f, "-o-transform": f, "-moz-transform": f, transform: f }); b.val(e.text).show().select(); b.unbind().bind("keyup", function () { var k = $(this).val(); var l = k.replace(//g, ">").replace(/\n/g, "
"); h.html(l + "
"); var i = h.width(); if (i < 50) { i = 50 } var j = h.height(); if (j < a) { j = a } if (typeof e.textPos != "undefined") { b.css({ left: e.textPos.x, top: e.textPos.y, width: i, height: j }) } else { b.css({ left: d.x.toScale() - i / 2 - 2, top: d.y.toScale() - j / 2 - 2, width: i, height: j }) } }).bind("mousedown", function (i) { i.stopPropagation() }).bind("keydown", function (k) { if (k.keyCode == 13 && k.ctrlKey) { c(); return false } else { if (k.keyCode == 27) { b.unbind().remove(); Designer.painter.renderLinkerText(e) } else { if (k.keyCode == 66 && k.ctrlKey) { var l = Utils.getLinkerFontStyle(e.fontStyle); var i = !l.bold; e.fontStyle.bold = i; Model.update(e); var j = i ? "bold" : "normal"; $(this).css("font-weight", j); h.css("font-weight", j); UI.update() } else { if (k.keyCode == 73 && k.ctrlKey) { var l = Utils.getLinkerFontStyle(e.fontStyle); var i = !l.italic; e.fontStyle.italic = i; Model.update(e); var j = i ? "italic" : "normal"; $(this).css("font-style", j); h.css("font-style", j); UI.update() } else { if (k.keyCode == 85 && k.ctrlKey) { var l = Utils.getLinkerFontStyle(e.fontStyle); var i = !l.underline; e.fontStyle.underline = i; Model.update(e); var j = i ? "underline" : "none"; $(this).css("text-decoration", j); h.css("text-decoration", j); k.preventDefault(); UI.update() } } } } } }).bind("blur", function () { c() }); b.trigger("keyup"); function c() { var i = $("#linker_text_edit"); if (i.length && i.is(":visible")) { var j = i.val(); if (j != e.text) { e.text = j; Model.update(e) } Designer.painter.renderLinker(e); i.remove() } } }, linkerDraggable: function (d, a) { console.log("linkerDraggable") if (d.locked) { return } var linked = false; var c = $("#designer_canvas"); var b = $("#canvas_container"); c.bind("mousedown.draglinker", function (f) { console.log("mousedown.draglinker"); Utils.hideLinkerControls(); Designer.op.changeState("dragging_linker"); var e = Utils.getSelectedIds(); var g = false; if (e.length > 1) { g = true } b.bind("mousemove.draglinker", function (i) { console.log("mousemove.draglinker") b.css("cursor", "default"); var h = Utils.getRelativePos(i.pageX, i.pageY, c); Designer.op.moveLinker(d, a, h.x, h.y); if (g) { Designer.painter.drawControls(e) } $(document).unbind("mouseup.droplinker").bind("mouseup.droplinker", function () { $(document).unbind("mouseup.droplinker"); if (linked) { console.log("组件之间关联成功"); Model.update(d); } else { $('.shape_dashboard.menu').remove(); Designer.op.removeShape(); UI.showTip('组件之间无关联1!'); } Utils.showLinkerControls(); Designer.op.hideSnapLine() }) }); $(document).bind("mouseup.draglinker", function () { console.log("mouseup.draglinker") Designer.op.hideLinkPoint(); Designer.op.resetState(); c.unbind("mousedown.draglinker"); b.unbind("mousemove.draglinker"); $(document).unbind("mouseup.draglinker"); Utils.showLinkerControls() if (!d.to.id) { //没指向节点，显示可选节点 linked = true; Designer.op.linkDashboard(d); } else { //判断节点之间是可关联 var from = Model.getShapeById(d.from.id); var to = Model.getShapeById(d.to.id); if (from && from.selected && from.selected.length > 0) { $.each(from.selected, function () { var name = this; if (name == to.name) { linked = true; return false; } }); } else { linked = false; } } }) }) }, linkClickable: function (a, c) { console.log("linkClickable"); var b = $("#link_spot"); if (b.length == 0) { b = $("").appendTo("#designer_canvas"); b.bind("dragstart", function () { return false }) } if (a.trim().toLowerCase().indexOf("http") == -1) { a = "http://" + a } b.attr("href", a); b.show().css({ left: c.x - 50, top: c.y - 50, "z-index": Model.orderList.length + 3 }) }, textCreatable: function () { var b = $("#designer_canvas"); var a = $("#canvas_container"); a.unbind("mousedown.create_text").bind("mousedown.create_text", function (f) { var d = null; if (!f.ctrlKey) { Utils.unselect() } var c = Utils.getRelativePos(f.pageX, f.pageY, b); var e = null; a.bind("mousemove.create_text", function (g) { if (d == null) { d = $("").appendTo(b) } var h = Utils.getRelativePos(g.pageX, g.pageY, b); e = { "z-index": Model.orderList.length, left: h.x - 1, top: h.y - 1 }; if (h.x > c.x) { e.left = c.x - 1 } if (h.y > c.y) { e.top = c.y - 1 } e.width = Math.abs(h.x - c.x - 2); e.height = Math.abs(h.y - c.y - 2); d.css(e) }); $(document).unbind("mouseup.create_text").bind("mouseup.create_text", function (h) { if (e != null && e.width >= 20 && e.height >= 20) { var g = Model.create("standardText", e.left.restoreScale(), e.top.restoreScale()); g.props.w = e.width.restoreScale(); g.props.h = e.height.restoreScale(); Model.add(g); Designer.painter.renderShape(g); Designer.op.editShapeText(g); Utils.unselect(); Utils.selectShape(g.id) } d.remove(); Designer.op.resetState(); $(document).unbind("mouseup.create_text"); a.unbind("mousemove.create_text") }); a.unbind("mousedown.create_text") }) }, canvasDragTimeout: null, canvasDraggable: function () { var a = $("#canvas_container"); //a.css("cursor", "url(/themes/default/images/diagraming/cursor_hand.png) 8 8, auto"); a.off("mousedown.drag_canvas").on("mousedown.drag_canvas", function (d) { var c = $("#designer_layout").scrollTop(); var b = $("#designer_layout").scrollLeft(); a.on("mousemove.drag_canvas", function (f) { var e = f.pageX - d.pageX; var g = f.pageY - d.pageY; $("#designer_layout").scrollLeft(b - e); $("#designer_layout").scrollTop(c - g) }); $(document).off("mouseup.drag_canvas").on("mouseup.drag_canvas", function (e) { a.off("mousemove.drag_canvas"); $(document).off("mouseup.drag_canvas") }) }); $(document).off("keyup.drag_canvas").on("keyup.drag_canvas", function (b) { a.off("mousedown.drag_canvas"); Designer.op.resetState(); $(document).off("mouseup.drag_canvas"); b.preventDefault(); a.off("mousemove.drag_canvas") }) }, canvasFreeDraggable: function () { var a = $("#canvas_container"); //a.css("cursor", "url(/themes/default/images/diagraming/cursor_hand.png) 8 8, auto"); a.unbind("mousedown.drag_canvas").bind("mousedown.drag_canvas", function (d) { var c = $("#designer_layout").scrollTop(); var b = $("#designer_layout").scrollLeft(); a.bind("mousemove.drag_canvas", function (f) { var e = f.pageX - d.pageX; var g = f.pageY - d.pageY; $("#designer_layout").scrollLeft(b - e); $("#designer_layout").scrollTop(c - g) }); $(document).unbind("mouseup.drag_canvas").bind("mouseup.drag_canvas", function (e) { a.unbind("mousemove.drag_canvas"); $(document).unbind("mouseup.drag_canvas") }) }) }, moveShape: function (q, h, c) { var r = []; for (var t = 0; t < q.length; t++) { var b = q[t]; r.push(b.id) } var w = Utils.restoreScale(h); for (var t = 0; t < q.length; t++) { var b = q[t]; if (b.name == "linker") { var m = b; var s = m.from; var d = m.to; var j = false; var n = false; if (!Utils.isSelected(m.id)) { if (s.id != null && r.indexOf(s.id) >= 0) { m.from.x += w.x; m.from.y += w.y; j = true } if (d.id != null && r.indexOf(d.id) >= 0) { m.to.x += w.x; m.to.y += w.y; n = true } } else { if (s.id == null || r.indexOf(s.id) >= 0) { m.from.x += w.x; m.from.y += w.y; j = true } if (d.id == null || r.indexOf(d.id) >= 0) { m.to.x += w.x; m.to.y += w.y; n = true } } if (j && n) { for (var u = 0; u < m.points.length; u++) { var o = m.points[u]; o.x += w.x; o.y += w.y } var v = $("#" + b.id); if (v.length > 0) { var f = v.position(); v.css({ left: f.left += h.x, top: f.top += h.y }) } } else { if (j || n) { Designer.painter.renderLinker(m, true) } } } else { a(b); $(".shape_contour[forshape=" + b.id + "]").css({ left: b.props.x.toScale(), top: b.props.y.toScale() }) } } var e = Utils.getSelectedLinkerIds(); if (q.length == 1 && e.length == 1) { return } if (typeof c == "undefined") { if (e.length > 0) { var g = Utils.getSelectedIds(); Designer.painter.drawControls(g) } else { var l = $("#shape_controls"); l.css({ left: parseFloat(l.css("left")) + h.x, top: parseFloat(l.css("top")) + h.y }) } var k = $("#shape_controls").position(); Designer.op.showTip("X: " + Math.round(k.left.restoreScale()) + " Y: " + Math.round(k.top.restoreScale())) } function a(i) { i.props.x += w.x; i.props.y += w.y; var p = $("#" + i.id); p.css({ left: parseFloat(p.css("left")) + h.x, top: parseFloat(p.css("top")) + h.y }) } }, moveLinker: function (i, q, f, e) { var b = null; var j = null; var m = Utils.getShapeByPosition(f, e, true); Designer.op.hideLinkPoint(); if (m != null) { var a = m.shape; Utils.showAnchors(a); j = a.id; if (m.type == "bounding") { b = m.linkPoint; Designer.op.showLinkPoint(Utils.toScale(b)) } else { if (m.type == "shape") { var s; var d; if (q == "from") { s = { x: i.to.x, y: i.to.y }; d = i.to.id } else { s = { x: i.from.x, y: i.from.y }; d = i.from.id } if (a.id == d) { Designer.op.hideLinkPoint(); b = { x: f.restoreScale(), y: e.restoreScale() }; b.angle = null; j = null } else { var k = a.getAnchors(); var h = -1; var l; var t = { x: a.props.x + a.props.w / 2, y: a.props.y + a.props.h / 2 }; for (var r = 0; r < k.length; r++) { var o = k[r]; var g = Utils.getRotated(t, { x: a.props.x + o.x, y: a.props.y + o.y }, a.props.angle); var p = Utils.measureDistance(g, s); if (h == -1 || p < h) { h = p; l = g } } var c = Utils.getPointAngle(a.id, l.x, l.y, 7); b = { x: l.x, y: l.y, angle: c }; //不选中 Designer.op.showLinkPoint(Utils.toScale(b)) } } } } else { Designer.op.hideLinkPoint(); Utils.hideAnchors(); var n = Designer.op.snapLinkerLine(f, e); b = { x: n.x.restoreScale(), y: n.y.restoreScale() }; b.angle = null; j = null } if (q == "from") { i.from.id = j; i.from.x = b.x; i.from.y = b.y; i.from.angle = b.angle; if (j == null) { if (b.x >= i.to.x - 6 && b.x <= i.to.x + 6) { i.from.x = i.to.x } if (b.y >= i.to.y - 6 && b.y <= i.to.y + 6) { i.from.y = i.to.y } } } else { i.to.x = b.x; i.to.y = b.y; i.to.id = j; i.to.angle = b.angle; if (j == null) { if (b.x >= i.from.x - 6 && b.x <= i.from.x + 6) { i.to.x = i.from.x } if (b.y >= i.from.y - 6 && b.y <= i.from.y + 6) { i.to.y = i.from.y } } } Designer.painter.renderLinker(i, true) }, showLinkPoint: function (a) { var c = $("").appendTo($("#designer_canvas")); var b = c[0].getContext("2d"); b.translate(1, 1); b.lineWidth = 1; b.globalAlpha = 0.3; b.strokeStyle = Designer.config.anchorColor; b.fillStyle = Designer.config.anchorColor; b.beginPath(); b.moveTo(0, 15); b.bezierCurveTo(0, -5, 30, -5, 30, 15); b.bezierCurveTo(30, 35, 0, 35, 0, 15); b.closePath(); b.fill(); b.stroke(); c.css({ left: a.x - 16, top: a.y - 16, "z-index": Model.orderList.length }).show() }, hideLinkPoint: function () { $(".link_point_canvas").remove() }, brokenLinkerChangable: function (d, c) { var a = $("#canvas_container"); var b = $("#designer_canvas"); var f = d.points[c - 1]; var e = d.points[c]; if (f.x == e.x) { a.css("cursor", "e-resize") } else { a.css("cursor", "n-resize") } b.bind("mousedown.brokenLinker", function (i) { Designer.op.changeState("changing_broken_linker"); var h = Utils.getRelativePos(i.pageX, i.pageY, b); var g = Utils.getSelectedIds(); a.bind("mousemove.brokenLinker", function (k) { var j = Utils.getRelativePos(k.pageX, k.pageY, b); var l = { x: j.x - h.x, y: j.y - h.y }; l = Utils.restoreScale(l); if (f.x == e.x) { f.x += l.x; e.x += l.x } else { f.y += l.y; e.y += l.y } Designer.painter.renderLinker(d); if (g.length > 1) { Designer.painter.drawControls(g) } h = j; $(document).unbind("mouseup.changed").bind("mouseup.changed", function () { Model.update(d); $(document).unbind("mouseup.changed") }) }); $(document).bind("mouseup.brokenLinker", function () { Designer.op.resetState(); a.unbind("mousemove.brokenLinker"); b.unbind("mousedown.brokenLinker"); $(document).unbind("mouseup.brokenLinker") }) }) }, removeShape: function () { var d = Utils.getSelected(); if (d.length > 0) { Utils.unselect(); var e = Utils.getAttachedShapes(d); d = d.concat(e); var c = []; for (var b = 0; b < d.length; b++) { var a = Utils.getChildrenShapes(d[b]); c = c.concat(a) } d = d.concat(c); var f = Utils.getCollapsedShapes(d); d = d.concat(f); Model.remove(d) } }, showTip: function (c) { var a = $("#designer_op_tip"); if (a.length == 0) { a = $("").appendTo("#designer_canvas") } a.stop().html(c); var b = $("#shape_controls"); var d = b.position(); a.css({ top: d.top + b.height() + 5, left: d.left + b.width() / 2 - a.outerWidth() / 2, "z-index": Model.orderList.length }).show() }, hideTip: function () { $("#designer_op_tip").fadeOut(100) }, snapLine: function (t, u, E, j) { var s = t.y; var I = t.y + t.h / 2; var k = t.y + t.h; var g = t.x; var D = t.x + t.w / 2; var B = t.x + t.w; var f = 2; var m = { v: null, h: null, attach: null, container: null }; var C = null; if (E) { C = j } else { C = Model.getShapeById(u[0]) } if (u.length == 1 && C.groupName == "boundaryEvent") { for (var x = Model.orderList.length - 1; x >= 0; x--) { var F = Model.orderList[x].id; var d = Model.getShapeById(F); if (d.attribute && d.attribute.collapseBy) { continue } if (d.name != "linker" && d.id != C.id) { var v = d.props; if (m.attach == null && v.angle == 0 && (d.groupName == "task" || d.groupName == "callActivity" || d.groupName == "subProcess")) { var z = { x: v.x - f, y: v.y - f, w: v.w + f * 2, h: v.h + f * 2 }; if (Utils.pointInRect(D, I, z)) { var c = v.y; var l = v.y + v.h; var H = v.x; var w = v.x + v.w; var r = false; var n = false; if (c >= I - f && c <= I + f) { t.y = c - t.h / 2; n = true } else { if (l >= I - f && l <= I + f) { t.y = l - t.h / 2; n = true } } if (H >= D - f && H <= D + f) { t.x = H - t.w / 2; r = true } else { if (w >= D - f && w <= D + f) { t.x = w - t.w / 2; r = true } } if (r || n) { m.attach = d } } } } } } if (m.attach == null) { for (var x = Model.orderList.length - 1; x >= 0; x--) { var F = Model.orderList[x].id; var d = Model.getShapeById(F); if (d.attribute && d.attribute.collapseBy) { continue } if (d.name == "linker" || u.indexOf(F) >= 0 || d.parent) { continue } var v = d.props; if (m.h == null) { var c = v.y; var b = v.y + v.h / 2; var l = v.y + v.h; if (b >= I - f && b <= I + f) { m.h = { type: "middle", y: b }; t.y = b - t.h / 2 } else { if (c >= s - f && c <= s + f) { m.h = { type: "top", y: c }; t.y = c } else { if (l >= k - f && l <= k + f) { m.h = { type: "bottom", y: l }; t.y = l - t.h } else { if (l >= s - f && l <= s + f) { m.h = { type: "top", y: l }; t.y = l } else { if (c >= k - f && c <= k + f) { m.h = { type: "bottom", y: c }; t.y = c - t.h } } } } } } if (m.v == null) { var H = v.x; var G = v.x + v.w / 2; var w = v.x + v.w; if (G >= D - f && G <= D + f) { m.v = { type: "center", x: G }; t.x = G - t.w / 2 } else { if (H >= g - f && H <= g + f) { m.v = { type: "left", x: H }; t.x = H } else { if (w >= B - f && w <= B + f) { m.v = { type: "right", x: w }; t.x = w - t.w } else { if (w >= g - f && w <= g + f) { m.v = { type: "left", x: w }; t.x = w } else { if (H >= B - f && H <= B + f) { m.v = { type: "right", x: H }; t.x = H - t.w } } } } } } if (m.container == null) { if (d.attribute && d.attribute.container) { if (Utils.rectInRect(t, d.props)) { m.container = d } } } if (m.h != null && m.v != null && m.container != null) { break } } } this.hideSnapLine(); var e = $("#designer_canvas"); if (m.attach != null || m.container != null) { var q = $("#designer_op_snapline_attach"); if (q.length == 0) { q = $("").appendTo(e) } var y = m.attach || m.container; var h = Utils.getShapeLineStyle(y.lineStyle); var a = h.lineWidth; q.css({ width: (y.props.w + a).toScale(), height: (y.props.h + a).toScale(), left: (y.props.x - a / 2).toScale() - 2, top: (y.props.y - a / 2).toScale() - 2, "z-index": $("#" + y.id).css("z-index") }).show() } if (m.h != null) { var A = $("#designer_op_snapline_h"); if (A.length == 0) { A = $("").appendTo(e) } A.css({ width: e.width() + Designer.config.pageMargin * 2, left: -Designer.config.pageMargin, top: Math.round(m.h.y.toScale()), "z-index": Model.orderList.length + 1 }).show() } if (m.v != null) { var o = $("#designer_op_snapline_v"); if (o.length == 0) { o = $("").appendTo(e) } o.css({ height: e.height() + Designer.config.pageMargin * 2, top: -Designer.config.pageMargin, left: Math.round(m.v.x.toScale()), "z-index": Model.orderList.length + 1 }).show() } return m }, snapLinkerLine: function (o, m) { var q = { v: null, h: null }; var k = 2; for (var h = Model.orderList.length - 1; h >= 0; h--) { var n = Model.orderList[h].id; var l = Model.getShapeById(n); if (l.attribute && l.attribute.collapseBy) { continue } if (l.name == "linker" || l.parent) { continue } var f = l.props; if (q.h == null) { var d = f.y; var j = f.y + f.h; if (d >= m - k && d <= m + k) { q.h = d } else { if (j >= m - k && j <= m + k) { q.h = j } } } if (q.v == null) { var p = f.x; var e = f.x + f.w; if (p >= o - k && p <= o + k) { q.v = p } else { if (e >= o - k && e <= o + k) { q.v = e } } } if (q.h != null && q.v != null) { break } } this.hideSnapLine(); var c = $("#designer_canvas"); if (q.h != null) { var g = $("#designer_op_snapline_h"); if (g.length == 0) { g = $("").appendTo(c) } g.css({ width: c.width() + Designer.config.pageMargin * 2, left: -Designer.config.pageMargin, top: Math.round(q.h.toScale()), "z-index": Model.orderList.length + 1 }).show() } if (q.v != null) { var a = $("#designer_op_snapline_v"); if (a.length == 0) { a = $("").appendTo(c) } a.css({ height: c.height() + Designer.config.pageMargin * 2, top: -Designer.config.pageMargin, left: Math.round(q.v.toScale()), "z-index": Model.orderList.length + 1 }).show() } var b = { x: o, y: m }; if (q.h != null) { b.y = q.h } if (q.v != null) { b.x = q.v } return b }, snapResizeLine: function (m, o, n) { var l = m.y; var z = m.y + m.h / 2; var g = m.y + m.h; var f = m.x; var v = m.x + m.w / 2; var u = m.x + m.w; var e = 2; var j = { v: null, h: null }; for (var s = Model.orderList.length - 1; s >= 0; s--) { var w = Model.orderList[s].id; var b = Model.getShapeById(w); if (b.attribute && b.attribute.collapseBy) { continue } if (b.name == "linker" || o.indexOf(w) >= 0 || b.parent) { continue } var q = b.props; if (j.h == null && (n.indexOf("t") >= 0 || n.indexOf("b") >= 0)) { var c = q.y; var a = q.y + q.h / 2; var h = q.y + q.h; if (a >= z - e && a <= z + e) { j.h = { type: "middle", y: a }; if (n.indexOf("t") >= 0) { m.h = (g - a) * 2; m.y = g - m.h } else { m.h = (a - m.y) * 2 } } else { if (n.indexOf("t") >= 0 && c >= l - e && c <= l + e) { j.h = { type: "top", y: c }; m.y = c; m.h = g - c } else { if (n.indexOf("b") >= 0 && h >= g - e && h <= g + e) { j.h = { type: "bottom", y: h }; m.h = h - l } else { if (n.indexOf("t") >= 0 && h >= l - e && h <= l + e) { j.h = { type: "top", y: h }; m.y = h; m.h = g - h } else { if (n.indexOf("b") >= 0 && c >= g - e && c <= g + e) { j.h = { type: "bottom", y: c }; m.h = c - m.y } } } } } } if (j.v == null && (n.indexOf("l") >= 0 || n.indexOf("r") >= 0)) { var y = q.x; var x = q.x + q.w / 2; var r = q.x + q.w; if (x >= v - e && x <= v + e) { j.v = { type: "center", x: x }; if (n.indexOf("l") >= 0) { m.w = (u - x) * 2; m.x = u - m.w } else { m.w = (x - m.x) * 2 } } else { if (n.indexOf("l") >= 0 && y >= f - e && y <= f + e) { j.v = { type: "left", x: y }; m.x = y; m.w = u - y } else { if (n.indexOf("r") >= 0 && r >= u - e && r <= u + e) { j.v = { type: "right", x: r }; m.w = r - m.x } else { if (n.indexOf("l") >= 0 && r >= f - e && r <= f + e) { j.v = { type: "left", x: r }; m.x = r; m.w = u - r } else { if (n.indexOf("r") >= 0 && y >= u - e && y <= u + e) { j.v = { type: "right", x: y }; m.w = y - m.x } } } } } } if (j.h != null && j.v != null) { break } } this.hideSnapLine(); var d = $("#designer_canvas"); if (j.h != null) { var t = $("#designer_op_snapline_h"); if (t.length == 0) { t = $("").appendTo(d) } t.css({ width: d.width() + Designer.config.pageMargin * 2, left: -Designer.config.pageMargin, top: Math.round(j.h.y.toScale()), "z-index": Model.orderList.length + 1 }).show() } if (j.v != null) { var k = $("#designer_op_snapline_v"); if (k.length == 0) { k = $("").appendTo(d) } k.css({ height: d.height() + Designer.config.pageMargin * 2, top: -Designer.config.pageMargin, left: Math.round(j.v.x.toScale()), "z-index": Model.orderList.length + 1 }).show() } return j }, hideSnapLine: function () { $("#designer_op_snapline_h").hide(); $("#designer_op_snapline_v").hide(); $("#designer_op_snapline_attach").hide() }, linkDashboard: function (d) { var h = Model.getShapeById(d.from.id); var a = h.category; if ($("#panel_" + a).length != 0) { var e = $("#shape_dashboard_" + a); if (e.length == 0) { e = $("").appendTo("#designer_canvas"); function c(l, o) { /* var n = ""; var k = $(n).appendTo(e); if (o) { k.append("") } var m = k.children()[0]; Designer.painter.drawPanelItem(m, l.name) */ if (l.name) { var n = "
" + l.icon + "
";
var k = $(n).appendTo(e);
k.find('.icon').attr('title', l.title);
} else {
$('' + l.msg + '
').appendTo(e);
}
}
if (h.selected && h.selected.length > 0) {
$.each(h.selected, function () {
var name = this;
$.each(Schema.shapes, function () {
if (name == this.name) {
c(this);
return false;
}
});
});
} else {
c({ name: '', title: '', msg: '无可用组件!' });
}
/*for (var i in Schema.shapes) {
var f = Schema.shapes[i];
if (f.category == a) {
var b = f.attribute;
if (b.visible && b.linkable) {
if (!f.groupName) {
c(f)
} else {
var j = SchemaGroup.getGroup(f.groupName);
if (j[0] == f.name) {
c(f, f.groupName)
}
}
}
}
}*/
e.bind("mousemove", function (k) {
k.stopPropagation()
}).bind("mousedown", function (k) {
k.stopPropagation()
})
}
e.css({
left: d.to.x.toScale(),
top: d.to.y.toScale(),
"z-index": Model.orderList.length
}).show();
e.find(".link_shape_icon").unbind().bind("mousedown", function (n) {
n.stopPropagation();
var m = $(this).attr("group");
var p = $(this).parent().position();
var o = e.position();
var l = p.left + o.left + $(this).parent().outerWidth() - 10;
var k = p.top + o.top + $(this).parent().outerHeight();
Designer.op.groupDashboard(m, l, k, function (q) {
g(q);
e.hide();
$(document).unbind("mousedown.dashboard")
})
}).bind("click", function (k) {
k.stopPropagation()
});
e.children(".dashboard_box").unbind().bind("click", function () {
e.hide();
$(document).unbind("mousedown.dashboard");
var l = $(this);
var k = l.attr("shapeName");
g(k);
if ($("#hover_tip").length > 0) {
$("#hover_tip").remove()
}
e.remove();
});
$(document).bind("mousedown.dashboard", function () {
e.hide();
$(document).unbind("mousedown.dashboard");
e.remove();
});
function g(n) {
var v = Schema.shapes[n];
var o = Utils.getEndpointAngle(d, "to");
var q = Utils.getAngleDir(o);
var m = v.getAnchors();
var t;
if (q == 1) {
var p = null;
for (var w = 0; w < m.length; w++) {
var u = m[w];
if (p == null || u.y < p) {
p = u.y;
t = u
}
}
} else {
if (q == 2) {
var l = null;
for (var w = 0; w < m.length; w++) {
var u = m[w];
if (l == null || u.x > l) {
l = u.x;
t = u
}
}
} else {
if (q == 3) {
var k = null;
for (var w = 0; w < m.length; w++) {
var u = m[w];
if (k == null || u.y > k) {
k = u.y;
t = u
}
}
} else {
if (q == 4) {
var s = null;
for (var w = 0; w < m.length; w++) {
var u = m[w];
if (s == null || u.x < s) {
s = u.x;
t = u
}
}
}
}
}
}
var x = Model.create(n, d.to.x - t.x, d.to.y - t.y);
Designer.painter.renderShape(x);
MessageSource.beginBatch();
if (x.onCreated) {
x.onCreated()
}
Designer.events.push("created", x);
Model.add(x);
var r = Utils.getPointAngle(x.id, d.to.x, d.to.y, 7);
d.to.id = x.id;
d.to.angle = r;
// Designer.painter.renderLinker(d, true);
Model.update(d);
MessageSource.commit();
Utils.unselect();
// Utils.selectShape(x.id);
// Designer.op.editShapeText(x)
}
}
},
groupDashboard: function (k, d, j, c) {
$(".group_dashboard").hide();
var h = $("#shape_group_dashboard_" + k);
if (h.length == 0) {
h = $("").appendTo("#designer_canvas");
var l = SchemaGroup.getGroup(k);
for (var e = 0; e < l.length; e++) {
var a = l[e];
var g = Schema.shapes[a];
if (g.attribute.visible) {
var f = $("").appendTo(h);
var b = f.children("canvas")[0];
Designer.painter.drawPanelItem(b, g.name)
}
}
h.bind("mousedown", function (i) {
i.stopPropagation()
})
}
h.css({
left: d,
top: j,
"z-index": Model.orderList.length + 1
}).show();
$(".dashboard_box").unbind().bind("click", function () {
var i = $(this).attr("shapeName");
c(i);
h.hide();
$(document).unbind("mousedown.group_dashboard")
});
$(document).bind("mousedown.group_dashboard", function () {
h.hide();
$(document).unbind("mousedown.group_dashboard")
});
return h
},
showPanelGroup: function (m, a, g) {
a.stopPropagation();
var h = $("#group_dashboard_" + m);
$(".group_dashboard").hide();
if (h.length == 0) {
h = $("").appendTo("#designer");
var n = SchemaGroup.getGroup(m);
for (var e = 0; e < n.length; e++) {
var b = n[e];
var j = Schema.shapes[b];
if (j.attribute.visible) {
var f = $("").appendTo(h);
var c = f.children("canvas")[0];
Designer.painter.drawPanelItem(c, j.name)
}
}
h.css("position", "fixed")
}
var l = $(g).parent();
var d = l.offset();
h.show();
var k = d.top + l.outerHeight() - 2;
if (k + h.outerHeight() > $(window).height()) {
k = $(window).height() - h.outerHeight()
}
h.css({
left: d.left - 5,
top: k
});
$(document).bind("mousedown.group_board", function () {
h.hide();
$(document).unbind("mousedown.group_board")
})
},
changeShapeProps: function (a, d) {
function c(i) {
if (typeof d.x != "undefined") {
i.x += (d.x - a.props.x)
}
if (typeof d.y != "undefined") {
i.y += (d.y - a.props.y)
}
if (typeof d.w != "undefined" || typeof d.h != "undefined" || typeof d.angle != "undefined") {
var q = $.extend({}, a.props, d);
var o = {
x: a.props.x + a.props.w / 2,
y: a.props.y + a.props.h / 2
};
var l = Utils.getRotated(o, i, -a.props.angle);
var k = a.props.w;
var n = a.props.h;
if (typeof d.w != "undefined") {
i.x = a.props.x + (l.x - a.props.x) / a.props.w * d.w;
k = d.w
} else {
i.x = l.x
}
if (typeof d.h != "undefined") {
i.y = a.props.y + (l.y - a.props.y) / a.props.h * d.h;
n = d.h
} else {
i.y = l.y
}
var j = {
x: a.props.x + k / 2,
y: a.props.y + n / 2
};
var m = Utils.getRotated(j, i, q.angle);
i.x = m.x;
i.y = m.y
}
if (typeof d.angle != "undefined") {
i.angle += d.angle - a.props.angle
}
}
var f = [];
var g = Model.getShapeLinkers(a.id);
if (g && g.length > 0) {
for (var b = 0; b < g.length; b++) {
var h = g[b];
var e = Model.getShapeById(h);
if (a.id == e.from.id) {
c(e.from)
}
if (a.id == e.to.id) {
c(e.to)
}
}
f = g
}
$.extend(a.props, d);
Designer.painter.renderShape(a);
Utils.showLinkerCursor();
UI.showShapeOptions();
return f
},
googleImgCallback: function (e) {
var c = e.responseData;
var b = c.results;
for (var a = 0; a < b.length; a++) {
var d = b[a];
UI.appendGoogleImage(d)
}
$("#google_image_items").append("");
$(".img_gg_loading_tip").remove();
$(".gg_img_more").remove();
if (this.searchIndex <= 3) {
$("#google_image_items").append("")
}
}
},
events: {
push: function (c, a) {
var b = this.listeners[c];
if (b) {
return b(a)
}
return null
},
listeners: {},
addEventListener: function (b, a) {
this.listeners[b] = a
}
},
clipboard: {
elements: [],
presetedIds: {},
presetIds: function () {
this.presetedIds = {};
for (var b = 0; b < this.elements.length; b++) {
var a = this.elements[b];
this.presetedIds[a.id] = Utils.newId();
if (a.group && !this.presetedIds[a.group]) {
this.presetedIds[a.group] = Utils.newId()
}
}
localStorage.presetedIds = JSON.stringify(this.presetedIds)
},
plus: true,
copy: function () {
this.elements = [];
var d = Utils.getSelected();
var c = Utils.getFamilyShapes(d);
d = d.concat(c);
d.sort(function e(g, f) {
return g.props.zindex - f.props.zindex
});
for (var b = 0; b < d.length; b++) {
var a = Utils.copy(d[b]);
if (a.name == "linker") {
if (a.from.id != null) {
if (!Utils.isSelected(a.from.id)) {
a.from.id = null;
a.from.angle = null
}
}
if (a.to.id != null) {
if (!Utils.isSelected(a.to.id)) {
a.to.id = null;
a.to.angle = null
}
}
}
this.elements.push(a)
}
this.elements.sort(function e(g, f) {
return g.props.zindex - f.props.zindex
});
this.presetIds();
this.plus = true;
Designer.events.push("clipboardChanged", this.elements.length);
localStorage.clipboard = JSON.stringify(this.elements);
localStorage.clientId = CLB.clientId
},
cut: function () {
this.copy();
Designer.op.removeShape();
this.plus = false
},
paste: function (n, m) {
if (localStorage.clipboard) {
var e = JSON.parse(localStorage.clipboard);
var c = localStorage.clientId;
if (CLB.clientId != c) {
this.elements = e;
for (var w = 0; w < this.elements.length; w++) {
var a = this.elements[w];
if (a.name != "linker") {
Schema.initShapeFunctions(a)
}
}
this.presetedIds = JSON.parse(localStorage.presetedIds);
if (typeof n == "undefined") {
var b = $("#designer_layout").scrollTop();
var k = b - Designer.config.pageMargin + $("#designer_layout").height().restoreScale() / 2;
var t = $("#designer_layout").scrollLeft();
var l = t - Designer.config.pageMargin + $("#designer_layout").width().restoreScale() / 2;
n = l;
m = k
}
}
}
if (this.elements.length == 0) {
return
}
var A = 20;
var z = 20;
if (typeof n != "undefined") {
var g = Utils.getShapesBounding(this.elements);
A = n - g.x - g.w / 2;
z = m - g.y - g.h / 2
}
var h = [];
var d = [];
for (var w = 0; w < this.elements.length; w++) {
var a = this.elements[w];
if (a.name != "linker") {
var C;
var a = this.elements[w];
a.props.zindex = Model.maxZIndex + (w + 1);
var q = this.presetedIds[a.id];
if (this.plus || typeof n != "undefined") {
a.props.x += A;
a.props.y += z
}
C = Utils.copy(a);
for (var v = 0; v < C.dataAttributes.length; v++) {
var s = C.dataAttributes[v];
s.id = Utils.newId()
}
C.id = q;
if (C.children) {
for (var o = 0; o < C.children.length; o++) {
var u = C.children[o];
C.children[o] = this.presetedIds[u]
}
}
if (C.parent) {
C.parent = this.presetedIds[C.parent]
}
h.push(C);
d.push(q);
if (a.group) {
var f = this.presetedIds[a.group];
C.group = f
}
}
}
for (var w = 0; w < this.elements.length; w++) {
var a = this.elements[w];
if (a.name == "linker") {
var C;
a.props.zindex = Model.maxZIndex + (w + 1);
var q = this.presetedIds[a.id];
if (this.plus || typeof n != "undefined") {
a.from.x += A;
a.from.y += z;
a.to.x += A;
a.to.y += z;
for (var B = 0; B < a.points.length; B++) {
var r = a.points[B];
r.x += A;
r.y += z
}
}
C = Utils.copy(a);
if (!C.dataAttributes) {
C.dataAttributes = []
}
for (var v = 0; v < C.dataAttributes.length; v++) {
var s = C.dataAttributes[v];
s.id = Utils.newId()
}
if (a.from.id != null) {
C.from.id = this.presetedIds[a.from.id]
}
if (a.to.id != null) {
C.to.id = this.presetedIds[a.to.id]
}
C.id = q;
h.push(C);
d.push(q);
if (a.group) {
var f = this.presetedIds[a.group];
C.group = f
}
}
}
Model.addMulti(h);
for (var w = 0; w < h.length; w++) {
var a = h[w];
Designer.painter.renderShape(a)
}
Model.build();
this.presetIds();
Utils.unselect();
Utils.selectShape(d);
this.plus = true
},
duplicate: function () {
this.copy();
this.paste()
},
brush: function () {
var d = Utils.getSelected();
if (d.length == 0) {
return
}
var a = {
fontStyle: {},
lineStyle: {},
fillStyle: null,
shapeStyle: null
};
for (var c = 0; c < d.length; c++) {
var b = d[c];
if (b.name == "linker") {
$.extend(a.lineStyle, b.lineStyle);
$.extend(a.fontStyle, b.fontStyle)
} else {
if (a.fillStyle == null) {
a.fillStyle = {}
}
if (a.shapeStyle == null) {
a.shapeStyle = {}
}
$.extend(a.lineStyle, b.lineStyle);
$.extend(a.fontStyle, b.fontStyle);
$.extend(a.shapeStyle, b.shapeStyle);
$.extend(a.fillStyle, b.fillStyle)
}
}
delete a.fontStyle.orientation;
$("#bar_brush").button("select");
UI.showTip("选择目标图形并使用格式刷样式，Esc取消", "left", function () {
$("#bar_brush").button("unselect");
$(document).unbind("keydown.cancelbrush");
Utils.selectCallback = null;
$("#bar_brush").button("disable")
});
$(document).unbind("keydown.cancelbrush").bind("keydown.cancelbrush", function (f) {
if (f.keyCode == 27) {
UI.hideTip();
$("#bar_brush").button("unselect");
$(document).unbind("keydown.cancelbrush");
Utils.selectCallback = null;
$("#bar_brush").button("disable")
}
});
Utils.selectCallback = function () {
var f = Utils.getSelected();
for (var g = 0; g < f.length; g++) {
var e = f[g];
$.extend(e.lineStyle, a.lineStyle);
$.extend(e.fontStyle, a.fontStyle);
if (e.name != "linker") {
e.lineStyle = a.lineStyle;
delete e.lineStyle.beginArrowStyle;
delete e.lineStyle.endArrowStyle;
if (a.fillStyle != null) {
e.fillStyle = a.fillStyle
}
if (a.shapeStyle != null) {
e.shapeStyle = a.shapeStyle
}
} else {
if (e.fontStyle) {
delete e.fontStyle.vAlign
}
}
Designer.painter.renderShape(e)
}
Model.updateMulti(f)
}
}
},
addFunction: function (b, a) {
if (Designer[b]) {
throw "Duplicate function name!"
} else {
this[b] = a
}
},
painter: {
actions: {
move: function (a) {
this.moveTo(a.x, a.y);
this.prePoint = a;
if (this.beginPoint == null) {
this.beginPoint = a
}
},
line: function (d) {
if (typeof this.webkitLineDash != "undefined" && typeof this.lineDashOffset == "undefined" && this.lineWidth != 0) {
var f = this.webkitLineDash;
var c = this.prePoint;
var h = Utils.measureDistance(c, d);
var k = 0;
var b = 1 / h;
var j = c;
var e = 0;
var g = true;
while (k < 1) {
k += b;
if (k > 1) {
k = 1
}
var i = {
x: (1 - k) * c.x + k * d.x,
y: (1 - k) * c.y + k * d.y
};
var a = Utils.measureDistance(j, i);
if (a >= f[e] || k >= 1) {
if (g) {
this.lineTo(i.x, i.y)
} else {
this.moveTo(i.x, i.y)
}
g = !g;
j = i;
e++;
if (e >= f.length) {
e = 0
}
}
}
this.moveTo(d.x, d.y)
} else {
this.lineTo(d.x, d.y)
}
this.prePoint = d;
if (this.beginPoint == null) {
this.beginPoint = d
}
},
curve: function (e) {
if (typeof this.webkitLineDash != "undefined" && typeof this.lineDashOffset == "undefined" && this.lineWidth != 0) {
var g = this.webkitLineDash;
var d = this.prePoint;
var i = Utils.measureDistance(d, e);
var n = 0;
var b = 1 / i;
var l = d;
var f = 0;
var h = true;
var c = 0;
while (n < 1) {
n += b;
if (n > 1) {
n = 1
}
var k = {
x: d.x * Math.pow((1 - n), 3) + e.x1 * n * Math.pow((1 - n), 2) * 3 + e.x2 * Math.pow(n, 2) * (1 - n) * 3 + e.x * Math.pow(n, 3),
y: d.y * Math.pow((1 - n), 3) + e.y1 * n * Math.pow((1 - n), 2) * 3 + e.y2 * Math.pow(n, 2) * (1 - n) * 3 + e.y * Math.pow(n, 3)
};
var a = Utils.measureDistance(l, k);
if (a >= g[f] || n >= 1) {
if (h) {
var m = c + (n - c) / 2;
var j = {
x: d.x * Math.pow((1 - m), 3) + e.x1 * m * Math.pow((1 - m), 2) * 3 + e.x2 * Math.pow(m, 2) * (1 - m) * 3 + e.x * Math.pow(m, 3),
y: d.y * Math.pow((1 - m), 3) + e.y1 * m * Math.pow((1 - m), 2) * 3 + e.y2 * Math.pow(m, 2) * (1 - m) * 3 + e.y * Math.pow(m, 3)
};
this.lineTo(j.x, j.y);
this.lineTo(k.x, k.y)
} else {
this.moveTo(k.x, k.y)
}
h = !h;
l = k;
c = n;
f++;
if (f >= g.length) {
f = 0
}
}
}
this.moveTo(e.x, e.y)
} else {
this.bezierCurveTo(e.x1, e.y1, e.x2, e.y2, e.x, e.y)
}
this.prePoint = e;
if (this.beginPoint == null) {
this.beginPoint = e
}
},
quadraticCurve: function (e) {
if (typeof this.webkitLineDash != "undefined" && typeof this.lineDashOffset == "undefined" && this.lineWidth != 0) {
var g = this.webkitLineDash;
var d = this.prePoint;
var i = Utils.measureDistance(d, e);
var n = 0;
var b = 1 / i;
var l = d;
var f = 0;
var h = true;
var c = 0;
while (n < 1) {
n += b;
if (n > 1) {
n = 1
}
var k = {
x: d.x * Math.pow((1 - n), 2) + e.x1 * n * (1 - n) * 2 + e.x * Math.pow(n, 2),
y: d.y * Math.pow((1 - n), 2) + e.y1 * n * (1 - n) * 2 + e.y * Math.pow(n, 2)
};
var a = Utils.measureDistance(l, k);
if (a >= g[f] || n >= 1) {
if (h) {
var m = c + (n - c) / 2;
var j = {
x: d.x * Math.pow((1 - m), 2) + e.x1 * m * (1 - m) * 2 + e.x * Math.pow(m, 2),
y: d.y * Math.pow((1 - m), 2) + e.y1 * m * (1 - m) * 2 + e.y * Math.pow(m, 2)
};
this.lineTo(j.x, j.y);
this.lineTo(k.x, k.y)
} else {
this.moveTo(k.x, k.y)
}
h = !h;
l = k;
c = n;
f++;
if (f >= g.length) {
f = 0
}
}
}
this.moveTo(e.x, e.y)
} else {
this.quadraticCurveTo(e.x1, e.y1, e.x, e.y)
}
this.prePoint = e;
if (this.beginPoint == null) {
this.beginPoint = e
}
},
close: function () {
if (typeof this.webkitLineDash != "undefined" && typeof this.lineDashOffset == "undefined" && this.lineWidth != 0) {
var f = this.webkitLineDash;
var c = this.prePoint;
var d = this.beginPoint;
var h = Utils.measureDistance(c, d);
var k = 0;
var b = 1 / h;
var j = c;
var e = 0;
var g = true;
while (k < 1) {
k += b;
if (k > 1) {
k = 1
}
var i = {
x: (1 - k) * c.x + k * d.x,
y: (1 - k) * c.y + k * d.y
};
var a = Utils.measureDistance(j, i);
if (a >= f[e] || k >= 1) {
if (g) {
this.lineTo(i.x, i.y)
} else {
this.moveTo(i.x, i.y)
}
g = !g;
j = i;
e++;
if (e >= f.length) {
e = 0
}
}
}
}
this.closePath()
}
},
setLineDash: function (a, b) {
if (!a.setLineDash) {
a.setLineDash = function () { }
}
a.setLineDash(b);
a.mozDash = b;
a.webkitLineDash = b
},
renderShapePath: function (a, b, c, d) {
var e;
if (c && b.drawIcon) {
e = b.drawIcon(b.props.w, b.props.h)
} else {
e = b.getPath()
}
this.renderPath(a, b, e, c, d)
},
renderPath: function (m, k, o, b, f) {
var a = Utils.getShapeFillStyle(k.fillStyle, !b);
var p = Utils.getShapeLineStyle(k.lineStyle, !b);
for (var g = 0; g < o.length; g++) {
var c = o[g];
m.save();
var h = $.extend({}, p, c.lineStyle);
var l = $.extend({}, a, c.fillStyle);
var d = false;
if (h.lineStyle != "solid" && typeof m.lineDashOffset == "undefined" && l.type != "none") {
d = true
}
if (d) {
m.save();
m.beginPath();
m.lineWidth = 0;
delete m.webkitLineDash;
for (var e = 0; e < c.actions.length; e++) {
var n = c.actions[e];
this.actions[n.action].call(m, n)
}
this.fillShape(k, m, l, f);
m.restore()
}
m.beginPath();
m.beginPoint = null;
if (h.lineWidth) {
m.lineWidth = h.lineWidth;
if (h.lineStyle == "dashed") {
if (b) {
this.setLineDash(m, [h.lineWidth * 3, h.lineWidth * 1])
} else {
this.setLineDash(m, [h.lineWidth * 5, h.lineWidth * 2])
}
} else {
if (h.lineStyle == "dot") {
this.setLineDash(m, [h.lineWidth, h.lineWidth * 1.5])
} else {
if (h.lineStyle == "dashdot") {
this.setLineDash(m, [h.lineWidth * 5, h.lineWidth * 2, h.lineWidth, h.lineWidth * 2])
} else {
delete m.webkitLineDash
}
}
}
} else {
m.lineWidth = 0;
delete m.webkitLineDash
}
for (var e = 0; e < c.actions.length; e++) {
var n = c.actions[e];
this.actions[n.action].call(m, n)
}
if (d == false) {
this.fillShape(k, m, l, f)
}
if (h.lineWidth) {
m.lineWidth = h.lineWidth;
m.strokeStyle = "rgb(" + h.lineColor + ")";
m.stroke()
}
m.restore()
}
},
drawImage: function (a, b) {
var c = $(".shape_img[src='" + b.image + "']");
if (c.length == 0) {
c = $(""); b.html(i + "
"); if (typeof h.textPos != "undefined") { b.css({ left: h.textPos.x, top: h.textPos.y }); return } var j = this.getLinkerMidpoint(h); if (j.x != null) { var d = g.position(); b.css({ left: j.x.toScale() - d.left - b.width() / 2, top: j.y.toScale() - d.top - b.height() / 2 }) } }, getLinkerMidpoint: function (c) { var g = {}; if (c.linkerType == "normal") { g = { x: 0.5 * c.from.x + 0.5 * c.to.x, y: 0.5 * c.from.y + 0.5 * c.to.y } } else { if (c.linkerType == "curve") { var o = c.from; var m = c.points[0]; var h = c.points[1]; var f = c.to; g = { x: o.x * 0.125 + m.x * 0.375 + h.x * 0.375 + f.x * 0.125, y: o.y * 0.125 + m.y * 0.375 + h.y * 0.375 + f.y * 0.125 } } else { var i = []; i.push(c.from); i = i.concat(c.points); i.push(c.to); var l = 0; for (var b = 1; b < i.length; b++) { var m = i[b - 1]; var h = i[b]; var e = Utils.measureDistance(m, h); l += e } var k = l / 2; var a = 0; for (var b = 1; b < i.length; b++) { var m = i[b - 1]; var h = i[b]; var e = Utils.measureDistance(m, h); var j = a + e; if (j >= k) { var n = (k - a) / e; g = { x: (1 - n) * m.x + n * h.x, y: (1 - n) * m.y + n * h.y }; break } a = j } } } return g }, controlStatus: { resizeDir: [], rotatable: true }, drawControls: function (h) { var g = $("#shape_controls"); if (g.length == 0) { var c = $("#designer_canvas"); g = $("").appendTo(c); g.append(""); // g.append(""); // g.append(""); // g.append(""); // g.append(""); // g.append(""); // g.append(""); // g.append(""); // g.append(""); // Designer.op.shapeResizable(); g.append(""); // Designer.op.shapeRotatable(); g.append(""); Designer.op.groupShapeChangable(); $(".shape_controller").css({ "border-color": Designer.config.anchorColor, width: Designer.config.anchorSize - 2, height: Designer.config.anchorSize - 2 }) } $(".shape_controller").css({ "z-index": Model.orderList.length }); $(".change_shape_icon").hide(); g.show(); var e = 0; var k; var d; if (h.length == 1) { var j = Model.getShapeById(h[0]); k = j.props; e = j.props.angle; d = j.resizeDir; if (j.groupName && SchemaGroup.groupExists(j.groupName)) { $(".change_shape_icon").show() } } else { k = Utils.getControlBox(h); d = ["tl", "tr", "br", "bl"] } var a = true; for (var f = 0; f < h.length; f++) { var b = h[f]; var j = Model.getShapeById(b); if (j.attribute && j.attribute.rotatable == false) { a = false } if ((j.resizeDir && j.resizeDir.length == 0) || (j.parent && h.length > 1)) { d = [] } } this.controlStatus.rotatable = a; this.controlStatus.resizeDir = d; this.rotateControls(k, e); return g }, rotateControls: function (g, u) { var k = $("#shape_controls"); var l = Utils.getRotatedBox(g, u); var z = l.w.toScale(); var h = l.h.toScale(); k.css({ left: l.x.toScale(), top: l.y.toScale(), width: z, height: h, "z-index": Model.orderList.length }); var j = z + 20; var o = h + 20; var f = $("#controls_bounding"); f.attr({ width: j, height: o }); var p = f[0].getContext("2d"); p.lineJoin = "round"; if (this.controlStatus.resizeDir.length == 0) { p.lineWidth = 2; p.strokeStyle = Designer.config.selectorColor; p.globalAlpha = 0.8 } else { p.lineWidth = 1; p.strokeStyle = Designer.config.selectorColor; p.globalAlpha = 0.5 } p.save(); p.clearRect(0, 0, j, o); p.translate(j / 2, o / 2); p.rotate(u); p.translate(-j / 2, -o / 2); p.translate(9.5, 9.5); var b = { x: Math.round((g.x - l.x).toScale()), y: Math.round((g.y - l.y).toScale()), w: Math.floor(g.w.toScale() + 1), h: Math.floor(g.h.toScale() + 1) }; p.strokeRect(b.x, b.y, b.w, b.h); p.restore(); var y = 0 - Designer.config.anchorSize / 2; var s = {}; g = Utils.toScale(g); l = Utils.toScale(l); var v = { x: (g.x + g.w / 2), y: g.y + g.h / 2 }; k.children(".shape_controller").hide(); for (var r = 0; r < this.controlStatus.resizeDir.length; r++) { var n = this.controlStatus.resizeDir[r]; var a = $(".shape_controller[resizeDir=" + n + "]"); a.show(); var d, c; if (n.indexOf("l") >= 0) { d = g.x } else { if (n.indexOf("r") >= 0) { d = g.x + g.w } else { d = g.x + g.w / 2 } } if (n.indexOf("t") >= 0) { c = g.y } else { if (n.indexOf("b") >= 0) { c = g.y + g.h } else { c = g.y + g.h / 2 } } var e = Utils.getRotated(v, { x: d, y: c }, u); a.css({ left: e.x - l.x + y, top: e.y - l.y + y }) } var m = Math.PI / 8; k.children(".shape_controller").removeClass("s n e w"); if (u > m && u <= m * 3) { k.children("div[resizeDir=tl]").addClass("n"); k.children("div[resizeDir=tr]").addClass("e"); k.children("div[resizeDir=br]").addClass("s"); k.children("div[resizeDir=bl]").addClass("w"); k.children("div[resizeDir=l]").addClass("n w"); k.children("div[resizeDir=r]").addClass("s e"); k.children("div[resizeDir=b]").addClass("s w"); k.children("div[resizeDir=t]").addClass("n e") } else { if (u > m * 3 && u <= m * 5) { k.children("div[resizeDir=tl]").addClass("n e"); k.children("div[resizeDir=tr]").addClass("s e"); k.children("div[resizeDir=br]").addClass("s w"); k.children("div[resizeDir=bl]").addClass("n w"); k.children("div[resizeDir=l]").addClass("n"); k.children("div[resizeDir=r]").addClass("s"); k.children("div[resizeDir=b]").addClass("w"); k.children("div[resizeDir=t]").addClass("e") } else { if (u > m * 5 && u <= m * 7) { k.children("div[resizeDir=tl]").addClass("e"); k.children("div[resizeDir=tr]").addClass("s"); k.children("div[resizeDir=br]").addClass("w"); k.children("div[resizeDir=bl]").addClass("n"); k.children("div[resizeDir=l]").addClass("n e"); k.children("div[resizeDir=r]").addClass("s w"); k.children("div[resizeDir=b]").addClass("n w"); k.children("div[resizeDir=t]").addClass("s e") } else { if (u > m * 7 && u <= m * 9) { k.children("div[resizeDir=tl]").addClass("s e"); k.children("div[resizeDir=tr]").addClass("s w"); k.children("div[resizeDir=br]").addClass("n w"); k.children("div[resizeDir=bl]").addClass("n e"); k.children("div[resizeDir=l]").addClass("e"); k.children("div[resizeDir=r]").addClass("w"); k.children("div[resizeDir=b]").addClass("n"); k.children("div[resizeDir=t]").addClass("s") } else { if (u > m * 9 && u <= m * 11) { k.children("div[resizeDir=tl]").addClass("s"); k.children("div[resizeDir=tr]").addClass("w"); k.children("div[resizeDir=br]").addClass("n"); k.children("div[resizeDir=bl]").addClass("e"); k.children("div[resizeDir=l]").addClass("s e"); k.children("div[resizeDir=r]").addClass("n w"); k.children("div[resizeDir=b]").addClass("n e"); k.children("div[resizeDir=t]").addClass("s w") } else { if (u > m * 11 && u <= m * 13) { k.children("div[resizeDir=tl]").addClass("s w"); k.children("div[resizeDir=tr]").addClass("n w"); k.children("div[resizeDir=br]").addClass("n e"); k.children("div[resizeDir=bl]").addClass("s e"); k.children("div[resizeDir=l]").addClass("s"); k.children("div[resizeDir=r]").addClass("n"); k.children("div[resizeDir=b]").addClass("e"); k.children("div[resizeDir=t]").addClass("w") } else { if (u > m * 13 && u <= m * 15) { k.children("div[resizeDir=tl]").addClass("w"); k.children("div[resizeDir=tr]").addClass("n"); k.children("div[resizeDir=br]").addClass("e"); k.children("div[resizeDir=bl]").addClass("s"); k.children("div[resizeDir=l]").addClass("s w"); k.children("div[resizeDir=r]").addClass("n e"); k.children("div[resizeDir=b]").addClass("s e"); k.children("div[resizeDir=t]").addClass("n w") } else { k.children("div[resizeDir=tl]").addClass("n w"); k.children("div[resizeDir=tr]").addClass("n e"); k.children("div[resizeDir=br]").addClass("s e"); k.children("div[resizeDir=bl]").addClass("s w"); k.children("div[resizeDir=l]").addClass("w"); k.children("div[resizeDir=r]").addClass("e"); k.children("div[resizeDir=b]").addClass("s"); k.children("div[resizeDir=t]").addClass("n") } } } } } } } if (this.controlStatus.rotatable) { var x = k.find(".shape_rotater"); //x.show(); var w = { x: g.x + g.w / 2, y: g.y - 20 }; var t = Utils.getRotated(v, w, u); x.css({ top: t.y - 20 - l.y, left: t.x - 20.5 - l.x }); var q = x[0].getContext("2d"); q.lineWidth = 1; q.strokeStyle = Designer.config.selectorColor; q.fillStyle = "white"; q.save(); q.clearRect(0, 0, 41, 40); q.translate(20.5, 20); q.rotate(u); q.translate(-20.5, -20); q.beginPath(); q.moveTo(20.5, 20); q.lineTo(20.5, 40); q.stroke(); q.beginPath(); q.arc(20.5, 20, Designer.config.rotaterSize / 2, 0, Math.PI * 2); q.closePath(); q.fill(); q.stroke(); q.restore() } else { k.find(".shape_rotater").hide() } } } }; var Model = { define: {}, persistence: {}, orderList: [], maxZIndex: 0, linkerMap: { map: {}, add: function (b, a) { if (!this.map[b]) { this.map[b] = [] } if (this.map[b].indexOf(a) < 0) { this.map[b].push(a) } }, remove: function (b, a) { if (this.map[b]) { Utils.removeFromArray(this.map[b], a) } }, empty: function () { this.map = {} } }, groupMap: { map: {}, add: function (a, b) { this.map[a] = b }, push: function (a, b) { if (!this.map[a]) { this.map[a] = [] } this.map[a].push(b) }, remove: function (a) { delete this.map[a] }, empty: function () { this.map = {} } }, create: function (e, b, g) { var d = Utils.newId(); var c = Utils.copy(Schema.shapes[e]); c.id = d; c.props.x = b; c.props.y = g; c.props.zindex = Model.maxZIndex + 1; c.props = $.extend(true, {}, Schema.shapeDefaults.props, c.props); for (var f = 0; f < c.dataAttributes.length; f++) { var a = c.dataAttributes[f]; a.id = Utils.newId() } Designer.events.push("create", c); return c }, add: function (a, b) { this.addMulti([a], b) }, addMulti: function (b, e) { if (typeof e == "undefined") { e = true } var a = []; for (var d = 0; d < b.length; d++) { var c = b[d]; a.push(Utils.copy(c)); this.define.elements[c.id] = Utils.copy(c); this.persistence.elements[c.id] = Utils.copy(c) } this.build(); if (e) { MessageSource.send("create", a) } }, update: function (a) { this.updateMulti([a]) }, updateMulti: function (c) { var a = []; var b = []; for (var e = 0; e < c.length; e++) { var d = c[e]; if (this.define.elements[d.id]) { this.define.elements[d.id] = Utils.copy(d); b.push(Utils.copy(this.getPersistenceById(d.id))); a.push(Utils.copy(d)); this.persistence.elements[d.id] = Utils.copy(d) } } this.build(); var f = { shapes: b, updates: a }; MessageSource.send("update", f) }, remove: function (b, k) { if (typeof k == "undefined") { k = true } if (k) { b = Designer.events.push("beforeRemove", b) } var h = []; var n = []; var e = []; var o = []; var d = []; if (b.length == 0) { return false } for (var f = 0; f < b.length; f++) { var j = b[f]; if (j.name == "linker") { d.push(j.id) } else { o.push(j.id) } } for (var f = 0; f < b.length; f++) { var j = b[f]; h.push(Utils.copy(j)); $("#" + j.id).remove(); delete this.define.elements[j.id]; delete this.persistence.elements[j.id]; this.groupMap.remove(j.group); if (j.name == "linker") { if (j.from.id != null) { this.linkerMap.remove(j.from.id, j.id) } if (j.to.id != null) { this.linkerMap.remove(j.to.id, j.id) } } else { if (j.parent && o.indexOf(j.parent) < 0) { var l = Model.getShapeById(j.parent); if (l) { Utils.removeFromArray(l.children, j.id); if (n.indexOf(j.parent) < 0) { n.push(j.parent); e.push(l) } } } var p = this.getShapeLinkers(j.id); if (p && p.length > 0) { for (var g = 0; g < p.length; g++) { var a = p[g]; if (d.indexOf(a) < 0) { var c = this.getShapeById(a); if (c.from.id != null && c.from.id == j.id) { c.from.id = null; c.from.angle = null } if (c.to.id != null && c.to.id == j.id) { c.to.id = null; c.to.angle = null } if (n.indexOf(a) < 0) { n.push(a); e.push(c) } } } } delete this.linkerMap.map[j.id] } } this.build(); MessageSource.beginBatch(); MessageSource.send("remove", h); if (k) { var m = Designer.events.push("removed", { shapes: b, changedIds: n, range: o }); if (m && m.length) { e = e.concat(m) } } if (e.length > 0) { this.updateMulti(e) } MessageSource.commit(); return true }, updatePage: function (a, c) { var b = $.extend(Model.define.page, a); var d = { page: Utils.copy(Model.persistence.page), update: Utils.copy(b) }; Model.persistence.page = Utils.copy(b); MessageSource.send("updatePage", d); Designer.initialize.initCanvas() }, setTheme: function (b) { Model.define.theme = b; var c = { theme: Utils.copy(Model.persistence.theme), update: Utils.copy(b) }; Model.persistence.theme = Utils.copy(b); MessageSource.send("setTheme", c); for (var d in Model.define.elements) { var a = Model.getShapeById(d); Designer.painter.renderShape(a) } }, getShapeById: function (a) { return this.define.elements[a] }, getPersistenceById: function (a) { return this.persistence.elements[a] }, build: function () { this.orderList = []; this.linkerMap.empty(); for (var e in Model.define.elements) { var a = Model.getShapeById(e); this.orderList.push({ id: a.id, zindex: a.props.zindex }); if (a.name == "linker") { if (a.from.id != null) { this.linkerMap.add(a.from.id, a.id) } if (a.to.id != null) { this.linkerMap.add(a.to.id, a.id) } } if (a.group) { this.groupMap.push(a.group, a.id) } } this.orderList.sort(function d(g, f) { return g.zindex - f.zindex }); for (var c = 0; c < Model.orderList.length; c++) { var e = Model.orderList[c].id; $("#" + e).css("z-index", c) } var b = 0; if (this.orderList.length > 0) { b = this.orderList[this.orderList.length - 1].zindex } this.maxZIndex = b }, getShapeLinkers: function (a) { return this.linkerMap.map[a] }, getGroupShapes: function (a) { return this.groupMap.map[a] }, changeShape: function (b, e) { var c = Utils.copy(Schema.shapes[e]); b.name = e; b.title = c.shapeName; var a = c.attribute; if (b.attribute && typeof b.attribute.collapsed != "undefined") { a.collapsed = b.attribute.collapsed } if (b.attribute && typeof b.attribute.collapseW != "undefined") { a.collapseW = b.attribute.collapseW } if (b.attribute && typeof b.attribute.collapseH != "undefined") { a.collapseH = b.attribute.collapseH } if (b.attribute && b.attribute.markers && b.attribute.markers.indexOf("expand") >= 0) { if (!a.markers) { a.markers = [] } a.markers.push("expand") } b.attribute = a; b.dataAttributes = c.dataAttributes; if (b.dataAttributes) { for (var d = 0; d < b.dataAttributes.length; d++) { var a = b.dataAttributes[d]; a.id = Utils.newId() } } b.path = c.path; b.textBlock = c.textBlock; b.anchors = c.anchors; if (b.fillStyle && b.fillStyle.type == "image" && c.fillStyle && c.fillStyle.type == "image") { b.fillStyle = c.fillStyle } Schema.initShapeFunctions(b); Designer.painter.renderShape(b) } }; var Utils = { getDomById: function (a) { return document.getElementById(a) }, newId: function () { var b = Math.random(); var a = (b + new Date().getTime()); return a.toString(16).replace(".", "") }, getShapeByPosition: function (M, L, G) { var m = []; for (var U = Model.orderList.length - 1; U >= 0; U--) { var P = Model.orderList[U].id; var V = $("#" + P); var s = Model.getShapeById(P); if (s.attribute && s.attribute.collapseBy) { continue } var u = V.position(); var F = M - u.left; var E = L - u.top; var Q = { x: u.left, y: u.top, w: V.width(), h: V.height() }; var S = V.find(".shape_canvas")[0]; var k = S.getContext("2d"); var c = this.pointInRect(M, L, Q); if (s.name == "linker") { if (!c) { continue } if (G) { continue } var N = 10; N = N.toScale(); var D = { x: M - N, y: L - N, w: N * 2, h: N * 2 }; if (this.pointInRect(s.to.x.toScale(), s.to.y.toScale(), D)) { var t = { type: "linker_point", point: "end", shape: s }; m.push(t); continue } else { if (this.pointInRect(s.from.x.toScale(), s.from.y.toScale(), D)) { var t = { type: "linker_point", point: "from", shape: s }; m.push(t); continue } else { var v = V.find(".text_canvas"); var A = v.position(); var D = { x: A.left, y: A.top, w: v.width(), h: v.height() }; if (this.pointInRect(F, E, D)) { var t = { type: "linker_text", shape: s }; m.push(t); continue } N = 7; N = N.toScale(); var B = this.pointInLinker({ x: M.restoreScale(), y: L.restoreScale() }, s, N); if (B > -1) { var t = { type: "linker", shape: s, pointIndex: B }; m.push(t); continue } } } } else { if (c && s.locked && !G) { if (k.isPointInPath(F, E)) { var t = { type: "shape", shape: s }; m.push(t) } continue } var N = 7; if (c) { N = N.toScale(); var D = { x: M - N, y: L - N, w: N * 2, h: N * 2 }; var I = { x: s.props.x + s.props.w / 2, y: s.props.y + s.props.h / 2 }; var q = s.getAnchors(); var t = null; for (var h = 0; h < q.length; h++) { var f = q[h]; f = this.getRotated(I, { x: s.props.x + f.x, y: s.props.y + f.y }, s.props.angle); if (Utils.pointInRect(f.x.toScale(), f.y.toScale(), D)) { var r = Utils.getPointAngle(P, f.x, f.y, N); f.angle = r; t = { type: "bounding", shape: s, linkPoint: f }; if (k.isPointInPath(F, E)) { t.inPath = true } break } } if (t != null) { m.push(t); continue } } if (s.dataAttributes) { var t = null; for (var l = 0; l < s.dataAttributes.length; l++) { var p = s.dataAttributes[l]; if (p.type == "link" && p.showType && p.showType != "none") { var C = V.children("#attr_canvas_" + p.id); if (C.length > 0) { var w = C.position(); var K = F - w.left; var J = E - w.top; var n = C[0].getContext("2d"); if (n.isPointInPath(K, J)) { t = { type: "dataAttribute", shape: s, attribute: p }; break } } } } if (t != null) { m.push(t); continue } } if (!c) { continue } if (k.isPointInPath(F, E)) { if (G) { var q = s.getAnchors(); if (q && q.length) { var z = false; for (var T = U + 1; T < Model.orderList.length; T++) { var a = Model.orderList[T].id; var R = Model.getShapeById(a); if (Utils.rectInRect(R.props, s.props)) { z = true; continue } } if (z) { continue } var t = { type: "shape", shape: s }; m.push(t); continue } else { continue } } else { var t = { type: "shape", shape: s }; m.push(t); continue } } else { if (!s.attribute || typeof s.attribute.linkable == "undefined" || s.attribute.linkable) { var r = Utils.getPointAngle(P, M.restoreScale(), L.restoreScale(), N); if (r != null) { var t = null; var b = { angle: r }; for (var H = 1; H <= N; H++) { if (r == 0) { b.x = F + H; b.y = E } else { if (r < Math.PI / 2) { b.x = F + H * Math.cos(r); b.y = E + H * Math.sin(r) } else { if (r == Math.PI / 2) { b.x = F; b.y = E + H } else { if (r < Math.PI) { b.x = F - H * Math.sin(r - Math.PI / 2); b.y = E + H * Math.cos(r - Math.PI / 2) } else { if (r == Math.PI) { b.x = F - H; b.y = E } else { if (r < Math.PI / 2 * 3) { b.x = F - H * Math.cos(r - Math.PI); b.y = E - H * Math.sin(r - Math.PI) } else { if (r == Math.PI / 2 * 3) { b.x = F; b.y = E - H } else { b.x = F + H * Math.sin(r - Math.PI / 2 * 3); b.y = E - H * Math.cos(r - Math.PI / 2 * 3) } } } } } } } if (k.isPointInPath(b.x, b.y)) { b.x += u.left; b.y += u.top; b.x = b.x.restoreScale(); b.y = b.y.restoreScale(); t = { type: "bounding", shape: s, linkPoint: b }; break } } if (t != null) { m.push(t); continue } } } } } } var t = null; if (m.length == 1) { t = m[0] } if (m.length > 1 && G) { t = m[0] } else { if (m.length > 1) { var g = m[0]; if (g.type == "bounding" && g.type != "linker_point" && g.type != "linker") { return g } var B = []; var d = []; var o = []; for (var U = 0; U < m.length; U++) { var O = m[U]; if (O.type == "bounding") { o.push(O) } else { if (O.type == "linker") { B.push(O) } else { if (O.type == "linker_point") { d.push(O) } } } } if (o.length > 0 && d.length > 0) { for (var U = 0; U < o.length; U++) { var O = o[U]; if (O.inPath) { t = O; break } } } if (t == null && d.length > 0) { d.sort(function e(j, i) { if (Utils.isSelected(j.shape.id) && !Utils.isSelected(i.shape.id)) { return -1 } else { if (!Utils.isSelected(j.shape.id) && Utils.isSelected(i.shape.id)) { return 1 } else { return i.shape.props.zindex - j.shape.props.zindex } } }); t = d[0] } if (t == null && B.length > 0) { B.sort(function e(j, i) { if (Utils.isSelected(j.shape.id) && !Utils.isSelected(i.shape.id)) { return -1 } else { if (!Utils.isSelected(j.shape.id) && Utils.isSelected(i.shape.id)) { return 1 } else { return i.shape.props.zindex - j.shape.props.zindex } } }); t = B[0] } if (t == null) { t = m[0] } } } return t }, checkCross: function (i, g, f, e) { var a = false; var h = (g.x - i.x) * (e.y - f.y) - (g.y - i.y) * (e.x - f.x); if (h != 0) { var c = ((i.y - f.y) * (e.x - f.x) - (i.x - f.x) * (e.y - f.y)) / h; var b = ((i.y - f.y) * (g.x - i.x) - (i.x - f.x) * (g.y - i.y)) / h; if ((c >= 0) && (c <= 1) && (b >= 0) && (b <= 1)) { a = true } } return a }, rectCross: function (h, g) { var d = h.x; var f = h.x + h.w; var j = h.y; var b = h.y + h.h; var c = g.x; var e = g.x + g.w; var i = g.y; var a = g.y + g.h; if (((d < e) && (c < f)) && ((j < a) && (i < b))) { return true } else { return false } }, rectInRect: function (c, a) { var f = { x: c.x, y: c.y }; var e = { x: c.x + c.w, y: c.y }; var d = { x: c.x + c.w, y: c.y + c.h }; var b = { x: c.x, y: c.y + c.h }; if (this.pointInRect(f.x, f.y, a) && this.pointInRect(e.x, e.y, a) && this.pointInRect(d.x, d.y, a) && this.pointInRect(b.x, b.y, a)) { return true } else { return false } }, pointInPolygon: function (a, c) { var h, g, f, e; h = a; g = { x: -1000000, y: a.y }; var d = 0; for (var b = 0; b < c.length - 1; b++) { f = c[b]; e = c[b + 1]; if (Utils.checkCross(h, g, f, e) == true) { d++ } } f = c[c.length - 1]; e = c[0]; if (Utils.checkCross(h, g, f, e) == true) { d++ } return (d % 2 == 0) ? false : true }, pointInRect: function (b, a, c) { if (b >= c.x && b <= c.x + c.w && a >= c.y && a <= c.y + c.h) { return true } return false }, pointInLinker: function (h, e, f) { var j = this.getLinkerLinePoints(e); var c = { x: h.x - f, y: h.y }; var b = { x: h.x + f, y: h.y }; var a = { x: h.x, y: h.y - f }; var l = { x: h.x, y: h.y + f }; for (var d = 1; d < j.length; d++) { var k = j[d - 1]; var i = j[d]; var g = this.checkCross(c, b, k, i); if (g) { return d } g = this.checkCross(a, l, k, i); if (g) { return d } } return -1 }, getLinkerLength: function (c) { var b = this.getLinkerLinePoints(c); var a = 0; for (var f = 1; f < b.length; f++) { var h = b[f - 1]; var e = b[f]; var g = Utils.measureDistance(h, e); a += g } return a }, getShapesByRange: function (c) { var a = []; for (var e in Model.define.elements) { var b = Model.getShapeById(e); var d = b.props; if (b.name == "linker") { d = this.getLinkerBox(b) } else { d = this.getShapeBox(b) } if (this.pointInRect(d.x, d.y, c) && this.pointInRect(d.x + d.w, d.y, c) && this.pointInRect(d.x + d.w, d.y + d.h, c) && this.pointInRect(d.x, d.y + d.h, c)) { a.push(b.id) } } return a }, getControlBox: function (e) { var g = { x1: null, y1: null, x2: null, y2: null }; for (var b = 0; b < e.length; b++) { var f = e[b]; var a = Model.getShapeById(f); var d; if (a.name == "linker") { d = this.getLinkerBox(a) } else { d = this.getShapeBox(a) } if (g.x1 == null || d.x < g.x1) { g.x1 = d.x } if (g.y1 == null || d.y < g.y1) { g.y1 = d.y } if (g.x2 == null || d.x + d.w > g.x2) { g.x2 = d.x + d.w } if (g.y2 == null || d.y + d.h > g.y2) { g.y2 = d.y + d.h } } var c = { x: g.x1, y: g.y1, w: g.x2 - g.x1, h: g.y2 - g.y1 }; return c }, getShapesBounding: function (a) { var f = { x1: null, y1: null, x2: null, y2: null }; for (var c = 0; c < a.length; c++) { var b = a[c]; var d; if (b.name == "linker") { d = this.getLinkerBox(b) } else { d = b.props } if (f.x1 == null || d.x < f.x1) { f.x1 = d.x } if (f.y1 == null || d.y < f.y1) { f.y1 = d.y } if (f.x2 == null || d.x + d.w > f.x2) { f.x2 = d.x + d.w } if (f.y2 == null || d.y + d.h > f.y2) { f.y2 = d.y + d.h } } var e = { x: f.x1, y: f.y1, w: f.x2 - f.x1, h: f.y2 - f.y1 }; return e }, getShapeContext: function (b) { var a = Utils.getDomById(b); return a.getElementsByTagName("canvas")[0].getContext("2d") }, selectIds: [], selectShape: function (h, d) { if (typeof h == "string") { var m = h; h = []; h.push(m) } if (h.length <= 0) { return } var j = []; for (var f = 0; f < h.length; f++) { var b = h[f]; var l = Model.getShapeById(b); if (l.attribute && l.attribute.collapseBy) { continue } j.push(b); if (l.group) { var c = Model.getGroupShapes(l.group); Utils.mergeArray(j, c) } } var a = []; for (var f = 0; f < j.length; f++) { var b = j[f]; var l = Model.getShapeById(b); if (l.parent && l.resizeDir.length == 0 && a.indexOf(l.parent) < 0) { a.push(l.parent) } else { if (a.indexOf(b) < 0) { a.push(b) } } } h = a; Utils.removeAnchors(); Utils.selectIds = []; for (var k = 0; k < h.length; k++) { var m = h[k]; var l = Model.getShapeById(m); Utils.selectIds.push(m); if (l.name == "linker") { if (this.isLocked(l.id)) { Utils.showLockers(l) } else { Designer.painter.renderLinker(l) } } else { if (this.isLocked(l.id)) { Utils.showLockers(l) } else { Utils.showAnchors(l) } } } var a = Utils.getSelectedIds(); var n = false; if (a.length == 1) { var g = Model.getShapeById(a[0]); if (g.name == "linker") { n = true; Utils.showLinkerControls() } } if (a.length > 0 && !n) { var e = Designer.painter.drawControls(a) } if (typeof d == "undefined") { d = true } if (this.selectCallback && d) { this.selectCallback() } Designer.events.push("selectChanged"); this.showLinkerCursor() }, selectCallback: null, unselect: function () { var c = this.selectIds; this.selectIds = []; for (var b = 0; b < c.length; b++) { var d = c[b]; var a = Model.getShapeById(d); if (a.name == "linker") { Designer.painter.renderLinker(a) } } $("#shape_controls").hide(); Utils.removeLockers(); Utils.removeAnchors(); Designer.events.push("selectChanged"); this.hideLinkerCursor(); this.hideLinkerControls() }, getSelected: function () { var a = []; for (var b = 0; b < this.selectIds.length; b++) { var d = this.selectIds[b]; if (!Utils.isLocked(d)) { var c = Model.getShapeById(d); a.push(c) } } return a }, getSelectedIds: function () { var a = []; for (var b = 0; b < this.selectIds.length; b++) { var c = this.selectIds[b]; if (!Utils.isLocked(c)) { a.push(c) } } return a }, getSelectedLinkers: function () { var a = []; for (var b = 0; b < this.selectIds.length; b++) { var d = this.selectIds[b]; if (!Utils.isLocked(d)) { var c = Model.getShapeById(d); if (c.name == "linker") { a.push(c) } } } return a }, getSelectedLinkerIds: function () { var a = []; for (var b = 0; b < this.selectIds.length; b++) { var d = this.selectIds[b]; if (!Utils.isLocked(d)) { var c = Model.getShapeById(d); if (c.name == "linker") { a.push(d) } } } return a }, getSelectedShapeIds: function () { var a = []; for (var b = 0; b < this.selectIds.length; b++) { var d = this.selectIds[b]; if (!Utils.isLocked(d)) { var c = Model.getShapeById(d); if (c.name != "linker") { a.push(d) } } } return a }, getSelectedLockedIds: function () { var a = []; for (var b = 0; b < this.selectIds.length; b++) { var c = this.selectIds[b]; if (Utils.isLocked(c)) { a.push(c) } } return a }, getSelectedGroups: function () { var a = []; for (var c = 0; c < this.selectIds.length; c++) { var d = this.selectIds[c]; var b = Model.getShapeById(d); if (b.group && a.indexOf(b.group) < 0) { a.push(b.group) } } return a }, isSelected: function (a) { if (this.selectIds.indexOf(a) >= 0 && !this.isLocked(a)) { return true } return false }, isLocked: function (a) { // console.log("Model.getShapeById(a)", Model.getShapeById(a)); if (!Model.getShapeById(a)) return false if (Model.getShapeById(a).locked) { return true } else { return false } }, linkerCursorTimer: null, showLinkerCursor: function () { this.hideLinkerCursor(); var l = Utils.getSelectedIds(); if (l.length == 1) { var c = Model.getShapeById(l[0]); if (c.name != "linker") { var f = Model.linkerMap.map[c.id]; if (f && f.length) { var m = []; for (var o = 0; o < f.length; o++) { var v = f[o]; var j = Model.getShapeById(v); if (c.id != j.from.id || !j.to.id) { continue } var q = this.getLinkerLength(j).toScale(); var n = []; if (j.linkerType == "broken") { n.push({ x: j.from.x.toScale(), y: j.from.y.toScale(), t: 0 }); for (var t = 0; t < j.points.length; t++) { var k = j.points[t]; n.push({ x: k.x.toScale(), y: k.y.toScale() }) } n.push({ x: j.to.x.toScale(), y: j.to.y.toScale() }); var s = 0; for (var t = 1; t < n.length; t++) { var b = n[t - 1]; var a = n[t]; s += Utils.measureDistance(b, a); a.t = s / q } } var h = Math.floor(q / 120) + 1; var e = 3 / q; var u = (Math.ceil(q / 120) * 120) / q; var r = 0; while (r < q) { var g = { t: r / q, step: e, linker: j, points: n, maxT: u }; m.push(g); r += 120 } } // this.playLinkerCursor(m)//选择节点组件，其下面的直接连线会有动态效果 } } } }, playLinkerCursor: function (f) { for (var c = 0; c < f.length; c++) { var h = f[c]; var g = $("").appendTo("#designer_canvas"); var e = h.linker; var a = Utils.getLinkerLineStyle(e.lineStyle); var b = (a.lineWidth + 2).toScale(); if (b < 5) { b = 5 } var d = b / 2; h.half = d; h.dom = g; g.css({ width: b, height: b, "-webkit-border-radius": d, "-moz-border-radius": d, "-ms-border-radius": d, "-o-border-radius": d, "border-radius": d, "z-index": $("#" + e.id).css("z-index") }) } this.linkerCursorTimer = setInterval(function () { for (var j = 0; j < f.length; j++) { var q = f[j]; var l = q.linker; if (q.t >= q.maxT) { q.t = 0; q.dom.show() } var u = q.t; if (l.linkerType == "broken") { for (var k = 1; k < q.points.length; k++) { var r = q.points[k - 1]; var p = q.points[k]; if (u >= r.t && u < p.t) { var v = (u - r.t) / (p.t - r.t); var n = (1 - v) * r.x + v * p.x; var m = (1 - v) * r.y + v * p.y; q.dom.css({ left: n - q.half, top: m - q.half }); break } } } else { if (l.linkerType == "curve") { var s = l.from; var r = l.points[0]; var p = l.points[1]; var o = l.to; var n = s.x.toScale() * Math.pow((1 - u), 3) + r.x.toScale() * u * Math.pow((1 - u), 2) * 3 + p.x.toScale() * Math.pow(u, 2) * (1 - u) * 3 + o.x.toScale() * Math.pow(u, 3); var m = s.y.toScale() * Math.pow((1 - u), 3) + r.y.toScale() * u * Math.pow((1 - u), 2) * 3 + p.y.toScale() * Math.pow(u, 2) * (1 - u) * 3 + o.y.toScale() * Math.pow(u, 3); q.dom.css({ left: n - q.half, top: m - q.half }) } else { var n = (1 - u) * l.from.x.toScale() + u * l.to.x.toScale(); var m = (1 - u) * l.from.y.toScale() + u * l.to.y.toScale(); q.dom.css({ left: n - q.half, top: m - q.half }) } } q.t += q.step; if (q.t >= 1) { q.dom.hide() } } }, 30) }, hideLinkerCursor: function () { if (this.linkerCursorTimer) { clearInterval(this.linkerCursorTimer) } $(".linker_cursor").remove() }, showLinkerControls: function () { this.hideLinkerControls(); var b = Utils.getSelectedIds(); var c = null; if (b.length == 1) { var a = Model.getShapeById(b[0]); if (a.name == "linker" && a.linkerType == "curve") { c = a } } if (c == null) { return } function d(i, h) { var g = null; var n = null; if (h == "from") { g = i.from; n = i.points[0] } else { g = i.to; n = i.points[1] } var j = Utils.measureDistance(g, n).toScale() - 6; var m = { x: (0.5 * g.x + 0.5 * n.x).toScale(), y: (0.5 * g.y + 0.5 * n.y).toScale() }; var f = Utils.getAngle(g, n) + Math.PI / 2; var o = $("").appendTo("#designer_canvas"); var l = $("").appendTo("#designer_canvas"); var e = Math.round(f / (Math.PI * 2) * 360); var k = "rotate(" + e + "deg)"; o.css({ left: m.x, top: m.y - j / 2, height: j, "z-index": Model.orderList.length, "-webkit-transform": k, "-ms-transform": k, "-o-transform": k, "-moz-transform": k, transform: k }); l.css({ left: n.x.toScale() - 4, top: n.y.toScale() - 4, "z-index": Model.orderList.length }); l.attr("ty", h); l.unbind().bind("mousedown", function (p) { i = Model.getShapeById(i.id); var q = null; if (h == "from") { q = i.points[0] } else { q = i.points[1] } p.stopPropagation(); l.addClass("moving"); Designer.op.changeState("changing_curve"); $(document).bind("mousemove.change_curve", function (r) { var s = Utils.getRelativePos(r.pageX, r.pageY, $("#designer_canvas")); q.x = s.x; q.y = s.y; Designer.painter.renderLinker(i); Model.define.elements[i.id] = i; Utils.showLinkerControls(); $(".linker_control_point[ty=" + l.attr("ty") + "]").addClass("moving"); $(document).unbind("mouseup.changed_curve").bind("mouseup.changed_curve", function (t) { Model.update(i); $(document).unbind("mouseup.changed_curve") }) }); $(document).unbind("mouseup.change_curve").bind("mouseup.change_curve", function (r) { $(document).unbind("mouseup.change_curve"); $(document).unbind("mousemove.change_curve"); $(".linker_control_point").removeClass("moving"); Designer.op.resetState() }) }); Utils.hideLinkerControls(); return l } d(c, "from"); d(c, "to") }, hideLinkerControls: function () { $(".linker_control_line").remove(); $(".linker_control_point").remove() }, showAnchors: function (i) { if ($(".shape_contour[forshape=" + i.id + "]").length > 0) { return } var f = $("").appendTo($("#designer_canvas")); f.css({ left: i.props.x.toScale(), top: i.props.y.toScale(), "z-index": Model.orderList.length + 1 }); if (!Utils.isSelected(i.id)) { f.addClass("hovered_contour") } var c = Designer.config.anchorSize - 2; var b = { "border-color": Designer.config.anchorColor, "border-radius": Designer.config.anchorSize / 2, width: c, height: c }; var a = i.getAnchors(); var h = { x: i.props.w / 2, y: i.props.h / 2 }; var e = i.props.angle; for (var j = 0; j < a.length; j++) { var g = a[j]; var k = $("").appendTo(f); var d = this.getRotated(h, g, e); b.left = d.x.toScale() - Designer.config.anchorSize / 2; b.top = d.y.toScale() - Designer.config.anchorSize / 2; k.css(b) } }, hideAnchors: function () { $(".hovered_contour").remove() }, removeAnchors: function () { $(".shape_contour").remove() }, showLockers: function (d) { var j = $("#" + d.id); var f = j.position(); function c() { var n = $("").appendTo(j); var m = n[0].getContext("2d"); m.strokeStyle = "#777"; m.lineWidth = 1; var l = 9; m.beginPath(); m.moveTo(2, 2); m.lineTo(l, l); m.moveTo(2, l); m.lineTo(l, 2); m.stroke(); return n } function e(l) { var m = c(); m.css({ left: l.x.toScale() - f.left - 5, top: l.y.toScale() - f.top - 5 }) } if (d.name != "linker") { var b = d.props; var a = { x: b.x + b.w / 2, y: b.y + b.h / 2 }; var k = this.getRotated(a, { x: b.x, y: b.y }, d.props.angle); e(k); var i = this.getRotated(a, { x: b.x + b.w, y: b.y }, d.props.angle); e(i); var h = this.getRotated(a, { x: b.x + b.w, y: b.y + b.h }, d.props.angle); e(h); var g = this.getRotated(a, { x: b.x, y: b.y + b.h }, d.props.angle); e(g) } else { e(d.from); e(d.to) } }, removeLockers: function () { $(".shape_locker").remove() }, measureDistance: function (d, c) { var b = c.y - d.y; var a = c.x - d.x; return Math.sqrt(Math.pow(b, 2) + Math.pow(a, 2)) }, removeFromArray: function (c, b) { var a = c.indexOf(b); if (a >= 0) { c.splice(a, 1) } return c }, addToArray: function (c, b) { var a = c.indexOf(b); if (a < 0) { c.push(b) } return c }, mergeArray: function (b, a) { for (var c = 0; c < a.length; c++) { var d = a[c]; if (b.indexOf(d) < 0) { b.push(d) } } return b }, getCirclePoints: function (a, h, e) { var g = Math.PI / 18; var d = []; for (var c = 0; c < 36; c++) { var b = g * c; var f = { x: a - Math.cos(b) * e, y: h - Math.sin(b) * e, angle: b }; d.push(f) } return d }, getPointAngle: function (n, q, o, a) { var j = $("#" + n).position(); var h = Utils.getShapeContext(n); q = q.toScale() - j.left; o = o.toScale() - j.top; var b = this.getCirclePoints(q, o, a); var m = b.length; var t = false; for (var k = 0; k < m; k++) { var c = b[k]; if (h.isPointInPath(c.x, c.y)) { c.inPath = true; t = true } else { c.inPath = false } } if (t == false) { return null } var d = null; var g = null; for (var k = 0; k < m; k++) { var c = b[k]; if (!c.inPath) { if (d == null) { var f = b[(k - 1 + m) % m]; if (f.inPath) { d = c.angle } } if (g == null) { var l = b[(k + 1 + m) % m]; if (l.inPath) { g = c.angle } } if (d != null && g != null) { break } } } var s = (Math.PI * 2 + g - d) % (Math.PI * 2) / 2; var e = (d + s) % (Math.PI * 2); return e }, getAngleDir: function (b) { var a = Math.PI; if (b >= a / 4 && b < a / 4 * 3) { return 1 } else { if (b >= a / 4 * 3 && b < a / 4 * 5) { return 2 } else { if (b >= a / 4 * 5 && b < a / 4 * 7) { return 3 } else { return 4 } } } }, getLinkerPoints: function (t) { var A = []; if (t.linkerType == "broken") { var C = Math.PI; var w = t.from; var d = t.to; var m = Math.abs(d.x - w.x); var D = Math.abs(d.y - w.y); var r = 30; if (w.id != null && d.id != null) { var c = this.getAngleDir(w.angle); var b = this.getAngleDir(d.angle); var g, i, l; if (c == 1 && b == 1) { if (w.y < d.y) { g = w; i = d; l = false } else { g = d; i = w; l = true } var h = Model.getShapeById(g.id).props; var v = Model.getShapeById(i.id).props; if (i.x >= h.x - r && i.x <= h.x + h.w + r) { var o; if (i.x < h.x + h.w / 2) { o = h.x - r } else { o = h.x + h.w + r } var n = g.y - r; A.push({ x: g.x, y: n }); A.push({ x: o, y: n }); n = i.y - r; A.push({ x: o, y: n }); A.push({ x: i.x, y: n }) } else { var n = g.y - r; A.push({ x: g.x, y: n }); A.push({ x: i.x, y: n }) } } else { if (c == 3 && b == 3) { if (w.y > d.y) { g = w; i = d; l = false } else { g = d; i = w; l = true } var h = Model.getShapeById(g.id).props; var v = Model.getShapeById(i.id).props; if (i.x >= h.x - r && i.x <= h.x + h.w + r) { var n = g.y + r; var o; if (i.x < h.x + h.w / 2) { o = h.x - r } else { o = h.x + h.w + r } A.push({ x: g.x, y: n }); A.push({ x: o, y: n }); n = i.y + r; A.push({ x: o, y: n }); A.push({ x: i.x, y: n }) } else { var n = g.y + r; A.push({ x: g.x, y: n }); A.push({ x: i.x, y: n }) } } else { if (c == 2 && b == 2) { if (w.x > d.x) { g = w; i = d; l = false } else { g = d; i = w; l = true } var h = Model.getShapeById(g.id).props; var v = Model.getShapeById(i.id).props; if (i.y >= h.y - r && i.y <= h.y + h.h + r) { var o = g.x + r; var n; if (i.y < h.y + h.h / 2) { n = h.y - r } else { n = h.y + h.h + r } A.push({ x: o, y: g.y }); A.push({ x: o, y: n }); o = i.x + r; A.push({ x: o, y: n }); A.push({ x: o, y: i.y }) } else { var o = g.x + r; A.push({ x: o, y: g.y }); A.push({ x: o, y: i.y }) } } else { if (c == 4 && b == 4) { if (w.x < d.x) { g = w; i = d; l = false } else { g = d; i = w; l = true } var h = Model.getShapeById(g.id).props; var v = Model.getShapeById(i.id).props; if (i.y >= h.y - r && i.y <= h.y + h.h + r) { var o = g.x - r; var n; if (i.y < h.y + h.h / 2) { n = h.y - r } else { n = h.y + h.h + r } A.push({ x: o, y: g.y }); A.push({ x: o, y: n }); o = i.x - r; A.push({ x: o, y: n }); A.push({ x: o, y: i.y }) } else { var o = g.x - r; A.push({ x: o, y: g.y }); A.push({ x: o, y: i.y }) } } else { if ((c == 1 && b == 3) || (c == 3 && b == 1)) { if (c == 1) { g = w; i = d; l = false } else { g = d; i = w; l = true } var h = Model.getShapeById(g.id).props; var v = Model.getShapeById(i.id).props; if (i.y <= g.y) { var n = g.y - D / 2; A.push({ x: g.x, y: n }); A.push({ x: i.x, y: n }) } else { var a = h.x + h.w; var j = v.x + v.w; var n = g.y - r; var o; if (j >= h.x && v.x <= a) { var z = h.x + h.w / 2; if (i.x < z) { o = h.x < v.x ? h.x - r : v.x - r } else { o = a > j ? a + r : j + r } if (v.y < g.y) { n = v.y - r } } else { if (i.x < g.x) { o = j + (h.x - j) / 2 } else { o = a + (v.x - a) / 2 } } A.push({ x: g.x, y: n }); A.push({ x: o, y: n }); n = i.y + r; A.push({ x: o, y: n }); A.push({ x: i.x, y: n }) } } else { if ((c == 2 && b == 4) || (c == 4 && b == 2)) { if (c == 2) { g = w; i = d; l = false } else { g = d; i = w; l = true } var h = Model.getShapeById(g.id).props; var v = Model.getShapeById(i.id).props; if (i.x > g.x) { var o = g.x + m / 2; A.push({ x: o, y: g.y }); A.push({ x: o, y: i.y }) } else { var u = h.y + h.h; var p = v.y + v.h; var o = g.x + r; var n; if (p >= h.y && v.y <= u) { var z = h.y + h.h / 2; if (i.y < z) { n = h.y < v.y ? h.y - r : v.y - r } else { n = u > p ? u + r : p + r } if (v.x + v.w > g.x) { o = v.x + v.w + r } } else { if (i.y < g.y) { n = p + (h.y - p) / 2 } else { n = u + (v.y - u) / 2 } } A.push({ x: o, y: g.y }); A.push({ x: o, y: n }); o = i.x - r; A.push({ x: o, y: n }); A.push({ x: o, y: i.y }) } } else { if ((c == 1 && b == 2) || (c == 2 && b == 1)) { if (c == 2) { g = w; i = d; l = false } else { g = d; i = w; l = true } var h = Model.getShapeById(g.id).props; var v = Model.getShapeById(i.id).props; if (i.x > g.x && i.y > g.y) { A.push({ x: i.x, y: g.y }) } else { if (i.x > g.x && v.x > g.x) { var o; if (v.x - g.x < r * 2) { o = g.x + (v.x - g.x) / 2 } else { o = g.x + r } var n = i.y - r; A.push({ x: o, y: g.y }); A.push({ x: o, y: n }); A.push({ x: i.x, y: n }) } else { if (i.x <= g.x && i.y > h.y + h.h) { var u = h.y + h.h; var o = g.x + r; var n; if (i.y - u < r * 2) { n = u + (i.y - u) / 2 } else { n = i.y - r } A.push({ x: o, y: g.y }); A.push({ x: o, y: n }); A.push({ x: i.x, y: n }) } else { var o; var j = v.x + v.w; if (j > g.x) { o = j + r } else { o = g.x + r } var n; if (i.y < h.y) { n = i.y - r } else { n = h.y - r } A.push({ x: o, y: g.y }); A.push({ x: o, y: n }); A.push({ x: i.x, y: n }) } } } } else { if ((c == 1 && b == 4) || (c == 4 && b == 1)) { if (c == 4) { g = w; i = d; l = false } else { g = d; i = w; l = true } var h = Model.getShapeById(g.id).props; var v = Model.getShapeById(i.id).props; var j = v.x + v.w; if (i.x < g.x && i.y > g.y) { A.push({ x: i.x, y: g.y }) } else { if (i.x < g.x && j < g.x) { var o; if (g.x - j < r * 2) { o = j + (g.x - j) / 2 } else { o = g.x - r } var n = i.y - r; A.push({ x: o, y: g.y }); A.push({ x: o, y: n }); A.push({ x: i.x, y: n }) } else { if (i.x >= g.x && i.y > h.y + h.h) { var u = h.y + h.h; var o = g.x - r; var n; if (i.y - u < r * 2) { n = u + (i.y - u) / 2 } else { n = i.y - r } A.push({ x: o, y: g.y }); A.push({ x: o, y: n }); A.push({ x: i.x, y: n }) } else { var o; if (v.x < g.x) { o = v.x - r } else { o = g.x - r } var n; if (i.y < h.y) { n = i.y - r } else { n = h.y - r } A.push({ x: o, y: g.y }); A.push({ x: o, y: n }); A.push({ x: i.x, y: n }) } } } } else { if ((c == 2 && b == 3) || (c == 3 && b == 2)) { if (c == 2) { g = w; i = d; l = false } else { g = d; i = w; l = true } var h = Model.getShapeById(g.id).props; var v = Model.getShapeById(i.id).props; if (i.x > g.x && i.y < g.y) { A.push({ x: i.x, y: g.y }) } else { if (i.x > g.x && v.x > g.x) { var o; if (v.x - g.x < r * 2) { o = g.x + (v.x - g.x) / 2 } else { o = g.x + r } var n = i.y + r; A.push({ x: o, y: g.y }); A.push({ x: o, y: n }); A.push({ x: i.x, y: n }) } else { if (i.x <= g.x && i.y < h.y) { var o = g.x + r; var n; if (h.y - i.y < r * 2) { n = i.y + (h.y - i.y) / 2 } else { n = i.y + r } A.push({ x: o, y: g.y }); A.push({ x: o, y: n }); A.push({ x: i.x, y: n }) } else { var o; var j = v.x + v.w; if (j > g.x) { o = j + r } else { o = g.x + r } var n; if (i.y > h.y + h.h) { n = i.y + r } else { n = h.y + h.h + r } A.push({ x: o, y: g.y }); A.push({ x: o, y: n }); A.push({ x: i.x, y: n }) } } } } else { if ((c == 3 && b == 4) || (c == 4 && b == 3)) { if (c == 4) { g = w; i = d; l = false } else { g = d; i = w; l = true } var h = Model.getShapeById(g.id).props; var v = Model.getShapeById(i.id).props; var j = v.x + v.w; if (i.x < g.x && i.y < g.y) { A.push({ x: i.x, y: g.y }) } else { if (i.x < g.x && j < g.x) { var o; if (g.x - j < r * 2) { o = j + (g.x - j) / 2 } else { o = g.x - r } var n = i.y + r; A.push({ x: o, y: g.y }); A.push({ x: o, y: n }); A.push({ x: i.x, y: n }) } else { if (i.x >= g.x && i.y < h.y) { var o = g.x - r; var n; if (h.y - i.y < r * 2) { n = i.y + (h.y - i.y) / 2 } else { n = i.y + r } A.push({ x: o, y: g.y }); A.push({ x: o, y: n }); A.push({ x: i.x, y: n }) } else { var o; if (v.x < g.x) { o = v.x - r } else { o = g.x - r } var n; if (i.y > h.y + h.h) { n = i.y + r } else { n = h.y + h.h + r } A.push({ x: o, y: g.y }); A.push({ x: o, y: n }); A.push({ x: i.x, y: n }) } } } } } } } } } } } } } if (l) { A.reverse() } } else { if (w.id != null || d.id != null) { var g, i, l, B; if (w.id != null) { g = w; i = d; l = false; B = w.angle } else { g = d; i = w; l = true; B = d.angle } var e = Model.getShapeById(g.id).props; if (B >= C / 4 && B < C / 4 * 3) { if (i.y < g.y) { if (m >= D) { A.push({ x: g.x, y: i.y }) } else { var z = D / 2; A.push({ x: g.x, y: g.y - z }); A.push({ x: i.x, y: g.y - z }) } } else { A.push({ x: g.x, y: g.y - r }); if (m >= D) { if (i.x >= e.x - r && i.x <= e.x + e.w + r) { var q = e.x + e.w / 2; if (i.x < q) { A.push({ x: e.x - r, y: g.y - r }); A.push({ x: e.x - r, y: i.y }) } else { A.push({ x: e.x + e.w + r, y: g.y - r }); A.push({ x: e.x + e.w + r, y: i.y }) } } else { if (i.x < e.x) { A.push({ x: i.x + r, y: g.y - r }); A.push({ x: i.x + r, y: i.y }) } else { A.push({ x: i.x - r, y: g.y - r }); A.push({ x: i.x - r, y: i.y }) } } } else { if (i.x >= e.x - r && i.x <= e.x + e.w + r) { var q = e.x + e.w / 2; if (i.x < q) { A.push({ x: e.x - r, y: g.y - r }); A.push({ x: e.x - r, y: i.y - r }); A.push({ x: i.x, y: i.y - r }) } else { A.push({ x: e.x + e.w + r, y: g.y - r }); A.push({ x: e.x + e.w + r, y: i.y - r }); A.push({ x: i.x, y: i.y - r }) } } else { A.push({ x: i.x, y: g.y - r }) } } } } else { if (B >= C / 4 * 3 && B < C / 4 * 5) { if (i.x > g.x) { if (m >= D) { var z = m / 2; A.push({ x: g.x + z, y: g.y }); A.push({ x: g.x + z, y: i.y }) } else { A.push({ x: i.x, y: g.y }) } } else { A.push({ x: g.x + r, y: g.y }); if (m >= D) { if (i.y >= e.y - r && i.y <= e.y + e.h + r) { var q = e.y + e.h / 2; if (i.y < q) { A.push({ x: g.x + r, y: e.y - r }); A.push({ x: i.x + r, y: e.y - r }); A.push({ x: i.x + r, y: i.y }) } else { A.push({ x: g.x + r, y: e.y + e.h + r }); A.push({ x: i.x + r, y: e.y + e.h + r }); A.push({ x: i.x + r, y: i.y }) } } else { A.push({ x: g.x + r, y: i.y }) } } else { if (i.y >= e.y - r && i.y <= e.y + e.h + r) { var q = e.y + e.h / 2; if (i.y < q) { A.push({ x: g.x + r, y: e.y - r }); A.push({ x: i.x, y: e.y - r }) } else { A.push({ x: g.x + r, y: e.y + e.h + r }); A.push({ x: i.x, y: e.y + e.h + r }) } } else { if (i.y < g.y) { A.push({ x: g.x + r, y: i.y + r }); A.push({ x: i.x, y: i.y + r }) } else { A.push({ x: g.x + r, y: i.y - r }); A.push({ x: i.x, y: i.y - r }) } } } } } else { if (B >= C / 4 * 5 && B < C / 4 * 7) { if (i.y > g.y) { if (m >= D) { A.push({ x: g.x, y: i.y }) } else { var z = D / 2; A.push({ x: g.x, y: g.y + z }); A.push({ x: i.x, y: g.y + z }) } } else { A.push({ x: g.x, y: g.y + r }); if (m >= D) { if (i.x >= e.x - r && i.x <= e.x + e.w + r) { var q = e.x + e.w / 2; if (i.x < q) { A.push({ x: e.x - r, y: g.y + r }); A.push({ x: e.x - r, y: i.y }) } else { A.push({ x: e.x + e.w + r, y: g.y + r }); A.push({ x: e.x + e.w + r, y: i.y }) } } else { if (i.x < e.x) { A.push({ x: i.x + r, y: g.y + r }); A.push({ x: i.x + r, y: i.y }) } else { A.push({ x: i.x - r, y: g.y + r }); A.push({ x: i.x - r, y: i.y }) } } } else { if (i.x >= e.x - r && i.x <= e.x + e.w + r) { var q = e.x + e.w / 2; if (i.x < q) { A.push({ x: e.x - r, y: g.y + r }); A.push({ x: e.x - r, y: i.y + r }); A.push({ x: i.x, y: i.y + r }) } else { A.push({ x: e.x + e.w + r, y: g.y + r }); A.push({ x: e.x + e.w + r, y: i.y + r }); A.push({ x: i.x, y: i.y + r }) } } else { A.push({ x: i.x, y: g.y + r }) } } } } else { if (i.x < g.x) { if (m >= D) { var z = m / 2; A.push({ x: g.x - z, y: g.y }); A.push({ x: g.x - z, y: i.y }) } else { A.push({ x: i.x, y: g.y }) } } else { A.push({ x: g.x - r, y: g.y }); if (m >= D) { if (i.y >= e.y - r && i.y <= e.y + e.h + r) { var q = e.y + e.h / 2; if (i.y < q) { A.push({ x: g.x - r, y: e.y - r }); A.push({ x: i.x - r, y: e.y - r }); A.push({ x: i.x - r, y: i.y }) } else { A.push({ x: g.x - r, y: e.y + e.h + r }); A.push({ x: i.x - r, y: e.y + e.h + r }); A.push({ x: i.x - r, y: i.y }) } } else { A.push({ x: g.x - r, y: i.y }) } } else { if (i.y >= e.y - r && i.y <= e.y + e.h + r) { var q = e.y + e.h / 2; if (i.y < q) { A.push({ x: g.x - r, y: e.y - r }); A.push({ x: i.x, y: e.y - r }) } else { A.push({ x: g.x - r, y: e.y + e.h + r }); A.push({ x: i.x, y: e.y + e.h + r }) } } else { if (i.y < g.y) { A.push({ x: g.x - r, y: i.y + r }); A.push({ x: i.x, y: i.y + r }) } else { A.push({ x: g.x - r, y: i.y - r }); A.push({ x: i.x, y: i.y - r }) } } } } } } } if (l) { A.reverse() } } else { if (m >= D) { var z = (d.x - w.x) / 2; A.push({ x: w.x + z, y: w.y }); A.push({ x: w.x + z, y: d.y }) } else { var z = (d.y - w.y) / 2; A.push({ x: w.x, y: w.y + z }); A.push({ x: d.x, y: w.y + z }) } } } } else { if (t.linkerType == "curve") { var w = t.from; var d = t.to; var f = this.measureDistance(w, d); var k = f * 0.4; function s(E, F) { if (E.id != null) { return { x: E.x - k * Math.cos(E.angle), y: E.y - k * Math.sin(E.angle) } } else { var G = Math.abs(E.y - F.y); var y = Math.abs(E.x - F.x); var H = Math.atan(G / y); var x = {}; if (E.x <= F.x) { x.x = E.x + k * Math.cos(H) } else { x.x = E.x - k * Math.cos(H) } if (E.y <= F.y) { x.y = E.y + k * Math.sin(H) } else { x.y = E.y - k * Math.sin(H) } return x } } A.push(s(w, d)); A.push(s(d, w)) } } return A }, getLinkerLinePoints: function (d) { var b = []; if (d.linkerType != "curve") { b.push(d.from); b = b.concat(d.points) } else { var c = 0.05; var a = 0; while (a <= 1) { var e = { x: (1 - a) * (1 - a) * (1 - a) * d.from.x + 3 * (1 - a) * (1 - a) * a * d.points[0].x + 3 * (1 - a) * a * a * d.points[1].x + a * a * a * d.to.x, y: (1 - a) * (1 - a) * (1 - a) * d.from.y + 3 * (1 - a) * (1 - a) * a * d.points[0].y + 3 * (1 - a) * a * a * d.points[1].y + a * a * a * d.to.y }; b.push(e); a += c } } b.push(d.to); return b }, getLinkerBox: function (g) { var j = this.getLinkerLinePoints(g); var d = j[0].x; var c = j[0].y; var b = j[0].x; var a = j[0].y; for (var e = 0; e < j.length; e++) { var h = j[e]; if (h.x < d) { d = h.x } else { if (h.x > b) { b = h.x } } if (h.y < c) { c = h.y } else { if (h.y > a) { a = h.y } } } var f = { x: d, y: c, w: b - d, h: a - c }; return f }, getShapeBox: function (a) { var b = a.props; var c = a.props.angle; return this.getRotatedBox(b, c) }, getRotatedBox: function (g, e, b) { if (e == 0) { return g } else { if (!b) { b = { x: g.x + g.w / 2, y: g.y + g.h / 2 } } var k = this.getRotated(b, { x: g.x, y: g.y }, e); var j = this.getRotated(b, { x: g.x + g.w, y: g.y }, e); var i = this.getRotated(b, { x: g.x + g.w, y: g.y + g.h }, e); var h = this.getRotated(b, { x: g.x, y: g.y + g.h }, e); var f = Math.min(k.x, j.x, i.x, h.x); var c = Math.max(k.x, j.x, i.x, h.x); var d = Math.min(k.y, j.y, i.y, h.y); var a = Math.max(k.y, j.y, i.y, h.y); return { x: f, y: d, w: c - f, h: a - d } } }, getRotated: function (c, b, g) { var f = this.measureDistance(c, b); if (f == 0 || g == 0) { return b } var d = Math.atan(Math.abs(b.x - c.x) / Math.abs(c.y - b.y)); if (b.x >= c.x && b.y >= c.y) { d = Math.PI - d } else { if (b.x <= c.x && b.y >= c.y) { d = Math.PI + d } else { if (b.x <= c.x && b.y <= c.y) { d = Math.PI * 2 - d } } } d = d % (Math.PI * 2); var e = (d + g) % (Math.PI * 2); var a = { x: c.x + Math.sin(e) * f, y: c.y - Math.cos(e) * f }; return a }, getShapeAnchorInLinker: function (c) { var k = c.getAnchors(); var d = []; var r = { x: c.props.x + c.props.w / 2, y: c.props.y + c.props.h / 2 }; for (var p = 0; p < k.length; p++) { var m = k[p]; var n = { x: m.x + c.props.x, y: m.y + c.props.y }; var f = this.getRotated(r, n, c.props.angle); d.push(f) } var h = []; var e = 2; for (var o = Model.orderList.length - 1; o >= 0; o--) { var l = Model.orderList[o].id; var s = Model.getShapeById(l); if (s.name != "linker" || (s.attribute && s.attribute.collapseBy)) { continue } var j = s; var q = null; e = 3; for (var p = 0; p < d.length; p++) { var a = d[p]; var b = { x: a.x - e, y: a.y - e, w: e * 2, h: e * 2 }; if (j.from.id == null && this.pointInRect(j.from.x, j.from.y, b)) { q = { linker: j, anchors: [a], type: "from" }; break } if (j.to.id == null && this.pointInRect(j.to.x, j.to.y, b)) { q = { linker: j, anchors: [a], type: "to" }; break } } e = 2; if (q == null) { for (var p = 0; p < d.length; p++) { var a = d[p]; var g = Utils.pointInLinker(a, j, e); if (g > -1) { if (q == null) { q = { linker: j, anchors: [], type: "line" } } q.anchors.push(a) } } } if (q != null) { h.push(q) } } return h }, getEndpointAngle: function (d, f) { var a; if (f == "from") { a = d.from } else { a = d.to } var c; if (d.linkerType == "normal") { if (f == "from") { c = d.to } else { c = d.from } } else { if (d.linkerType == "broken") { if (f == "from") { c = d.points[0] } else { c = d.points[d.points.length - 1] } } else { var e = 12; var b; var g = Utils.measureDistance(d.from, d.to); if (f == "from") { b = e / g } else { b = 1 - e / g } c = { x: (1 - b) * (1 - b) * (1 - b) * d.from.x + 3 * (1 - b) * (1 - b) * b * d.points[0].x + 3 * (1 - b) * b * b * d.points[1].x + b * b * b * d.to.x, y: (1 - b) * (1 - b) * (1 - b) * d.from.y + 3 * (1 - b) * (1 - b) * b * d.points[0].y + 3 * (1 - b) * b * b * d.points[1].y + b * b * b * d.to.y } } } return this.getAngle(c, a) }, getAngle: function (c, a) { var b = Math.atan(Math.abs(c.y - a.y) / Math.abs(c.x - a.x)); if (a.x <= c.x && a.y > c.y) { b = Math.PI - b } else { if (a.x < c.x && a.y <= c.y) { b = Math.PI + b } else { if (a.x >= c.x && a.y < c.y) { b = Math.PI * 2 - b } } } return b }, getDarkerColor: function (c, h) { if (!h) { h = 13 } var f = c.split(","); var a = parseInt(f[0]); var e = parseInt(f[1]); var i = parseInt(f[2]); var d = Math.round(a - a / 255 * h); if (d < 0) { d = 0 } var j = Math.round(e - e / 255 * h); if (j < 0) { j = 0 } var k = Math.round(i - i / 255 * h); if (k < 0) { k = 0 } return d + "," + j + "," + k }, getDarkestColor: function (a) { return this.getDarkerColor(a, 26) }, toScale: function (c) { var a = {}; for (var b in c) { a[b] = c[b]; if (typeof c[b] == "number") { a[b] = a[b].toScale() } } return a }, restoreScale: function (c) { var a = {}; for (var b in c) { a[b] = c[b]; if (typeof c[b] == "number") { a[b] = a[b].restoreScale() } } return a }, getOutlinkers: function (c) { var a = []; for (var e = 0; e < c.length; e++) { var g = c[e]; a.push(g.id) } var h = []; var d = []; for (var e = 0; e < c.length; e++) { var g = c[e]; if (g.name != "linker") { var j = Model.getShapeLinkers(g.id); if (j && j.length > 0) { for (var f = 0; f < j.length; f++) { var b = j[f]; if (!this.isSelected(b) && d.indexOf(b) < 0 && a.indexOf(b) < 0) { h.push(Model.getShapeById(b)); d.push(b) } } } } } return h }, getFamilyShapes: function (a) { var g = []; for (var d = 0; d < a.length; d++) { var b = a[d]; if (b.name != "linker") { if (b.parent) { var f = Model.getShapeById(b.parent); if (!Utils.isSelected(b.parent)) { g.push(f) } var e = this.getChildrenShapes(f); g = g.concat(e) } var c = this.getChildrenShapes(b); g = g.concat(c) } } return g }, getChildrenShapes: function (a) { var c = []; if (a.children && a.children.length > 0) { for (var b = 0; b < a.children.length; b++) { var d = a.children[b]; if (!Utils.isSelected(d)) { c.push(Model.getShapeById(d)) } } } return c }, isFamilyShape: function (b, a) { if (b.parent == a.id) { return true } else { if (b.id == a.parent) { return true } else { if (b.parent && b.parent == a.parent) { return true } } } return false }, getContainedShapes: function (c) { var b = []; var e = []; for (var f = 0; f < c.length; f++) { var d = c[f]; if (d.name != "linker" && d.attribute && d.attribute.container) { var g = a(d); b = b.concat(g) } } function a(h) { var l = []; for (var k = Model.orderList.length - 1; k >= 0; k--) { var n = Model.orderList[k].id; if (h.id != n && !Utils.isSelected(n) && e.indexOf(n) < 0) { var j = Model.getShapeById(n); if (!j.attribute || typeof j.attribute.container == "undefined" || j.attribute.container == false) { if (!Utils.isFamilyShape(j, h)) { var m = Utils.getShapeBox(j); if (Utils.rectInRect(m, h.props) && j.container == h.id) { l.push(j); e.push(n) } } } } } return l } return b }, getAttachedShapes: function (c) { var a = []; for (var f = 0; f < c.length; f++) { a.push(c[f].id) } var g = []; for (var f = 0; f < c.length; f++) { var h = c[f]; if (h.groupName == "task" || h.groupName == "callActivity" || h.groupName == "subProcess") { var b = []; for (var d = Model.orderList.length - 1; d >= 0; d--) { var k = Model.orderList[d].id; var e = Model.getShapeById(k); if (e.attachTo == h.id && !Utils.isSelected(k) && a.indexOf(k) < 0) { b.push(e) } } g = g.concat(b) } } return g }, copy: function (a) { return $.extend(true, {}, a) }, rangeChildren: function (j) { var e = []; if (j.children && j.children.length > 0) { if (j.name == "verticalPool") { var o = []; var b = []; for (var f = 0; f < j.children.length; f++) { var d = j.children[f]; var c = Model.getShapeById(d); if (c.name == "horizontalSeparator") { b.push(c) } else { o.push(c) } } o.sort(function (i, h) { return i.props.x - h.props.x }); var l = j.props.x; for (var f = 0; f < o.length; f++) { var c = o[f]; c.props.x = l; Designer.painter.renderShape(c); e.push(c); l += c.props.w } b.sort(function (i, h) { return i.props.y - h.props.y }); var k = j.props.y + 40; for (var f = 0; f < b.length; f++) { var c = b[f]; var a = c.props.y + c.props.h; c.props.w = j.props.w; c.props.y = k; var g = a - k; c.props.h = g; Designer.painter.renderShape(c); e.push(c); k += g } } else { if (j.name == "horizontalPool") { var o = []; var b = []; for (var f = 0; f < j.children.length; f++) { var d = j.children[f]; var c = Model.getShapeById(d); if (c.name == "verticalSeparator") { b.push(c) } else { o.push(c) } } o.sort(function (i, h) { return i.props.y - h.props.y }); var k = j.props.y; for (var f = 0; f < o.length; f++) { var c = o[f]; c.props.y = k; Designer.painter.renderShape(c); e.push(c); k += c.props.h } b.sort(function (i, h) { return i.props.x - h.props.x }); var l = j.props.x + 40; for (var f = 0; f < b.length; f++) { var c = b[f]; var n = c.props.x + c.props.w; c.props.h = j.props.h; c.props.x = l; var m = n - l; c.props.w = m; Designer.painter.renderShape(c); e.push(c); l += m } } } } return e }, getRelativePos: function (c, b, d) { var a = d.offset(); if (a == null) { a = { left: 0, top: 0 } } return { x: c - a.left + d.scrollLeft(), y: b - a.top + d.scrollTop() } }, getCollapsedShapes: function (b) { var k = []; var a = []; for (var e = 0; e < b.length; e++) { var f = b[e]; if (f.attribute && f.attribute.collapsed) { var h = []; for (var c = Model.orderList.length - 1; c >= 0; c--) { var g = Model.orderList[c].id; var d = Model.getShapeById(g); if (d.attribute && d.attribute.collapseBy == f.id && a.indexOf(g) < 0) { h.push(d) } } k = k.concat(h) } } return k }, getCollapsedShapesById: function (e) { var a = []; for (var c = Model.orderList.length - 1; c >= 0; c--) { var d = Model.orderList[c].id; var b = Model.getShapeById(d); if (b.attribute && b.attribute.collapseBy == e) { a.push(b) } } return a }, getShapeLineStyle: function (a, b) { if (b == false || !Model.define.theme || !Model.define.theme.shape) { return $.extend({}, Schema.shapeDefaults.lineStyle, a) } else { return $.extend({}, Schema.shapeDefaults.lineStyle, Model.define.theme.shape.lineStyle, a) } }, getLinkerLineStyle: function (a, b) { if (b == false || !Model.define.theme || !Model.define.theme.linker) { return $.extend({}, Schema.linkerDefaults.lineStyle, a) } else { return $.extend({}, Schema.linkerDefaults.lineStyle, Model.define.theme.linker.lineStyle, a) } }, getShapeFontStyle: function (b, a) { if (a == false || !Model.define.theme || !Model.define.theme.shape) { return $.extend({}, Schema.shapeDefaults.fontStyle, b) } else { return $.extend({}, Schema.shapeDefaults.fontStyle, Model.define.theme.shape.fontStyle, b) } }, getLinkerFontStyle: function (b, a) { if (a == false || !Model.define.theme || !Model.define.theme.linker) { return $.extend({}, Schema.linkerDefaults.fontStyle, b) } else { return $.extend({}, Schema.linkerDefaults.fontStyle, Model.define.theme.linker.fontStyle, b) } }, getShapeFillStyle: function (a, b) { if (b == false || !Model.define.theme || !Model.define.theme.shape) { return $.extend({}, Schema.shapeDefaults.fillStyle, a) } else { return $.extend({}, Schema.shapeDefaults.fillStyle, Model.define.theme.shape.fillStyle, a) } }, containsChinese: function (a) { if (escape(a).indexOf("%u") >= 0) { return true } else { return false } }, filterXss: function (a) { a = a.toString(); a = a.replace(//g, ">"); a = a.replace(/%3E/g, ">"); a = a.replace(/'/g, "'"); a = a.replace(/"/g, """); return a }, showError: function () { var a = $("#canvas-error"); if (a.length) { a = $("
保存出现了异常，为了防止内容丢失，请及时刷新页面或者反馈问题
").appendTo("body");
a.show()
}
}
};
var GradientHelper = {
createLinearGradient: function (f, i, h) {
var b = f.props;
var c;
var e;
var d;
if (b.w > b.h) {
c = {
x: 0,
y: b.h / 2
};
e = {
x: b.w,
y: b.h / 2
};
d = (h.angle + Math.PI / 2) % (Math.PI * 2)
} else {
c = {
x: b.w / 2,
y: 0
};
e = {
x: b.w / 2,
y: b.h
};
d = h.angle
}
if (d != 0) {
var a = {
x: b.w / 2,
y: b.h / 2
};
c = Utils.getRotated(a, c, d);
e = Utils.getRotated(a, e, d);
if (c.x < 0) {
c.x = 0
}
if (c.x > f.props.w) {
c.x = f.props.w
}
if (c.y < 0) {
c.y = 0
}
if (c.y > f.props.h) {
c.y = f.props.h
}
if (e.x < 0) {
e.x = 0
}
if (e.x > f.props.w) {
e.x = f.props.w
}
if (e.y < 0) {
e.y = 0
}
if (e.y > f.props.h) {
e.y = f.props.h
}
}
var g = i.createLinearGradient(c.x, c.y, e.x, e.y);
g.addColorStop(0, "rgb(" + h.beginColor + ")");
g.addColorStop(1, "rgb(" + h.endColor + ")");
return g
},
createRadialGradient: function (c, a, b) {
var f = c.props;
var d = f.h;
if (f.w < f.h) {
d = f.w
}
var e = a.createRadialGradient(f.w / 2, f.h / 2, 10, f.w / 2, f.h / 2, d * b.radius);
e.addColorStop(0, "rgb(" + b.beginColor + ")");
e.addColorStop(1, "rgb(" + b.endColor + ")");
return e
},
getLighterColor: function (c) {
var h = 60;
var f = c.split(",");
var a = parseInt(f[0]);
var e = parseInt(f[1]);
var i = parseInt(f[2]);
var d = Math.round(a + (255 - a) / 255 * h);
if (d > 255) {
d = 255
}
var j = Math.round(e + (255 - e) / 255 * h);
if (j > 255) {
j = 255
}
var k = Math.round(i + (255 - i) / 255 * h);
if (k > 255) {
k = 255
}
return d + "," + j + "," + k
},
getDarkerColor: function (c) {
var h = 60;
var f = c.split(",");
var a = parseInt(f[0]);
var e = parseInt(f[1]);
var i = parseInt(f[2]);
var d = Math.round(a - a / 255 * h);
if (d < 0) {
d = 0
}
var j = Math.round(e - e / 255 * h);
if (j < 0) {
j = 0
}
var k = Math.round(i - i / 255 * h);
if (k < 0) {
k = 0
}
return d + "," + j + "," + k
}
};
var MessageSource = {
batchSize: 0,
messages: [],
withUndo: true,
withMessage: true,
withDock: true,
undoStack: {
stack: [],
push: function (b, a) {
this.stack.push(b);
if (typeof a == "undefined") {
a = true
}
if (a) {
MessageSource.redoStack.stack = []
}
Designer.events.push("undoStackChanged", this.stack.length)
},
pop: function () {
var b = this.stack.length;
if (b == 0) {
return null
}
var a = this.stack[b - 1];
this.stack.splice(b - 1, 1);
MessageSource.redoStack.push(a);
Designer.events.push("undoStackChanged", this.stack.length);
return a
}
},
redoStack: {
stack: [],
push: function (a) {
this.stack.push(a);
Designer.events.push("redoStackChanged", this.stack.length)
},
pop: function () {
var b = this.stack.length;
if (b == 0) {
return null
}
var a = this.stack[b - 1];
this.stack.splice(b - 1, 1);
MessageSource.undoStack.push(a, false);
Designer.events.push("redoStackChanged", this.stack.length);
return a
}
},
beginBatch: function () {
this.batchSize++
},
commit: function () {
this.batchSize--;
this.submit()
},
submit: function () {
if (this.batchSize == 0 && this.messages.length != 0) {
if (this.withDock) {
Dock.update(true)
}
if (this.withMessage == false) {
this.messages = [];
return
}
if (this.withUndo) {
this.undoStack.push(this.messages)
}
if (chartId != "") {
var a = {
action: "command",
messages: this.messages,
name: userName
};
CLB.send(a)
}
this.messages = []
}
},
send: function (b, a) {
this.messages.push({
action: b,
content: a
});
this.submit()
},
receive: function (a) {
this.doWithoutMessage(function () {
MessageSource.executeMessages(a, true);
Utils.showLinkerControls();
Utils.showLinkerCursor()
})
},
undo: function () {
var a = this.undoStack.pop();
if (a == null) {
return
}
this.doWithoutUndo(function () {
MessageSource.beginBatch();
for (var d = 0; d < a.length; d++) {
var g = a[d];
if (g.action == "create") {
Utils.unselect();
Model.remove(g.content, false)
} else {
if (g.action == "update") {
var b = g.content.shapes;
Model.updateMulti(b);
for (var c = 0; c < b.length; c++) {
var f = b[c];
Designer.painter.renderShape(f)
}
var e = Utils.getSelectedIds();
Utils.unselect();
Utils.selectShape(e, false)
} else {
if (g.action == "remove") {
var b = g.content;
Model.addMulti(b);
for (var c = 0; c < b.length; c++) {
var f = b[c];
Designer.painter.renderShape(f)
}
} else {
if (g.action == "updatePage") {
Model.updatePage(g.content.page)
} else {
if (g.action == "setTheme") {
Model.setTheme(g.content.theme)
}
}
}
}
}
}
MessageSource.commit()
})
},
redo: function () {
var a = this.redoStack.pop();
if (a == null) {
return
}
this.doWithoutUndo(function () {
MessageSource.executeMessages(a, false)
})
},
executeMessages: function (e, j) {
MessageSource.beginBatch();
for (var f = 0; f < e.length; f++) {
var c = e[f];
if (c.action == "create") {
var b = c.content;
if (j) {
for (var h = 0; h < b.length; h++) {
var g = b[h];
if (g.name != "linker") {
Schema.initShapeFunctions(g)
}
}
}
Model.addMulti(b);
for (var h = 0; h < b.length; h++) {
var g = b[h];
Designer.painter.renderShape(g)
}
Model.build()
} else {
if (c.action == "update") {
var k = c.content.updates;
for (var h = 0; h < k.length; h++) {
var d = k[h];
if (j && d.name != "linker") {
Schema.initShapeFunctions(d)
}
Designer.painter.renderShape(d)
}
Model.updateMulti(k);
var a = Utils.getSelectedIds();
Utils.unselect();
Utils.selectShape(a)
} else {
if (c.action == "remove") {
Utils.unselect();
Model.remove(c.content)
} else {
if (c.action == "updatePage") {
Model.updatePage(c.content.update)
} else {
if (c.action == "setTheme") {
Model.setTheme(c.content.update)
}
}
}
}
}
}
MessageSource.commit()
},
doWithoutUndo: function (a) {
this.withUndo = false;
a();
this.withUndo = true
},
doWithoutMessage: function (a) {
this.withMessage = false;
a();
this.withMessage = true
},
doWithoutUpdateDock: function (a) {
this.withDock = false;
a();
this.withDock = true
}
};
Number.prototype.toScale = function () {
return this * Designer.config.scale
};
Number.prototype.restoreScale = function () {
return this / Designer.config.scale
};
Date.prototype.format = function (b) {
var c = {
"M+": this.getMonth() + 1,
"d+": this.getDate(),
"h+": this.getHours(),
"m+": this.getMinutes(),
"s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3),
S: this.getMilliseconds()
};
if (/(y+)/.test(b)) {
b = b.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length))
}
for (var a in c) {
if (new RegExp("(" + a + ")").test(b)) {
b = b.replace(RegExp.$1, RegExp.$1.length == 1 ? c[a] : ("00" + c[a]).substr(("" + c[a]).length))
}
}
return b
};
================================================
FILE: static/flow-editor/demo/js/plugin/flow/designer.css
================================================
@CHARSET "UTF-8";
.clear {
clear: both;
}
#designer {
width: 100%;
position: relative;
}
#shape_panel {
width: 162px;
overflow: hidden;
overflow-y: auto;
position: absolute;
background: #FFF;
border-right: 1px solid #eee;
}
.search_container {
background-color: #F3F3F3;
padding: 5px 10px;
border-bottom: #cccccc solid 1px;
cursor: default;
-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, .1);
-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, .1);
-ms-box-shadow: 0px 1px 1px rgba(0, 0, 0, .1);
}
.panel_title.search {
padding: 5px 10px;
height: 23px;
line-height: 23px;
}
.panel_title.search input {
margin: 0px;
width: 97%;
border: 1px solid #B8B8B8;
line-height: 18px;
background: #fff url(./images/search_ico.png) center right no-repeat;
border-radius: 2px;
padding-left: 2px;
}
.panel_container {
border-top: 1px solid #F4F4F4;
}
.panel_container:first-child {
border-top: 0;
}
.panel_container:last-child {
border-bottom: 1px solid #F4F4F4;
}
.panel_title {
position: relative;
margin: 0px;
background-color: #FFF;
height: 30px;
line-height: 30px;
font-size: 12px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding: 0 2px 0 19px;
border-bottom: #F4F4F4 solid 1px;
cursor: default;
/*-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,.1);
-moz-box-shadow: 0px 1px 1px rgba(0,0,0,.1);
-ms-box-shadow: 0px 1px 1px rgba(0,0,0,.1);
box-shadow: 0px 1px 1px rgba(0,0,0,.1);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.33);*/
}
.panel_title .ico_accordion {
position: absolute;
left: 5px;
top: 11px;
}
.panel_container .content {
margin: 0px;
width: 100%;
padding: 5px 0px;
}
.panel_container .my_content {
border: 1px dashed #ccc;
margin: 6px;
padding: 15px 10px;
text-align: center;
}
.panel_container .my_content:hover {
border: 1px dashed #888;
}
.panel_collapsed .panel_title {
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
box-shadow: none;
text-shadow: none;
border-bottom: 0px;
}
.panel_collapsed .content {
display: none;
}
.panel_collapsed .ico_accordion {
background-position: -51px -46px;
}
.panel_box {
display: inline-block;
border: 0px solid transparent;
position: relative;
width: 100%;
cursor: move;
}
.panel_box a {
line-height: 28px;
padding: 10px 30px 10px 25px;
font-size: 12px;
width: 100%;
cursor: move;
}
.panel_box:hover a,
.panel_box:hover i {
/*background-color: skyblue;*/
color: #BF0017;
}
.panel_box.selected {
border-color: #6EB1EB;
}
#shape_thumb {
position: absolute;
left: 5px;
top: 0px;
padding: 5px;
display: none;
}
#shape_thumb div {
padding: 0px 0px 10px;
text-align: center;
width: 180px;
}
.group_icon {
position: absolute;
display: block;
bottom: 0px;
right: 0px;
background: url(./images/sprite.png?9) no-repeat;
height: 10px;
width: 10px;
background-position: -43px -64px;
opacity: 0.8;
}
.group_icon:hover {
opacity: 1;
}
.change_shape_icon {
right: -10px;
bottom: -10px;
}
.group_dashboard {
padding: 4px;
width: 136px;
cursor: default;
}
.panel_item {
margin: 0px auto;
display: none;
}
#creating_shape_container {
overflow: hidden;
position: absolute;
display: none;
}
#creating_shape_canvas {
position: absolute;
}
#designer_viewport {
position: relative;
margin-left: 163px;
/* margin-top: -32px; */
}
#demo_signup {
background: #b2b2b2;
padding: 10px 20px 10px 140px;
border-bottom: 1px solid #a0a0a0;
height: 39px;
position: relative;
}
#demo_signup span {
line-height: 19px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.11);
}
#demo_signup a {
position: absolute;
left: 20px;
line-height: 38px;
height: 38px;
width: 80px;
font-size: 16px;
}
#designer_layout {
overflow: hidden;
position: relative;
z-index: 0;
}
#designer_canvas {
position: relative;
background: #F2F2F2;
overflow: visible;
/*box-shadow: 3px 3px 6px #888;*/
z-index: 0;
}
#shape_img_container {
height: 0px;
overflow: hidden;
}
.shape_box {
position: absolute;
display: none !important;
}
.shape_box .shape_link {
position: absolute;
bottom: 10px;
right: -12px;
width: 20px;
height: 15px;
background-image: url(./images/sprite.png);
background-position: -20px -422px;
cursor: pointer;
}
.shape_box .shape_link .ico {}
.link_point_canvas {
position: absolute;
}
.shape_box_creating {
position: absolute;
}
/**锚点、控制点样式*/
.shape_anchor {
position: absolute;
border-style: solid;
border-width: 1px;
background: white;
}
/**形状锁定提醒样式*/
.shape_locker {
position: absolute;
}
.shape_controller {
position: absolute;
border-style: solid;
border-width: 1px;
background: white;
}
.shape_controller.n.w {
cursor: nw-resize;
}
.shape_controller.n.e {
cursor: ne-resize;
}
.shape_controller.s.e {
cursor: se-resize;
}
.shape_controller.s.w {
cursor: sw-resize;
}
.shape_controller.n,
.shape_controller.s {
cursor: n-resize;
}
.shape_controller.e,
.shape_controller.w {
cursor: e-resize;
}
.shape_rotater {
position: absolute;
display: none;
}
.shape_rotater.rotate_enable {
/*cursor: url(./images/rotate.gif) 16 16, auto;*/
}
/**图形选择后的控件容器*/
#shape_controls {
position: absolute;
left: 0px;
top: 0px;
display: none !important;
}
#shape_controls #controls_bounding {
position: absolute;
left: -10px;
top: -10px;
display: none;
}
/**图形的矩形轮廓容器*/
.shape_contour {
position: absolute;
left: 0px;
top: 0px;
width: 0px;
height: 0px;
display: none !important;
}
/**图形选择框*/
#selecting_box {
position: absolute;
border: 1px solid #6EB1EB;
background: rgba(22, 145, 232, 0.1);
}
/**创建文本的位置选择框*/
#texting_box {
position: absolute;
border: 2px solid #6EB1EB;
}
/* 文本编辑 */
#shape_edit_menu {
padding: 15px 20px;
position: absolute;
}
#shape_edit_menu textarea {
display: block;
width: 280px;
margin-bottom: 5px;
overflow: hidden;
}
#shape_text_edit {
position: absolute;
overflow: hidden;
background: rgba(255, 255, 255, .01);
border: 2px solid #f7ddaa;
border-radius: 2px;
padding: 0px;
cursor: text;
}
#shape_text_ruler {
position: absolute;
padding: 0px;
border: none;
background: transparent;
opacity: 0;
height: 0px;
overflow: hidden;
width: 0px;
}
/** 连接线文本编辑 */
#linker_text_edit {
position: absolute;
overflow: hidden;
background: white;
border: 2px solid #f7ddaa;
border-radius: 2px;
padding: 0px;
}
.text_canvas {
position: absolute;
padding: 0px;
border: none;
background: transparent;
cursor: inherit;
overflow: hidden;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
resize: none;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.text_canvas.linker_text {
white-space: nowrap;
background: #fff;
}
.attr_canvas {
position: absolute;
}
#link_spot {
position: absolute;
width: 100px;
height: 100px;
display: block;
}
/** 设计器操作气泡提示 */
#designer_op_tip {
position: absolute;
border: 1px solid #D1D1D1;
background: #f2f2f2;
padding: 5px 10px;
border-radius: 3px;
display: none;
color: #444;
text-align: center;
white-space: nowrap;
}
/**对齐线*/
#designer_op_snapline_h {
background: #6EB1EB;
position: absolute;
height: 1px;
width: 100%;
}
#designer_op_snapline_v {
background: #6EB1EB;
position: absolute;
width: 1px;
}
#designer_op_snapline_attach {
position: absolute;
border: 2px solid #6EB1EB;
}
/**菜单*/
.menu {
position: absolute;
background: #FFF;
border-radius: 4px;
border: 1px solid rgb(180, 180, 180);
/*-webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3);*/
}
.menu:before {
display: none;
}
.menu:after {
display: none;
}
.menu.list {
padding: 4px 0px;
}
.menu li {
padding: 0px 20px;
line-height: 26px;
cursor: default;
position: relative;
}
.menu_ico li {
padding: 0px 30px;
}
.menu li:hover {
background-color: #eee;
}
.menu li.disabled {
/* color: #999; */
color: #ccc;
}
.menu li.disabled:hover {
/* color: #999; */
color: #ccc;
background-color: transparent;
background-image: none;
filter: none;
text-shadow: none;
}
.menu li .ico_selected {
position: absolute;
top: 3px;
left: 5px;
}
.menu .devider {
height: 0px;
border-top: #ccc solid 1px;
margin: 4px 0;
}
.menu .menu_text {
color: #888;
}
.menu .menu_text:hover {
background: transparent;
}
.menu li .share_to_a,
.share-menu .share_to_a {
position: relative;
display: inline-block;
width: 16px;
height: 16px;
margin: 0px 2px;
margin-bottom: 3px;
vertical-align: middle;
}
.share-menu {
margin-top: 20px;
}
.menu li .share_to_a.weibo,
.share-menu .share_to_a.weibo {
background: url(../images/designer/share_to_weibo.png) center center no-repeat;
}
.menu li .share_to_a.weixin,
.share-menu .share_to_a.weixin {
background: url(../images/designer/share_to_weixin.png) center center no-repeat;
}
.menu li .share_to_a.qzone,
.share-menu .share_to_a.qzone {
background: url(../images/designer/share_to_qq.png) center center no-repeat;
}
.menu li .share_to_a.qqweibo,
.share-menu .share_to_a.qqweibo {
background: url(../images/designer/share_to_qq_weibo.png) center center no-repeat;
}
.menu li .share_to_a.douban,
.share-menu .share_to_a.douban {
background: url(../images/designer/share_to_douban.png) center center no-repeat;
}
.menu li .share_to_a.facebook,
.share-menu .share_to_a.facebook {
background: url(../images/designer/share_to_facebook.png) center center no-repeat;
}
.menu li .share_to_a.google,
.share-menu .share_to_a.google {
background: url(../images/designer/share_to_google.png) center center no-repeat;
}
.menu li .share_to_a.linkedin,
.share-menu .share_to_a.linkedin {
background: url(../images/designer/share_to_linkedin.png) center center no-repeat;
}
.menu li .share_to_a.mingdao,
.share-menu .share_to_a.mingdao {
background: url(../images/designer/share_to_mingdao.ico) center center no-repeat;
}
/**************************8分享菜单****************************************/
/**************************8分享菜单******************************end**********/
/**图形画板*/
.shape_dashboard {
padding: 4px;
width: 136px;
cursor: default;
}
.dashboard_box {
display: inline-block;
padding: 1px;
border: 1px solid transparent;
position: relative;
width: 30px;
height: 30px;
}
.dashboard_box:hover {
border-color: #D1D1D1;
background: #f2f2f2;
}
/**操作帮助*/
#designer_op_help {
position: absolute;
top: 0px;
left: 0px;
font-size: 24px;
font-weight: bold;
color: #A7A7A7;
color: rgba(0, 0, 0, .3);
padding: 5px;
}
/**鹰眼视图*/
.navigation_bounding {
padding: 10px 0px;
overflow: hidden;
}
.navigation_view_container {
margin: 0px auto;
position: relative;
width: 120px;
}
#navigation_canvas {
background: white;
border: 1px solid #888;
}
#navigation_eye {
position: absolute;
border: 2px solid #6EB1EB;
top: 0px;
left: 0px;
width: 100px;
height: 80px;
}
.linker_cursor {
background: #db5e5e;
width: 8px;
height: 8px;
border-radius: 4px;
position: absolute;
z-index: 1000;
}
.linker_control_line {
position: absolute;
width: 1px;
opacity: 0.5;
background: #833;
}
.linker_control_point {
position: absolute;
width: 6px;
height: 6px;
border: 1px solid #833;
background: white;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
cursor: default;
}
.linker_control_point:hover,
.linker_control_point.moving {
background: #db5e5e;
}
.navigation_view_bar {
padding: 10px;
}
.navigation_view_bar .toolbar_button,
.navigation_view_bar .spinner {
display: inline-block;
}
.navigation_view_bar .spinner {
width: 55px;
}
.navigation_view_bar .toolbar_button {
float: right;
margin-left: 5px;
}
/*Full Screen Styles*/
#shape_panel.readonly {
display: none;
}
#designer_viewport.readonly {
margin-left: 0px;
}
#fullscreen_tip {
position: absolute;
bottom: -70px;
right: 0px;
display: none;
white-space: nowrap;
}
#fullscreen_tip .dlg_close {
position: absolute;
top: 1px;
right: 2px;
}
.full_suggest {
margin-top: 5px;
line-height: 20px;
height: 20px;
}
.full_suggest span {
display: inline-block;
float: left;
}
.full_suggest .ico {
margin-right: 5px;
}
.search_panel_loading {
color: #888;
line-height: 20px;
padding: 3px 0px;
margin: 5px;
}
.search_panel_title {
border-bottom: 1px solid #CBCCCC;
padding: 3px 5px 5px;
font-weight: bold;
margin-bottom: 3px;
}
.search_panel_btn {
height: 22px;
line-height: 22px;
margin: 5px;
}
.new_tip {
width: 29px;
height: 12px;
/*background: url(./images/new_tip.png) no-repeat;*/
position: absolute;
top: 3px;
left: 0px;
-webkit-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
transform: rotate(-25deg);
}
#pubpo_win {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.pubpo-content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
min-height: 330px;
padding-right: 20px;
}
.pub-explain {
font-size: 14px;
margin-bottom: 20px;
line-height: 25px;
color: #888;
letter-spacing: 0.5px;
}
.label-exp {
display: inline-block;
vertical-align: middle;
float: right;
font-size: 12px;
color: #888;
margin-right: -12px;
}
.pubpo-tab .form .content label[for] {
color: #333;
margin-left: 5px;
}
.pubpo-tab .form .textarea,
.form .feedTags,
.form .content {
width: 81% !important;
}
.clone-price {
display: none;
}
.content .setprice-btn {
width: 50% !important;
}
.bot-line {
padding: 30px 16px 16px 95px;
}
.bot-line>div {
display: inline-block;
vertical-align: middle;
}
.agreement-group {
margin-top: 12px;
margin-right: 20px;
}
.pub-btn.pro-btn {
width: 90px;
text-align: center;
padding: 11px 0;
margin-top: -10px;
}
#tag_input {
min-width: 80%;
}
.agreement-detail {
color: #008cff;
display: inline-block;
vertical-align: middle;
margin-left: 5px;
cursor: pointer;
}
================================================
FILE: static/flow-editor/demo/js/plugin/flow/designer.events.js
================================================
Designer.events.addEventListener("initialized", function () {
if (localRuntime) {
Designer.open(definition)
} else {
// var a = CLB.findLocal(); //取消iframe的自动加载，控制权在react里面，此处做了兼容性处理
if (a == false) {
Designer.open(definition)
}
}
});
Designer.events.addEventListener("create", function (a) { });
var createdTip = false;
Designer.events.addEventListener("created", function (a) {
if (createdTip) {
UI.showStartStep("created", $("#" + a.id));
createdTip = false
}
});
Designer.events.addEventListener("linkerCreating", function (a) { });
Designer.events.addEventListener("linkerCreated", function (a) { });
Designer.events.addEventListener("selectChanged", function () {
UI.update();
Dock.update();
UI.showShapeOptions()
});
Designer.events.addEventListener("clipboardChanged", function (a) {
if (a > 0) {
$("#bar_list_edit").children("li[ac=paste]").menuitem("enable")
} else {
$("#bar_list_edit").children("li[ac=paste]").menuitem("disable")
}
});
Designer.events.addEventListener("undoStackChanged", function (a) {
if (a == 0) {
$("#bar_list_edit").children("li[ac=undo]").menuitem("disable");
$("#bar_undo").button("disable")
} else {
$("#bar_list_edit").children("li[ac=undo]").menuitem("enable");
$("#bar_undo").button("enable")
}
});
Designer.events.addEventListener("redoStackChanged", function (a) {
if (a == 0) {
$("#bar_list_edit").children("li[ac=redo]").menuitem("disable");
$("#bar_redo").button("disable")
} else {
$("#bar_list_edit").children("li[ac=redo]").menuitem("enable");
$("#bar_redo").button("enable")
}
});
Designer.events.addEventListener("beforeResize", function (a) {
var c = a.shapes;
var b = a.minSize;
var f = a.dir;
if (c.length == 1) {
var l = c[0];
if (l.name == "verticalPool") {
if (f == "b") {
var n = 0;
for (var j = 0; j < l.children.length; j++) {
var h = l.children[j];
var d = Model.getShapeById(h);
if (d.name == "horizontalSeparator") {
n += d.props.h
}
}
if (n == 0) {
n = 90
} else {
n += 40
}
b.h = n
} else {
if (f == "l" || f == "r") {
var g = 20;
var e = null;
var m = 0;
for (var j = 0; j < l.children.length; j++) {
var h = l.children[j];
var d = Model.getShapeById(h);
if (d.name == "horizontalSeparator") {
m++
} else {
if (d.name == "verticalLane") {
if (e == null || (d.props.x < e.props.x && f == "l") || (d.props.x > e.props.x && f == "r")) {
e = d
}
g += d.props.w
}
}
}
if (e != null) {
g -= e.props.w
}
if (m > 0) {
g += 20
}
b.w = g
}
}
} else {
if (l.name == "verticalLane" && f == "b") {
var n = 0;
var e = l;
var k = Model.getShapeById(e.parent);
for (var j = 0; j < k.children.length; j++) {
var h = k.children[j];
var d = Model.getShapeById(h);
if (d.name == "horizontalSeparator") {
n += d.props.h
}
}
if (n == 0) {
n = 50
}
b.h = n
} else {
if (l.name == "horizontalPool") {
if (f == "r") {
var g = 0;
for (var j = 0; j < l.children.length; j++) {
var h = l.children[j];
var d = Model.getShapeById(h);
if (d.name == "verticalSeparator") {
g += d.props.w
}
}
if (g == 0) {
g = 90
} else {
g += 40
}
b.w = g
} else {
if (f == "t" || f == "b") {
var n = 20;
var e = null;
var m = 0;
for (var j = 0; j < l.children.length; j++) {
var h = l.children[j];
var d = Model.getShapeById(h);
if (d.name == "verticalSeparator") {
m++
} else {
if (d.name == "horizontalLane") {
if (e == null || (d.props.y < e.props.y && f == "t") || (d.props.y > e.props.y && f == "b")) {
e = d
}
n += d.props.h
}
}
}
if (e != null) {
n -= e.props.h
}
if (m > 0) {
n += 20
}
b.h = n
}
}
} else {
if (l.name == "horizontalLane" && f == "r") {
var g = 0;
var e = l;
var k = Model.getShapeById(e.parent);
for (var j = 0; j < k.children.length; j++) {
var h = k.children[j];
var d = Model.getShapeById(h);
if (d.name == "verticalSeparator") {
g += d.props.w
}
}
if (g == 0) {
g = 50
}
b.w = g
} else {
if (l.name == "cls" || l.name == "interface" || l.name == "package" || l.name == "combinedFragment") {
b.h = 50
}
}
}
}
}
}
});
Designer.events.addEventListener("resizing", function (b) {
var n = b.shape;
var e = b.dir;
var g = b.offset;
var h = [];
if (n.name == "verticalPool") {
if (e == "b") {
for (var j = 0; j < n.children.length; j++) {
var f = n.children[j];
var c = Model.getShapeById(f);
if (c.name == "verticalLane" || c.name == "verticalSeparatorBar") {
c.props.h = n.props.h - 40;
Designer.painter.renderShape(c);
h.push(c)
}
}
} else {
if (e == "r") {
if (n.children && n.children.length > 0) {
var d = null;
for (var j = 0; j < n.children.length; j++) {
var f = n.children[j];
var c = Model.getShapeById(f);
if (c.name == "horizontalSeparator") {
c.props.w = n.props.w;
Designer.painter.renderShape(c);
h.push(c)
}
if (c.name == "verticalLane" && (d == null || c.props.x > d.props.x)) {
d = c
}
}
if (d != null) {
d.props.w += g.w;
Designer.painter.renderShape(d);
h.push(d)
}
}
} else {
if (e == "l") {
if (n.children && n.children.length > 0) {
var d = null;
for (var j = 0; j < n.children.length; j++) {
var f = n.children[j];
var c = Model.getShapeById(f);
if (c.name == "horizontalSeparator") {
c.props.x += g.x;
c.props.w += g.w;
Designer.painter.renderShape(c);
h.push(c)
} else {
if (c.name == "verticalSeparatorBar") {
c.props.x += g.x;
Designer.painter.renderShape(c);
h.push(c)
}
}
if (c.name == "verticalLane" && (d == null || c.props.x < d.props.x)) {
d = c
}
}
if (d != null) {
d.props.w += g.w;
d.props.x += g.x;
Designer.painter.renderShape(d);
h.push(d)
}
}
}
}
}
} else {
if (n.name == "verticalLane") {
var m = Model.getShapeById(n.parent);
h = [m];
m.props.w += g.w;
m.props.h = n.props.h + 40;
m.props.x += g.x;
Designer.painter.renderShape(m);
if (e == "r") {
var o = [];
var k = Model.getPersistenceById(n.id);
for (var j = 0; j < m.children.length; j++) {
var f = m.children[j];
if (f != n.id) {
var a = Model.getPersistenceById(f);
var c = Model.getShapeById(f);
if (c.name == "horizontalSeparator") {
c.props.w += g.w;
Designer.painter.renderShape(c);
h.push(c)
} else {
if (a.props.x > k.props.x && a.name == "verticalLane") {
o.push(c)
}
}
}
}
if (o.length > 0) {
var l = Utils.getContainedShapes(o);
var p = Utils.getOutlinkers(l);
l = l.concat(p);
o = o.concat(l);
Designer.op.moveShape(o, {
x: g.w,
y: 0
});
h = h.concat(o)
}
} else {
if (e == "b") {
for (var j = 0; j < m.children.length; j++) {
var f = m.children[j];
if (f != n.id) {
var c = Model.getShapeById(f);
if (c.name == "verticalLane" || c.name == "verticalSeparatorBar") {
c.props.h = n.props.h;
Designer.painter.renderShape(c);
h.push(c)
}
}
}
} else {
if (e == "l") {
var o = [];
var k = Model.getPersistenceById(n.id);
for (var j = 0; j < m.children.length; j++) {
var f = m.children[j];
if (f != n.id) {
var a = Model.getPersistenceById(f);
var c = Model.getShapeById(f);
if (c.name == "horizontalSeparator") {
c.props.x += g.x;
c.props.w += g.w;
Designer.painter.renderShape(c);
h.push(c)
} else {
if (c.name == "verticalSeparatorBar") {
c.props.x += g.x;
Designer.painter.renderShape(c);
h.push(c)
} else {
if (a.props.x < k.props.x && a.name == "verticalLane") {
o.push(c)
}
}
}
}
}
if (o.length > 0) {
var l = Utils.getContainedShapes(o);
var p = Utils.getOutlinkers(l);
l = l.concat(p);
o = o.concat(l);
Designer.op.moveShape(o, {
x: g.x,
y: 0
});
h = h.concat(o)
}
}
}
}
} else {
if (n.name == "horizontalSeparator") {
var m = Model.getShapeById(n.parent);
h = [m];
m.props.h += g.h;
Designer.painter.renderShape(m);
for (var j = 0; j < m.children.length; j++) {
var f = m.children[j];
var c = Model.getShapeById(f);
if (f == n.id) {
continue
}
if (c.name != "horizontalSeparator") {
c.props.h += g.h;
Designer.painter.renderShape(c);
h.push(c)
} else {
if (c.props.y > n.props.y) {
c.props.y += g.h;
Designer.painter.renderShape(c);
h.push(c)
}
}
}
} else {
if (n.name == "horizontalPool") {
if (e == "r") {
for (var j = 0; j < n.children.length; j++) {
var f = n.children[j];
var c = Model.getShapeById(f);
if (c.name == "horizontalLane" || c.name == "horizontalSeparatorBar") {
c.props.w = n.props.w - 40;
Designer.painter.renderShape(c);
h.push(c)
}
}
} else {
if (e == "b") {
if (n.children && n.children.length > 0) {
var d = null;
for (var j = 0; j < n.children.length; j++) {
var f = n.children[j];
var c = Model.getShapeById(f);
if (c.name == "verticalSeparator") {
c.props.h = n.props.h;
Designer.painter.renderShape(c);
h.push(c)
}
if (c.name == "horizontalLane" && (d == null || c.props.y > d.props.y)) {
d = c
}
}
if (d != null) {
d.props.h += g.h;
Designer.painter.renderShape(d);
h.push(d)
}
}
} else {
if (e == "t") {
if (n.children && n.children.length > 0) {
var d = null;
for (var j = 0; j < n.children.length; j++) {
var f = n.children[j];
var c = Model.getShapeById(f);
if (c.name == "verticalSeparator") {
c.props.y += g.y;
c.props.h += g.h;
Designer.painter.renderShape(c);
h.push(c)
} else {
if (c.name == "horizontalSeparatorBar") {
c.props.y += g.y;
Designer.painter.renderShape(c);
h.push(c)
}
}
if (c.name == "horizontalLane" && (d == null || c.props.y < d.props.y)) {
d = c
}
}
if (d != null) {
d.props.h += g.h;
d.props.y += g.y;
Designer.painter.renderShape(d);
h.push(d)
}
}
}
}
}
} else {
if (n.name == "horizontalLane") {
var m = Model.getShapeById(n.parent);
h = [m];
m.props.h += g.h;
m.props.w += g.w;
m.props.y += g.y;
Designer.painter.renderShape(m);
if (e == "r") {
for (var j = 0; j < m.children.length; j++) {
var f = m.children[j];
if (f != n.id) {
var c = Model.getShapeById(f);
if (c.name == "horizontalLane" || c.name == "horizontalSeparatorBar") {
c.props.w = n.props.w;
Designer.painter.renderShape(c);
h.push(c)
}
}
}
} else {
if (e == "b") {
var o = [];
var k = Model.getPersistenceById(n.id);
for (var j = 0; j < m.children.length; j++) {
var f = m.children[j];
if (f != n.id) {
var a = Model.getPersistenceById(f);
var c = Model.getShapeById(f);
if (c.name == "verticalSeparator") {
c.props.h += g.h;
Designer.painter.renderShape(c);
h.push(c)
} else {
if (a.props.y > k.props.y && a.name == "horizontalLane") {
o.push(c)
}
}
}
}
if (o.length > 0) {
var l = Utils.getContainedShapes(o);
var p = Utils.getOutlinkers(l);
l = l.concat(p);
o = o.concat(l);
Designer.op.moveShape(o, {
x: 0,
y: g.h
});
h = h.concat(o)
}
} else {
if (e == "t") {
var o = [];
var k = Model.getPersistenceById(n.id);
for (var j = 0; j < m.children.length; j++) {
var f = m.children[j];
if (f != n.id) {
var a = Model.getPersistenceById(f);
var c = Model.getShapeById(f);
if (c.name == "verticalSeparator") {
c.props.y += g.y;
c.props.h += g.h;
Designer.painter.renderShape(c);
h.push(c)
} else {
if (c.name == "horizontalSeparatorBar") {
c.props.y += g.y;
Designer.painter.renderShape(c);
h.push(c)
} else {
if (a.props.y < k.props.y && a.name == "horizontalLane") {
o.push(c)
}
}
}
}
}
if (o.length > 0) {
var l = Utils.getContainedShapes(o);
var p = Utils.getOutlinkers(l);
l = l.concat(p);
o = o.concat(l);
Designer.op.moveShape(o, {
x: 0,
y: g.y
});
h = h.concat(o)
}
}
}
}
} else {
if (n.name == "verticalSeparator") {
var m = Model.getShapeById(n.parent);
h = [m];
m.props.w += g.w;
Designer.painter.renderShape(m);
for (var j = 0; j < m.children.length; j++) {
var f = m.children[j];
var c = Model.getShapeById(f);
if (f == n.id) {
continue
}
if (c.name != "verticalSeparator") {
c.props.w += g.w;
Designer.painter.renderShape(c);
h.push(c)
} else {
if (c.props.x > n.props.x) {
c.props.x += g.w;
Designer.painter.renderShape(c);
h.push(c)
}
}
}
}
}
}
}
}
}
return h
});
Designer.events.addEventListener("beforeRemove", function (c) {
var n = {};
for (var g = 0; g < c.length; g++) {
var k = c[g];
n[k.id] = k
}
var a = [];
for (var g = 0; g < c.length; g++) {
var k = c[g];
if (k.name == "verticalSeparatorBar" && !n[k.parent] && a.indexOf(k.id) < 0) {
delete n[k.id]
} else {
if (k.name == "horizontalSeparatorBar" && !n[k.parent] && a.indexOf(k.id) < 0) {
delete n[k.id]
} else {
if (k.name == "horizontalSeparator") {
var m = Model.getShapeById(k.parent);
var h = null;
var l = 0;
for (var f = 0; f < m.children.length; f++) {
var e = m.children[f];
var d = Model.getShapeById(e);
if (d.name == "horizontalSeparator" && !n[e]) {
l += 1
} else {
if (d.name == "verticalSeparatorBar") {
h = d
}
}
}
if (l == 0 && h != null) {
n[h.id] = h;
if (a.indexOf(h.id) < 0) {
a.push(h.id)
}
}
} else {
if (k.name == "verticalSeparator") {
var m = Model.getShapeById(k.parent);
var h = null;
var l = 0;
for (var f = 0; f < m.children.length; f++) {
var e = m.children[f];
var d = Model.getShapeById(e);
if (d.name == "verticalSeparator" && !n[e]) {
l += 1
} else {
if (d.name == "horizontalSeparatorBar") {
h = d
}
}
}
if (l == 0 && h != null) {
n[h.id] = h;
if (a.indexOf(h.id) < 0) {
a.push(h.id)
}
}
}
}
}
}
}
c = [];
for (var b in n) {
c.push(n[b])
}
return c
});
Designer.events.addEventListener("removed", function (b) {
var c = b.shapes;
var m = b.range;
var s = b.changedIds;
var g = [];
var r = [];
for (var j = 0; j < c.length; j++) {
var o = c[j];
if (o.name == "verticalLane" && m.indexOf(o.parent) < 0 && r.indexOf(o.parent) < 0) {
r.push(o.parent)
} else {
if (o.name == "horizontalLane" && m.indexOf(o.parent) < 0 && r.indexOf(o.parent) < 0) {
r.push(o.parent)
} else {
if (o.name == "verticalSeparatorBar" && m.indexOf(o.parent) < 0) {
var q = Model.getShapeById(o.parent);
q.props.w -= o.props.w;
q.props.x += o.props.w;
Designer.painter.renderShape(q);
if (s.indexOf(o.parent) < 0) {
s.push(o.parent);
g.push(q)
}
} else {
if (o.name == "horizontalSeparatorBar" && m.indexOf(o.parent) < 0) {
var q = Model.getShapeById(o.parent);
q.props.y += o.props.h;
q.props.h -= o.props.h;
Designer.painter.renderShape(q);
if (s.indexOf(o.parent) < 0) {
s.push(o.parent);
g.push(q)
}
} else {
if (o.name == "horizontalSeparator" && m.indexOf(o.parent) < 0 && r.indexOf(o.parent) < 0) {
r.push(o.parent)
} else {
if (o.name == "verticalSeparator" && m.indexOf(o.parent) < 0 && r.indexOf(o.parent) < 0) {
r.push(o.parent)
}
}
}
}
}
}
}
for (var n = 0; n < r.length; n++) {
var l = r[n];
var q = Model.getShapeById(l);
if (q.name == "verticalPool") {
var p = 0;
var e = 0;
for (var j = 0; j < q.children.length; j++) {
var f = q.children[j];
var d = Model.getShapeById(f);
if (d.name == "verticalLane") {
e++;
p += d.props.w
} else {
if (d.name == "verticalSeparatorBar") {
p += d.props.w
}
}
}
if (e > 0) {
q.props.w = p;
Designer.painter.renderShape(q);
if (s.indexOf(l) < 0) {
s.push(l);
g.push(q)
}
var a = Utils.rangeChildren(q);
g = g.concat(a)
}
} else {
if (q.name == "horizontalPool") {
var k = 0;
var e = 0;
for (var j = 0; j < q.children.length; j++) {
var f = q.children[j];
var d = Model.getShapeById(f);
if (d.name == "horizontalLane") {
e++;
k += d.props.h
} else {
if (d.name == "horizontalSeparatorBar") {
k += d.props.h
}
}
}
if (e > 0) {
q.props.h = k;
Designer.painter.renderShape(q);
if (s.indexOf(l) < 0) {
s.push(l);
g.push(q)
}
var a = Utils.rangeChildren(q);
g = g.concat(a)
}
}
}
}
return g
});
Designer.events.addEventListener("shapeChanged", function (a) { });
================================================
FILE: static/flow-editor/demo/js/plugin/flow/designer.methods.js
================================================
Designer.addFunction("open", function (definition) {
if (definition == "") {
return
}
if (typeof definition == "string") {
eval("definition = " + definition)
}
$(".shape_box").remove();
Model.define.elements = {};
Model.persistence.elements = {};
Model.define.page = definition.page;
Model.persistence.page = Utils.copy(definition.page);
Model.comments = definition.comments;
if (definition.theme) {
Model.define.theme = definition.theme;
Model.persistence.theme = Utils.copy(definition.theme)
}
if (localRuntime == false) {
Designer.initialize.initCanvas()
}
var shapes = definition.elements;
var shapeCount = 0;
for (var shapeId in shapes) {
var shape = shapes[shapeId];
if (shape.name != "linker") {
Schema.initShapeFunctions(shape);
Designer.painter.renderShape(shape);
Model.add(shape, false)
}
shapeCount++
}
for (var shapeId in shapes) {
var shape = shapes[shapeId];
if (shape.name == "linker") {
Designer.painter.renderLinker(shape);
Model.add(shape, false)
}
}
if (shapeCount == 0) {
Model.build()
}
if (localRuntime == false) {
if (typeof isView == "undefined") {
Navigator.draw()
}
}
});
Designer.addFunction("selectAll", function () {
var a = Model.define.elements;
var b = [];
for (var c in a) {
b.push(c)
}
Utils.selectShape(b)
});
Designer.addFunction("setFontStyle", function (d) {
var c = Utils.getSelected();
if (c.length == 0) {
return
}
for (var b = 0; b < c.length; b++) {
var a = c[b];
a.fontStyle = Utils.copy(a.fontStyle);
if (typeof d.fontFamily != "undefined") {
a.fontStyle.fontFamily = d.fontFamily
}
if (typeof d.size != "undefined") {
a.fontStyle.size = d.size
}
if (typeof d.color != "undefined") {
a.fontStyle.color = d.color
}
if (typeof d.bold != "undefined") {
a.fontStyle.bold = d.bold
}
if (typeof d.italic != "undefined") {
a.fontStyle.italic = d.italic
}
if (typeof d.underline != "undefined") {
a.fontStyle.underline = d.underline
}
if (typeof d.textAlign != "undefined") {
a.fontStyle.textAlign = d.textAlign
}
if (a.name == "linker") {
Designer.painter.renderLinker(a)
} else {
if (typeof d.vAlign != "undefined") {
a.fontStyle.vAlign = d.vAlign
}
Designer.painter.renderShape(a)
}
}
Model.updateMulti(c)
});
Designer.addFunction("setShapeStyle", function (d) {
var c = Utils.getSelected();
if (c.length == 0) {
return
}
var e = [];
for (var b = 0; b < c.length; b++) {
var a = c[b];
if (a.name != "linker") {
a.shapeStyle = Utils.copy(a.shapeStyle);
if (typeof d.alpha != "undefined") {
a.shapeStyle.alpha = d.alpha
}
Designer.painter.renderShape(a);
e.push(a)
}
}
Model.updateMulti(e)
});
Designer.addFunction("setLineStyle", function (f) {
var e = Utils.getSelected();
if (e.length == 0) {
return
}
var d = Utils.getFamilyShapes(e);
e = e.concat(d);
for (var c = 0; c < e.length; c++) {
var a = e[c];
a.lineStyle = Utils.copy(a.lineStyle);
if (typeof f.lineWidth != "undefined") {
a.lineStyle.lineWidth = f.lineWidth
}
if (typeof f.lineColor != "undefined") {
a.lineStyle.lineColor = f.lineColor
}
if (typeof f.lineStyle != "undefined") {
a.lineStyle.lineStyle = f.lineStyle
}
if (a.name == "linker") {
if (typeof f.beginArrowStyle != "undefined") {
a.lineStyle.beginArrowStyle = f.beginArrowStyle;
Designer.defaults.linkerBeginArrowStyle = f.beginArrowStyle
}
if (typeof f.endArrowStyle != "undefined") {
a.lineStyle.endArrowStyle = f.endArrowStyle;
Designer.defaults.linkerEndArrowStyle = f.endArrowStyle
}
if (a.lineStyle.lineWidth == 0) {
a.lineStyle.lineWidth = 1
}
}
}
Model.updateMulti(e);
for (var c = 0; c < e.length; c++) {
var a = e[c];
Designer.painter.renderShape(a);
if (a.name != "linker") {
var g = Model.getShapeLinkers(a.id);
if (!g) {
continue
}
for (var b = 0; b < g.length; b++) {
if (!Utils.isSelected(g[b])) {
var h = Model.getShapeById(g[b]);
Designer.painter.renderShape(h)
}
}
}
}
});
Designer.addFunction("setFillStyle", function (f) {
var e = Utils.getSelected();
if (e.length == 0) {
return
}
if (e.length == 0) {
return
}
var g = [];
for (var c = 0; c < e.length; c++) {
var a = e[c];
if (a.name != "linker") {
a.fillStyle = Utils.copy(a.fillStyle);
var d = a.fillStyle.type;
if (typeof f.type != "undefined") {
b(a, f.type);
d = f.type
}
if (typeof f.color != "undefined") {
if (d == "solid") {
a.fillStyle.color = f.color
} else {
if (d == "gradient") {
a.fillStyle.beginColor = GradientHelper.getLighterColor(f.color);
a.fillStyle.endColor = GradientHelper.getDarkerColor(f.color)
}
}
}
if (d == "gradient") {
if (typeof f.beginColor != "undefined") {
a.fillStyle.beginColor = f.beginColor
}
if (typeof f.endColor != "undefined") {
a.fillStyle.endColor = f.endColor
}
if (typeof f.gradientType != "undefined") {
a.fillStyle.gradientType = f.gradientType;
if (f.gradientType == "linear") {
delete a.fillStyle.radius;
a.fillStyle.angle = 0
} else {
delete a.fillStyle.angle;
a.fillStyle.radius = 0.75
}
}
if (typeof f.radius != "undefined") {
a.fillStyle.radius = f.radius
}
if (typeof f.angle != "undefined") {
a.fillStyle.angle = f.angle
}
}
if (d == "image") {
if (typeof f.display != "undefined") {
a.fillStyle.display = f.display
}
if (typeof f.fileId != "undefined") {
a.fillStyle.fileId = f.fileId
}
if (typeof f.imageW != "undefined") {
a.fillStyle.imageW = f.imageW
}
if (typeof f.imageH != "undefined") {
a.fillStyle.imageH = f.imageH
}
}
Designer.painter.renderShape(a);
g.push(a)
}
}
Model.updateMulti(g);
function b(i, k) {
var h = i.fillStyle;
if (h.type != k) {
var l = {
type: k
};
if (k == "solid") {
if (h.type == "gradient") {
var j = GradientHelper.getDarkerColor(h.beginColor);
l.color = j
} else {
l.color = "255,255,255"
}
} else {
if (k == "gradient") {
var m = h.color;
if (h.type != "solid") {
m = "255,255,255"
}
l.gradientType = "linear";
l.angle = 0;
l.beginColor = GradientHelper.getLighterColor(m);
l.endColor = GradientHelper.getDarkerColor(m)
} else {
if (k == "image") {
l.fileId = "";
l.display = "fill";
l.imageW = 10;
l.imageH = 10
}
}
}
i.fillStyle = l
}
}
});
Designer.addFunction("setLinkerType", function (e) {
var d = Utils.getSelected();
if (d.length == 0) {
return
}
var f = [];
for (var c = 0; c < d.length; c++) {
var b = d[c];
if (b.name == "linker") {
b.linkerType = e;
Designer.painter.renderLinker(b, true);
f.push(b)
}
}
Schema.linkerDefaults.linkerType = e;
var a = Utils.getSelectedIds();
if (a.length > 1) {
Designer.painter.drawControls(a)
}
Model.updateMulti(f);
Utils.showLinkerControls()
});
Designer.addFunction("matchSize", function (l) {
var c = Utils.getSelected();
if (c.length == 0 || !l) {
return
}
var b = null;
var h = null;
var k = [];
for (var e = 0; e < c.length; e++) {
var g = c[e];
if (g.name != "linker") {
if (b == null || g.props.w > b) {
b = g.props.w
}
if (h == null || g.props.h > h) {
h = g.props.h
}
}
}
if (l.w == "auto") {
l.w = b
}
if (l.h == "auto") {
l.h = h
}
Utils.removeAnchors();
var d = [];
for (var e = 0; e < c.length; e++) {
var g = c[e];
if (g.name != "linker") {
var j = Designer.op.changeShapeProps(g, l);
Utils.showAnchors(g);
Utils.mergeArray(k, j);
d.push(g)
}
}
for (var e = 0; e < k.length; e++) {
var a = k[e];
var f = Model.getShapeById(a);
Designer.painter.renderLinker(f, true);
d.push(f)
}
Designer.painter.drawControls(Utils.getSelectedIds());
Model.updateMulti(d)
});
Designer.addFunction("alignShapes", function (c) {
var k = Utils.getSelected();
if (k.length == 0 || !c) {
return
}
var d = Utils.getSelectedIds();
var g = Utils.getControlBox(d);
var b = [];
Utils.removeAnchors();
var e = [];
for (var m = 0; m < k.length; m++) {
var a = k[m];
if (a.name != "linker") {
e.push(a)
}
if (c == "left") {
if (a.name != "linker") {
var q = Utils.getShapeBox(a);
var r = {
x: g.x - (q.x - a.props.x)
};
var l = Designer.op.changeShapeProps(a, r);
Utils.showAnchors(a);
Utils.mergeArray(b, l)
} else {
if (a.from.id == null && a.to.id == null) {
var o = Utils.getLinkerBox(a);
a.from.x -= (o.x - g.x);
a.to.x -= (o.x - g.x);
b.push(a.id)
}
}
} else {
if (c == "center") {
var p = g.x + g.w / 2;
if (a.name != "linker") {
var r = {
x: Math.round(p - a.props.w / 2)
};
var l = Designer.op.changeShapeProps(a, r);
Utils.showAnchors(a);
Utils.mergeArray(b, l)
} else {
if (a.from.id == null && a.to.id == null) {
var o = Utils.getLinkerBox(a);
a.from.x += Math.round(p - o.w / 2 - o.x);
a.to.x += Math.round(p - o.w / 2 - o.x);
b.push(a.id)
}
}
} else {
if (c == "right") {
var n = g.x + g.w;
if (a.name != "linker") {
var q = Utils.getShapeBox(a);
var r = {
x: n - a.props.w - (a.props.x - q.x)
};
var l = Designer.op.changeShapeProps(a, r);
Utils.showAnchors(a);
Utils.mergeArray(b, l)
} else {
if (a.from.id == null && a.to.id == null) {
var o = Utils.getLinkerBox(a);
a.from.x += (n - o.x - o.w);
a.to.x += (n - o.x - o.w);
b.push(a.id)
}
}
} else {
if (c == "top") {
if (a.name != "linker") {
var q = Utils.getShapeBox(a);
var r = {
y: g.y - (q.y - a.props.y)
};
var l = Designer.op.changeShapeProps(a, r);
Utils.showAnchors(a);
Utils.mergeArray(b, l)
} else {
if (a.from.id == null && a.to.id == null) {
var o = Utils.getLinkerBox(a);
a.from.y -= (o.y - g.y);
a.to.y -= (o.y - g.y);
b.push(a.id)
}
}
} else {
if (c == "middle") {
var s = g.y + g.h / 2;
if (a.name != "linker") {
var r = {
y: Math.round(s - a.props.h / 2)
};
var l = Designer.op.changeShapeProps(a, r);
Utils.showAnchors(a);
Utils.mergeArray(b, l)
} else {
if (a.from.id == null && a.to.id == null) {
var o = Utils.getLinkerBox(a);
a.from.y += Math.round(s - o.h / 2 - o.y);
a.to.y += Math.round(s - o.h / 2 - o.y);
b.push(a.id)
}
}
} else {
if (c == "bottom") {
var f = g.y + g.h;
if (a.name != "linker") {
var q = Utils.getShapeBox(a);
var r = {
y: f - a.props.h - (a.props.y - q.y)
};
var l = Designer.op.changeShapeProps(a, r);
Utils.showAnchors(a);
Utils.mergeArray(b, l)
} else {
if (a.from.id == null && a.to.id == null) {
var o = Utils.getLinkerBox(a);
a.from.y += (f - o.y - o.h);
a.to.y += (f - o.y - o.h);
b.push(a.id)
}
}
}
}
}
}
}
}
}
for (var m = 0; m < b.length; m++) {
var j = b[m];
var h = Model.getShapeById(j);
Designer.painter.renderLinker(h, true);
e.push(h)
}
Designer.painter.drawControls(d);
Model.updateMulti(e)
});
Designer.addFunction("distributeShapes", function (o) {
var f = Utils.getSelected();
if (f.length == 0 || !o) {
return
}
var m = Utils.getSelectedIds();
var l = Utils.getControlBox(m);
var s = [];
Utils.removeAnchors();
var e = [];
for (var g = 0; g < f.length; g++) {
var n = f[g];
if (n.name != "linker") {
e.push(n)
}
}
if (o == "h") {
e.sort(function d(i, h) {
return i.props.x - h.props.x
});
var p = l.w;
for (var g = 0; g < e.length; g++) {
var n = e[g];
p -= n.props.w
}
var a = p / (e.length - 1);
var c = l.x;
for (var g = 0; g < e.length; g++) {
var n = e[g];
var r = {
x: c
};
var q = Designer.op.changeShapeProps(n, r);
Utils.showAnchors(n);
Utils.mergeArray(s, q);
c += (n.props.w + a)
}
} else {
e.sort(function d(i, h) {
return i.props.y - h.props.y
});
var k = l.h;
for (var g = 0; g < e.length; g++) {
var n = e[g];
k -= n.props.h
}
var a = k / (e.length - 1);
var c = l.y;
for (var g = 0; g < e.length; g++) {
var n = e[g];
var r = {
y: c
};
var q = Designer.op.changeShapeProps(n, r);
Utils.showAnchors(n);
Utils.mergeArray(s, q);
c += (n.props.h + a)
}
}
for (var g = 0; g < s.length; g++) {
var b = s[g];
var j = Model.getShapeById(b);
Designer.painter.renderLinker(j, true);
e.push(j)
}
Designer.painter.drawControls(m);
Model.updateMulti(e)
});
Designer.addFunction("layerShapes", function (m) {
var h = Utils.getSelected();
if (h.length == 0 || !m) {
return
}
h.sort(function c(r, i) {
return r.props.zindex - i.props.zindex
});
var b;
if (m == "front") {
b = Model.maxZIndex;
for (var j = 0; j < h.length; j++) {
var l = h[j];
b += 1;
l.props.zindex = b
}
} else {
if (m == "forward") {
var d = null;
var q = null;
for (var j = 0; j < h.length; j++) {
var l = h[j];
d = n(l);
if (d != null) {
q = l.props.zindex;
break
}
}
if (d == null) {
return
}
var k = d.props.zindex;
var f = n(d);
var p = k + 1;
if (f != null) {
p = k + (f.props.zindex - k) / 2
}
var g = p - q;
for (var j = 0; j < h.length; j++) {
var l = h[j];
l.props.zindex += g
}
} else {
if (m == "back") {
b = Model.orderList[0].zindex;
for (var j = h.length - 1; j >= 0; j--) {
var l = h[j];
b -= 1;
l.props.zindex = b
}
} else {
if (m == "backward") {
var a = null;
var q = null;
for (var j = 0; j < h.length; j++) {
var l = h[j];
a = e(l);
if (a != null) {
q = l.props.zindex;
break
}
}
if (a == null) {
return
}
var k = a.props.zindex;
var o = e(a);
var p = k - 1;
if (o != null) {
p = k - (k - o.props.zindex) / 2
}
var g = p - q;
for (var j = 0; j < h.length; j++) {
var l = h[j];
l.props.zindex += g
}
}
}
}
}
Model.updateMulti(h);
function n(s) {
var v = Utils.getShapeBox(s);
for (var u = 0; u < Model.orderList.length; u++) {
var i = Model.orderList[u];
if (i.zindex <= s.props.zindex || Utils.isSelected(i.id)) {
continue
}
var t = Model.getShapeById(i.id);
var r = Utils.getShapeBox(t);
if (Utils.rectCross(v, r)) {
return t
}
}
return null
}
function e(s) {
var v = Utils.getShapeBox(s);
for (var u = Model.orderList.length - 1; u >= 0; u--) {
var i = Model.orderList[u];
if (i.zindex >= s.props.zindex || Utils.isSelected(i.id)) {
continue
}
var t = Model.getShapeById(i.id);
var r = Utils.getShapeBox(t);
if (Utils.rectCross(v, r)) {
return t
}
}
return null
}
});
Designer.addFunction("group", function () {
var d = Utils.getSelected();
if (d.length < 2) {
return
}
var c = Utils.newId();
for (var b = 0; b < d.length; b++) {
var a = d[b];
a.group = c
}
Model.updateMulti(d)
});
Designer.addFunction("ungroup", function () {
var c = Utils.getSelected();
if (c.length == 0) {
return
}
for (var b = 0; b < c.length; b++) {
var a = c[b];
a.group = null
}
Model.updateMulti(c)
});
Designer.addFunction("lockShapes", function () {
var b = Utils.getSelectedIds();
if (b.length == 0) {
return
}
var d = [];
for (var c = 0; c < b.length; c++) {
var a = Model.getShapeById(b[c]);
a.locked = true;
d.push(a)
}
Utils.unselect();
Utils.selectShape(b);
Model.updateMulti(d)
});
Designer.addFunction("unlockShapes", function () {
var b = Utils.getSelectedLockedIds();
if (b.length == 0) {
return
}
var d = [];
for (var c = 0; c < b.length; c++) {
var a = Model.getShapeById(b[c]);
a.locked = false;
d.push(a)
}
var e = Utils.getSelectedIds();
Utils.unselect();
Utils.selectShape(e);
Model.updateMulti(d)
});
Designer.addFunction("setPageStyle", function (a) {
Model.updatePage(a)
});
Designer.addFunction("setReadonly", function (a) {
if (typeof a != "boolean") {
return
}
if (a) {
$(".diagram_title").addClass("readonly");
$(".menubar").hide();
$(".toolbar").hide();
$("#shape_panel").addClass("readonly");
$("#designer_viewport").addClass("readonly");
Designer.hotkey.cancel();
Designer.op.cancel();
$(window).trigger("resize.designer");
$("#dock").hide();
$(".dock_view").hide();
Dock.currentView = "";
Designer.contextMenu.destroy()
}
});
Designer.addFunction("zoomIn", function () {
var a = Designer.config.scale;
var b = a + 0.1;
Designer.setZoomScale(b)
});
Designer.addFunction("zoomOut", function () {
var a = Designer.config.scale;
var b = a - 0.1;
Designer.setZoomScale(b)
});
Designer.addFunction("setZoomScale", function (e) {
if (e < 0.25) {
e = 0.25
}
if (e > 4) {
e = 4
}
Utils.hideLinkerCursor();
Designer.config.scale = e;
Designer.initialize.initCanvas();
for (var d in Model.define.elements) {
var b = Model.define.elements[d];
Designer.painter.renderShape(b)
if (b.name != 'linker') {
var top = $('#' + b.id).find('.text_canvas').css('top');
$.each($('#' + b.id).find('.fa'), function () {
// $(this).css({ top: top })
$(this).css({ top: ($('#' + b.id).height() / 2 - 7.5) })
});
$.each($('#' + b.id).find('img'), function () {
$(this).css({ top: ($('#' + b.id).height() / 2 - 7.5) })
});
}
}
var a = Utils.getSelectedIds();
var c = Utils.getSelectedLockedIds();
Utils.mergeArray(a, c);
Utils.unselect();
Utils.selectShape(a);
Utils.showLinkerCursor()
});
Designer.addFunction("setShapeProps", function (h, b) {
if (!b) {
b = Utils.getSelected()
}
if (b.length == 0 || !h) {
return
}
var c = [];
var k = [];
for (var d = 0; d < b.length; d++) {
var g = b[d];
if (g.name != "linker") {
var j = Designer.op.changeShapeProps(g, h);
c.push(g);
if (j && j.length) {
Utils.mergeArray(k, j)
}
}
}
for (var d = 0; d < k.length; d++) {
var a = k[d];
var e = Model.getShapeById(a);
Designer.painter.renderLinker(e, true);
c.push(e)
}
if (c.length > 0) {
Model.updateMulti(c)
}
var f = Utils.getSelectedIds();
Utils.unselect();
Utils.selectShape(f)
});
Designer.addFunction("addDataAttribute", function (a) {
var c = Utils.getSelectedIds();
var b = Model.getShapeById(c[0]);
if (!b.dataAttributes) {
b.dataAttributes = []
}
a.id = Utils.newId();
a.category = "custom";
b.dataAttributes.push(a);
MessageSource.doWithoutUpdateDock(function () {
Model.update(b)
})
});
Designer.addFunction("updateDataAttribute", function (f) {
var c = Utils.getSelectedIds();
var b = Model.getShapeById(c[0]);
if (!b.dataAttributes) {
b.dataAttributes = []
}
var e = false;
for (var d = 0; d < b.dataAttributes.length; d++) {
var a = b.dataAttributes[d];
if (a.id == f.id) {
b.dataAttributes[d] = f;
e = true
}
}
if (!e) {
return
}
MessageSource.doWithoutUpdateDock(function () {
Model.update(b)
});
Designer.painter.renderShape(b)
});
Designer.addFunction("getDataAttrById", function (e) {
var c = Utils.getSelectedIds();
var b = Model.getShapeById(c[0]);
if (!b.dataAttributes) {
b.dataAttributes = []
}
for (var d = 0; d < b.dataAttributes.length; d++) {
var a = b.dataAttributes[d];
if (a.id == e) {
return a
}
}
return null
});
Designer.addFunction("getDefaultDataAttrByName", function (d) {
var c = Utils.getSelectedIds();
var b = Model.getShapeById(c[0]);
if (!b.dataAttributes) {
b.dataAttributes = []
}
for (var e = 0; e < b.dataAttributes.length; e++) {
var a = b.dataAttributes[e];
if (a.category == "default" && a.name == d) {
return a
}
}
return null
});
Designer.addFunction("deleteDataAttribute", function (e) {
var c = Utils.getSelectedIds();
var b = Model.getShapeById(c[0]);
if (!b.dataAttributes) {
b.dataAttributes = []
}
var f = false;
for (var d = 0; d < b.dataAttributes.length; d++) {
var a = b.dataAttributes[d];
if (a.id == e) {
b.dataAttributes.splice(d, 1);
f = true
}
}
if (!f) {
return
}
MessageSource.doWithoutUpdateDock(function () {
Model.update(b)
});
Designer.painter.renderShape(b)
});
Designer.addFunction("setSchema", function (schemaCategories, callback) {
if (schemaCategories.length == 0) {
Schema.empty();
Schema.init(true);
Designer.initialize.initShapes();
if (callback) {
callback()
}
return
}
Util.ajax({
url: "/diagraming/schema",
data: {
categories: schemaCategories
},
type: "get",
success: function (data) {
Schema.empty();
eval(data);
Schema.init(true);
Designer.initialize.initShapes();
if (callback) {
callback()
}
}
})
});
================================================
FILE: static/flow-editor/demo/js/plugin/flow/designer.ui.js
================================================
var UI={init:function(){$(".diagram_title").bind("click",function(){if($(this).hasClass("readonly")){return}var h=$.trim($(this).text());$(this).hide();$("#title_container").append("");$("#title_container").children("input").val(h).select();$("#title_container").children("input").bind("blur",function(){var i=$.trim($(this).val());UI.changeTitle(i)}).bind("keydown",function(i){if($.trim($(this).val()).length>60){$(this).val($.trim($(this).val()).substring(0,60))}if(i.keyCode==13){var j=$.trim($(this).val());UI.changeTitle(j)}})});$("#bar_theme").button({onMousedown:function(){UI.showThemeSelect()}});$("#bar_undo").button({onClick:function(){MessageSource.undo()}});$("#bar_redo").button({onClick:function(){MessageSource.redo()}});$("#bar_brush").button({onClick:function(){if($("#bar_brush").button("isSelected")){$("#bar_brush").button("unselect");$("#designer_op_help").hide();$(document).unbind("keydown.cancelbrush");Utils.selectCallback=null}else{Designer.clipboard.brush()}}});$("#bar_font_family").button({onMousedown:function(){$("#font_list").dropdown({target:$("#bar_font_family"),onSelect:function(j){var i=j.text();Designer.setFontStyle({fontFamily:i});$("#bar_font_family").button("setText",i)}});var h=$("#bar_font_family").text().trim();$("#font_list").children().each(function(){if($(this).text()==h){$("#font_list").dropdown("select",$(this));return false}})}});$("#bar_font_size").spinner({min:12,max:100,step:1,unit:"px",onChange:function(h){Designer.setFontStyle({size:h})}});$("#bar_font_size").spinner("setValue","13px");$("#bar_font_bold").button({onClick:function(){var h=!$("#bar_font_bold").button("isSelected");Designer.setFontStyle({bold:h});$("#bar_font_bold").toggleClass("selected")}});$("#bar_font_italic").button({onClick:function(){var h=!$("#bar_font_italic").button("isSelected");Designer.setFontStyle({italic:h});$("#bar_font_italic").toggleClass("selected")}});$("#bar_font_underline").button({onClick:function(){var h=!$("#bar_font_underline").button("isSelected");Designer.setFontStyle({underline:h});$("#bar_font_underline").toggleClass("selected")}});$("#bar_font_color").button({onMousedown:function(){var h=$("#bar_font_color").button("getColor");$.colorpicker({target:$("#bar_font_color"),onSelect:function(i){Designer.setFontStyle({color:i});$("#bar_font_color").button("setColor",i)},color:h,trans:false})}});$("#bar_font_align").button({onMousedown:function(){$("#font_align_list").dropdown({target:$("#bar_font_align"),onSelect:function(h){var i={};i[h.attr("cate")]=h.attr("al");Designer.setFontStyle(i)}})}});$("#bar_fill").button({onMousedown:function(){var h=$("#bar_fill").button("getColor");$.colorpicker({target:$("#bar_fill"),onSelect:function(i){Designer.setFillStyle({type:"solid",color:i});$("#bar_fill").button("setColor",i)},color:h,extend:""});$("#bar_fill_gradient").unbind().bind("click",function(){Designer.setFillStyle({type:"gradient"});$("#color_picker").dropdown("close")});$("#bar_fill_img").unbind().bind("click",function(){UI.showImageSelect(function(j,i,k){Designer.setFillStyle({type:"image",fileId:j,imageW:i,imageH:k})});$("#color_picker").dropdown("close")});$("#bar_fill_more").unbind().bind("click",function(){Dock.showView("graphic",true);$("#color_picker").dropdown("close")})}});$("#bar_line_color").button({onMousedown:function(){var h=$("#bar_line_color").button("getColor");$.colorpicker({target:$("#bar_line_color"),onSelect:function(i){Designer.setLineStyle({lineColor:i});$("#bar_line_color").button("setColor",i)},color:h,trans:false})}});$("#bar_line_width").button({onMousedown:function(){$("#line_width_list").dropdown({target:$("#bar_line_width"),onSelect:function(l){var k=parseInt(l.text());Designer.setLineStyle({lineWidth:k})}});var i=Utils.getSelected()[0];var h;if(i.name=="linker"){h=Utils.getLinkerLineStyle(i.lineStyle)}else{h=Utils.getShapeLineStyle(i.lineStyle)}var j=h.lineWidth;$("#line_width_list").children().each(function(){if(parseInt($(this).text())==j){$("#line_width_list").dropdown("select",$(this))}})}});$("#bar_line_style").button({onMousedown:function(){$("#line_style_list").dropdown({target:$("#bar_line_style"),onSelect:function(m){var l=m.attr("line");Designer.setLineStyle({lineStyle:l})}});var i=Utils.getSelected()[0];var h;if(i.name=="linker"){h=Utils.getLinkerLineStyle(i.lineStyle)}else{h=Utils.getShapeLineStyle(i.lineStyle)}var j=h.lineStyle;var k=$("#line_style_list").children("li[line="+j+"]");$("#line_style_list").dropdown("select",k)}});$("#bar_linkertype").button({onMousedown:function(){$("#line_type_list").dropdown({target:$("#bar_linkertype"),onSelect:function(j){var i=j.attr("tp");Designer.setLinkerType(i);var h=j.children("div").attr("class");$("#bar_linkertype").children("div:eq(0)").attr("class",h)}})}});$("#bar_beginarrow").button({onMousedown:function(){$("#beginarrow_list").dropdown({target:$("#bar_beginarrow"),onSelect:function(m){var n=m.attr("arrow");Designer.setLineStyle({beginArrowStyle:n});var l=m.children(".ico_arrow").attr("class");$("#bar_beginarrow").children("div:eq(0)").attr("class",l)}});var i=Utils.getSelected()[0];var h;if(i.name=="linker"){h=Utils.getLinkerLineStyle(i.lineStyle)}else{h=Utils.getShapeLineStyle(i.lineStyle)}var j=h.beginArrowStyle;var k=$("#beginarrow_list").children("li[arrow="+j+"]");$("#beginarrow_list").dropdown("select",k)}});$("#bar_endarrow").button({onMousedown:function(){$("#endarrow_list").dropdown({target:$("#bar_endarrow"),onSelect:function(m){var n=m.attr("arrow");Designer.setLineStyle({endArrowStyle:n});var l=m.children(".ico_arrow").attr("class");$("#bar_endarrow").children("div:eq(0)").attr("class",l)}});var i=Utils.getSelected()[0];var h;if(i.name=="linker"){h=Utils.getLinkerLineStyle(i.lineStyle)}else{h=Utils.getShapeLineStyle(i.lineStyle)}var j=h.endArrowStyle;var k=$("#endarrow_list").children("li[arrow="+j+"]");$("#endarrow_list").dropdown("select",k)}});$("#bar_front").button({onClick:function(){Designer.layerShapes("front")}});$("#bar_back").button({onClick:function(){Designer.layerShapes("back")}});$("#bar_lock").button({onClick:function(){Designer.lockShapes()}});$("#bar_unlock").button({onClick:function(){Designer.unlockShapes()}});$("#bar_link").button({onClick:function(){UI.showInsertLink()}});$("#bar_collapse").button({onClick:function(){var h=UI.toogleTitleBar();CLB.setConfig("showToolbar",h)}});$("#menu_bar").children().bind("mousedown",function(i){var h=$(this);b(h);i.stopPropagation()});$("#menu_bar").children().bind("mouseenter",function(){var h=$(this);if($("#ui_container").find(".options_menu:visible").length>0){b(h)}});function b(i){var l=i.attr("menu");if(i.hasClass("readonly")){return}$("#"+l).dropdown({target:i,onSelect:function(m){g(m)}});if(l=="bar_list_page"){var j=$("#bar_list_pagesize").children("li[w="+Model.define.page.width+"][h="+Model.define.page.height+"]");if(j.length>0){$("#bar_list_pagesize").dropdown("select",j)}else{$("#bar_list_pagesize").dropdown("select",$("#page_size_custom"))}$("#page_size_w").spinner("setValue",Model.define.page.width+"px");$("#page_size_h").spinner("setValue",Model.define.page.height+"px");j=$("#bar_list_padding").children("li[p="+Model.define.page.padding+"]");$("#bar_list_padding").dropdown("select",j);j=$("#bar_list_gridsize").children("li[s="+Model.define.page.gridSize+"]");$("#bar_list_gridsize").dropdown("select",j);if(Model.define.page.showGrid){$("#bar_list_page").dropdown("select",$("#bar_list_page").children("li[ac=set_page_showgrid]"))}else{$("#bar_list_page").dropdown("unselect",$("#bar_list_page").children("li[ac=set_page_showgrid]"))}var h="portrait";if(Model.define.page.orientation){h=Model.define.page.orientation}var k=$("#bar_list_orientation").children("li[ori="+h+"]");$("#bar_list_orientation").children().menuitem("unselect");k.menuitem("select")}else{if(l=="bar_list_view"){var j=$("#bar_list_view").children(".static[zoom='"+Designer.config.scale+"']");if(j.length){$("#bar_list_page").dropdown("select",j)}}}}function g(t){var k=t.attr("ac");if(k=="rename"){$(".diagram_title").trigger("click")}else{if(k=="close"){window.location.href="/diagraming/back?id="+chartId}else{if(k=="saveAs"){UI.showSaveAs()}else{if(k=="export"){$("#export_dialog").dlg();$("#export_png").click()}else{if(k=="undo"){MessageSource.undo()}else{if(k=="redo"){MessageSource.redo()}else{if(k=="cut"){Designer.clipboard.cut()}else{if(k=="copy"){Designer.clipboard.copy()}else{if(k=="paste"){Designer.clipboard.paste()}else{if(k=="duplicate"){Designer.clipboard.duplicate()}else{if(k=="brush"){Designer.clipboard.brush()}else{if(k=="selectall"){Designer.selectAll()}else{if(k=="delete"){Designer.op.removeShape()}else{if(k=="zoom"){var u=t.attr("zoom");if(u=="in"){Designer.zoomIn()}else{if(u=="out"){Designer.zoomOut()}else{var m=parseFloat(u);Designer.setZoomScale(m)}}}else{if(k=="insert"){var q=t.attr("in");if(q=="text"){Designer.op.changeState("creating_free_text")}else{if(q=="image"){UI.showImageSelect(function(s,p,x){UI.insertImage(s,p,x)})}else{if(q=="line"){Designer.op.changeState("creating_free_linker")}}}}else{if(k=="set_page_size"){var r=parseInt(t.attr("w"));var l=parseInt(t.attr("h"));Designer.setPageStyle({width:r,height:l})}else{if(k=="set_page_padding"){var j=parseInt(t.attr("p"));Designer.setPageStyle({padding:j})}else{if(k=="set_page_orientation"){var i=t.attr("ori");Designer.setPageStyle({orientation:i})}else{if(k=="set_page_showgrid"){if(t.menuitem("isSelected")){t.menuitem("unselect");Designer.setPageStyle({showGrid:false})}else{t.menuitem("select");Designer.setPageStyle({showGrid:true})}}else{if(k=="set_page_gridsize"){var v=parseInt(t.attr("s"));Designer.setPageStyle({gridSize:v})}else{if(k=="front"){Designer.layerShapes("front")}else{if(k=="back"){Designer.layerShapes("back")}else{if(k=="forward"){Designer.layerShapes("forward")}else{if(k=="backward"){Designer.layerShapes("backward")}else{if(k=="align_shape"){var n=t.attr("al");Designer.alignShapes(n)}else{if(k=="distribute_shape"){var o=t.attr("dis");Designer.distributeShapes(o)}else{if(k=="match_size"){if(t.attr("custom")){Dock.showView("metric",true)}else{var o={};var r=t.attr("w");var l=t.attr("h");if(r){o.w=r}if(l){o.h=l}Designer.matchSize(o)}}else{if(k=="lock"){Designer.lockShapes()}else{if(k=="unlock"){Designer.unlockShapes()}else{if(k=="group"){Designer.group()}else{if(k=="ungroup"){Designer.ungroup()}else{if(k=="hotkey"){UI.showHotKey()}else{if(k=="feedback"){UI.showFeedBack()}else{if(k=="getting_started"){UI.gettingStart()}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}$("#page_size_w").spinner({min:200,unit:"px",step:100,onChange:function(h){Designer.setPageStyle({width:h})}});$("#page_size_h").spinner({min:200,unit:"px",step:100,onChange:function(h){Designer.setPageStyle({height:h})}});var a=$("#color_picker").html();var c=$("").appendTo($("#bar_page_color"));c.css("right","-179px");c.children(".color_items").children("div").unbind().bind("click",function(){var h=$(this).css("background-color");h=h.replace(/\s/g,"");h=h.substring(4,h.length-1);Designer.setPageStyle({backgroundColor:h});$("#bar_list_page").dropdown("close")});c.children(".color_items").children("div").off("mouseenter").on("mouseenter",function(){var h=$(this).css("background-color");h=h.replace(/\s/g,"");h=UI.RGB2Hex(h);c.children(".color_hex").find("input").val(h)});c.children(".color_hex").find("input").off("keyup").on("keyup",function(){var i=$(this).val();if(i.length==3||i.length==6){var h=UI.hex2RGB("#"+i);Designer.setPageStyle({backgroundColor:h})}});c.children(".color_transparent").bind("click",function(){Designer.setPageStyle({backgroundColor:"transparent"});$("#bar_list_page").dropdown("close")});var e=Model.define.page;if(e.backgroundColor!="transparent"){var f=e.backgroundColor;var d=UI.RGB2Hex("rgb("+f+")");c.children(".color_hex").find("input").val(d)}Designer.events.push("selectChanged",0);Designer.events.push("clipboardChanged",0);Designer.events.push("undoStackChanged",0);Designer.events.push("redoStackChanged",0)},changeTitle:function(d){var b=$(".diagram_title").text();if(d&&d!=b&&chartId!=""){var a={action:"changeTitle",title:d};CLB.send(a)}var c=d!=""?d:b;$("title").text(c+" - ProcessOn");$(".diagram_title").text(c).show();$("#title_container").children("input").remove()},update:function(){var h=Utils.getSelectedIds();var f=h.length;var n=Utils.getSelectedLinkerIds();var a=n.length;var e=Utils.getSelectedShapeIds();var m=e.length;var l=Utils.getSelectedLockedIds().length;var k=Utils.getSelectedGroups().length;var d=$("#bar_list_arrange");if(f==0){$(".toolbar").find(".selected").removeClass("selected");if($("#designer_op_help").is(":visible")){$("#bar_brush").button("enable");$("#bar_brush").button("select")}else{$("#bar_brush").button("disable")}$("#bar_font_family").button("disable");$("#bar_font_size").button("disable");$("#bar_font_bold").button("disable");$("#bar_font_italic").button("disable");$("#bar_font_underline").button("disable");$("#bar_font_color").button("disable");$("#bar_font_align").button("disable");$("#bar_line_color").button("disable");$("#bar_line_width").button("disable");$("#bar_line_style").button("disable");$("#bar_front").button("disable");$("#bar_back").button("disable");$("#bar_lock").button("disable");var i=$("#bar_list_edit");i.children("li[ac=cut]").menuitem("disable");i.children("li[ac=copy]").menuitem("disable");i.children("li[ac=duplicate]").menuitem("disable");i.children("li[ac=brush]").menuitem("disable");i.children("li[ac=delete]").menuitem("disable");d.children("li[ac=front]").menuitem("disable");d.children("li[ac=back]").menuitem("disable");d.children("li[ac=forward]").menuitem("disable");d.children("li[ac=backward]").menuitem("disable");d.children("li[ac=lock]").menuitem("disable")}else{$("#bar_brush").button("enable");if($("#designer_op_help").is(":visible")){$("#bar_brush").button("select")}$("#bar_font_family").button("enable");$("#bar_font_size").button("enable");$("#bar_font_bold").button("enable");$("#bar_font_italic").button("enable");$("#bar_font_underline").button("enable");$("#bar_font_color").button("enable");$("#bar_font_align").button("enable");$("#bar_line_color").button("enable");$("#bar_line_width").button("enable");$("#bar_line_style").button("enable");$("#bar_front").button("enable");$("#bar_back").button("enable");$("#bar_lock").button("enable");var i=$("#bar_list_edit");i.children("li[ac=cut]").menuitem("enable");i.children("li[ac=copy]").menuitem("enable");i.children("li[ac=duplicate]").menuitem("enable");i.children("li[ac=brush]").menuitem("enable");i.children("li[ac=delete]").menuitem("enable");d.children("li[ac=front]").menuitem("enable");d.children("li[ac=back]").menuitem("enable");d.children("li[ac=forward]").menuitem("enable");d.children("li[ac=backward]").menuitem("enable");d.children("li[ac=lock]").menuitem("enable");var g=Model.getShapeById(h[0]);var b;var c;if(g.name=="linker"){b=Utils.getLinkerFontStyle(g.fontStyle);c=Utils.getLinkerLineStyle(g.lineStyle)}else{b=Utils.getShapeFontStyle(g.fontStyle);c=Utils.getShapeLineStyle(g.lineStyle)}$("#bar_font_family").button("setText",b.fontFamily);$("#bar_font_size").spinner("setValue",b.size+"px");if(b.bold){$("#bar_font_bold").button("select")}else{$("#bar_font_bold").button("unselect")}if(b.italic){$("#bar_font_italic").button("select")}else{$("#bar_font_italic").button("unselect")}if(b.underline){$("#bar_font_underline").button("select")}else{$("#bar_font_underline").button("unselect")}$("#bar_font_color").button("setColor",b.color);$("#bar_line_color").button("setColor",c.lineColor)}if(m==0){$("#bar_fill").button("disable")}else{$("#bar_fill").button("enable");var g=Model.getShapeById(e[0]);var j=Utils.getShapeFillStyle(g.fillStyle);if(j.type=="solid"){$("#bar_fill").button("setColor",j.color)}else{if(j.type=="gradient"){$("#bar_fill").button("setColor",j.endColor)}}}if(m!=1){$("#bar_link").button("disable")}else{$("#bar_link").button("enable")}if(a==0){$("#bar_linkertype").button("disable");$("#bar_beginarrow").button("disable");$("#bar_endarrow").button("disable")}else{$("#bar_linkertype").button("enable");$("#bar_beginarrow").button("enable");$("#bar_endarrow").button("enable");var g=Model.getShapeById(n[0]);var c=Utils.getLinkerLineStyle(g.lineStyle);$("#bar_linkertype").children("div:eq(0)").attr("class","ico linkertype_"+g.linkerType.toLowerCase());$("#bar_beginarrow").children("div:eq(0)").attr("class","ico ico_arrow larrow_"+c.beginArrowStyle.toLowerCase());$("#bar_endarrow").children("div:eq(0)").attr("class","ico ico_arrow rarrow_"+c.endArrowStyle.toLowerCase())}if(l==0){$("#bar_unlock").button("disable");d.children("li[ac=unlock]").menuitem("disable")}else{$("#bar_unlock").button("enable");d.children("li[ac=unlock]").menuitem("enable")}if(f<2){d.children("li[ac=group]").menuitem("disable");$("#bar_arrange_align").menuitem("disable")}else{d.children("li[ac=group]").menuitem("enable");$("#bar_arrange_align").menuitem("enable")}if(m<2){$("#bar_arrange_match").menuitem("disable")}else{$("#bar_arrange_match").menuitem("enable")}if(f<3){$("#bar_arrange_dist").menuitem("disable")}else{$("#bar_arrange_dist").menuitem("enable")}if(k==0){d.children("li[ac=ungroup]").menuitem("disable")}else{d.children("li[ac=ungroup]").menuitem("enable")}},showInsertLink:function(){$("#link_dialog").dlg();var a=Utils.getSelected()[0].link;if(!a){a=""}$("#linkto_addr").val(a).select();$("#linkto_addr").unbind().bind("keydown",function(b){if(b.keyCode==13){UI.setLink()}})},setLink:function(){var b=$("#linkto_addr").val();var a=Utils.getSelected()[0];a.link=b;Model.update(a);$("#link_dialog").dlg("close")},imageSelectedCallback:null,showImageSelect:function(d){if(d){this.imageSelectedCallback=d}else{this.imageSelectedCallback=null}this.fetchingRequest=null;var a=$(window).height()-200;if(a>550){a=550}else{if(a<200){a=200}}$(".image_list").height(a);$("#image_dialog").dlg({onClose:function(){if(UI.fetchingRequest){UI.fetchingRequest.abort()}}});if($("#image_select_upload").is(":visible")){UI.loadUserImages()}$(".image_sources").children().unbind("click").bind("click",function(){UI.showImageSelectContent($(this).attr("ty"))});$("#upload_img_res").empty();$("#input_upload_image").unbind().bind("change",function(){$("#upload_img_res").html("上传中...");$("#frm_upload_image").submitForm({success:function(e){if(e.result=="type_wrong"){$("#upload_img_res").html("此文件不是图片，请重新选择")}else{if(e.result=="size_wrong"){$("#upload_img_res").html("文件大小超出要求，最大2M")}else{if(e.result=="exception"){$("#upload_img_res").html("无法使用此图片，请选择其他图片")}else{var f=e.image;UI.setShapeImage(f.fileId,f.imageW,f.imageH)}}}}})});$("#input_img_url").val("");$("#img_url_area").empty();var c="";function b(){var e=$("#input_img_url").val().trim();if(e!=c){c=e;if(e!=""){if(e.indexOf("http")<0){e="http://"+e}$("#img_url_area").html("正在加载预览...");var f=$("无法在此地址下加载图片。
")})}}}$("#input_img_url").unbind().bind("paste",function(){b()}).bind("keyup",function(){b()});$("#input_img_search").unbind().bind("keydown",function(f){if(f.keyCode==13){UI.searchImage()}});$("#btn_img_search").unbind().bind("click",function(){UI.searchImage()});$("#set_image_submit").button("enable");$("#set_image_submit").button({onClick:function(){var e=$(".image_sources").children(".active").attr("ty");if(e=="upload"){var n=$("#user_image_items").children(".image_item_selected");if(n.length>0){var g=n.attr("fileId");var m=n.attr("w");var j=n.attr("h");UI.setShapeImage(g,m,j)}else{$("#image_dialog").dlg("close")}}else{if(e=="url"){var k=$(".img_url_loaded");if(k.length>0){var f=k.attr("src");UI.setShapeImage(f,k.width(),k.height())}else{$("#image_dialog").dlg("close")}}else{var n=$("#google_image_items").children(".image_item_selected");if(n.length>0){var f=n.attr("u");var l=parseInt(n.attr("w"));var i=parseInt(n.attr("h"));UI.setShapeImage(f,l,i)}else{$("#image_dialog").dlg("close")}}}}});$("#set_image_cancel").button({onClick:function(){$("#image_dialog").dlg("close")}});$("#set_image_text").empty()},showImageSelectContent:function(a){$(".image_list").hide();$("#image_select_"+a).show().find("input[type=text]").select();$(".image_sources").children().removeClass("active");$(".image_sources").children("li[ty="+a+"]").addClass("active")},loadUserImages:function(a){$("#user_image_items").empty();$.ajax({url:"/user_image/list",success:function(d){if(d.images){for(var c=0;c- 请检查图片地址是否输入正确。
- 确保图片地址是公开的。
没有搜索结果，建议使用常见英文单词进行搜索。
")}else{var j=c.icons;for(var d=0;d"+l.size_width+"x"+l.size_height+"
").appendTo(f);b.data("sizes",k);if(k.length>1){b.append("");b.bind("click",function(){UI.dropImageSizes($(this))})}else{b.css({"padding-left":"9px",cursor:"default"})}break}}}$("#google_image_items").append("");$(".img_gg_loading_tip").remove();$(".gg_img_more").remove();if(UI.searchIndex+24正在加载图片...
");this.searchIndex+=24},dropImageSizes:function(e){var d=e.data("sizes");d.sort(function(h,g){return h.size-g.size});var f=$("#img_size_menu");if(f.length==0){f=$("").appendTo("#ui_container")}f.empty();for(var c=0;c
-
单选框
-
标题
-
布局
-
多选框
-
符号-图片上传
-
多行文本
-
开关
-
时间选择器
-
单行文本
-
下拉选择
-
计数标签
Unicode 引用
Unicode 是字体在网页端最原始的应用方式，特点是：
- 兼容性最好，支持 IE6+，及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小，颜色等等。
- 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式
Unicode 使用步骤如下：
第一步：拷贝项目下面生成的 @font-face
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
第二步：定义使用 iconfont 的样式
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
第三步：挑选相应图标并获取字体编码，应用于页面
<span class="iconfont">3</span>
"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。
-
单选框.icon-danxuankuang
-
标题.icon-biaoti
-
布局.icon-ai211
-
多选框.icon-duoxuankuang1
-
符号-图片上传.icon-tupianshangchuan
-
多行文本.icon-duohangwenben
-
开关.icon-kaiguan
-
时间选择器.icon-shijianxuanzeqi
-
单行文本.icon-danhangwenben
-
下拉选择.icon-xialaxuanze
-
计数标签.icon-jishubiaoqian
font-class 引用
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
与 Unicode 使用方式相比，具有如下特点：
- 兼容性良好，支持 IE8+，及所有现代浏览器。
- 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
- 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
- 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
使用步骤如下：
第一步：引入项目下面生成的 fontclass 代码：
<link rel="stylesheet" href="./iconfont.css">
第二步：挑选相应图标并获取类名，应用于页面：
<span class="iconfont icon-xxx"></span>
" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。
-
单选框#icon-danxuankuang
-
标题#icon-biaoti
-
布局#icon-ai211
-
多选框#icon-duoxuankuang1
-
符号-图片上传#icon-tupianshangchuan
-
多行文本#icon-duohangwenben
-
开关#icon-kaiguan
-
时间选择器#icon-shijianxuanzeqi
-
单行文本#icon-danhangwenben
-
下拉选择#icon-xialaxuanze
-
计数标签#icon-jishubiaoqian
Symbol 引用
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
- 支持多色图标了，不再受单色限制。
- 通过一些技巧，支持像字体那样，通过
font-size,color来调整样式。 - 兼容性较差，支持 IE9+，及现代浏览器。
- 浏览器渲染 SVG 的性能一般，还不如 png。
使用步骤如下：
第一步：引入项目下面生成的 symbol 代码：
<script src="./iconfont.js"></script>
第二步：加入通用 CSS 代码（引入一次就行）：
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步：挑选相应图标并获取类名，应用于页面：
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>