@abi-software/flatmap-viewer 2.3.0-a.1 → 2.3.0-a.3

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

@@ -29,18 +29,17 @@ import 'maplibre-gl/dist/maplibre-gl.css';
 
 // Load our stylesheet last so we can overide styling rules
 
-import '../static/flatmap-viewer.css';
+import '../static/css/flatmap-viewer.css';
 
 //==============================================================================
 
 import {MapServer} from './mapserver.js';
 import {MinimapControl} from './minimap.js';
 import {NavigationControl} from './controls.js';
-import {SearchIndex, SearchResults} from './search.js';
+import {SearchIndex} from './search.js';
 import {UserInteractions} from './interactions.js';
 
 import * as images from './images.js';
-import * as pathways from './pathways.js';
 import * as utils from './utils.js';
 
 //==============================================================================
@@ -275,23 +274,24 @@ class FlatMap
     }
 
     /**
-     * @returns {Array.<{type: string, label: string, colour: string}>} an array of objects giving path types
-     *                                                                  with their descriptions and colours
+     * @returns {Array.<{type: string, label: string, colour: string}>} an array of objects giving the path types
+     *                                                                  present in the map along with their
+     *                                                                  descriptions and colours
      */
     pathTypes()
     //=========
     {
         if (this._userInteractions !== null) {
-            return this._userInteractions.pathTypes();
+            return this._userInteractions.pathways.pathTypes();
         }
     }
 
     /**
      * Hide or show paths of a given type.
      *
-     * @param      {string}   pathType The path type
-     * @param      {boolean}  [enable=true]  If ``true`` then only show the paths
-     *                                       of the type otherwise only hide the paths
+     * @param {string}   pathType The path type
+     * @param {boolean}  enable  Show or hide paths of that type. Defaults to
+     *                           ``true`` (show)
      */
     enablePath(pathType, enable=true)
     //===============================
@@ -302,17 +302,31 @@ class FlatMap
     }
 
     /**
-     * Hide or show all paths except those of the given type.
+     * Hide or show all paths valid in SCKAN.
      *
-     * @param      {string|Array.<string>}   pathTypes The path type(s)
-     * @param      {boolean}  [enable=true]  If ``true`` then only show the paths
-     *                                       of the type(s) otherwise only hide the paths
+     * @param {string}   sckanState  Either ``valid`` or ``invalid``
+     * @param {boolean}  enable  Show or hide paths with that SCKAN state.
+     *                           Defaults to ``true`` (show)
      */
-    showPaths(pathTypes, enable=true)
-    //===============================
+    enableSckanPath(sckanState, enable=true)
+    //======================================
+    {
+        if (this._userInteractions !== null) {
+            this._userInteractions.enableSckanPath(sckanState, enable);
+        }
+    }
+
+    /**
+     * Hide or show centrelines and nodes.
+     *
+     * @param {boolean}  enable  Show or centrelines and associated nodes.
+     *                           Defaults to ``true`` (show)
+     */
+    enableCentrelines(enable=true)
+    //============================
     {
         if (this._userInteractions !== null) {
-            this._userInteractions.showPaths(pathTypes, enable);
+            this._userInteractions.enableCentrelines(enable);
         }
     }
 
@@ -404,6 +418,20 @@ class FlatMap
      */
     get id()
     //======
+    {
+        return this.__id;
+    }
+
+    /**
+     * The map's unique universal identifier.
+     *
+     * For published maps this is different to the map's ``id``;
+     * it might be the same as ``id`` for unpublished maps.
+     *
+     * @type string
+     */
+    get uuid()
+    //========
     {
         return this.__uuid;
     }
@@ -430,12 +458,6 @@ class FlatMap
         return `${this.__uuid}-${this._mapNumber}`;
     }
 
-    get activeLayerNames()
-    //====================
-    {
-        return this._userInteractions.activeLayerNames;
-    }
-
     get annotations()
     //===============
     {
@@ -578,9 +600,10 @@ class FlatMap
     //=======
     {
         return {
-            'minZoom': this._map.getMinZoom(),
-            'zoom':    this._map.getZoom(),
-            'maxZoom': this._map.getMaxZoom()
+            mapUUID: this.__uuid,
+            minZoom: this._map.getMinZoom(),
+            zoom:    this._map.getZoom(),
+            maxZoom: this._map.getMaxZoom()
         }
     }
 
@@ -588,6 +611,7 @@ class FlatMap
     //===========================
     {
         if (this._callback) {
+            data.mapUUID = this.__uuid;
             return this._callback(type, data, ...args);
         }
     }
@@ -623,12 +647,6 @@ class FlatMap
         this._map.resize();
     }
 
