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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.5.0-a.2",
+  "version": "2.5.2",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",
@@ -19,10 +19,9 @@
   "dependencies": {
     "@babel/runtime": "^7.10.4",
     "@deck.gl/core": "^8.9.33",
-    "@deck.gl/extensions": "^8.9.34",
     "@deck.gl/layers": "^8.9.33",
     "@deck.gl/mapbox": "^8.9.33",
-    "@fortawesome/fontawesome-free": "^6.4.0",
+    "@mapbox/mapbox-gl-draw": "^1.4.3",
     "@turf/area": "^6.5.0",
     "@turf/bbox": "^6.5.0",
     "@turf/helpers": "^6.5.0",

package/src/controls/annotation.js

@@ -0,0 +1,246 @@
+/******************************************************************************
+
+Flatmap viewer and annotation tool
+
+Copyright (c) 2019 - 2023  David Brooks
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+**/
+
+/*
+ *   Annotation drawing mode is enabled/disabled by:
+ *
+ *   1. A call to ``Flatmap.enableAnnotation()``
+ *   2. An on-map control button calls this when in standalone viewing mode.
+ *
+ *   Drawn features include a GeoJSON geometry. Existing geometries of annotated
+ *   features are added to the MapboxDraw control when the map is loaded. These
+ *   should only be visible on the map when the draw control is active.
+ *
+ *   We listen for drawn features being created, updated and deleted, and notify
+ *   the external annotator, first assigning new features and ID wrt the flatmap.
+ *   The external annotator may reject a new feature (the user's cancelled the
+ *   resulting dialog) which results in the newly drawn feature being removed from
+ *   the control.
+ *
+ *   The external annotator is responsible for saving/obtaining drawn geometries
+ *   from an annotation service.
+ *
+ */
+
+//==============================================================================
+
+import MapboxDraw from "@mapbox/mapbox-gl-draw"
+import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
+
+
+//==============================================================================
+
+const drawStyleIds = MapboxDraw.lib.theme.map(s => s.id)
+
+export const DRAW_ANNOTATION_LAYERS = [...drawStyleIds.map(id => `${id}.cold`),
+                                       ...drawStyleIds.map(id => `${id}.hot`)]
+
+//==============================================================================
+
+export class AnnotationDrawControl
+{
+    constructor(flatmap, visible=false)
+    {
+        MapboxDraw.constants.classes.CONTROL_BASE  = 'maplibregl-ctrl'
+        MapboxDraw.constants.classes.CONTROL_PREFIX = 'maplibregl-ctrl-'
+        MapboxDraw.constants.classes.CONTROL_GROUP = 'maplibregl-ctrl-group'
+
+        this.__flatmap = flatmap
+        this.__committedFeatures = new Map()
+        this.__uncommittedFeatureIds = new Set()
+        this.__visible = visible
+        this.__draw = new MapboxDraw({
+            displayControlsDefault: false,
+            controls: {
+                point: true,
+                line_string: true,
+                polygon: true,
+                trash: true
+            },
+            userProperties: true,
+            keybindings: true
+        })
+        this.__map = null
+    }
+
+    onAdd(map)
+    //========
+    {
+        this.__map = map
+        this.__container = this.__draw.onAdd(map)
+
+        // Fix to allow deletion with Del Key when default trash icon is not shown.
+        // See https://github.com/mapbox/mapbox-gl-draw/issues/989
+        this.__draw.options.controls.trash = true
+
+        // Prevent firefox menu from appearing on Alt key up
+        window.addEventListener('keyup', function (e) {
+            if (e.key === "Alt") {
+                e.preventDefault();
+            }
+        }, false)
+        map.on('draw.create', this.createdFeature.bind(this))
+        map.on('draw.delete', this.deletedFeature.bind(this))
+        map.on('draw.update', this.updatedFeature.bind(this))
+        this.show(this.__visible)
+        return this.__container
+    }
+
+    onRemove()
+    //========
+    {
+        this.__container.parentNode.removeChild(this.__container)
+        this.__container = null
+        this.__map = null
+    }
+
+    show(visible=true)
+    //================
+    {
+        if (this.__container) {
+            this.__container.style.display = visible ? 'block' : 'none'
+            if (visible && !this.__visible) {
+                for (const layerId of DRAW_ANNOTATION_LAYERS) {
+                    this.__map.setLayoutProperty(layerId, 'visibility', 'visible')
+                }
+            } else if (!visible && this.__visible) {
+                for (const layerId of DRAW_ANNOTATION_LAYERS) {
+                    this.__map.setLayoutProperty(layerId, 'visibility', 'none')
+                }
+            }
+        }
+        this.__visible = visible
+    }
+
+    #cleanFeature(event)
+    //==================
+    {
+        const features = event.features.filter(f => f.type === 'Feature')
+                                       .map(f => {
+                                            return {
+                                                id: f.id,
+                                                type: 'Feature',
+                                                geometry: f.geometry
+                                            }
+                                        })
+        return features.length ? features[0] : null
+    }
+
+    #sendEvent(type, feature)
+    //=======================
+    {
+        this.__uncommittedFeatureIds.add(feature.id)
+        this.__flatmap.annotationEvent(type, feature)
+    }
+
+    createdFeature(event)
+    //===================
+    {
+        const feature = this.#cleanFeature(event)
+        if (feature) {
+            // Set properties to indicate that this is a drawn annotation
+            this.__draw.setFeatureProperty(feature.id, 'drawn', true)
+            this.__draw.setFeatureProperty(feature.id, 'label', 'Drawn annotation')
+            // They need to be on the feature passed to the annotator for storage
+            feature.properties = {
+                user_drawn: true,
+                user_label: 'Drawn annotation'
+            }
+            this.#sendEvent('created', feature)
+        }
+    }
+
+    deletedFeature(event)
+    //===================
+    {
+        const feature = this.#cleanFeature(event)
+        if (feature) {
+            if (this.__uncommittedFeatureIds.has(feature.id)) {
+                // Ignore delete on an uncommitted create or update
+            } else {
+                this.#sendEvent('deleted', feature)
+            }
+        }
+    }
+
+    updatedFeature(event)
+    //===================
+    {
+        const feature = this.#cleanFeature(event)
+        if (feature) {
+            if (this.__uncommittedFeatureIds.has(feature.id)) {
+                // Ignore updates on an uncommitted create or update
+            } else {
+                this.#sendEvent('updated', feature)
+            }
+        }
+    }
+
+    commitEvent(event)
+    //================
+    {
+        const feature = event.feature
+        if (event.type === 'deleted') {
+            this.__committedFeatures.delete(feature.id)
+        } else {
+            this.__committedFeatures.set(feature.id, feature)
+        }
+        this.__uncommittedFeatureIds.delete(feature.id)
+    }
+
+    rollbackEvent(event)
+    //==================
+    {
+        const feature = event.feature
+        if (event.type === 'created') {
+            this.__draw.delete(feature.id)
+            this.__committedFeatures.delete(feature.id)
+            this.__uncommittedFeatureIds.delete(feature.id)
+        } else if (event.type === 'deleted') {
+            this.__draw.add(feature)
+            this.__committedFeatures.set(feature.id, feature)
+            this.__uncommittedFeatureIds.delete(feature.id)
+        } else if (event.type === 'updated') {
+            const savedFeature = this.__committedFeatures.get(feature.id)
+            if (savedFeature) {
+                this.__draw.delete(feature.id)
+                this.__draw.add(savedFeature)
+                this.__uncommittedFeatureIds.delete(feature.id)
+            }
+        }
+    }
+
+    addFeature(feature)
+    //=================
+    {
+        feature = Object.assign({}, feature, {type: 'Feature'})
+        const ids = this.__draw.add(feature)
+        this.__committedFeatures.set(ids[0], feature)
+        this.__uncommittedFeatureIds.delete(ids[0])
+    }
+
+    refreshGeometry(feature)
+    //======================
+    {
+        return this.__draw.get(feature.id) || null
+    }
+}
+
+//==============================================================================

package/src/controls/controls.js

@@ -526,6 +526,74 @@ export class NerveControl
 
 //==============================================================================
 
+export class AnnotatorControl
+{
+    #enabled = false
+
+    constructor(flatmap)
+    {
+        this.__flatmap = flatmap
+        this.__map = null
+    }
+
+    getDefaultPosition()
+    //==================
+    {
+        return 'top-right'
+    }
+
+    onAdd(map)
+    //========
+    {
+        this.__map = map;
+        this.__container = document.createElement('div');
+        this.__container.className = 'maplibregl-ctrl';
+
+        this.__button = document.createElement('button');
+        this.__button.id = 'map-annotated-button';
+        this.__button.className = 'control-button text-button';
+        this.__button.setAttribute('type', 'button');
+        this.__button.setAttribute('aria-label', 'Draw on map for annotation');
+        this.__button.textContent = 'DRAW';
+        this.__button.title = 'Draw on map for annotation';
+        this.__container.appendChild(this.__button);
+
+        this.__container.addEventListener('click', this.onClick_.bind(this));
+        this.__setBackground();
+        return this.__container;
+    }
+
+    __setBackground()
+    //===============
+    {
+        if (this.#enabled) {
+            this.__button.setAttribute('style', 'background: red');
+        } else {
+            this.__button.removeAttribute('style');
+        }
+    }
+
+    onRemove()
+    //========
+    {
+        this.__container.parentNode.removeChild(this.__container)
+        this.__map = null
+    }
+
+    onClick_(event)
+    //=============
+    {
+        if (event.target.id === 'map-annotated-button') {
+            this.#enabled = !this.#enabled
+            this.__setBackground()
+            this.__flatmap.showAnnotator(this.#enabled)
+        }
+        event.stopPropagation();
+    }
+}
+
+//==============================================================================
+
 export class BackgroundControl
 {
     constructor(flatmap)

package/src/controls/minimap.js

@@ -151,13 +151,8 @@ export class MinimapControl
             container: container,
             style: map.getStyle(),
             bounds: map.getBounds()
-
         });
 
-        // Finish initialising once the map has loaded
-
-        this._miniMap.on('load', this.load_.bind(this));
-
         return this._container;
     }
 
