diff --git a/changelog.md b/changelog.md index 2629eef..bc67415 100644 --- a/changelog.md +++ b/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. diff --git a/docs/props.mdx b/docs/props.mdx index 02e383e..e833434 100644 --- a/docs/props.mdx +++ b/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 */ diff --git a/docs/usage/callbacks.mdx b/docs/usage/callbacks.mdx index 168c175..7bfecf9 100644 --- a/docs/usage/callbacks.mdx +++ b/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';
{}, + onTouchMarker: (_marker, _markerObject, _event) => {}, onDefocus: _previousFocus => {}, onGlobeBackgroundTextureLoaded: () => {}, onGlobeCloudsTextureLoaded: () => {}, diff --git a/lib/globe.js b/lib/globe.js index 7b1f127..15ee03d 100644 --- a/lib/globe.js +++ b/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); diff --git a/lib/markers.js b/lib/markers.js index 5d9445a..e922f72 100644 --- a/lib/markers.js +++ b/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); diff --git a/lib/scene.js b/lib/scene.js index ac9b486..4383b53 100644 --- a/lib/scene.js +++ b/lib/scene.js @@ -21,6 +21,8 @@ export function createScene({ // @ts-ignore scene.on('click', defocus); + // @ts-ignore + scene.on('touchstart', defocus); return scene; } diff --git a/package.json b/package.json index 5f6d6d7..6346471 100644 --- a/package.json +++ b/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" } } -} +} \ No newline at end of file diff --git a/readme.md b/readme.md index 8bdc7bb..d4fccc1 100644 --- a/readme.md +++ b/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)} - > + /> ) } ``` diff --git a/types/index.d.ts b/types/index.d.ts index 77f225f..8a74794 100644 --- a/types/index.d.ts +++ b/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 */