Skip to content

Commit 6808eec

Browse files
author
Zhang Jie
committed
优化ThreadSvg中更新连线、更新状态位置等方法
1 parent 5c52495 commit 6808eec

32 files changed

+1700
-1073
lines changed

‎src/Tools.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,33 @@ let deepCopy = (obj) => {
4141

4242
return ret;
4343
}
44+
//递归根据stateId在stateAry内寻找对应的状态，根据indexFlag来决定是否返回对应状态的index
45+
function stateTraverse(stateAry,targetStateId,indexFlag=false){
46+
let result = [];
47+
traverse(stateAry, targetStateId, result, indexFlag)
48+
if(indexFlag){
49+
return result
50+
} else{
51+
return result.pop()
52+
}
53+
54+
}
55+
function traverse(stateAry, targetStateId, result, indexFlag){
56+
for (var i=0; i<stateAry.length; i++){
57+
if (stateAry[i].stateId === targetStateId){
58+
result.push(stateAry[i])
59+
if(indexFlag){
60+
result.push(i)
61+
}
62+
return
63+
}
64+
traverse(stateAry[i].children, targetStateId, result)
65+
}
66+
}
67+
4468

4569
export default {
4670
downloadFlie: downloadFlie,
4771
deepCopy: deepCopy,
72+
stateTraverse: stateTraverse,
4873
}

‎src/assets/dist/menuCfg.dev.js

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎src/assets/dist/menuCfg.dev.js.map

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/assets/dist/menuCfg.min.js

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎src/assets/dist/menuCfg.min.js.map

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/components/statepage/LineSvg.vue

Lines changed: 177 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -1,161 +1,206 @@
11
<template>
2-
<g
3-
@contextmenu.prevent="onContextMenu"
4-
@click="activeLineChange"
5-
:class="[{'showdesc': line.showdesc}, {'active': isInActiveLines()}, line.type]"
2+
<g
3+
@contextmenu.prevent="onContextMenu"
4+
@click="activeLineChange"
5+
:class="[
6+
{ showdesc: line.showdesc },
7+
{ active: isInActiveLines() },
8+
line.type,
9+
]"
10+
>
11+
<path
12+
:id="line.lineId"
13+
:lineId="line.lineId"
14+
:d="line.d"
15+
:class="genClass()"
16+
:style="{ strokeWidth: strokeWidth }"
617
>
7-
<path
8-
:id="line.lineId"
9-
:lineId="line.lineId"
10-
:d="line.d"
11-
:class="genClass()"
12-
:style="{strokeWidth: strokeWidth}">
13-
</path>
14-
<path
15-
:d="getTextPath(line)"
16-
:id="line.lineId + '-textpath'"></path>
17-
<text
18-
v-if="line.desc"
19-
x="15"
20-
y="0"
21-
>
22-
<title>{{line.desc}}</title>
23-
<textPath
24-
:xlink:href="'#' + line.lineId + '-textpath'"
25-
:id="line.lineId + '-text'"
26-
>{{line.desc.length > descLimit ? line.desc.slice(0,8) + '...' : line.desc}}</textPath>
27-
</text>
28-
29-
</g>
18+
</path>
19+
<path :d="getTextPath(line)" :id="line.lineId + '-textpath'"></path>
20+
<text v-if="line.desc" x="15" y="0">
21+
<title>{{ line.desc }}</title>
22+
<textPath
23+
:xlink:href="'#' + line.lineId + '-textpath'"
24+
:id="line.lineId + '-text'"
25+
>{{
26+
line.desc.length > descLimit
27+
? line.desc.slice(0, 8) + "..."
28+
: line.desc
29+
}}</textPath
30+
>
31+
</text>
32+
</g>
3033
</template>
3134

