@abi-software/flatmap-viewer 2.7.0-a.1 → 2.7.0

package/lib/index.ts

@@ -1,9 +1,10 @@
 //==============================================================================
 
 import {FlatMap, MapManager} from '../src/flatmap-viewer'
+import {standaloneViewer} from '../src/main'
 
 //==============================================================================
 
-export {FlatMap, MapManager}
+export {FlatMap, MapManager, standaloneViewer}
 
 //==============================================================================

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.7.0-a.1",
+  "version": "2.7.0",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AnatomicMaps/flatmap-viewer.git"
   },
   "type": "module",
-  "main": "src/main.js",
+  "main": "lib/index.ts",
   "files": [
     "lib",
     "src",
@@ -43,6 +43,7 @@
   "devDependencies": {
     "@types/node": "^20.12.7",
     "eslint": "^8.7.0",
+    "glob": "^10.3.12",
     "typescript": "^5.2.2",
     "vite": "^5.1.4",
     "vite-plugin-dts": "^3.8.1"

package/src/flatmap-viewer.js

@@ -955,8 +955,10 @@ export class FlatMap
      *                                to place the marker.
      * @arg {Object} options          Configurable options for the marker.
      * @arg {string} options.className Space-separated CSS class names to add to marker element.
-     * @arg {string} options.colour   Colour of the default marker. Defaults to ``'#005974'``
-     *                                (dark blue).
+     * @arg {string} options.cluster  The marker will be clustered together with other geographically
+     *                                close markers. Defaults to ``true``.
+     * @arg {string} options.colour   Colour of the marker. Defaults to ``'#005974'``
+     *                                (dark cyan).
      * @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
@@ -965,15 +967,33 @@ export class FlatMap
     addMarker(anatomicalId,  options={})
     //==================================
     {
+        options = Object.assign({cluster: true}, options)
         if (this._userInteractions !== null) {
             return this._userInteractions.addMarker(anatomicalId, options);
         }
         return -1;
     }
 
+    /**
+     * Add a list of markers to the map.
+     *
+     * @param {Array.<string>}  anatomicalId  Anatomical identifiers of features on which
+     *                                to place markers.
+     * @arg {Object} options          Configurable options for the markers.
+     * @arg {string} options.className Space-separated CSS class names to add to marker elemens.
+     * @arg {string} options.cluster  The markers will be clustered together with other geographically
+     *                                close markers. Defaults to ``true``.
+     * @arg {string} options.colour   Colour of the markers. Defaults to ``'#005974'``
+     *                                (dark cyan).
+     * @arg {string} options.element  The DOM element to use as a marker. The default is
+     *                                a dark blue droplet-shaped SVG marker.
+     * @return     {array.<integer>}  The identifiers of the resulting markers. -1 is returned if the
+     *                                map doesn't contain a feature with the given anatomical identifier
+     */
     addMarkers(anatomicalIds,  options={})
     //====================================
     {
+        options = Object.assign({cluster: true}, options)
         const markerIds = []
         for (const anatomicalId of anatomicalIds) {
             if (this._userInteractions !== null) {
@@ -985,7 +1005,6 @@ export class FlatMap
         return markerIds
     }
 
-
     /**
      * Remove a marker from the map.
      *
@@ -1028,7 +1047,7 @@ export class FlatMap
      * Shows a popup at a marker.
      *
      * This method should only be called in response to a ``mouseenter`` event
-     * passed to the map's ``callback`` function as a popup won't be shown.
+     * passed to the map's ``callback`` function otherwise a popup won't be shown.
      *
      * @param      {integer}  markerId  The identifier of the marker
      * @param      {string | DOMElement}  content  The popup's content

package/src/interactions.js

@@ -1378,8 +1378,6 @@ export class UserInteractions
                     const marker = new maplibregl.Marker(markerOptions)
                                                  .setLngLat(markerPosition)
                                                  .addTo(this._map);
-
-
                     markerElement.addEventListener('mouseenter',
                         this.markerMouseEvent_.bind(this, marker, anatomicalId));
                     markerElement.addEventListener('mousemove',
@@ -1443,10 +1441,6 @@ export class UserInteractions
         return anatomicalIds;
     }
 
-    // Separate out MapLibre specific code and result of mouse event (tooltip,
-    // client message, etc) so clustering code can also use this to process
-    // events.
-
     markerMouseEvent_(marker, anatomicalId, event)
     //============================================
     {
@@ -1456,7 +1450,7 @@ export class UserInteractions
             return
         }
 
-        if (['mouseenter', 'mouseleave', 'click'].includes(event.type)) {
+        if (['mouseenter', 'mousemove', 'click'].includes(event.type)) {
             this.__activeMarker = marker
 
             // Remove any tooltip
@@ -1465,24 +1459,24 @@ export class UserInteractions
             // Reset cursor
             marker.getElement().style.cursor = 'default';
 
-
             const markerId = this.__markerIdByMarker.get(marker)
             const annotation = this.__annotationByMarkerId.get(markerId)
 
             this.markerEvent_(event, markerId, marker.getLngLat(),
-                              anatomicalId, annotation)
+                                     anatomicalId, annotation)
+            event.stopPropagation()
         }
     }
 
     markerEvent_(event, markerId, markerPosition, anatomicalId, annotation)
     //=====================================================================
     {
-        if (['mouseenter', 'mouseleave', 'click'].includes(event.type)) {
+        if (['mousemove', 'click'].includes(event.type)) {
 
-            // Remove any existing tooltips
+            // Remove any tooltips
             this.removeTooltip_();
 
-            if (['mouseenter', 'click'].includes(event.type)) {
+            if (['mouseenter', 'mousemove', 'click'].includes(event.type)) {
                 // The marker's feature
                 const feature = this.mapFeature(annotation.featureId);
                 if (feature !== undefined) {
@@ -1499,7 +1493,7 @@ export class UserInteractions
                 this.__showToolTip(html, markerPosition);
 
                 // Send marker event message
-                this._flatmap.markerEvent(event.type, markerId, anatomicalId);
+                this._flatmap.markerEvent(event.type, markerId, anatomicalId)
             }
         }
     }

package/src/layers/cluster.js

@@ -63,8 +63,6 @@ export class ClusteredMarkerLayer
     }
     #ui
 
-    seenmove = false
-
     constructor(flatmap, ui)
     {
         this.#flatmap = flatmap
@@ -115,7 +113,6 @@ export class ClusteredMarkerLayer
             const features = this.#map.queryRenderedFeatures(e.point, {
                 layers: ['clustered-markers']
             })
-            console.log('Cluster marker', features)
             const clusterId = features[0].properties.cluster_id
             const zoom = await this.#map.getSource('markers').getClusterExpansionZoom(clusterId)
             this.#map.easeTo({
@@ -124,10 +121,10 @@ export class ClusteredMarkerLayer
             })
         })
 
+            console.log('Unclustered click', e, features)
         this.#map.on('click', 'single-points', this.singleMarkerEvent.bind(this))
         this.#map.on('mouseenter', 'single-points', this.singleMarkerEvent.bind(this))
         this.#map.on('mousemove', 'single-points', this.singleMarkerEvent.bind(this))
-//        this.#map.on('mouseleave', 'single-points', this.singleMarkerEvent.bind(this))
 
         this.#map.on('mouseenter', 'clustered-markers', () => {
             this.#map.getCanvas().style.cursor = 'pointer'
@@ -136,8 +133,6 @@ export class ClusteredMarkerLayer
         this.#map.on('mouseleave', 'clustered-markers', () => {
             this.#map.getCanvas().style.cursor = ''
         })
-
-        // Also 'mousemove'...
     }
 
     singleMarkerEvent(event)
@@ -147,14 +142,6 @@ export class ClusteredMarkerLayer
             layers: ['single-points']
         })
         for (const feature of features) {
-if (event.type === 'mousemove' && !this.seenMove) {
-    console.log('Single marker', event.type, feature)
-    this.seenMove = true
-} else if (event.type !== 'mousemove') {
-    console.log('Single marker', event.type, feature)
-    this.seenMove = false
-}
-
             const properties = feature.properties
             const position = properties.markerPosition.slice(1, -1).split(',').map(p => +p)
             this.#ui.markerEvent_(event, feature.id, position, properties.models, properties)

package/src/layers/index.js

@@ -425,14 +425,10 @@ export class LayerManager
             mapLayer.setFilter(this.__layerOptions);
         }
         if (this.#flightPathLayer) {
-//    * @arg options.layerOptions.sckan {string} Show neuron paths known to SCKAN: values are ``valid`` (default),
-//    *                                        ``invalid``, ``all`` or ``none``.
-
-
             const sckanState = options.sckan || 'valid'
             const sckanFilter = (sckanState == 'none') ? {NOT: {HAS: 'sckan'}} :
                                 (sckanState == 'valid') ? {sckan: true} :
-                                (sckanState == 'invalid') ? {NOT: {sckan: true}} :  // {sckan: false} is different...
+                                (sckanState == 'invalid') ? {NOT: {sckan: true}} :
                                 true
             const featureFilter = new PropertiesFilter(sckanFilter)
             if ('taxons' in options) {

package/src/main.js

@@ -55,9 +55,6 @@ const ALL_MARKERS = [
     'UBERON:0001155', // Colon
     'UBERON:0001255', // Bladder
     'UBERON:0001759', // Vagus
-
-    'UBERON:0016508', // Pelvic ganglion
-
 ]
 
 //==============================================================================
@@ -175,8 +172,6 @@ export async function standaloneViewer(map_endpoint=null, options={})
                     mapOptions.background = args[0].value;
                 } else if (eventType === 'annotation') {
                     drawControl.handleEvent(...args)
-                } else {
-                    //console.log(eventType, ...args)
                 }
             }, mapOptions)
             .then(map => {

package/src/utils.js

@@ -120,7 +120,6 @@ export function normaliseId(id)
 
 export function setDefaults(options, defaultOptions)
 {
-// c.f. Object.assign({}, defaultOptions, options)
     if (options === undefined || options === null) {
         return defaultOptions;
     }

package/src/types.ts

@@ -1,26 +0,0 @@
-/******************************************************************************
-
-Flatmap viewer and annotation tool
-
-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.
-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 type Constructor<T> = new(...args: any[]) => T
-
-export type ObjectRecord = Record<string, any>
-
-//==============================================================================
-