dualonNodeClickHighlightEdges and onEdgeClickHighlightNodes

src/module/cytoscapeMap.js

@@ -3,11 +3,13 @@ import spread from 'cytoscape-spread';
 import dagre from 'cytoscape-dagre';
 import tippy from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
+import MapPathStore from '@/stores/mapPathStore';
 import Gradient from 'javascript-color-gradient'; // 多個色階產生器
 import { getTimeLabel } from '@/module/timeLabel.js'; // 時間格式轉換器
 import CytoscapeStore from '@/stores/cytoscapeStore';
 import { SAVE_KEY_NAME } from '@/constants/constants.js';
 
+const mapPathStore = MapPathStore();
 const composeFreqTypeText = (baseText, dataLayerOption, optionValue) => { //sonar-qube
   let text = baseText;
   const textInt = dataLayerOption === 'rel_freq' ? baseText + optionValue * 100 + "%" : baseText + optionValue;
@@ -241,6 +243,13 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
           'overlay-opacity': 0.2,
           'overlay-padding': '5px',
         },
+      },{
+        selector: '.highlight-node',
+        style: {
+          'overlay-color': '#0099FF',
+          'overlay-opacity': 0.01,
+          'overlay-padding': '5px',
+        },
       }
     ],
   });
@@ -257,6 +266,17 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
     event.target.addClass('highlight-edge');
   });
 
+
+  // 按下節點光暈效果與鄰邊光暈效果
+  cy.on('tap, mousedown', 'node', function(event) {
+    mapPathStore.onNodeClickHighlightEdges(event.target);
+  });
+
+  // 按下線段光暈效果與兩端點光暈效果
+  cy.on('tap, mousedown', 'edge', function(event) {
+    mapPathStore.onEdgeClickHighlightNodes(event.target);
+  });
+
   // creat tippy.js
   let tip;
   cy.on('mouseover', 'node', function(event) {