ClimbingEditor: Delete hover on mobile

zbycz · Oct 11, 2024 · a90d245 · a90d245
1 parent 3d6a268
commit a90d245
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/src/components/FeaturePanel/Climbing/Editor/Points/Point.tsx b/src/components/FeaturePanel/Climbing/Editor/Points/Point.tsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import styled from '@emotion/styled';
 import { useClimbingContext } from '../../contexts/ClimbingContext';
 import { useConfig } from '../../config';
+import { useMobileMode } from '../../../../helpers';
 
 const ClickableArea = styled.circle``;
 
@@ -62,7 +63,7 @@ export const Point = ({
     photoZoom,
     getCurrentPath,
   } = useClimbingContext();
-
+  const isMobileMode = useMobileMode();
   const isPointSelected =
     routeSelectedIndex === routeNumber && pointSelectedIndex === index;
   const onClick = (e) => {
@@ -110,8 +111,7 @@ export const Point = ({
   const commonProps = {
     onClick,
     cursor: 'pointer',
-    onMouseEnter,
-    onMouseLeave,
+    ...(isMobileMode ? {} : { onMouseEnter, onMouseLeave }),
     onMouseDown,
     onTouchMove,
     onPointerMove: onTouchMove,

diff --git a/src/components/FeaturePanel/Climbing/Editor/RoutePath.tsx b/src/components/FeaturePanel/Climbing/Editor/RoutePath.tsx
@@ -6,6 +6,7 @@ import { PositionPx } from '../types';
 import { PathWithBorder } from './PathWithBorder';
 import { MouseTrackingLine } from './MouseTrackingLine';
 import { getPositionInImageFromMouse } from '../utils/mousePositionUtils';
+import { useMobileMode } from '../../../helpers';
 
 const InteractiveArea = styled.line`
   pointer-events: all;
@@ -37,6 +38,8 @@ export const RoutePath = ({ route, routeNumber }) => {
   const isSelected = isRouteSelected(routeNumber);
   const machine = getMachine();
   const path = getPathForRoute(route);
+  const isMobileMode = useMobileMode();
+
   if (!path) return null;
   const pointsInString = path
     .map(({ x, y }, index) => {
@@ -138,6 +141,11 @@ export const RoutePath = ({ route, routeNumber }) => {
               ...path[index + 1],
               units: 'percentage',
             });
+
+            const desktopProps = {
+              onMouseEnter: onMouseEnter,
+              onMouseLeave: onMouseLeave,
+            };
             return (
               <InteractiveArea
                 // eslint-disable-next-line react/no-array-index-key
@@ -148,8 +156,7 @@ export const RoutePath = ({ route, routeNumber }) => {
                 y1={position1.y}
                 x2={position2.x}
                 y2={position2.y}
-                onMouseEnter={onMouseEnter}
-                onMouseLeave={onMouseLeave}
+                {...(isMobileMode ? {} : desktopProps)}
                 onMouseMove={(e) => onMouseMove(e, index)}
                 onClick={onMouseDown}
                 {...commonProps}