@@ -169,8 +164,8 @@ export class MinimapControl
         this._container = null;
     }
 
-    load_()
-    //=====
+    initialise()
+    //==========
     {
         const opts = this._options;
         const parentMap = this._map;
@@ -184,7 +179,7 @@ export class MinimapControl
         ];
         interactions.forEach(i => miniMap[i].disable());
 
-        // Set background if specified (defaults is the parent map's)
+        // Set background if specified (default is the parent map's)
 
         if (this._background !== null) {
             miniMap.setPaintProperty('background', 'background-color', this._background);

package/src/controls/paths3d.js

@@ -22,6 +22,7 @@ export class Path3DControl
 {
     #button
     #container
+    #enabled = false
     #map = null
     #flatmap
 
@@ -60,16 +61,29 @@ export class Path3DControl
         this.#map = undefined
     }
 
+    __setBackground()
+    //===============
+    {
+        if (this.#enabled) {
+            this.#button.setAttribute('style', 'background: red');
+        } else {
+            this.#button.removeAttribute('style');
+        }
+    }
+
     onClick(_event)
     //=============
     {
         if (this.#button.classList.contains('control-active')) {
             this.#flatmap.enable3dPaths(false)
             this.#button.classList.remove('control-active')
+            this.#enabled = false
         } else {
             this.#flatmap.enable3dPaths(true)
             this.#button.classList.add('control-active')
+            this.#enabled = true
         }
+        this.__setBackground()
     }
 }
 

