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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.2.1-beta.3",
+  "version": "2.2.1-beta.6",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",
@@ -21,6 +21,7 @@
     "@turf/area": "^6.0.1",
     "@turf/bbox": "^6.0.1",
     "@turf/helpers": "^6.1.4",
+    "bezier-js": "^6.1.0",
     "maplibre-gl": ">=1.15.3",
     "minisearch": "^2.2.1",
     "polylabel": "^1.1.0"

package/src/interactions.js

@@ -631,15 +631,44 @@ export class UserInteractions
         }
     }
 
+    lineTooltip_(lineFeatures)
+    //========================
+    {
+        const tooltips = [];
+        for (const lineFeature of lineFeatures) {
+            const properties = lineFeature.properties;
+            if ('label' in properties
+               && (!('tooltip' in properties) || properties.tooltip)
+               && !('labelled' in properties)) {
+                let tooltip = '';
+                const label = properties.label;
+                tooltips.push((label.substr(0, 1).toUpperCase() + label.substr(1)).replaceAll("\n", "<br/>"));
+            }
+        }
+        if (tooltips.length === 0) {
+            return '';
+        }
+        return tooltips.join('<hr/>');
+    }
+
     tooltipHtml_(properties, forceLabel=false)
     //========================================
     {
-        if ('label' in properties
+        if (('label' in properties || 'hyperlink' in properties)
            && (forceLabel || !('tooltip' in properties) || properties.tooltip)
            && !('labelled' in properties)) {
-            const label = properties.label;
-            const capitalisedLabel = label.substr(0, 1).toUpperCase() + label.substr(1);
-            return `<div class='flatmap-feature-label'>${capitalisedLabel.replaceAll("\n", "<br/>")}</div>`;
+            let tooltip = '';
+            if ('label' in properties) {
+                const label = properties.label;
+                tooltip = (label.substr(0, 1).toUpperCase() + label.substr(1)).replaceAll("\n", "<br/>");
+            } else {
+                tooltip = properties.hyperlink
+            }
+            if ('hyperlink' in properties) {
+                return `<div class='flatmap-feature-label'><a href='{properties.hyperlink}'>${tooltip}</a></div>`;
+            } else {
+                return `<div class='flatmap-feature-label'>${tooltip}</div>`;
+            }
         }
         return '';
     }
@@ -722,18 +751,20 @@ export class UserInteractions
                                                      && feature.properties.type.startsWith('line'))
                                                        || 'centreline' in feature.properties));
         if (lineFeatures.length > 0) {
-            const lineFeature = lineFeatures[0];
-            const lineFeatureId = +lineFeature.properties.featureId;  // Ensure numeric
-            tooltip = this.tooltipHtml_(lineFeature.properties);
-            this.activateFeature_(lineFeature);
-            const lineIds = new Set(lineFeatures.map(f => f.properties.featureId));
-            for (const featureId of this._pathways.lineFeatureIds(lineIds)) {
-                if (+featureId !== lineFeatureId) {
-                    this.activateFeature_(this.mapFeature_(featureId));
+            tooltip = this.lineTooltip_(lineFeatures);
+            for (const lineFeature of lineFeatures) {
+                const lineFeatureId = +lineFeature.properties.featureId;  // Ensure numeric
+                this.activateFeature_(lineFeature);
+                const lineIds = new Set(lineFeatures.map(f => f.properties.featureId));
+                for (const featureId of this._pathways.lineFeatureIds(lineIds)) {
+                    if (+featureId !== lineFeatureId) {
+                        this.activateFeature_(this.mapFeature_(featureId));
+                    }
                 }
             }
         } else {
-            let labelledFeatures = features.filter(feature => (('label' in feature.properties
+            let labelledFeatures = features.filter(feature => (('hyperlink' in feature.properties
+                                                             || 'label' in feature.properties
                                                              || 'node' in feature.properties)
                                                          && (!('tooltip' in feature.properties)
                                                             || feature.properties.tooltip)))
@@ -781,6 +812,9 @@ export class UserInteractions
                         this.activateNerveFeatures_(feature.properties.nerveId);
                     }
                 }
+                if ('hyperlink' in feature.properties) {
+                    this._map.getCanvas().style.cursor = 'pointer';
+                }
             }
         }
 
@@ -849,6 +883,9 @@ export class UserInteractions
         if (feature !== undefined) {
             this.__lastClickLngLat = event.lngLat;
             this.__featureEvent('click', feature);
+            if ('hyperlink' in feature.properties) {
+                window.open(feature.properties.hyperlink, '_blank');
+            }
         }
     }
 

package/src/layers.js

@@ -152,15 +152,18 @@ export class LayerManager
         this.__activeLayers = [];
         this.__activeLayerNames = [];
         this.__rasterLayers = [];
+        const layerOptions = flatmap.options.layerOptions;
+        const fcDiagram = ('style' in layerOptions && layerOptions.style == 'fcdiagram');
         const backgroundLayer = new style.BackgroundLayer();
-        if ('background' in flatmap.options) {
+        if (fcDiagram) {
+            this.__map.addLayer(backgroundLayer.style('black', 1));
+        }
+        else if ('background' in flatmap.options) {
             this.__map.addLayer(backgroundLayer.style(flatmap.options.background));
         } else {
             this.__map.addLayer(backgroundLayer.style('white'));
         }
         // Add the map's layers
-        const layerOptions = flatmap.options.layerOptions;
-        const fcDiagram = ('style' in layerOptions && layerOptions.style == 'fcdiagram');
         if (fcDiagram && flatmap.details['image_layer']) {
             for (const layer of flatmap.layers) {
                 for (const raster_layer_id of layer['image-layers']) {

package/src/styling.js

@@ -117,9 +117,9 @@ export class FeatureFillLayer extends VectorStyleLayer
         const paintStyle = {
             'fill-color': [
                 'case',
+                ['boolean', ['feature-state', 'selected'], false], '#0F0',
                 ['has', 'colour'], ['get', 'colour'],
                 ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
-                ['boolean', ['feature-state', 'selected'], false], '#0F0',
                 ['any',
                       ['==', ['get', 'kind'], 'scaffold']
                 ], 'white',
@@ -260,15 +260,16 @@ export class FeatureLineLayer extends VectorStyleLayer
         const paintStyle = {
             'line-color': [
                 'case',
+                ['boolean', ['feature-state', 'selected'], false], '#0F0',
                 ['has', 'colour'], ['get', 'colour'],
                 ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
-                ['boolean', ['feature-state', 'selected'], false], '#0F0',
                 ['==', ['get', 'type'], 'network'], '#AFA202',
                 ['has', 'centreline'], '#888',
                 ('style' in options && options.style === 'authoring') ? '#C44' : '#444'
             ],
             'line-opacity': [
                 'case',
+                ['boolean', ['feature-state', 'selected'], false], 1.0,
                 ['boolean', ['feature-state', 'active'], false], 1.0,
                     0.3
                 ],
@@ -278,6 +279,7 @@ export class FeatureLineLayer extends VectorStyleLayer
                     'case',
                         ['has', 'centreline'], 1.2,
                         ['==', ['get', 'type'], 'network'], 1.2,
+                        ['boolean', ['feature-state', 'selected'], false], 1.2,
                         ['boolean', ['feature-state', 'active'], false], 1.2,
                     ('style' in options && options.style === 'authoring') ? 0.7 : 0.5
                     ], [
@@ -674,14 +676,14 @@ export class BackgroundLayer
         return this.__id;
     }
 
-    style(backgroundColour)
+    style(backgroundColour, opacity=0.1)
     {
         return {
             'id': this.__id,
             'type': 'background',
             'paint': {
                 'background-color': backgroundColour,
-                'background-opacity': 0.1
+                'background-opacity': opacity
             }
         };
     }