@abi-software/flatmap-viewer 2.3.0-b.2 → 2.3.2-b.1

package/src/interactions.js

@@ -35,17 +35,17 @@ import polylabel from 'polylabel';
 
 import {Annotator} from './annotation';
 import {LayerManager} from './layers';
-import {PATHWAYS_LAYER, Pathways} from './pathways';
-import {COLOUR_ERROR, VECTOR_TILES_SOURCE} from './styling';
+import {PATHWAYS_LAYER, PathManager} from './pathways';
+import {VECTOR_TILES_SOURCE} from './styling';
 import {SystemsManager} from './systems';
 
 import {displayedProperties, InfoControl} from './controls/info';
 import {BackgroundControl, LayerControl, NerveControl,
-        PathControl, SCKANControl} from './controls/controls';
+        SCKANControl} from './controls/controls';
+import {PathControl} from './controls/paths';
 import {SearchControl} from './controls/search';
 import {SystemsControl} from './controls/systems';
 
-import * as pathways from './pathways';
 import * as utils from './utils';
 
 //==============================================================================
@@ -104,8 +104,6 @@ export class UserInteractions
         this._infoControl = null;
         this._tooltip = null;
 
-        this._disabledPathFeatures = false;
-
         this._inQuery = false;
         this._modal = false;
 
@@ -132,18 +130,21 @@ export class UserInteractions
 
         this._layerManager = new LayerManager(flatmap);
 
+        this.__featureEnabledCount = new Map(Array.from(this._flatmap.annotations.keys()).map(k => [+k, 0]));
+
+        const featuresEnabled = flatmap.options.style !== 'functional';
+
         // Path visibility is either controlled externally or by a local control
+        // FC path visiblitity is determined by system visiblity
 
-        this._pathways = new Pathways(flatmap);
+        this.__pathManager = new PathManager(flatmap, this, featuresEnabled);
 
         // The path types in this map
-        const mapPathTypes = this._pathways.pathTypes();
+        const mapPathTypes = this.__pathManager.pathTypes();
 
-        // Disable paths that are not initially shown
+        // Set initial enabled state of paths
         for (const path of mapPathTypes) {
-            if ('enabled' in path && !path.enabled) {
-                this.enablePath(path.type, false);
-            }
+            this.__pathManager.enablePathsByType(path.type, path.enabled, true);
         }
 
         // Add annotation capability
@@ -155,7 +156,7 @@ export class UserInteractions
 
         // Note features that are FC systems
 
-        this.__systemsManager = new SystemsManager(this._flatmap, this);
+        this.__systemsManager = new SystemsManager(this._flatmap, this, featuresEnabled);
 
         // Add various controls when running standalone
 
@@ -177,9 +178,9 @@ export class UserInteractions
             this._map.addControl(new LayerControl(flatmap, this._layerManager));
 
             // Add a control for nerve centrelines if they are present
-            if (this._pathways.haveCentrelines) {
+            if (this.__pathManager.haveCentrelines) {
                 this._map.addControl(new NerveControl(flatmap, this._layerManager, {showCentrelines: false}));
-                this.enableCentrelines(false);
+                this.enableCentrelines(false, true);
             }
 
             // SCKAN path and SYSTEMS controls for FC maps
@@ -203,10 +204,10 @@ export class UserInteractions
         this.__pan_zoom_enabled = false;
     }
 
-    get pathways()
-    //============
+    get pathManager()
+    //===============
     {
-        return this._pathways;
+        return this.__pathManager;
     }
 
     getState()
@@ -247,7 +248,7 @@ export class UserInteractions
     {
         // Add annotation capability
 
-        this.__annotator = new Annotator(this._flatmap);
+        this.__annotator = new Annotator(this._flatmap, this);
         const annotated_features = await this.__annotator.annotated_features();
 
         // Flag features that have annotations
@@ -302,32 +303,64 @@ export class UserInteractions
         return this.__systemsManager.systems;
     }
 
