fix(viewer.js): Trigger ROI selection event even when no select interaction is active (#117)

* Fix opening of roi selection dialog

* Add double click event

* Revert "fix: Setup the dynamic import so it is separate from other packages (#113)"

This reverts commit 2834944.

* Lint

* Improve event handling

* Lint

* Update event handling to avoid errors

* Revert "Revert "fix: Setup the dynamic import so it is separate from other packages (#113)""

This reverts commit ddff79f.

* CR updates

Author: igoroctaviano

src/events.js

@@ -18,6 +18,8 @@ const EVENTS = {
   ROI_DRAWN: `${PROJECT_NAME}_roi_drawn`,
   /** Triggered when a ROI was selected. */
   ROI_SELECTED: `${PROJECT_NAME}_roi_selected`,
+  /** Triggered when a ROI was double clicked. */
+  ROI_DOUBLE_CLICKED: `${PROJECT_NAME}_roi_double_clicked`,
   /** Triggered when a ROI was modified. */
   ROI_MODIFIED: `${PROJECT_NAME}_roi_modified`,
   /** Triggered when a viewport move has started. */

src/viewer.js

@@ -1371,6 +1371,68 @@ class VolumeImageViewer {
       })
     })
 
+    let clickEvent = null
+    this[_map].on('dblclick', (event) => {
+      clickEvent = 'dblclick'
+      this[_map].forEachFeatureAtPixel(
+        event.pixel,
+        (feature) => {
+          const correctFeature = feature.values_?.features?.[0] || feature
+          console.debug('dblclick feature id:', correctFeature)
+          if (correctFeature?.getId()) {
+            publish(
+              this[_map].getTargetElement(),
+              EVENT.ROI_SELECTED,
+              this._getROIFromFeature(
+                correctFeature,
+                this[_pyramid].metadata,
+                this[_affine]
+              )
+            )
+            publish(
+              this[_map].getTargetElement(),
+              EVENT.ROI_DOUBLE_CLICKED,
+              this._getROIFromFeature(
+                correctFeature,
+                this[_pyramid].metadata,
+                this[_affine]
+              )
+            )
+          }
+          clickEvent = null
+        },
+        { hitTolerance: 1 }
+      )
+    })
+    this[_map].on('click', (event) => {
+      if (clickEvent === 'dblclick') {
+        event.preventDefault()
+        event.stopPropagation()
+        return
+      }
+      clickEvent = 'click'
+      this[_map].forEachFeatureAtPixel(
+        event.pixel,
+        (feature) => {
+          const correctFeature = feature.values_?.features?.[0] || feature
+          console.debug('click feature id:', correctFeature)
+          if (correctFeature?.getId()) {
+            publish(
+              this[_map].getTargetElement(),
+              EVENT.ROI_SELECTED,
+              this._getROIFromFeature(
+                correctFeature,
+                this[_pyramid].metadata,
+                this[_affine]
+              )
+            )
+          }
+          clickEvent = null
+        },
+        { hitTolerance: 1 }
+      )
+    })
+
     view.fit(this[_projection].getExtent(), { size: this[_map].getSize() })
 
     /**
@@ -2500,15 +2562,18 @@ class VolumeImageViewer {
     const container = this[_map].getTargetElement()
 
     this[_interactions].select.on('select', (e) => {
-      publish(
-        container,
-        EVENT.ROI_SELECTED,
-        this._getROIFromFeature(
-          e.selected[0],
-          this[_pyramid].metadata,
-          this[_affine]
+      console.debug('select roi')
+      if (e.selected[0]?.getId()) {
+        publish(
+          container,
+          EVENT.ROI_SELECTED,
+          this._getROIFromFeature(
+            e.selected[0],
+            this[_pyramid].metadata,
+            this[_affine]
+          )
         )
-      )
+      }
     })
 
     this[_map].addInteraction(this[_interactions].select)
@@ -3362,33 +3427,31 @@ class VolumeImageViewer {
 
     let selectedAnnotation = null
     this[_map].on('singleclick', (e) => {
-      if (e != null) {
-        if (selectedAnnotation != null) {
-          selectedAnnotation.set('selected', 0)
-          selectedAnnotation = null
-        }
-        const container = this[_map].getTargetElement()
-        this[_map].forEachFeatureAtPixel(
-          e.pixel,
-          (feature) => {
-            if (feature != null) {
-              feature.set('selected', 1)
-              selectedAnnotation = feature
-              publish(
-                container,
-                EVENT.ROI_SELECTED,
-                _getROIFromFeature(feature)
-              )
-              return true
-            }
-            return false
-          },
-          {
-            hitTolerance: 1,
-            layerFilter: (layer) => (layer instanceof PointsLayer)
-          }
-        )
+      if (selectedAnnotation !== null) {
+        selectedAnnotation.set('selected', 0)
+        selectedAnnotation = null
       }
+      const container = this[_map].getTargetElement()
+      this[_map].forEachFeatureAtPixel(
+        e.pixel,
+        (feature) => {
+          if (feature != null) {
+            feature.set('selected', 1)
+            selectedAnnotation = feature
+            publish(
+              container,
+              EVENT.ROI_SELECTED,
+              _getROIFromFeature(feature)
+            )
+            return true
+          }
+          return false
+        },
+        {
+          hitTolerance: 1,
+          layerFilter: (layer) => (layer instanceof PointsLayer)
+        }
+      )
     })
   }