WIP: cytoscape edge text can be highlighted

src/module/cytoscapeMap.js

@@ -18,7 +18,7 @@ const composeFreqTypeText = (baseText, dataLayerOption, optionValue) => { //sona
 };
 
 // 註冊布局演算法
-cytoscape.use( dagre );
+cytoscape.use(dagre);
 cytoscape.use(spread);
 
 /**
@@ -221,7 +221,18 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
           "text-margin-y": "15rem",
           //"text-rotation": "autorotate",
         }
-      },
+      },{
+        selector: '.highlight-edge',
+        css: {
+          'color': '#0099FF',
+          'line-color': '#0099FF',
+          'shadow-blur': 12,
+          'shadow-color': '#0099FF',
+          'shadow-offset-x': 0,
+          'shadow-offset-y': 4,
+          'z-index': 9999,
+        }
+      }
     ],
   });
 
@@ -231,6 +242,12 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
     minDist: 40, // 設置最小節點間距
   }).run();
 
+  // 按下線條，線條及線條上數字有光暈效果
+  cy.on('tap', 'edge', function(event) {
+    cy.edges().removeClass('highlight-edge');
+    event.target.addClass('highlight-edge');
+  });
+
   // creat tippy.js
   let tip;
   cy.on('mouseover', 'node', function(event) {