设计器快捷调整间距操作优化

This commit is contained in:
mrs_12345@163.com 2022-07-22 17:04:28 +08:00
parent a824b91df2
commit 53d18f902c
3 changed files with 208 additions and 177 deletions

View File

@ -168,9 +168,9 @@ Designer.contextMenu.execAction = function(item) {
} else if (action == "customdefine") {
openCustomDefineDialog();
} else if(action == 'selectVertical') {
Designer.selectVertical(this.menuPos);
Designer.selectVertical();
} else if (action == 'selectHorizontal') {
Designer.selectHorizontal(this.menuPos);
Designer.selectHorizontal();
}
};

View File

@ -71,101 +71,117 @@ Designer.addFunction("selectAll", function(){
/**
* 设计器方法调节垂直间距
*/
Designer.addFunction("selectVertical", function(menuPos) {
var sublinePos = menuPos.y
Designer.addFunction("selectVertical", function() {
var sublinePos
var subline1 = $('#designer_subline1') // 初始位置
var subline2 = $('#designer_subline2')
subline1.css({
display : "block",
"z-index" : Model.orderList.length + 4,
width: Model.define.page.width,
height: 0,
borderStyle:'dotted',
borderWidth: '1px',
left: 0,
top : sublinePos
});
subline2.css({
display : "block",
"z-index" : Model.orderList.length + 5,
width: Model.define.page.width,
height: 0,
borderStyle:'dotted',
borderWidth: '1px',
left: 0,
top : sublinePos,
cursor: 'move'
});
var obj = filterShapeAndLine('y',sublinePos)
var obj
var container = $("#canvas_container");
var canvas = $("#designer_canvas");
subline2.bind('mousedown.drag',function (b) {
container.bind('mousemove.drag',function (e) {
var newPos = Utils.getRelativePos(e.pageX, e.pageY, canvas);
if (newPos.y >= sublinePos) { // 增加
subline1.css({
borderColor: 'rgb(114,253,107)',
backgroundColor: 'rgba(114,253,107,0.5)',
height: newPos.y - sublinePos
})
subline2.css({
borderColor: 'rgb(114,253,107)',
backgroundColor: 'transparent',
height: 0
})
subline2.css({
top : newPos.y,
});
} else { // 减少
let maxY = obj.passedShapesEdge - obj.sublineSideEdge > 0 ? obj.passedShapesEdge : obj.sublineSideEdge
if (newPos.y < maxY) {
newPos.y = maxY
}
subline1.css({
borderColor: 'rgb(246,163,163)',
backgroundColor: 'transparent',
height: 0
})
subline2.css({
borderColor: 'rgb(246,163,163)',
backgroundColor: 'rgba(246,163,163,0.5)',
height: sublinePos - newPos.y
})
subline2.css({
top : newPos.y,
});
}
$(document).unbind("mouseup.drop").bind("mouseup.drop",
function(e) {
var height1 = subline1.height()
var height2 = subline2.height()
if (height1 != 0 && height2 == 0) { // 增加
moveShapeAndFile('y',sublinePos,height1)
} else if (height1 == 0 && height2 != 0) { // 减少
moveShapeAndFile('y',sublinePos,0-height2)
}
container.bind('mousemove.drag',function (a) {
let pos = Utils.getRelativePos(a.pageX, a.pageY, canvas)
subline1.css({
display : "block",
"z-index" : Model.orderList.length + 4,
width: Model.define.page.width,
height: 0,
borderStyle:'dotted',
borderWidth: '1px',
left: 0,
top : pos.y
});
container.bind('mousedown.drag',function (b) {
container.unbind("mousemove.drag");
let pos1 = Utils.getRelativePos(b.pageX, b.pageY, canvas)
sublinePos = pos1.y
obj = filterShapeAndLine('y',sublinePos)
subline1.css({
display : "block",
"z-index" : Model.orderList.length + 4,
width: Model.define.page.width,
height: 0,
borderStyle:'dotted',
borderWidth: '1px',
left: 0,
top : pos1.y
});
subline2.css({
display : "block",
"z-index" : Model.orderList.length + 5,
width: Model.define.page.width,
height: 0,
borderStyle:'dotted',
borderWidth: '1px',
left: 0,
top : pos1.y,
cursor: 'move'
});
container.bind('mousemove.drag',function (e) {
var newPos = Utils.getRelativePos(e.pageX, e.pageY, canvas);
if (newPos.y >= sublinePos) { // 增加
subline1.css({
borderColor: '#333',
borderColor: 'rgb(114,253,107)',
backgroundColor: 'rgba(114,253,107,0.5)',
height: newPos.y - sublinePos
})
subline2.css({
borderColor: 'rgb(114,253,107)',
backgroundColor: 'transparent',
height: 0
})
subline2.css({
borderColor: '#333',
top : newPos.y,
});
} else { // 减少
let maxY = obj.passedShapesEdge - obj.sublineSideEdge > 0 ? obj.passedShapesEdge : obj.sublineSideEdge
if (newPos.y < maxY) {
newPos.y = maxY
}
subline1.css({
borderColor: 'rgb(246,163,163)',
backgroundColor: 'transparent',
height: 0
})
subline1.hide()
subline2.hide()
subline2.css({
borderColor: 'rgb(246,163,163)',
backgroundColor: 'rgba(246,163,163,0.5)',
height: sublinePos - newPos.y
})
subline2.css({
top : newPos.y,
});
}
$(document).unbind("mouseup.drop").bind("mouseup.drop",
function(e) {
var height1 = subline1.height()
var height2 = subline2.height()
if (height1 != 0 && height2 == 0) { // 增加
moveShapeAndFile('y',sublinePos,height1)
} else if (height1 == 0 && height2 != 0) { // 减少
moveShapeAndFile('y',sublinePos,0-height2)
}
subline1.css({
borderColor: '#333',
backgroundColor: 'transparent',
height: 0
})
subline2.css({
borderColor: '#333',
backgroundColor: 'transparent',
height: 0
})
subline1.hide()
subline2.hide()
$(document).unbind("mouseup.drop")
})
})
$(document).bind('mouseup.drag',function () {
container.unbind("mousemove.drag");
subline2.unbind("mousedown.drag");
$(document).unbind("mouseup.drag");
$(document).unbind("mouseup.drop")
})
})
$(document).bind('mouseup.drag',function () {
container.unbind("mousemove.drag");
container.unbind("mousedown.drag");
$(document).unbind("mouseup.drag");
})
})
})
});
@ -559,103 +575,118 @@ function moveLanes(type,sublinePos,movedDistance) {
/**
* 设计器方法调节水平间距
*/
Designer.addFunction("selectHorizontal", function(menuPos) {
var sublinePos = menuPos.x
Designer.addFunction("selectHorizontal", function() {
var sublinePos
var subline1 = $('#designer_subline1') // 初始位置
var subline2 = $('#designer_subline2')
subline1.css({
display : "block",
"z-index" : Model.orderList.length + 4,
width: 0,
height: Model.define.page.width,
borderStyle:'dotted',
borderWidth: '1px',
left: sublinePos,
top : 0
});
subline2.css({
display : "block",
"z-index" : Model.orderList.length + 5,
width: 0,
height: Model.define.page.width,
borderStyle:'dotted',
borderWidth: '1px',
left: sublinePos,
top : 0,
cursor: 'move'
});
var obj = filterShapeAndLine('x',sublinePos)
var obj
var container = $("#canvas_container");
var canvas = $("#designer_canvas");
subline2.bind('mousedown.drag',function (b) {
container.bind('mousemove.drag',function (e) {
var newPos = Utils.getRelativePos(e.pageX, e.pageY, canvas);
if (newPos.x >= sublinePos) { // 增加
subline1.css({
borderColor: 'rgb(114,253,107)',
backgroundColor: 'rgba(114,253,107,0.5)',
width: newPos.x - sublinePos
})
subline2.css({
borderColor: 'rgb(114,253,107)',
backgroundColor: 'transparent',
width: 0
})
subline2.css({
left : newPos.x,
});
} else { // 减少
let max = obj.passedShapesEdge - obj.sublineSideEdge > 0 ? obj.passedShapesEdge : obj.sublineSideEdge
if (newPos.x < max) {
newPos.x = max
}
subline1.css({
borderColor: 'rgb(246,163,163)',
backgroundColor: 'transparent',
width: 0
})
subline2.css({
borderColor: 'rgb(246,163,163)',
backgroundColor: 'rgba(246,163,163,0.5)',
width: sublinePos - newPos.x
})
subline2.css({
left : newPos.x,
});
}
$(document).unbind("mouseup.drop").bind("mouseup.drop",
function(e) {
var width1 = subline1.width()
var width2 = subline2.width()
if(width1 != 0 && width2 == 0) { // 增加
moveShapeAndFile('x',sublinePos,width1)
} else if(width1 == 0 && width2 != 0) { // 减少
moveShapeAndFile('x',sublinePos,0-width2)
}
container.bind('mousemove.drag',function (a) {
let pos = Utils.getRelativePos(a.pageX, a.pageY, canvas)
subline1.css({
display : "block",
"z-index" : Model.orderList.length + 4,
width: 0,
height: Model.define.page.height,
borderStyle:'dotted',
borderWidth: '1px',
left: pos.x,
top : 0
});
container.bind('mousedown.drag',function (b) {
container.unbind("mousemove.drag");
let pos1 = Utils.getRelativePos(b.pageX, b.pageY, canvas)
sublinePos = pos1.x
obj = filterShapeAndLine('x',sublinePos)
subline1.css({
display : "block",
"z-index" : Model.orderList.length + 4,
width: 0,
height: Model.define.page.height,
borderStyle:'dotted',
borderWidth: '1px',
left: pos1.x,
top : 0
});
subline2.css({
display : "block",
"z-index" : Model.orderList.length + 5,
width: 0,
height: Model.define.page.height,
borderStyle:'dotted',
borderWidth: '1px',
left: pos1.x,
top : 0,
cursor: 'move'
});
container.bind('mousemove.drag',function (e) {
var newPos = Utils.getRelativePos(e.pageX, e.pageY, canvas);
if (newPos.x >= sublinePos) { // 增加
subline1.css({
borderColor: '#333',
borderColor: 'rgb(114,253,107)',
backgroundColor: 'rgba(114,253,107,0.5)',
width: newPos.x - sublinePos
})
subline2.css({
borderColor: 'rgb(114,253,107)',
backgroundColor: 'transparent',
width: 0
})
subline2.css({
borderColor: '#333',
left : newPos.x,
});
} else { // 减少
let max = obj.passedShapesEdge - obj.sublineSideEdge > 0 ? obj.passedShapesEdge : obj.sublineSideEdge
if (newPos.x < max) {
newPos.x = max
}
subline1.css({
borderColor: 'rgb(246,163,163)',
backgroundColor: 'transparent',
width: 0
})
subline1.hide()
subline2.hide()
subline2.css({
borderColor: 'rgb(246,163,163)',
backgroundColor: 'rgba(246,163,163,0.5)',
width: sublinePos - newPos.x
})
subline2.css({
left : newPos.x,
});
}
$(document).unbind("mouseup.drop").bind("mouseup.drop",
function(e) {
var width1 = subline1.width()
var width2 = subline2.width()
if(width1 != 0 && width2 == 0) { // 增加
moveShapeAndFile('x',sublinePos,width1)
} else if(width1 == 0 && width2 != 0) { // 减少
moveShapeAndFile('x',sublinePos,0-width2)
}
$(document).unbind("mouseup.drop")
})
})
$(document).bind('mouseup.drag',function () {
container.unbind("mousemove.drag");
subline2.unbind("mousedown.drag");
$(document).unbind("mouseup.drag");
subline1.css({
borderColor: '#333',
backgroundColor: 'transparent',
width: 0
})
subline2.css({
borderColor: '#333',
backgroundColor: 'transparent',
width: 0
})
subline1.hide()
subline2.hide()
$(document).unbind("mouseup.drop")
})
})
$(document).bind('mouseup.drag',function () {
container.unbind("mousemove.drag");
container.unbind("mousedown.drag");
$(document).unbind("mouseup.drag");
})
})
})
});
@ -664,10 +695,10 @@ Designer.addFunction("selectHorizontal", function(menuPos) {
* 设计器方法修改字体样式
*/
Designer.addFunction("setFontStyle", function(style){
var selected = Utils.getSelected();
if(selected.length == 0){
return;
}
var selected = Utils.getSelected();
if(selected.length == 0){
return;
}
for(var i = 0; i < selected.length; i++){
var shape = selected[i];
shape.fontStyle = Utils.copy(shape.fontStyle);
@ -710,11 +741,11 @@ Designer.addFunction("setFontStyle", function(style){
* 设计器方法修改样式
*/
Designer.addFunction("setShapeStyle", function(style){
var selected = Utils.getSelected();
if(selected.length == 0){
return;
}
var changed = [];
var selected = Utils.getSelected();
if(selected.length == 0){
return;
}
var changed = [];
for(var i = 0; i < selected.length; i++){
var shape = selected[i];
//连接线和形状不同的样式