@abi-software/flatmap-viewer 2.6.0-a.1 → 2.6.1

package/src/interactions.js

@@ -36,7 +36,6 @@ import polylabel from 'polylabel';
 import {LayerManager} from './layers';
 import {PATHWAYS_LAYER, PathManager} from './pathways';
 import {VECTOR_TILES_SOURCE} from './layers/styling';
-import {Paths3DLayer} from './layers/paths3d'
 import {SystemsManager} from './systems';
 
 import {displayedProperties, InfoControl} from './controls/info';
@@ -102,8 +101,6 @@ function labelPosition(feature)
     if (feature.geometry.type === 'Point') {
         return feature.geometry.coordinates
     }
-    // LineString?
-    // Multi geometries??
     const polygon = feature.geometry.coordinates;
     // Rough heuristic. Area is in km^2; below appears to be good enough.
     const precision = ('area' in feature.properties)
@@ -134,7 +131,6 @@ export class UserInteractions
 {
     #annotationDrawControl = null
     #minimap = null
-    #paths3dLayer = null
 
     constructor(flatmap)
     {
@@ -168,9 +164,7 @@ export class UserInteractions
 
         flatmap.setInitialPosition();
 
-        // Add and manage our layers
-
-        this._layerManager = new LayerManager(flatmap);
+        // Track enabled features
 
         this.__featureEnabledCount = new Map(Array.from(this._flatmap.annotations.keys()).map(k => [+k, 0]));
 
@@ -182,9 +176,16 @@ export class UserInteractions
         this.__pathManager = new PathManager(flatmap, this, featuresEnabled);
 
         // The path types in this map
+
         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.
+
+        this._layerManager = new LayerManager(flatmap, this);
+
         // Set initial enabled state of paths
+
         for (const path of mapPathTypes) {
             this.__pathManager.enablePathsByType(path.type, path.enabled, true);
         }
@@ -218,9 +219,6 @@ export class UserInteractions
             this._map.addControl(new NavigationControl(flatmap), position);
         }
 
-        // Support 3D path view
-        this.#paths3dLayer = new Paths3DLayer(flatmap, this)
-
         // Add various controls when running standalone
         if (flatmap.options.standalone) {
             // Add a control to search annotations if option set
@@ -268,6 +266,7 @@ export class UserInteractions
         this._map.addControl(this.#annotationDrawControl)
 
         // Handle mouse events
+
         this._map.on('click', this.clickEvent_.bind(this));
         this._map.on('touchend', this.clickEvent_.bind(this));
         this._map.on('mousemove', this.mouseMoveEvent_.bind(this));
@@ -301,7 +300,8 @@ export class UserInteractions
         return {
             center: this._map.getCenter().toArray(),
             zoom: this._map.getZoom(),
-            layers: this.layers
+            bearing: this._map.getBearing(),
+            pitch: this._map.getPitch()
         };
     }
 
@@ -309,14 +309,11 @@ export class UserInteractions
     //=============
     {
         // Restore the map to a saved state
-        const options = {};
-        if ('center' in state) {
-            options['center'] = state.center;
-        }
-        if ('zoom' in state) {
-            options['zoom'] = state.zoom;
-            if ('center' in state) {
-                options['around'] = state.center;
+
+        const options = Object.assign({}, state)
+        if ('zoom' in options) {
+            if ('center' in options) {
+                options['around'] = options.center;
             } else {
                 options['around'] = [0, 0];
             }
@@ -366,11 +363,19 @@ export class UserInteractions
         }
     }
 
-    clearAnnotationFeature()
-    //======================
+    clearAnnotationFeatures()
+    //=======================
     {
         if (this.#annotationDrawControl) {
-            this.#annotationDrawControl.clearFeature()
+            this.#annotationDrawControl.clearFeatures()
+        }
+    }
+
+    removeAnnotationFeature()
+    //=======================
+    {
+        if (this.#annotationDrawControl) {
+            this.#annotationDrawControl.removeFeature()
         }
     }
 
@@ -386,7 +391,15 @@ export class UserInteractions
     //=======================================
     {
         if (this.#annotationDrawControl) {
-            return this.#annotationDrawControl.getFeature(feature.id)
+            return this.#annotationDrawControl.refreshGeometry(feature)
+        }
+    }
+
+    changeAnnotationDrawMode(type)
+    //=============================
+    {
+        if (this.#annotationDrawControl) {
+            this.#annotationDrawControl.changeMode(type)
         }
     }
 
@@ -422,9 +435,6 @@ export class UserInteractions
     //================
     {
         this._layerManager.setPaint(options)
-        if (this.#paths3dLayer) {
-            this.#paths3dLayer.setPaint(options)
-        }
     }
 
     setPaint(options)
@@ -449,9 +459,7 @@ export class UserInteractions
     enable3dPaths(enable=true)
     //========================
     {
-        if (this.#paths3dLayer) {
-            this.#paths3dLayer.enable(enable)
-        }
+        this._layerManager.set3dMode(enable)
     }
 
     getSystems()
@@ -466,37 +474,21 @@ export class UserInteractions
         this.__systemsManager.enable(systemId, enable);
     }
 
-    #getAnnotationProperties(featureId)
-    //=================================
-    {
-        const properties = this._flatmap.annotation(featureId)
-        if (properties) {
-            return properties
-        } else if (this.#annotationDrawControl) {
-            const drawnFeature = this.#annotationDrawControl.getFeature(featureId)
-            if (drawnFeature) {
-                drawnFeature.properties.user_drawn = true
-                return drawnFeature.properties
-            }
-        }
-        return null
-    }
-
     mapFeature(featureId)
     //===================
     {
-        const properties = this.#getAnnotationProperties(featureId);
-        if (properties && !properties.user_drawn) {
+        const ann = this._flatmap.annotation(featureId);
+        if (ann !== undefined) {
             return {
                 id: featureId,
                 source: VECTOR_TILES_SOURCE,
                 sourceLayer: (this._flatmap.options.separateLayers
-                             ? `${properties['layer']}_${properties['tile-layer']}`
-                             : properties['tile-layer']).replaceAll('/', '_'),
-                children: properties.children || []
+                             ? `${ann['layer']}_${ann['tile-layer']}`
+                             : ann['tile-layer']).replaceAll('/', '_'),
+                children: ann.children || []
             };
         }
-        return null;
+        return undefined;
     }
 
     #getFeatureState(feature)
@@ -509,24 +501,20 @@ export class UserInteractions
     //===============================
     {
         this._map.removeFeatureState(feature, key)
-        if (this.#paths3dLayer) {
-            this.#paths3dLayer.removeFeatureState(feature.id, key)
-        }
+        this._layerManager.removeFeatureState(feature, key)
     }
 
     #setFeatureState(feature, state)
     //==============================
     {
         this._map.setFeatureState(feature, state)
-        if (this.#paths3dLayer) {
-            this.#paths3dLayer.setFeatureState(feature.id, state)
-        }
+        this._layerManager.setFeatureState(feature, state)
     }
 
     enableMapFeature(feature, enable=true)
     //====================================
     {
-        if (feature) {
+        if (feature !== undefined) {
             const state = this.#getFeatureState(feature);
             if  ('hidden' in state) {
                 if (enable) {
@@ -559,7 +547,7 @@ export class UserInteractions
     //============================================================
     {
         const feature = this.mapFeature(featureId);
-        if (feature) {
+        if (feature !== undefined) {
             this.enableFeature(featureId, enable, force);
             for (const childFeatureId of feature.children) {
                 this.enableFeatureWithChildren(childFeatureId, enable, force);
@@ -571,7 +559,7 @@ export class UserInteractions
     //===========================================
     {
         const markerId = this.__markerIdByFeatureId.get(+featureId);
-        if (markerId) {
+        if (markerId !== undefined) {
             const markerDiv = document.getElementById(`marker-${markerId}`);
             if (markerDiv) {
                 markerDiv.style.visibility = enable ? 'visible' : 'hidden';
@@ -584,7 +572,7 @@ export class UserInteractions
     {
         if (feature.id) {
             const state = this.#getFeatureState(feature);
-            return (state
+            return (state !== undefined
                 && (!('hidden' in state) || !state.hidden));
         }
         return DRAW_ANNOTATION_LAYERS.includes(feature.layer.id)
@@ -599,12 +587,12 @@ export class UserInteractions
     selectFeature(featureId, dim=true)
     //================================
     {
-        const properties = this.#getAnnotationProperties(featureId);
-        if (properties && 'sckan' in properties) {
+        const ann = this._flatmap.annotation(featureId);
+        if (ann && 'sckan' in ann) {
             const sckanState = this._layerManager.sckanState;
             if (sckanState === 'none'
-             || sckanState === 'valid' && !properties.sckan
-             || sckanState === 'invalid' && properties.sckan) {
+             || sckanState === 'valid' && !ann.sckan
+             || sckanState === 'invalid' && ann.sckan) {
                 return false;
             }
         }
@@ -614,15 +602,11 @@ export class UserInteractions
         if (this._selectedFeatureIds.has(featureId)) {
             this._selectedFeatureIds.set(featureId, this._selectedFeatureIds.get(featureId) + 1);
             result = true;
-        } else if (properties.user_drawn) {
-            if (this.#annotationDrawControl) {
-                this.#annotationDrawControl.selectFeature(featureId, true)
-            }
         } else {
             const feature = this.mapFeature(featureId);
-            if (feature) {
+            if (feature !== undefined) {
                 const state = this.#getFeatureState(feature);
-                if (state && (!('hidden' in state) || !state.hidden)) {
+                if (state !== undefined && (!('hidden' in state) || !state.hidden)) {
                     this.#setFeatureState(feature, { selected: true });
                     this._selectedFeatureIds.set(featureId, 1);
                     result = true;
@@ -645,7 +629,7 @@ export class UserInteractions
                 this._selectedFeatureIds.set(featureId, references - 1);
             } else {
                 const feature = this.mapFeature(featureId);
-                if (feature) {
+                if (feature !== undefined) {
                     this.#removeFeatureState(feature, 'selected');
                     this._selectedFeatureIds.delete(+featureId);
                 }
@@ -661,7 +645,7 @@ export class UserInteractions
     {
         for (const featureId of this._selectedFeatureIds.keys()) {
             const feature = this.mapFeature(featureId);
-            if (feature) {
+            if (feature !== undefined) {
                 this.#removeFeatureState(feature, 'selected');
             }
         }
@@ -672,7 +656,7 @@ export class UserInteractions
     activateFeature(feature)
     //======================
     {
-        if (feature) {
+        if (feature !== undefined) {
             this.#setFeatureState(feature, { active: true });
             this._activeFeatures.add(feature);
         }
@@ -758,7 +742,7 @@ export class UserInteractions
         if (featureIds.length) {
             this.unselectFeatures();
             for (const featureId of featureIds) {
-                const annotation = this.#getAnnotationProperties(featureId);
+                const annotation = this._flatmap.annotation(featureId);
                 if (annotation) {
                     if (this.selectFeature(featureId)) {
                         if ('type' in annotation && annotation.type.startsWith('line')) {
@@ -806,14 +790,14 @@ export class UserInteractions
             padding.lng -= bbox[0];
             padding.lat = bbox[3] - padding.lat;
             for (const featureId of featureIds) {
-                const annotation = this.#getAnnotationProperties(featureId);
+                const annotation = this._flatmap.annotation(featureId);
                 if (annotation) {
                     if (this.selectFeature(featureId)) {
                         bbox = expandBounds(bbox, annotation.bounds, padding);
                         if ('type' in annotation && annotation.type.startsWith('line')) {
                             for (const pathFeatureId of this.__pathManager.lineFeatureIds([featureId])) {
                                 if (this.selectFeature(pathFeatureId)) {
-                                    const pathAnnotation = this.#getAnnotationProperties(pathFeatureId)
+                                    const pathAnnotation = this._flatmap.annotation(pathFeatureId)
                                     bbox = expandBounds(bbox, pathAnnotation.bounds, padding);
                                 }
                             }
@@ -833,11 +817,12 @@ export class UserInteractions
     showPopup(featureId, content, options={})
     //=======================================
     {
-        const properties = this.#getAnnotationProperties(featureId);
+        const ann = this._flatmap.annotation(featureId);
         const drawn = options && options.annotationFeatureGeometry;
-        if (properties || drawn) {  // The feature exists or it is a drawn annotation
+        if (ann || drawn) {  // The feature exists or it is a drawn annotation
 
             // Remove any existing popup
+
             if (this._currentPopup) {
                 if (options && options.preserveSelection) {
                     this._currentPopup.options.preserveSelection = options.preserveSelection;
@@ -846,6 +831,7 @@ export class UserInteractions
             }
 
             // Clear selection if we are not preserving it
+
             if (options && options.preserveSelection) {
                 delete options.preserveSelection;       // Don't pass to onClose()
             } else {                                    // via the popup's options
@@ -853,9 +839,10 @@ export class UserInteractions
             }
 
             // Select the feature
+
             this.selectFeature(featureId);
 
-            // Find the pop-up's position
+            // Find the pop-up's postion
 
             let location = null;
             if ('positionAtLastClick' in options
@@ -868,7 +855,7 @@ export class UserInteractions
                 location = options.annotationFeatureGeometry;
             } else {
                 // Position popup at the feature's 'centre'
-                location = this.__markerPosition(featureId, properties);
+                location = this.__markerPosition(featureId, ann);
             }
 
             // Make sure the feature is on screen
@@ -884,11 +871,10 @@ export class UserInteractions
             }
             this._currentPopup.setLngLat(location);
             if (typeof content === 'object') {
-                this._currentPopup.setDOMContent(content)
+                this._currentPopup.setDOMContent(content);
             } else {
-                this._currentPopup.setText(content)
+                this._currentPopup.setText(content);
             }
-            this._currentPopup.addTo(this._map)
         }
     }
 
@@ -995,13 +981,7 @@ export class UserInteractions
     #renderedFeatures(point)
     //======================
     {
-        let features = []
-        if (this.#paths3dLayer) {
-            features = this.#paths3dLayer.queryFeaturesAtPoint(point)
-        }
-        if (features.length === 0) {
-            features = this._map.queryRenderedFeatures(point)
-        }
+        const features = this._layerManager.featuresAtPoint(point)
         return features.filter(feature => this.__featureEnabled(feature));
     }
 
@@ -1166,7 +1146,7 @@ export class UserInteractions
     selectionEvent_(event, feature)
     //=============================
     {
-        if (feature) {
+        if (feature !== undefined) {
             const clickedFeatureId = +feature.id;
             const dim = !('properties' in feature
                        && 'kind' in feature.properties
@@ -1324,33 +1304,26 @@ export class UserInteractions
 
     // Marker handling
 
-    __markerPosition(featureId, properties)
+    __markerPosition(featureId, annotation)
     {
         if (this.__markerPositions.has(featureId)) {
             return this.__markerPositions.get(featureId);
         }
-        let position = properties.markerPosition || properties.centroid || null;
-        if (!position) {
+        let position = annotation.markerPosition || annotation.centroid;
+        if (position === null || position == undefined) {
             // Find where to place a label or popup on a feature
-            if (properties.user_drawn) {
-                if (this.#annotationDrawControl) {
-                    const feature = this.#annotationDrawControl.getFeature(featureId)
-                    position = labelPosition(feature);
-                }
-            } else {
-                const features = this._map.querySourceFeatures(VECTOR_TILES_SOURCE, {
-                    'sourceLayer': this._flatmap.options.separateLayers
-                                    ? `${properties['layer']}_${properties['tile-layer']}`
-                                    : properties['tile-layer'],
-                    'filter': [
-                        'all',
-                        [ '==', ['id'], parseInt(featureId) ],
-                        [ '==', ['geometry-type'], 'Polygon' ]
-                    ]
-                });
-                if (features.length > 0) {
-                    position = labelPosition(features[0]);
-                }
+            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) {
+                position = labelPosition(features[0]);
             }
         }
         this.__markerPositions.set(featureId, position);
@@ -1364,7 +1337,7 @@ export class UserInteractions
         let markerId = -1;
 
         for (const featureId of featureIds) {
-            const annotation = this.#getAnnotationProperties(featureId);
+            const annotation = this._flatmap.annotation(featureId);
             if (!('markerPosition' in annotation) && !annotation.geometry.includes('Polygon')) {
                 continue;
             }
@@ -1480,7 +1453,7 @@ export class UserInteractions
                 const annotation = this.__annotationByMarkerId.get(markerId);
                 // The marker's feature
                 const feature = this.mapFeature(annotation.featureId);
-                if (feature) {
+                if (feature !== undefined) {
                     if (event.type === 'mouseenter') {
                         // Highlight on mouse enter
                         this.resetActiveFeatures_();