Skip to content

Commit ac2bc33

Browse files
GunawanAhmadGunawanAhmad
committed
start and finish can be drag and add color
1 parent ee35c78 commit ac2bc33

File tree

4 files changed

+224
-128
lines changed

4 files changed

+224
-128
lines changed

‎src/components/Node.vue

Lines changed: 79 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -2,130 +2,97 @@
22
<div
33
class="node"
44
:class="[
5-
node.isFinish ? 'finish-node' : '',
6-
node.isStart ? 'start-node' : '',
5+
node.isFinish ? 'finish-node draggable' : '',
6+
node.isStart ? 'start-node draggable' : '',
77
]"
88
:id="`node-${node.row}-${node.col}`"
9-
@click="test"
10-
:draggable="node.isStart ? true : false"
9+
@dragstart="dragStart"
10+
@dragenter="dragEnter"
11+
@dragleave="dragLeave"
12+
@dragover="dragOver"
13+
@drop="dragDrop"
14+
@dragend="dragEnd"
15+
@mousedown="mouseDown"
1116
></div>
1217
</template>
1318

1419
<script>
1520
export default {
1621
props: ["node"],
22+
data() {
23+
return {
24+
startNode: null,
25+
finishNode: null,
26+
};
27+
},
28+
mounted() {
29+
this.startNode = document.querySelector(".start-node");
30+
this.finishNode = document.querySelector(".finish-node");
31+
},
32+
1733
methods: {
18-
test(e) {
34+
mouseDown(e) {
35+
if (e.target.classList.contains("draggable")) {
36+
if (e.target === this.startNode) {
37+
this.startNode.classList.add("inDrag");
38+
} else {
39+
this.finishNode.classList.add("inDrag");
40+
}
41+
return;
42+
}
43+
e.preventDefault();
44+
},
45+
dragStart(e) {
46+
if (this.startNode.classList.contains("inDrag")) {
47+
e.target.classList.remove("start-node", "draggable");
48+
} else if (this.finishNode.classList.contains("inDrag")) {
49+
e.target.classList.remove("finish-node", "draggable");
50+
}
51+
},
52+
dragEnd(e) {
1953
console.log(e.target);
2054
},
55+
dragOver(e) {
56+
e.preventDefault();
57+
},
58+
dragEnter(e) {
59+
e.preventDefault();
60+
if (this.startNode.classList.contains("inDrag")) {
61+
e.target.classList.add("start-node", "draggable");
62+
} else if (this.finishNode.classList.contains("inDrag")) {
63+
e.target.classList.add("finish-node", "draggable");
64+
}
65+
},
66+
dragLeave(e) {
67+
e.preventDefault();
68+
e.target.classList.remove("start-node", "draggable");
69+
if (this.startNode.classList.contains("inDrag")) {
70+
e.target.classList.remove("start-node", "draggable");
71+
} else if (this.finishNode.classList.contains("inDrag")) {
72+
e.target.classList.remove("finish-node", "draggable");
73+
}
74+
},
75+
dragDrop(e) {
76+
const newNode = e.target.id.split("-");
77+
78+
if (this.startNode.classList.contains("inDrag")) {
79+
e.target.classList.add("start-node", "draggable");
80+
this.startNode.classList.remove("inDrag");
81+
this.$store.state.startNode.row = newNode[1];
82+
this.$store.state.startNode.col = newNode[2];
83+
} else if (this.finishNode.classList.contains("inDrag")) {
84+
e.target.classList.add("finish-node", "draggable");
85+
this.finishNode.classList.remove("inDrag");
86+
this.$store.state.finishNode.row = newNode[1];
87+
this.$store.state.finishNode.col = newNode[2];
88+
}
89+
},
90+
checkStartNodeTotal() {
91+
let startNode = document.querySelectorAll(".start-node");
92+
return startNode;
93+
},
2194
},
2295
};
2396
</script>
2497

25-
<style>
26-
.node {
27-
height: 25px;
28-
width: 25px;
29-
outline: 1px solid rgb(192, 191, 191);
30-
display: inline-block;
31-
}
32-
33-
.node.finish-node {
34-
background: transparent;
35-
36-
height: 25px;
37-
width: 25px;
38-
outline: 1px solid rgb(192, 191, 191);
39-
display: inline-block;
40-
position: relative;
41-
}
42-
43-
.node.start-node {
44-
position: relative;
45-
background: transparent;
46-
height: 25px;
47-
width: 25px;
48-
outline: 1px solid rgb(192, 191, 191);
49-
display: inline-block;
50-
}
51-
52-
.node.start-node::before {
53-
/* display: none; */
54-
font-family: "Font Awesome 5 Free";
55-
font-weight: 900;
56-
font-size: 1.5rem;
57-
content: "\f3c5";
58-
position: absolute;
59-
left: 50%;
60-
top: 50%;
61-
transform: translate(-50%, -50%);
62-
color: black;
63-
}
64-
65-
.node.finish-node::before {
66-
/* display: none; */
67-
font-family: "Font Awesome 5 Free";
68-
font-weight: 900;
69-
font-size: 1.5rem;
70-
content: "\f140";
71-
position: absolute;
72-
left: 50%;
73-
top: 50%;
74-
transform: translate(-50%, -50%);
75-
color: black;
76-
}
77-
78-
.visited {
79-
background: gray;
80-
}
81-
82-
.short {
83-
animation-name: shortestPath;
84-
animation-duration: 1.5s;
85-
animation-timing-function: ease-out;
86-
animation-direction: alternate;
87-
animation-iteration-count: 1;
88-
animation-fill-mode: forwards;
89-
opacity: 0;
90-
}
91-
92-
@keyframes visitedAnimation {
93-
/* 0% {
94-
opacity: 0.2;
95-
background-color: gray;
96-
border-radius: 100%;
97-
}
98-
99-
50% {
100-
opacity: 0.5;
101-
background-color: gray;
102-
}
103-
104-
75% {
105-
opacity: 0.7;
106-
background-color: gray;
107-
}
108-
109-
100% {
110-
opacity: 1;
111-
background-color: gray; */
112-
/* } */
113-
}
114-
115-
@keyframes shortestPath {
116-
0% {
117-
opacity: 0.3;
118-
background-color: rgb(255, 254, 106);
119-
}
120-
121-
50% {
122-
opacity: 0.7;
123-
background-color: rgb(255, 254, 106);
124-
}
125-
126-
100% {
127-
opacity: 1;
128-
background-color: rgb(255, 254, 106);
129-
}
130-
}
131-
</style>
98+
<style lang="scss" scoped src="../scss/Node.scss"></style>

‎src/scss/Node.scss

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
.node {
2+
height: 25px;
3+
width: 25px;
4+
outline: 1px solid #fae0e0;
5+
display: inline-block;
6+
7+
&.finish-node {
8+
background: transparent;
9+
10+
height: 25px;
11+
width: 25px;
12+
outline: 1px solid #fae0e0;
13+
14+
display: inline-block;
15+
position: relative;
16+
17+
&.draggable::before {
18+
font-family: "Font Awesome 5 Free";
19+
font-weight: 900;
20+
font-size: 1.5rem;
21+
content: "\f140";
22+
position: absolute;
23+
left: 50%;
24+
top: 50%;
25+
transform: translate(-50%, -50%);
26+
color: black;
27+
cursor: grab;
28+
}
29+
}
30+
31+
&.start-node {
32+
position: relative;
33+
background: transparent;
34+
height: 25px;
35+
width: 25px;
36+
outline: 1px solid #fae0e0;
37+
38+
display: inline-block;
39+
40+
&.draggable::before {
41+
font-family: "Font Awesome 5 Free";
42+
font-weight: 900;
43+
font-size: 1.5rem;
44+
content: "\f3c5";
45+
position: absolute;
46+
left: 50%;
47+
top: 50%;
48+
transform: translate(-50%, -50%);
49+
color: black;
50+
cursor: grab;
51+
}
52+
}
53+
}
54+
55+
.visited {
56+
animation-name: visitedAnimation;
57+
animation-duration: 1.5s;
58+
animation-timing-function: ease-out;
59+
animation-delay: 0;
60+
animation-direction: alternate;
61+
animation-iteration-count: 1;
62+
animation-fill-mode: forwards;
63+
animation-play-state: running;
64+
}
65+
66+
@keyframes visitedAnimation {
67+
0% {
68+
transform: scale(0.3);
69+
background-color: #f48b29;
70+
border-radius: 100%;
71+
}
72+
73+
50% {
74+
background-color: #f0c929;
75+
}
76+
77+
75% {
78+
transform: scale(1.2);
79+
background-color: #f0c929;
80+
}
81+
82+
100% {
83+
transform: scale(1);
84+
background-color: #f0c929;
85+
}
86+
}
87+
88+
.node-wall {
89+
background-color: rgb(12, 53, 71);
90+
}
91+
92+
.short {
93+
animation-name: shortestPath;
94+
animation-duration: 1.5s;
95+
animation-timing-function: ease-out;
96+
animation-delay: 0;
97+
animation-direction: alternate;
98+
animation-iteration-count: 1;
99+
animation-fill-mode: forwards;
100+
animation-play-state: running;
101+
}
102+
103+
@keyframes shortestPath {
104+
0% {
105+
transform: scale(0.6);
106+
background-color: #fbe6c2;
107+
}
108+
109+
50% {
110+
transform: scale(1.2);
111+
background-color: #fbe6c2;
112+
}
113+
114+
100% {
115+
transform: scale(1);
116+
background-color: #fbe6c2;
117+
}
118+
}

‎src/store/index.js

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,22 @@
1-
import Vue from 'vue'
2-
import Vuex from 'vuex'
1+
import Vue from "vue";
2+
import Vuex from "vuex";
33

4-
Vue.use(Vuex)
4+
Vue.use(Vuex);
55

66
export default new Vuex.Store({
77
state: {
8+
startNode: {
9+
row: 10,
10+
col: 10,
11+
element: null,
12+
},
13+
finishNode: {
14+
row: 10,
15+
col: 30,
16+
element: null,
17+
},
818
},
9-
mutations: {
10-
},
11-
actions: {
12-
},
13-
modules: {
14-
}
15-
})
19+
mutations: {},
20+
actions: {},
21+
modules: {},
22+
});

