@abi-software/flatmap-viewer 2.3.2-b.4 → 2.3.3-b.1

package/README.rst

@@ -38,7 +38,7 @@ The map server endpoint is specified as ``MAP_ENDPOINT`` in ``src/main.js``. It
 Package Installation
 ====================
 
-* ``npm install @abi-software/flatmap-viewer@2.3.2-b.4``
+* ``npm install @abi-software/flatmap-viewer@2.3.3-b.1``
 
 Documentation
 -------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.3.2-b.4",
+  "version": "2.3.3-b.1",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",

package/src/annotation.js

@@ -475,6 +475,8 @@ export class Annotator
             let label = '';
             if (feature.properties.models) {
                 label = ` -- ${feature.properties.label.split('\n')[0]} (${feature.properties.models})`;
+            } else if (feature.properties.label) {
+                label = ` -- ${feature.properties.label.split('\n')[0]}`;
             }
             featureList.push(`<option value="${feature.id}" ${selected}>${annotated ? '*' : '&nbsp;'} ${feature.properties.id} -- ${feature.properties.kind}${label}</option>`);
             featureProperties.set(+feature.id, feature.properties);

package/src/controls/controls.js

@@ -526,6 +526,73 @@ export class NerveControl
 
 //==============================================================================
 
+export class AnnotatedControl
+{
+    constructor(ui, options={excludeAnnotated: false})
+    {
+        this.__ui = ui;
+        this.__map = undefined;
+        this.__exclude = options.excludeAnnotated || false;
+    }
+
+    getDefaultPosition()
+    //==================
+    {
+        return 'top-right';
+    }
+
+    onAdd(map)
+    //========
+    {
+        this.__map = map;
+        this.__container = document.createElement('div');
+        this.__container.className = 'maplibregl-ctrl';
+
+        this.__button = document.createElement('button');
+        this.__button.id = 'map-annotated-button';
+        this.__button.className = 'control-button text-button';
+        this.__button.setAttribute('type', 'button');
+        this.__button.setAttribute('aria-label', 'Show/hide annotated paths');
+        this.__button.textContent = 'UNANN';
+        this.__button.title = 'Show/hide annotated paths';
+        this.__container.appendChild(this.__button);
+
+        this.__container.addEventListener('click', this.onClick_.bind(this));
+        this.__setBackground();
+        return this.__container;
+    }
+
+    __setBackground()
+    //===============
+    {
+        if (this.__exclude) {
+            this.__button.setAttribute('style', 'background: red');
+        } else {
+            this.__button.removeAttribute('style');
+        }
+    }
+
+    onRemove()
+    //========
+    {
+        this.__container.parentNode.removeChild(this.__container);
+        this.__map = undefined;
+    }
+
+    onClick_(event)
+    //=============
+    {
+        if (event.target.id === 'map-annotated-button') {
+            this.__exclude = !this.__exclude;
+            this.__setBackground();
+            this.__ui.excludeAnnotated(this.__exclude);
+        }
+        event.stopPropagation();
+    }
+}
+
+//==============================================================================
+
 export class BackgroundControl
 {
     constructor(flatmap)

package/src/interactions.js

@@ -40,7 +40,7 @@ import {VECTOR_TILES_SOURCE} from './styling';
 import {SystemsManager} from './systems';
 
 import {displayedProperties, InfoControl} from './controls/info';
-import {BackgroundControl, LayerControl, NerveControl,
+import {AnnotatedControl, BackgroundControl, LayerControl, NerveControl,
         SCKANControl} from './controls/controls';
 import {PathControl} from './controls/paths';
 import {SearchControl} from './controls/search';
@@ -189,6 +189,7 @@ export class UserInteractions
             if (flatmap.options.style === 'functional') {
                 this._map.addControl(new SystemsControl(flatmap, this.__systemsManager.systems));
                 this._map.addControl(new SCKANControl(flatmap, flatmap.options.layerOptions));
+                this._map.addControl(new AnnotatedControl(this, flatmap.options.layerOptions));
             }
         }
 
@@ -1096,6 +1097,12 @@ export class UserInteractions
         this._layerManager.enableSckanPaths(sckanState, enable);
     }
 
+    excludeAnnotated(exclude=false)
+    //=============================
+    {
+        this._layerManager.setPaint({excludeAnnotated: exclude});
+    }
+
     //==============================================================================
 
     // Marker handling

package/src/styling.js

@@ -418,23 +418,24 @@ export class AnnotatedPathLayer extends VectorStyleLayer
 
     paintStyle(options={}, changes=false)
     {
-        const dimmed = 'dimmed' in options && options.dimmed;
+        const exclude = 'excludeAnnotated' in options && options.excludeAnnotated;
         const paintStyle = {
             'line-color': COLOUR_ANNOTATED,
             'line-dasharray': [5, 0.5, 3, 0.5],
             'line-opacity': [
                 'case',
                     ['boolean', ['feature-state', 'hidden'], false], 0.05,
-                        ['boolean', ['feature-state', 'annotated'], false],
-                        (dimmed ? 0.1 : 0.8),
+                    ['boolean', ['feature-state', 'annotated'], false],
+                        (exclude ? 0.05 : 0.8),
                     0.6
                 ],
             'line-width': [
                 'let',
                 'width',
                     ['case',
+                    ['boolean', ['feature-state', 'hidden'], false], 0.0,
                     ['boolean', ['feature-state', 'annotated'], false],
-                        ['*', 1.2, ['case', ['has', 'stroke-width'], ['get', 'stroke-width'], 1.0]],
+                        exclude ? 0.0 : (['*', 1.2, ['case', ['has', 'stroke-width'], ['get', 'stroke-width'], 1.0]]),
                         0.0
                     ],
                 STROKE_INTERPOLATION
@@ -498,6 +499,7 @@ export class PathLineLayer extends VectorStyleLayer
     paintStyle(options={}, changes=false)
     {
         const dimmed = 'dimmed' in options && options.dimmed;
+        const exclude = 'excludeAnnotated' in options && options.excludeAnnotated;
         const paintStyle = {
             'line-color': [
                 'case',
@@ -544,6 +546,7 @@ export class PathLineLayer extends VectorStyleLayer
                         ['boolean', ['feature-state', 'active'], false], 0.0,
                         0.6
                     ],
+                    ['case', ['boolean', ['feature-state', 'annotated'], false], (exclude ? 0.0 : 1.0), 1.0],
                     ['case', ['has', 'stroke-width'], ['get', 'stroke-width'], 1.0]
                 ],
                 STROKE_INTERPOLATION