package/src/flatmap-viewer.js

@@ -37,8 +37,6 @@ import {MapServer, loadJSON} from './mapserver.js';
 import {SearchIndex} from './search.js';
 import {UserInteractions} from './interactions.js';
 
-import {MinimapControl} from './controls/minimap.js';
-import {NavigationControl} from './controls/controls.js';
 import {APINATOMY_PATH_PREFIX} from './pathways';
 
 import * as images from './images.js';
@@ -162,33 +160,16 @@ class FlatMap
 
         this._map.setRenderWorldCopies(false);
 
-        // Do we want a fullscreen control?
-
-        if (mapDescription.options.fullscreenControl === true) {
-            this._map.addControl(new maplibregl.FullscreenControl(), 'top-right');
-        }
-
         // Disable map rotation
 
         //this._map.dragRotate.disable();
         //this._map.touchZoomRotate.disableRotation();
 
-        // Add navigation controls if option set
-
-        if (mapDescription.options.navigationControl) {
-            const value = mapDescription.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(this), position);
-        }
-
         // Finish initialisation when all sources have loaded
         // and map has rendered
 
         this._userInteractions = null;
         this._initialState = null;
-        this._minimap = null;
 
         this._map.on('idle', () => {
             if (this._userInteractions === null) {
@@ -207,14 +188,9 @@ class FlatMap
                     this._userInteractions.setState(this._options.state);
                 }
                 this._initialState = this.getState();
-
-                // Add a minimap if option set
-
-                if (this.options.minimap) {
-                    this._minimap = new MinimapControl(this, this.options.minimap);
-                        this._map.addControl(this._minimap);
-                    }
-
+                if (this._userInteractions.minimap) {
+                    this._userInteractions.minimap.initialise()
+                }
                 this._resolve(this);
             }
         });
