Skip to content

Commit e57a132

Browse files
author
Zhang Jie
committed
backup
1 parent bd7959f commit e57a132

File tree

11 files changed

+1548
-1214
lines changed

11 files changed

+1548
-1214
lines changed

‎src/components/statepage/LineComp.vue

Lines changed: 68 additions & 1035 deletions
Large diffs are not rendered by default.

‎src/components/statepage/LoopDiv.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,6 @@
6767
<div
6868
class="connect-point out"
6969
@mousedown.prevent="onConnectPointMousedown"
70-
@mouseup="onMouseup"
7170
></div>
7271
</div>
7372
</template>

‎src/components/statepage/StateDiv.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,6 @@
6868
<div
6969
class="connect-point out"
7070
@mousedown.prevent="onConnectPointMousedown"
71-
@mouseup="onMouseup"
7271
></div>
7372
</div>
7473
</template>

‎src/components/statepage/StateWrap.vue

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ export default {
126126
"activeStates",
127127
"showDeleteStateMenu",
128128
"showLineContextMenu",
129+
"startMovingLine",
129130
],
130131
components: {
131132
LoopDiv,
@@ -216,13 +217,17 @@ export default {
216217
onStateMouseup() {
217218
// console.info(this.stateData.name + ' --- ' + this.stateData.stateId);
218219
//this._isResizing = false;
220+
this.$emit("stopMovingLine");
219221
},
220222
onDrag(e) {
221223
//TODO:拖动速度过快时会导致endInfo记录的坐标错误，被拖动的状态块会飞出线程框
222224
if (this._isResizing) {
223225
this.$emit("stopMoving");
224226
return false;
225227
}
228+
if (this.startMovingLine) {
229+
return false;
230+
}
226231
this._endInfo = {
227232
x: e.x,
228233
y: e.pageY,
@@ -232,18 +237,23 @@ export default {
232237
},
233238
234239
dragStart(e) {
235-
store.updateUndoData(this.threadIndex);
236240
let movingState = store.getState(
237241
this.threadIndex,
238242
this.stateData.stateId
239243
);
240244
if (this._isResizing) {
241245
return false;
242246
}
247+
//若当前正在调整连线，则不触发drag
248+
if (this.startMovingLine) {
249+
e.preventDefault();
250+
return false;
251+
}
243252
if (this.operate === IS_CONNECTING) {
244253
e.preventDefault();
245254
return false;
246255
}
256+
store.updateUndoData(this.threadIndex);
247257
e.dataTransfer.effectAllowed = "copyMove";
248258
249259
let leftGap;
@@ -310,6 +320,9 @@ export default {
310320
this._isResizing = false;
311321
return false;
312322
}
323+
if (this.startMovingLine) {
324+
return false;
325+
}
313326
this.isDragging = false;
314327
//console.log(this._endInfo)
315328
this._endInfo = {
@@ -552,6 +565,9 @@ export default {
552565
if (!this._startInfo) {
553566
return;
554567
}
568+
if (this.startMovingLine) {
569+
return;
570+
}
555571
556572
this._endInfo = {
557573
x: e.x,

‎src/components/statepage/ThreadSvg.vue

Lines changed: 43 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,13 @@
4141
<div class="tools">
4242
<el-button plain icon="el-icon-aim" @click.stop="leftTopPosition"></el-button>
4343
</div>
44-
<div class="thread-body" @mousedown="startMovingCanvas" @mousemove="onMovingCanvas" @click="updateActiveThread" @mouseup="stopMovingLine">
44+
<div class="thread-body"
45+
@mousedown="startMovingCanvas"
46+
@mousemove="onMovingCanvas"
47+
@click="updateActiveThread"
48+
@mouseup="stopMovingLine">
49+
<div class="scrollbar-right"></div>
50+
<div class="scrollbar-bottom"></div>
4551
<state-wrap
4652
v-for="(stateItem, index) in thread.stateAry"
4753
:key="index"
@@ -52,12 +58,14 @@
5258
:activeStates="activeStates"
5359
:showDeleteStateMenu="showDeleteStateMenu"
5460
:showLineContextMenu="showLineContextMenu"
61+
:startMovingLine="moveLineData.startMovingLine"
5562
@updateStateData="updateStateData"
5663
@updateTempLineData="updateTempLineData"
5764
@updateMoveData="updateMoveData"
5865
@updateActiveState="updateActiveState"
5966
@stopMoving="stopMoving"
6067
@hideMenus="hideMenus"
68+
@stopMovingLine="stopMovingLine"
6169
/>
6270
</div>
6371
</foreignObject>
@@ -170,6 +178,7 @@ export default {
170178
moveVerticalImg: "./static/imgs/move-vertical.png",
171179
resizableImg: "./static/imgs/resizable.png",
172180
moveLineData: {
181+
startMovingLine: false,
173182
startPoint: {
174183
y: 0,
175184
},
@@ -194,23 +203,20 @@ export default {
194203
}
195204
return false;
196205
},
197-
//判断在当前线程框内鼠标移动的情况，若当前鼠标正在移动画布，绘制连线，改变状态，配置连线和线程框的尺寸时，不触发高亮线程框的事件
206+
//判断在当前线程框内鼠标移动的情况，若当前鼠标正在移动画布，绘制连线，改变状态和线程框的尺寸时，不触发高亮线程框的事件
198207
hasNotMovedInThread() {
199208
if (stateManage.hasDrawedLine) {
200209
stateManage.hasDrawedLine = false;
201210
return false;
202-
} else if (this.showVirtualBox) {
203-
this.showVirtualBox = false;
211+
} else if (stateManage.hasResizedThread) {
212+
stateManage.hasResizedThread = false;
204213
return false;
205214
} else if (stateManage.hasResizedState) {
206215
stateManage.hasResizedState = false;
207216
return false;
208217
} else if (stateManage.hasMovedCanvas) {
209218
stateManage.hasMovedCanvas = false;
210219
return false;
211-
} else if (stateManage.hasMovedLine) {
212-
stateManage.hasMovedLine = false;
213-
return false;
214220
}
215221
return true;
216222
},
@@ -219,6 +225,7 @@ export default {
219225
this.$emit("updateActiveThread", this.threadIndex);
220226
}
221227
},
228+
//获取当前状态图内最靠左的状态，以供状态图向左上角对齐使用
222229
getLeftMostState() {
223230
let stateAry = store.stateData.threadAry[this.threadIndex].stateAry;
224231
let smallestStateX = 1000000;
@@ -232,6 +239,7 @@ export default {
232239
let leftMostState = store.getState(this.threadIndex, smallestStateXId);
233240
return leftMostState;
234241
},
242+
//获取当前状态图内最靠上的状态，以供状态图向左上角对齐使用
235243
getUpMostState() {
236244
let stateAry = store.stateData.threadAry[this.threadIndex].stateAry;
237245
let smallestStateY = 1000000;
@@ -474,13 +482,13 @@ export default {
474482
updateMoveLineData(data) {
475483
if (data.startMovingLine) {
476484
this._isMovingLine = true;
477-
this._isResizingState = false;
478485
}
479486
Object.keys(data).forEach((key) => {
480487
this.moveLineData[key] = data[key];
481488
});
482489
},
483490
stopMovingLine() {
491+
this.moveLineData.startMovingLine = false;
484492
this._isMovingLine = false;
485493
this._movingVerticalOffset = null;
486494
store.updatePresentData(this.threadIndex);
@@ -491,8 +499,7 @@ export default {
491499
return false;
492500
}
493501
stateManage.movingCanvas = false;
494-
stateManage.hasMovedLine = true;
495-
if (this.moveData.operate === "resize-state") {
502+
if (this.moveLineData.startMovingLine !== true) {
496503
this.updateMoveData({
497504
endPoint: {
498505
x: e.pageX,
@@ -509,12 +516,9 @@ export default {
509516
let moveData = this.moveData;
510517
let moveLineData = this.moveLineData;
511518
if (this._isResizingState) {
512-
this._isMovingLine = false;
513519
stateManage.hasResizedState = true;
514520
this.resizingState(moveData);
515521
} else if (this._isMovingLine) {
516-
this._isResizingState = false;
517-
stateManage.hasMovedLine = true;
518522
this.movingLine(moveLineData);
519523
}
520524
},
@@ -1050,6 +1054,11 @@ export default {
10501054
},
10511055
drop(e) {
10521056
//TODO：需要处理不允许用户跨线程拖拽状态块的问题
1057+
if (this.moveLineData.startMovingLine) {
1058+
this.stopMovingLine();
1059+
this.moveLineData.startMovingLine = false;
1060+
return false;
1061+
}
10531062
if (e.dataTransfer.getData("operate") === "addState") {
10541063
store.updateUndoData(this.threadIndex);
10551064
this.addStateToThread(e);
@@ -1230,6 +1239,7 @@ export default {
12301239
12311240
startResize(e) {
12321241
this.showVirtualBox = true;
1242+
stateManage.hasResizedThread = true;
12331243
stateManage.movingCanvas = false;
12341244
EventObj.$emit("operateChange", {
12351245
operate: "resize-thread",
@@ -1439,6 +1449,9 @@ export default {
14391449
</script>
14401450

14411451
<style lang="less" scoped>
1452+
* {
1453+
user-select: none;
1454+
}
14421455
div.thread {
14431456
position: relative;
14441457
display: inline-block;
@@ -1535,6 +1548,23 @@ h4.title {
15351548
height: calc(100% - 35px);
15361549
/* border: 1px solid #baed00; */
15371550
}
1551+
/**TODO: 后续需要实现状态图内的滚动条功能 */
1552+
.scrollbar-right {
1553+
height: 166px;
1554+
width: 13px;
1555+
border-radius: 13px;
1556+
background: rgba(224, 224, 224, 0.37);
1557+
position: absolute;
1558+
right: 3px;
1559+
}
1560+
.scrollbar-bottom {
1561+
height: 13px;
1562+
width: 312px;
1563+
border-radius: 13px;
1564+
background: rgba(224, 224, 224, 0.37);
1565+
position: absolute;
1566+
bottom: 3px;
1567+
}
15381568
.resize-icon {
15391569
position: absolute;
15401570
bottom: 0;

0 commit comments

Comments
 (0)