@abi-software/flatmap-viewer 2.2.11-devel.1 → 2.2.12-b.1

package/src/interactions.js

@@ -37,8 +37,8 @@ import {ContextMenu} from './contextmenu.js';
 import {displayedProperties} from './info.js';
 import {InfoControl} from './info.js';
 import {LayerManager} from './layers.js';
-import {PATH_TYPES, PATHWAYS_LAYER, Pathways} from './pathways.js';
-import {BackgroundControl, LayerControl, PathControl, SCKANControl} from './controls.js';
+import {PATHWAYS_LAYER, Pathways} from './pathways.js';
+import {BackgroundControl, LayerControl, NerveControl, PathControl, SCKANControl} from './controls.js';
 import {SearchControl} from './search.js';
 import {VECTOR_TILES_SOURCE} from './styling.js';
 
@@ -118,61 +118,59 @@ export class UserInteractions
         this.__annotationByMarkerId = new Map();
 
         // Where to put labels and popups on a feature
-        this.__centralPositions = new Map();
-
-        // MapLibre dynamically sets a transform on marker elements so in
-        // order to apply a scale transform we need to create marker icons
-        // inside the marker container <div>.
-        this._defaultMarkerHTML = new maplibre.Marker().getElement().innerHTML;
-        this._simulationMarkerHTML = new maplibre.Marker({color: '#005974'}).getElement().innerHTML;
+        this.__markerPositions = new Map();
 
         // Fit the map to its initial position
 
         flatmap.setInitialPosition();
 
-        // Add a control to search annotations if option set
+        // Add and manage our layers
 
-        if (flatmap.options.searchable) {
-            this._map.addControl(new SearchControl(flatmap));
-        }
+        this._layerManager = new LayerManager(flatmap);
 
-        // Show information about features
+        // Path visibility is either controlled externally or by a local control
 
-        if (flatmap.options.featureInfo || flatmap.options.searchable) {
-            this._infoControl = new InfoControl(flatmap);
-            if (flatmap.options.featureInfo) {
-                this._map.addControl(this._infoControl);
+        this._pathways = new Pathways(flatmap);
+
+        // The path types in this map
+        const mapPathTypes = this._pathways.pathTypes();
+
+        // Disable paths that are not initially shown
+        for (const path of mapPathTypes) {
+            if ('enabled' in path && !path.enabled) {
+                this.enablePath(path.type, false);
             }
         }
 
-        // Add and manage our layers
+        // Add various controls when running standalone
 
-        this._layerManager = new LayerManager(flatmap);
+        if (flatmap.options.standalone) {
+            // Add a control to search annotations if option set
+            this._map.addControl(new SearchControl(flatmap));
 
-        // Control background colour (NB. this depends on having map layers created)
+            // Show information about features
+            this._infoControl = new InfoControl(flatmap);
+            this._map.addControl(this._infoControl);
 
-        if (flatmap.options.backgroundControl) {
+            // Control background colour (NB. this depends on having map layers created)
             this._map.addControl(new BackgroundControl(flatmap));
-        }
-
-        // Neural pathways which are either controlled externally
-        // or by our local controls
-
-        this._pathways = new Pathways(flatmap);
 
-        // Add a control to manage our pathways
+            // Add a control to manage our paths
+            this._map.addControl(new PathControl(flatmap, mapPathTypes));
 
-        if (flatmap.options.pathControls) {
-            // Restrict to path types that are on the map...
-            this._map.addControl(new PathControl(flatmap, this._pathways.pathTypes));
-        }
+            // Add a control to manage our layers
+            this._map.addControl(new LayerControl(flatmap, this._layerManager));
 
-        // Add a control to manage our layers
+            // Add a control for nerve centrelines if they are present
+            if (this._pathways.haveCentrelines) {
+                this._map.addControl(new NerveControl(flatmap, this._layerManager, {showCentrelines: false}));
+                this.enableCentrelines(false);
+            }
 
-        if (flatmap.options.layerControl) {
-            this._map.addControl(new LayerControl(flatmap, this._layerManager));
-            // ************************************
-            //this._map.addControl(new SCKANControl(flatmap));
+            // A SCKAN path control for FC maps
+            if (flatmap.options.style === 'functional') {
+                this._map.addControl(new SCKANControl(flatmap, flatmap.options.layerOptions));
+            }
         }
 
         // Flag features that have annotations
@@ -180,9 +178,6 @@ export class UserInteractions
 
         for (const [id, ann] of flatmap.annotations) {
             const feature = this.mapFeature_(id);
-            if (id == 118) {
-                console.log(feature, ann);
-            }
             if (feature !== undefined) {
                 this._map.setFeatureState(feature, { 'annotated': true });
             }
@@ -218,6 +213,12 @@ export class UserInteractions
         this.__pan_zoom_enabled = false;
     }
 
+    get pathways()
+    //============
+    {
+        return this._pathways;
+    }
+
     getState()
     //========
     {
@@ -226,7 +227,7 @@ export class UserInteractions
         return {
             center: this._map.getCenter().toArray(),
             zoom: this._map.getZoom(),
-            layers: this.activeLayerNames
+            layers: this.layers
         };
     }
 
@@ -251,17 +252,23 @@ export class UserInteractions
         }
     }
 
-    setColour(options)
-    //================
+    setPaint(options)
+    //===============
     {
         this.__colourOptions = options;
-        this._layerManager.setColour(options);
+        this._layerManager.setPaint(options);
     }
 
-    get activeLayerNames()
-    //====================
+    getLayers()
+    //=========
+    {
+        return this._layerManager.layers;
+    }
+
+    enableLayer(layerId, enable=true)
+    //===============================
     {
-        return this._layerManager.activeLayerNames;
+        this._layerManager.activate(layerId, enable);
     }
 
     mapFeature_(featureId)
@@ -290,7 +297,7 @@ export class UserInteractions
     {
         featureId = +featureId;   // Ensure numeric
         if (this._selectedFeatureIds.size === 0) {
-            this._layerManager.setColour({...this.__colourOptions, dimmed: dim});
+            this._layerManager.setPaint({...this.__colourOptions, dimmed: dim});
         }
         if (this._selectedFeatureIds.has(featureId)) {
             this._selectedFeatureIds.set(featureId, this._selectedFeatureIds.get(featureId) + 1);
@@ -320,7 +327,7 @@ export class UserInteractions
             }
         }
         if (this._selectedFeatureIds.size === 0) {
-            this._layerManager.setColour({...this.__colourOptions, dimmed: false});
+            this._layerManager.setPaint({...this.__colourOptions, dimmed: false});
         }
     }
 
