@abi-software/flatmap-viewer 2.5.7 → 2.5.9

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

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.5.7",
+  "version": "2.5.9",
   "description": "Flatmap viewer using Maplibre GL",
-  "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AnatomicMaps/flatmap-viewer.git"
+  },
   "main": "src/main.js",
   "files": [
     "src",

package/src/controls/annotation.js

@@ -78,6 +78,7 @@ export class AnnotationDrawControl
             keybindings: true
         })
         this.__map = null
+        this.__inDrawing = false
     }
 
     onAdd(map)
@@ -96,6 +97,7 @@ export class AnnotationDrawControl
                 e.preventDefault();
             }
         }, false)
+        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))
@@ -146,7 +148,10 @@ export class AnnotationDrawControl
     #sendEvent(type, feature)
     //=======================
     {
-        this.__uncommittedFeatureIds.add(feature.id)
+        if (feature.id) {
+            // Add when the event is 'created', 'updated' or 'deleted'
+            this.__uncommittedFeatureIds.add(feature.id)
+        }
         this.__flatmap.annotationEvent(type, feature)
     }
 
@@ -193,6 +198,20 @@ export class AnnotationDrawControl
         }
     }
 
+    modeChangedEvent(event)
+    //=====================
+    {
+        // Used as a flag to indicate the feature mode
+        this.__inDrawing = (event.mode.startsWith('draw'))
+        this.#sendEvent('modeChanged', event)
+    }
+
+    inDrawingMode()
+    //=============
+    {
+        return this.__inDrawing
+    }
+
     commitEvent(event)
     //================
     {
@@ -205,6 +224,14 @@ export class AnnotationDrawControl
         this.__uncommittedFeatureIds.delete(feature.id)
     }
 
+    abortEvent(event)
+    //===============
+    {
+        // Used as a flag to indicate the popup is closed
+        // Rollback should be performed when triggered 'aborted' event
+        this.#sendEvent('aborted', event)
+    }
+
     rollbackEvent(event)
     //==================
     {
@@ -226,6 +253,12 @@ export class AnnotationDrawControl
             }
         }
     }
+    
+    clearFeature()
+    //============
+    {
+        this.__draw.deleteAll()
+    }
 
     addFeature(feature)
     //=================

package/src/flatmap-viewer.js

@@ -484,7 +484,7 @@ class FlatMap
     /**
      * Flag the feature as having external annotation.
      *
-     * @param      {string}  featureId  The feature's identifier
+     * @param      {string}  featureId  The feature's external identifier
      */
     setFeatureAnnotated(featureId)
     //============================
@@ -1110,6 +1110,17 @@ class FlatMap
             this._userInteractions.rollbackAnnotationEvent(event)
         }
     }
+  
+    /**
+     * Clear all drawn annotations from current annotation layer.
+     */
+    clearAnnotationFeature()
+    //======================
+    {
+        if (this._userInteractions) {
+            this._userInteractions.clearAnnotationFeature()
+        }
+    }
 
     /**
      * Add a drawn feature to the annotation drawing tool.

package/src/interactions.js

@@ -268,6 +268,7 @@ export class UserInteractions
         // 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));
         this._lastFeatureMouseEntered = null;
         this._lastFeatureModelsMouse = null;
@@ -332,6 +333,14 @@ export class UserInteractions
         }
     }
 
+    inDrawingAnnotationMode()
+    //=======================
+    {
+        if (this.#annotationDrawControl) {
+            return this.#annotationDrawControl.inDrawingMode()
+        }
+    }
+
     commitAnnotationEvent(event)
     //==========================
     {
@@ -340,14 +349,30 @@ export class UserInteractions
         }
     }
 
+    abortAnnotationEvent(event)
+    //=========================
+    {
+        if (this.#annotationDrawControl) {
+            this.#annotationDrawControl.abortEvent(event)
+        }
+    }
+
     rollbackAnnotationEvent(event)
-    //==========================
+    //============================
     {
         if (this.#annotationDrawControl) {
             this.#annotationDrawControl.rollbackEvent(event)
         }
     }
 
+    clearAnnotationFeature()
+    //======================
+    {
+        if (this.#annotationDrawControl) {
+            this.#annotationDrawControl.clearFeature()
+        }
+    }
+
     addAnnotationFeature(feature)
     //===========================
     {
@@ -788,7 +813,8 @@ export class UserInteractions
     //=======================================
     {
         const ann = this._flatmap.annotation(featureId);
-        if (ann) {  // The feature exists
+        const drawn = options && options.annotationFeatureGeometry;
+        if (ann || drawn) {  // The feature exists or it is a drawn annotation
 
             // Remove any existing popup
 
@@ -818,6 +844,10 @@ export class UserInteractions
                && options.positionAtLastClick
                && this.__lastClickLngLat !== null) {
                 location = this.__lastClickLngLat;
+            } else if (drawn) {
+                // Popup at the centroid of the feature
+                // Calculated with the feature geometry coordinates
+                location = options.annotationFeatureGeometry;
             } else {
                 // Position popup at the feature's 'centre'
                 location = this.__markerPosition(featureId, ann);
@@ -831,6 +861,9 @@ export class UserInteractions
             this.setModal_();
             this._currentPopup = new maplibregl.Popup(options).addTo(this._map);
             this._currentPopup.on('close', this.__onCloseCurrentPopup.bind(this));
+            if (drawn) {
+                this._currentPopup.on('close', this.abortAnnotationEvent.bind(this));
+            }
             this._currentPopup.setLngLat(location);
             if (typeof content === 'object') {
                 this._currentPopup.setDOMContent(content);
@@ -1160,14 +1193,20 @@ export class UserInteractions
             this.unselectFeatures();
             return;
         }
-        const clickedFeature = clickedFeatures[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) {

package/src/main.js

@@ -147,6 +147,7 @@ export async function standaloneViewer(map_endpoint=null, options={})
                 map.addMarker('UBERON:0000945'); // Stomach
                 map.addMarker('UBERON:0001155'); // Colon
                 map.addMarker('UBERON:0001255'); // Bladder
+                map.addMarker('UBERON:0001759'); // Vagus
                 currentMap = map;
                 drawControl = new DrawControl(map)
             })