@abi-software/flatmap-viewer 2.2.10-devel.2 → 2.2.11-devel.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.2.10-devel.2",
+  "version": "2.2.11-devel.1",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",

package/src/controls.js

@@ -22,7 +22,8 @@ limitations under the License.
 
 //==============================================================================
 
-import * as pathways from './pathways.js';
+// Needed for Webpack
+import zoomInButton from '../static/images/zoom-in-button.png'
 
 //==============================================================================
 
@@ -91,10 +92,11 @@ export class NavigationControl
 
 export class PathControl
 {
-    constructor(flatmap)
+    constructor(flatmap, pathTypes)
     {
         this._flatmap = flatmap;
         this._map = undefined;
+        this.__pathTypes = pathTypes;
     }
 
     getDefaultPosition()
@@ -117,11 +119,14 @@ export class PathControl
 
         const innerHTML = [];
         innerHTML.push(`<label for="path-all-paths">ALL PATHS:</label><div class="nerve-line"></div><input id="path-all-paths" type="checkbox" checked/>`);
-        for (const path of pathways.PATH_TYPES) {
+        for (const path of this.__pathTypes) {
+            // need to set style background instead of class...
+            // background: #2A62F6;
+            // background: repeating-linear-gradient(to right,#EA3423 0,#EA3423 6px,transparent 6px,transparent 9px)
             innerHTML.push(`<label for="path-${path.type}">${path.label}</label><div class="nerve-line nerve-${path.type}"></div><input id="path-${path.type}" type="checkbox" checked/>`);
         }
         this._legend.innerHTML = innerHTML.join('\n');
-        this.__checkedCount = pathways.PATH_TYPES.length;
+        this.__checkedCount = this.__pathTypes.length;
         this.__halfCount = Math.trunc(this.__checkedCount/2);
 
         this._button = document.createElement('button');
@@ -164,11 +169,11 @@ export class PathControl
                     event.target.indeterminate = false;
                 }
                 if (event.target.checked) {
-                    this.__checkedCount = pathways.PATH_TYPES.length;
+                    this.__checkedCount = this.__pathTypes.length;
                 } else {
                     this.__checkedCount = 0;
                 }
-                for (const path of pathways.PATH_TYPES) {
+                for (const path of this.__pathTypes) {
                     const pathCheckbox = document.getElementById(`path-${path.type}`);
                     if (pathCheckbox) {
                         pathCheckbox.checked = event.target.checked;
@@ -187,7 +192,7 @@ export class PathControl
                 if (this.__checkedCount === 0) {
                     allPathsCheckbox.checked = false;
                     allPathsCheckbox.indeterminate = false;
-                } else if (this.__checkedCount === pathways.PATH_TYPES.length) {
+                } else if (this.__checkedCount === this.__pathTypes.length) {
                     allPathsCheckbox.checked = true;
                     allPathsCheckbox.indeterminate = false;
                 } else {
@@ -316,6 +321,133 @@ export class LayerControl
 
 //==============================================================================
 
+
+const SCKAN_STATES = [
+    {
+        'id': 'VALID',
+        'description': 'Path consistent with SCKAN'
+    },
+    {
+        'id': 'INVALID',
+        'description': 'Path inconsistent with SCKAN'
+    }
+];
+
+
+export class SCKANControl
+{
+    constructor(flatmap)
+    {
+        this.__flatmap = flatmap;
+        this.__map = undefined;
+    }
+
+    getDefaultPosition()
+    //==================
+    {
+        return 'top-right';
+    }
+
+    onAdd(map)
+    //========
+    {
+        this.__map = map;
+        this.__container = document.createElement('div');
+        this.__container.className = 'maplibregl-ctrl';
+        this.__container.id = 'flatmap-layer-control';
+
+        this.__sckan = document.createElement('div');
+        this.__sckan.id = 'sckan-control-text';
+        this.__sckan.className = 'flatmap-layer-grid';
+
+        const innerHTML = [];
+        innerHTML.push(`<label for="sckan-all-paths">ALL PATHS:</label><input id="sckan-all-paths" type="checkbox" checked/>`);
+        for (const state of SCKAN_STATES) {
+            innerHTML.push(`<label for="sckan-${state.id}">${state.description}</label><input id="sckan-${state.id}" type="checkbox" checked/>`);
+        }
+        this.__sckan.innerHTML = innerHTML.join('\n');
+
+        this.__sckanCount = SCKAN_STATES.length;
+        this.__checkedCount = this.__sckanCount;
+        this.__halfCount = Math.trunc(this.__checkedCount/2);
+
+        this.__button = document.createElement('button');
+        this.__button.id = 'map-sckan-button';
+        this.__button.className = 'control-button text-button';
+        this.__button.setAttribute('type', 'button');
+        this.__button.setAttribute('aria-label', 'Show/hide valid SCKAN paths');
+        this.__button.setAttribute('control-visible', 'false');
+        this.__button.textContent = 'SCKAN';
+        this.__button.title = 'Show/hide valid SCKAN paths';
+        this.__container.appendChild(this.__button);
+
+        this.__container.addEventListener('click', this.onClick_.bind(this));
+        return this.__container;
+    }
+
+    onRemove()
+    //========
+    {
+        this.__container.parentNode.removeChild(this.__container);
+        this.__map = undefined;
+    }
+
+    onClick_(event)
+    //=============
+    {
+        if (event.target.id === 'map-sckan-button') {
+            if (this.__button.getAttribute('control-visible') === 'false') {
+                this.__container.appendChild(this.__sckan);
+                this.__button.setAttribute('control-visible', 'true');
+                this.__sckan.focus();
+            } else {
+                this.__sckan = this.__container.removeChild(this.__sckan);
+                this.__button.setAttribute('control-visible', 'false');
+            }
+        } else if (event.target.tagName === 'INPUT') {
+            if (event.target.id === 'sckan-all-paths') {
+                if (event.target.indeterminate) {
+                    event.target.checked = (this.__checkedCount >= this.__halfCount);
+                    event.target.indeterminate = false;
+                }
+                if (event.target.checked) {
+                    this.__checkedCount = this.__sckanCount;
+                } else {
+                    this.__checkedCount = 0;
+                }
+                for (const state of SCKAN_STATES) {
+                    const sckanCheckbox = document.getElementById(`sckan-${state.id}`);
+                    if (sckanCheckbox) {
+                        sckanCheckbox.checked = event.target.checked;
+                        this.__flatmap.showSckanPaths(state.id, event.target.checked);
+                    }
+                }
+            } else if (event.target.id.startsWith('sckan-')) {
+                const sckanId = event.target.id.substring(6);
+                this.__flatmap.showSckanPaths(sckanId, event.target.checked);
+                if (event.target.checked) {
+                    this.__checkedCount += 1;
+                } else {
+                    this.__checkedCount -= 1;
+                }
+                const allLayersCheckbox = document.getElementById('sckan-all-paths');
+                if (this.__checkedCount === 0) {
+                    allLayersCheckbox.checked = false;
+                    allLayersCheckbox.indeterminate = false;
+                } else if (this.__checkedCount === this.__sckanCount) {
+                    allLayersCheckbox.checked = true;
+                    allLayersCheckbox.indeterminate = false;
+                } else {
+                    allLayersCheckbox.indeterminate = true;
+                }
+            }
+        }
+        event.stopPropagation();
+    }
+}
+
+//==============================================================================
+
 export class BackgroundControl
 {
     constructor(flatmap)

package/src/editor.js

@@ -0,0 +1,198 @@
+import { Bezier } from "bezier-js";
+
+
+class BezierCurve
+{
+    constructor(id, ...points) {
+        this.__id = id;
+        this.__bezier = new Bezier(...points);
+    }
+
+    asGeoJSON(samples=100)
+    {
+        const coords = [];
+        for (let ts = 0; ts <= samples; ts++) {
+            const pt = this.__bezier.get(float(ts)/float(samples));
+            coords.push([pt.x, pt.y]);
+        }
+        return {
+            'type': 'Feature',
+            'geometry': {
+                'type': 'LineString',
+                'coordinates': coords
+            },
+            'properties': {
+                'bezier': this.__id
+            }
+        };
+    }
+
+    asPoints()
+    {
+        const geojson = [];
+        for (const n of [0, 1, 2, 3]) {
+            const pt = this.__bezier.points[n];
+            geojson.push({
+                'type': 'Feature',
+                'geometry': {
+                    'type': 'Point',
+                    'coordinates': [pt.x, pt.y]
+                },
+                'properties': {
+                    'bezier': this.__id,
+                    'point': n
+                }
+            });
+        }
+        return geojson;
+    }
+}
+
+
+export class NetworkEditor
+{
+    constructor(flatmap)
+    {
+        this.__map = flatmap.map;
+        this.__canvas = this.__map.getCanvasContainer();
+ 
+        this.__geojson = {  // lines and points as separate sources???
+            'type': 'FeatureCollection',
+            'features': [
+                {
+                    'type': 'Feature',
+                    'geometry': {
+                        'type': 'Point',
+                        'coordinates': [0, 0]
+                    },
+                    'properties': {
+                        'id': 0
+                    }
+                }
+            ]
+        };
+
+        // Add a single point to the map
+        this.__map.addSource('curves', {
+            'type': 'geojson',
+            'data': this.__geojson
+        });
+
+        this.__map.addLayer({
+            'id': 'lines',
+            'type': 'line',
+            'source': 'curves',
+            'paint': {
+                'line-color': '#3887be'
+            }
+        });
+        this.__map.addLayer({
+            'id': 'points',
+            'type': 'circle',
+            'source': 'curves',
+            'paint': {
+                'circle-radius': 10,
+                'circle-color': '#3887be'
+            }
+        });
+
+        this.__currentPoint = null;
+
+        this.__map.on('mouseenter', this.mouseEnter.bind(this));
+        this.__map.on('mouseleave', this.mouseLeave.bind(this));
+        this.__map.on('mousedown', this.mouseDown.bind(this));
+        this.__map.on('touchstart', this.touchStart.bind(this));
+    }
+
+    addPoint(coords)
+    {
+         const nextId = this.__geojson.features.length;
+         this.__geojson.features.push({
+            'type': 'Feature',
+            'geometry': {
+                'type': 'Point',
+                'coordinates': coords
+            },
+            'properties': {
+                'id': nextId
+            }
+        });
+        this.__map.getSource('curves').setData(this.__geojson);
+        return nextId;
+    }
+
+    mouseEnter(e) {
+        console.log('Mouse enter...');
+
+        this.__map.setPaintProperty('lines', 'line-color', '#3bb2d0');
+        this.__map.setPaintProperty('points', 'circle-color', '#3bb2d0');
+        this.__canvas.style.cursor = 'move';
+    }
+
+         
+    mouseLeave(e) {
+        this.__map.setPaintProperty('lines', 'line-color', '#3887be');
+        this.__map.setPaintProperty('points', 'circle-color', '#3887be');
+        this.__canvas.style.cursor = '';
+    }
+
+
+    mouseDown(e) {
+        console.log('Mouse down...')
+        // Prevent the default map drag behavior.
+        e.preventDefault();
+
+
+        const features = this.__map.queryRenderedFeatures(e.point, {'layers': ['lines', 'points']});
+        if (features.length === 0) {
+            const coords = e.lngLat;
+            this.__currentPoint = this.addPoint([coords.lng, coords.lat]);
+        } else {
+            const currentPoint = features[0].properties.id;
+            if (this.__currentPoint === null) {
+                this.__currentPoint = currentPoint;
+            } else if (this.__currentPoint === currentPoint) {
+                this.__currentPoint = null;
+            }
+        }
+
+        this.__canvas.style.cursor = 'grab';
+
+        this.__map.on('mousemove', this.onMove.bind(this));
+        this.__map.once('mouseup', this.onUp.bind(this));
+
+    }
+         
+    touchStart(e) {
+        if (e.points.length !== 1) return;
+
+        // Prevent the default map drag behavior.
+        e.preventDefault();
+
+        this.__map.on('touchmove', this.onMove.bind(this));
+        this.__map.once('touchend', this.onUp.bind(this));
+    }
+
+    onMove(e) {
+        console.log('Mouse move...')
+
+        // Set a UI indicator for dragging.
+        this.__canvas.style.cursor = 'grabbing';  // ????
+
+        if (this.__currentPoint !== null) {
+            const coords = e.lngLat;
+            this.__geojson.features[this.__currentPoint].geometry.coordinates = [coords.lng, coords.lat];
+            this.__map.getSource('curves').setData(this.__geojson);
+        }
+    }
+
+    onUp(e) {
+        console.log('End draw at', e.lngLat)
+
+        this.__canvas.style.cursor = '';
+
+        // Unbind mouse/touch events
+        this.__map.off('mousemove', this.onMove.bind(this));
+        this.__map.off('touchmove', this.onMove.bind(this));
+    }
+}

package/src/flatmap-viewer.js

@@ -192,7 +192,8 @@ class FlatMap
                 this._initialState = this.getState();
 
                 // Add a minimap if option set
-
+                // Put this above search, info, etc...
+                // ==> add all controls here (via interactions.js...)
                 if (this.options.minimap) {
                     this._minimap = new MinimapControl(this, this.options.minimap);
                         this._map.addControl(this._minimap);
@@ -314,6 +315,21 @@ class FlatMap
         }
     }
 
+    /**
+     * Hide or show all paths valid in SCKAN.
+     *
+     * @param      {string}   validity Either ``VALID`` or ``INVALID``
+     * @param      {boolean}  [enable=true]  If ``true`` then only show the paths
+     *                                       of the type(s) otherwise only hide the paths
+     */
+    showSckanPaths(validity, enable=true)
+    //===================================
+    {
+        if (this._userInteractions !== null) {
+            this._userInteractions.showSckanPaths(validity, enable);
+        }
+    }
+
     /**
      * Load images and patterns/textures referenced in style rules.
      *
@@ -834,15 +850,24 @@ class FlatMap
             'dataset',
             'kind',
             'label',
+            'markup',
             'models',
             'nodeId',
-            'source'
+            'source',
+            'hyperlinks'
+        ];
+        const jsonProperties = [
+            'hyperlinks'
         ];
         for (const property of exportedProperties) {
             if (property in properties) {
                 const value = properties[property];
                 if (value !== undefined) {
-                    data[property] = properties[property];
+                    if (jsonProperties.indexOf(property) >= 0) {
+                        data[property] = JSON.parse(properties[property])
+                    } else {
+                        data[property] = properties[property];
+                    }
                 }
             }
         }
@@ -1117,6 +1142,7 @@ export class MapManager
         let latestMap = null;
         let lastCreatedTime = '';
         for (const map of this._mapList) {
+            // We can break/return if we have a UUID match...
             if (('uuid' in map && mapDescribes === map.uuid
              || mapDescribes === map.id
              || 'taxon' in map && mapDescribes === map.taxon

package/src/info.js

@@ -29,6 +29,10 @@ import { indexedProperties } from './search.js';
 export const displayedProperties = [
     'id',
     'class',
+    'featureId',
+    'tile-layer',
+    'layer',
+    'kind',
     ...indexedProperties
 ];
 

package/src/interactions.js

@@ -37,8 +37,8 @@ import {ContextMenu} from './contextmenu.js';
 import {displayedProperties} from './info.js';
 import {InfoControl} from './info.js';
 import {LayerManager} from './layers.js';
-import {PATHWAYS_LAYER, Pathways} from './pathways.js';
-import {BackgroundControl, LayerControl, PathControl} from './controls.js';
+import {PATH_TYPES, PATHWAYS_LAYER, Pathways} from './pathways.js';
+import {BackgroundControl, LayerControl, PathControl, SCKANControl} from './controls.js';
 import {SearchControl} from './search.js';
 import {VECTOR_TILES_SOURCE} from './styling.js';
 
@@ -163,13 +163,16 @@ export class UserInteractions
         // Add a control to manage our pathways
 
         if (flatmap.options.pathControls) {
-            this._map.addControl(new PathControl(flatmap));
+            // Restrict to path types that are on the map...
+            this._map.addControl(new PathControl(flatmap, this._pathways.pathTypes));
         }
 
         // Add a control to manage our layers
 
         if (flatmap.options.layerControl) {
             this._map.addControl(new LayerControl(flatmap, this._layerManager));
+            // ************************************
+            //this._map.addControl(new SCKANControl(flatmap));
         }
 
         // Flag features that have annotations
@@ -177,6 +180,9 @@ export class UserInteractions
 
         for (const [id, ann] of flatmap.annotations) {
             const feature = this.mapFeature_(id);
+            if (id == 118) {
+                console.log(feature, ann);
+            }
             if (feature !== undefined) {
                 this._map.setFeatureState(feature, { 'annotated': true });
             }
@@ -555,6 +561,7 @@ export class UserInteractions
                     }
                     bbox = expandBounds(bbox, annotation.bounds);
                     if ('type' in annotation && annotation.type.startsWith('line')) {
+// FC may have lines that are not pathways features, esp. when authoring...
                         for (const pathFeatureId of this._pathways.lineFeatureIds([featureId])) {
                             if (select) {
                                 this.selectFeature_(pathFeatureId);
@@ -672,9 +679,9 @@ export class UserInteractions
                                                   : '';
             if ('hyperlink' in properties) {
                 if (label === '') {
-                    return `<div class='flatmap-feature-label'><a href='{properties.hyperlink}'>${properties.hyperlink}</a></div>`;
+                    return `<div class='flatmap-feature-label'><a href='${properties.hyperlink}'>${properties.hyperlink}</a></div>`;
                 } else {
-                    return `<div class='flatmap-feature-label'><a href='{properties.hyperlink}'>${properties.hyperlink}</a><br/>${label}</div>`;
+                    return `<div class='flatmap-feature-label'><a href='${properties.hyperlink}'>${label}</a></div>`;
                 }
             } else {
                 return `<div class='flatmap-feature-label'>${label}</div>`;
@@ -776,6 +783,10 @@ export class UserInteractions
                 }
             }
         } else {
+            // Allow tooltip for body but no highlighting/activation??
+            // More generally, only highlight a feature if all "within" the viewport??
+            // -- then as we zoom outermost features wouldn't highlight (but still show tooltip)
+            // -- or highlight in a more subtle way (eg. opacity change and not colour change)??
             let labelledFeatures = features.filter(feature => (('hyperlink' in feature.properties
                                                              || 'label' in feature.properties
                                                              || 'node' in feature.properties)
@@ -1021,6 +1032,11 @@ export class UserInteractions
         return this._pathways.nodePathModels(nodeId);
     }
 
+    showSckanPaths(validity, enable=true)
+    //===================================
+    {
+    }
+
     //==============================================================================
 
     // Find where to place a label or popup on a feature

package/src/layers.js

@@ -20,6 +20,9 @@ limitations under the License.
 
 'use strict';
 
+
+// See https://stevage.github.io/map-gl-utils/ for layering ideas...
+
 //==============================================================================
 
 import {PATHWAYS_LAYER} from './pathways.js';

package/src/main.js

@@ -92,6 +92,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 === 'click') {
+                    console.log(args);
                 }
             }, mapOptions)
             .then(map => {

package/src/minimap.js

@@ -300,7 +300,7 @@ export class MinimapControl
             const newBounds = this.moveTrackingRect_(offset);
 
             this._map.fitBounds(newBounds, {
-                duration: 80,
+                duration: 80,   // Why these options??
                 noMoveStart: true
             });
         }