@abi-software/flatmap-viewer 2.3.0-a.1 → 2.3.0-a.3

package/src/layers.js

@@ -27,113 +27,163 @@ import {PATHWAYS_LAYER} from './pathways.js';
 import * as style from './styling.js';
 import * as utils from './utils.js';
 
-const FEATURES_LAYER = 'features'
+const FEATURES_LAYER = 'features';
+const RASTER_LAYERS_NAME = 'Background image layer';
+const RASTER_LAYERS_ID = 'background-image-layer';
 
 //==============================================================================
 
-class MapFeatureLayer
+class MapStylingLayers
 {
-    constructor(flatmap, layer, background_layers=true)
+    constructor(flatmap, layer, options)
     {
         this.__map = flatmap.map;
-        this.__separateLayers = flatmap.options.separateLayers;
         this.__id = layer.id;
-        this.__rasterLayers = [];
-        this.__styleLayers = [];
+        this.__description = layer.description;
+        this.__active = true;
+        this.__layers = [];
+        this.__layerOptions = options;
+        this.__separateLayers = flatmap.options.separateLayers;
+    }
+
+    get id()
+    //======
+    {
+        return this.__id;
+    }
+
+    get description()
+    //===============
+    {
+        return this.__description;
+    }
+
+    get active()
+    //==========
+    {
+        return this.__active;
+    }
+
+    addLayer(styleLayer, options)
+    //===========================
+    {
+        this.__map.addLayer(styleLayer.style(options));
+        this.__layers.push(styleLayer);
+    }
+
+    __showLayer(layer, visible=true)
+    //===============================
+    {
+        this.__map.setLayoutProperty(layer.id, 'visibility', visible ? 'visible' : 'none');
+    }
+
+    activate(enable=true)
+    //===================
+    {
+        for (const layer of this.__layers) {
+            this.__showLayer(layer, enable);
+        }
+        this.__active = enable;
+    }
 
-        const layerOptions = flatmap.options.layerOptions;
+    vectorSourceId(sourceLayer)
+    //=========================
+    {
+        return (this.__separateLayers ? `${this.__id}_${sourceLayer}`
+                                      : sourceLayer).replaceAll('/', '_');
+    }
+
+    setPaint(options)
+    {
+    }
+
+    setFilter(options)
+    {
+    }
+}
+
+//==============================================================================
+
+class MapFeatureLayers extends MapStylingLayers
+{
+    constructor(flatmap, layer, options)
+    {
+        super(flatmap, layer, options);
         const vectorTileSource = this.__map.getSource('vector-tiles');
         const haveVectorLayers = (typeof vectorTileSource !== 'undefined');
-        const featuresVectorLayerId = this.__separateLayers
-                                    ? `${this.__id}_${FEATURES_LAYER}`
-                                    : FEATURES_LAYER;
-        const vectorFeatures = haveVectorLayers
-                             && vectorTileSource.vectorLayerIds.indexOf(featuresVectorLayerId) >= 0;
-        if (background_layers) {
-            if (vectorFeatures) {
-                this.__addStyleLayer(style.BodyLayer, layerOptions);
-            }
-            if (flatmap.details['image-layers']) {
-                for (const raster_layer_id of layer['image-layers']) {
-                    this.__addRasterLayer(raster_layer_id, layerOptions);
-                }
-            }
-        }
+
         // if no image layers then make feature borders (and lines?) more visible...??
         if (haveVectorLayers) {
+            const featuresVectorSource = this.vectorSourceId(FEATURES_LAYER);
+            const vectorFeatures = vectorTileSource.vectorLayerIds
+                                                   .indexOf(featuresVectorSource) >= 0;
             if (vectorFeatures) {
-                this.__addStyleLayer(style.FeatureFillLayer, layerOptions);
-                this.__addStyleLayer(style.FeatureDashLineLayer, layerOptions);
-                this.__addStyleLayer(style.FeatureLineLayer, layerOptions);
-                this.__addStyleLayer(style.FeatureBorderLayer, layerOptions);
+                this.__addStyleLayer(style.FeatureFillLayer);
+                this.__addStyleLayer(style.FeatureDashLineLayer);
+                this.__addStyleLayer(style.FeatureLineLayer);
+                this.__addStyleLayer(style.FeatureBorderLayer);
+                this.__addStyleLayer(style.CentrelineNodeFillLayer);
+                this.__addStyleLayer(style.CentrelineNodeBorderLayer);
             }
-            this.__addPathwayStyleLayers(layerOptions);
+            this.__addPathwayStyleLayers();
             if (vectorFeatures) {
-                this.__addStyleLayer(style.FeatureLargeSymbolLayer, layerOptions);
+                this.__addStyleLayer(style.FeatureLargeSymbolLayer);
                 if (!flatmap.options.tooltips) {
-                    this.__addStyleLayer(style.FeatureSmallSymbolLayer, layerOptions);
+                    this.__addStyleLayer(style.FeatureSmallSymbolLayer);
                 }
             }
         }
 
-        // Make sure our colour options are set properly, in particular raster layer visibility
-
-        this.setColour(layerOptions);
-    }
+        // Make sure our paint options are set properly, in particular raster layer visibility
 
-    get id()
-    //======
-    {
-        return this.__id;
+        this.setPaint(this.__layerOptions);
     }
 
-    __addRasterLayer(raster_layer_id, options)
-    //========================================
+    __addStyleLayer(styleClass, sourceLayer=FEATURES_LAYER)
+    //=====================================================
     {
-        const rasterLayer = new style.RasterLayer(raster_layer_id);
-        this.__map.addLayer(rasterLayer.style(options));
-        this.__rasterLayers.push(rasterLayer);
+        const styleLayer = new styleClass(`${this.__id}_${sourceLayer}`,
+                                          this.vectorSourceId(sourceLayer));
+        this.addLayer(styleLayer, this.__layerOptions);
     }
 
-    __addPathwayStyleLayers(options)
-    //==============================
+    __addPathwayStyleLayers()
+    //=======================
     {
-        const pathwaysVectorLayerId = this.__separateLayers
-                                    ? `${this.__id}_${PATHWAYS_LAYER}`
-                                    : PATHWAYS_LAYER;
+        const pathwaysVectorSource = this.vectorSourceId(PATHWAYS_LAYER);
         if (this.__map.getSource('vector-tiles')
                 .vectorLayerIds
-                .indexOf(pathwaysVectorLayerId) >= 0) {
-            this.__addStyleLayer(style.PathLineLayer, options, PATHWAYS_LAYER);
-            this.__addStyleLayer(style.PathDashlineLayer, options, PATHWAYS_LAYER);
-            this.__addStyleLayer(style.NervePolygonBorder, options, PATHWAYS_LAYER);
-            this.__addStyleLayer(style.NervePolygonFill, options, PATHWAYS_LAYER);
-            this.__addStyleLayer(style.FeatureNerveLayer, options, PATHWAYS_LAYER);
+                .indexOf(pathwaysVectorSource) >= 0) {
+            this.__addStyleLayer(style.CentrelineEdgeLayer, PATHWAYS_LAYER);
+            this.__addStyleLayer(style.CentrelineTrackLayer, PATHWAYS_LAYER);
+
+            this.__addStyleLayer(style.PathLineLayer, PATHWAYS_LAYER);
+            this.__addStyleLayer(style.PathDashlineLayer, PATHWAYS_LAYER);
+
+            this.__addStyleLayer(style.NervePolygonBorder, PATHWAYS_LAYER);
+            this.__addStyleLayer(style.NervePolygonFill, PATHWAYS_LAYER);
+            this.__addStyleLayer(style.FeatureNerveLayer, PATHWAYS_LAYER);
         }
     }
 
-    __addStyleLayer(styleClass, options, sourceLayer=FEATURES_LAYER)
-    //==============================================================
+    setPaint(options)
+    //===============
     {
-        const layerId = `${this.__id}_${sourceLayer}`;
-        const source = this.__separateLayers ? layerId : sourceLayer;
-        const styleLayer = new styleClass(layerId, source);
-        this.__map.addLayer(styleLayer.style(options));
-        this.__styleLayers.push(styleLayer);
+        for (const layer of this.__layers) {
+            const paintStyle = layer.paintStyle(options, true);
+            for (const [property, value] of Object.entries(paintStyle)) {
+                this.__map.setPaintProperty(layer.id, property, value, {validate: false});
+            }
+        }
     }
 
-    setColour(options)
+    setFilter(options)
     //================
     {
-        const coloured = !('colour' in options) || options.colour;
-        for (const rasterLayer of this.__rasterLayers) {
-            this.__map.setLayoutProperty(rasterLayer.id, 'visibility', coloured ? 'visible' : 'none',
-                 {validate: false});
-        }
-        for (const styleLayer of this.__styleLayers) {
-            const paintStyle = styleLayer.paintStyle(options, true);
-            for (const [property, value] of Object.entries(paintStyle)) {
-                this.__map.setPaintProperty(styleLayer.id, property, value, {validate: false});
+        for (const layer of this.__layers) {
+            const filter = layer.makeFilter(options);
+            if (filter !== null) {
+                this.__map.setFilter(layer.id, filter, {validate: true});
             }
         }
     }
@@ -141,126 +191,167 @@ class MapFeatureLayer
 
 //==============================================================================
 
+class MapRasterLayers extends MapStylingLayers
+{
+    constructor(flatmap, options, bodyLayerId=null)
+    {
+        const rasterLayer = {
+            id: RASTER_LAYERS_ID,
+            description: RASTER_LAYERS_NAME
+        };
+        super(flatmap, rasterLayer, options);
+        if (bodyLayerId !== null) {
+            const layerId = `${bodyLayerId}_${FEATURES_LAYER}`;
+            const source = flatmap.options.separateLayers ? layerId : FEATURES_LAYER;
+            const styleLayer = new style.BodyLayer(layerId, source);
+            this.__map.addLayer(styleLayer.style(this.__layerOptions));
+            this.__layers.push(styleLayer);
+        }
+        // Make sure our paint options are set properly, in particular raster layer visibility
+        this.setPaint(this.__layerOptions);
+    }
+
+    addLayer(layer)
+    //=============
+    {
+        for (const layer_id of layer['image-layers']) {
+            const rasterLayer = new style.RasterLayer(layer_id);
+            this.__map.addLayer(rasterLayer.style(this.__layerOptions));
+            this.__layers.push(rasterLayer);
+        }
+        // Make sure our paint options are set properly, in particular raster layer visibility
+        this.setPaint(this.__layerOptions);
+    }
+
+    setPaint(options)
+    //===============
+    {
+        const coloured = !('colour' in options) || options.colour;
+        for (const layer of this.__layers) {
+            // Check active status when resetting to visible....
+            this.__map.setLayoutProperty(layer.id, 'visibility',
+                                                   (coloured && this.active) ? 'visible' : 'none',
+                                         {validate: false});
+        }
+    }
+}
+
+//==============================================================================
+
 export class LayerManager
 {
-    constructor(flatmap, switcher=false)
+    constructor(flatmap)
     {
         this.__flatmap = flatmap;
         this.__map = flatmap.map;
-        this.__layers = new Map;
         this.__mapLayers = new Map;
-        this.__activeLayers = [];
-        this.__activeLayerNames = [];
-        this.__rasterLayers = [];
-        const layerOptions = flatmap.options.layerOptions;
-        const fcDiagram = ('style' in layerOptions && layerOptions.style == 'fcdiagram');
+        this.__layerOptions = utils.setDefaults(flatmap.options.layerOptions, {
+            colour: true,
+            outline: true,
+            sckan: 'valid'
+        });
         const backgroundLayer = new style.BackgroundLayer();
-        if (fcDiagram) {
-            this.__map.addLayer(backgroundLayer.style('black', 1));
-        }
-        else if ('background' in flatmap.options) {
+        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
-        if (fcDiagram && flatmap.details['image-layers']) {
+        if (flatmap.details['image-layers']) {
+            this.__layerOptions.activeRasterLayer = true;
+
+            // Image layers are below all feature layers
+            const bodyLayer = flatmap.layers[0];
+            const rasterLayers = new MapRasterLayers(this.__flatmap,
+                                                     this.__layerOptions,
+                                                     bodyLayer.id);  // body layer if not FC??
             for (const layer of flatmap.layers) {
-                for (const raster_layer_id of layer['image-layers']) {
-                    const rasterLayer = new style.RasterLayer(raster_layer_id);
-                    this.__map.addLayer(rasterLayer.style(layerOptions));
-                    this.__rasterLayers.push(rasterLayer);
-                }
+                rasterLayers.addLayer(layer);
             }
+            this.__mapLayers.set(RASTER_LAYERS_ID, rasterLayers);
+        } else {
+            this.__layerOptions.activeRasterLayer = false;
         }
         for (const layer of flatmap.layers) {
-            this.addLayer(layer, !fcDiagram);
+            this.__mapLayers.set(layer.id, new MapFeatureLayers(this.__flatmap,
+                                                                layer,
+                                                                this.__layerOptions));
         }
     }
 
-    get activeLayerNames()
-    //====================
-    {
-        return this.__activeLayerNames;
-    }
-
-    addLayer(layer, background_layers=true)
-    //=====================================
-    {
-        this.__mapLayers.set(layer.id, layer);
-
-        const layers = new MapFeatureLayer(this.__flatmap, layer, background_layers);
-        const layerId = this.__flatmap.mapLayerId(layer.id);
-        this.__layers.set(layerId, layers);
-    }
-
     get layers()
     //==========
     {
-        return this.__layers;
-    }
-
-    activate(layerId)
-    //===============
-    {
-        const layer = this.__layers.get(layerId);
-        if (layer !== undefined) {
-            layer.activate();
-            if (this.__activeLayers.indexOf(layer) < 0) {
-                this.__activeLayers.push(layer);
-                this.__activeLayerNames.push(layer.id);
-            }
+        const layers = [];
+        for (const mapLayer of this.__mapLayers.values()) {
+            layers.push({
+                id: mapLayer.id,
+                description: mapLayer.description,
+                enabled: mapLayer.active
+            });
         }
+        return layers;
     }
 
-    deactivate(layerId)
-    //=================
+    activate(layerId, enable=true)
+    //============================
     {
-        const layer = this.__layers.get(layerId);
+        const layer = this.__mapLayers.get(layerId);
         if (layer !== undefined) {
-            layer.deactivate();
-            const index = this.__activeLayers.indexOf(layer);
-            if (index >= 0) {
-                delete this.__activeLayers[index];
-                this.__activeLayers.splice(index, 1);
-                delete this.__activeLayerNames[index];
-                this.__activeLayerNames.splice(index, 1);
+            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.setPaint(this.__layerOptions);
+                    }
+                }
             }
         }
     }
 
-    setColour(options=null)
-    //=====================
+    setPaint(options={})
+    //==================
     {
-        options = utils.setDefaultOptions(options, {colour: true, outline: true});
-        for (const layer of this.__layers.values()) {
-            layer.setColour(options)
+        this.__layerOptions = utils.setDefaults(options, this.__layerOptions);
+        for (const mapLayer of this.__mapLayers.values()) {
+            mapLayer.setPaint(this.__layerOptions);
         }
     }
 
-    makeUppermost(layerId)
-    //====================
-    {
-        // position before top layer
-    }
-
-    makeLowest(layerId)
-    //=================
-    {
-        // position after bottom layer (before == undefined)
-    }
-
-
-    lower(layerId)
-    //============
+    setFilter(options={})
+    //===================
     {
-        // position before second layer underneath...
+        this.__layerOptions = utils.setDefaults(options, this.__layerOptions);
+        for (const mapLayer of this.__mapLayers.values()) {
+            mapLayer.setFilter(this.__layerOptions);
+        }
     }
 
-    raise(layerId)
-    //============
+    enableSckanPath(sckanState, enable=true)
+    //======================================
     {
-        // position before layer above...
+        const currentState = this.__layerOptions.sckan;
+        const validEnabled = ['valid', 'all'].indexOf(currentState) >= 0;
+        const invalidEnabled = ['invalid', 'all'].indexOf(currentState) >= 0;
+        let newState = sckanState.toLowerCase();
+        if (newState === 'valid') {
+            if (enable && !validEnabled) {
+                newState = invalidEnabled ? 'all' : 'valid';
+            } else if (!enable && validEnabled) {
+                newState = invalidEnabled ? 'invalid' : 'none';
+            }
+        } else if (newState === 'invalid') {
+            if (enable && !invalidEnabled) {
+                newState = validEnabled ? 'all' : 'invalid';
+            } else if (!enable && invalidEnabled) {
+                newState = validEnabled ? 'valid' : 'none';
+            }
+        }
+        if (newState !== this.__layerOptions.sckan) {
+            this.setFilter({sckan: newState});
+        }
     }
 }
 

package/src/main.js

@@ -27,7 +27,7 @@ export { MapManager };
 
 //==============================================================================
 
-export async function standaloneViewer(map_endpoint=null, map_options={})
+export async function standaloneViewer(map_endpoint=null, options={})
 {
     const requestUrl = new URL(window.location.href);
     if (map_endpoint == null) {
@@ -52,6 +52,16 @@ export async function standaloneViewer(map_endpoint=null, map_options={})
     });
 
     let currentMap = null;
+    let defaultBackground = localStorage.getItem('flatmap-background-colour') || 'black';
+
+    const mapOptions = Object.assign({
+        tooltips: true,
+        background: defaultBackground,
+        debug: false,
+        minimap: false,
+        showPosition: false,
+        standalone: true
+    }, options);
 
     function loadMap(id, taxon, sex)
     //==============================
@@ -71,20 +81,15 @@ export async function standaloneViewer(map_endpoint=null, map_options={})
             }
             requestUrl.searchParams.delete('id');
         }
+
+        // Update address bar URL to current map
         window.history.pushState('data', document.title, requestUrl);
 
-        const options = Object.assign({
-            tooltips: true,
-            background: '#EEF',
-            debug: false,
-            minimap: false,
-            navigationControl: 'top-right',
-            searchable: true,
-            featureInfo: true,
-            showPosition: false
-        }, map_options);
-
-        mapManager.loadMap(id, 'map-canvas', (...args) => console.log(...args), options)
+        mapManager.loadMap(id, 'map-canvas', (eventType, ...args) => {
+                if (args[0].type === 'control' && args[0].control === 'background') {
+                    mapOptions.background = args[0].value;
+                }
+            }, mapOptions)
             .then(map => {
                 map.addMarker('UBERON:0000948'); // Heart
                 map.addMarker('UBERON:0002048'); // Lung
@@ -129,7 +134,7 @@ export async function standaloneViewer(map_endpoint=null, map_options={})
     let mapId = null;
     let mapTaxon = null;
     let mapSex = null;
-    const options = [];
+    const mapList = [];
     for (const [name, map] of sortedMaps.entries()) {
         const text = [ name, map.created ];
         let selected = '';
@@ -145,12 +150,12 @@ export async function standaloneViewer(map_endpoint=null, map_options={})
             mapSex = viewMapSex;
             selected = 'selected';
         }
-        options.push(`<option value="${id}" ${selected}>${text.join(' -- ')}</option>`);
+        mapList.push(`<option value="${id}" ${selected}>${text.join(' -- ')}</option>`);
     }
-    options.splice(0, 0, '<option value="">Select flatmap...</option>');
+    mapList.splice(0, 0, '<option value="">Select flatmap...</option>');
 
     const selector = document.getElementById('map-selector');
-    selector.innerHTML = options.join('');
+    selector.innerHTML = mapList.join('');
     selector.onchange = (e) => {
         if (e.target.value !== '') {
             loadMap(e.target.value);