@abi-software/flatmap-viewer 2.2.0-beta.3 → 2.2.0-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.2.0-beta.3",
+  "version": "2.2.0-beta.7",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/ABI-Software/flatmap-viewer.git",
   "main": "src/main.js",

package/src/flatmap-viewer.js

@@ -22,7 +22,7 @@ limitations under the License.
 
 //==============================================================================
 
-import maplibre from 'maplibre-gl';
+import maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
 //==============================================================================
@@ -131,7 +131,7 @@ class FlatMap
 
         // Create the map
 
-        this._map = new maplibre.Map(mapOptions);
+        this._map = new maplibregl.Map(mapOptions);
 
         // Show tile boundaries if debugging
 
@@ -146,7 +146,7 @@ class FlatMap
         // Do we want a fullscreen control?
 
         if (mapDescription.options.fullscreenControl === true) {
-            this._map.addControl(new maplibre.FullscreenControl(), 'top-right');
+            this._map.addControl(new maplibregl.FullscreenControl(), 'top-right');
         }
 
         // Disable map rotation
@@ -176,7 +176,11 @@ class FlatMap
                 this.setupUserInteractions_();
             } else if (this._initialState === null) {
                 this._bounds = this._map.getBounds();
-
+                this._map.setMaxBounds(this._bounds);
+                const sw = maplibregl.MercatorCoordinate.fromLngLat(this._bounds.toArray()[0]);
+                const ne = maplibregl.MercatorCoordinate.fromLngLat(this._bounds.toArray()[1]);
+                this.__normalised_origin = [sw.x, ne.y];
+                this.__normalised_size = [ne.x - sw.x, sw.y - ne.y];
                 if ('state' in this._options) {
                     this._userInteractions.setState(this._options.state);
                 }
@@ -559,7 +563,7 @@ class FlatMap
     //==================
     {
         if ('bounds' in this._options) {
-            this._map.fitBounds(this._options['bounds']);
+            this._map.fitBounds(this._options['bounds'], {animate: false});
         }
         if ('center' in this._options) {
             this._map.setCenter(this._options['center']);
@@ -784,6 +788,7 @@ class FlatMap
         const exportedProperties = [
             'connectivity',
             'dataset',
+            'kind',
             'label',
             'models',
             'nodeId',
@@ -822,6 +827,66 @@ class FlatMap
         });
     }
 
+    /**
+     * Generate callbacks as a result of panning/zooming the map.
+     *
+     * @param {boolean}   enabled  Generate callbacks when ``true``,
+     *                             otherwise disable them.
+     */
+    enablePanZoomEvents(enabled=true)
+    //===============================
+    {
+        if (this._userInteractions !== null) {
+            this._userInteractions.enablePanZoomEvents(enabled);
+        }
+    }
+
+    /**
+     * Generate a callback as a result of panning/zooming the map.
+     *
+     * @param {string}         type    The event type, ``pan`` or ``zoom``.
+     * @param {Array.<float>}  origin  The map's normalised top-left corner
+     * @param {Array.<float>}  size    The map's normalised size
+     */
+    panZoomEvent(type)
+    //================
+    {
+        const bounds = this._map.getBounds();
+        if (this.__normalised_origin !== undefined) {
+            const sw = maplibregl.MercatorCoordinate.fromLngLat(bounds.toArray()[0]);
+            const ne = maplibregl.MercatorCoordinate.fromLngLat(bounds.toArray()[1]);
+            const top_left = [(sw.x - this.__normalised_origin[0])/this.__normalised_size[0],
+                              (ne.y - this.__normalised_origin[1])/this.__normalised_size[1]];
+            const size = [(ne.x - sw.x)/this.__normalised_size[0],
+                          (sw.y - ne.y)/this.__normalised_size[1]];
+            this.callback('pan-zoom', {
+                type: type,
+                origin: top_left,
+                size: size
+            });
+        }
+    }
+
+    /**
+     * Pan/zoom the map to a new view
+     *
+     * @param {Array.<float>}  origin  The map's normalised top-left corner
+     * @param {Array.<float>}  size    The map's normalised size
+     */
+    panZoomTo(origin, size)
+    //=====================
+    {
+        if (this.__normalised_origin !== undefined) {
+            const sw_x = origin[0]*this.__normalised_size[0] + this.__normalised_origin[0];
+            const ne_y = origin[1]*this.__normalised_size[1] + this.__normalised_origin[1];
+            const ne_x = sw_x + size[0]*this.__normalised_size[0];
+            const sw_y = ne_y + size[1]*this.__normalised_size[1];
+            const sw = (new maplibregl.MercatorCoordinate(sw_x, sw_y, 0)).toLngLat();
+            const ne = (new maplibregl.MercatorCoordinate(ne_x, ne_y, 0)).toLngLat();
+            this._map.fitBounds([sw, ne], {animate: false});
+        }
+    }
+
     //==========================================================================
 
     search(text)

package/src/interactions.js

@@ -224,6 +224,11 @@ export class UserInteractions
         this._map.on('mousemove', this.mouseMoveEvent_.bind(this));
         this._lastFeatureMouseEntered = null;
         this._lastFeatureModelsMouse = null;
+
+        // Handle pan/zoom events
+        this._map.on('move', this.panZoomEvent_.bind(this, 'pan'));
+        this._map.on('zoom', this.panZoomEvent_.bind(this, 'zoom'));
+        this.__pan_zoom_enabled = false;
     }
 
     getState()
