@abi-software/flatmap-viewer 2.5.1 → 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.1``
+* ``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.1",
+  "version": "2.5.2",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",
@@ -17,7 +17,6 @@
   "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/layers": "^8.9.33",

package/src/controls/annotation.js

@@ -44,161 +44,10 @@ limitations under the License.
 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)
+const drawStyleIds = MapboxDraw.lib.theme.map(s => s.id)
 
 export const DRAW_ANNOTATION_LAYERS = [...drawStyleIds.map(id => `${id}.cold`),
                                        ...drawStyleIds.map(id => `${id}.hot`)]
@@ -207,8 +56,6 @@ export const DRAW_ANNOTATION_LAYERS = [...drawStyleIds.map(id => `${id}.cold`),
 
 export class AnnotationDrawControl
 {
-    #visible
-
     constructor(flatmap, visible=false)
     {
         MapboxDraw.constants.classes.CONTROL_BASE  = 'maplibregl-ctrl'
@@ -216,7 +63,9 @@ export class AnnotationDrawControl
         MapboxDraw.constants.classes.CONTROL_GROUP = 'maplibregl-ctrl-group'
 
         this.__flatmap = flatmap
-        this.#visible = visible
+        this.__committedFeatures = new Map()
+        this.__uncommittedFeatureIds = new Set()
+        this.__visible = visible
         this.__draw = new MapboxDraw({
             displayControlsDefault: false,
             controls: {
@@ -226,12 +75,7 @@ export class AnnotationDrawControl
                 trash: true
             },
             userProperties: true,
-            keybindings: true,
-            modes: {
-                ...MapboxDraw.modes,
-                draw_polygon: FreehandMode
-            },
-            styles: drawStyles
+            keybindings: true
         })
         this.__map = null
     }
@@ -255,7 +99,7 @@ export class AnnotationDrawControl
         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)
+        this.show(this.__visible)
         return this.__container
     }
 
@@ -272,17 +116,17 @@ export class AnnotationDrawControl
     {
         if (this.__container) {
             this.__container.style.display = visible ? 'block' : 'none'
-            if (visible && !this.#visible) {
+            if (visible && !this.__visible) {
                 for (const layerId of DRAW_ANNOTATION_LAYERS) {
                     this.__map.setLayoutProperty(layerId, 'visibility', 'visible')
                 }
-            } else if (!visible && this.#visible) {
+            } else if (!visible && this.__visible) {
                 for (const layerId of DRAW_ANNOTATION_LAYERS) {
                     this.__map.setLayoutProperty(layerId, 'visibility', 'none')
                 }
             }
         }
-        this.#visible = visible
+        this.__visible = visible
     }
 
     #cleanFeature(event)
@@ -292,13 +136,20 @@ export class AnnotationDrawControl
                                        .map(f => {
                                             return {
                                                 id: f.id,
+                                                type: 'Feature',
                                                 geometry: f.geometry
-                                                // properties
                                             }
                                         })
         return features.length ? features[0] : null
     }
 
+    #sendEvent(type, feature)
+    //=======================
+    {
+        this.__uncommittedFeatureIds.add(feature.id)
+        this.__flatmap.annotationEvent(type, feature)
+    }
+
     createdFeature(event)
     //===================
     {
@@ -307,13 +158,12 @@ export class AnnotationDrawControl
             // 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
+            // They 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)
+            this.#sendEvent('created', feature)
         }
     }
 
@@ -322,7 +172,11 @@ export class AnnotationDrawControl
     {
         const feature = this.#cleanFeature(event)
         if (feature) {
-            this.__flatmap.annotationDrawEvent('deleted', feature.id)
+            if (this.__uncommittedFeatureIds.has(feature.id)) {
+                // Ignore delete on an uncommitted create or update
+            } else {
+                this.#sendEvent('deleted', feature)
+            }
         }
     }
 
@@ -331,20 +185,61 @@ export class AnnotationDrawControl
     {
         const feature = this.#cleanFeature(event)
         if (feature) {
-            this.__flatmap.annotationDrawEvent('updated', 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)
     //=================
     {
-        this.__draw.add(feature)
+        feature = Object.assign({}, feature, {type: 'Feature'})
+        const ids = this.__draw.add(feature)
+        this.__committedFeatures.set(ids[0], feature)
+        this.__uncommittedFeatureIds.delete(ids[0])
     }
 
-    removeFeature(feature)
-    //====================
+    refreshGeometry(feature)
+    //======================
     {
-        this.__draw.delete(feature.id)
+        return this.__draw.get(feature.id) || null
     }
 }
 

package/src/flatmap-viewer.js

@@ -1051,35 +1051,83 @@ class FlatMap
     }
 
     /**
-     * Generate an ``'annotation-draw`` callback when a drawn annotation has changed.
+     * Generate an ``annotation`` callback event when a drawn annotation has been created
+     * a modified.
      *
-     * @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.
+     * @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.
      */
