@abi-software/flatmap-viewer 2.2.1-beta.1 → 2.2.1-beta.4

package/README.rst

@@ -2,7 +2,7 @@
 Flatmap Viewer
 ==============
 
-A viewer for anatomical flatmaps generated by `flatmap-maker <https://github.com/dbrnz/flatmap-maker>`_. The viewer is intended to be a component of a larger Javascript web application, although may be used standalone for local flatmap development and testing. Flatmap content is obtained from a `flatmap-server <https://github.com/dbrnz/flatmap-server>`_.
+A viewer for anatomical flatmaps generated by `flatmap-maker <https://github.com/AnatomicMaps/flatmap-maker>`_. The viewer is intended to be a component of a larger Javascript web application, although may be used standalone for local flatmap development and testing. Flatmap content is obtained from a `flatmap-server <https://github.com/AnatomicMaps/flatmap-server>`_.
 
 
 Standalone Use
@@ -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.1``
+* ``npm install @abi-software/flatmap-viewer@2.2.1-beta.4``
 
 Documentation
 -------------

package/package.json

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

package/src/flatmap-viewer.js

@@ -1259,7 +1259,13 @@ export class MapManager
                         outline: true
                     };
                 }
-                mapOptions.layerOptions.authoring = ('authoring' in mapIndex && mapIndex.authoring);
+                if ('authoring' in mapIndex) {
+                    mapOptions.layerOptions.style == 'authoring'
+                } else if ('style' in mapIndex) {
+                    mapOptions.layerOptions.style = mapIndex.style;
+                } else {
+                    mapOptions.layerOptions.style = 'flatmap';
+                }
 
                 // Are features in separate vector tile source layers?
 

package/src/interactions.js

@@ -162,34 +162,6 @@ export class UserInteractions
 
         this._layerManager = new LayerManager(flatmap);
 
-        // Add the map's layers
-
-        // Layers have an id, either layer-N or an assigned name
-        // Some layers might have a description. These are the selectable layers,
-        // unless they are flagged as `no-select`
-        // Selectable layers have opacity 0 unless active, in which case they have opacity 1.
-        // `no-select` layers have opacity 0.5
-        // Background layer has opacity 0.2
-
-        const layersById = new Map();
-        const layerBackgroundIds = [];
-        for (const layer of flatmap.layers) {
-            layer.backgroundLayers = [];
-            layersById.set(layer.id, layer);
-        }
-        for (const layer of flatmap.layers) {
-            if (layer.background_for) {
-                const l = layersById.get(layer.background_for);
-                l.backgroundLayers.push(layer);
-                layerBackgroundIds.push(layer.id);
-            }
-        }
-        for (const layer of flatmap.layers) {
-            if (layerBackgroundIds.indexOf(layer.id) < 0) {
-                this._layerManager.addLayer(layer, flatmap.options.layerOptions);
-            }
-        }
-
         // Flag features that have annotations
         // Also flag those features that are models of something
 

package/src/layers.js