-    mapLayerId(name)
-    //==============
-    {
-        return `${this.uniqueId}/${name}`;
-    }
-
     getIdentifier()
     //=============
     {
@@ -663,15 +681,25 @@ class FlatMap
         }
     }
 
-    setColour(options=null)
-    //=====================
+    setPaint(options=null)
+    //====================
     {
-        options = utils.setDefaultOptions(options, {colour: true, outline: true});
+        options = utils.setDefaults(options, {
+            colour: true,
+            outline: true
+        });
         if (this._userInteractions !== null) {
-            this._userInteractions.setColour(options);
+            this._userInteractions.setPaint(options);
         }
     }
 
+    setColour(options=null)
+    //=====================
+    {
+        console.log('`setColour()` is deprecated; please use `setPaint()` instead.')
+        this.setPaint(options);
+    }
+
     //==========================================================================
 
     /**
@@ -704,6 +732,8 @@ class FlatMap
     setBackgroundColour(colour)
     //=========================
     {
+        localStorage.setItem('flatmap-background-colour', colour);
+
         this._map.setPaintProperty('background', 'background-color', colour);
 
         if (this._minimap) {
@@ -742,22 +772,80 @@ class FlatMap
 
     //==========================================================================
 
+    /**
+     * Get a list of the flatmap's layers.
+     *
+     * @return {Array.Object.<{id: string, description: string, enabled: boolean}>}  An array with layer details
+     */
+    getLayers()
+    //=========
+    {
+        if (this._userInteractions !== null) {
+            return this._userInteractions.getLayers();
+        }
+    }
+
+    /**
+     * @param {string}  layerId  The layer identifier to enable
+     * @param {boolean}  enable  Show or hide the layer. Defaults to ``true`` (show)
+     *
+     */
+    enableLayer(layerId, enable=true)
+    //===============================
+    {
+        if (this._userInteractions !== null) {
+            return this._userInteractions.enableLayer(layerId, enable);
+        }
+    }
+
+    //==========================================================================
+
+    /**
+     * Get a list of a FC flatmap's systems.
+     *
+     * @return {Array.Object.<{name: string, colour: string}>}  An array with system details
+     */
+    getSystems()
+    //==========
+    {
+        if (this._userInteractions !== null) {
+            return this._userInteractions.getSystems();
+        }
+    }
+
+    /**
+     * @param {string}  systemName  The name of the system to enable
+     * @param {boolean}  enable  Show or hide the system. Defaults to ``true`` (show)
+     *
+     */
+    enableSystem(systemName, enable=true)
+    //===================================
+    {
+        if (this._userInteractions !== null) {
+            return this._userInteractions.enableSystem(systemName, enable);
+        }
+    }
+
+    //==========================================================================
+
     /**
      * Add a marker to the map.
      *
-     * @param      {string}  anatomicalId     The anatomical identifier of the feature on which
-     *                                        to place the marker
-     * @param      {string}  [markerType='']  An optional parameter giving the type of marker
-     *                                        to use. Apart from the default, the only marker
-     *                                        type recognised is ``simulation``
-     * @return     {integer}  The identifier for the resulting marker. -1 is returned if the
-     *                        map doesn't contain a feature with the given anatomical identifier
+     * @param {string}  anatomicalId  The anatomical identifier of the feature on which
+     *                                to place the marker.
+     * @arg {Object} options          Configurable options for the marker.
+     * @arg {string} options.colour   Colour of the default marker. Defaults to ``'#005974'``
+     *                                (dark blue).
+     * @arg {string} options.element  The DOM element to use as a marker. The default is
+     *                                a dark blue droplet-shaped SVG marker.
+     * @return     {integer}          The identifier for the resulting marker. -1 is returned if the
+     *                                map doesn't contain a feature with the given anatomical identifier
      */
-    addMarker(anatomicalId, markerType='')
-    //====================================
+    addMarker(anatomicalId,  options={})
+    //==================================
     {
         if (this._userInteractions !== null) {
-            return this._userInteractions.addMarker(anatomicalId, markerType);
+            return this._userInteractions.addMarker(anatomicalId, options);
         }
         return -1;
     }
@@ -839,13 +927,21 @@ class FlatMap
             'label',
             '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];
+                    }
                 }
             }
         }
@@ -874,6 +970,23 @@ class FlatMap
         });
     }
 
