Trying to improve trkseg styles

src/components/gpx/styles.ts

@@ -124,16 +124,6 @@ const textFillSel = new Fill({
   color: 'red',
 });
 
-const trksegStroke = new Stroke({
-  color: [11, 16, 71, 0.8],
-  width: 3,
-});
-
-const trksegStrokeSel = new Stroke({
-  color: 'red',
-  width: 3,
-});
-
 const rteStroke = new Stroke({
   color: [18, 71, 11, 0.8],
   width: 3,
@@ -222,12 +212,43 @@ const styles = {
         zoom: getZoomInteger() >= 7 ? Math.floor(getZoomInteger()) : undefined,
       };
     },
+    ownStyles: {
+      normal: [
+        new Style({
+          stroke: new Stroke({
+            color: [44, 64, 255, 0.8],
+            width: 2,
+          }),
+        }),
+        new Style({
+          stroke: new Stroke({
+            color: [44, 64, 255, 0.2],
+            width: 7,
+          }),
+        }),
+      ],
+
+      selected: [
+        new Style({
+          stroke: new Stroke({
+            color: [44, 64, 255, 0.8],
+            width: 2,
+          }),
+        }),
+        new Style({
+          stroke: new Stroke({
+            color: [255, 0, 0, 0.4],
+            width: 7,
+          }),
+        }),
+      ],
+    },
     getStyle: memoize((params: any) => {
       //      console.log({ caller: 'getStyle', params });
       const { isSelected, feature, zoom } = params;
-      const styles = [
+      let currentStyles: any = isSelected
-        new Style({ stroke: isSelected ? trksegStrokeSel : trksegStroke }),
+        ? styles.trkseg.ownStyles.selected
-      ];
+        : styles.trkseg.ownStyles.normal;
       if (feature) {
         const map = getMap();
         const geometry = feature.getGeometry();
@@ -247,7 +268,7 @@ const styles = {
             const dx = end[0] - start[0];
             const dy = end[1] - start[1];
             const rotation = Math.atan2(dy, dx) - Math.PI / 2;
-            styles.push(
+            currentStyles.push(
               new Style({
                 geometry: new Point(end),
                 image: new Icon({
@@ -264,7 +285,7 @@ const styles = {
           }
         });
       }
-      return styles;
+      return currentStyles;
     }, memoizeOptions),
   },
   'trkseg-finish': {