@abi-software/flatmap-viewer 2.6.1 → 2.6.2

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.6.1``
+* ``npm install @abi-software/flatmap-viewer@2.6.2``
 
 Documentation
 -------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": {
     "type": "git",

package/src/controls/{paths3d.js → flightpaths.js}

@@ -18,7 +18,7 @@ limitations under the License.
 
 ******************************************************************************/
 
-export class Path3DControl
+export class FlightPathControl
 {
     #button
     #container
@@ -26,9 +26,10 @@ export class Path3DControl
     #map = null
     #flatmap
 
-    constructor(flatmap)
+    constructor(flatmap, enabled)
     {
         this.#flatmap = flatmap
+        this.#enabled = !!enabled
     }
 
     getDefaultPosition()
@@ -46,11 +47,15 @@ export class Path3DControl
         this.#button = document.createElement('button')
         this.#button.className = 'control-button text-button'
         this.#button.setAttribute('type', 'button')
-        this.#button.setAttribute('aria-label', 'Show 3D paths')
+        this.#button.setAttribute('aria-label', 'Show flight paths')
         this.#button.textContent = '3D'
-        this.#button.title = 'Show/hide 3D paths'
+        this.#button.title = 'Show/hide flight paths'
         this.#container.appendChild(this.#button)
         this.#container.addEventListener('click', this.onClick.bind(this))
+        if (this.#enabled) {
+            this.#button.classList.add('control-active')
+            this.__setBackground()
+        }
         return this.#container
     }
 
@@ -75,11 +80,11 @@ export class Path3DControl
     //=============
     {
         if (this.#button.classList.contains('control-active')) {
-            this.#flatmap.enable3dPaths(false)
+            this.#flatmap.enableFlightPaths(false)
             this.#button.classList.remove('control-active')
             this.#enabled = false
         } else {
-            this.#flatmap.enable3dPaths(true)
+            this.#flatmap.enableFlightPaths(true)
             this.#button.classList.add('control-active')
             this.#enabled = true
         }

package/src/flatmap-viewer.js

@@ -901,15 +901,15 @@ class FlatMap
     }
 
     /**
-     * Show/hide 3D path view.
+     * Show/hide flight path view.
      *
      * @param      {boolean}  [enable=true]
      */
-    enable3dPaths(enable=true)
-    //========================
+    enableFlightPaths(enable=true)
+    //============================
     {
         if (this._userInteractions !== null) {
-            this._userInteractions.enable3dPaths(enable)
+            this._userInteractions.enableFlightPaths(enable)
         }
     }
 
@@ -1569,6 +1569,7 @@ export class MapManager
     * @arg options {Object} Configurable options for the map.
     * @arg options.background {string} Background colour of flatmap. Defaults to ``white``.
     * @arg options.debug {boolean} Enable debugging mode.
+    * @arg options.flightPaths {boolean} Enable flight path (3D) view of neuron paths
     * @arg options.fullscreenControl {boolean} Add a ``Show full screen`` button to the map.
     * @arg options.layerOptions {Object} Options to control colour and outlines of features
     * @arg options.layerOptions.colour {boolean} Use colour fill (if available) for features. Defaults to ``true``.

package/src/interactions.js

@@ -43,7 +43,7 @@ import {AnnotatorControl, BackgroundControl, LayerControl, NerveControl,
         SCKANControl} from './controls/controls';
 import {AnnotationDrawControl, DRAW_ANNOTATION_LAYERS} from './controls/annotation'
 import {PathControl} from './controls/paths';
-import {Path3DControl} from './controls/paths3d'
+import {FlightPathControl} from './controls/flightpaths'
 import {SearchControl} from './controls/search';
 import {MinimapControl} from './controls/minimap';
 import {SystemsControl} from './controls/systems';
@@ -180,12 +180,14 @@ export class UserInteractions
         const mapPathTypes = this.__pathManager.pathTypes();
 
         // Add and manage our layers. NB. this needs to after we have a
-        // path manager but before path enabled state is set.
+        // path manager but before paths are enabled
 
         this._layerManager = new LayerManager(flatmap, this);
 
         // Set initial enabled state of paths
 
+        this.__pathManager.enablePathLines(true, true)
+
         for (const path of mapPathTypes) {
             this.__pathManager.enablePathsByType(path.type, path.enabled, true);
         }
@@ -251,7 +253,7 @@ export class UserInteractions
                 this._map.addControl(new TaxonsControl(flatmap));
             }
 