@@ -33,7 +33,7 @@ const FEATURES_LAYER = 'features'
 
 class MapFeatureLayer
 {
-    constructor(flatmap, layer, options)
+    constructor(flatmap, layer, background_layers=true)
     {
         this.__map = flatmap.map;
         this.__separateLayers = flatmap.options.separateLayers;
@@ -41,6 +41,7 @@ class MapFeatureLayer
         this.__rasterLayers = [];
         this.__styleLayers = [];
 
+        const layerOptions = flatmap.options.layerOptions;
         const vectorTileSource = this.__map.getSource('vector-tiles');
         const haveVectorLayers = (typeof vectorTileSource !== 'undefined');
         const featuresVectorLayerId = this.__separateLayers
@@ -48,33 +49,36 @@ class MapFeatureLayer
                                     : FEATURES_LAYER;
         const vectorFeatures = haveVectorLayers
                              && vectorTileSource.vectorLayerIds.indexOf(featuresVectorLayerId) >= 0;
-        if (vectorFeatures) {
-            this.__addStyleLayer(style.BodyLayer, options);
-        }
-        if (flatmap.details['image_layer']) {
-            for (const raster_layer_id of layer['image-layers']) {
-                const layerId = this.__addRasterLayer(raster_layer_id, options);
+        if (background_layers) {
+            if (vectorFeatures) {
+                this.__addStyleLayer(style.BodyLayer, layerOptions);
+            }
+            if (flatmap.details['image_layer']) {
+                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) {
             if (vectorFeatures) {
-                this.__addStyleLayer(style.FeatureFillLayer, options);
-                this.__addStyleLayer(style.FeatureLineLayer, options);
-                this.__addStyleLayer(style.FeatureBorderLayer, options);
+                this.__addStyleLayer(style.FeatureFillLayer, layerOptions);
+                this.__addStyleLayer(style.FeatureDashLineLayer, layerOptions);
+                this.__addStyleLayer(style.FeatureLineLayer, layerOptions);
+                this.__addStyleLayer(style.FeatureBorderLayer, layerOptions);
             }
-            this.__addPathwayStyleLayers(options);
+            this.__addPathwayStyleLayers(layerOptions);
             if (vectorFeatures) {
-                this.__addStyleLayer(style.FeatureLargeSymbolLayer, options);
+                this.__addStyleLayer(style.FeatureLargeSymbolLayer, layerOptions);
                 if (!flatmap.options.tooltips) {
-                    this.__addStyleLayer(style.FeatureSmallSymbolLayer, options);
+                    this.__addStyleLayer(style.FeatureSmallSymbolLayer, layerOptions);
                 }
             }
         }
 
-        // Make sure our colpur options are set properly, in particular raster layer visibility
+        // Make sure our colour options are set properly, in particular raster layer visibility
 
-        this.setColour(options);
+        this.setColour(layerOptions);
     }
 
     get id()
@@ -147,12 +151,31 @@ export class LayerManager
         this.__mapLayers = new Map;
         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
+        if (fcDiagram && flatmap.details['image_layer']) {
+            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);
+                }
+            }
+        }
+        for (const layer of flatmap.layers) {
+            this.addLayer(layer, !fcDiagram);
+        }
     }
 
     get activeLayerNames()
@@ -161,12 +184,12 @@ export class LayerManager
         return this.__activeLayerNames;
     }
 
-    addLayer(layer, options)
-    //======================
+    addLayer(layer, background_layers=true)
+    //=====================================
     {
         this.__mapLayers.set(layer.id, layer);
 
-        const layers = new MapFeatureLayer(this.__flatmap, layer, options);
+        const layers = new MapFeatureLayer(this.__flatmap, layer, background_layers);
         const layerId = this.__flatmap.mapLayerId(layer.id);
         this.__layers.set(layerId, layers);
     }

package/src/styling.js

@@ -117,12 +117,12 @@ export class FeatureFillLayer extends VectorStyleLayer
         const paintStyle = {
             'fill-color': [
                 'case',
+                ['has', 'colour'], ['get', 'colour'],
                 ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
                 ['boolean', ['feature-state', 'selected'], false], '#0F0',
                 ['any',
                       ['==', ['get', 'kind'], 'scaffold']
                 ], 'white',
-                ['has', 'colour'], ['get', 'colour'],
                 ['has', 'node'], '#AFA202',
                 'white'    // background colour? body colour ??
             ],
@@ -133,10 +133,10 @@ export class FeatureFillLayer extends VectorStyleLayer
                       ['==', ['get', 'kind'], 'tissue'],
                       ['==', ['get', 'kind'], 'cell-type'],
                 ], 0.1,
-                ['has', 'colour'], 0.008,
                 ['has', 'node'], 0.3,
                 ['boolean', ['feature-state', 'selected'], false], 1.0,
                 ['boolean', ['feature-state', 'active'], false], 0.8,
+                ['has', 'colour'], 0.008,
                 (coloured && !dimmed) ? 0.01 : 0.5
             ]
         };
