@abi-software/flatmap-viewer 2.5.8 → 2.5.10

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

package/package.json

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

package/src/controls/annotation.js

@@ -78,6 +78,7 @@ export class AnnotationDrawControl
             keybindings: true
         })
         this.__map = null
+        this.__inDrawing = false
     }
 
     onAdd(map)
@@ -96,10 +97,11 @@ export class AnnotationDrawControl
                 e.preventDefault();
             }
         }, false)
-        map.on('draw.modechange', this.featureModeChanged.bind(this))
+        map.on('draw.modechange', this.modeChangedEvent.bind(this))
         map.on('draw.create', this.createdFeature.bind(this))
         map.on('draw.delete', this.deletedFeature.bind(this))
         map.on('draw.update', this.updatedFeature.bind(this))
+        map.on('draw.selectionchange', this.selectionChangedEvent.bind(this))
         this.show(this.__visible)
         return this.__container
     }
@@ -189,6 +191,8 @@ export class AnnotationDrawControl
     {
         const feature = this.#cleanFeature(event)
         if (feature) {
+            // specify updated callback type, either `move` or `change_coordinates`
+            feature.action = event.action
             if (this.__uncommittedFeatureIds.has(feature.id)) {
                 // Ignore updates on an uncommitted create or update
             } else {
@@ -197,13 +201,27 @@ export class AnnotationDrawControl
         }
     }
 
-    featureModeChanged(event)
-    //=======================
+    modeChangedEvent(event)
+    //=====================
     {
         // Used as a flag to indicate the feature mode
+        this.__inDrawing = (event.mode.startsWith('draw'))
         this.#sendEvent('modeChanged', event)
     }
 
+    selectionChangedEvent(event)
+    //==========================
+    {
+        // Used to indicate a feature is selected or deselected
+        this.#sendEvent('selectionChanged', event)
+    }
+
+    inDrawingMode()
+    //=============
+    {
+        return this.__inDrawing
+    }
+
     commitEvent(event)
     //================
     {
@@ -252,6 +270,12 @@ export class AnnotationDrawControl
         this.__draw.deleteAll()
     }
 
+    trashFeature()
+    //============
+    {
+        this.__draw.trash()
+    }
+
     addFeature(feature)
     //=================
     {
@@ -266,6 +290,13 @@ export class AnnotationDrawControl
     {
         return this.__draw.get(feature.id) || null
     }
+
+    changeMode(type)
+    //===============
+    {
+        // Change the mode directly without listening to modes callback
+        this.__draw.changeMode(type.mode, type.options)
+    }
 }
 
 //==============================================================================

package/src/flatmap-viewer.js

@@ -1025,7 +1025,11 @@ class FlatMap
             'models',
             'source',
             'taxons',
-            'hyperlinks'
+            'hyperlinks',
+            'completeness',
+            'missing-nodes',
+            'alert',
+            'biological-sex'
         ];
         const jsonProperties = [
             'hyperlinks'
@@ -1122,6 +1126,17 @@ class FlatMap
         }
     }
 
+    /**
+     * Fire trash to enter `updated` or `deleted` feature event.
+     */
+    trashAnnotationFeature()
+    //======================
+    {
+        if (this._userInteractions) {
+            this._userInteractions.trashAnnotationFeature()
+        }
+    }
+
     /**
      * Add a drawn feature to the annotation drawing tool.
      *
@@ -1155,6 +1170,24 @@ class FlatMap
         }
     }
 
+    /**
+     * Changes draw to another mode. The mode argument must be one of the following:
+     * `simple_select`, `direct_select`, `draw_line_string`,
+     * `draw_polygon` or `draw_point`. Options is accepted in first three modes.
+     * More details in mapbox-gl-draw github repository.
+     *
+     * @param type      {Object}     The object 
+     * @param type.mode {string}     Either ``simple_select``, ``direct_select``, etc
+     * @param type.options {Object}  Feature id(s) object.
+     */
+    changeAnnotationDrawMode(type)
+    //============================
+    {
+        if (this._userInteractions) {
+            this._userInteractions.changeAnnotationDrawMode(type)
+        }
+    }
+
     /**
      * Generate a callback as a result of some event with a flatmap feature.
      *

package/src/interactions.js

@@ -333,6 +333,14 @@ export class UserInteractions
         }
     }
 
+    inDrawingAnnotationMode()
+    //=======================
+    {
+        if (this.#annotationDrawControl) {
+            return this.#annotationDrawControl.inDrawingMode()
+        }
+    }
+
     commitAnnotationEvent(event)
     //==========================
     {
@@ -365,6 +373,14 @@ export class UserInteractions
         }
     }
 
+    trashAnnotationFeature()
+    //======================
+    {
+        if (this.#annotationDrawControl) {
+            this.#annotationDrawControl.trashFeature()
+        }
+    }
+
     addAnnotationFeature(feature)
     //===========================
     {
@@ -381,6 +397,14 @@ export class UserInteractions
         }
     }
 
+    changeAnnotationDrawMode(type)
+    //=============================
+    {
+        if (this.#annotationDrawControl) {
+            this.#annotationDrawControl.changeMode(type)
+        }
+    }
+
     __setupAnnotation()
     //=================
     {
@@ -1185,22 +1209,25 @@ export class UserInteractions
             this.unselectFeatures();
             return;
         }
-        const clickedFeature = clickedFeatures.filter((f)=>f.id)[0];
-        const clickedDrawnFeature = clickedFeatures.filter((f)=>!f.id)[0];
+        const inDrawing = this.inDrawingAnnotationMode()
+        const clickedDrawnFeature = clickedFeatures.filter((f) => !f.id)[0];
+        const clickedFeature = clickedFeatures.filter((f) => f.id)[0];
         this.selectionEvent_(event.originalEvent, clickedFeature);
         if (this._modal) {
             // Remove tooltip, reset active features, etc
             this.__resetFeatureDisplay();
             this.unselectFeatures();
             this.__clearModal();
-        } else if (clickedFeature !== undefined) {
+        } else if (clickedDrawnFeature && !inDrawing) {
+            // When feature and drawn feature are coinciding, click on annotation layer by default
+            // While in drawing, DISABLE 'click' event on annotation layer
+            this.__featureEvent('click', clickedDrawnFeature);
+        } else if (clickedFeature) {
             this.__lastClickLngLat = event.lngLat;
             this.__featureEvent('click', clickedFeature);
             if ('properties' in clickedFeature && 'hyperlink' in clickedFeature.properties) {
                 window.open(clickedFeature.properties.hyperlink, '_blank');
             }
-        } else if (clickedDrawnFeature !== undefined) {
-            this.__featureEvent('click', clickedDrawnFeature);
         }
     }
 

package/src/main.js

@@ -64,7 +64,7 @@ class DrawControl
     //================
     {
         console.log(event)
-        if (this._idField) {
+        if (this._idField && event.type !== 'modeChanged' && event.type !== 'selectionChanged') {
             this._idField.innerText = `Annotation ${event.type}, Id: ${event.feature.id}`
             this._lastEvent = event
         }