@abi-software/flatmap-viewer 2.3.0-b.1 → 2.3.1-b.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.3.0-b.1``
+* ``npm install @abi-software/flatmap-viewer@2.3.1-b.1``
 
 Documentation
 -------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.3.0-b.1",
+  "version": "2.3.1-b.1",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",
@@ -38,14 +38,12 @@
     "browser-sync": "^2.26.7",
     "bs-fullscreen-message": "^1.1.0",
     "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^6.5.1",
+    "css-loader": "^6.7.3",
     "eslint": "^8.7.0",
     "express": "^4.17.1",
-    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^4.5.2",
     "strip-ansi": "^7.0.1",
-    "style-loader": "^1.0.0",
-    "url-loader": "^4.1.0",
+    "style-loader": "^3.3.2",
     "webpack": "^5.16.0",
     "webpack-cli": "^4.4.0",
     "webpack-dev-middleware": "^4.1.0",

package/src/annotation.js

@@ -82,9 +82,10 @@ function stopSpinner(panel)
 
 export class Annotator
 {
-    constructor(flatmap)
+    constructor(flatmap, ui)
     {
         this.__flatmap = flatmap;
+        this.__ui = ui;
         this.__haveAnnotation = false;
         this.__user = undefined;
         this.__savedStatusMessage = '';
@@ -116,12 +117,6 @@ export class Annotator
     async __authorise(panel)
     //======================
     {
-/*
-        const testUser = {name: 'Testing...'};
-        this.__setUser(testUser);
-        this.__authorised = true;
-        return Promise.resolve(testUser);
-*/
         const abortController = new AbortController();
         setTimeout((panel) => {
             if (this.user === 'undefined') {
@@ -450,20 +445,134 @@ export class Annotator
         });
     }
 
-    annotate(feature, closedCallback)
-    //===============================
+    __chooseFeatureProperties(features, callback)
+    //===========================================
     {
-        this.__currentFeatureId = feature.properties['id']
+        this.__ui.selectFeature(features[0].id);
+
+        // Feature chooser is only for multiple selections
+        if (features.length === 1
+         || features[0].properties['cd-class'] !== 'celldl:Connection'
+         || (features.length === 2
+          && features[1].properties['cd-class'] !== 'celldl:Connection')) {
+            callback(features[0].properties);
+            return;
+        }
+        const featureList = [];
+        const featureProperties = new Map();
+        const featureSeen = new Set();
+        let selected = 'selected';    // Select the first entry
+        for (const feature of features) {
+            if (feature.properties['cd-class'] !== 'celldl:Connection'
+             || feature.properties['id'] == undefined
+             || featureSeen.has(feature.properties['id'])) {
+                continue;
+            }
+            const mapFeature = this.__ui.mapFeature(feature.id);
+            const annotated = (mapFeature !== undefined)
+                            ? this.__ui._map.getFeatureState(mapFeature)['annotated']
+                            : false;
+            let label = '';
+            if (feature.properties.models) {
+                label = ` -- ${feature.properties.label.split('\n')[0]} (${feature.properties.models})`;
+            }
+            featureList.push(`<option value="${feature.id}" ${selected}>${annotated ? '*' : '&nbsp;'} ${feature.properties.id} -- ${feature.properties.kind}${label}</option>`);
+            featureProperties.set(+feature.id, feature.properties);
+            featureSeen.add(feature.properties['id']);
+            selected = '';
+        }
+        if (featureList.length == 0) {
+            callback(undefined);
+            return;
+        } else if (featureList.length == 1) {
+            callback(featureProperties.values().next().value);
+            return;
+        }
+        const panelContent = `
+<div id="annotation-feature-selection">
+    <div>
+        <label for="annotation-feature-selector">Select feature:</label>
+        <select id="annotation-feature-selector" size="${Math.min(featureList.length, 7)}">
+            ${featureList.join('\n')}
+        </select>
+    </div>
+    <div id="annotation-feature-buttons">
+        <input id="annotation-feature-cancel" type="button" value="Cancel"/>
+        <input id="annotation-feature-annotate" type="button" value="Annotate"/>
+    </div>
+</div>`;
+        this.__panel = jsPanel.create({
+            theme: 'light',
+            border: '2px solid #080',
+            borderRadius: '.5rem',
+            panelSize: 'auto auto',
+            position: 'left-top',
+            content: panelContent,
+            data: features[0].properties,
+            closeOnEscape: true,
+            closeOnBackdrop: false,
+            headerTitle: 'Select feature to annotate',
+            headerControls: 'closeonly xs',
+            callback: ((panel) => {
+                const selector = document.getElementById('annotation-feature-selector');
+                selector.onchange = (e) => {
+                    if (e.target.value !== '') {
+                        this.__ui.unselectFeatures();
+                        this.__ui.selectFeature(e.target.value);
+                        this.__panel.options.data = featureProperties.get(+e.target.value);
+                    }
+                };
+                selector.ondblclick = (e) => {
+                    if (e.target.value !== '') {
+                        const properties = this.__panel.options.data;
+                        this.__panel.close();
+                        callback(properties);
+                    }
+                }
+                selector.focus();
+                document.getElementById('annotation-feature-cancel')
+                        .onclick = (e) => {
+                            this.__panel.close();
+                            callback(undefined);
+                        };
+                document.getElementById('annotation-feature-annotate')
+                        .onclick = (e) => {
+                            const properties = this.__panel.options.data;
+                            this.__panel.close();
+                            callback(properties);
+                        };
+            }).bind(this)
+        });
+        document.addEventListener('jspanelcloseduser', (e) => { callback(undefined) }, false);
+    }
+
+    annotate(features, closedCallback)
+    //================================
+    {
+        // provide a list of features so dialog needs to first provide selection list
+        // and highlight current one as user scrolls...
 
+        this.__chooseFeatureProperties(features, (featureProperties) => {
+            if (featureProperties) {
+                this.__annotateFeature(featureProperties, closedCallback);
+            } else {
+                closedCallback();
+            }
+        });
+    }
+
+    __annotateFeature(featureProperties, callback)
+    //============================================
+    {
+        this.__currentFeatureId = featureProperties['id'];
         if (this.__currentFeatureId === undefined) {
-            closedCallback();
+            callback();
             return;
         }
-
         const panelContent = [];
         panelContent.push('<div id="flatmap-annotation-panel">');
         panelContent.push('  <div id="flatmap-annotation-feature">');
-        panelContent.push(...this.__featureHtml(feature.properties));
+        panelContent.push(...this.__featureHtml(featureProperties));
         panelContent.push('  </div>');
         panelContent.push('  <form id="flatmap-annotation-form"></form>');
         panelContent.push('  <div id="flatmap-annotation-existing"></div>');
@@ -523,7 +632,7 @@ export class Annotator
         });
 
         // should we warn if unsaved changes when closing??
-        document.addEventListener('jspanelclosed', closedCallback, false);
+        document.addEventListener('jspanelclosed', callback, false);
     }
 
     async annotated_features()

package/src/{controls.js → controls/controls.js}

@@ -2,7 +2,7 @@
 
 Flatmap viewer and annotation tool
 
-Copyright (c) 2019  David Brooks
+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.
@@ -18,13 +18,6 @@ limitations under the License.
 
 ******************************************************************************/
 
-'use strict';
-
-//==============================================================================
-
-
-//==============================================================================
-
 // Make sure colour string is in `#rrggbb` form.
 // Based on https://stackoverflow.com/a/47355187
 

package/src/{info.js → controls/info.js}

@@ -2,7 +2,7 @@
 
 Flatmap viewer and annotation tool
 
-Copyright (c) 2019  David Brooks
+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.
@@ -18,11 +18,7 @@ limitations under the License.
 
 ******************************************************************************/
 
-'use strict';
-
-//==============================================================================
-
-import { indexedProperties } from './search.js';
+import { indexedProperties } from '../search.js';
 
 //==============================================================================
 

package/src/{minimap.js → controls/minimap.js}

@@ -2,7 +2,7 @@
 
 Flatmap viewer and annotation tool
 
-Copyright (c) 2019  David Brooks
+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.
@@ -45,10 +45,6 @@ limitations under the License.
 
 //==============================================================================
 
-'use strict';
-
-//==============================================================================
-
 import maplibre from 'maplibre-gl';
 
 //==============================================================================

package/src/controls/search.js

@@ -0,0 +1,113 @@
+/******************************************************************************
+
+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.
+
+**/
+//==============================================================================
+
+export class SearchControl
+{
+    constructor(flatmap)
+    {
+        this.__flatmap = flatmap;
+    }
+
+    onAdd(map)
+    //========
+    {
+        this._map = map;
+        this._container = document.createElement('div');
+        this._container.className = 'maplibregl-ctrl search-control';
+
+        this._input = document.createElement('input');
+        this._input.id = 'search-control-input';
+        this._input.setAttribute('type', 'search');
+        this._input.setAttribute('visible', 'false');
+        this._input.setAttribute('placeholder', 'Search...');
+
+        this._button = document.createElement('button');
+        this._button.id = 'search-control-button';
+        this._button.className = 'control-button';
+        this._button.title = 'Search flatmap';
+        this._button.setAttribute('type', 'button');
+        this._button.setAttribute('aria-label', 'Search flatmap');
+        // https://iconmonstr.com/magnifier-6-svg/
+        this._button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" id="search-control-icon" viewBox="0 0 24 24">
+    <path d="M21.172 24l-7.387-7.387c-1.388.874-3.024 1.387-4.785 1.387-4.971 0-9-4.029-9-9s4.029-9 9-9 9 4.029 9 9c0 1.761-.514 3.398-1.387 4.785l7.387 7.387-2.828 2.828zm-12.172-8c3.859 0 7-3.14 7-7s-3.141-7-7-7-7 3.14-7 7 3.141 7 7 7z"/>
+</svg>`;
+        this._container.appendChild(this._button);
+
+        this._container.onclick = this.onClick_.bind(this);
+        return this._container;
+    }
+
+    getDefaultPosition()
+    //==================
+    {
+        return 'top-right';
+    }
+
+    onRemove()
+    //========
+    {
+        this._container.parentNode.removeChild(this._container);
+        this._map = undefined;
+    }
+
+    searchMap_(search=true)
+    //=====================
+    {
+        this._input = this._container.removeChild(this._input);
+        this._input.setAttribute('visible', 'false');
+        const text = this._input.value;
+        if (search && text !== '') {
+            const results = this.__flatmap.search(text);
+            this.__flatmap.showSearchResults(results);
+        }
+    }
+
+    onKeyDown_(e)
+    //===========
+    {
+        if (e.key === 'Enter') {
+            this.searchMap_();
+        } else if (e.key === 'Escape') {
+            this.searchMap_(false);
+        }
+    }
+
+    onClick_(e)
+    //=========
+    {
+        const targetId = ('rangeTarget' in e) ? e.rangeTarget.id : e.target.id; // FF has rangeTarget
+        if (['search-control-button', 'search-control-icon'].includes(targetId)) {
+            if (this._input.getAttribute('visible') === 'false') {
+                this._container.appendChild(this._input);
+                this._container.appendChild(this._button);
+                this._input.setAttribute('visible', 'true');
+                this._input.onkeydown = this.onKeyDown_.bind(this);
+                this._input.value = '';
+                this.__flatmap.clearSearchResults();
+                this._input.focus();
+            } else {
+                this.searchMap_();
+            }
+        }
+    }
+}
+
+//==============================================================================

package/src/controls/systems.js

@@ -0,0 +1,66 @@
+/******************************************************************************
+
+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.
+
+**/
+//==============================================================================
+
+import { Control } from './controls';
+
+//==============================================================================
+
+export class SystemsControl extends Control
+{
+    constructor(flatmap, systems)
+    {
+        super(flatmap, 'system', 'systems');
+        this.__systems = systems;
+    }
+
+    __innerLinesHTML()
+    //================
+    {
+        const html = [];
+        for (const system of this.__systems) {
+            html.push(`<label for="${this.__prefix}${system.id}" style="background: ${system.colour};">${system.name}</label><input id="${this.__prefix}${system.id}" type="checkbox" checked/>`);
+        }
+        return html;
+    }
+
+    __enableAll(enable)
+    //=================
+    {
+        for (const system of this.__systems) {
+            const checkbox = document.getElementById(`${this.__prefix}${system.id}`);
+            if (checkbox) {
+                checkbox.checked = enable;
+                this.__flatmap.enableSystem(system.name, enable);
+            }
+        }
+    }
+
+    __enableControl(id, enable)
+    //=========================
+    {
+        for (const system of this.__systems) {
+            if (id === system.id) {
+                this.__flatmap.enableSystem(system.name, enable);
+            }
+        }
+    }
+
+}

package/src/flatmap-viewer.js

@@ -34,11 +34,12 @@ import '../static/css/flatmap-viewer.css';
 //==============================================================================
 
 import {MapServer} from './mapserver.js';
-import {MinimapControl} from './minimap.js';
-import {NavigationControl} from './controls.js';
 import {SearchIndex} from './search.js';
 import {UserInteractions} from './interactions.js';
 
+import {MinimapControl} from './controls/minimap.js';
+import {NavigationControl} from './controls/controls.js';
+
 import * as images from './images.js';
 import * as utils from './utils.js';
 
@@ -259,20 +260,6 @@ class FlatMap
         this._map.zoomOut();
     }
 
-    /**
-     * Toggle the visibility of paths on the map.zoomIn
-     *
-     * * If some paths are hidden then all paths are made visible.
-     * * If all paths are visible then they are all hidden.
-     */
-    togglePaths()
-    //===========
-    {
-        if (this._userInteractions !== null) {
-            this._userInteractions.togglePaths();
-        }
-    }
-
     /**
      * @returns {Array.<{type: string, label: string, colour: string}>} an array of objects giving the path types
      *                                                                  present in the map along with their
@@ -1301,6 +1288,7 @@ export class MapManager
     * @arg options.showPosition {boolean} Show ``position`` of tooltip.
     * @arg options.standalone {boolean} Viewer is running ``standalone``, as opposed to integrated into
     *                                   another application so show a number of controls. Defaults to ``false``.
+    * @arg options.annotator {boolean} Allow interactive annotation of features and paths.
     * @example
     * const humanMap1 = mapManager.loadMap('humanV1', 'div-1');
     *