@@ -236,62 +236,96 @@ export class FeatureBorderLayer extends VectorStyleLayer
 
 export class FeatureLineLayer extends VectorStyleLayer
 {
-    constructor(id, sourceLayer)
+    constructor(id, sourceLayer, dashed=false)
     {
-        super(id, 'divider-line', sourceLayer);
+        const filterType = dashed ? 'line-dash' : 'line';
+        super(id, `divider-${filterType}`, sourceLayer);
+        this.__filter = dashed ?
+            [
+                'any',
+                ['==', 'type', `line-dash`]
+            ]
+        :
+            [
+                'any',
+                ['==', 'type', 'bezier'],
+                ['==', 'type', `line`]
+            ];
+        this.__dashed = dashed;
     }
 
-    style(options)
+    paintStyle(options)
     {
         const coloured = !('colour' in options) || options.colour;
+        const paintStyle = {
+            'line-color': [
+                'case',
+                ['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', 'active'], false], 1.0,
+                    0.3
+                ],
+            'line-width': [
+                'let',
+                'width', [
+                    'case',
+                        ['has', 'centreline'], 1.2,
+                        ['==', ['get', 'type'], 'network'], 1.2,
+                        ['boolean', ['feature-state', 'active'], false], 1.2,
+                    ('style' in options && options.style === 'authoring') ? 0.7 : 0.5
+                    ], [
+                    'interpolate',
+                        ['exponential', 2],
+                        ['zoom'],
+                         2, ["*", ['var', 'width'], ["^", 2, -0.5]],
+                         7, ["*", ['var', 'width'], ["^", 2,  2.5]],
+                         9, ["*", ['var', 'width'], ["^", 2,  4.0]]
+                    ]
+            ]
+            // Need to vary width based on zoom??
+            // Or opacity??
+        };
+        if (this.__dashed) {
+            paintStyle['line-dasharray'] = [3, 2];
+        }
+        return paintStyle;
+    }
+
+    style(options)
+    {
         return {
             ...super.style(),
             'type': 'line',
             'filter': [
-                 'all',
-                 ['==', '$type', 'LineString']
+                'all',
+                ['==', '$type', 'LineString'],
+                this.__filter
                  // not for paths...
             ],
-            'paint': {
-                'line-color': [
-                    'case',
-                    ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
-                    ['boolean', ['feature-state', 'selected'], false], '#0F0',
-                    ['==', ['get', 'type'], 'network'], '#AFA202',
-                    ['has', 'centreline'], '#888',
-                    ('authoring' in options && options.authoring) ? '#C44' : '#444'
-                ],
-                'line-opacity': [
-                    'case',
-                    ['boolean', ['feature-state', 'active'], false], 1.0,
-                        0.3
-                    ],
-                'line-width': [
-                    'let',
-                    'width', [
-                        'case',
-                            ['has', 'centreline'], 1.2,
-                            ['==', ['get', 'type'], 'network'], 1.2,
-                            ['boolean', ['feature-state', 'active'], false], 1.2,
-                        ('authoring' in options && options.authoring) ? 0.7 : 0.1
-                        ], [
-                        'interpolate',
-                            ['exponential', 2],
-                            ['zoom'],
-                             2, ["*", ['var', 'width'], ["^", 2, -0.5]],
-                             7, ["*", ['var', 'width'], ["^", 2,  2.5]],
-                             9, ["*", ['var', 'width'], ["^", 2,  4.0]]
-                        ]
-                ]
-                // Need to vary width based on zoom??
-                // Or opacity??
-            }
+            'paint': this.paintStyle(options)
         };
     }
 }
 
 //==============================================================================
 
+export class FeatureDashLineLayer extends FeatureLineLayer
+{
+    constructor(id, sourceLayer)
+    {
+        super(id, sourceLayer, true);
+    }
+}
+
+//==============================================================================
+
 export class PathLineLayer extends VectorStyleLayer
 {
     constructor(id, sourceLayer, dashed=false)
@@ -640,14 +674,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
             }
         };
     }