@@ -334,7 +341,7 @@ export class UserInteractions
             }
         }
         this._selectedFeatureIds.clear();
-        this._layerManager.setColour({...this.__colourOptions, dimmed: false});
+        this._layerManager.setPaint({...this.__colourOptions, dimmed: false});
     }
 
     activeFeaturesAtEvent_(event)
@@ -561,7 +568,6 @@ export class UserInteractions
                     }
                     bbox = expandBounds(bbox, annotation.bounds);
                     if ('type' in annotation && annotation.type.startsWith('line')) {
-// FC may have lines that are not pathways features, esp. when authoring...
                         for (const pathFeatureId of this._pathways.lineFeatureIds([featureId])) {
                             if (select) {
                                 this.selectFeature_(pathFeatureId);
@@ -609,7 +615,7 @@ export class UserInteractions
                 location = this.__lastClickLngLat;
             } else {
                 // Position popup at the feature's 'centre'
-                location = this.__centralPosition(featureId, ann);
+                location = this.__markerPosition(featureId, ann);
             }
 
             // Make sure the feature is on screen
@@ -651,9 +657,13 @@ export class UserInteractions
         const tooltips = [];
         for (const lineFeature of lineFeatures) {
             const properties = lineFeature.properties;
-            if ('label' in properties
-               && (!('tooltip' in properties) || properties.tooltip)
-               && !('labelled' in properties)) {
+            if ('error' in properties) {
+                tooltips.push(`<div class="feature-error">Error: ${properties.error}</div>`)
+            }
+            if ('warning' in properties) {
+                tooltips.push(`<div class="feature-error">Warning: ${properties.warning}</div>`)
+            }
+            if ('label' in properties && (!('tooltip' in properties) || properties.tooltip)) {
                 let tooltip = '';
                 const label = properties.label;
                 const cleanLabel = (label.substr(0, 1).toUpperCase() + label.substr(1)).replaceAll("\n", "<br/>");
@@ -662,32 +672,37 @@ export class UserInteractions
                 }
             }
         }
-        if (tooltips.length === 0) {
-            return '';
-        }
-        return `<div class='flatmap-feature-label'>${tooltips.join('<hr/>')}</div>`;
+        return (tooltips.length === 0) ? ''
+                                       : `<div class='flatmap-feature-label'>${tooltips.join('<hr/>')}</div>`;
     }
 
     tooltipHtml_(properties, forceLabel=false)
     //========================================
     {
+        const tooltip = [];
+        if ('error' in properties) {
+            tooltip.push(`<div class="feature-error">Error: ${properties.error}</div>`)
+        }
+        if ('warning' in properties) {
+            tooltip.push(`<div class="feature-error">Warning: ${properties.warning}</div>`)
+        }
         if (('label' in properties || 'hyperlink' in properties)
-           && (forceLabel || !('tooltip' in properties) || properties.tooltip)
-           && !('labelled' in properties)) {
+                && (forceLabel || !('tooltip' in properties) || properties.tooltip)) {
             const label = ('label' in properties) ? (properties.label.substr(0, 1).toUpperCase()
                                                    + properties.label.substr(1)).replaceAll("\n", "<br/>")
                                                   : '';
             if ('hyperlink' in properties) {
                 if (label === '') {
-                    return `<div class='flatmap-feature-label'><a href='${properties.hyperlink}'>${properties.hyperlink}</a></div>`;
+                    tooltip.push(`<a href='${properties.hyperlink}'>${properties.hyperlink}</a>`);
                 } else {
-                    return `<div class='flatmap-feature-label'><a href='${properties.hyperlink}'>${label}</a></div>`;
+                    tooltip.push(`<a href='${properties.hyperlink}'>${label}</a></div>`);
                 }
             } else {
-                return `<div class='flatmap-feature-label'>${label}</div>`;
+                tooltip.push(label);
             }
         }
-        return '';
+        return (tooltip.length === 0) ? ''
+                                      : `<div class='flatmap-feature-label'>${tooltip.join('<hr/>')}</div>`;
     }
 
     __featureEvent(type, feature)
@@ -783,10 +798,6 @@ export class UserInteractions
                 }
             }
         } else {
-            // Allow tooltip for body but no highlighting/activation??
-            // More generally, only highlight a feature if all "within" the viewport??
-            // -- then as we zoom outermost features wouldn't highlight (but still show tooltip)
-            // -- or highlight in a more subtle way (eg. opacity change and not colour change)??
             let labelledFeatures = features.filter(feature => (('hyperlink' in feature.properties
                                                              || 'label' in feature.properties
                                                              || 'node' in feature.properties)
@@ -980,6 +991,7 @@ export class UserInteractions
     togglePaths()
     //===========
     {
+        console.log('Depracated API function called: togglePaths()')
         if (this._disabledPathFeatures){
             this.enablePathFeatures_(true, this._pathways.allFeatureIds());
             this._disabledPathFeatures = false;
@@ -994,29 +1006,6 @@ export class UserInteractions
         this.enablePathFeatures_(enable, this._pathways.typeFeatureIds(pathType));
     }
 
-    showPaths(pathTypes, enable=true)
-    //===============================
-    {
-        // Disable/enable all paths except those with `pathTypes`
-        if (Array.isArray(pathTypes)) {
-            for (const pathType of pathways.PATH_TYPES) {
-                if (pathTypes.indexOf(pathType.type) >= 0) {
-                    this.enablePath(pathType.type, enable)
-                } else {
-                    this.enablePath(pathType.type, !enable)
-                }
-            }
-        } else {
-            for (const pathType of pathways.PATH_TYPES) {
-                if (pathType.type === pathTypes) {
-                    this.enablePath(pathType.type, enable)
-                } else {
-                    this.enablePath(pathType.type, !enable)
-                }
-            }
-        }
-    }
-
     pathwaysFeatureIds(externalIds)
     //=============================
     {
@@ -1032,51 +1021,57 @@ export class UserInteractions
         return this._pathways.nodePathModels(nodeId);
     }
 
-    showSckanPaths(validity, enable=true)
-    //===================================
+    enableCentrelines(show=true)
+    //==========================
+    {
+        this.enablePath('centreline', show);
+        this._layerManager.setPaint({showCentrelines: show});
+    }
+
+    enableSckanPath(sckanState, enable=true)
+    //======================================
     {
+        this._layerManager.enableSckanPath(sckanState, enable);
     }
 
     //==============================================================================
 
-    // Find where to place a label or popup on a feature
+    // Marker handling
 
-    __centralPosition(featureId, annotation)
-    //======================================
+    __markerPosition(featureId, annotation)
     {
-        if (this.__centralPositions.has(featureId)) {
-            return this.__centralPositions.get(featureId);
+        if (this.__markerPositions.has(featureId)) {
+            return this.__markerPositions.get(featureId);
         }
-        let position = annotation.centroid;
-        const features = this._map.querySourceFeatures(VECTOR_TILES_SOURCE, {
-            'sourceLayer': this._flatmap.options.separateLayers
-                            ? `${annotation['layer']}_${annotation['tile-layer']}`
-                            : annotation['tile-layer'],
-            'filter': [
-                'all',
-                [ '==', ['id'], parseInt(featureId) ],
-                [ '==', ['geometry-type'], 'Polygon' ]
-            ]
-        });
-        if (features.length > 0) {
-            const feature = features[0];
-            const polygon = feature.geometry.coordinates;
-            // Rough heuristic. Area is in km^2; below appears to be good enough.
-            const precision = ('area' in feature.properties)
-                                ? Math.sqrt(feature.properties.area)/500000
-                                : 0.1;
-            position = polylabel(polygon, precision);
+        let position = annotation.markerPosition || annotation.centroid;
+        if (position === null || position == undefined) {
+            // Find where to place a label or popup on a feature
+            const features = this._map.querySourceFeatures(VECTOR_TILES_SOURCE, {
+                'sourceLayer': this._flatmap.options.separateLayers
+                                ? `${annotation['layer']}_${annotation['tile-layer']}`
+                                : annotation['tile-layer'],
+                'filter': [
+                    'all',
+                    [ '==', ['id'], parseInt(featureId) ],
+                    [ '==', ['geometry-type'], 'Polygon' ]
+                ]
+            });
+            if (features.length > 0) {
+                const feature = features[0];
+                const polygon = feature.geometry.coordinates;
+                // Rough heuristic. Area is in km^2; below appears to be good enough.
+                const precision = ('area' in feature.properties)
+                                    ? Math.sqrt(feature.properties.area)/500000
+                                    : 0.1;
+                position = polylabel(polygon, precision);
+            }
         }
-        this.__centralPositions.set(featureId, position);
+        this.__markerPositions.set(featureId, position);
         return position;
     }
 
-    //==============================================================================
-
-    // Marker handling
-
-    addMarker(anatomicalId, markerType='')
-    //====================================
+    addMarker(anatomicalId, htmlElement=null)
+    //=======================================
     {
         const featureIds = this._flatmap.modelFeatureIds(anatomicalId);
         let markerId = -1;
@@ -1092,19 +1087,19 @@ export class UserInteractions
                     markerId = this.__lastMarkerId;
                 }
 
+                // MapLibre dynamically sets a transform on marker elements so in
+                // order to apply a scale transform we need to create marker icons
+                // inside the marker container <div>.
+                const markerHTML = htmlElement ? new maplibre.Marker({element: htmlElement})
+                                               : new maplibre.Marker();
+
                 const markerElement = document.createElement('div');
                 const markerIcon = document.createElement('div');
-                if (markerType === 'simulation') {
-                    markerIcon.innerHTML = this._simulationMarkerHTML;
-                } else {
-                    markerIcon.innerHTML = this._defaultMarkerHTML;
-                }
+                markerIcon.innerHTML = markerHTML.getElement().innerHTML;
                 markerIcon.className = 'flatmap-marker';
                 markerElement.appendChild(markerIcon);
 
-                const markerPosition = (annotation.geometry === 'Polygon')
-                                     ? this.__centralPosition(featureId, annotation)
-                                     : annotation.centroid;
+                const markerPosition = this.__markerPosition(featureId, annotation);
                 const marker = new maplibre.Marker(markerElement)
                                            .setLngLat(markerPosition)
                                            .addTo(this._map);