Skip to content

Commit f90fab9

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

File tree

12 files changed

+376
-301
lines changed

12 files changed

+376
-301
lines changed

‎src/components/statepage/LineComp.vue

Lines changed: 73 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -76,11 +76,11 @@ export default {
7676
case "default":
7777
clazz = "connect-line";
7878
break;
79-
case "loopIn":
80-
clazz = "loop-in";
79+
case "loopStart":
80+
clazz = "connect-line";
8181
break;
82-
case "loopOut":
83-
clazz = "loop-out";
82+
case "loopEnd":
83+
clazz = "connect-line";
8484
break;
8585
default:
8686
clazz = "connect-line";
@@ -305,18 +305,26 @@ export default {
305305
y: 0,
306306
};
307307
secondArcEnd.x = startPoint.x + LINE_H;
308-
secondArcEnd.y = stateTop - LINE_V + lineCfg.threadTitleHeight;
308+
secondArcEnd.y =
309+
stateTop -
310+
LINE_V +
311+
lineCfg.threadTitleHeight +
312+
lineCfg.threadToolBoxHeight;
309313
tempLinePath += this.drawArc(LINE_RADIUS, 0, 0, secondArcEnd);
310314
return tempLinePath;
311315
},
312-
//因为连线的坐标是相对于svg元素的，所以需要加上threadTitleHeight以获取连线的准确坐标
316+
//因为连线的坐标是相对于svg元素的，所以需要加上threadTitleHeight与threadToolBoxHeight以获取连线的准确坐标
313317
drawLine5OutputVUp(startPoint, endPoint, startStateTop, endStateTop) {
314318
let tempLinePath = "";
315319
let secondArcStart;
316320
if (startStateTop < endStateTop) {
317321
//比较起始状态和结束状态的上边缘的高低，根据上边缘高的状态决定垂直绘制连线的坐标
318322
secondArcStart =
319-
startStateTop - LINE_V + LINE_RADIUS + lineCfg.threadTitleHeight;
323+
startStateTop -
324+
LINE_V +
325+
LINE_RADIUS +
326+
lineCfg.threadTitleHeight +
327+
lineCfg.threadToolBoxHeight;
320328
tempLinePath += this.drawVerticalLine(secondArcStart);
321329
tempLinePath += this.drawLine5SecondArcUp(
322330
startPoint,
@@ -325,7 +333,11 @@ export default {
325333
);
326334
} else {
327335
secondArcStart =
328-
endStateTop - LINE_V + LINE_RADIUS + lineCfg.threadTitleHeight;
336+
endStateTop -
337+
LINE_V +
338+
LINE_RADIUS +
339+
lineCfg.threadTitleHeight +
340+
lineCfg.threadToolBoxHeight;
329341
tempLinePath += this.drawVerticalLine(secondArcStart);
330342
tempLinePath += this.drawLine5SecondArcUp(
331343
startPoint,
@@ -342,11 +354,15 @@ export default {
342354
y: 0,
343355
};
344356
secondArcEnd.x = startPoint.x + LINE_H;
345-
secondArcEnd.y = stateBottom + LINE_V + lineCfg.threadTitleHeight;
357+
secondArcEnd.y =
358+
stateBottom +
359+
LINE_V +
360+
lineCfg.threadTitleHeight +
361+
lineCfg.threadToolBoxHeight;
346362
tempLinePath += this.drawArc(LINE_RADIUS, 0, 1, secondArcEnd);
347363
return tempLinePath;
348364
},
349-
//因为连线的坐标是相对于svg元素的，所以需要加上threadTitleHeight以获取连线的准确坐标
365+
//因为连线的坐标是相对于svg元素的，所以需要加上threadTitleHeight与threadToolBoxHeight以获取连线的准确坐标
350366
drawLine5OutputVDown(
351367
startPoint,
352368
endPoint,
@@ -362,7 +378,11 @@ export default {
362378
if (startStateBottom < endStateBottom) {
363379
//比较起始状态和结束状态的下边缘的高低，根据下边缘低的状态决定垂直绘制连线的坐标
364380
secondArcStart =
365-
endStateBottom + LINE_V - LINE_RADIUS + lineCfg.threadTitleHeight;
381+
endStateBottom +
382+
LINE_V -
383+
LINE_RADIUS +
384+
lineCfg.threadTitleHeight +
385+
lineCfg.threadToolBoxHeight;
366386
tempLinePath += this.drawVerticalLine(secondArcStart);
367387
tempLinePath += this.drawLine5SecondArcDown(
368388
startPoint,
@@ -371,7 +391,11 @@ export default {
371391
);
372392
} else {
373393
secondArcStart =
374-
startStateBottom + LINE_V - LINE_RADIUS + lineCfg.threadTitleHeight;
394+
startStateBottom +
395+
LINE_V -
396+
LINE_RADIUS +
397+
lineCfg.threadTitleHeight +
398+
lineCfg.threadToolBoxHeight;
375399
tempLinePath += this.drawVerticalLine(secondArcStart);
376400
tempLinePath += this.drawLine5SecondArcDown(
377401
startPoint,
@@ -390,7 +414,7 @@ export default {
390414
endStateBottom;
391415
startStateHeight = QBlock.State.getStateHeight(startState);
392416
endStateHeight = QBlock.State.getStateHeight(endState);
393-
//因嵌套内部状态的xy是相对于父状态的，需手动计算状态的上边缘与下边缘的y坐标
417+
394418
startStateTop = QBlock.State.getXY2Canvas(startState, this.threadIndex).y;
395419
endStateTop = QBlock.State.getXY2Canvas(endState, this.threadIndex).y;
396420
startStateBottom =
@@ -452,11 +476,15 @@ export default {
452476
};
453477
thirdArcEnd.x = endPoint.x - LINE_H;
454478
thirdArcEnd.y =
455-
stateTop - LINE_V + LINE_RADIUS + lineCfg.threadTitleHeight;
479+
stateTop -
480+
LINE_V +
481+
LINE_RADIUS +
482+
lineCfg.threadTitleHeight +
483+
lineCfg.threadToolBoxHeight;
456484
tempLinePath += this.drawArc(LINE_RADIUS, 1, 0, thirdArcEnd);
457485
return tempLinePath;
458486
},
459-
//因为连线的坐标是相对于svg元素的，所以需要加上threadTitleHeight以获取连线的准确坐标
487+
//因为连线的坐标是相对于svg元素的，所以需要加上threadTitleHeight与threadToolBoxHeight以获取连线的准确坐标
460488
drawLine5HUp(startPoint, endPoint, startStateTop, endStateTop) {
461489
let tempLinePath = "";
462490
let thirdArcStart = {
@@ -466,7 +494,11 @@ export default {
466494
//比较起始状态和结束状态的上边缘的高低，根据上边缘高的状态决定水平绘制连线的坐标
467495
if (startStateTop < endStateTop) {
468496
thirdArcStart.x = endPoint.x - LINE_H + LINE_RADIUS;
469-
thirdArcStart.y = startStateTop - LINE_V + lineCfg.threadTitleHeight;
497+
thirdArcStart.y =
498+
startStateTop -
499+
LINE_V +
500+
lineCfg.threadTitleHeight +
501+
lineCfg.threadToolBoxHeight;
470502
tempLinePath += this.drawLineToEndPoint(thirdArcStart);
471503
tempLinePath += this.drawLine5ThirdArcUp(
472504
startPoint,
@@ -475,7 +507,11 @@ export default {
475507
);
476508
} else {
477509
thirdArcStart.x = endPoint.x - LINE_H + LINE_RADIUS;
478-
thirdArcStart.y = endStateTop - LINE_V + lineCfg.threadTitleHeight;
510+
thirdArcStart.y =
511+
endStateTop -
512+
LINE_V +
513+
lineCfg.threadTitleHeight +
514+
lineCfg.threadToolBoxHeight;
479515
tempLinePath += this.drawLineToEndPoint(thirdArcStart);
480516
tempLinePath += this.drawLine5ThirdArcUp(
481517
startPoint,
@@ -493,11 +529,15 @@ export default {
493529
};
494530
thirdArcEnd.x = endPoint.x - LINE_H;
495531
thirdArcEnd.y =
496-
stateBottom + LINE_V - LINE_RADIUS + lineCfg.threadTitleHeight;
532+
stateBottom +
533+
LINE_V -
534+
LINE_RADIUS +
535+
lineCfg.threadTitleHeight +
536+
lineCfg.threadToolBoxHeight;
497537
tempLinePath += this.drawArc(LINE_RADIUS, 0, 1, thirdArcEnd);
498538
return tempLinePath;
499539
},
500-
//因为连线的坐标是相对于svg元素的，所以需要加上threadTitleHeight以获取连线的准确坐标
540+
//因为连线的坐标是相对于svg元素的，所以需要加上threadTitleHeight与threadToolBoxHeight以获取连线的准确坐标
501541
drawLine5HDown(startPoint, endPoint, startStateBottom, endStateBottom) {
502542
let tempLinePath = "";
503543
let thirdArcStart = {
@@ -507,7 +547,11 @@ export default {
507547
//比较起始状态和结束状态的下边缘的高低，根据下边缘低的状态决定水平绘制连线的坐标
508548
if (startStateBottom < endStateBottom) {
509549
thirdArcStart.x = endPoint.x - LINE_H + LINE_RADIUS;
510-
thirdArcStart.y = endStateBottom + LINE_V + lineCfg.threadTitleHeight;
550+
thirdArcStart.y =
551+
endStateBottom +
552+
LINE_V +
553+
lineCfg.threadTitleHeight +
554+
lineCfg.threadToolBoxHeight;
511555
tempLinePath += this.drawLineToEndPoint(thirdArcStart);
512556
tempLinePath += this.drawLine5ThirdArcDown(
513557
startPoint,
@@ -516,7 +560,11 @@ export default {
516560
);
517561
} else {
518562
thirdArcStart.x = endPoint.x - LINE_H + LINE_RADIUS;
519-
thirdArcStart.y = startStateBottom + LINE_V + lineCfg.threadTitleHeight;
563+
thirdArcStart.y =
564+
startStateBottom +
565+
LINE_V +
566+
lineCfg.threadTitleHeight +
567+
lineCfg.threadToolBoxHeight;
520568
tempLinePath += this.drawLineToEndPoint(thirdArcStart);
521569
tempLinePath += this.drawLine5ThirdArcDown(
522570
startPoint,
@@ -535,7 +583,6 @@ export default {
535583
endStateBottom;
536584
startStateHeight = QBlock.State.getStateHeight(startState);
537585
endStateHeight = QBlock.State.getStateHeight(endState);
538-
//因嵌套内部状态的xy是相对于父状态的，需手动计算状态的上边缘与下边缘的y坐标
539586
startStateTop = QBlock.State.getXY2Canvas(startState, this.threadIndex).y;
540587
endStateTop = QBlock.State.getXY2Canvas(endState, this.threadIndex).y;
541588
startStateBottom =
@@ -727,7 +774,7 @@ export default {
727774
return this.line.d;
728775
}
729776
// if(!this.line.startPoint){
730-
777+
731778
this.line.startPoint = QBlock.Line.getStartPoint(
732779
this.line,
733780
this.threadIndex
@@ -771,31 +818,17 @@ export default {
771818
fill: none;
772819
}
773820
774-
.loop-in {
775-
stroke: @qkmLightGreen;
776-
opacity: 0.9;
777-
fill: none;
778-
}
779-
.loop-out {
780-
stroke: @qkmPurple;
781-
opacity: 0.9;
782-
fill: none;
783-
}
784821
.connect-line {
785822
stroke: @qkmGrey;
786823
fill: none;
787824
}
788825
789-
.connect-line:hover,
790-
.loop-in:hover,
791-
.loop-out:hover {
826+
.connect-line:hover {
792827
stroke: @qkmLightBlue;
793828
fill: none;
794829
cursor: pointer;
795830
}
796-
.active .connect-line,
797-
.active .loop-in,
798-
.active .loop-out {
831+
.active .connect-line {
799832
stroke: @qkmLightBlue;
800833
fill: none;
801834
}
@@ -807,9 +840,7 @@ export default {
807840
stroke: @qkmRed;
808841
fill: none;
809842
}
810-
.showdesc .connect-line,
811-
.showdesc .loop-in,
812-
.showdesc .loop-out {
843+
.showdesc .connect-line {
813844
stroke: @qkmYellow;
814845
fill: none;
815846
}

‎src/components/statepage/LoopDiv.vue

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

0 commit comments

Comments
 (0)