Skip to content

Commit a94681f

Browse files
author
Zhang Jie
committed
backup
1 parent f90fab9 commit a94681f

File tree

10 files changed

+284
-161
lines changed

10 files changed

+284
-161
lines changed

‎src/components/BlocklyPage.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div id="blocklyPage">
33
<iframe
44
id="blocklyIframe"
5-
:src="`./static/blockly/demos/code/index.html`"
5+
src="./static/blockly/demos/code/index.html"
66
frameborder="0"
77
width="100%"
88
height="100%"

‎src/components/statepage/LineComp.vue

Lines changed: 18 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<g
33
@contextmenu.prevent="onContextMenu"
4-
@click="activeLineChange"
4+
@click.stop="activeLineChange"
55
:class="[{ showdesc: line.showdesc }, { active: isInActiveLines() }]"
66
>
77
<path
@@ -305,26 +305,18 @@ export default {
305305
y: 0,
306306
};
307307
secondArcEnd.x = startPoint.x + LINE_H;
308-
secondArcEnd.y =
309-
stateTop -
310-
LINE_V +
311-
lineCfg.threadTitleHeight +
312-
lineCfg.threadToolBoxHeight;
308+
secondArcEnd.y = stateTop - LINE_V + lineCfg.threadTitleHeight;
313309
tempLinePath += this.drawArc(LINE_RADIUS, 0, 0, secondArcEnd);
314310
return tempLinePath;
315311
},
316-
//因为连线的坐标是相对于svg元素的，所以需要加上threadTitleHeight与threadToolBoxHeight以获取连线的准确坐标
312+
//因为连线的坐标是相对于svg元素的，所以需要加上threadTitleHeight以获取连线的准确坐标
317313
drawLine5OutputVUp(startPoint, endPoint, startStateTop, endStateTop) {
318314
let tempLinePath = "";
319315
let secondArcStart;
320316
if (startStateTop < endStateTop) {
321317
//比较起始状态和结束状态的上边缘的高低，根据上边缘高的状态决定垂直绘制连线的坐标
322318
secondArcStart =
323-
startStateTop -
324-
LINE_V +
325-
LINE_RADIUS +
326-
lineCfg.threadTitleHeight +
327-
lineCfg.threadToolBoxHeight;
319+
startStateTop - LINE_V + LINE_RADIUS + lineCfg.threadTitleHeight;
328320
tempLinePath += this.drawVerticalLine(secondArcStart);
329321
tempLinePath += this.drawLine5SecondArcUp(
330322
startPoint,
@@ -333,11 +325,7 @@ export default {
333325
);
334326
} else {
335327
secondArcStart =
336-
endStateTop -
337-
LINE_V +
338-
LINE_RADIUS +
339-
lineCfg.threadTitleHeight +
340-
lineCfg.threadToolBoxHeight;
328+
endStateTop - LINE_V + LINE_RADIUS + lineCfg.threadTitleHeight;
341329
tempLinePath += this.drawVerticalLine(secondArcStart);
342330
tempLinePath += this.drawLine5SecondArcUp(
343331
startPoint,
@@ -354,15 +342,11 @@ export default {
354342
y: 0,
355343
};
356344
secondArcEnd.x = startPoint.x + LINE_H;
357-
secondArcEnd.y =
358-
stateBottom +
359-
LINE_V +
360-
lineCfg.threadTitleHeight +
361-
lineCfg.threadToolBoxHeight;
345+
secondArcEnd.y = stateBottom + LINE_V + lineCfg.threadTitleHeight;
362346
tempLinePath += this.drawArc(LINE_RADIUS, 0, 1, secondArcEnd);
363347
return tempLinePath;
364348
},
365-
//因为连线的坐标是相对于svg元素的，所以需要加上threadTitleHeight与threadToolBoxHeight以获取连线的准确坐标
349+
//因为连线的坐标是相对于svg元素的，所以需要加上threadTitleHeight以获取连线的准确坐标
366350
drawLine5OutputVDown(
367351
startPoint,
368352
endPoint,
@@ -378,11 +362,7 @@ export default {
378362
if (startStateBottom < endStateBottom) {
379363
//比较起始状态和结束状态的下边缘的高低，根据下边缘低的状态决定垂直绘制连线的坐标
380364
secondArcStart =
381-
endStateBottom +
382-
LINE_V -
383-
LINE_RADIUS +
384-
lineCfg.threadTitleHeight +
385-
lineCfg.threadToolBoxHeight;
365+
endStateBottom + LINE_V - LINE_RADIUS + lineCfg.threadTitleHeight;
386366
tempLinePath += this.drawVerticalLine(secondArcStart);
387367
tempLinePath += this.drawLine5SecondArcDown(
388368
startPoint,
@@ -391,11 +371,7 @@ export default {
391371
);
392372
} else {
393373
secondArcStart =
394-
startStateBottom +
395-
LINE_V -
396-
LINE_RADIUS +
397-
lineCfg.threadTitleHeight +
398-
lineCfg.threadToolBoxHeight;
374+
startStateBottom + LINE_V - LINE_RADIUS + lineCfg.threadTitleHeight;
399375
tempLinePath += this.drawVerticalLine(secondArcStart);
400376
tempLinePath += this.drawLine5SecondArcDown(
401377
startPoint,
@@ -476,15 +452,11 @@ export default {
476452
};
477453
thirdArcEnd.x = endPoint.x - LINE_H;
478454
thirdArcEnd.y =
479-
stateTop -
480-
LINE_V +
481-
LINE_RADIUS +
482-
lineCfg.threadTitleHeight +
483-
lineCfg.threadToolBoxHeight;
455+
stateTop - LINE_V + LINE_RADIUS + lineCfg.threadTitleHeight;
484456
tempLinePath += this.drawArc(LINE_RADIUS, 1, 0, thirdArcEnd);
485457
return tempLinePath;
486458
},
487-
//因为连线的坐标是相对于svg元素的，所以需要加上threadTitleHeight与threadToolBoxHeight以获取连线的准确坐标
459+
//因为连线的坐标是相对于svg元素的，所以需要加上threadTitleHeight以获取连线的准确坐标
488460
drawLine5HUp(startPoint, endPoint, startStateTop, endStateTop) {
489461
let tempLinePath = "";
490462
let thirdArcStart = {
@@ -494,11 +466,7 @@ export default {
494466
//比较起始状态和结束状态的上边缘的高低，根据上边缘高的状态决定水平绘制连线的坐标
495467
if (startStateTop < endStateTop) {
496468
thirdArcStart.x = endPoint.x - LINE_H + LINE_RADIUS;
497-
thirdArcStart.y =
498-
startStateTop -
499-
LINE_V +
500-
lineCfg.threadTitleHeight +
501-
lineCfg.threadToolBoxHeight;
469+
thirdArcStart.y = startStateTop - LINE_V + lineCfg.threadTitleHeight;
502470
tempLinePath += this.drawLineToEndPoint(thirdArcStart);
503471
tempLinePath += this.drawLine5ThirdArcUp(
504472
startPoint,
@@ -507,11 +475,7 @@ export default {
507475
);
508476
} else {
509477
thirdArcStart.x = endPoint.x - LINE_H + LINE_RADIUS;
510-
thirdArcStart.y =
511-
endStateTop -
512-
LINE_V +
513-
lineCfg.threadTitleHeight +
514-
lineCfg.threadToolBoxHeight;
478+
thirdArcStart.y = endStateTop - LINE_V + lineCfg.threadTitleHeight;
515479
tempLinePath += this.drawLineToEndPoint(thirdArcStart);
516480
tempLinePath += this.drawLine5ThirdArcUp(
517481
startPoint,
@@ -529,15 +493,11 @@ export default {
529493
};
530494
thirdArcEnd.x = endPoint.x - LINE_H;
531495
thirdArcEnd.y =
532-
stateBottom +
533-
LINE_V -
534-
LINE_RADIUS +
535-
lineCfg.threadTitleHeight +
536-
lineCfg.threadToolBoxHeight;
496+
stateBottom + LINE_V - LINE_RADIUS + lineCfg.threadTitleHeight;
537497
tempLinePath += this.drawArc(LINE_RADIUS, 0, 1, thirdArcEnd);
538498
return tempLinePath;
539499
},
540-
//因为连线的坐标是相对于svg元素的，所以需要加上threadTitleHeight与threadToolBoxHeight以获取连线的准确坐标
500+
//因为连线的坐标是相对于svg元素的，所以需要加上threadTitleHeight以获取连线的准确坐标
541501
drawLine5HDown(startPoint, endPoint, startStateBottom, endStateBottom) {
542502
let tempLinePath = "";
543503
let thirdArcStart = {
@@ -547,11 +507,7 @@ export default {
547507
//比较起始状态和结束状态的下边缘的高低，根据下边缘低的状态决定水平绘制连线的坐标
548508
if (startStateBottom < endStateBottom) {
549509
thirdArcStart.x = endPoint.x - LINE_H + LINE_RADIUS;
550-
thirdArcStart.y =
551-
endStateBottom +
552-
LINE_V +
553-
lineCfg.threadTitleHeight +
554-
lineCfg.threadToolBoxHeight;
510+
thirdArcStart.y = endStateBottom + LINE_V + lineCfg.threadTitleHeight;
555511
tempLinePath += this.drawLineToEndPoint(thirdArcStart);
556512
tempLinePath += this.drawLine5ThirdArcDown(
557513
startPoint,
@@ -560,11 +516,7 @@ export default {
560516
);
561517
} else {
562518
thirdArcStart.x = endPoint.x - LINE_H + LINE_RADIUS;
563-
thirdArcStart.y =
564-
startStateBottom +
565-
LINE_V +
566-
lineCfg.threadTitleHeight +
567-
lineCfg.threadToolBoxHeight;
519+
thirdArcStart.y = startStateBottom + LINE_V + lineCfg.threadTitleHeight;
568520
tempLinePath += this.drawLineToEndPoint(thirdArcStart);
569521
tempLinePath += this.drawLine5ThirdArcDown(
570522
startPoint,
@@ -805,7 +757,7 @@ export default {
805757
};
806758
</script>
807759

808-
<style lang="less">
760+
<style lang="less" scoped>
809761
@qkmGrey: #aaaaaa;
810762
@qkmLightBlue: #70ffff;
811763
@qkmOrange: #ffaf3d;

‎src/components/statepage/StateDiv.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
{ selected: isInActiveStates() },
1010
runningStatus,
1111
]"
12-
@click="selectState()"
12+
@click.stop="selectState()"
1313
>
1414
<div :class="runningAnimation" :v-show="runningAnimation"></div>
1515
<!-- <div v-show="stateData.inCount > 1" class="in event-count" >{{stateData.inputAry.length}}</div> -->

‎src/components/statepage/StatePage.vue

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,8 @@
155155
:threadIndex="i"
156156
:runningLineId="runningLineId"
157157
:runningStateData="runningStateData"
158+
:activeThreadIndex="activeThreadIndex"
159+
@updateActiveThread="updateActiveThread"
158160
></thread-svg>
159161
</div>
160162
<!-- <iframe
@@ -206,6 +208,7 @@ export default {
206208
tempLineData: null,
207209
operate: "default",
208210
threadAry: store.stateData.threadAry,
211+
activeThreadIndex: null,
209212
lineContextMenuData: {
210213
show: false,
211214
lineId: null,
@@ -221,6 +224,13 @@ export default {
221224
};
222225
},
223226
methods: {
227+
updateActiveThread(threadIndex) {
228+
if (this.activeThreadIndex === threadIndex) {
229+
this.activeThreadIndex = null;
230+
} else {
231+
this.activeThreadIndex = threadIndex;
232+
}
233+
},
224234
showDemo(runningStatus) {
225235
let demoData = {
226236
stateId: store.demoStateData.stateId,
@@ -690,6 +700,9 @@ export default {
690700
},
691701
692702
testLayout() {
703+
if (this.activeThreadIndex === null) {
704+
return false;
705+
}
693706
var stateDoms = document.querySelectorAll(".state-wrap");
694707
var lineDoms = document.querySelectorAll(".connect-line");
695708
@@ -712,11 +725,15 @@ export default {
712725
});
713726
714727
//对与线程框最外层同级的状态进行自动布局
715-
let lineAry = this.threadAry[0].lineAry;
716-
Util.testLayout(this.threadAry[0], lineAry);
728+
let lineAry = this.threadAry[this.activeThreadIndex].lineAry;
729+
Util.testLayout(
730+
this.activeThreadIndex,
731+
this.threadAry[this.activeThreadIndex],
732+
lineAry
733+
);
717734
this.executeAutoLayout(stateDoms, lineDoms, reg);
718735
719-
let stateAry = this.threadAry[0].stateAry;
736+
let stateAry = this.threadAry[this.activeThreadIndex].stateAry;
720737
let autoLayoutData = {
721738
stateDoms: stateDoms,
722739
lineDoms: lineDoms,
@@ -730,7 +747,11 @@ export default {
730747
traverseExecuteAutoLayout(autoLayoutData, stateAry) {
731748
for (let i = 0; i < stateAry.length; i++) {
732749
if (stateAry[i].children) {
733-
Util.testLayout(stateAry[i], autoLayoutData.lineAry);
750+
Util.testLayout(
751+
this.activeThreadIndex,
752+
stateAry[i],
753+
autoLayoutData.lineAry
754+
);
734755
this.executeAutoLayout(
735756
autoLayoutData.stateDoms,
736757
autoLayoutData.lineDoms,

‎src/components/statepage/StateWrap.vue

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ export default {
129129
isDragging: false,
130130
operate: null, // IS_MOVING IS_CONNECTING
131131
stateId: null,
132-
resizableImg: "../../../static/imgs/resizable.png",
132+
resizableImg: "./static/imgs/resizable.png",
133133
};
134134
},
135135
methods: {
@@ -703,7 +703,7 @@ export default {
703703
};
704704
</script>
705705

706-
<style lang="less" scoped>
706+
<style lang="less">
707707
* {
708708
user-select: none;
709709
}
@@ -753,28 +753,7 @@ export default {
753753
.out {
754754
right: 0;
755755
}
756-
.connect-point {
757-
position: absolute;
758-
top: 50%;
759-
transform: translateY(-50%);
760-
width: 10px;
761-
height: 10px;
762-
border-radius: 10px;
763-
}
764-
.connect-point:hover {
765-
border: 2px solid #ff0000 !important;
766-
cursor: default;
767-
}
768-
.state-wrap:hover .connect-point {
769-
border: 2px solid blue;
770-
cursor: default;
771-
}
772-
.connect-point.in {
773-
transform: translate(-50%, -50%);
774-
}
775-
.connect-point.out {
776-
transform: translate(50%, -50%);
777-
}
756+
778757
.is-dragging {
779758
cursor: move;
780759
}
@@ -802,4 +781,20 @@ export default {
802781
.output-list > li:hover {
803782
background-color: #e6f7ff;
804783
}
784+
.resize-icon {
785+
position: absolute;
786+
bottom: 0;
787+
left: 50%;
788+
width: 14px;
789+
height: 14px;
790+
}
791+
.resize-icon.resizable {
792+
right: 1px;
793+
bottom: 1px;
794+
left: initial;
795+
cursor: nwse-resize;
796+
}
797+
.resize-icon.resizable:hover {
798+
cursor: nwse-resize;
799+
}
805800
</style>

0 commit comments

Comments
 (0)