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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.7.0-a.2",
+  "version": "2.7.1-a.1",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": {
     "type": "git",

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

@@ -1020,6 +1020,10 @@ export class UserInteractions
         // Simulate `mouseenter` events on features
 
         const feature = features[0];
+
+//is feature a marker??
+console.log('mm', event.type, feature)
+
         const featureModels = ('properties' in feature && 'models' in feature.properties)
                             ? feature.properties.models
                             : null;
@@ -1378,8 +1382,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,20 +1445,17 @@ 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)
     //============================================
     {
+console.log('mk', event.type)
         // No tooltip when context menu is open
         if (this._modal
          || (this.__activeMarker !== null && event.type === 'mouseleave')) {
             return
         }
 
-        if (['mouseenter', 'mouseleave', 'click'].includes(event.type)) {
+        if (['mouseenter', 'mousemove', 'click'].includes(event.type)) {
             this.__activeMarker = marker
 
             // Remove any tooltip
@@ -1465,24 +1464,25 @@ 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)
+console.log('mk handled...')
+            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 +1499,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
@@ -136,29 +134,21 @@ export class ClusteredMarkerLayer
         this.#map.on('mouseleave', 'clustered-markers', () => {
             this.#map.getCanvas().style.cursor = ''
         })
-
-        // Also 'mousemove'...
     }
 
     singleMarkerEvent(event)
     //======================
     {
+console.log('cl', event.type)
         const features = this.#map.queryRenderedFeatures(event.point, {
             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)
         }
+console.log('cl handled...')
         event.originalEvent.stopPropagation()
     }
 

package/src/main.js

@@ -49,7 +49,7 @@ const ALL_MARKERS = [
     'UBERON:0037094',
     'ILX:0738305',
 
-    'UBERON:0000948', // {className: 'heart-marker'}); // Heart
+//    'UBERON:0000948', // {className: 'heart-marker'}); // Heart
     'UBERON:0002048', // Lung
     'UBERON:0000945', // Stomach
     'UBERON:0001155', // Colon
@@ -175,8 +175,8 @@ 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)
+                } else if (args[0].type === 'marker') {
+                    console.log(eventType, ...args)
                 }
             }, mapOptions)
             .then(map => {
@@ -188,7 +188,11 @@ export async function standaloneViewer(map_endpoint=null, options={})
                 map.addMarker('UBERON:0001255'); // Bladder
                 map.addMarker('UBERON:0001759'); // Vagus
 */
-                map.addMarkers(ALL_MARKERS, {cluster: true})
+                map.addMarker('UBERON:0000945', {cluster: true}); // Stomach
+//                map.addMarker('UBERON:0016508', {cluster: false}); // Pelvic ganglion
+                map.addMarker('UBERON:0016508', {cluster: true}); // Pelvic ganglion
+                map.addMarker('UBERON:0000948', {cluster: true, className: 'heart-marker'}); // Heart
+//                map.addMarkers(ALL_MARKERS)
                 currentMap = map;
                 drawControl = new DrawControl(map)
             })