fix: use pointer-events instead of click for markers (#54)

ubilabs · Jan 31, 2024 · c4531c0 · c4531c0
1 parent ca7148d
commit c4531c0
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/examples/marker/main.ts b/examples/marker/main.ts
@@ -19,7 +19,7 @@ const globe = new WebGlGlobe(document.querySelector('#globe')!, {
   ]
 });
 
-const markers: MarkerProps[] = [
+const markerProps: MarkerProps[] = [
   {id: 'ny', html: getMarkerHtml('New York'), lng: -73.97, lat: 40.78},
   {id: 'london', html: getMarkerHtml('London'), lng: -0.12, lat: 51.5},
   {id: 'tokyo', html: getMarkerHtml('Tokyo'), lng: 139.69, lat: 35.69},
@@ -37,8 +37,8 @@ const markers: MarkerProps[] = [
   {id: 'singapore', html: getMarkerHtml('Singapore'), lng: 103.85, lat: 1.29}
 ];
 
-markers.forEach(marker => {
-  marker.onClick = id => console.log('clicked:', id);
+markerProps.forEach(m => {
+  m.onClick = id => console.log('clicked:', id);
 });
 
-globe.setProps({markers});
+globe.setProps({markers: markerProps});
diff --git a/src/renderer/marker-html.ts b/src/renderer/marker-html.ts
@@ -31,7 +31,17 @@ export class MarkerHtml {
     `;
     renderer.container.appendChild(this.markerEl);
 
-    this.markerEl.addEventListener('click', this.handleMarkerClick);
+    this.markerEl.addEventListener('pointerdown', ev => {
+      this.markerEl.setPointerCapture(ev.pointerId);
+      this.markerEl.addEventListener('pointerup', () => this.handleMarkerClick(), {once: true});
+
+      // need to stop propagation here, otherwise the OrbitControls will
+      // pick up the event and prevent any other event from coming through
+      // via setPointerCapture().
+      ev.stopPropagation();
+    });
+
+    // this.markerEl.addEventListener('click', this.handleMarkerClick);
 
     this.setProps(this.props);