@abi-software/flatmap-viewer 2.5.0-a.2 → 2.5.1

package/src/interactions.js

@@ -40,11 +40,13 @@ import {Paths3DLayer} from './layers/paths3d'
 import {SystemsManager} from './systems';
 
 import {displayedProperties, InfoControl} from './controls/info';
-import {BackgroundControl, LayerControl, NerveControl,
+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 {SearchControl} from './controls/search';
+import {MinimapControl} from './controls/minimap';
 import {SystemsControl} from './controls/systems';
 import {TaxonsControl} from './controls/taxons';
 import {latex2Svg} from './mathjax';
@@ -110,10 +112,13 @@ function labelPosition(feature)
 function getRenderedLabel(properties)
 {
     if (!('renderedLabel' in properties)) {
-        const label = ('label' in properties) ? (properties.label.substr(0, 1).toUpperCase()
-                                               + properties.label.substr(1)).replaceAll("\n", "<br/>")
-                                              : '';
-        properties.renderedLabel = label.replaceAll(/`\$([^\$]*)\$`/g, math => latex2Svg(math.slice(2, -2)));
+        const label = ('label' in properties) ? properties.label
+                    : ('user_label' in properties) ? properties.user_label
+                    : ''
+        const uppercaseLabel = (label !== '') ? (label.substr(0, 1).toUpperCase()
+                                               + label.substr(1)).replaceAll("\n", "<br/>")
+                                              : ''
+        properties.renderedLabel = uppercaseLabel.replaceAll(/`\$([^\$]*)\$`/g, math => latex2Svg(math.slice(2, -2)));
     }
     return properties.renderedLabel;
 }
@@ -122,14 +127,16 @@ function getRenderedLabel(properties)
 
 export class UserInteractions
 {
-    #paths3dLayer
+    #annotationDrawControl = null
+    #minimap = null
+    #paths3dLayer = null
 
     constructor(flatmap)
     {
         this._flatmap = flatmap;
         this._map = flatmap.map;
 
-        this._activeFeatures = [];
+        this._activeFeatures = new Set()
         this._selectedFeatureIds = new Map();
         this._currentPopup = null;
         this._infoControl = null;
@@ -139,7 +146,6 @@ export class UserInteractions
         this._modal = false;
 
         // Default colour settings
-
         this.__colourOptions = {colour: true, outline: true};
 
         // Marker placement and interaction
@@ -187,6 +193,26 @@ export class UserInteractions
         // All taxons of connectivity paths are enabled by default
         this.__enabledConnectivityTaxons = new Set(this._flatmap.taxonIdentifiers);
 
+        // Add a minimap if option set
+        if (flatmap.options.minimap) {
+            this.#minimap = new MinimapControl(flatmap, flatmap.options.minimap);
+            this._map.addControl(this.#minimap);
+        }
+
+        // Do we want a fullscreen control?
+        if (flatmap.options.fullscreenControl === true) {
+            this._map.addControl(new maplibregl.FullscreenControl(), 'top-right');
+        }
+
+        // Add navigation controls if option set
+        if (flatmap.options.navigationControl) {
+            const value = flatmap.options.navigationControl;
+            const position = ((typeof value === 'string')
+                           && ['top-left', 'top-right', 'bottom-right', 'bottom-left'].includes(value))
+                           ? value : 'bottom-right';
+            this._map.addControl(new NavigationControl(flatmap), position);
+        }
+
         // Support 3D path view
         this.#paths3dLayer = new Paths3DLayer(flatmap, this)
 
@@ -222,9 +248,17 @@ export class UserInteractions
                 this._map.addControl(new TaxonsControl(flatmap));
             }
 
+            if (flatmap.options.annotator) {
+                this._map.addControl(new AnnotatorControl(flatmap));
+            }
+
             this._map.addControl(new Path3DControl(this));
         }
 
+        // Add an initially hidden tool for drawing on the map.
+        this.#annotationDrawControl = new AnnotationDrawControl(flatmap, false)
+        this._map.addControl(this.#annotationDrawControl)
+
         // Handle mouse events
 
         this._map.on('click', this.clickEvent_.bind(this));
@@ -239,6 +273,12 @@ export class UserInteractions
         this.__pan_zoom_enabled = false;
     }
 
+    get minimap()
+    //===========
+    {
+        return this.#minimap
+    }
+
     get pathManager()
     //===============
     {
@@ -278,11 +318,40 @@ export class UserInteractions
         }
     }
 
+    showAnnotator(visible=true)
+    //=========================
+    {
+        if (this.#annotationDrawControl) {
+            this.#annotationDrawControl.show(visible)
+        }
+    }
+
+    modifyDrawnAnnotatorFeature(operation, feature)
+    //=============================================
+    {
+        if (this.#annotationDrawControl) {
+            if (operation === 'add') {
+                this.#annotationDrawControl.addFeature(feature)
+            } else if (operation === 'remove') {
+                this.#annotationDrawControl.removeFeature(feature)
+            }
+        }
+    }
+
+    #setPaint(options)
+    //================
+    {
+        this._layerManager.setPaint(options)
+        if (this.#paths3dLayer) {
+            this.#paths3dLayer.setPaint(options)
+        }
+    }
+
     setPaint(options)
     //===============
     {
         this.__colourOptions = options;
-        this._layerManager.setPaint(options);
+        this.#setPaint(options);
     }
 
     getLayers()
@@ -300,7 +369,9 @@ export class UserInteractions
     enable3dPaths(enable=true)
     //========================
     {
-        this.#paths3dLayer.enable(enable)
+        if (this.#paths3dLayer) {
+            this.#paths3dLayer.enable(enable)
+        }
     }
 
     getSystems()
@@ -332,19 +403,43 @@ export class UserInteractions
         return undefined;
     }
 
