@abi-software/flatmap-viewer 2.2.1-beta.6 → 2.2.1-beta.8

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.2.1-beta.6``
+* ``npm install @abi-software/flatmap-viewer@2.2.1-beta.8``
 
 Documentation
 -------------

package/package.json

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

package/src/flatmap-viewer.js

@@ -1191,6 +1191,12 @@ export class MapManager
                     mapOptions['pathControls'] = true;
                 }
 
+                // Mapmaker's changed the name of the field to indicate that indicates if
+                // there are raster layers
+                if (!('image-layers' in mapIndex) && ('image_layer' in mapIndex)) {
+                    mapIndex['image-layers'] = mapIndex['image_layer'];
+                }
+
                 // Get details about the map's layers
 
                 let mapLayers = [];

package/src/interactions.js

@@ -177,7 +177,7 @@ export class UserInteractions
         // Display a context menu on right-click
 
         this._lastContextTime = 0;
-        this._contextMenu = new ContextMenu(flatmap, this.clearModal_.bind(this));
+        this._contextMenu = new ContextMenu(flatmap, this.__clearModal.bind(this));
         this._map.on('contextmenu', this.contextMenuEvent_.bind(this));
 
         // Display a context menu with a touch longer than 0.5 second
@@ -304,8 +304,8 @@ export class UserInteractions
         }
     }
 
-    unselectFeatures_()
-    //=================
+    __unselectFeatures()
+    //==================
     {
         for (const featureId of this._selectedFeatureIds.keys()) {
             const feature = this.mapFeature_(featureId);
@@ -421,8 +421,8 @@ export class UserInteractions
         this._modal = true;
     }
 
-    clearModal_(event)
-    //================
+    __clearModal(event)
+    //=================
     {
         this._modal = false;
     }
@@ -433,7 +433,7 @@ export class UserInteractions
         this._contextMenu.hide();
         const nodeId = event.target.getAttribute('featureId');
         this.enablePathFeatures_(enable, this._pathways.pathFeatureIds(nodeId));
-        this.clearModal_();
+        this.__clearModal();
     }
 
     enablePathFeatures_(enable, featureIds)
@@ -464,9 +464,9 @@ export class UserInteractions
     reset()
     //=====
     {
-        this.clearModal_();
+        this.__clearModal();
         this.clearActiveMarker_();
-        this.unselectFeatures_();
+        this.__unselectFeatures();
         this.enablePathFeatures_(true, this._pathways.allFeatureIds());
         this._disabledPathFeatures = false;
     }
