Skip to content

Commit c6ab81b

Browse files
author
Zhang Jie
committed
backup
1 parent 6808eec commit c6ab81b

15 files changed

+825
-1029
lines changed

‎src/components/statepage/LineSvg.vue

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -83,14 +83,17 @@ export default {
8383
typeof line.startPoint.x === "undefined" ||
8484
isNaN(line.startPoint.x)
8585
) {
86-
87-
let startState = store.getState(this.threadIndex, line.startState.stateId, false/**isThreadId: false */);
86+
let startState = store.getState(
87+
this.threadIndex,
88+
line.startState.stateId,
89+
false /**isThreadId: false */
90+
);
8891
line.startPoint = {
8992
x: startState.x + Util.translatePX2Num(startState.width),
9093
y: startState.y + Util.translatePX2Num(startState.height) / 2,
9194
};
92-
}else{
93-
//debugger;
95+
} else {
96+
//debugger;
9497
}
9598
return line.startPoint;
9699
},
@@ -102,13 +105,17 @@ export default {
102105
typeof line.endPoint.x === "undefined" ||
103106
isNaN(line.endPoint.x)
104107
) {
105-
let endState = store.getState(this.threadIndex, line.endState.stateId, false/**isThreadId: false */);
108+
let endState = store.getState(
109+
this.threadIndex,
110+
line.endState.stateId,
111+
false /**isThreadId: false */
112+
);
106113
line.endPoint = {
107114
x: endState.x,
108115
y: endState.y + Util.translatePX2Num(endState.height) / 2,
109116
};
110-
}else{
111-
//debugger;
117+
} else {
118+
//debugger;
112119
}
113120
return line.endPoint;
114121
},