+    #getFeatureState(feature)
+    //=======================
+    {
+        return this._map.getFeatureState(feature)
+    }
+
+    #removeFeatureState(feature, key)
+    //===============================
+    {
+        this._map.removeFeatureState(feature, key)
+        if (this.#paths3dLayer) {
+            this.#paths3dLayer.removeFeatureState(feature.id, key)
+        }
+    }
+
+    #setFeatureState(feature, state)
+    //==============================
+    {
+        this._map.setFeatureState(feature, state)
+        if (this.#paths3dLayer) {
+            this.#paths3dLayer.setFeatureState(feature.id, state)
+        }
+    }
+
     enableMapFeature(feature, enable=true)
     //====================================
     {
         if (feature !== undefined) {
-            const state = this._map.getFeatureState(feature);
+            const state = this.#getFeatureState(feature);
             if  ('hidden' in state) {
                 if (enable) {
-                    this._map.removeFeatureState(feature, 'hidden');
+                    this.#removeFeatureState(feature, 'hidden');
                 } else if (!state.hidden) {
-                    this._map.setFeatureState(feature, { 'hidden': true });
+                    this.#setFeatureState(feature, { hidden: true });
                 }
             } else if (!enable) {
-                this._map.setFeatureState(feature, { 'hidden': true });
+                this.#setFeatureState(feature, { hidden: true });
             }
             this.__enableFeatureMarker(feature.id, enable);
         }
@@ -392,11 +487,11 @@ export class UserInteractions
     //=======================
     {
         if (feature.id) {
-            const state = this._map.getFeatureState(feature);
+            const state = this.#getFeatureState(feature);
             return (state !== undefined
                 && (!('hidden' in state) || !state.hidden));
         }
-        return false;
+        return DRAW_ANNOTATION_LAYERS.includes(feature.layer.id)
     }
 
     featureSelected_(featureId)
@@ -409,7 +504,7 @@ export class UserInteractions
     //================================
     {
         const ann = this._flatmap.annotation(featureId);
-        if ('sckan' in ann) {
+        if (ann && 'sckan' in ann) {
             const sckanState = this._layerManager.sckanState;
             if (sckanState === 'none'
              || sckanState === 'valid' && !ann.sckan
@@ -426,16 +521,16 @@ export class UserInteractions
         } else {
             const feature = this.mapFeature(featureId);
             if (feature !== undefined) {
-                const state = this._map.getFeatureState(feature);
+                const state = this.#getFeatureState(feature);
                 if (state !== undefined && (!('hidden' in state) || !state.hidden)) {
-                    this._map.setFeatureState(feature, { 'selected': true });
+                    this.#setFeatureState(feature, { selected: true });
                     this._selectedFeatureIds.set(featureId, 1);
                     result = true;
                 }
             }
         }
         if (result && noSelection) {
-            this._layerManager.setPaint({...this.__colourOptions, dimmed: dim});
+            this.#setPaint({...this.__colourOptions, dimmed: dim});
         }
         return result;
     }
@@ -451,13 +546,13 @@ export class UserInteractions
             } else {
                 const feature = this.mapFeature(featureId);
                 if (feature !== undefined) {
-                    this._map.removeFeatureState(feature, 'selected');
+                    this.#removeFeatureState(feature, 'selected');
                     this._selectedFeatureIds.delete(+featureId);
                 }
             }
         }
         if (this._selectedFeatureIds.size === 0) {
-            this._layerManager.setPaint({...this.__colourOptions, dimmed: false});
+            this.#setPaint({...this.__colourOptions, dimmed: false});
         }
     }
 