-    annotationDrawEvent(drawEvent, feature)
-    //=====================================
+    annotationEvent(eventType, feature)
+    //=================================
     {
-        this.callback('annotation-draw', {
-            type: drawEvent,
+        this.callback('annotation', {
+            type: eventType,
             feature: feature
         });
     }
 
     /**
-     * Add or remove a drawn annotation.
+     * 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 {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
+     * @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
      */
-    modifyDrawnAnnotatorFeature(operation, feature)
-    //=============================================
+    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.modifyDrawnAnnotatorFeature(operation, feature)
+            this._userInteractions.refreshAnnotationFeatureGeometry(feature)
         }
     }
 

package/src/interactions.js

@@ -248,11 +248,11 @@ export class UserInteractions
                 this._map.addControl(new TaxonsControl(flatmap));
             }
 
+            this._map.addControl(new Path3DControl(this));
+
             if (flatmap.options.annotator) {
                 this._map.addControl(new AnnotatorControl(flatmap));
             }
-
-            this._map.addControl(new Path3DControl(this));
         }
 
         // Add an initially hidden tool for drawing on the map.
@@ -326,15 +326,35 @@ export class UserInteractions
         }
     }
 
-    modifyDrawnAnnotatorFeature(operation, feature)
-    //=============================================
+    commitAnnotationEvent(event)
+    //==========================
     {
         if (this.#annotationDrawControl) {
-            if (operation === 'add') {
-                this.#annotationDrawControl.addFeature(feature)
-            } else if (operation === 'remove') {
-                this.#annotationDrawControl.removeFeature(feature)
-            }
+            this.#annotationDrawControl.commitEvent(event)
+        }
+    }
+
+    rollbackAnnotationEvent(event)
+    //==========================
+    {
+        if (this.#annotationDrawControl) {
+            this.#annotationDrawControl.rollbackEvent(event)
+        }
+    }
+
+    addAnnotationFeature(feature)
+    //===========================
+    {
+        if (this.#annotationDrawControl) {
+            this.#annotationDrawControl.addFeature(feature)
+        }
+    }
+
+    refreshAnnotationFeatureGeometry(feature)
+    //=======================================
+    {
+        if (this.#annotationDrawControl) {
+            this.#annotationDrawControl.refreshGeometry(feature)
         }
     }
 

package/src/layers/paths3d.js

@@ -27,7 +27,6 @@ import GL from '@luma.gl/constants'
 
 import {pathColourArray} from '../pathways'
 
-
 //==============================================================================
 
 const transparencyCheck = '|| length(vColor) == 0.0'

package/src/main.js

@@ -2,7 +2,7 @@
 
 Flatmap viewer and annotation tool
 
-Copyright (c) 2019  David Brooks
+Copyright (c) 2019 - 2024 David Brooks
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -27,6 +27,52 @@ export { MapManager };
 
 //==============================================================================
 
+class DrawControl
+{
+    constructor(flatmap)
+    {
+        this._flatmap = flatmap
+        this._lastEvent = null
+        this._idField = document.getElementById('drawing-id')
+
+        this._okBtn = document.getElementById('drawing-ok')
+        if (this._okBtn) {
+            this._okBtn.addEventListener('click', e => {
+                if (this._lastEvent) {
+                    const feature = this._flatmap.refreshAnnotationFeatureGeometry(this._lastEvent.feature)
+                    this._flatmap.commitAnnotationEvent(this._lastEvent)
+                    this._idField.innerText = ''
+                    this._lastEvent = null
+                    // Send `feature`, along with user comments, to the annotation service
+                }
+            })
+        }
+
+        this._cancelBtn = document.getElementById('drawing-cancel')
+        if (this._cancelBtn) {
+            this._cancelBtn.addEventListener('click', e => {
+                if (this._lastEvent) {
+                    this._flatmap.rollbackAnnotationEvent(this._lastEvent)
+                    this._idField.innerText = ''
+                    this._lastEvent = null
+                }
+            })
+        }
+    }
+
+    handleEvent(event)
+    //================
+    {
+        console.log(event)
+        if (this._idField) {
+            this._idField.innerText = `Annotation ${event.type}, Id: ${event.feature.id}`
+            this._lastEvent = event
+        }
+    }
+}
+
+//==============================================================================
+
 export async function standaloneViewer(map_endpoint=null, options={})
 {
     const requestUrl = new URL(window.location.href);
@@ -52,6 +98,7 @@ export async function standaloneViewer(map_endpoint=null, options={})
     });
 
     let currentMap = null;
