From d249a56512e9ceaae4d4e6ffabe417486e775e85 Mon Sep 17 00:00:00 2001 From: Ylva Selling Date: Fri, 27 Jan 2023 15:36:38 -0500 Subject: [PATCH 1/2] Add touch event handling to dragging of sky browser --- .../SkyBrowser/WorldWideTelescope.jsx | 44 ++++++++++++++----- 1 file changed, 34 insertions(+), 10 deletions(-) diff --git a/src/components/BottomBar/SkyBrowser/WorldWideTelescope.jsx b/src/components/BottomBar/SkyBrowser/WorldWideTelescope.jsx index 5fe7ba30..68605d07 100644 --- a/src/components/BottomBar/SkyBrowser/WorldWideTelescope.jsx +++ b/src/components/BottomBar/SkyBrowser/WorldWideTelescope.jsx @@ -146,15 +146,36 @@ function WorldWideTelescope({ }); } - function handleDrag(mouse) { - if (isDragging) { + function getClientXY(interaction) { + let position = undefined; + if (interaction.type === "touchstart" || interaction.type === "touchmove") { + if (!interaction?.touches?.[0]?.clientX || !interaction?.touches?.[0]?.clientY) { + return; + } + position = [interaction.touches[0].clientX, interaction.touches[0].clientY]; + } + else { // mouse + position = [interaction.clientX, interaction.clientY]; + } + if (!position) { + return undefined; + } + return position; + } + + function handleDrag(interaction) { + const end = getClientXY(interaction); + if (isDragging && end) { // Calculate pixel translation - const end = [mouse.clientX, mouse.clientY]; const width = size.width - BorderWidth; const height = size.height - BorderWidth; const translation = [end[0] - startDragPosition[0], end[1] - startDragPosition[1]]; + + const percentageX = translation[0] / width; + const percentageY = translation[1] / height; // Calculate [ra, dec] translation without roll - const percentageTranslation = [translation[0] / width, translation[1] / height]; + const percentageTranslation = [ percentageX, percentageY ]; + // Call lua function skybrowserApi.finetuneTargetPosition( browserId, @@ -163,15 +184,15 @@ function WorldWideTelescope({ } } - function mouseDown(mouse) { + function startInteraction(interaction) { + const position = getClientXY(interaction); skybrowserApi.startFinetuningTarget(browserId); - const position = [mouse.clientX, mouse.clientY]; setIsDragging(true); setStartDragPosition(position); skybrowserApi.stopAnimations(browserId); } - function mouseUp(mouse) { + function endInteraction() { setIsDragging(false); } @@ -204,9 +225,12 @@ function WorldWideTelescope({ const interactionDiv =
scroll(e)} /> From 77184dbb97b54d41d98407c1a72d57a9e92c76e4 Mon Sep 17 00:00:00 2001 From: Ylva Selling Date: Mon, 13 Feb 2023 14:55:51 -0500 Subject: [PATCH 2/2] Add pinch functionality to skybrowser --- .../SkyBrowser/WorldWideTelescope.jsx | 58 ++++++++++++++----- 1 file changed, 45 insertions(+), 13 deletions(-) diff --git a/src/components/BottomBar/SkyBrowser/WorldWideTelescope.jsx b/src/components/BottomBar/SkyBrowser/WorldWideTelescope.jsx index 68605d07..cfd8aa24 100644 --- a/src/components/BottomBar/SkyBrowser/WorldWideTelescope.jsx +++ b/src/components/BottomBar/SkyBrowser/WorldWideTelescope.jsx @@ -26,6 +26,8 @@ function WorldWideTelescope({ const [isDragging, setIsDragging] = React.useState(false); const [startDragPosition, setStartDragPosition] = React.useState([0, 0]); const [wwtHasLoaded, setWwtHasLoaded] = React.useState(false); + const [isPinching, setIsPinching] = React.useState(false); + const [startPinchPositions, setStartPinchPositions] = React.useState([]); const TopBarHeight = 25; // Refs const iframe = React.useRef(null); @@ -152,7 +154,17 @@ function WorldWideTelescope({ if (!interaction?.touches?.[0]?.clientX || !interaction?.touches?.[0]?.clientY) { return; } - position = [interaction.touches[0].clientX, interaction.touches[0].clientY]; + if (interaction?.touches?.length > 1) { + const touches = interaction.touches; + position = [ + [touches[0].clientX, touches[0].clientY], + [touches[1].clientX, touches[1].clientY] + ]; + } + else { + const touch = interaction.touches[0]; + position = [touch.clientX, touch.clientY]; + } } else { // mouse position = [interaction.clientX, interaction.clientY]; @@ -163,6 +175,14 @@ function WorldWideTelescope({ return position; } + function scrollZoom(scroll) { + if (inverseZoom) { + scroll *= -1; + } + skybrowserApi.scrollOverBrowser(browserId, scroll); + skybrowserApi.stopAnimations(browserId); + } + function handleDrag(interaction) { const end = getClientXY(interaction); if (isDragging && end) { @@ -182,27 +202,39 @@ function WorldWideTelescope({ percentageTranslation ); } + else if (isPinching && end) { + const euclidianDistance = (coord => { + const a = coord[0][0] - coord[1][0]; + const b = coord[0][1] - coord[1][1]; + return Math.sqrt(a * a + b * b); + }); + // See if distance is larger or smaller compared to first + // interaction + const startDistance = euclidianDistance(startPinchPositions); + const endDistance = euclidianDistance(end); + + const scroll = startDistance < endDistance ? 1 : -1; + scrollZoom(scroll); + } } function startInteraction(interaction) { const position = getClientXY(interaction); skybrowserApi.startFinetuningTarget(browserId); - setIsDragging(true); - setStartDragPosition(position); + const hasMultipleCoords = Array.isArray(position[0]); + if (hasMultipleCoords) { + setIsPinching(true); + setStartPinchPositions(position); + } else { + setIsDragging(true); + setStartDragPosition(position); + } skybrowserApi.stopAnimations(browserId); } function endInteraction() { setIsDragging(false); - } - - function scroll(e) { - let scroll = e.deltaY; - if (inverseZoom) { - scroll *= -1; - } - skybrowserApi.scrollOverBrowser(browserId, scroll); - skybrowserApi.stopAnimations(browserId); + setIsPinching(false); } function changeSize(widthWwt, heightWwt) { @@ -231,7 +263,7 @@ function WorldWideTelescope({ onTouchStart={startInteraction} onTouchMove={handleDrag} onTouchEnd={endInteraction} - onWheel = {(e) => scroll(e)} + onWheel = {(e) => scrollZoom(e.deltaY)} /> return (