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..1e205e5 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: 'TOUCH', + 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';
{}, - onDefocus: _previousFocus => {}, - onGlobeBackgroundTextureLoaded: () => {}, - onGlobeCloudsTextureLoaded: () => {}, - onGlobeTextureLoaded: () => {}, - onMouseOutMarker: (_marker, _markerObject, _event) => {}, - onMouseOverMarker: (_marker, _markerObject, _event) => {}, + onClickMarker: (_marker, _markerObject, _event) => { }, + onTouchMarker: (_marker, _markerObject, _event) => { }, + onDefocus: _previousFocus => { }, + onGlobeBackgroundTextureLoaded: () => { }, + onGlobeCloudsTextureLoaded: () => { }, + onGlobeTextureLoaded: () => { }, + onMouseOutMarker: (_marker, _markerObject, _event) => { }, + onMouseOverMarker: (_marker, _markerObject, _event) => { }, }; export const defaultGlobeBackgroundTexture = 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..c2e96bf 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('touch', 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/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 */