+    let drawControl = null;
     let defaultBackground = localStorage.getItem('flatmap-background-colour') || 'black';
 
     const mapOptions = Object.assign({
@@ -90,6 +137,8 @@ export async function standaloneViewer(map_endpoint=null, options={})
         mapManager.loadMap(id, 'map-canvas', (eventType, ...args) => {
                 if (args[0].type === 'control' && args[0].control === 'background') {
                     mapOptions.background = args[0].value;
+                } else if (eventType === 'annotation') {
+                    drawControl.handleEvent(...args)
                 }
             }, mapOptions)
             .then(map => {
@@ -99,6 +148,7 @@ export async function standaloneViewer(map_endpoint=null, options={})
                 map.addMarker('UBERON:0001155'); // Colon
                 map.addMarker('UBERON:0001255'); // Bladder
                 currentMap = map;
+                drawControl = new DrawControl(map)
             })
             .catch(error => {
                 console.log(error);
@@ -180,3 +230,6 @@ export async function standaloneViewer(map_endpoint=null, options={})
 
     loadMap(mapId, mapTaxon, mapSex);
 }
+
+//==============================================================================
+

package/static/css/flatmap-viewer.css

@@ -230,139 +230,9 @@ label[for=layer-all-layers] {
     font-weight: bold;
 }
 
-/* Annotator */
-.flex-auto {
-    flex: 1 1 auto;
+/* Control buttons for standalone annotation */
+.mapbox-gl-draw_ctrl-draw-btn.active {
+    background-color: #FBB !important;
 }
 
-#flatmap-annotation-panel {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    height: 100%;
-}
-#flatmap-annotation-form
-{
-    flex: auto;
-}
-
-#flatmap-annotation-feature,
-#flatmap-annotation-form,
-#flatmap-annotation-existing
-{
-    padding: 4px;
-}
-#flatmap-annotation-feature,
-#flatmap-annotation-existing
-{
-    background-color: #DDD;
-    border: 2px solid #888;
-}
-
-#flatmap-annotation-existing
-{
-    overflow: scroll;
-    max-height: 400px;
-}
-
-.flatmap-annotation-prompt
-{
-    font-weight: bold;
-    display: inline-block;
-    min-width: 80px;
-    padding-right: 6px;
-    vertical-align: top;
-}
-
-.flatmap-annotation-value
-{
-    display: inline-block;
-    vertical-align: top;
-}
-
-#flatmap-annotation-formdata
-{
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    padding-right: 4px;
-}
-
-#flatmap-annotation-formdata div
-{
-    padding-top: 4px;
-    padding-bottom: 4px;
-}
-
-.flatmap-annotation-entry {
-    display: flex;
-    flex-wrap: nowrap;
-}
-
-#flatmap-annotation-form input,
-#flatmap-annotation-form .multiple,
-#flatmap-annotation-form select,
-#flatmap-annotation-form textarea
-{
-    flex: auto;
-}
-
-#flatmap-annotation-form label
-{
-    padding-right: 6px;
-    display: inline-block;
-    width: 80px;
-}
-#flatmap-annotation-form .multiple,
-#flatmap-annotation-form textarea
-{
-    width: 360px;
-}
-#flatmap-annotation-form input[type="text"]
-{
-    width: 300px;
-}
-#flatmap-annotation-form .multiple
-{
-    padding:0;
-}
-#flatmap-annotation-form select
-{
-    width: 160px;
-}
-#flatmap-annotation-form input[type="button"]
-{
-    float: right;
-    background-color: #BBB;
-}
-
-#annotation-feature-selection
-{
-    display: flex;
-}
-
-#annotation-feature-buttons
-{
-    float: right;
-    padding-top: 10px;
-    padding-bottom: 10px;
-}
-
-.jsPanel-title {
-    font-size: 1.4em !important;
-    font-weight: bold !important;
-}
-
-.jsPanel-content
-{
-    background-color: #EEE !important;
-}
-.jsPanel-hdr,
-.jsPanel-ftr
-{
-    background-color: #BBB !important;
-}
-.jsPanel-ftr-btn {
-    cursor: pointer;
-}
 /* End of file */