Highlighted color should be uniform and with some glowing effects while selecting multiple fibers

data/styledata.json

@@ -7,7 +7,7 @@
   },
   "options": {
     "physics": false,
-
+    
     "interaction": {
       "navigationButtons": true,
       "keyboard": false,
@@ -238,6 +238,13 @@
     "fiber_category": "Dual Fiber",
     "width": 2,
     "options": {
+      "shadow": {
+        "enabled": true,
+        "color": "orange",
+        "size": 2,
+        "x": 2,
+        "y": 2
+      },
       "color": {
         "color": "blue",
         "highlight": "blue",
@@ -281,6 +288,13 @@
     "fiber_category": "Single Fiber",
     "width": 2,
     "options": {
+      "shadow": {
+        "enabled": true,
+        "color": "orange",
+        "size": 2,
+        "x": 2,
+        "y": 2
+      },
       "w_color": {
         "color": "gray",
         "highlight": "gray",
@@ -353,6 +367,13 @@
     "component_type": "Service",
     "width": 2,
     "options": {
+      "shadow": {
+        "enabled": true,
+        "color": "orange",
+        "size": 2,
+        "x": 2,
+        "y": 2
+      },
       "color": {
         "color": "red",
         "highlight": "red",
@@ -398,6 +419,13 @@
     "patch_category": "Single Patch",
     "width": 2,
     "options": {
+      "shadow": {
+        "enabled": true,
+        "color": "orange",
+        "size": 2,
+        "x": 2,
+        "y": 2
+      },
       "color": {
         "color": "black",
         "highlight": "black",
@@ -442,6 +470,13 @@
     "patch_category": "Dual Patch",
     "width": 2,
     "options": {
+      "shadow": {
+        "enabled": true,
+        "color": "orange",
+        "size": 2,
+        "x": 2,
+        "y": 2
+      },
       "color": {
         "color": "black",
         "highlight": "black",

js/networkgraph/fiber.js

@@ -276,7 +276,7 @@ function addFiberComponent(cmode, cfrom, cto, clabel, ctext, isImport) {
                 smooth: fiberSmooth,
                 fiber_type: fiber_Type, span_length: span_Length,
                 loss_coefficient: loss_Coefficient, connector_in: connector_IN, connector_out: connector_OUT,
-                span_loss: span_Loss,
+                span_loss: span_Loss
             });
 
             realUpdate();
@@ -865,7 +865,7 @@ function updateSingleFiber(fiberID) {
             if (fiberID.length > 1) {
 
                 for (var i = 0; i < fiberID.length; i++) {
-                    if (network.body.data.edges.get(fiberID[i].id).color == singleFiberJSON.options.h_color || network.body.data.edges.get(fiberID[i].id).color == singleFiberJSON.options.fh_color) {
+                    if (network.body.data.edges.get(fiberID[i].id).shadow == singleFiberJSON.options.shadow) {
 
                         var fiber = network.body.data.edges.get(fiberID[i].id);
                         preUpdateList.push(fiber);
@@ -940,12 +940,12 @@ function clearSingleFiber() {
 function deleteFiber(fiberList) {
 
     removeEdgeList = [];
-    var h_color;
+    var shadow;
     for (var i = 0; i < fiberList.length; i++) {
         if (fiberList.length > 1) {
-            h_color = network.body.data.edges.get(fiberList[i].id).color;
+            shadow = network.body.data.edges.get(fiberList[i].id).shadow;
 
-            if (h_color == singleFiberJSON.options.h_color || h_color == singleFiberJSON.options.fh_color)
+            if (shadow == singleFiberJSON.options.shadow)
                 removeFiber(fiberList[i].id, true);
 
         }

js/networkgraph/mynetwork.js

@@ -1058,27 +1058,22 @@ function draw(isImport) {
                 }
             }
             if (params.event.srcEvent.ctrlKey) {
-                var color;
+                var shadow;
                 if (edgeDetails.component_type == singleFiberJSON.component_type) {
-                    if (edgeDetails.color == singleFiberJSON.options.h_color || edgeDetails.color == singleFiberJSON.options.fh_color) {
+                    var highlight = false;
-                        color = edgeDetails.h_color;
+                    if (edgeDetails.shadow == singleFiberJSON.options.shadow) {
+                        shadow = [];
                     }
                     else {
-                        if (edgeDetails.color == singleFiberJSON.options.w_color)
+                        shadow = singleFiberJSON.options.shadow;
-                            color = singleFiberJSON.options.h_color;
+                        highlight = true;
-                        else if (edgeDetails.color == singleFiberJSON.options.color)
-                            color = singleFiberJSON.options.fh_color;
                     }
-                }
-                if (color) {
-                    var highlight = true;
-                    if (color == singleFiberJSON.options.color || color == singleFiberJSON.options.w_color)
-                        highlight = false;
 
                     network.body.data.edges.update({
-                        id: edgeDetails.id, color: color, h_color: edgeDetails.color, is_highlight: highlight
+                        id: edgeDetails.id, shadow: shadow, is_highlight: highlight
                     });
                 }
+                
             }
         }
     });
@@ -3418,7 +3413,7 @@ function remove_NodeFiberHighlight() {
     });
     for (var i = 0; i < hEdges.length; i++) {
         network.body.data.edges.update({
-            id: hEdges[i].id, color: hEdges[i].h_color, h_color: hEdges[i].color, is_highlight: false
+            id: hEdges[i].id, shadow: [], is_highlight: false
         });
     }
 }