-    enableSystem(systemName, enable=true)
-    //===================================
+    enableSystem(systemId, enable=true)
+    //=================================
     {
-        this.__systemsManager.enable(systemName, enable);
+        this.__systemsManager.enable(systemId, enable);
     }
 
-    enableFeatureWithChildren(featureId, enable=true)
-    //===============================================
+    mapFeature(featureId)
+    //===================
+    {
+        const ann = this._flatmap.annotation(featureId);
+        if (ann !== undefined) {
+            return {
+                id: featureId,
+                source: VECTOR_TILES_SOURCE,
+                sourceLayer: (this._flatmap.options.separateLayers
+                             ? `${ann['layer']}_${ann['tile-layer']}`
+                             : ann['tile-layer']).replaceAll('/', '_'),
+                children: ann.children || []
+            };
+        }
+        return undefined;
+    }
+
+    enableMapFeature(feature, enable=true)
+    //====================================
     {
-        const feature = this.mapFeature(featureId);
         if (feature !== undefined) {
-            this.enableFeature(feature, enable);
-            for (const childFeatureId of feature.children) {
-                this.enableFeatureWithChildren(childFeatureId, enable);
+            if (enable) {
+                this._map.removeFeatureState(feature, 'hidden');
+            } else {
+                this._map.setFeatureState(feature, { 'hidden': true });
             }
+            this.__enableFeatureMarker(feature.id, enable);
         }
     }
 
-    __enableFeatureWithParents(featureId, enable=true)
+    enableFeature(featureId, enable=true, force=false)
     //================================================
+    {
+        const enabledCount = this.__featureEnabledCount.get(+featureId)
+        if (force || enable && enabledCount === 0 || !enable && enabledCount == 1) {
+            this.enableMapFeature(this.mapFeature(featureId), enable)
+        }
+        if (force) {
+            this.__featureEnabledCount.set(+featureId, enable ? 1 : 0);
+        } else {
+            this.__featureEnabledCount.set(+featureId, enabledCount + (enable ? 1 : -1));
+        }
+    }
+
+    enableFeatureWithChildren(featureId, enable=true, force=false)
+    //============================================================
     {
         const feature = this.mapFeature(featureId);
         if (feature !== undefined) {
-            this.enableFeature(feature, enable);
-            for (const childFeatureId of feature.parents) {
-                this.__enableFeatureWithParents(childFeatureId, enable);
+            this.enableFeature(featureId, enable, force);
+            for (const childFeatureId of feature.children) {
+                this.enableFeatureWithChildren(childFeatureId, enable, force);
             }
         }
     }
@@ -344,34 +377,12 @@ export class UserInteractions
         }
     }
 
-    enableFeature(feature, enable=true)
-    //=================================
-    {
-        if (feature !== undefined) {
-            if (enable) {
-                this._map.removeFeatureState(feature, 'hidden');
-            } else {
-                this._map.setFeatureState(feature, { 'hidden': true });
-            }
-            this.__enableFeatureMarker(feature.id, enable);
-        }
-    }
-
-    mapFeature(featureId)
-    //===================
+    __featureEnabled(feature)
+    //=======================
     {
-        const ann = this._flatmap.annotation(featureId);
-        if (ann !== undefined) {
-            return {
-                id: featureId,
-                source: VECTOR_TILES_SOURCE,
-                sourceLayer: (this._flatmap.options.separateLayers
-                             ? `${ann['layer']}_${ann['tile-layer']}`
-                             : ann['tile-layer']).replaceAll('/', '_'),
-                children: ann.children || []
-            };
-        }
-        return undefined;
+        const state = this._map.getFeatureState(feature);
+        return (state !== undefined
+            && (!('hidden' in state) || !state.hidden));
     }
 
     featureSelected_(featureId)
@@ -380,8 +391,8 @@ export class UserInteractions
         return this._selectedFeatureIds.has(+featureId);
     }
 