-            this._map.addControl(new Path3DControl(this));
+            this._map.addControl(new FlightPathControl(this, flatmap.options.flightPaths));
 
             if (flatmap.options.annotator) {
                 this._map.addControl(new AnnotatorControl(flatmap));
@@ -265,6 +267,11 @@ export class UserInteractions
         this.#annotationDrawControl = new AnnotationDrawControl(flatmap, false)
         this._map.addControl(this.#annotationDrawControl)
 
+        // Set initial path viewing mode
+        if (flatmap.options.flightPaths === true) {
+            this._layerManager.setFlightPathMode(true)
+        }
+
         // Handle mouse events
 
         this._map.on('click', this.clickEvent_.bind(this));
@@ -456,10 +463,10 @@ export class UserInteractions
         this._layerManager.activate(layerId, enable);
     }
 
-    enable3dPaths(enable=true)
-    //========================
+    enableFlightPaths(enable=true)
+    //============================
     {
-        this._layerManager.set3dMode(enable)
+        this._layerManager.setFlightPathMode(enable)
     }
 
     getSystems()
@@ -1305,6 +1312,7 @@ export class UserInteractions
     // Marker handling
 
     __markerPosition(featureId, annotation)
+    //=====================================
     {
         if (this.__markerPositions.has(featureId)) {
             return this.__markerPositions.get(featureId);
@@ -1364,23 +1372,27 @@ export class UserInteractions
                     markerOptions.className = options.className;
                 }
                 const markerPosition = this.__markerPosition(featureId, annotation);
-                const marker = new maplibregl.Marker(markerOptions)
-                                             .setLngLat(markerPosition)
-                                             .addTo(this._map);
-                markerElement.addEventListener('mouseenter',
-                    this.markerMouseEvent_.bind(this, marker, anatomicalId));
-                markerElement.addEventListener('mousemove',
-                    this.markerMouseEvent_.bind(this, marker, anatomicalId));
-                markerElement.addEventListener('mouseleave',
-                    this.markerMouseEvent_.bind(this, marker, anatomicalId));
-                markerElement.addEventListener('click',
-                    this.markerMouseEvent_.bind(this, marker, anatomicalId));
-
-                this.__markerIdByMarker.set(marker, markerId);
-                this.__markerIdByFeatureId.set(+featureId, markerId);
-                this.__annotationByMarkerId.set(markerId, annotation);
-                if (!this.__featureEnabled(this.mapFeature(+featureId))) {
-                    markerElement.style.visibility = 'hidden';
+                if (options.cluster && this._layerManager) {
+                    this._layerManager.addMarkers([markerPosition])
+                } else {
+                    const marker = new maplibregl.Marker(markerOptions)
+                                                 .setLngLat(markerPosition)
+                                                 .addTo(this._map);
+                    markerElement.addEventListener('mouseenter',
+                        this.markerMouseEvent_.bind(this, marker, anatomicalId));
+                    markerElement.addEventListener('mousemove',
+                        this.markerMouseEvent_.bind(this, marker, anatomicalId));
+                    markerElement.addEventListener('mouseleave',
+                        this.markerMouseEvent_.bind(this, marker, anatomicalId));
+                    markerElement.addEventListener('click',
+                        this.markerMouseEvent_.bind(this, marker, anatomicalId));
+
+                    this.__markerIdByMarker.set(marker, markerId);
+                    this.__markerIdByFeatureId.set(+featureId, markerId);
+                    this.__annotationByMarkerId.set(markerId, annotation);
+                    if (!this.__featureEnabled(this.mapFeature(+featureId))) {
+                        markerElement.style.visibility = 'hidden';
+                    }
                 }
             }
         }

package/src/layers/{paths3d.js → flightpaths.js}

@@ -135,7 +135,7 @@ class ArcDashedLayer extends ArcMapLayer
 
 //==============================================================================
 
-export class Paths3DLayer
+export class FlightPathLayer
 {
     #arcLayers = new Map()
     #deckOverlay = null
@@ -366,13 +366,14 @@ export class Paths3DLayer
             source: 'vector-tiles',
             sourceLayer: `${pickedObject.layer}_${pickedObject['tile-layer']}`,
             properties: pickedObject,
-            arc3dLayer: true
+            flightPath: true
         }
     }
 
     #setupDeckOverlay()
     //=================
     {
+        // One overlay layer for each path style
         [...this.#pathStyles.values()].filter(style => this.#pathManager.pathTypeEnabled(style.type))
                                       .forEach(style => this.#addArcLayer(style.type))
         this.#deckOverlay = new DeckOverlay({

package/src/layers/index.js

@@ -27,7 +27,7 @@ import * as utils from '../utils.js';
 
 import * as style from './styling.js';
 
-import {Paths3DLayer} from './paths3d'
+import {FlightPathLayer} from './flightpaths'
 import {PropertiesFilter} from './filter'
 
 const FEATURES_LAYER = 'features';
@@ -183,8 +183,8 @@ class MapFeatureLayers extends MapStylingLayers
         }
     }
 
-    enablePaths2dLayer(visible)
-    //=========================
+    setFlatPathMode(visible)
+    //======================
     {
         for (const layer of this.#pathLayers) {
             this.map.setLayoutProperty(layer.id, 'visibility', visible ? 'visible' : 'none')
@@ -266,7 +266,7 @@ class MapRasterLayers extends MapStylingLayers
 export class LayerManager
 {
     #featureLayers = new Map()
-    #paths3dLayer = null
+    #flightPathLayer = null
     #rasterLayer = null
 
     constructor(flatmap, ui)
@@ -306,8 +306,8 @@ export class LayerManager
                                                                    this.__layerOptions));
         }
 
-        // Support 3D path view
-        this.#paths3dLayer = new Paths3DLayer(flatmap, ui)
+        // Support flight path view
+        this.#flightPathLayer = new FlightPathLayer(flatmap, ui)
     }
 
     get layers()