@@ -289,12 +294,12 @@ export class UserInteractions
         return this._selectedFeatureIds.has(+featureId);
     }
 
-    selectFeature_(featureId)
-    //=======================
+    selectFeature_(featureId, dim=true)
+    //=================================
     {
         featureId = +featureId;   // Ensure numeric
         if (this._selectedFeatureIds.size === 0) {
-            this._layerManager.setColour({...this.__colourOptions, dimmed: true});
+            this._layerManager.setColour({...this.__colourOptions, dimmed: dim});
         }
         if (this._selectedFeatureIds.has(featureId)) {
             this._selectedFeatureIds.set(featureId, this._selectedFeatureIds.get(featureId) + 1);
@@ -837,7 +842,10 @@ export class UserInteractions
                     }
                 }
             } else if (selecting) {
-                this.selectFeature_(featureId);
+                const dim = !('properties' in feature
+                             && 'kind' in feature.properties
+                             && ['cell-type', 'scaffold', 'tissue'].indexOf(feature.properties.kind) >= 0);
+                this.selectFeature_(featureId, dim);
             } else {
                 this.unselectFeature_(featureId);
             }
@@ -1103,6 +1111,20 @@ export class UserInteractions
 
         return true;
     }
+
+    enablePanZoomEvents(enabled=true)
+    //===============================
+    {
+        this.__pan_zoom_enabled = enabled;
+    }
+
+    panZoomEvent_(type)
+    //=================
+    {
+        if (this.__pan_zoom_enabled) {
+            this._flatmap.panZoomEvent(type);
+        }
+    }
 }
 
 //==============================================================================

package/src/styling.js

