Address issue #44 (touch event for mobile)

changelog.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## [5.0.3](https://github.com/chrisrzhou/react-globe/compare/v5.0.3...v5.0.2) (2020-12-31)
+
+Small enhancement.
+Add onTouch event for mobile use.
+| Status | Old | New |
+| --- | --- | --- |
+| added | | `onTouchMarker` |
+
 ## [5.0.2](https://github.com/chrisrzhou/react-globe/compare/v5.0.2...v5.0.1) (2020-08-08)
 
 Various bugfixes.

docs/props.mdx

@@ -38,6 +38,8 @@ interface Props {
   width?: string | number;
   /** Callback to handle click events of a marker.  Captures the clicked marker, ThreeJS object and pointer event. */
   onClickMarker?: MarkerCallback;
+  /** Callback to handle touch events of a marker.  Captures the touched marker, ThreeJS object and pointer event. */
+  onTouchMarker?: MarkerCallback;
   /** Callback to handle defocus events (i.e. clicking the globe after a focus has been applied).  Captures the previously focused coordinates. */
   onDefocus?: (previousFocus: Coordinates) => void;
   /** Capture the initialized globe instance */

docs/usage/callbacks.mdx

@@ -29,6 +29,16 @@ import ReactGlobe from './react-globe';
       setDetails(`City: ${marker.city} (Sales: ${marker.value}.0M)`);
     }
 
+    function onTouchMarker(marker, markerObject, event) {
+      setEvent({
+        type: 'TOUCHSTART',
+        marker,
+        markerObjectID: markerObject.uuid,
+        pointerEventPosition: { x: event.clientX, y: event.clientY },
+      });
+      setDetails(`City: ${marker.city} (Sales: ${marker.value}.0M)`);
+    }
+
     function onDefocus(previousCoordinates) {
       setEvent({
         type: 'DEFOCUS',
@@ -59,6 +69,7 @@ import ReactGlobe from './react-globe';
       <div style={{ position: 'relative' }}>
         <ReactGlobe
           onClickMarker={onClickMarker}
+          onTouchMarker={onTouchMarker}
           onDefocus={onDefocus}
           onMouseOutMarker={onMouseOutMarker}
           onMouseOverMarker={onMouseOverMarker}

lib/component.js

@@ -17,6 +17,7 @@ export default function ReactGlobe({
   options = defaultOptions,
   width = '100%',
   onClickMarker,
+  onTouchMarker,
   onDefocus,
   onGetGlobe,
   onGlobeBackgroundTextureLoaded,
@@ -73,6 +74,7 @@ export default function ReactGlobe({
     const globe = globeRef.current;
     globe.updateCallbacks({
       onClickMarker,
+      onTouchMarker,
       onDefocus,
       onGlobeBackgroundTextureLoaded,
       onGlobeCloudsTextureLoaded,
@@ -82,6 +84,7 @@ export default function ReactGlobe({
     });
   }, [
     onClickMarker,
+    onTouchMarker,
     onDefocus,
     onGlobeBackgroundTextureLoaded,
     onGlobeCloudsTextureLoaded,

lib/defaults.js

@@ -2,6 +2,7 @@ import { BACKGROUND_RADIUS_SCALE, MarkerTypes } from './enums';
 
 export const defaultCallbacks = {
   onClickMarker: (_marker, _markerObject, _event) => {},
+  onTouchMarker: (_marker, _markerObject, _event) => {},
   onDefocus: _previousFocus => {},
   onGlobeBackgroundTextureLoaded: () => {},
   onGlobeCloudsTextureLoaded: () => {},

lib/globe.js

@@ -177,6 +177,17 @@ export default class Globe {
         this.updateFocus(marker.coordinates);
         this.callbacks.onClickMarker(marker, markerObject, event);
       },
+      onTouchMarker: (marker, markerObject, event) => {
+        this.updateFocus(marker.coordinates);
+        if (this.options.enableMarkerTooltip) {
+          this.tooltip.show(
+            event.clientX,
+            event.clientY,
+            this.options.markerTooltipRenderer(markerObject.marker),
+          );
+        }
+        this.callbacks.onTouchMarker(marker, markerObject, event);
+      },
       onMouseOutMarker: (marker, markerObject, event) => {
         this.tooltip.hide();
         this.callbacks.onMouseOutMarker(marker, markerObject, event);

lib/markers.js

@@ -172,6 +172,10 @@ function applyCallbacks(markerObject, callbacks) {
     const event = interaction.data.originalEvent;
     callbacks.onClickMarker(marker, markerObject, event);
   });
+  markerObject.on('touchstart', interaction => {
+    const event = interaction.data.originalEvent;
+    callbacks.onTouchMarker(marker, markerObject, event);
+  });
   markerObject.on('mousemove', interaction => {
     const event = interaction.data.originalEvent;
     callbacks.onMouseOverMarker(marker, markerObject, event);

lib/scene.js

@@ -21,6 +21,8 @@ export function createScene({
 
   // @ts-ignore
   scene.on('click', defocus);
+  // @ts-ignore
+  scene.on('touchstart', defocus);
 
   return scene;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-globe",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "description": "Create beautiful and interactive React + ThreeJS globe visualizations with ease.",
   "license": "MIT",
   "homepage": "https://react-globe.netlify.com/",
@@ -101,4 +101,4 @@
       "react/prop-types": "off"
     }
   }
-}
+}

readme.md

@@ -121,11 +121,12 @@ function MyGlobe() {
       options={options}
       width="100%"
       onClickMarker={(marker, markerObject, event) => console.log(marker, markerObject, event)}
+      onTouchMarker={(marker, markerObject, event) => console.log(marker, markerObject, event)}
       onGetGlobe={setGlobe}
       onMouseOutMarker={(marker, markerObject, event) => console.log(marker, markerObject, event)}
       onGlobeTextureLoaded={() => console.log('globe loaded')}
       onMouseOverMarker={(marker, markerObject, event) => console.log(marker, markerObject, event)}
-    >
+    />
   )
 }
 ```

types/index.d.ts

@@ -16,6 +16,7 @@ export interface Animation {
 
 export interface Callbacks {
   onClickMarker: MarkerCallback;
+  onTouchMarker: MarkerCallback;
   onDefocus: (previousFocus: Coordinates | null) => void;
   onGlobeBackgroundTextureLoaded: () => void;
   onGlobeCloudsTextureLoaded: () => void;
@@ -211,6 +212,8 @@ export interface Props {
   width?: string | number;
   /** Callback to handle click events of a marker.  Captures the clicked marker, ThreeJS object and pointer event. */
   onClickMarker?: MarkerCallback;
+  /** Callback to handle touch events of a marker.  Captures the touched marker, ThreeJS object and pointer event. */
+  onTouchMarker?: MarkerCallback;
   /** Callback to handle defocus events (i.e. clicking the globe after a focus has been applied).  Captures the previously focused coordinates. */
   onDefocus?: (previousFocus: Coordinates) => void;
   /** Capture the initialized globe instance */