设计器快捷调整间距撤销回显 bug解决

This commit is contained in:
mrs_12345@163.com 2022-07-22 14:25:16 +08:00
parent 46f87c615f
commit 17dbfd1a62
2 changed files with 218 additions and 181 deletions

View File

@ -291,42 +291,6 @@ function moveShapeAndFile(type,sublinePos,movedDistance) {
var passedMoreShapes = obj.passedMoreShapes var passedMoreShapes = obj.passedMoreShapes
var laneArr = obj.laneArr var laneArr = obj.laneArr
for (let i = 0; i < movingLines.length; i++) {
let fromIndex = passedShapes.findIndex(item => item.id == movingLines[i].from.id)
let toIndex = passedShapes.findIndex(item => item.id == movingLines[i].to.id)
let moreFromIndex = passedMoreShapes.findIndex(item => item.id == movingLines[i].from.id)
let moreToIndex = passedMoreShapes.findIndex(item => item.id == movingLines[i].to.id)
for (let j = 0; j < movingLines[i].points.length; j++) {
if(movingLines[i].points[j][type] > sublinePos ) {
movingLines[i].points[j][type] += movedDistance
}
}
if (movingLines[i].from[type] > sublinePos && moreFromIndex == -1) {
movingLines[i].from[type] += movedDistance
} else if(movingLines[i].from[type] <= sublinePos && fromIndex !== -1) {
for (let j = 0; j < movingLines[i].points.length; j++) {
if(movingLines[i].points[j][type] == movingLines[i].from[type]) {
movingLines[i].points[j][type] += movedDistance
}
}
movingLines[i].from[type] += movedDistance
}
if (movingLines[i].to[type] > sublinePos && moreToIndex == -1) {
movingLines[i].to[type] += movedDistance
} else if(passedShapes.length > 0 && movingLines[i].to[type] <= sublinePos && toIndex !== -1) {
for (let j = 0; j < movingLines[i].points.length; j++) {
if(movingLines[i].points[j][type] == movingLines[i].to[type]) {
movingLines[i].points[j][type] += movedDistance
}
}
movingLines[i].to[type] += movedDistance
}
Designer.painter.renderLinker(movingLines[i])
}
if(laneArr.length == 0) { if(laneArr.length == 0) {
if(type == 'y') { if(type == 'y') {
Designer.op.moveShape(movingShapes,{ Designer.op.moveShape(movingShapes,{
@ -339,6 +303,41 @@ function moveShapeAndFile(type,sublinePos,movedDistance) {
y: 0 y: 0
}) })
} }
for (let i = 0; i < movingLines.length; i++) {
let fromIndex = passedShapes.findIndex(item => item.id == movingLines[i].from.id)
let toIndex = passedShapes.findIndex(item => item.id == movingLines[i].to.id)
let moreFromIndex = passedMoreShapes.findIndex(item => item.id == movingLines[i].from.id)
let moreToIndex = passedMoreShapes.findIndex(item => item.id == movingLines[i].to.id)
for (let j = 0; j < movingLines[i].points.length; j++) {
if(movingLines[i].points[j][type] > sublinePos ) {
movingLines[i].points[j][type] += movedDistance
}
}
if (movingLines[i].from[type] > sublinePos && moreFromIndex == -1) {
movingLines[i].from[type] += movedDistance
} else if(movingLines[i].from[type] <= sublinePos && fromIndex !== -1) {
for (let j = 0; j < movingLines[i].points.length; j++) {
if(movingLines[i].points[j][type] == movingLines[i].from[type]) {
movingLines[i].points[j][type] += movedDistance
}
}
movingLines[i].from[type] += movedDistance
}
if (movingLines[i].to[type] > sublinePos && moreToIndex == -1) {
movingLines[i].to[type] += movedDistance
} else if(passedShapes.length > 0 && movingLines[i].to[type] <= sublinePos && toIndex !== -1) {
for (let j = 0; j < movingLines[i].points.length; j++) {
if(movingLines[i].points[j][type] == movingLines[i].to[type]) {
movingLines[i].points[j][type] += movedDistance
}
}
movingLines[i].to[type] += movedDistance
}
Designer.painter.renderLinker(movingLines[i])
}
Designer.op.hideTip(); Designer.op.hideTip();
Utils.unselect(); Utils.unselect();
@ -355,6 +354,8 @@ function moveLanes(type,sublinePos,movedDistance) {
var obj = filterShapeAndLine(type,sublinePos) var obj = filterShapeAndLine(type,sublinePos)
var movingLines = obj.movingLines var movingLines = obj.movingLines
var movingShapes = obj.movingShapes var movingShapes = obj.movingShapes
var passedShapes = obj.passedShapes
var passedMoreShapes = obj.passedMoreShapes
var laneArr = obj.laneArr var laneArr = obj.laneArr
var laneGroupArr = [] var laneGroupArr = []
var changedLanes = [] var changedLanes = []
@ -509,6 +510,42 @@ function moveLanes(type,sublinePos,movedDistance) {
}) })
} }
for (let i = 0; i < movingLines.length; i++) {
let fromIndex = passedShapes.findIndex(item => item.id == movingLines[i].from.id)
let toIndex = passedShapes.findIndex(item => item.id == movingLines[i].to.id)
let moreFromIndex = passedMoreShapes.findIndex(item => item.id == movingLines[i].from.id)
let moreToIndex = passedMoreShapes.findIndex(item => item.id == movingLines[i].to.id)
for (let j = 0; j < movingLines[i].points.length; j++) {
if(movingLines[i].points[j][type] > sublinePos ) {
movingLines[i].points[j][type] += movedDistance
}
}
if (movingLines[i].from[type] > sublinePos && moreFromIndex == -1) {
movingLines[i].from[type] += movedDistance
} else if(movingLines[i].from[type] <= sublinePos && fromIndex !== -1) {
for (let j = 0; j < movingLines[i].points.length; j++) {
if(movingLines[i].points[j][type] == movingLines[i].from[type]) {
movingLines[i].points[j][type] += movedDistance
}
}
movingLines[i].from[type] += movedDistance
}
if (movingLines[i].to[type] > sublinePos && moreToIndex == -1) {
movingLines[i].to[type] += movedDistance
} else if(passedShapes.length > 0 && movingLines[i].to[type] <= sublinePos && toIndex !== -1) {
for (let j = 0; j < movingLines[i].points.length; j++) {
if(movingLines[i].points[j][type] == movingLines[i].to[type]) {
movingLines[i].points[j][type] += movedDistance
}
}
movingLines[i].to[type] += movedDistance
}
Designer.painter.renderLinker(movingLines[i])
}
Designer.op.hideTip(); Designer.op.hideTip();
Utils.unselect(); Utils.unselect();
@ -699,12 +736,12 @@ Designer.addFunction("setShapeStyle", function(style){
* 设计器方法修改线条样式 * 设计器方法修改线条样式
*/ */
Designer.addFunction("setLineStyle", function(style){ Designer.addFunction("setLineStyle", function(style){
var selected = Utils.getSelected(); var selected = Utils.getSelected();
if(selected.length == 0){ if(selected.length == 0){
return; return;
} }
var familyShapes = Utils.getFamilyShapes(selected); var familyShapes = Utils.getFamilyShapes(selected);
selected = selected.concat(familyShapes); selected = selected.concat(familyShapes);
for(var i = 0; i < selected.length; i++){ for(var i = 0; i < selected.length; i++){
var shape = selected[i]; var shape = selected[i];
//重新赋一下因为有些新建的图形可能没有lineStyle属性 //重新赋一下因为有些新建的图形可能没有lineStyle属性
@ -745,16 +782,16 @@ Designer.addFunction("setLineStyle", function(style){
* 设计器方法修改填充样式 * 设计器方法修改填充样式
*/ */
Designer.addFunction("setFillStyle", function(style){ Designer.addFunction("setFillStyle", function(style){
var selected = Utils.getSelected(); var selected = Utils.getSelected();
if(selected.length == 0){ if(selected.length == 0){
return; return;
} }
//抛出事件处理 //抛出事件处理
selected = Designer.events.push("settingFillStyle", selected); selected = Designer.events.push("settingFillStyle", selected);
if(selected.length == 0){ if(selected.length == 0){
return; return;
} }
var changed = []; var changed = [];
for(var i = 0; i < selected.length; i++){ for(var i = 0; i < selected.length; i++){
var shape = selected[i]; var shape = selected[i];
if(shape.name != "linker"){ if(shape.name != "linker"){
@ -799,7 +836,7 @@ Designer.addFunction("setFillStyle", function(style){
if(typeof style.angle != "undefined"){ if(typeof style.angle != "undefined"){
shape.fillStyle.angle = style.angle; shape.fillStyle.angle = style.angle;
} }
} }
if(type == "image"){ if(type == "image"){
//图片类型 //图片类型
@ -866,11 +903,11 @@ Designer.addFunction("setFillStyle", function(style){
* 设计器方法修改连接线类型 * 设计器方法修改连接线类型
*/ */
Designer.addFunction("setLinkerType", function(type){ Designer.addFunction("setLinkerType", function(type){
var selected = Utils.getSelected(); var selected = Utils.getSelected();
if(selected.length == 0){ if(selected.length == 0){
return; return;
} }
var changed = []; var changed = [];
for(var i = 0; i < selected.length; i++){ for(var i = 0; i < selected.length; i++){
var shape = selected[i]; var shape = selected[i];
if(shape.name == "linker"){ if(shape.name == "linker"){
@ -893,13 +930,13 @@ Designer.addFunction("setLinkerType", function(type){
* 设计器方法匹配大小 * 设计器方法匹配大小
*/ */
Designer.addFunction("matchSize", function(size){ Designer.addFunction("matchSize", function(size){
var selected = Utils.getSelected(); var selected = Utils.getSelected();
if(selected.length == 0 || !size){ if(selected.length == 0 || !size){
return; return;
} }
var maxW = null; var maxW = null;
var maxH = null; var maxH = null;
var linkerIds = []; //定义linkerIds变量保存会变化的连接线id随后再逐一进行计算 var linkerIds = []; //定义linkerIds变量保存会变化的连接线id随后再逐一进行计算
for(var i = 0; i < selected.length; i++){ for(var i = 0; i < selected.length; i++){
var shape = selected[i]; var shape = selected[i];
if(shape.name != "linker"){ if(shape.name != "linker"){
@ -943,16 +980,16 @@ Designer.addFunction("matchSize", function(size){
* left center right top middle bottom * left center right top middle bottom
*/ */
Designer.addFunction("alignShapes", function(type){ Designer.addFunction("alignShapes", function(type){
var selected = Utils.getSelected(); var selected = Utils.getSelected();
if(selected.length == 0 || !type){ if(selected.length == 0 || !type){
return; return;
} }
var selectedIds = Utils.getSelectedIds(); var selectedIds = Utils.getSelectedIds();
var box = Utils.getControlBox(selectedIds); var box = Utils.getControlBox(selectedIds);
var linkerIds = []; var linkerIds = [];
Utils.removeAnchors(); Utils.removeAnchors();
var changed = []; var changed = [];
for(var i = 0; i < selected.length; i++){ for(var i = 0; i < selected.length; i++){
var shape = selected[i]; var shape = selected[i];
if(shape.name != "linker"){ if(shape.name != "linker"){
changed.push(shape); changed.push(shape);
@ -1061,16 +1098,16 @@ Designer.addFunction("alignShapes", function(type){
* h, v * h, v
*/ */
Designer.addFunction("distributeShapes", function(type){ Designer.addFunction("distributeShapes", function(type){
var selected = Utils.getSelected(); var selected = Utils.getSelected();
if(selected.length == 0 || !type){ if(selected.length == 0 || !type){
return; return;
} }
var selectedIds = Utils.getSelectedIds(); var selectedIds = Utils.getSelectedIds();
var box = Utils.getControlBox(selectedIds); var box = Utils.getControlBox(selectedIds);
var linkerIds = []; var linkerIds = [];
Utils.removeAnchors(); Utils.removeAnchors();
var shapes = []; var shapes = [];
for(var i = 0; i < selected.length; i++){ for(var i = 0; i < selected.length; i++){
var shape = selected[i]; var shape = selected[i];
if(shape.name != "linker"){ if(shape.name != "linker"){
shapes.push(shape); shapes.push(shape);
@ -1078,10 +1115,10 @@ Designer.addFunction("distributeShapes", function(type){
} }
if(type == "h"){ if(type == "h"){
shapes.sort(function compare(a, b){ shapes.sort(function compare(a, b){
return a.props.x - b.props.x; return a.props.x - b.props.x;
}); });
var w = box.w; var w = box.w;
for(var i = 0; i < shapes.length; i++){ for(var i = 0; i < shapes.length; i++){
var shape = shapes[i]; var shape = shapes[i];
w -= shape.props.w; w -= shape.props.w;
} }
@ -1097,10 +1134,10 @@ Designer.addFunction("distributeShapes", function(type){
} }
}else{ }else{
shapes.sort(function compare(a, b){ shapes.sort(function compare(a, b){
return a.props.y - b.props.y; return a.props.y - b.props.y;
}); });
var h = box.h; var h = box.h;
for(var i = 0; i < shapes.length; i++){ for(var i = 0; i < shapes.length; i++){
var shape = shapes[i]; var shape = shapes[i];
h -= shape.props.h; h -= shape.props.h;
} }
@ -1131,24 +1168,24 @@ Designer.addFunction("distributeShapes", function(type){
* h, v * h, v
*/ */
Designer.addFunction("layerShapes", function(type){ Designer.addFunction("layerShapes", function(type){
var selected = Utils.getSelected(); var selected = Utils.getSelected();
if(selected.length == 0 || !type){ if(selected.length == 0 || !type){
return; return;
} }
selected.sort(function compare(a, b){ selected.sort(function compare(a, b){
return a.props.zindex - b.props.zindex; return a.props.zindex - b.props.zindex;
}); });
var start; var start;
if(type == "front"){ if(type == "front"){
//顶层 //顶层
start = Model.maxZIndex; start = Model.maxZIndex;
for(var i = 0; i < selected.length; i++){ for(var i = 0; i < selected.length; i++){
var shape = selected[i]; var shape = selected[i];
start += 1; start += 1;
shape.props.zindex = start; shape.props.zindex = start;
} }
}else if(type == "forward"){ }else if(type == "forward"){
//上移一层 //上移一层
var uplayer = null; var uplayer = null;
var shapeIndex = null; var shapeIndex = null;
//得到选中图形上层的形状 //得到选中图形上层的形状
@ -1176,16 +1213,16 @@ Designer.addFunction("layerShapes", function(type){
var shape = selected[i]; var shape = selected[i];
shape.props.zindex += offset; shape.props.zindex += offset;
} }
}else if(type == "back"){ }else if(type == "back"){
//底层 //底层
start = Model.orderList[0].zindex; //取到最小的zindex start = Model.orderList[0].zindex; //取到最小的zindex
for(var i = selected.length - 1; i >= 0; i--){ for(var i = selected.length - 1; i >= 0; i--){
var shape = selected[i]; var shape = selected[i];
start -= 1; start -= 1;
shape.props.zindex = start; shape.props.zindex = start;
} }
}else if(type == "backward"){ }else if(type == "backward"){
//下移一层 //下移一层
var downlayer = null; var downlayer = null;
var shapeIndex = null; var shapeIndex = null;
//得到选中图形上层的形状 //得到选中图形上层的形状
@ -1213,15 +1250,15 @@ Designer.addFunction("layerShapes", function(type){
var shape = selected[i]; var shape = selected[i];
shape.props.zindex += offset; shape.props.zindex += offset;
} }
} }
Model.updateMulti(selected); Model.updateMulti(selected);
/** /**
* 获取图形上层的并且没有被选中的形状 * 获取图形上层的并且没有被选中的形状
*/ */
function getUplayerShape(shape){ function getUplayerShape(shape){
var shapeBox = Utils.getShapeBox(shape); var shapeBox = Utils.getShapeBox(shape);
for(var j = 0; j < Model.orderList.length; j++){ for(var j = 0; j < Model.orderList.length; j++){
var order = Model.orderList[j]; var order = Model.orderList[j];
if(order.zindex <= shape.props.zindex || Utils.isSelected(order.id)){ if(order.zindex <= shape.props.zindex || Utils.isSelected(order.id)){
continue; continue;
@ -1235,13 +1272,13 @@ Designer.addFunction("layerShapes", function(type){
} }
} }
return null; return null;
} }
/** /**
* 获取图形下层的并且没有被选中的形状 * 获取图形下层的并且没有被选中的形状
*/ */
function getDownlayerShape(shape){ function getDownlayerShape(shape){
var shapeBox = Utils.getShapeBox(shape); var shapeBox = Utils.getShapeBox(shape);
for(var j = Model.orderList.length - 1; j >= 0; j--){ for(var j = Model.orderList.length - 1; j >= 0; j--){
var order = Model.orderList[j]; var order = Model.orderList[j];
if(order.zindex >= shape.props.zindex || Utils.isSelected(order.id)){ if(order.zindex >= shape.props.zindex || Utils.isSelected(order.id)){
continue; continue;
@ -1255,20 +1292,20 @@ Designer.addFunction("layerShapes", function(type){
} }
} }
return null; return null;
} }
}); });
/** /**
* 设计器方法组合 * 设计器方法组合
*/ */
Designer.addFunction("group", function(){ Designer.addFunction("group", function(){
var selected = Utils.getSelected(); var selected = Utils.getSelected();
if(selected.length < 2){ if(selected.length < 2){
//必须有两个以上,才可以组合 //必须有两个以上,才可以组合
return; return;
} }
var groupId = Utils.newId(); var groupId = Utils.newId();
for(var i = 0; i < selected.length; i++){ for(var i = 0; i < selected.length; i++){
var shape = selected[i]; var shape = selected[i];
shape.group = groupId; shape.group = groupId;
} }
@ -1280,11 +1317,11 @@ Designer.addFunction("group", function(){
* 设计器方法取消组合 * 设计器方法取消组合
*/ */
Designer.addFunction("ungroup", function(){ Designer.addFunction("ungroup", function(){
var selected = Utils.getSelected(); var selected = Utils.getSelected();
if(selected.length == 0){ if(selected.length == 0){
return; return;
} }
for(var i = 0; i < selected.length; i++){ for(var i = 0; i < selected.length; i++){
var shape = selected[i]; var shape = selected[i];
shape.group = null; shape.group = null;
} }
@ -1295,12 +1332,12 @@ Designer.addFunction("ungroup", function(){
* 设计器方法锁定 * 设计器方法锁定
*/ */
Designer.addFunction("lockShapes", function(){ Designer.addFunction("lockShapes", function(){
var selectedIds = Utils.getSelectedIds(); var selectedIds = Utils.getSelectedIds();
if(selectedIds.length == 0){ if(selectedIds.length == 0){
return; return;
} }
var changed = []; var changed = [];
for(var i = 0; i < selectedIds.length; i++){ for(var i = 0; i < selectedIds.length; i++){
var shape = Model.getShapeById(selectedIds[i]); var shape = Model.getShapeById(selectedIds[i]);
shape.locked = true; shape.locked = true;
changed.push(shape); changed.push(shape);
@ -1316,11 +1353,11 @@ Designer.addFunction("lockShapes", function(){
*/ */
Designer.addFunction("unlockShapes", function(){ Designer.addFunction("unlockShapes", function(){
var selectedIds = Utils.getSelectedLockedIds(); var selectedIds = Utils.getSelectedLockedIds();
if(selectedIds.length == 0){ if(selectedIds.length == 0){
return; return;
} }
var changed = []; var changed = [];
for(var i = 0; i < selectedIds.length; i++){ for(var i = 0; i < selectedIds.length; i++){
var shape = Model.getShapeById(selectedIds[i]); var shape = Model.getShapeById(selectedIds[i]);
shape.locked = false; shape.locked = false;
changed.push(shape); changed.push(shape);
@ -1398,10 +1435,10 @@ Designer.addFunction("setZoomScale", function(newScale){
Designer.config.scale = newScale; Designer.config.scale = newScale;
Designer.initialize.initCanvas(); Designer.initialize.initCanvas();
for(var shapeId in Model.define.elements){ for(var shapeId in Model.define.elements){
var shape = Model.define.elements[shapeId]; var shape = Model.define.elements[shapeId];
Designer.painter.renderShape(shape); Designer.painter.renderShape(shape);
} }
//重新选中 //重新选中
var selectedIds = Utils.getSelectedIds(); var selectedIds = Utils.getSelectedIds();
var lockIds = Utils.getSelectedLockedIds(); var lockIds = Utils.getSelectedLockedIds();
Utils.mergeArray(selectedIds, lockIds); Utils.mergeArray(selectedIds, lockIds);
@ -1415,13 +1452,13 @@ Designer.addFunction("setZoomScale", function(newScale){
* left center right top middle bottom * left center right top middle bottom
*/ */
Designer.addFunction("setShapeProps", function(props){ Designer.addFunction("setShapeProps", function(props){
var selected = Utils.getSelected(); var selected = Utils.getSelected();
if(selected.length == 0 || !props){ if(selected.length == 0 || !props){
return; return;
} }
var changed = []; var changed = [];
var linkerIds = []; var linkerIds = [];
for(var i = 0; i < selected.length; i++){ for(var i = 0; i < selected.length; i++){
var shape = selected[i]; var shape = selected[i];
if(shape.name != "linker"){ if(shape.name != "linker"){
var related = Designer.op.changeShapeProps(shape, props); var related = Designer.op.changeShapeProps(shape, props);
@ -1573,23 +1610,23 @@ Designer.addFunction("setSchema", function(schemaCategories, callback){
}, },
type: "get", type: "get",
success: function(data){ success: function(data){
var dataJson = JSON.parse(data); var dataJson = JSON.parse(data);
var shapes; var shapes;
var tempArray = []; var tempArray = [];
for (var key in dataJson) { for (var key in dataJson) {
tempArray.push(key); tempArray.push(key);
} }
var commonShapeConfig = Model.define.commonShapeConfig; var commonShapeConfig = Model.define.commonShapeConfig;
for (var i = 0; i < tempArray.length; i++) { for (var i = 0; i < tempArray.length; i++) {
if (tempArray[i] == "shapes") { if (tempArray[i] == "shapes") {
shapes = dataJson[tempArray[i]]; shapes = dataJson[tempArray[i]];
} else { } else {
var shapeConfigJson = JSON.parse(dataJson[tempArray[i]]); var shapeConfigJson = JSON.parse(dataJson[tempArray[i]]);
for (var shapeId in shapeConfigJson) { for (var shapeId in shapeConfigJson) {
commonShapeConfig[shapeId] = shapeConfigJson[shapeId]; commonShapeConfig[shapeId] = shapeConfigJson[shapeId];
} }
} }
} }
Schema.empty(); Schema.empty();
eval(shapes); eval(shapes);
addDefaultSchemaShape(); addDefaultSchemaShape();