From 02e27bcb085ae5c6c2ddc9c195cfc53001e221ea Mon Sep 17 00:00:00 2001 From: tgmof <> Date: Thu, 31 Dec 2020 15:45:17 +0100 Subject: [PATCH 1/6] Address issue #44 --- changelog.md | 8 ++++++++ docs/props.mdx | 2 ++ docs/usage/callbacks.mdx | 11 +++++++++++ lib/component.js | 3 +++ lib/defaults.js | 15 ++++++++------- lib/globe.js | 11 +++++++++++ lib/markers.js | 4 ++++ readme.md | 3 ++- types/index.d.ts | 3 +++ 9 files changed, 52 insertions(+), 8 deletions(-) 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 */ From 0fc6d26f54b251585635b772bb74b04b6a0276f0 Mon Sep 17 00:00:00 2001 From: tgmof <> Date: Thu, 31 Dec 2020 15:54:42 +0100 Subject: [PATCH 2/6] Update automatically generated callbacks --- lib/defaults.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/lib/defaults.js b/lib/defaults.js index 259234c..b8fc294 100644 --- a/lib/defaults.js +++ b/lib/defaults.js @@ -1,14 +1,14 @@ import { BACKGROUND_RADIUS_SCALE, MarkerTypes } from './enums'; export const defaultCallbacks = { - onClickMarker: (_marker, _markerObject, _event) => { }, - onTouchMarker: (_marker, _markerObject, _event) => { }, - 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 = From 09e04d0e9c88c42951388141c0e6c0a84552e35e Mon Sep 17 00:00:00 2001 From: tgmof <> Date: Thu, 31 Dec 2020 16:27:01 +0100 Subject: [PATCH 3/6] Update touch event name --- lib/markers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/markers.js b/lib/markers.js index c2e96bf..e922f72 100644 --- a/lib/markers.js +++ b/lib/markers.js @@ -172,7 +172,7 @@ function applyCallbacks(markerObject, callbacks) { const event = interaction.data.originalEvent; callbacks.onClickMarker(marker, markerObject, event); }); - markerObject.on('touch', interaction => { + markerObject.on('touchstart', interaction => { const event = interaction.data.originalEvent; callbacks.onTouchMarker(marker, markerObject, event); }); From fdb1c87f09fbc60ca2ed586c08c48a5563fda6c5 Mon Sep 17 00:00:00 2001 From: tgmof <> Date: Thu, 31 Dec 2020 17:10:21 +0100 Subject: [PATCH 4/6] Update doc --- docs/usage/callbacks.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/usage/callbacks.mdx b/docs/usage/callbacks.mdx index 1e205e5..7bfecf9 100644 --- a/docs/usage/callbacks.mdx +++ b/docs/usage/callbacks.mdx @@ -31,7 +31,7 @@ import ReactGlobe from './react-globe'; function onTouchMarker(marker, markerObject, event) { setEvent({ - type: 'TOUCH', + type: 'TOUCHSTART', marker, markerObjectID: markerObject.uuid, pointerEventPosition: { x: event.clientX, y: event.clientY }, From f3bf48e5d3060964a7571534b358e303578a52ff Mon Sep 17 00:00:00 2001 From: tgmof <> Date: Fri, 1 Jan 2021 15:28:31 +0100 Subject: [PATCH 5/6] Add defocus behaviour for touch event --- lib/scene.js | 2 ++ 1 file changed, 2 insertions(+) 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; } From 4c4419d8e2a274bc93eab081b5e6a820e637cd52 Mon Sep 17 00:00:00 2001 From: tgmof <> Date: Fri, 1 Jan 2021 15:28:47 +0100 Subject: [PATCH 6/6] Update react-globe minor version --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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