@abi-software/flatmap-viewer 2.5.6 → 2.5.8

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

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.5.6",
+  "version": "2.5.8",
   "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",
@@ -21,6 +24,7 @@
     "@deck.gl/core": "^8.9.33",
     "@deck.gl/layers": "^8.9.33",
     "@deck.gl/mapbox": "^8.9.33",
+    "@mapbox/mapbox-gl-draw": "^1.4.3",
     "@turf/area": "^6.5.0",
     "@turf/bbox": "^6.5.0",
     "@turf/helpers": "^6.5.0",
@@ -38,7 +42,7 @@
     "@babel/plugin-transform-runtime": "^7.5.5",
     "@babel/preset-env": "^7.10.4",
     "babel-loader": "^8.1.0",
-    "browser-sync": "^3.0.2",
+    "browser-sync": "^2.26.7",
     "bs-fullscreen-message": "^1.1.0",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^6.7.3",

package/src/controls/annotation.js

@@ -96,6 +96,7 @@ export class AnnotationDrawControl
                 e.preventDefault();
             }
         }, false)
+        map.on('draw.modechange', this.featureModeChanged.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 +147,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 +197,13 @@ export class AnnotationDrawControl
         }
     }
 
+    featureModeChanged(event)
+    //=======================
+    {
+        // Used as a flag to indicate the feature mode
+        this.#sendEvent('modeChanged', event)
+    }
+
     commitEvent(event)
     //================
     {
@@ -205,6 +216,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 +245,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;
@@ -340,14 +341,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 +805,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 +836,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 +853,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,7 +1185,8 @@ export class UserInteractions
             this.unselectFeatures();
             return;
         }
-        const clickedFeature = clickedFeatures[0];
+        const clickedFeature = clickedFeatures.filter((f)=>f.id)[0];
+        const clickedDrawnFeature = clickedFeatures.filter((f)=>!f.id)[0];
         this.selectionEvent_(event.originalEvent, clickedFeature);
         if (this._modal) {
             // Remove tooltip, reset active features, etc
@@ -1173,6 +1199,8 @@ export class UserInteractions
             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

@@ -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)
             })