3235
<script>
33-
import {lineCfg} from './graphCfg.js'
36+
import { lineCfg } from "./graphCfg.js";
37+
import Util from "./util.js";
3438
35-
const line_h = lineCfg.line_h
36-
const stroke_width = lineCfg.stroke_width
37-
const desc_limit = lineCfg.desc_limit
39+
const line_h = lineCfg.line_h;
40+
const stroke_width = lineCfg.stroke_width;
41+
const desc_limit = lineCfg.desc_limit;
3842
export default {
39-
name: 'LineSvg',
40-
props: ["line", "threadIndex", "lineClass", "activeLines"],
41-
data(){
42-
return {
43-
strokeWidth: stroke_width,
44-
descLimit: desc_limit,
43+
name: "LineSvg",
44+
props: ["line", "threadIndex", "lineClass", "activeLines"],
45+
data() {
46+
return {
47+
strokeWidth: stroke_width,
48+
descLimit: desc_limit,
49+
};
50+
},
51+
methods: {
52+
activeLineChange() {
53+
this.$emit("updateActiveLine", this.line.lineId);
54+
},
55+
isInActiveLines() {
56+
for (let i = 0; i < this.activeLines.length; i++) {
57+
if (this.line.lineId === this.activeLines[i]) {
58+
return true;
4559
}
60+
}
61+
return false;
4662
},
47-
methods: {
48-
activeLineChange(){
49-
this.$emit('updateActiveLine', this.line.lineId)
50-
},
51-
isInActiveLines(){
52-
for(let i=0; i<this.activeLines.length; i++){
53-
if(this.line.lineId === this.activeLines[i]){
54-
return true;
55-
}
56-
}
57-
return false;
58-
},
59-
genClass(type){
60-
return this.lineClass ? this.lineClass : 'connect-line';
61-
},
62-
generatePath(line){
63-
if(line && line.d){
64-
return line.d;
65-
}else{
66-
return 'M 0 0 L 50 0'; //test
67-
}
68-
},
69-
generateByPoint(){
70-
71-
},
72-
generateByState(){
73-
74-
},
75-
/*
76-
* 获取连线中点，然后以这个中点为起点绘制文字的路径
77-
*
78-
*/
79-
getTextPath(line){
80-
let startX, startY, endY, midPointPath, midPoint
81-
startX = line.startPoint.x;
82-
startY = line.startPoint.y;
83-
endY = line.endPoint.y;
84-
midPointPath = `M ${startX + line_h} ${((startY + endY) / 2)} h 300`;
85-
return midPointPath
86-
},
87-
genId(){
88-
return window.genId('line');
89-
},
90-
onContextMenu(e){
91-
EventObj.$emit('updateContextMenu', {
92-
lineId: this.line.lineId,
93-
threadIndex: this.threadIndex,
94-
lineData: this.line,
95-
position: {
96-
x: e.pageX,
97-
y: e.pageY
98-
}
99-
});
100-
},
63+
genClass(type) {
64+
return this.lineClass ? this.lineClass : "connect-line";
10165
},
102-
created(){
103-
this.$set(this.line, 'showdesc', false);
104-
if(!this.line.lineId){
105-
this.line.lineId = this.genId();
106-
}
66+
generatePath(line) {
67+
if (line && line.d) {
68+
return line.d;
69+
} else {
70+
return "M 0 0 L 50 0"; //test
71+
}
10772
},
108-
mounted(){
73+
generateByPoint() {},
74+
generateByState() {},
75+
/**
76+
* 根据连线的开始状态获取连线的起点
77+
*/
78+
getStartPoint(line) {
79+
//如果开始点不存在
80+
if (
81+
!line.startPoint ||
82+
line.startPoint.x === null ||
83+
typeof line.startPoint.x === "undefined" ||
84+
isNaN(line.startPoint.x)
85+
) {
10986
87+
let startState = store.getState(this.threadIndex, line.startState.stateId, false/**isThreadId: false */);
88+
line.startPoint = {
89+
x: startState.x + Util.translatePX2Num(startState.width),
90+
y: startState.y + Util.translatePX2Num(startState.height) / 2,
91+
};
92+
}else{
93+
//debugger;
94+
}
95+
return line.startPoint;
11096
},
111-
computed: {
112-
linePath: function(){
113-
return this.generatePath(this.line);
114-
}
97+
getEndPoint(line) {
98+
//如果结束点不存在
99+
if (
100+
!line.endPoint ||
101+
line.endPoint.x === null ||
102+
typeof line.endPoint.x === "undefined" ||
103+
isNaN(line.endPoint.x)
104+
) {
105+
let endState = store.getState(this.threadIndex, line.endState.stateId, false/**isThreadId: false */);
106+
line.endPoint = {
107+
x: endState.x,
108+
y: endState.y + Util.translatePX2Num(endState.height) / 2,
109+
};
110+
}else{
111+
//debugger;
112+
}
113+
return line.endPoint;
114+
},
115+
/*
116+
* 获取连线中点，然后以这个中点为起点绘制文字的路径
117+
*
118+
*/
119+
getTextPath(line) {
120+
let startX,
121+
startY,
122+
endY,
123+
midPointPath,
124+
midPoint,
125+
startPoint = this.getStartPoint(line),
126+
endPoint = this.getEndPoint(line);
127+
startX = startPoint.x;
128+
startY = startPoint.y;
129+
endY = endPoint.y;
130+
//console.log([startX, line_h, startY, endY]);
131+
midPointPath = `M ${startX + line_h} ${(startY + endY) / 2} h 300`;
132+
return midPointPath;
133+
},
134+
genId() {
135+
return window.genId("line");
136+
},
137+
onContextMenu(e) {
138+
EventObj.$emit("updateContextMenu", {
139+
lineId: this.line.lineId,
140+
threadIndex: this.threadIndex,
141+
lineData: this.line,
142+
position: {
143+
x: e.pageX,
144+
y: e.pageY,
145+
},
146+
});
147+
},
148+
},
149+
created() {
150+
this.$set(this.line, "showdesc", false);
151+
if (!this.line.lineId) {
152+
this.line.lineId = this.genId();
115153
}
116-
117-
}
154+
},
155+
mounted() {},
156+
computed: {
157+
linePath: function () {
158+
return this.generatePath(this.line);
159+
},
160+
},
161+
};
118162
</script>
119163

120164
<style lang="less">
121165
@qkmGrey: #aaaaaa;
122166
@qkmLightBlue: #70ffff;
123-
@qkmOrange:#ffaf3d;
124-
@qkmRed:#e83e3e;
167+
@qkmOrange: #ffaf3d;
168+
@qkmRed: #e83e3e;
125169
@qkmYellow: #f8f837;
126-
.connect-line{
127-
stroke: @qkmGrey;
128-
fill: none;
170+
.connect-line {
171+
stroke: @qkmGrey;
172+
fill: none;
129173
}
130-
.connect-line:hover{
131-
stroke:@qkmLightBlue;
132-
fill: none;
133-
cursor:pointer;
174+
.connect-line:hover {
175+
stroke: @qkmLightBlue;
176+
fill: none;
177+
cursor: pointer;
134178
}
135-
.active .connect-line{
136-
stroke:@qkmLightBlue;
137-
fill: none;
179+
.active .connect-line {
180+
stroke: @qkmLightBlue;
181+
fill: none;
138182
}
139-
.warning .connect-line{
140-
stroke: @qkmOrange;
141-
fill:none;
183+
.warning .connect-line {
184+
stroke: @qkmOrange;
185+
fill: none;
142186
}
143-
.error .connect-line{
144-
stroke:@qkmRed;
145-
fill:none;
187+
.error .connect-line {
188+
stroke: @qkmRed;
189+
fill: none;
146190
}
147-
.showdesc .connect-line{
148-
stroke:@qkmYellow;
149-
fill:none;
191+
.showdesc .connect-line {
192+
stroke: @qkmYellow;
193+
fill: none;
150194
}
151-
text{
152-
display: none;
153-
fill: yellow;
195+
text {
196+
display: none;
197+
fill: yellow;
154198
}
155-
.active text, .showdesc text{
156-
display: block;
157-
overflow: hidden;
158-
text-overflow:ellipsis;
159-
white-space: nowrap;
199+
.active text,
200+
.showdesc text {
201+
display: block;
202+
overflow: hidden;
203+
text-overflow: ellipsis;
204+
white-space: nowrap;
160205
}
161206
</style>

0 commit comments

Comments
 (0)