From adce285b0fa16b5a137fe614fee3b134161d8639 Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Fri, 3 Feb 2023 21:29:02 +0100
Subject: [PATCH] Trying new styles for ways

---
 src/components/gpx/styles.ts | 171 +++++++++++++++++++++++++++--------
 1 file changed, 135 insertions(+), 36 deletions(-)

diff --git a/src/components/gpx/styles.ts b/src/components/gpx/styles.ts
index b065ab9..e33644a 100644
--- a/src/components/gpx/styles.ts
+++ b/src/components/gpx/styles.ts
@@ -269,31 +269,124 @@ const styles = {
       return new Style({ stroke: isSelected ? rteStrokeSel : rteStroke });
     }, memoizeOptions),
   },
-   way: {
+  way: {
     strokes: {
-      iwn: new Stroke({
-        color: [174, 33, 219, 0.8],
-        width: 3,
-      }),
-      nwn: new Stroke({
-        color: [174, 33, 219, 0.8],
-        width: 3,
-      }),
-      rwn: new Stroke({
-        color: [174, 33, 219, 0.8],
-        width: 2,
-        lineDash: [10, 10],
-      }),
-      lwn: new Stroke({
-        color: [174, 33, 219, 0.8],
-        width: 2,
-        lineDash: [10, 10],
-      }),
-      default: new Stroke({
-        color: [174, 33, 219, 0.8],
-        width: 1,
-        lineDash: [10, 10],
-      }),
+      lowZoom: {
+        iwn: [
+          new Style({
+            stroke: new Stroke({
+              color: [255, 0, 0, 0.8],
+              width: 3,
+            }),
+          }),
+        ],
+        nwn: [
+          new Style({
+            stroke: new Stroke({
+              color: [255, 0, 0, 0.8],
+              width: 3,
+            }),
+          }),
+        ],
+        rwn: [
+          new Style({
+            stroke: new Stroke({
+              color: [255, 128, 0, 0.8],
+              width: 3,
+            }),
+          }),
+        ],
+        lwn: [
+          new Style({
+            stroke: new Stroke({
+              color: [255, 255, 0, 0.8],
+              width: 3,
+            }),
+          }),
+        ],
+        default: [
+          new Style({
+            stroke: new Stroke({
+              color: [255, 255, 0, 0.8],
+              width: 3,
+              lineDash: [10, 10],
+            }),
+          }),
+        ],
+      },
+      highZoom: {
+        iwn: [
+          new Style({
+            stroke: new Stroke({
+              color: [255, 0, 0, 0.8],
+              width: 3,
+              lineDash: [10, 10],
+              lineDashOffset: 10,
+            }),
+          }),
+          new Style({
+            stroke: new Stroke({
+              color: [255, 255, 255, 0.8],
+              width: 3,
+              lineDash: [10, 10],
+              lineDashOffset: 0,
+            }),
+          }),
+        ],
+        nwn: [
+          new Style({
+            stroke: new Stroke({
+              color: [255, 0, 0, 0.8],
+              width: 3,
+              lineDash: [10, 10],
+              lineDashOffset: 10,
+            }),
+          }),
+          new Style({
+            stroke: new Stroke({
+              color: [255, 255, 255, 0.8],
+              width: 3,
+              lineDash: [10, 10],
+              lineDashOffset: 0,
+            }),
+          }),
+        ],
+        rwn: [
+          new Style({
+            stroke: new Stroke({
+              color: [255, 0, 0, 0.8],
+              width: 3,
+              lineDash: [10, 10],
+              lineDashOffset: 10,
+            }),
+          }),
+          new Style({
+            stroke: new Stroke({
+              color: [255, 255, 0, 0.8],
+              width: 3,
+              lineDash: [10, 10],
+              lineDashOffset: 0,
+            }),
+          }),
+        ],
+        lwn: [
+          new Style({
+            stroke: new Stroke({
+              color: [255, 255, 0, 0.8],
+              width: 3,
+            }),
+          }),
+        ],
+        default: [
+          new Style({
+            stroke: new Stroke({
+              color: [225, 220, 94, 0.8],
+              width: 3,
+              lineDash: [10, 10],
+            }),
+          }),
+        ],
+      },
     },
     getParameters: (feature: Feature) => {
       // let tags = feature.get('tags');
@@ -322,23 +415,29 @@ const styles = {
         //        isSelected: feature.get('isSelected') ?? false,
         name: feature.get('name'),
         network,
+        zoom: getZoomInteger() >= 12 ? 'highZoom' : 'lowZoom',
       };
     },
     getStyle: memoize((params: any) => {
-      //      console.log({ caller: 'getStyle', params });
-      const { isSelected, name, network } = params;
-      return new Style({
-        stroke: styles.way.strokes[network] || styles.way.strokes.default,
-        text: new Text({
-          text: name,
-          font: 'bold 14px "Open Sans", "Arial Unicode MS", "sans-serif"',
-          placement: 'line',
-          padding: [2, 2, 2, 2],
-          fill: new Fill({
-            color: 'black',
+      //     console.log({ caller: 'getStyle', params });
+      const { name, network, zoom } = params;
+      return [
+        ...(styles.way.strokes[zoom][network] ??
+          styles.way.strokes[zoom].default),
+        new Style({
+          text: new Text({
+            text: name,
+            font: 'bold 14px "Open Sans", "Arial Unicode MS", "sans-serif"',
+            placement: 'line',
+            overflow: false,
+            textBaseline: ['iwn', 'nwn'].includes(network) ? 'top' : 'bottom',
+            padding: [2, 2, 2, 2],
+            fill: new Fill({
+              color: 'black',
+            }),
           }),
         }),
-      });
+      ];
     }, memoizeOptions),
   },
   poi: {