@@ -224,13 +200,11 @@ class FlatMap
     //============================
     {
         // Load any images required by the map
-
         for (const image of this._options.images) {
             await this.addImage(image.id, image.url, '', image.options);
         }
 
         // Layers have now loaded so finish setting up
-
         this._userInteractions = new UserInteractions(this);
     }
 
@@ -836,8 +810,8 @@ class FlatMap
 
         this._map.setPaintProperty('background', 'background-color', colour);
 
-        if (this._minimap) {
-            this._minimap.setBackgroundColour(colour);
+        if (this._userInteractions.minimap) {
+            this._userInteractions.minimap.setBackgroundColour(colour);
         }
     }
 
@@ -851,8 +825,8 @@ class FlatMap
     {
         this._map.setPaintProperty('background', 'background-opacity', opacity);
 
-        if (this._minimap) {
-            this._minimap.setBackgroundOpacity(opacity);
+        if (this._userInteractions.minimap) {
+            this._userInteractions.minimap.setBackgroundOpacity(opacity);
         }
     }
 
@@ -864,8 +838,8 @@ class FlatMap
     showMinimap(show)
     //===============
     {
-        if (this._minimap) {
-            this._minimap.show(show);
+        if (this._userInteractions.minimap) {
+            this._userInteractions.minimap.show(show);
         }
 
     }
@@ -1063,6 +1037,100 @@ class FlatMap
         return data;
     }
 
+    /**
+     * Show or hide a tool for drawing regions to annotate on the map.
+     *
+     * @param  {boolean}  [visible=true]
+     */
+    showAnnotator(visible=true)
+    //=========================
+    {
+        if (this._userInteractions !== null) {
+            this._userInteractions.showAnnotator(visible)
+        }
+    }
+
+    /**
+     * Generate an ``annotation`` callback event when a drawn annotation has been created
+     * a modified.
+     *
+     * @param eventType {string}   Either ``created``, ``updated`` or ``deleted``
+     * @param feature   {Object}   A feature object with ``id``, ``type``, and ``geometry``
+     *                             fields of a feature that has been created, updated or
+     *                             deleted.
+     */
+    annotationEvent(eventType, feature)
+    //=================================
+    {
+        this.callback('annotation', {
+            type: eventType,
+            feature: feature
+        });
+    }
+
+    /**
+     * Mark a drawn/changed annotation as having been accepted by the user.
+     *
+     * @param event      {Object}     The object as received in an annotation callback
+     * @param event.type {string}     Either ``created``, ``updated`` or ``deleted``
+     * @param event.feature {Object}  A feature object.
+     */
+    commitAnnotationEvent(event)
+    //==========================
+    {
+        if (this._userInteractions) {
+            this._userInteractions.commitAnnotationEvent(event)
+        }
+    }
+
+    /**
+     * Mark a drawn/changed annotation as having been rejected by the user.
+     *
+     * @param event      {Object}     The object as received in an annotation callback
+     * @param event.type {string}     Either ``created``, ``updated`` or ``deleted``
+     * @param event.feature {Object}  A feature object.
+     */
+    rollbackAnnotationEvent(event)
+    //============================
+    {
+        if (this._userInteractions) {
+            this._userInteractions.rollbackAnnotationEvent(event)
+        }
+    }
+
+    /**
+     * Add a drawn feature to the annotation drawing tool.
+     *
+     * @param feature    {Object}        The feature to add
+     * @param feature.id {string}        The feature's id
+     * @param feature.geometry {Object}  The feature's geometry as GeoJSON
+     */
+    addAnnotationFeature(feature)
+    //===========================
+    {
+        if (this._userInteractions) {
+            this._userInteractions.addAnnotationFeature(feature)
+        }
+    }
+
+    /**
+     * Return the feature as it is currently drawn. This is so
+     * the correct geometry can be saved with a feature should
+     * a user make changes before submitting dialog provided
+     * by an external annotator.
+     *
+     * @param feature    {Object}  The drawn feature to refresh.
+     * @returns {Object|null}  The feature with currently geometry or ``null``
+     *                         if the feature has been deleted.
+     */
+    refreshAnnotationFeatureGeometry(feature)
+    //=======================================
+    {
+        if (this._userInteractions) {
+            this._userInteractions.refreshAnnotationFeatureGeometry(feature)
+        }
+    }
+
     /**
      * Generate a callback as a result of some event with a flatmap feature.
      *