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

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.1``
 
 Documentation
 -------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.5.0-a.2",
+  "version": "2.5.1",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",
@@ -17,12 +17,12 @@
   "author": "David Brooks",
   "license": "MIT",
   "dependencies": {
+    "@abi-software/mapbox-gl-draw-freehand-mode": "^2.2.0",
     "@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,351 @@
+/******************************************************************************
+
+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'
+
+// NB: https://github.com/bemky/mapbox-gl-draw-freehand-mode/issues/25
+import FreehandMode from 'mapbox-gl-draw-freehand-mode'
+
+//==============================================================================
+
+const drawStyles = [
+    {
+      'id': 'highlight-active-points',
+      'type': 'circle',
+      'filter': ['all',
+        ['==', '$type', 'Point'],
+        ['==', 'meta', 'feature'],
+        ['==', 'active', 'true']],
+      'paint': {
+        'circle-radius': 7,
+        'circle-color': '#080'
+      }
+    },
+    {
+      'id': 'points-are-red',
+      'type': 'circle',
+      'filter': ['all',
+        ['==', '$type', 'Point'],
+        ['==', 'meta', 'feature'],
+        ['==', 'active', 'false']],
+      'paint': {
+        'circle-radius': 5,
+        'circle-color': '#800'
+      }
+    },
+    // ACTIVE (being drawn)
+    // line stroke
+    {
+        "id": "gl-draw-line",
+        "type": "line",
+        "filter": ["all", ["==", "$type", "LineString"], ["!=", "mode", "static"]],
+        "layout": {
+          "line-cap": "round",
+          "line-join": "round"
+        },
+        "paint": {
+          "line-color": "#D20C0C",
+          "line-dasharray": [0.2, 2],
+          "line-width": 2
+        }
+    },
+    // polygon fill
+    {
+      "id": "gl-draw-polygon-fill",
+      "type": "fill",
+      "filter": ["all", ["==", "$type", "Polygon"], ["!=", "mode", "static"]],
+      "paint": {
+        'fill-color': [
+            'case',
+            ['boolean', ['feature-state', 'active'], false], '#D88',
+            '#020C0C'
+        ],
+        "fill-outline-color": "#D20C0C",
+        "fill-opacity": 0.1
+      }
+    },
+    // polygon mid points
+    {
+      'id': 'gl-draw-polygon-midpoint',
+      'type': 'circle',
+      'filter': ['all',
+        ['==', '$type', 'Point'],
+        ['==', 'meta', 'midpoint']],
+      'paint': {
+        'circle-radius': 3,
+        'circle-color': '#fbb03b'
+      }
+    },
+    // polygon outline stroke
+    // This doesn't style the first edge of the polygon, which uses the line stroke styling instead
+    {
+      "id": "gl-draw-polygon-stroke-active",
+      "type": "line",
+      "filter": ["all", ["==", "$type", "Polygon"], ["!=", "mode", "static"]],
+      "layout": {
+        "line-cap": "round",
+        "line-join": "round"
+      },
+      "paint": {
+        "line-color": "#D20C0C",
+        "line-dasharray": [0.2, 2],
+        "line-width": 2
+      }
+    },
+    // vertex point halos
+    {
+      "id": "gl-draw-polygon-and-line-vertex-halo-active",
+      "type": "circle",
+      "filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"]],
+      "paint": {
+        "circle-radius": 5,
+        "circle-color": "#FFF"
+      }
+    },
+    // vertex points
+    {
+      "id": "gl-draw-polygon-and-line-vertex-active",
+      "type": "circle",
+      "filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"]],
+      "paint": {
+        "circle-radius": 3,
+        "circle-color": "#D20C0C",
+      }
+    },
+
+    // INACTIVE (static, already drawn)
+    // line stroke
+    {
+        "id": "gl-draw-line-static",
+        "type": "line",
+        "filter": ["all", ["==", "$type", "LineString"], ["==", "mode", "static"]],
+        "layout": {
+          "line-cap": "round",
+          "line-join": "round"
+        },
+        "paint": {
+          "line-color": "#000",
+          "line-width": 3
+        }
+    },
+    // polygon fill
+    {
+      "id": "gl-draw-polygon-fill-static",
+      "type": "fill",
+      "filter": ["all", ["==", "$type", "Polygon"], ["==", "mode", "static"]],
+      "paint": {
+        "fill-color": "#000",
+        "fill-outline-color": "#000",
+        "fill-opacity": 0.1
+      }
+    },
+    // polygon outline
+    {
+      "id": "gl-draw-polygon-stroke-static",
+      "type": "line",
+      "filter": ["all", ["==", "$type", "Polygon"], ["==", "mode", "static"]],
+      "layout": {
+        "line-cap": "round",
+        "line-join": "round"
+      },
+      "paint": {
+        "line-color": "#000",
+        "line-width": 3
+      }
+    }
+]
+
+//==============================================================================
+
+const drawStyleIds = drawStyles.map(s => s.id)
+
+export const DRAW_ANNOTATION_LAYERS = [...drawStyleIds.map(id => `${id}.cold`),
+                                       ...drawStyleIds.map(id => `${id}.hot`)]
+
+//==============================================================================
+
+export class AnnotationDrawControl
+{
+    #visible
+
+    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.#visible = visible
+        this.__draw = new MapboxDraw({
+            displayControlsDefault: false,
+            controls: {
+                point: true,
+                line_string: true,
+                polygon: true,
+                trash: true
+            },
+            userProperties: true,
+            keybindings: true,
+            modes: {
+                ...MapboxDraw.modes,
+                draw_polygon: FreehandMode
+            },
+            styles: drawStyles
+        })
+        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,
+                                                geometry: f.geometry
+                                                // properties
+                                            }
+                                        })
+        return features.length ? features[0] : null
+    }
+
+    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 also need to be on the feature passed to the annotator
+            // for storage
+            feature.properties = {
+                user_drawn: true,
+                user_label: 'Drawn annotation'
+            }
+            this.__flatmap.annotationDrawEvent('created', feature)
+        }
+    }
+
+    deletedFeature(event)
+    //===================
+    {
+        const feature = this.#cleanFeature(event)
+        if (feature) {
+            this.__flatmap.annotationDrawEvent('deleted', feature.id)
+        }
+    }
+
+    updatedFeature(event)
+    //===================
+    {
+        const feature = this.#cleanFeature(event)
+        if (feature) {
+            this.__flatmap.annotationDrawEvent('updated', feature)
+        }
+    }
+
+    addFeature(feature)
+    //=================
+    {
+        this.__draw.add(feature)
+    }
+
+    removeFeature(feature)
+    //====================
+    {
+        this.__draw.delete(feature.id)
+    }
+}
+
+//==============================================================================

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,52 @@ 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-draw`` callback when a drawn annotation has changed.
+     *
+     * @param {string}  operation       Either ``created``, ``updated`` or ``deleted``
+     * @param {string|Object}  feature  An object with ``id`` and ``geometry`` fields
+     *                                  for a feature that has been created or updated
+     *                                  or the ``id`` of a feature that has been deleted.
+     */
+    annotationDrawEvent(drawEvent, feature)
+    //=====================================
+    {
+        this.callback('annotation-draw', {
+            type: drawEvent,
+            feature: feature
+        });
+    }
+
+    /**
+     * Add or remove a drawn annotation.
+     *
+     * @param {string} operation   Either ``add`` or ``remove``
+     * @param {Object} feature     The feature to add or remove
+     * @param {string} feature.id  The feature's id
+     * @param {Object} feature.geometry  The feature's geometry as GeoJSON
+     */
+    modifyDrawnAnnotatorFeature(operation, feature)
+    //=============================================
+    {
+        if (this._userInteractions) {
+            this._userInteractions.modifyDrawnAnnotatorFeature(operation, feature)
+        }
+    }
+
     /**
      * Generate a callback as a result of some event with a flatmap feature.
      *