highlight node and edge

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')])
+          })
         },
       },
 });