‎src/views/PathfindingVisualizer.vue

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ export default {
1414
components: { Node },
1515
data() {
1616
return {
17-
START_NODE_ROW: 12,
18-
START_NODE_COL: 13,
19-
FINISH_NODE_ROW: 11,
20-
FINISH_NODE_COL: 30,
17+
START_NODE_ROW: this.$store.state.startNode.row,
18+
START_NODE_COL: this.$store.state.startNode.col,
19+
FINISH_NODE_ROW: this.$store.state.finishNode.row,
20+
FINISH_NODE_COL: this.$store.state.finishNode.col,
2121
grid: [],
2222
};
2323
},
@@ -47,8 +47,12 @@ export default {
4747
},
4848
4949
runDijkstraAlgo() {
50-
const startNode = this.grid[this.START_NODE_ROW][this.START_NODE_COL];
51-
const finishNode = this.grid[this.FINISH_NODE_ROW][this.FINISH_NODE_COL];
50+
const startNode = this.grid[this.$store.state.startNode.row][
51+
this.$store.state.startNode.col
52+
];
53+
const finishNode = this.grid[this.$store.state.finishNode.row][
54+
this.$store.state.finishNode.col
55+
];
5256
const visitedNodeInOrder = dijkstra(this.grid, startNode, finishNode);
5357
const shortestPathNodesInOrder = findTheShortestPath(finishNode);
5458
this.visualizeDijkstra(visitedNodeInOrder, shortestPathNodesInOrder);

0 commit comments

Comments
 (0)