@@ -467,28 +562,42 @@ export class UserInteractions
         for (const featureId of this._selectedFeatureIds.keys()) {
             const feature = this.mapFeature(featureId);
             if (feature !== undefined) {
-                this._map.removeFeatureState(feature, 'selected');
+                this.#removeFeatureState(feature, 'selected');
             }
         }
         this._selectedFeatureIds.clear();
-        this._layerManager.setPaint({...this.__colourOptions, dimmed: false});
+        this.#setPaint({...this.__colourOptions, dimmed: false});
     }
 
     activateFeature(feature)
     //======================
     {
         if (feature !== undefined) {
-            this._map.setFeatureState(feature, { active: true });
-            this._activeFeatures.push(feature);
+            this.#setFeatureState(feature, { active: true });
+            this._activeFeatures.add(feature);
+        }
+    }
+
+    activateLineFeatures(lineFeatures)
+    //================================
+    {
+        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.__pathManager.lineFeatureIds(lineIds)) {
+                this.activateFeature(this.mapFeature(featureId))
+            }
         }
     }
 
     resetActiveFeatures_()
     //====================
     {
-        while (this._activeFeatures.length > 0) {
-            this._map.removeFeatureState(this._activeFeatures.pop(), 'active');
+        for (const feature of this._activeFeatures) {
+            this.#removeFeatureState(feature, 'active');
         }
+        this._activeFeatures.clear()
     }
 
     smallestAnnotatedPolygonFeature_(features)
@@ -500,7 +609,7 @@ export class UserInteractions
         let smallestFeature = null;
         for (const feature of features) {
             if (feature.geometry.type.includes('Polygon')
-             && this._map.getFeatureState(feature)['map-annotation']) {
+             && this.#getFeatureState(feature)['map-annotation']) {
                 const polygon = turf.geometry(feature.geometry.type, feature.geometry.coordinates);
                 const area = turfArea(polygon);
                 if (smallestFeature === null || smallestArea > area) {
@@ -733,7 +842,9 @@ export class UserInteractions
             tooltip.push(`<div class="feature-error">Warning: ${properties.warning}</div>`)
         }
         let renderedLabel;
-        if (('label' in properties || 'hyperlink' in properties)
+        if (('label' in properties
+          || 'hyperlink' in properties
+          || 'user_label' in properties)
                 && (forceLabel || !('tooltip' in properties) || properties.tooltip)) {
             const renderedLabel = getRenderedLabel(properties);
             if ('hyperlink' in properties) {
@@ -775,6 +886,19 @@ export class UserInteractions
         this.resetActiveFeatures_();
     }
 
+    #renderedFeatures(point)
+    //======================
+    {
+        let features = []
+        if (this.#paths3dLayer) {
+            features = this.#paths3dLayer.queryFeaturesAtPoint(point)
+        }
+        if (features.length === 0) {
+            features = this._map.queryRenderedFeatures(point)
+        }
+        return features.filter(feature => this.__featureEnabled(feature));
+    }
+
     mouseMoveEvent_(event)
     //====================
     {
@@ -793,8 +917,7 @@ export class UserInteractions
         }
 
         // Get all the features at the current point
-        const features = this._map.queryRenderedFeatures(event.point)
-                             .filter(feature => this.__featureEnabled(feature));
+        const features = this.#renderedFeatures(event.point)
         if (features.length === 0) {
             this._lastFeatureMouseEntered = null;
             this._lastFeatureModelsMouse = null;
@@ -834,19 +957,11 @@ export class UserInteractions
         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.__pathManager.lineFeatureIds(lineIds)) {
-                    if (+featureId !== lineFeatureId) {
-                        this.activateFeature(this.mapFeature(featureId));
-                    }
-                }
-            }
+            this.activateLineFeatures(lineFeatures)
         } else {
             let labelledFeatures = features.filter(feature => (('hyperlink' in feature.properties
-                                                             || 'label' in feature.properties)
+                                                             || 'label' in feature.properties
+                                                             || 'user_label' in feature.properties)
                                                          && (!('tooltip' in feature.properties)
                                                             || feature.properties.tooltip)))
                                            .sort((a, b) => (a.properties.area - b.properties.area));
@@ -859,6 +974,9 @@ export class UserInteractions
                     labelledFeatures = groupFeatures;
                 }
                 const feature = labelledFeatures[0];
+                if (feature.properties.user_drawn) {
+                    feature.id = feature.properties.id
+                }
                 tooltip = this.tooltipHtml_(feature.properties);
                 tooltipFeature = feature;
                 if (this._flatmap.options.debug) {  // Do this when Info on and not debug??
@@ -943,7 +1061,7 @@ export class UserInteractions
     //=============================
     {
         if (feature !== undefined) {
-            const clickedFeatureId = feature.id;
+            const clickedFeatureId = +feature.id;
             const dim = !('properties' in feature
                        && 'kind' in feature.properties
                        && ['cell-type', 'scaffold', 'tissue'].includes(feature.properties.kind));
@@ -982,9 +1100,9 @@ export class UserInteractions
         }
 
         this.__clearActiveMarker();
-        const clickedFeatures = this._map.queryRenderedFeatures(event.point)
-                                    .filter(feature => this.__featureEnabled(feature));
-        if (clickedFeatures.length == 0){
+
+        const clickedFeatures = this.#renderedFeatures(event.point)
+        if (clickedFeatures.length == 0) {
             this.unselectFeatures();
             return;
         }
@@ -1060,7 +1178,7 @@ export class UserInteractions
     //=========================================
     {
         this.__pathManager.enablePathsByType('centreline', enable, force);
-        this._layerManager.setPaint({showCentrelines: enable});
+        this.#setPaint({showCentrelines: enable});
     }
 
     enableSckanPaths(sckanState, enable=true)
@@ -1087,7 +1205,7 @@ export class UserInteractions
     excludeAnnotated(exclude=false)
     //=============================
     {
-        this._layerManager.setPaint({excludeAnnotated: exclude});
+        this.#setPaint({excludeAnnotated: exclude});
     }
 
     //==============================================================================