-    selectFeature_(featureId, dim=true)
-    //=================================
+    selectFeature(featureId, dim=true)
+    //================================
     {
         featureId = +featureId;   // Ensure numeric
         if (this._selectedFeatureIds.size === 0) {
@@ -398,8 +409,8 @@ export class UserInteractions
         }
     }
 
-    unselectFeature_(featureId)
-    //=========================
+    unselectFeature(featureId)
+    //========================
     {
         featureId = +featureId;   // Ensure numeric
         if (this._selectedFeatureIds.has(featureId)) {
@@ -419,8 +430,8 @@ export class UserInteractions
         }
     }
 
-    __unselectFeatures()
-    //==================
+    unselectFeatures()
+    //================
     {
         for (const featureId of this._selectedFeatureIds.keys()) {
             const feature = this.mapFeature(featureId);
@@ -433,7 +444,7 @@ export class UserInteractions
     }
 
     __activateFeature(feature)
-    //=======================
+    //========================
     {
         if (feature !== undefined) {
             this._map.setFeatureState(feature, { active: true });
@@ -499,16 +510,15 @@ export class UserInteractions
     //=====
     {
         this.__clearModal();
-        this.clearActiveMarker_();
-        this.__unselectFeatures();
-        this.enablePathFeatures_(true, this._pathways.allFeatureIds());
-        this._disabledPathFeatures = false;
+        this.__clearActiveMarker();
+        this.unselectFeatures();
+        this.__enablePathFeatures(this.__pathManager.allFeatureIds(), true);
     }
 
     clearSearchResults(reset=true)
     //============================
     {
-        this.__unselectFeatures();
+        this.unselectFeatures();
     }
 
     /**
@@ -526,7 +536,7 @@ export class UserInteractions
                 if (annotation) {
                     this.highlightFeature_(featureId);
                     if ('type' in annotation && annotation.type.startsWith('line')) {
-                        for (const pathFeatureId of this._pathways.lineFeatureIds([featureId])) {
+                        for (const pathFeatureId of this.__pathManager.lineFeatureIds([featureId])) {
                             this.highlightFeature_(pathFeatureId);
                         }
                     }
@@ -544,14 +554,14 @@ export class UserInteractions
     //========================
     {
         if (featureIds.length) {
-            this.__unselectFeatures();
+            this.unselectFeatures();
             for (const featureId of featureIds) {
                 const annotation = this._flatmap.annotation(featureId);
                 if (annotation) {
-                    this.selectFeature_(featureId);
+                    this.selectFeature(featureId);
                     if ('type' in annotation && annotation.type.startsWith('line')) {
-                        for (const pathFeatureId of this._pathways.lineFeatureIds([featureId])) {
-                            this.selectFeature_(pathFeatureId);
+                        for (const pathFeatureId of this.__pathManager.lineFeatureIds([featureId])) {
+                            this.selectFeature(pathFeatureId);
                         }
                     }
                 }
@@ -588,7 +598,7 @@ export class UserInteractions
         const highlight = (options.highlight === true);
         if (featureIds.length) {
             this.unhighlightFeatures_();
-            if (select) this.__unselectFeatures();
+            if (select) this.unselectFeatures();
             let bbox = null;
             if (options.noZoomIn) {
                 const bounds = this._map.getBounds().toArray();
@@ -598,15 +608,15 @@ export class UserInteractions
                 const annotation = this._flatmap.annotation(featureId);
                 if (annotation) {
                     if (select) {
-                        this.selectFeature_(featureId);
+                        this.selectFeature(featureId);
                     } else if (highlight) {
                         this.highlightFeature_(featureId);
                     }
                     bbox = expandBounds(bbox, annotation.bounds);
                     if ('type' in annotation && annotation.type.startsWith('line')) {
-                        for (const pathFeatureId of this._pathways.lineFeatureIds([featureId])) {
+                        for (const pathFeatureId of this.__pathManager.lineFeatureIds([featureId])) {
                             if (select) {
-                                this.selectFeature_(pathFeatureId);
+                                this.selectFeature(pathFeatureId);
                             } else if (highlight) {
                                 this.highlightFeature_(pathFeatureId);
                             }
@@ -639,8 +649,8 @@ export class UserInteractions
 
             // Highlight the feature
 
-            this.__unselectFeatures();
-            this.selectFeature_(featureId);
+            this.unselectFeatures();
+            this.selectFeature(featureId);
 
             // Find the pop-up's postion
 
@@ -675,7 +685,7 @@ export class UserInteractions
     //============
     {
         this.__clearModal();
-        this.__unselectFeatures();
+        this.unselectFeatures();
     }
 
     removeTooltip_()
@@ -746,7 +756,7 @@ export class UserInteractions
     {
         if (feature.sourceLayer === PATHWAYS_LAYER) {  // I suspect this is never true as source layer
                                                        // names are like `neural_routes_pathways`
-            return this._flatmap.featureEvent(type, this._pathways.pathProperties(feature));
+            return this._flatmap.featureEvent(type, this.__pathManager.pathProperties(feature));
         } else if ('properties' in feature) {
             return this._flatmap.featureEvent(type, feature.properties);
         }
@@ -785,7 +795,7 @@ export class UserInteractions
 
         // Get all the features at the current point
         const features = this._map.queryRenderedFeatures(event.point)
-                             .filter(feature => this.__enabledFeature(feature));
+                             .filter(feature => this.__featureEnabled(feature));
         if (features.length === 0) {
             this._lastFeatureMouseEntered = null;
             this._lastFeatureModelsMouse = null;
@@ -821,13 +831,15 @@ export class UserInteractions
         const lineFeatures = features.filter(feature => ('centreline' in feature.properties
                                                       || ('type' in feature.properties
                                                         && feature.properties.type.startsWith('line')) ));
+        let tooltipFeature = null;
         if (lineFeatures.length > 0) {
             tooltip = this.lineTooltip_(lineFeatures);
+            tooltipFeature = lineFeatures[0];
             for (const lineFeature of lineFeatures) {
                 const lineFeatureId = +lineFeature.properties.featureId;  // Ensure numeric
                 this.__activateFeature(lineFeature);
                 const lineIds = new Set(lineFeatures.map(f => f.properties.featureId));
-                for (const featureId of this._pathways.lineFeatureIds(lineIds)) {
+                for (const featureId of this.__pathManager.lineFeatureIds(lineIds)) {
                     if (+featureId !== lineFeatureId) {
                         this.__activateFeature(this.mapFeature(featureId));
                     }
@@ -850,6 +862,7 @@ export class UserInteractions
                 }
                 const feature = labelledFeatures[0];
                 tooltip = this.tooltipHtml_(feature.properties);
+                tooltipFeature = feature;
                 if (this._flatmap.options.debug) {  // Do this when Info on and not debug??
                     const debugProperties = [
                         'featureId',
@@ -888,11 +901,11 @@ export class UserInteractions
         if (displayInfo || this._flatmap.options.debug) {
             this._infoControl.show(info);
         }
-        this.__showToolTip(tooltip, event.lngLat);
+        this.__showToolTip(tooltip, event.lngLat, tooltipFeature);
     }
 
-    __showToolTip(html, lngLat)
-    //=========================
+    __showToolTip(html, lngLat, feature=null)
+    //=======================================
     {
         // Show a tooltip
         if (html !== '') {
@@ -906,7 +919,10 @@ export class UserInteractions
                 const pt = turf.point(lngLat.toArray());
                 const gps = turfProjection.toMercator(pt);
                 const coords = gps.geometry.coordinates;
-                html = `<span>${JSON.stringify(coords)}</span><br/>${html}`;
+                const header = (feature === null)
+                             ? JSON.stringify(coords)
+                             : `${JSON.stringify(coords)} (${feature.id} ${feature.properties['id']})`;
+                html = `<span>${header}</span><br/>${html}`;
             }
             this._tooltip
                 .setLngLat(lngLat)
@@ -931,27 +947,27 @@ export class UserInteractions
                         break;
                     }
                 }
-                this.__unselectFeatures();
+                this.unselectFeatures();
                 if (selecting) {
                     for (const feature of this._activeFeatures) {
-                        this.selectFeature_(feature.id, dim);
+                        this.selectFeature(feature.id, dim);
                     }
                 }
             } else {
                 const clickedSelected = this.featureSelected_(clickedFeatureId);
                 for (const feature of this._activeFeatures) {
                     if (clickedSelected) {
-                        this.unselectFeature_(feature.id);
+                        this.unselectFeature(feature.id);
                     } else {
-                        this.selectFeature_(feature.id, dim);
+                        this.selectFeature(feature.id, dim);
                     }
                 }
             }
         }
     }
 
-    __annotationEvent(feature)
-    //========================
+    __annotationEvent(features)
+    //=========================
     {
         if (!this.__annotator) {
             return;
@@ -962,15 +978,12 @@ export class UserInteractions
         // Remove any tooltip
         this.removeTooltip_();
 
-        // Select the feature
-        this.selectFeature_(feature.id);
-
         // Don't respond to mouse events while the dialog is open
         this.setModal_();
 
         // The annotation dialog...
-        this.__annotator.annotate(feature, e => {
-            this.__unselectFeatures();
+        this.__annotator.annotate(features, () => {
+            this.unselectFeatures();
             this.__clearModal();
         });
     }
@@ -982,25 +995,25 @@ export class UserInteractions
             return;
         }
 
-        this.clearActiveMarker_();
+        this.__clearActiveMarker();
         const clickedFeatures = this._map.queryRenderedFeatures(event.point)
-                                    .filter(feature => this.__enabledFeature(feature));
+                                    .filter(feature => this.__featureEnabled(feature));
         if (clickedFeatures.length == 0){
-            this.__unselectFeatures();
+            this.unselectFeatures();
             return;
         }
-        const clickedFeature = clickedFeatures[0];
         const originalEvent = event.originalEvent;
         if (originalEvent.altKey) {
-            this.__annotationEvent(clickedFeature);
+            this.__annotationEvent(clickedFeatures);
             return;
         }
 
+        const clickedFeature = clickedFeatures[0];
         this.selectionEvent_(originalEvent, clickedFeature);
         if (this._modal) {
             // Remove tooltip, reset active features, etc
             this.__resetFeatureDisplay();
-            this.__unselectFeatures();
+            this.unselectFeatures();
             this.__clearModal();
         } else if (clickedFeature !== undefined) {
             this.__lastClickLngLat = event.lngLat;
@@ -1015,93 +1028,65 @@ export class UserInteractions
     //================================
     {
         if ('nerveId' in feature.properties) {
-            for (const featureId of this._pathways.nerveFeatureIds(feature.properties.nerveId)) {
+            const nerveId = feature.properties.nerveId;
+            if (nerveId !== feature.id) {
+                this.__activateFeature(this.mapFeature(nerveId));
+            }
+            for (const featureId of this.__pathManager.nerveFeatureIds(nerveId)) {
                 this.__activateFeature(this.mapFeature(featureId));
             }
         }
         if ('nodeId' in feature.properties) {
-            for (const featureId of this._pathways.nodeFeatureIds(feature.properties.nodeId)) {
+            for (const featureId of this.__pathManager.nodeFeatureIds(feature.properties.nodeId)) {
                 this.__activateFeature(this.mapFeature(featureId));
             }
         }
     }
 
-    __enabledFeature(feature)
-    //=======================
-    {
-        const state = this._map.getFeatureState(feature);
-        return (state !== undefined
-            && (!('hidden' in state) || !state.hidden));
-    }
-
-    enablePaths_(enable, event)
-    //=========================
-    {
-        const nodeId = event.target.getAttribute('featureId');
-        this.enablePathFeatures_(enable, this._pathways.pathFeatureIds(nodeId));
-        this.__clearModal();
-    }
-
-    enablePathFeatures_(enable, featureIds)
-    //=====================================
+    enablePath(pathId, enable=true)
+    //=============================
     {
-        for (const featureId of featureIds) {
-            const feature = this.mapFeature(featureId);
-            if (feature !== undefined) {
-                if (enable) {
-                    this._map.removeFeatureState(feature, 'hidden');
-                } else {
-                    this._map.setFeatureState(feature, { 'hidden': true });
-                    this._disabledPathFeatures = true;
-                }
-            }
-        }
+        this.__pathManager.enablePath(pathId, enable);
     }
 
-    togglePaths()
-    //===========
+    enablePathsBySystem(system, enable=true, force=false)
+    //===================================================
     {
-        console.log('Depracated API function called: togglePaths()')
-        if (this._disabledPathFeatures){
-            this.enablePathFeatures_(true, this._pathways.allFeatureIds());
-            this._disabledPathFeatures = false;
-        } else {
-            this.enablePathFeatures_(false, this._pathways.allFeatureIds());
-        }
+        this.__pathManager.enablePathsBySystem(system, enable, force);
     }
 
-    enablePath(pathType, enable=true)
-    //===============================
+    enablePathsByType(pathType, enable=true)
+    //======================================
     {
-        this.enablePathFeatures_(enable, this._pathways.typeFeatureIds(pathType));
+        this.__pathManager.enablePathsByType(pathType, enable);
     }
 
-    pathwaysFeatureIds(externalIds)
-    //=============================
+    pathFeatureIds(externalIds)
+    //=========================
     {
         const featureIds = new utils.List();
-        featureIds.extend(this._pathways.connectivityModelFeatureIds(externalIds));
-        featureIds.extend(this._pathways.pathModelFeatureIds(externalIds));
+        featureIds.extend(this.__pathManager.connectivityModelFeatureIds(externalIds));
+        featureIds.extend(this.__pathManager.pathModelFeatureIds(externalIds));
         return featureIds;
     }
 
     nodePathModels(nodeId)
     //====================
     {
-        return this._pathways.nodePathModels(nodeId);
+        return this.__pathManager.nodePathModels(nodeId);
     }
 
-    enableCentrelines(show=true)
-    //==========================
+    enableCentrelines(enable=true, force=false)
+    //=========================================
     {
-        this.enablePath('centreline', show);
-        this._layerManager.setPaint({showCentrelines: show});
+        this.__pathManager.enablePathsByType('centreline', enable, force);
+        this._layerManager.setPaint({showCentrelines: enable});
     }
 
-    enableSckanPath(sckanState, enable=true)
-    //======================================
+    enableSckanPaths(sckanState, enable=true)
+    //=======================================
     {
-        this._layerManager.enableSckanPath(sckanState, enable);
+        this._layerManager.enableSckanPaths(sckanState, enable);
     }
 
     //==============================================================================
@@ -1278,7 +1263,7 @@ export class UserInteractions
         event.stopPropagation();
     }
 
-    clearActiveMarker_()
+    __clearActiveMarker()
     //==================
     {
         if (this.__activeMarker !== null) {
@@ -1292,7 +1277,7 @@ export class UserInteractions
     {
         const marker = this.__activeMarker;
         if (markerId !== this.__markerIdByMarker.get(marker)) {
-            this.clearActiveMarker_();
+            this.__clearActiveMarker();
             return false;
         }
 
@@ -1311,7 +1296,7 @@ export class UserInteractions
             element.innerHTML = content;
         }
 
-        element.addEventListener('click', e => this.clearActiveMarker_());
+        element.addEventListener('click', e => this.__clearActiveMarker());
 
         this._tooltip = new maplibre.Popup({
             closeButton: false,

package/src/layers.js

@@ -331,8 +331,8 @@ export class LayerManager
         }
     }
 
-    enableSckanPath(sckanState, enable=true)
-    //======================================
+    enableSckanPaths(sckanState, enable=true)
+    //=======================================
     {
         const currentState = this.__layerOptions.sckan;
         const validEnabled = ['valid', 'all'].indexOf(currentState) >= 0;