@@ -474,7 +474,7 @@ export class UserInteractions
     clearSearchResults(reset=true)
     //============================
     {
-        this.unselectFeatures_();
+        this.__unselectFeatures();
     }
 
     /**
@@ -510,7 +510,7 @@ export class UserInteractions
     //========================
     {
         if (featureIds.length) {
-            this.unselectFeatures_();
+            this.__unselectFeatures();
             for (const featureId of featureIds) {
                 const annotation = this._flatmap.annotation(featureId);
                 if (annotation) {
@@ -543,7 +543,7 @@ export class UserInteractions
         const padding = options.padding || 100;
         if (featureIds.length) {
             this.unhighlightFeatures_();
-            if (select) this.unselectFeatures_();
+            if (select) this.__unselectFeatures();
             let bbox = null;
             for (const featureId of featureIds) {
                 const annotation = this._flatmap.annotation(featureId);
@@ -590,7 +590,7 @@ export class UserInteractions
 
             // Highlight the feature
 
-            this.unselectFeatures_();
+            this.__unselectFeatures();
             this.selectFeature_(featureId);
 
             // Find the pop-up's postion
@@ -612,7 +612,7 @@ export class UserInteractions
             }
             this.setModal_();
             this._currentPopup = new maplibre.Popup(options).addTo(this._map);
-            this._currentPopup.on('close', this.clearModal_.bind(this));
+            this._currentPopup.on('close', this.__clearPopup.bind(this));
             this._currentPopup.setLngLat(location);
             if (typeof content === 'object') {
                 this._currentPopup.setDOMContent(content);
@@ -622,6 +622,13 @@ export class UserInteractions
         }
     }
 
+    __clearPopup()
+    //============
+    {
+        this.__clearModal();
+        this.__unselectFeatures();
+    }
+
     removeTooltip_()
     //==============
     {
@@ -648,7 +655,7 @@ export class UserInteractions
         if (tooltips.length === 0) {
             return '';
         }
-        return tooltips.join('<hr/>');
+        return `<div class='flatmap-feature-label'>${tooltips.join('<hr/>')}</div>`;
     }
 
     tooltipHtml_(properties, forceLabel=false)
@@ -684,36 +691,37 @@ export class UserInteractions
         return false;
     }
 
-    mouseMoveEvent_(event)
-    //====================
+    __resetFeatureDisplay()
+    //=====================
     {
-        // No tooltip when context menu is open
-
-        if (this._modal) {
-            return;
-        }
-
         // Remove any existing tooltip
-
         this.removeTooltip_();
 
         // Reset cursor
-
         this._map.getCanvas().style.cursor = 'default';
 
         // Reset any active features
-
         this.resetActiveFeatures_();
+    }
 
-        // Reset any info display
+    mouseMoveEvent_(event)
+    //====================
+    {
+        // No tooltip when context menu is open
+        if (this._modal) {
+            return;
+        }
+
+        // Remove tooltip, reset active features, etc
+        this.__resetFeatureDisplay();
 
+        // Reset any info display
         const displayInfo = (this._infoControl && this._infoControl.active);
         if (displayInfo) {
             this._infoControl.reset()
         }
 
         // Get all the features at the current point
-
         const features = this._map.queryRenderedFeatures(event.point);
         if (features.length === 0) {
             this._lastFeatureMouseEntered = null;
@@ -847,7 +855,7 @@ export class UserInteractions
     {
         const multipleSelect = event.ctrlKey || event.metaKey;
         if (!multipleSelect) {
-            this.unselectFeatures_();
+            this.__unselectFeatures();
         }
         if (feature !== undefined) {
             const featureId = feature.id;
@@ -880,7 +888,12 @@ export class UserInteractions
         this.clearActiveMarker_();
         const feature = this._activeFeatures[0]
         this.selectionEvent_(event.originalEvent, feature);
-        if (feature !== undefined) {
+        if (this._modal) {
+           // Remove tooltip, reset active features, etc
+            this.__resetFeatureDisplay();
+            this.__unselectFeatures();
+            this.__clearModal();
+        } else if (feature !== undefined) {
             this.__lastClickLngLat = event.lngLat;
             this.__featureEvent('click', feature);
             if ('hyperlink' in feature.properties) {

package/src/layers.js

@@ -53,7 +53,7 @@ class MapFeatureLayer
             if (vectorFeatures) {
                 this.__addStyleLayer(style.BodyLayer, layerOptions);
             }
-            if (flatmap.details['image_layer']) {
+            if (flatmap.details['image-layers']) {
                 for (const raster_layer_id of layer['image-layers']) {
                     this.__addRasterLayer(raster_layer_id, layerOptions);
                 }
@@ -164,7 +164,7 @@ export class LayerManager
             this.__map.addLayer(backgroundLayer.style('white'));
         }
         // Add the map's layers
-        if (fcDiagram && flatmap.details['image_layer']) {
+        if (fcDiagram && flatmap.details['image-layers']) {
             for (const layer of flatmap.layers) {
                 for (const raster_layer_id of layer['image-layers']) {
                     const rasterLayer = new style.RasterLayer(raster_layer_id);

package/src/styling.js

@@ -239,7 +239,7 @@ export class FeatureLineLayer extends VectorStyleLayer
     constructor(id, sourceLayer, dashed=false)
     {
         const filterType = dashed ? 'line-dash' : 'line';
-        super(id, `divider-${filterType}`, sourceLayer);
+        super(id, `feature-${filterType}`, sourceLayer);
         this.__filter = dashed ?
             [
                 'any',
@@ -248,6 +248,7 @@ export class FeatureLineLayer extends VectorStyleLayer
         :
             [
                 'any',
+                ['has', 'centreline'],
                 ['==', 'type', 'bezier'],
                 ['==', 'type', `line`]
             ];
@@ -333,7 +334,7 @@ export class PathLineLayer extends VectorStyleLayer
     constructor(id, sourceLayer, dashed=false)
     {
         const filterType = dashed ? 'line-dash' : 'line';
-        super(id, filterType, sourceLayer);
+        super(id, `path-${filterType}`, sourceLayer);
         this.__filter = dashed ?
             [
                 'any',