Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7b0ed96

Browse files
committed
patch: 梳理代码逻辑
1 parent 5f28296 commit 7b0ed96

File tree

8 files changed

+144
-87
lines changed

8 files changed

+144
-87
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
## 进度 / Proccess
99

1010
- [ ] 必要开放文档
11+
- [x] 梳理代码逻辑
1112
- [x] 实现删除节点功能
1213
- [x] 实现节点自动规划连接路径
1314
- [x] 简化连线路径映射source/target数据结构

‎src/components/Graph.vue‎

Lines changed: 70 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<div class="svg-box" @drop="createNode" @dragover.prevent>
44
<svg
55
class="zone"
6+
xmlns="http://www.w3.org/2000/svg"
67
:class="{ active: graphState.isDragging }"
78
@mousemove="svgMousemove($event)"
89
@mouseup="svgMouseUp"
@@ -29,7 +30,7 @@
2930
marker-end="url(#mark-arrow)"
3031
></path>
3132

32-
<g>
33+
<gclass="edges-list">
3334
<path
3435
v-for="edge in edges"
3536
:key="edge.id"
@@ -40,13 +41,13 @@
4041
></path>
4142
</g>
4243

43-
<g>
44+
<gclass="nodes-list">
4445
<g
4546
class="node-container"
4647
v-for="(node, index) in nodes"
4748
:key="index"
4849
:transform="'translate(' + node.x + ',' + node.y + ')'"
49-
@mousedown="dragNode(node)"
50+
@mousedown="dragSvgNode(node)"
5051
@contextmenu="rightMenu($event, node)"
5152
>
5253
<rect
@@ -109,14 +110,13 @@
109110
<script lang="ts">
110111
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
111112
import { Getter, Action } from "vuex-class";
112-
import Node from "./Node.vue";
113+
import Node from "@/components/Node.vue";
113114
import {
115+
getMidXPath,
114116
handleTheSameLinkDot,
115-
handelNotSameLinkDotAndNotStraightLine,
116-
getMidXPath
117+
handelNotSameLinkDotAndNotStraightLine
117118
} from "@/utils/path.ts";
118-
119-
let edgeId = 1;
119+
import { getRandomInt } from "@/utils/tools.ts";
120120
121121
const rectWidth = 141;
122122
const rectHeight = 70;
@@ -192,6 +192,11 @@ export default class Graph extends Vue {
192192
this.edges = edges;
193193
}
194194
195+
/**
196+
* 节点模块class
197+
* @argument {NodeClass} node - 节点数据
198+
* @return {Object}
199+
*/
195200
rectClass(node: NodeClass) {
196201
return {
197202
selected: node.selected,
@@ -238,9 +243,10 @@ export default class Graph extends Vue {
238243
239244
/**
240245
* 画布已存在节点检测
241-
* @argument node - 节点状态码
246+
* @argument {number} id - 节点ID
247+
* @return {boolean}
242248
*/
243-
codeExist(id: number) {
249+
codeExist(id: number):boolean {
244250
const index = this.nodes.findIndex(node => node.id === id);
245251
if (index !== -1) {
246252
alert("请勿增加重复节点!");
@@ -252,7 +258,7 @@ export default class Graph extends Vue {
252258
/**
253259
* 增加节点
254260
* @description 向SVG画布中新增节点
255-
* @argument event mouse event
261+
* @argument {DragEvent}event - mouse event
256262
*/
257263
createNode(event: DragEvent) {
258264
if (!this.createNodeLock) {
@@ -262,6 +268,7 @@ export default class Graph extends Vue {
262268
const jsonObj = JSON.parse(jsonStr);
263269
const { id, title } = jsonObj;
264270
this.createNodeLock = false;
271+
// 检测画布中是否已存在即将新增节点
265272
if (this.codeExist(id)) {
266273
return false;
267274
}
@@ -288,13 +295,15 @@ export default class Graph extends Vue {
288295
this.toggleIsDragging(false);
289296
}
290297
} else {
291-
alert("正在生成节点,请稍等..");
298+
// 若存在异步增加节点需求可在此使用提示
299+
// handling blocked asynchronous requests here
300+
alert("生成节点中..(please wait or ignore this...)");
292301
}
293302
}
294303
295304
/**
296305
* 连线数据
297-
* @argument edge - 路径元数据
306+
* @argument {EdgeClass}edge - 路径元数据
298307
*/
299308
edgeData(edge: EdgeClass) {
300309
const { dotLink, dotEndLink } = edge;
@@ -364,7 +373,7 @@ export default class Graph extends Vue {
364373
}
365374
});
366375
}
367-
// 正常情况连接
376+
// 连接端点不同侧且为同一水平线连接(最常见的连接情况)
368377
const { midX1, midY1, midX2, midY2 } = getMidXPath(
369378
startX,
370379
startY,
@@ -377,48 +386,48 @@ export default class Graph extends Vue {
377386
return false;
378387
}
379388
380-
nodeMousedown(node: NodeClass) {
381-
this.unSelectedAll();
382-
node.selected = true;
383-
this.changSelectedNode(node);
384-
this.mousedownNode = node;
385-
if (this.graphState.toLink) {
386-
this.isLinking = true;
387-
this.nodeCanDrag = false;
388-
}
389+
/**
390+
* 画布已存在路径检测
391+
* @argument {number} source - 源节点ID
392+
* @argument {number} target - 目标节点ID
393+
* @return {number}
394+
*/
395+
edgeExist(source: number, target: number): number {
396+
const edgeIsExist = this.edges.findIndex(
397+
i => source === i.source && target === i.target
398+
);
399+
return edgeIsExist;
389400
}
390401
391402
/**
392403
* 开始连接节点
393404
* @description 连线起始函数
394-
* @argument position - 连线起点位置
395-
* @argument node - 起始节点
405+
* @argument {string} position - 连线起点位置
396406
*/
397-
startLinkNode(position: string, event:any) {
407+
startLinkNode(position: string) {
398408
this.toggleToLink(true);
399409
this.dotLink = position;
400410
}
401411
402412
/**
403-
* 连接上节点
413+
* 节点完成连接
404414
* @description 连线终止函数
405-
* @argument position - 连线终点位置
406-
* @argument node - 终止节点
415+
* @argument {string}position - 连线终点位置
416+
* @argument {NodeClass}node - 终止节点
407417
*/
408418
endLinkedNode(position: string, node: NodeClass) {
409419
if (this.mousedownNode !== null && this.mousedownNode !== node) {
410420
const source = this.mousedownNode.id;
411421
const target = node.id;
412422
let edgeIsExist = -1;
413423
if (this.edges.length > 0) {
414-
edgeIsExist = this.edges.findIndex(
415-
i => source === i.source && target === i.target
416-
);
424+
// 相同两个节点之间最大连接路径为1
425+
edgeIsExist = this.edgeExist(source, target);
417426
}
418427
if (edgeIsExist === -1) {
419428
const dotLink = this.dotLink;
420429
const edge = {
421-
id: edgeId++,
430+
id: getRandomInt(),
422431
source,
423432
target,
424433
selected: false,
@@ -432,18 +441,18 @@ export default class Graph extends Vue {
432441
433442
/**
434443
* 全局SVG鼠标事件监听
435-
* @description 核心功能 - 处理连线轨迹 - 更新节点拖拽变化值
436-
* @argument event - mouse event
444+
* @description 核心方法 - 处理连线轨迹 - 更新节点拖拽变化值
445+
* @argument {MouseEvent}event - mouse event
437446
*/
438447
svgMousemove(event: MouseEvent) {
439448
let node = this.mousedownNode;
440449
const { movementX, movementY } = event;
441450
if (node !== null) {
442-
// link node
451+
// drag edge
443452
if (this.isLinking) {
444453
this.lineDragData = this.caclPathDragData(node, event);
445454
}
446-
// drag node 拖拽点值偏移量修正
455+
// drag node
447456
if (this.nodeCanDrag) {
448457
node.x += movementX;
449458
node.y += movementY;
@@ -464,10 +473,11 @@ export default class Graph extends Vue {
464473
465474
/**
466475
* 动态计算路径拖拽数据
467-
* @argument mousedownNode - 当前 mousedown 状态节点
468-
* @argument event - mouse event
476+
* @argument {NodeClass} mousedownNode - 当前 mousedown 状态节点
477+
* @argument {MouseEvent} event - mouse event
478+
* @return {string} path attr 'd' value
469479
*/
470-
caclPathDragData(mousedownNode: NodeClass, event: MouseEvent) {
480+
caclPathDragData(mousedownNode: NodeClass, event: MouseEvent):string {
471481
const { offsetX: endX, offsetY: endY } = event;
472482
const { linkNode } = mousedownNode;
473483
@@ -499,28 +509,10 @@ export default class Graph extends Vue {
499509
}
500510
501511
/**
502-
* 鼠标右键事件
512+
* 在svg中拖拽节点
513+
* @argument {NodeClass} node - 节点
503514
*/
504-
svgMouseRightDown() {
505-
// this.toggleToLink(false);
506-
}
507-
508-
/**
509-
* 点击路径
510-
* @argument edge - 路径元数据
511-
*/
512-
clickEdge(edge: EdgeClass) {
513-
this.unSelectedAll();
514-
this.recoverySideBar();
515-
edge.selected = true;
516-
this.changSelectedEdge(edge);
517-
}
518-
519-
/**
520-
* 移动节点
521-
* @argument node - 节点
522-
*/
523-
dragNode(node: NodeClass) {
515+
dragSvgNode(node: NodeClass) {
524516
this.unSelectedAll();
525517
this.recoverySideBar();
526518
node.selected = true;
@@ -532,15 +524,18 @@ export default class Graph extends Vue {
532524
}
533525
}
534526
527+
/**
528+
* 恢复侧边栏状态
529+
*/
535530
recoverySideBar() {
536531
this.settingNodeId = 0;
537532
this.$emit("recovery-side-bar");
538533
}
539534
540535
/**
541536
* 鼠标右键菜单拓展
542-
* @argument event - mouse event
543-
* @argument node - 节点
537+
* @argument {MouseEvent}event - mouse event
538+
* @argument {NodeClass}node - 节点
544539
*/
545540
rightMenu(event: MouseEvent, node: NodeClass) {
546541
event.preventDefault();
@@ -580,6 +575,18 @@ export default class Graph extends Vue {
580575
this.unSelectedNodes();
581576
this.unSelectedEdges();
582577
}
578+
579+
/**
580+
* 点击路径
581+
* @description 暂无任何实际功能,需要可以自行增加删除路径功能或更多自定义效果
582+
* @argument edge - 路径元数据
583+
*/
584+
clickEdge(edge: EdgeClass) {
585+
this.unSelectedAll();
586+
this.recoverySideBar();
587+
edge.selected = true;
588+
this.changSelectedEdge(edge);
589+
}
583590
}
584591
</script>
585592

‎src/components/GraphShow.vue‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,7 @@ export default class GraphShow extends Vue {
217217
});
218218
}
219219
220-
// 正常情况连接
220+
// 连接端点不同侧且为同一水平线连接(最常见的连接情况)
221221
const { midX1, midY1, midX2, midY2 } = getMidXPath(
222222
startX,
223223
startY,
@@ -229,13 +229,21 @@ export default class GraphShow extends Vue {
229229
return false;
230230
}
231231
232+
/**
233+
* 展示节点信息提示
234+
* @argument {MouseEvent} event - mouse event
235+
* @argument {number} nodeId - 节点ID
236+
*/
232237
showNodeInfoTip(event: MouseEvent, nodeId: number) {
233238
const { layerX, layerY } = event;
234239
this.tipX = layerX;
235240
this.tipY = layerY;
236241
this.showTip = nodeId;
237242
}
238243
244+
/**
245+
* 关闭节点信息提示
246+
*/
239247
closeNodeInfoTip() {
240248
if (this.showTip !== 0) {
241249
this.closeTip = true;

‎src/components/Node.vue‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,22 @@ export default class Node extends Vue {
2020
@Prop() readonly nodeItem!: NodeItem;
2121
@Action("toggle_isDragging") toggleIsDragging: any;
2222
23+
/**
24+
* 开始拖拽节点
25+
* @argument {DragEvent} event - 拖拽事件
26+
* @argument {NodeItem} item - 节点数据
27+
*/
2328
dragstart(event: DragEvent, item: NodeItem) {
2429
this.toggleIsDragging(true);
2530
if (event.dataTransfer !== null) {
2631
event.dataTransfer.setData("item", JSON.stringify(item));
2732
}
2833
}
2934
35+
/**
36+
* 拖拽节点事件终止
37+
* @argument {DragEvent} event - 拖拽事件
38+
*/
3039
dragend(event: DragEvent) {
3140
this.toggleIsDragging(false);
3241
if (event.dataTransfer !== null) {
@@ -40,24 +49,24 @@ export default class Node extends Vue {
4049
.node{
4150
width: 141px;
4251
height: 70px;
52+
margin: 2.5%;
53+
cursor: grab;
4354
display: flex;
4455
flex-flow: column;
45-
align-items: center;
46-
justify-content: center;
47-
cursor: grab;
48-
margin: 2.5%;
4956
user-select: none;
57+
align-items: center;
5058
border-radius: 2px;
59+
justify-content: center;
5160
border: 2px solid #4a4a4a;
5261
transition: all 0.2s ease-in-out;
5362
54-
&:hover{
55-
background-color: #e2e2e2;
56-
}
57-
5863
.text{
5964
font-size: 14px;
6065
color: #4a4a4a;
6166
}
67+
68+
&:hover{
69+
background-color: #e2e2e2;
70+
}
6271
}
6372
</style>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /