@abi-software/flatmap-viewer 2.2.10-devel.1 → 2.2.10-devel.2

package/package.json

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

package/src/controls.js

@@ -327,7 +327,7 @@ export class BackgroundControl
     getDefaultPosition()
     //==================
     {
-        return 'top-right';
+        return 'bottom-right';
     }
 
     onAdd(map)

package/src/flatmap-viewer.js

@@ -658,7 +658,10 @@ class FlatMap
     setColour(options=null)
     //=====================
     {
-        options = utils.setDefaultOptions(options, {colour: true, outline: true});
+        options = utils.setDefaults(options, {
+            colour: true,
+            outline: true
+        });
         if (this._userInteractions !== null) {
             this._userInteractions.setColour(options);
         }
@@ -696,6 +699,8 @@ class FlatMap
     setBackgroundColour(colour)
     //=========================
     {
+        localStorage.setItem('flatmap-background-colour', colour);
+
         this._map.setPaintProperty('background', 'background-color', colour);
 
         if (this._minimap) {
@@ -1023,7 +1028,11 @@ class FlatMap
     zoomToFeatures(externalIds, options=null)
     //=======================================
     {
-        options = utils.setDefaultOptions(options, {select: true, highlight: false, padding:100});
+        options = utils.setDefaults(options, {
+            select: true,
+            highlight: false,
+            padding:100
+        });
         if (this._userInteractions !== null) {
             const featureIds = this.modelFeatureIdList(externalIds);
             this._userInteractions.zoomToFeatures(featureIds, options);
@@ -1216,19 +1225,7 @@ export class MapManager
                     mapOptions['bounds'] = mapIndex['bounds'];
                 }
 
-                // Default is to show path controls
-
-                if (!('pathControls' in mapOptions)) {
-                    mapOptions['pathControls'] = true;
-                }
-
-                // Default is to show layer controls
-
-                if (!('layerControl' in mapOptions)) {
-                    mapOptions['layerControl'] = true;
-                }
-
-                // Mapmaker's changed the name of the field to indicate that indicates if
+                // Mapmaker has 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'];

package/src/interactions.js

@@ -529,7 +529,12 @@ export class UserInteractions
     zoomToFeatures(featureIds, options=null)
     //======================================
     {
-        options = utils.setDefaultOptions(options, {select: true, highlight: false, noZoomIn: false, padding:10});
+        options = utils.setDefaults(options, {
+            select: true,
+            highlight:
+            false, noZoomIn:
+            false, padding:10
+        });
         const select = (options.select === true);
         const highlight = (options.highlight === true);
         if (featureIds.length) {

package/src/layers.js

@@ -27,20 +27,21 @@ import {PATHWAYS_LAYER} from './pathways.js';
 import * as style from './styling.js';
 import * as utils from './utils.js';
 
-const FEATURES_LAYER = 'features'
-const RASTER_LAYERS_NAME = 'Background image layer'
+const FEATURES_LAYER = 'features';
+const RASTER_LAYERS_NAME = 'Background image layer';
+const RASTER_LAYERS_ID = 'background-image-layer';
 
 //==============================================================================
 
 class MapStylingLayers
 {
-    constructor(flatmap, layerId)
+    constructor(flatmap, layerId, options)
     {
         this.__map = flatmap.map;
         this.__id = layerId;
         this.__layers = [];
         this.__active = true;
-        this.__layerOptions = flatmap.options.layerOptions;
+        this.__layerOptions = options;
         this.__separateLayers = flatmap.options.separateLayers;
     }
 
@@ -90,9 +91,9 @@ class MapStylingLayers
 
 class MapFeatureLayers extends MapStylingLayers
 {
-    constructor(flatmap, layer)
+    constructor(flatmap, layer, options)
     {
-        super(flatmap, layer.id);
+        super(flatmap, layer.id, options);
         const vectorTileSource = this.__map.getSource('vector-tiles');
         const haveVectorLayers = (typeof vectorTileSource !== 'undefined');
 
@@ -161,9 +162,9 @@ class MapFeatureLayers extends MapStylingLayers
 
 class MapRasterLayers extends MapStylingLayers
 {
-    constructor(flatmap, bodyLayerId=null)
+    constructor(flatmap, options, bodyLayerId=null)
     {
-        super(flatmap, 'background-image-layer');
+        super(flatmap, RASTER_LAYERS_ID, options);
         if (bodyLayerId !== null) {
             const layerId = `${bodyLayerId}_${FEATURES_LAYER}`;
             const source = flatmap.options.separateLayers ? layerId : FEATURES_LAYER;
@@ -210,7 +211,10 @@ export class LayerManager
         this.__map = flatmap.map;
         this.__layers = new Map;
         this.__mapLayers = new Map;
-        const layerOptions = flatmap.options.layerOptions;
+        this.__layerOptions = utils.setDefaults(flatmap.options.layerOptions, {
+            colour: true,
+            outline: true
+        });;
         const backgroundLayer = new style.BackgroundLayer();
         if ('background' in flatmap.options) {
             this.__map.addLayer(backgroundLayer.style(flatmap.options.background));
@@ -220,20 +224,23 @@ export class LayerManager
 
         // Add the map's layers
         if (flatmap.details['image-layers']) {
-            // Image layers are below all feature layers
+            this.__layerOptions.activeRasterLayer = true;
 
+            // Image layers are below all feature layers
             const bodyLayer = flatmap.layers[0];
-
-            const rasterLayers = new MapRasterLayers(this.__flatmap, bodyLayer.id);  // body layer if not FC??
-
+            const rasterLayers = new MapRasterLayers(this.__flatmap,
+                                                     this.__layerOptions,
+                                                     bodyLayer.id);  // body layer if not FC??
             for (const layer of flatmap.layers) {
                 rasterLayers.addLayer(layer);
             }
-            this.__layers.set(RASTER_LAYERS_NAME, {
-                id: RASTER_LAYERS_NAME,
+            this.__layers.set(RASTER_LAYERS_ID, {
+                id: RASTER_LAYERS_ID,
                 description: RASTER_LAYERS_NAME
             });
-            this.__mapLayers.set(RASTER_LAYERS_NAME, rasterLayers);
+            this.__mapLayers.set(RASTER_LAYERS_ID, rasterLayers);
+        } else {
+            this.__layerOptions.activeRasterLayer = false;
         }
         for (const layer of flatmap.layers) {
            this.__addFeatureLayer(layer);
@@ -256,7 +263,9 @@ export class LayerManager
     //======================
     {
         this.__layers.set(layer.id, layer);
-        this.__mapLayers.set(layer.id, new MapFeatureLayers(this.__flatmap, layer));
+        this.__mapLayers.set(layer.id, new MapFeatureLayers(this.__flatmap,
+                                                            layer,
+                                                            this.__layerOptions));
     }
 
     get layers()
@@ -268,18 +277,26 @@ export class LayerManager
     activate(layerId, enable=true)
     //============================
     {
-        const mapLayer = this.__mapLayers.get(layerId);
-        if (mapLayer !== undefined) {
-            mapLayer.activate(enable);
+        const layer = this.__mapLayers.get(layerId);
+        if (layer !== undefined) {
+            layer.activate(enable);
+            if (layer.id === RASTER_LAYERS_ID) {
+                this.__layerOptions.activeRasterLayer = enable;
+                for (const mapLayer of this.__mapLayers.values()) {
+                    if (mapLayer.id !== RASTER_LAYERS_ID) {
+                        mapLayer.setColour(this.__layerOptions);
+                    }
+                }
+            }
         }
     }
 
     setColour(options=null)
     //=====================
     {
-        options = utils.setDefaultOptions(options, {colour: true, outline: true});
+        this.__layerOptions = utils.setDefaults(options, this.__layerOptions);
         for (const mapLayer of this.__mapLayers.values()) {
-            mapLayer.setColour(options)
+            mapLayer.setColour(this.__layerOptions);
         }
     }
 }

package/src/main.js

@@ -52,7 +52,7 @@ export async function standaloneViewer(map_endpoint=null, options={})
     });
 
     let currentMap = null;
-    let defaultBackground = 'black';
+    let defaultBackground = localStorage.getItem('flatmap-background-colour') || 'black';
 
     const mapOptions = Object.assign({
         tooltips: true,
@@ -62,7 +62,9 @@ export async function standaloneViewer(map_endpoint=null, options={})
         minimap: false,
         searchable: true,
         featureInfo: true,
-        showPosition: false
+        showPosition: false,
+        pathControls: true,
+        layerControl: true
     }, options);
 
     function loadMap(id, taxon, sex)

package/src/styling.js

@@ -114,6 +114,7 @@ export class FeatureFillLayer extends VectorStyleLayer
     {
         const coloured = !('colour' in options) || options.colour;
         const dimmed = 'dimmed' in options && options.dimmed;
+        const activeRasterLayer = 'activeRasterLayer' in options && options.activeRasterLayer;
         const paintStyle = {
             'fill-color': [
                 'case',
@@ -128,15 +129,15 @@ export class FeatureFillLayer extends VectorStyleLayer
             ],
             'fill-opacity': [
                 'case',
+                ['boolean', ['feature-state', 'selected'], false], 0.7,
+                ['has', 'colour'], activeRasterLayer ? 0.008 : 1.0,
+                ['boolean', ['feature-state', 'active'], false], 0.7,
+                ['has', 'node'], 0.3,
                 ['any',
                       ['==', ['get', 'kind'], 'scaffold'],
                       ['==', ['get', 'kind'], 'tissue'],
                       ['==', ['get', 'kind'], 'cell-type'],
                 ], 0.1,
-                ['has', 'node'], 0.3,
-                ['boolean', ['feature-state', 'active'], false], 0.8,
-                ['boolean', ['feature-state', 'selected'], false], 0.01,
-                ['has', 'colour'], 0.008,
                 (coloured && !dimmed) ? 0.01 : 0.1
             ]
         };
@@ -175,6 +176,7 @@ export class FeatureBorderLayer extends VectorStyleLayer
         const coloured = !('colour' in options) || options.colour;
         const outlined = !('outline' in options) || options.outline;
         const dimmed = 'dimmed' in options && options.dimmed;
+        const activeRasterLayer = 'activeRasterLayer' in options && options.activeRasterLayer;
         const lineColour = [ 'case' ];
         lineColour.push(['boolean', ['feature-state', 'selected'], false]);
         lineColour.push('red');
@@ -183,7 +185,7 @@ export class FeatureBorderLayer extends VectorStyleLayer
             lineColour.push('blue');
         }
         lineColour.push(['has', 'colour']);
-        lineColour.push(['get', 'colour']);
+        lineColour.push('#000');
         lineColour.push(['has', 'node']);
         lineColour.push('#AFA202');
         lineColour.push('#444');
@@ -198,7 +200,11 @@ export class FeatureBorderLayer extends VectorStyleLayer
         }
         lineOpacity.push(['boolean', ['feature-state', 'selected'], false]);
         lineOpacity.push(0.9);
-        lineOpacity.push((outlined && !dimmed) ? 0.3 : 0.1);
+        if (activeRasterLayer) {
+            lineOpacity.push((outlined && !dimmed) ? 0.3 : 0.1);
+        } else {
+            lineOpacity.push(0.5);
+        }
 
         const lineWidth = [
             'case',
@@ -208,8 +214,10 @@ export class FeatureBorderLayer extends VectorStyleLayer
         lineWidth.push(2.5);
         if (coloured && outlined) {
             lineWidth.push(['boolean', ['feature-state', 'active'], false]);
-            lineWidth.push(1);
+            lineWidth.push(1.5);
         }
+        lineWidth.push(['has', 'colour']);
+        lineWidth.push(0.7);
         lineWidth.push((coloured && outlined) ? 0.5 : 0.1);
 
         return super.changedPaintStyle({
@@ -271,8 +279,9 @@ export class FeatureLineLayer extends VectorStyleLayer
             ],
             'line-opacity': [
                 'case',
-                ['boolean', ['feature-state', 'selected'], false], 1.0,
-                ['boolean', ['feature-state', 'active'], false], 1.0,
+                    ['boolean', ['feature-state', 'selected'], false], 1.0,
+                    ['has', 'colour'], 1.0,
+                    ['boolean', ['feature-state', 'active'], false], 1.0,
                     0.3
                 ],
             'line-width': [
@@ -360,7 +369,7 @@ export class PathLineLayer extends VectorStyleLayer
                 ['boolean', ['feature-state', 'hidden'], false], '#CCC',
                 ['==', ['get', 'type'], 'bezier'], 'red',
                 ['==', ['get', 'kind'], 'error'], '#FFFE0E',
-                ['==', ['get', 'kind'], 'unknown'], '#FFC1DE',
+                ['==', ['get', 'kind'], 'unknown'], '#888',
                 ['==', ['get', 'kind'], 'cns'], '#9B1FC1',
                 ['==', ['get', 'kind'], 'lcn'], '#F19E38',
                 ['==', ['get', 'kind'], 'para-post'], '#3F8F4A',

package/src/utils.js

@@ -110,7 +110,7 @@ export function normaliseId(id)
 
 //==============================================================================
 
-export function setDefaultOptions(options, defaultOptions)
+export function setDefaults(options, defaultOptions)
 {
     if (options === undefined || options === null) {
         return defaultOptions;