@@ -117,12 +117,22 @@ export class FeatureFillLayer extends VectorStyleLayer
         const paintStyle = {
             'fill-color': [
                 'case',
+                ['any',
+                      ['==', ['get', 'kind'], 'scaffold'],
+                      ['==', ['get', 'kind'], 'tissue'],
+                      ['==', ['get', 'kind'], 'cell-type']
+                ], "white",
                 ['boolean', ['feature-state', 'selected'], false], '#0F0',
                 ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
                 'white'    // background colour? body colour ??
             ],
             'fill-opacity': [
                 'case',
+                ['any',
+                      ['==', ['get', 'kind'], 'scaffold'],
+                      ['==', ['get', 'kind'], 'tissue'],
+                      ['==', ['get', 'kind'], 'cell-type']
+                ], 0.1,
                 ['boolean', ['feature-state', 'selected'], false], 1.0,
                 ['boolean', ['feature-state', 'active'], false], 0.8,
                 (coloured && !dimmed) ? 0.01 : 0.5
@@ -164,12 +174,12 @@ export class FeatureBorderLayer extends VectorStyleLayer
         const outlined = !('outline' in options) || options.outline;
         const dimmed = 'dimmed' in options && options.dimmed;
         const lineColour = [ 'case' ];
+        lineColour.push(['boolean', ['feature-state', 'selected'], false]);
+        lineColour.push('red');
         if (coloured && outlined) {
             lineColour.push(['boolean', ['feature-state', 'active'], false]);
             lineColour.push('blue');
         }
-        lineColour.push(['boolean', ['feature-state', 'selected'], false]);
-        lineColour.push('red');
         lineColour.push('#444');
 
         const lineOpacity = [
@@ -254,7 +264,17 @@ export class PathLineLayer extends VectorStyleLayer
     {
         const filterType = dashed ? 'line-dash' : 'line';
         super(mapLayerId, sourceLayer, filterType);
-        this.__filterType = filterType;
+        this.__filter = dashed ?
+            [
+                'any',
+                ['==', 'type', `line-dash`]
+            ]
+        :
+            [
+                'any',
+                ['==', 'type', 'bezier'],
+                ['==', 'type', `line`]
+            ];
         this.__dashed = dashed;
     }
 
@@ -278,7 +298,7 @@ export class PathLineLayer extends VectorStyleLayer
             ],
             'line-opacity': [
                 'case',
-                    ['==', ['get', 'type'], 'bezier'], 0.3,
+                    ['==', ['get', 'type'], 'bezier'], 1.0,
                     ['boolean', ['get', 'invisible'], false], 0.001,
                     ['boolean', ['feature-state', 'selected'], false], 1.0,
                     ['boolean', ['feature-state', 'active'], false], 0.8,
@@ -289,7 +309,7 @@ export class PathLineLayer extends VectorStyleLayer
                 'let',
                 'width', [
                     'case',
-                        ['==', ['get', 'type'], 'bezier'], 0.2,
+                        ['==', ['get', 'type'], 'bezier'], 0.1,
                         ['boolean', ['get', 'centreline'], false], 0.5,
                         ['boolean', ['get', 'invisible'], false], 0.1,
                         ['boolean', ['feature-state', 'selected'], false], 1.2,
@@ -319,10 +339,7 @@ export class PathLineLayer extends VectorStyleLayer
             'filter': [
                 'all',
                 ['==', '$type', 'LineString'],
-                ['any',
-                    ['==', 'type', 'bezier'],
-                    ['==', 'type', `${this.__filterType}`]
-                ]
+                this.__filter
             ],
             'paint': this.paintStyle(options)
         };
@@ -455,6 +472,7 @@ export class NervePolygonFill extends VectorStyleLayer
                 ['==', '$type', 'Polygon'],
                 ['any',
                     ['==', 'type', 'bezier'],
+                    ['==', 'type', 'junction'],
                     ['==', 'type', 'nerve'],
                     ['==', 'type', 'nerve-section']
                 ]
@@ -462,13 +480,22 @@ export class NervePolygonFill extends VectorStyleLayer
             'paint': {
                 'fill-color': [
                     'case',
-                    ['==', ['get', 'kind'], 'bezier-control'], 'red',
-                    ['==', ['get', 'kind'], 'bezier-end'], 'green',
+                    ['==', ['get', 'kind'], 'bezier-end'], 'red',
+                    ['==', ['get', 'kind'], 'bezier-control'], 'green',
+                    ['==', ['get', 'kind'], 'cns'], '#9B1FC1',
+                    ['==', ['get', 'kind'], 'lcn'], '#F19E38',
+                    ['==', ['get', 'kind'], 'para-post'], '#3F8F4A',
+                    ['==', ['get', 'kind'], 'para-pre'], '#3F8F4A',
+                    ['==', ['get', 'kind'], 'somatic'], '#98561D',
+                    ['==', ['get', 'kind'], 'sensory'], '#2A62F6',
+                    ['==', ['get', 'kind'], 'symp-post'], '#EA3423',
+                    ['==', ['get', 'kind'], 'symp-pre'], '#EA3423',
                     'white'
                 ],
                 'fill-opacity': [
                     'case',
-                    ['==', ['get', 'type'], 'bezier'], 0.2,
+                    ['==', ['get', 'type'], 'bezier'], 0.9,
+                    ['==', ['get', 'type'], 'junction'], 0.4,
                     0.01
                 ]
             }