climbing: Hovered lines on top (#283)

zbycz · Mar 25, 2024 · c5b2144 · c5b2144
1 parent d951538
commit c5b2144
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 20 deletions.
diff --git a/src/components/FeaturePanel/Climbing/Editor/PathWithBorder.tsx b/src/components/FeaturePanel/Climbing/Editor/PathWithBorder.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 import styled from 'styled-components';
+import { useTheme } from '@material-ui/core';
 import { useConfig } from '../config';
 import { useClimbingContext } from '../contexts/ClimbingContext';
 import { getDifficultyColor } from '../utils/routeGrade';
@@ -22,9 +23,7 @@ export const PathWithBorder = ({
   const config = useConfig();
   const { isDifficultyHeatmapEnabled, gradeTable, routeIndexHovered } =
     useClimbingContext();
-  const borderColor = isDifficultyHeatmapEnabled
-    ? config.pathStrokeColor
-    : config.pathBorderColor;
+
   const strokeColor = isDifficultyHeatmapEnabled
     ? getDifficultyColor(gradeTable, route.difficulty)
     : config.pathStrokeColor;
@@ -33,26 +32,21 @@ export const PathWithBorder = ({
     if (isSelected) {
       return config.pathStrokeColorSelected;
     }
-    if (routeIndexHovered === routeNumber) {
-      return config.pathStrokeColorSelected;
-    }
 
     return strokeColor;
   };
-  const getBorderColor = () => {
-    if (isSelected) {
-      return config.pathBorderColorSelected;
-    }
 
-    return borderColor;
-  };
+  const theme = useTheme();
+  const contrastColor = theme.palette.getContrastText(
+    isSelected ? config.pathStrokeColorSelected : strokeColor,
+  );
 
   return (
     <>
       <RouteBorder
         d={d}
         strokeWidth={config.pathBorderWidth}
-        stroke={getBorderColor()}
+        stroke={contrastColor}
         strokeLinecap="round"
         strokeLinejoin="round"
         fill="none"
@@ -71,6 +65,17 @@ export const PathWithBorder = ({
         // pointerEvents={arePointerEventsDisabled ? 'none' : 'all'}
         {...props}
       />
+      {routeIndexHovered === routeNumber && (
+        <RouteLine
+          d={d}
+          strokeWidth={config.pathStrokeWidth}
+          stroke={`${config.pathStrokeColorSelected}80`}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+          {...props}
+        />
+      )}
     </>
   );
 };
diff --git a/src/components/FeaturePanel/Climbing/Editor/RoutePath.tsx b/src/components/FeaturePanel/Climbing/Editor/RoutePath.tsx
@@ -138,7 +138,7 @@ export const RoutePath = ({ route, routeNumber }) => {
             return (
               <InteractiveArea
                 stroke="transparent"
-                strokeWidth={20}
+                strokeWidth={15}
                 x1={position1.x}
                 y1={position1.y}
                 x2={position2.x}

diff --git a/src/components/FeaturePanel/Climbing/Editor/RoutesLayer.tsx b/src/components/FeaturePanel/Climbing/Editor/RoutesLayer.tsx
@@ -62,6 +62,7 @@ export const RoutesLayer = ({
     routeSelectedIndex,
     getMachine,
     isRouteSelected,
+    isRouteHovered,
     getPixelPosition,
     editorPosition,
     scrollOffset,
@@ -100,6 +101,7 @@ export const RoutesLayer = ({
   const sortedRoutes = routes.reduce<{
     selected: Array<RouteRenders>;
     rest: Array<RouteRenders>;
+    hovered: Array<RouteRenders>;
   }>(
     (acc, route, index) => {
       const RenderRoute = () => (
@@ -126,6 +128,15 @@ export const RoutesLayer = ({
           ],
         };
       }
+      if (isRouteHovered(index)) {
+        return {
+          ...acc,
+          hovered: [
+            ...acc.hovered,
+            { route: <RenderRoute />, marks: <RenderRouteMarks /> },
+          ],
+        };
+      }
       return {
         ...acc,
         rest: [
@@ -134,7 +145,7 @@ export const RoutesLayer = ({
         ],
       };
     },
-    { selected: [], rest: [] },
+    { selected: [], rest: [], hovered: [] },
   );
 
   const lastPointOfSelectedRoute =
@@ -174,6 +185,8 @@ export const RoutesLayer = ({
         {sortedRoutes.rest.map((item) => item.marks)}
         {sortedRoutes.selected.map((item) => item.route)}
         {sortedRoutes.selected.map((item) => item.marks)}
+        {sortedRoutes.hovered.map((item) => item.route)}
+        {sortedRoutes.hovered.map((item) => item.marks)}
       </Svg>
 
       {routeFloatingMenuPosition && (

diff --git a/src/components/FeaturePanel/Climbing/contexts/ClimbingContext.tsx b/src/components/FeaturePanel/Climbing/contexts/ClimbingContext.tsx
@@ -50,6 +50,7 @@ type ClimbingContextType = {
   imageContainerSize: ImageSize;
   isPointMoving: boolean;
   isRouteSelected: (routeNumber: number) => boolean;
+  isRouteHovered: (routeNumber: number) => boolean;
   isPointSelected: (pointNumber: number) => boolean;
   getPhotoInfoForRoute: (routeNumber: number) => PhotoInfo;
   pointSelectedIndex: number;
@@ -273,6 +274,7 @@ export const ClimbingContextProvider = ({ children, feature }: Props) => {
   });
 
   const isRouteSelected = (index: number) => routeSelectedIndex === index;
+  const isRouteHovered = (index: number) => routeIndexHovered === index;
   const isPointSelected = (index: number) => pointSelectedIndex === index;
   const getPhotoInfoForRoute = (index: number): PhotoInfo => {
     const checkedPaths = routes[index]?.paths;
@@ -348,6 +350,7 @@ export const ClimbingContextProvider = ({ children, feature }: Props) => {
     isPointClicked,
     isPointMoving,
     isRouteSelected,
+    isRouteHovered,
     isPointSelected,
     getPhotoInfoForRoute,
     pointSelectedIndex,

diff --git a/src/components/FeaturePanel/Climbing/utils/useScrollShadow.tsx b/src/components/FeaturePanel/Climbing/utils/useScrollShadow.tsx
@@ -64,12 +64,13 @@ export const useScrollShadow = (deps = []) => {
   }, deps);
 
   useEffect(() => {
-    window.addEventListener('resize', () => setShadows());
-    window.addEventListener('orientationchange', () => setShadows());
+    const handleShadows = () => setShadows();
+    window.addEventListener('resize', handleShadows);
+    window.addEventListener('orientationchange', handleShadows);
 
     return () => {
-      window.removeEventListener('resize', () => setShadows());
-      window.removeEventListener('orientationchange', () => setShadows());
+      window.removeEventListener('resize', handleShadows);
+      window.removeEventListener('orientationchange', handleShadows);
     };
   }, []);
 

diff --git a/src/helpers/theme.tsx b/src/helpers/theme.tsx
@@ -74,7 +74,7 @@ const darkTheme = createMuiTheme({
       active: '#2fbc81ff',
       inactive: '#0a0a0aff',
       border: '#ffffffff',
-      selected: '#fff',
+      selected: '#ffffff',
     },
   } as unknown,
 });