@@ -360,8 +360,8 @@ export class LayerManager
     //====================
     {
         let features = []
-        if (this.#paths3dLayer) {
-            features = this.#paths3dLayer.queryFeaturesAtPoint(point)
+        if (this.#flightPathLayer) {
+            features = this.#flightPathLayer.queryFeaturesAtPoint(point)
         }
         if (features.length === 0) {
             features = this.__map.queryRenderedFeatures(point)
@@ -372,16 +372,16 @@ export class LayerManager
     removeFeatureState(feature, key)
     //==============================
     {
-        if (this.#paths3dLayer) {
-            this.#paths3dLayer.removeFeatureState(feature.id, key)
+        if (this.#flightPathLayer) {
+            this.#flightPathLayer.removeFeatureState(feature.id, key)
         }
     }
 
     setFeatureState(feature, state)
     //=============================
     {
-        if (this.#paths3dLayer) {
-            this.#paths3dLayer.setFeatureState(feature.id, state)
+        if (this.#flightPathLayer) {
+            this.#flightPathLayer.setFeatureState(feature.id, state)
         }
     }
 
@@ -395,8 +395,8 @@ export class LayerManager
         for (const mapLayer of this.#featureLayers.values()) {
             mapLayer.setPaint(this.__layerOptions)
         }
-        if (this.#paths3dLayer) {
-            this.#paths3dLayer.setPaint(options)
+        if (this.#flightPathLayer) {
+            this.#flightPathLayer.setPaint(options)
         }
     }
 
@@ -407,7 +407,7 @@ export class LayerManager
         for (const mapLayer of this.#featureLayers.values()) {
             mapLayer.setFilter(this.__layerOptions);
         }
-        if (this.#paths3dLayer) {
+        if (this.#flightPathLayer) {
             const sckanState = options.sckan || 'valid'
             const sckanFilter = (sckanState == 'none') ? {NOT: {HAS: 'sckan'}} :
                                 (sckanState == 'valid') ? {sckan: true} :
@@ -417,17 +417,17 @@ export class LayerManager
             if ('taxons' in options) {
                 featureFilter.narrow({taxons: options.taxons})
             }
-            this.#paths3dLayer.setFilter(featureFilter)
+            this.#flightPathLayer.setFilter(featureFilter)
         }
     }
 
-    set3dMode(enable=true)
-    //====================
+    setFlightPathMode(enable=true)
+    //============================
     {
-        if (this.#paths3dLayer) {
-            this.#paths3dLayer.enable(enable)
+        if (this.#flightPathLayer) {
+            this.#flightPathLayer.enable(enable)
             for (const mapLayer of this.#featureLayers.values()) {
-                mapLayer.enablePaths2dLayer(!enable)
+                mapLayer.setFlatPathMode(!enable)
             }
         }
     }

package/src/pathways.js

@@ -92,9 +92,6 @@ export class PathManager
                 pathLines[pathId] = path.lines;
                 pathNerves[pathId] = path.nerves;
                 this.__paths[pathId] = path;
-                for (const lineId of path.lines) {
-                    this.__ui.enableFeature(lineId, enabled, true);
-                }
                 this.__paths[pathId].systemCount = 0;
                 if ('models' in path) {
                     const modelId = path['models'];
@@ -316,6 +313,14 @@ export class PathManager
         return featureIds;
     }
 
+    enablePathLines(enable, force=false)
+    //==================================
+    {
+        for (const lineId of Object.keys(this.__pathsByLine)) {
+            this.__ui.enableFeature(lineId, enable, force)
+        }
+    }
+
     enablePathsBySystem(system, enable, force=false)
     //==============================================
     {