+    /**
+     * Generate a callback as a result of some event in a control.
+     *
+     * @param      {string}  eventType     The event type
+     * @param      {string}  control       The name of the control
+     * @param      {string}  value         The value of the control
+     */
+    controlEvent(eventType, control, value)
+    //=====================================
+    {
+        this.callback(eventType, {
+            type: 'control',
+            control: control,
+            value: value
+        });
+    }
+
     /**
      * Generate callbacks as a result of panning/zooming the map.
      *
@@ -1014,7 +1127,11 @@ class FlatMap
     zoomToFeatures(externalIds, options=null)
     //=======================================
     {
-        options = utils.setDefaultOptions(options, {select: true, highlight: false, padding:100});
+        options = utils.setDefaults(options, {
+            select: true,
+            highlight: false,
+            padding:100
+        });
         if (this._userInteractions !== null) {
             const featureIds = this.modelFeatureIdList(externalIds);
             this._userInteractions.zoomToFeatures(featureIds, options);
@@ -1150,13 +1267,12 @@ export class MapManager
     * @arg options {Object} Configurable options for the map.
     * @arg options.background {string} Background colour of flatmap. Defaults to ``white``.
     * @arg options.debug {boolean} Enable debugging mode.
-    * @arg options.featureInfo {boolean} Show information about features as a tooltip. The tooltip is active
-    *                                    on selected features and, for non-selected features, when the
-    *                                    ``info`` control is enabled. More details are shown in debug mode.
     * @arg options.fullscreenControl {boolean} Add a ``Show full screen`` button to the map.
     * @arg options.layerOptions {Object} Options to control colour and outlines of features
     * @arg options.layerOptions.colour {boolean} Use colour fill (if available) for features. Defaults to ``true``.
     * @arg options.layerOptions.outline {boolean} Show the border of features. Defaults to ``true``.
+    * @arg options.layerOptions.sckan {string} Show neuron paths known to SCKAN: values are ``valid`` (default),
+    *                                        ``invalid``, ``all`` or ``none``.
     * @arg options.minimap {boolean|Object} Display a MiniMap of the flatmap. Defaults to ``false``.
     * @arg options.minimap.position {string} The minimap's position: ``bottom-left`` (default), ``bottom-right``,
     *                                        ``top-left`` or ``top-right``.
@@ -1167,9 +1283,9 @@ export class MapManager
     * @arg options.maxZoom {number} The maximum zoom level of the map.
     * @arg options.minZoom {number} The minimum zoom level of the map.
     * @arg options.navigationControl {boolean} Add navigation controls (zoom buttons) to the map.
-    * @arg options.pathControl {boolean} Add buttons to control pathways including via a color-coded legend.
-    * @arg options.searchable {boolean} Add a control to search for features on a map.
     * @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``.
     * @example
     * const humanMap1 = mapManager.loadMap('humanV1', 'div-1');
     *
@@ -1207,13 +1323,15 @@ export class MapManager
                     mapOptions['bounds'] = mapIndex['bounds'];
                 }
 
-                // Default is to show path controls
+                // Note the kind of map
 
-                if (!('pathControls' in mapOptions)) {
-                    mapOptions['pathControls'] = true;
+                if ('style' in mapIndex) {
+                    mapOptions.style = mapIndex.style;  // Currently ``anatomical`` or ``functional``
+                } else {
+                    mapOptions.style = 'flatmap';       // Default is a generic ``flatmap``
                 }
 
-                // Mapmaker's changed the name of the field to indicate that indicates if
+                // Mapmaker has changed the name of the field to indicate that indicates if
                 // there are raster layers
                 if (!('image-layers' in mapIndex) && ('image_layer' in mapIndex)) {
                     mapIndex['image-layers'] = mapIndex['image_layer'];
@@ -1287,13 +1405,7 @@ export class MapManager
                         outline: true
                     };
                 }
-                if ('authoring' in mapIndex) {
-                    mapOptions.layerOptions.style == 'authoring'
-                } else if ('style' in mapIndex) {
-                    mapOptions.layerOptions.style = mapIndex.style;
-                } else {
-                    mapOptions.layerOptions.style = 'flatmap';
-                }
+                mapOptions.layerOptions.authoring = ('authoring' in mapIndex) ? mapIndex.authoring : false;
 
                 // Are features in separate vector tile source layers?
 

package/src/info.js

@@ -238,7 +238,11 @@ export class InfoControl
                         if (prop in feature.properties) {
                             const value = feature.properties[prop];
                             if (value !== undefined) {
-                                values[prop] = value;
+                                if (prop === 'label') {
+                                    values[prop] = value.replaceAll("\n", "<br/>");
+                                } else {
+                                    values[prop] = value;
+                                }
                             }
                         }
                     });