diff --git a/src/assets/capsule1-glow.svg b/src/assets/capsule1-glow.svg
new file mode 100644
index 0000000..cca4da3
--- /dev/null
+++ b/src/assets/capsule1-glow.svg
@@ -0,0 +1,20 @@
+
diff --git a/src/assets/capsule2-glow.svg b/src/assets/capsule2-glow.svg
new file mode 100644
index 0000000..7eac7b2
--- /dev/null
+++ b/src/assets/capsule2-glow.svg
@@ -0,0 +1,21 @@
+
diff --git a/src/assets/capsule3-glow.svg b/src/assets/capsule3-glow.svg
new file mode 100644
index 0000000..9c25642
--- /dev/null
+++ b/src/assets/capsule3-glow.svg
@@ -0,0 +1,22 @@
+
diff --git a/src/assets/capsule4-glow.svg b/src/assets/capsule4-glow.svg
new file mode 100644
index 0000000..42837e1
--- /dev/null
+++ b/src/assets/capsule4-glow.svg
@@ -0,0 +1,22 @@
+
diff --git a/src/stores/mapPathStore.ts b/src/stores/mapPathStore.ts
index 4860962..660379e 100644
--- a/src/stores/mapPathStore.ts
+++ b/src/stores/mapPathStore.ts
@@ -2,6 +2,17 @@ import { defineStore } from 'pinia';
import AllMapData from '@/stores/allMapData.js';
import { INSIGHTS_FIELDS_AND_LABELS } from '@/constants/constants';
import cytoscape, { EdgeSingular, NodeSingular } from 'cytoscape';
+import ImgCapsuleGlow1 from '@/assets/capsule1-glow.svg';
+import ImgCapsuleGlow2 from '@/assets/capsule2-glow.svg';
+import ImgCapsuleGlow3 from '@/assets/capsule3-glow.svg';
+import ImgCapsuleGlow4 from '@/assets/capsule4-glow.svg';
+import ImgCapsule1 from '@/assets/capsule1.svg';
+import ImgCapsule2 from '@/assets/capsule2.svg';
+import ImgCapsule3 from '@/assets/capsule3.svg';
+import ImgCapsule4 from '@/assets/capsule4.svg';
+
+const ImgCapsulesGlow = [ImgCapsuleGlow1, ImgCapsuleGlow2, ImgCapsuleGlow3, ImgCapsuleGlow4];
+const ImgCapsules = [ImgCapsule1, ImgCapsule2, ImgCapsule3, ImgCapsule4];
interface MapPathStoreState {
clickedPath: string[];
@@ -105,7 +116,6 @@ export default defineStore('useMapPathStore', {
} // end third for
} // end second for
} // end first for
- console.log('this.mapGraphPathToInsight[0][0]', this.mapGraphPathToInsight[0][0]);
},
depthFirstSearchMatchTwoPaths(curPath, curPathIndex, curButton, listIndex, nodeIndex){
if(listIndex >= curButton.length) { // 邊界條件檢查，防止超出範圍
@@ -149,9 +159,16 @@ export default defineStore('useMapPathStore', {
.forEach(pathToHighlight => {
pathToHighlight.addClass('highlight-edge');
});
+ this.mapGraphPathToInsight[clickedActiveTraceIndex][clickedPathListIndex].pathByNode
+ .forEach(nodeToHighlight => {
+ nodeToHighlight.data('nodeImageUrl', ImgCapsulesGlow[nodeToHighlight.data('level')]);
+ })
},
clearAllHighlight() {
this.cytoscape.edges().removeClass('highlight-edge');
+ this.cytoscape.nodes().forEach(nodeToReset => {
+ nodeToReset.data('nodeImageUrl', ImgCapsules[nodeToReset.data('level')])
+ })
},
},
});
\ No newline at end of file
diff --git a/src/views/Discover/Map/Map.vue b/src/views/Discover/Map/Map.vue
index 8b51a04..6e0438e 100644
--- a/src/views/Discover/Map/Map.vue
+++ b/src/views/Discover/Map/Map.vue
@@ -411,6 +411,7 @@ export default {
},
setActivityBgImage(mapData) {
const nodes = mapData.nodes;
+ // 一組有多少個activities
const groupSize = Math.floor(nodes.length / ImgCapsules.length);
let nodeOptionArr = [];
const leveledGroups = []; // 每一個level會使用不同的膠囊圖片
@@ -434,6 +435,7 @@ export default {
curNode.data = {
...curNode.data,
nodeImageUrl: ImgCapsules[level],
+ level,
};
});
});