‎src/components/statepage/StatePage.vue

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -649,26 +649,28 @@ export default {
649649
window.localStorage.setItem("blocklyXml", blocklyXml);
650650
},
651651
testLayout() {
652-
var stateDoms = document.querySelectorAll('.state-wrap');
652+
var stateDoms = document.querySelectorAll(".state-wrap");
653653
stateDoms = Array.prototype.slice.call(stateDoms);
654654
let reg = /is\-auto\-layouting/;
655-
stateDoms.forEach(element => {
656-
var clazz = element.getAttribute('class');
657-
if(!reg.test(clazz)){
658-
element.setAttribute('class', clazz + ' is-auto-layouting');
655+
stateDoms.forEach((element) => {
656+
var clazz = element.getAttribute("class");
657+
if (!reg.test(clazz)) {
658+
element.setAttribute("class", clazz + " is-auto-layouting");
659659
}
660660
});
661661
var layout = Util.testLayout(this.threadAry[0]);
662662
663663
setTimeout(() => {
664-
stateDoms.forEach(element => {
665-
var clazz = element.getAttribute('class');
666-
if(reg.test(clazz)){
667-
element.setAttribute('class', clazz.replace(/\s*is\-auto\-layouting\s*/g, ''));
664+
stateDoms.forEach((element) => {
665+
var clazz = element.getAttribute("class");
666+
if (reg.test(clazz)) {
667+
element.setAttribute(
668+
"class",
669+
clazz.replace(/\s*is\-auto\-layouting\s*/g, "")
670+
);
668671
}
669672
});
670673
}, 1000);
671-
672674
},
673675
},
674676

‎src/components/statepage/StateWrap.vue

Lines changed: 42 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -328,34 +328,13 @@ export default {
328328
this.zIndex = 1;
329329
},
330330
onDragenter(e) {},
331-
getStateIndex(state) {
332-
let indexAry = [];
333-
let parent = state.$parent;
334-
while (parent && parent.$options.name !== "StatePage") {
335-
if (parent.$options.name === "ThreadSvg") {
336-
indexAry.push(parent.threadIndex);
337-
} else {
338-
indexAry.push(parent.index);
339-
}
340-
parent = parent.$parent;
341-
}
342-
indexAry.push(state.index);
343-
return indexAry;
344-
},
345331
onDrop(e) {
346332
//获取从工具栏中直接拖拽下来的状态块的index，需要在stateAry添加了被拖拽的状态块的信息后获取
347-
let dropStateIndex;
348-
let stateAry = store.stateData.threadAry[this.threadIndex].stateAry
349-
let theDragStateData = this.dragInType(e, stateAry)
350-
let traverseData = Tools.stateTraverse(
351-
stateAry,
352-
theDragStateData.stateId,
353-
true
354-
);
355-
//直接将state添加进被嵌套的状态中会使程序不可控，还是需要先将state添加进stateAry的最外层，再删除外层元素
356-
dropStateIndex = traverseData[1];
357-
theDragStateData = traverseData[0];
358-
333+
let stateAry = store.stateData.threadAry[this.threadIndex].stateAry;
334+
let theDragStateData = this.dragInType(e, stateAry);
335+
//直接将state添加进被嵌套的状态中会使程序不可控，还是需要先将state添加进stateAry的最外层，再删除外层元素
336+
let dropStateIndex = stateAry.length - 1;
337+
359338
if (this.stateData.stateId === theDragStateData.stateId) {
360339
return false;
361340
}
@@ -399,8 +378,9 @@ export default {
399378
//走到这里说明是将状态由里面移出到外面，需要冒泡到外层容器
400379
e.stopPropagation();
401380
}
381+
//若没有嵌套在嵌套状态内的子状态，将嵌套状态变回为普通状态
402382
if (!TargetInFlag && this.stateData.children.length <= 1) {
403-
this.nestToNormal(this.stateData)
383+
this.nestToNormal(this.stateData);
404384
}
405385
return false;
406386
}
@@ -418,74 +398,63 @@ export default {
418398
theDragStateData.y = y;
419399
//theDragStateData.x = 0 /* - statePageVue._dragData.mousedownPoint.x */;
420400
//theDragStateData.y = 0 /* - statePageVue._dragData.mousedownPoint.y */;
421-
this.calculateStateParent(this.index, theDragStateData)
401+
theDragStateData.parent = this.stateData.stateId;
422402
423403
//若状态从非嵌套变为嵌套状态，改变状态的模式与大小
424404
if (
425405
this.stateData.stateType === "stateDiv" &&
426406
this.stateData.mode !== "nest"
427407
) {
428-
this.normalToNest(this.stateData)
408+
this.normalToNest(this.stateData);
429409
}
430410
431411
this.stateData.children.push(theDragStateData);
432412
433-
let dragTargetParentStates = stateAry;
434-
//因为在从工具栏直接拖拽下来形成嵌套时，无法在线程框内获取拖拽下来的状态块，只能通过与拖拽下来的状态块嵌套的状态来判断被拖拽下来的状态块的index
435-
let directDropIndexAry = this.getDirectDropIndexAry(this, dropStateIndex);
413+
let dragStateParentStates = stateAry;
414+
//获取在直接拖拽形成嵌套时，正在拖拽的状态父状态的索引
415+
let directDropIndexAry = this.getdropParentIndexAry(this);
436416
437417
if (e.dataTransfer.getData("operate") === "addState") {
438-
dragTargetParentStates = this.dropTraverseChildren(
418+
dragStateParentStates = this.getDropStateParent(
439419
directDropIndexAry,
440-
dragTargetParentStates
420+
dragStateParentStates
441421
);
442422
} else {
443-
dragTargetParentStates = this.dropTraverseChildren(
444-
statePageVue._dragData.indexAry,
445-
dragTargetParentStates
423+
dragStateParentStates = this.getDropStateParent(
424+
//去除线程索引
425+
statePageVue._dragData.indexAry.pop(),
426+
dragStateParentStates
446427
);
447428
}
448429
449430
if (e.dataTransfer.getData("operate") === "addState") {
450431
setTimeout(() => {
451432
//因为从工具栏直接拖拽下来的状态块时默认添加到线程框的最外面一层的，所以需要在最外面一层进行删除
452-
stateAry.splice(directDropIndexAry.pop(), 1);
433+
stateAry.splice(dropStateIndex, 1);
453434
}, 10);
454435
} else {
455436
setTimeout(() => {
456437
//这里必须等drog逻辑执行完以后再去删除外层元素，否则会影响到theDragStateData数据 TODO 后面开始编码后再解决这个问题，使用setTimeout会让程序不可控！！！
457-
dragTargetParentStates.splice(
438+
dragStateParentStates.splice(
458439
statePageVue._dragData.indexAry.pop(),
459440
1
460441
);
461442
}, 10);
462443
}
463444
e.stopPropagation();
464445
},
465-
//更新状态的parent属性
466-
calculateStateParent(parentIndex, theDragStateData){
467-
theDragStateData.parent = parentIndex
468-
// 当拖动的组件为循环组件时，动态更新循环组件内children的parent
469-
if (theDragStateData.children) {
470-
let i = 0;
471-
while (i < theDragStateData.children.length) {
472-
theDragStateData.children[i].parent = this.stateData.children.length;
473-
i++;
474-
}
475-
}
476-
},
477-
normalToNest(stateData){
446+
normalToNest(stateData) {
478447
stateData.mode = "nest";
479448
stateData.width = "222px";
480449
stateData.height = "120px";
481450
},
482-
nestToNormal(stateData){
451+
nestToNormal(stateData) {
483452
stateData.mode = "normal";
484453
stateData.width = "76px";
485454
stateData.height = "40px";
486455
},
487-
//判断状态是从工具栏拖拽下来的还是在线程框内的移动
488-
dragInType(e, stateAry){
456+
//判断状态是从工具栏拖拽下来的还是在线程框内的移动，并返回当前状态
457+
dragInType(e, stateAry) {
489458
let theDragStateData;
490459
if (e.dataTransfer.getData("operate") === "addState") {
491460
let threadPosInfo = e.target.getBoundingClientRect();
@@ -496,43 +465,35 @@ export default {
496465
stateType: e.dataTransfer.getData("stateType"),
497466
};
498467
499-
theDragStateData = store.getDefaultStateCfg(data);
500-
stateAry.push(theDragStateData);
468+
let stateDataToAdd = store.getDefaultStateCfg(data);
469+
stateAry.push(stateDataToAdd);
470+
theDragStateData = stateAry[stateAry.length - 1];
501471
e.stopPropagation();
502472
} else {
503473
theDragStateData = JSON.parse(
504474
e.dataTransfer.getData("theDragStateData")
505475
);
506476
}
507-
return theDragStateData
477+
return theDragStateData;
508478
},
509-
//用于判断在drop时将被drop的状态块添加为哪个状态块的children
510-
dropTraverseChildren(indexAry, parentStateAry) {
511-
indexAry.pop(); //除去线程索引
512-
while (indexAry && indexAry.length > 1) {
513-
let i = indexAry.pop();
514-
parentStateAry = parentStateAry[i].children;
479+
//获取当前拖拽状态的父状态在当前线程框内的索引
480+
getdropParentIndexAry(state) {
481+
let indexAry = [];
482+
let parent = state.$parent;
483+
while (parent && parent.$options.name !== "StatePage") {
484+
if (parent.$options.name !== "ThreadSvg") {
485+
indexAry.push(parent.index);
486+
}
487+
parent = parent.$parent;
515488
}
516-
return parentStateAry;
489+
return indexAry.reverse();
517490
},
518491
519-
//用于获取从工具栏中直接拖拽下来的状态块的indexAry
520-
getDirectDropIndexAry(dropTarget, dropStateIndex) {
521-
let directDropIndexAry = this.getStateIndex(dropTarget);
522-
//除去与被拖拽下来的状态块的状态块本身的index，并将添加下来的状态块的index推进directDropIndexAry
523-
directDropIndexAry.pop();
524-
directDropIndexAry.push(dropStateIndex);
525-
//为寻找对应的形成嵌套的状态块以及删除多余的被拖拽下来的状态块的快照，需要将形成的directDropIndexAry进行reverse
526-
directDropIndexAry.reverse();
527-
return directDropIndexAry;
528-
},
529-
//用于判断在drop时将被drop的状态块添加为哪个状态块的children
530-
dropTraverseChildren(indexAry, parentStateAry) {
531-
indexAry.pop(); //除去线程索引
492+
//用于判断在drop时将drop的状态块添加为哪个状态块的children
493+
getDropStateParent(indexAry, parentStateAry) {
532494
while (indexAry && indexAry.length > 1) {
533495
let i = indexAry.pop();
534496
parentStateAry = parentStateAry[i].children;
535-
console.log(parentStateAry);
536497
}
537498
return parentStateAry;
538499
},
@@ -786,9 +747,9 @@ export default {
786747
top: 0;
787748
left: 0;
788749
display: inline-block;
789-
&.is-auto-layouting{
750+
&.is-auto-layouting {
790751
transition: all 1s;
791-
}
752+
}
792753
/* background-color: rgba(50, 50, 50, 0.62); */
793754
}
794755

0 commit comments

Comments
 (0)