Merge pull request #71 from napakalas/issue-#68

Adjust nerve cuff behavior for active and selected states

Author: dbrnz

src/layers/styling.ts

@@ -70,16 +70,16 @@ export interface StylingOptions extends StyleLayerOptions
 
 const COLOUR_ACTIVE    = 'blue'
 const COLOUR_ANNOTATED = '#C8F'
-const COLOUR_SELECTED  = '#0F0'
+const COLOUR_SELECTED  = '#8EF35D'
 const COLOUR_HIDDEN    = '#D8D8D8'
 
 const CENTRELINE_ACTIVE = '#888'
 const CENTRELINE_COLOUR = '#8FF'
 
 const FEATURE_SELECTED_BORDER = 'black'
 
-const NERVE_ACTIVE = '#222'
-const NERVE_SELECTED = 'red'
+const NERVE_ACTIVE = 'blue'
+const NERVE_SELECTED = 'black'
 
 //==============================================================================
 
@@ -356,7 +356,7 @@ export class FeatureFillLayer extends VectorStyleLayer
             'fill-opacity': [
                 'case',
                 ['boolean', ['feature-state', 'hidden'], false], 0.01,
-                ['boolean', ['feature-state', 'selected'], false], 0.2,
+                ['boolean', ['feature-state', 'selected'], false], 1.0,
                 ['has', 'opacity'], ['get', 'opacity'],
                 ['has', 'colour'], 1.0,
                 ['==', ['get', 'kind'], 'proxy'], 1.0,
@@ -992,42 +992,42 @@ export class FeatureNerveLayer extends VectorStyleLayer
         ]
     }
 
+    paintStyle(options: StylingOptions, changes=false) {
+        const dimmed = options.dimmed || false
+        const paintStyle: PaintSpecification = {
+            'line-color': [
+                'case',
+                ['boolean', ['feature-state', 'hidden'], false], COLOUR_HIDDEN,
+                ['boolean', ['feature-state', 'active'], false], NERVE_ACTIVE,
+                ['boolean', ['feature-state', 'selected'], false], NERVE_SELECTED,
+                '#888'
+            ],
+            'line-opacity': [
+                'case',
+                ['boolean', ['feature-state', 'hidden'], false], 0.3,
+                ['boolean', ['get', 'invisible'], false], 0.001,
+                ['boolean', ['feature-state', 'active'], false], 0.9,
+                ['boolean', ['feature-state', 'selected'], false], 0.9,
+                dimmed ? 0.05 : 0.9
+            ],
+            'line-dasharray': [2, 2],
+            'line-width': [
+                'case',
+                ['boolean', ['feature-state', 'selected'], false], 1.5,
+                ['boolean', ['feature-state', 'active'], false], 1.5,
+                dimmed ? 0.2 : 1.5
+            ]
+        }
+        return super.changedPaintStyle(paintStyle, changes)
+    }
+
     style(layer: FlatMapLayer, options: StylingOptions): LineLayerSpecification
     {
         return {
             ...super.style(layer, options),
             'type': 'line',
             'filter': this.defaultFilter(),
-            'paint': {
-                'line-color': [
-                    'case',
-                    ['boolean', ['feature-state', 'hidden'], false], COLOUR_HIDDEN,
-                    ['boolean', ['feature-state', 'selected'], false], NERVE_SELECTED,
-                    ['boolean', ['feature-state', 'active'], false], NERVE_ACTIVE,
-                    '#888'
-                ],
-                'line-opacity': [
-                    'case',
-                    ['boolean', ['feature-state', 'hidden'], false], 0.3,
-                    ['boolean', ['get', 'invisible'], false], 0.001,
-                    ['boolean', ['feature-state', 'active'], false], 0.9,
-                    ['boolean', ['feature-state', 'selected'], false], 0.9,
-                    0.9
-                ],
-                'line-dasharray': [2, 1],
-                'line-width': [
-                    'let', 'width', ['case',
-                        ['boolean', ['feature-state', 'active'], false], 0.8,
-                        ['boolean', ['feature-state', 'selected'], false], 1.2,
-                        0.6],
-                    [ 'interpolate',
-                        ['exponential', 2],
-                        ['zoom'],
-                         2, ["*", ['var', 'width'], ["^", 2, -1]],
-                        10, ["*", ['var', 'width'], ["^", 2,  6]]
-                    ]
-                ]
-            }
+            'paint': this.paintStyle(options) as LinePaintSpecification
         }
     }
 }
@@ -1125,7 +1125,7 @@ export class NervePolygonFill extends VectorStyleLayer
             'fill-opacity': [
                 'case',
                 ['boolean', ['feature-state', 'hidden'], false], 0.01,
-                ['boolean', ['feature-state', 'selected'], false], 0.2,
+                ['boolean', ['feature-state', 'selected'], false], 1,
                 ['has', 'opacity'], ['get', 'opacity'],
                 ['has', 'colour'], 1.0,
                 ['==', ['get', 'kind'], 'proxy'], 1.0,
@@ -1137,7 +1137,7 @@ export class NervePolygonFill extends VectorStyleLayer
                     ['==', ['get', 'type'], 'arrow'],
                     ['==', ['get', 'type'], 'junction']
                 ], dimmed ? 0.1 : 0.5,
-                0.5
+                dimmed ? 0.2 : 0.5
             ]
         }
         return super.changedPaintStyle(paintStyle, changes)