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

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.3-b.1``
+* ``npm install @abi-software/flatmap-viewer@2.3.3-b.2``
 
 Documentation
 -------------

package/package.json

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

package/src/controls/info.js

@@ -194,8 +194,8 @@ export class InfoControl
             const featureIds = [];
             const displayFeatures = [];
             for (const feat of featureList) {
-                if (featureIds.indexOf(feat['id']) < 0) {
-                    featureIds.push(feat['id']);
+                if (featureIds.indexOf(feat.id) < 0) {
+                    featureIds.push(feat.id);
                     const displayFeat = {};
                     displayProperties.forEach(prop => {
                         if (prop === 'properties') {

package/src/flatmap-viewer.js

@@ -77,6 +77,7 @@ class FlatMap
         this.__datasetToFeatureIds = new Map();
         this.__modelToFeatureIds = new Map();
         this.__mapSourceToFeatureIds = new Map();
+
         for (const [featureId, annotation] of Object.entries(mapDescription.annotations)) {
             this.__addAnnotation(featureId, annotation);
             this.__searchIndex.indexMetadata(featureId, annotation);
@@ -176,7 +177,7 @@ class FlatMap
         this._initialState = null;
         this._minimap = null;
 
-        this._map.on('idle', () => {
+        this._map.on('load', () => {
             if (this._userInteractions === null) {
                 this.setupUserInteractions_();
             } else if (this._initialState === null) {

package/src/interactions.js

@@ -655,10 +655,11 @@ export class UserInteractions
                 this._currentPopup.remove();
             }
 
-            // Highlight the feature
-
-            this.unselectFeatures();
-            this.selectFeature(featureId);
+            if (!(options && options.preserveSelection)) {
+                // Highlight the feature
+                this.unselectFeatures();
+                this.selectFeature(featureId);
+            }
 
             // Find the pop-up's postion
 
@@ -831,7 +832,7 @@ export class UserInteractions
         let info = '';
         let tooltip = '';
         if (displayInfo) {
-            if (!'tooltip' in features[0].properties) {
+            if (!('tooltip' in features[0].properties)) {
                 this.__activateFeature(features[0]);
             }
             info = this._infoControl.featureInformation(features, event.lngLat);
@@ -855,8 +856,7 @@ export class UserInteractions
             }
         } else {
             let labelledFeatures = features.filter(feature => (('hyperlink' in feature.properties
-                                                             || 'label' in feature.properties
-                                                             || 'node' in feature.properties)
+                                                             || 'label' in feature.properties)
                                                          && (!('tooltip' in feature.properties)
                                                             || feature.properties.tooltip)))
                                            .sort((a, b) => (a.properties.area - b.properties.area));
@@ -896,7 +896,9 @@ export class UserInteractions
                         //htmlList.push(`<span class="info-name">Scale:</span>`);
                         //htmlList.push(`<span class="info-value">${feature.properties.scale}</span>`);
                     }
-                    info = `<div id="info-control-info">${htmlList.join('\n')}</div>`;
+                    if (!this._flatmap.options.debug) {
+                        info = `<div id="info-control-info">${htmlList.join('\n')}</div>`;
+                    }
                 }
                 this.__activateFeature(feature);
                 this.__activateRelatedFeatures(feature);
@@ -906,7 +908,7 @@ export class UserInteractions
             }
         }
 
-        if (displayInfo || this._flatmap.options.debug) {
+        if (info !== '') {
             this._infoControl.show(info);
         }
         this.__showToolTip(tooltip, event.lngLat, tooltipFeature);
@@ -1186,6 +1188,9 @@ export class UserInteractions
                 this.__markerIdByMarker.set(marker, markerId);
                 this.__markerIdByFeatureId.set(+featureId, markerId);
                 this.__annotationByMarkerId.set(markerId, annotation);
+                if (!this.__featureEnabled(this.mapFeature(+featureId))) {
+                    markerElement.style.visibility = 'hidden';
+                }
             }
         }
         if (markerId === -1) {

package/src/layers.js

@@ -123,7 +123,6 @@ class MapFeatureLayers extends MapStylingLayers
                 this.__addStyleLayer(style.FeatureLineLayer);
                 this.__addStyleLayer(style.FeatureBorderLayer);
                 this.__addStyleLayer(style.CentrelineNodeFillLayer);
-                this.__addStyleLayer(style.CentrelineNodeBorderLayer);
             }
             this.__addPathwayStyleLayers();
             if (vectorFeatures) {

package/src/styling.js

@@ -35,7 +35,7 @@ const COLOUR_ANNOTATED = '#0F0';
 const COLOUR_SELECTED  = '#0F0';
 const COLOUR_HIDDEN    = '#D8D8D8';
 
-const CENTRELINE_ACTIVE = '#444';
+const CENTRELINE_ACTIVE = '#888';
 const CENTRELINE_COLOUR = '#CCC';
 
 const FEATURE_SELECTED_BORDER = 'black';
@@ -161,7 +161,7 @@ export class FeatureFillLayer extends VectorStyleLayer
             'fill-opacity': [
                 'case',
                 ['boolean', ['feature-state', 'hidden'], false], 0.1,
-                ['boolean', ['feature-state', 'selected'], false], 0.7,
+                ['boolean', ['feature-state', 'selected'], false], 0.5,
                 ['has', 'opacity'], ['get', 'opacity'],
                 ['has', 'colour'], 1.0,
                 ['boolean', ['feature-state', 'active'], false], 0.7,
@@ -502,13 +502,17 @@ export class PathLineLayer extends VectorStyleLayer
         const exclude = 'excludeAnnotated' in options && options.excludeAnnotated;
         const paintStyle = {
             'line-color': [
-                'case',
-                ['boolean', ['feature-state', 'selected'], false], COLOUR_SELECTED,
-                ['boolean', ['feature-state', 'hidden'], false], COLOUR_HIDDEN,
-                ['==', ['get', 'type'], 'bezier'], 'red',
-                ['==', ['get', 'kind'], 'unknown'], '#888',
-                ...PATH_STYLE_RULES,
-                '#888'
+                'let', 'active', ['to-number', ['feature-state', 'active'], 0],
+                [ 'case',
+                    ['all',
+                        ['==', ['var', 'active'], 0],
+                        ['boolean', ['feature-state', 'selected'], false],
+                    ], COLOUR_SELECTED,
+                    ['boolean', ['feature-state', 'hidden'], false], COLOUR_HIDDEN,
+                    ['==', ['get', 'type'], 'bezier'], 'red',
+                    ...PATH_STYLE_RULES,
+                    '#888'
+                ]
             ],
             'line-opacity': this.__highlight ? [
                 'case',
@@ -625,7 +629,7 @@ class CentrelineLayer extends VectorStyleLayer
                     ['boolean', ['feature-state', 'hidden'], false], 0.01,
                     ['boolean', ['feature-state', 'selected'], false], 1.0,
                     ['boolean', ['feature-state', 'active'], false], 1.0,
-                0.8
+                (this.__type == 'edge') ? 0.4 : 0.8
             ],
             'line-width': [
                 'let',
@@ -651,7 +655,7 @@ class CentrelineLayer extends VectorStyleLayer
             ],
             'paint': this.paintStyle(options),
             'layout': {
-                'line-cap': 'square',
+                'line-cap': 'round',
                 'line-join': 'bevel'
             }
         };
@@ -691,8 +695,13 @@ export class CentrelineNodeFillLayer extends VectorStyleLayer
     {
         const showNodes = options.showCentrelines || false;
         const paintStyle = {
-                'fill-color': '#AFA202',
-                'fill-opacity': showNodes ? 0.7 : 0.01
+                'fill-color': [
+                    'case',
+                    ['boolean', ['feature-state', 'selected'], false], COLOUR_SELECTED,
+                    ['boolean', ['feature-state', 'active'], false], CENTRELINE_ACTIVE,
+                    CENTRELINE_COLOUR
+                ],
+                'fill-opacity': showNodes ? 0.8 : 0.01
             }
         return super.changedPaintStyle(paintStyle, changes);
     }
@@ -726,9 +735,14 @@ export class CentrelineNodeBorderLayer extends VectorStyleLayer
     {
         const showNodes = options.showCentrelines || false;
         const paintStyle = {
-                'line-color': '#AFA202',
-                'line-opacity': showNodes ? 0.7 : 0.01,
-                'line-width': 0.5
+                'line-color': '#000',
+                'line-opacity': showNodes ? 0.1 : 0.01,
+                'line-width': [
+                    'let',
+                    'width',
+                        0.2,
+                        STROKE_INTERPOLATION
+                ]
             }
         return super.changedPaintStyle(paintStyle, changes);
     }
@@ -772,8 +786,8 @@ export class FeatureNerveLayer extends VectorStyleLayer
                 'line-color': [
                     'case',
                     ['boolean', ['feature-state', 'hidden'], false], COLOUR_HIDDEN,
-                    ['boolean', ['feature-state', 'active'], false], NERVE_ACTIVE,
                     ['boolean', ['feature-state', 'selected'], false], NERVE_SELECTED,
+                    ['boolean', ['feature-state', 'active'], false], NERVE_ACTIVE,
                     '#888'
                 ],
                 'line-opacity': [
@@ -855,7 +869,41 @@ export class NervePolygonFill extends VectorStyleLayer
         super(id, 'nerve-fill', sourceLayer);
     }
 
-    style(options)
+    paintStyle(options={}, changes=false)
+    {
+        const dimmed = 'dimmed' in options && options.dimmed;
+        const paintStyle = {
+            'fill-color': [
+                'let', 'active', ['to-number', ['feature-state', 'active'], 0],
+                [ 'case',
+                    ['all',
+                        ['==', ['var', 'active'], 0],
+                        ['==', ['get', 'type'], 'arrow'],
+                        ['boolean', ['feature-state', 'selected'], false]
+                    ], COLOUR_SELECTED,
+                    ['==', ['get', 'kind'], 'bezier-end'], 'red',
+                    ['==', ['get', 'kind'], 'bezier-control'], 'green',
+                    ...PATH_STYLE_RULES,
+                    'white'
+                ]
+            ],
+            'fill-opacity': [
+                'case',
+                ['boolean', ['feature-state', 'hidden'], false], 0.01,
+                ['boolean', ['feature-state', 'selected'], false], 0.8,
+                ['boolean', ['feature-state', 'active'], false], 0.9,
+                ['==', ['get', 'type'], 'bezier'], 0.9,
+                ['any',
+                    ['==', ['get', 'type'], 'arrow'],
+                    ['==', ['get', 'type'], 'junction']
+                ], dimmed ? 0.1 : 0.5,
+                0.01
+            ]
+        };
+        return super.changedPaintStyle(paintStyle, changes);
+    }
+
+    style(options={})
     {
         return {
             ...super.style(),
@@ -864,27 +912,14 @@ export class NervePolygonFill extends VectorStyleLayer
                 'all',
                 ['==', '$type', 'Polygon'],
                 ['any',
+                    ['==', 'type', 'arrow'],
                     ['==', 'type', 'bezier'],
                     ['==', 'type', 'junction'],
                     ['==', 'type', 'nerve'],
                     ['==', 'type', 'nerve-section']
                 ]
             ],
-            'paint': {
-                'fill-color': [
-                    'case',
-                    ['==', ['get', 'kind'], 'bezier-end'], 'red',
-                    ['==', ['get', 'kind'], 'bezier-control'], 'green',
-                    ...PATH_STYLE_RULES,
-                    'white'
-                ],
-                'fill-opacity': [
-                    'case',
-                    ['==', ['get', 'type'], 'bezier'], 0.9,
-                    ['==', ['get', 'type'], 'junction'], 0.4,
-                    0.01
-                ]
-            }
+            'paint': this.paintStyle(options)
         };
     }
 }