Refactor positions

src/components/FeaturePanel/Climbing/ClimbingPanel.tsx

@@ -14,7 +14,6 @@ export const ClimbingPanel = () => {
   const [isFullscreenDialogOpened, setIsFullscreenDialogOpened] =
     useState<boolean>(true);
 
-  // @TODO add states to contexts
   const onFullscreenDialogOpen = () => setIsFullscreenDialogOpened(true);
   const onFullscreenDialogClose = () => setIsFullscreenDialogOpened(false);
   return (

src/components/FeaturePanel/Climbing/ClimbingView.tsx

@@ -48,7 +48,6 @@ export const ClimbingView = ({
 
   const {
     setImageSize,
-    imageSize,
     isSelectedRouteEditable,
     setIsSelectedRouteEditable,
     setRouteSelectedIndex,
@@ -58,6 +57,7 @@ export const ClimbingView = ({
     updateRouteOnIndex,
     setEditorPosition,
     editorPosition,
+    getPercentagePosition,
   } = useContext(ClimbingContext);
 
   const imageUrl = '/images/rock.png';
@@ -69,13 +69,13 @@ export const ClimbingView = ({
     // const { clientHeight, clientWidth, left, top } = imageRef.current;
     // console.log('____SET', imageRef.current.top, imageRef.current.left);
     // setImageSize({ width: clientWidth, height: clientHeight });
-    // setEditorPosition({ left, top });
+    // setEditorPosition({ x:left, y:top });
 
     // const rect = e.target.getBoundingClientRect();
     const { clientHeight, clientWidth } = imageRef.current;
     const { left, top } = imageRef.current.getBoundingClientRect();
     setImageSize({ width: clientWidth, height: clientHeight });
-    setEditorPosition({ left, top });
+    setEditorPosition({ x: left, y: top });
   };
 
   const onCreateClimbingRouteClick = () => {
@@ -121,10 +121,11 @@ export const ClimbingView = ({
 
   const onCanvasClick = (e) => {
     if (isSelectedRouteEditable) {
-      const newCoordinate = {
-        x: (e.clientX - editorPosition.left) / imageSize.width,
-        y: (e.clientY - editorPosition.top) / imageSize.height,
-      };
+      const newCoordinate = getPercentagePosition({
+        x: e.clientX - editorPosition.x,
+        y: e.clientY - editorPosition.y,
+      });
+
       updateRouteOnIndex(routeSelectedIndex, (route) => ({
         ...route,
         path: [...route.path, newCoordinate],

src/components/FeaturePanel/Climbing/Editor/Point.tsx

@@ -24,14 +24,14 @@ export const Point = ({ x, y, onPointClick, type, index, routeNumber }) => {
   const [isHovered, setIsHovered] = useState(false);
   const [wasMoved, setWasMoved] = useState(false);
   const {
-    imageSize,
     setPointSelectedIndex,
     pointSelectedIndex,
     routeSelectedIndex,
     updateRouteOnIndex,
     editorPosition,
     setIsPointMoving,
     isPointMoving,
+    getPercentagePosition,
   } = useContext(ClimbingContext);
 
   const onClick = (e) => {
@@ -67,10 +67,10 @@ export const Point = ({ x, y, onPointClick, type, index, routeNumber }) => {
   const onMove = (position: { x: number; y: number }) => {
     if (isPointMoving) {
       setWasMoved(true);
-      const newCoordinate = {
-        x: (position.x - editorPosition.left) / imageSize.width,
-        y: (position.y - editorPosition.top) / imageSize.height,
-      };
+      const newCoordinate = getPercentagePosition({
+        x: position.x - editorPosition.x,
+        y: position.y - editorPosition.y,
+      });
       updateRouteOnIndex(routeSelectedIndex, (route) => ({
         ...route,
         path: updateElementOnIndex(route.path, pointSelectedIndex, (point) => ({
@@ -119,8 +119,9 @@ export const Point = ({ x, y, onPointClick, type, index, routeNumber }) => {
     cy: 0,
   };
   const title = type && <title>{type}</title>;
+
   return (
-    <g transform={`translate(${imageSize.width * x},${imageSize.height * y})`}>
+    <g transform={`translate(${x},${y})`}>
       <ClickableArea
         fill="transparent"
         r={isTouchDevice ? 20 : 10}

src/components/FeaturePanel/Climbing/Editor/PulsedPoint.tsx

@@ -31,9 +31,11 @@ const PulsedPointElement = styled.circle`
 `;
 
 export const PulsedPoint = ({ x, y }) => {
-  const { imageSize } = useContext(ClimbingContext);
+  const { getPixelPosition } = useContext(ClimbingContext);
+  const position = getPixelPosition({ x, y });
+
   return (
-    <g transform={`translate(${imageSize.width * x},${imageSize.height * y})`}>
+    <g transform={`translate(${position.x},${position.y})`}>
       <PulsedPointElement cx="0" cy="0" id="radarPoint" fill="white" r={3} />
     </g>
   );

src/components/FeaturePanel/Climbing/Editor/Route.tsx

@@ -20,7 +20,7 @@ export const Route = ({
   onRouteSelect,
   onPointClick,
 }: Props) => {
-  const { imageSize, isSelectedRouteEditable, isRouteSelected } =
+  const { getPixelPosition, isSelectedRouteEditable, isRouteSelected } =
     useContext(ClimbingContext);
 
   const isSelected = isRouteSelected(routeNumber);
@@ -51,28 +51,21 @@ export const Route = ({
       {route.path.map(({ x, y, type }, index) => {
         const isBoltVisible = type === 'bolt';
         const isBelayVisible = type === 'belay';
+        const position = getPixelPosition({ x, y });
 
         return (
           <>
             {isThisRouteEditMode && <PulsedPoint x={x} y={y} />}
             {isBoltVisible && (
-              <Bolt
-                x={imageSize.width * x}
-                y={imageSize.height * y}
-                isSelected={isSelected}
-              />
+              <Bolt x={position.x} y={position.y} isSelected={isSelected} />
             )}
             {isBelayVisible && (
-              <Belay
-                x={imageSize.width * x}
-                y={imageSize.height * y}
-                isSelected={isSelected}
-              />
+              <Belay x={position.x} y={position.y} isSelected={isSelected} />
             )}
             {isThisRouteEditMode && (
               <Point
-                x={x}
-                y={y}
+                x={position.x}
+                y={position.y}
                 type={type}
                 onPointClick={onPointClick}
                 index={index}

src/components/FeaturePanel/Climbing/Editor/RoutePath.tsx

@@ -2,7 +2,7 @@
 import React, { useContext, useState } from 'react';
 import styled from 'styled-components';
 import { ClimbingContext } from '../contexts/climbingContext';
-import { EditorPosition } from '../types';
+import { Position } from '../types';
 
 const RouteLine = styled.path``;
 const RouteBorder = styled.path``;
@@ -16,14 +16,13 @@ export const RoutePath = ({ onRouteSelect, route, routeNumber }) => {
   const [isHovered, setIsHovered] = useState(false);
   // const [isDraggingPoint, setIsDraggingPoint] = useState(false);
   const [tempPointPosition, setTempPointPosition] = useState<
-    EditorPosition & { lineIndex: number }
+    Position & { lineIndex: number }
   >({
-    top: 0,
-    left: 0,
+    x: 0,
+    y: 0,
     lineIndex: 0,
   });
   const {
-    imageSize,
     isSelectedRouteEditable,
     routeSelectedIndex,
     editorPosition,
@@ -32,21 +31,23 @@ export const RoutePath = ({ onRouteSelect, route, routeNumber }) => {
     isRouteSelected,
     // setPointSelectedIndex,
     // setIsPointMoving,
+    getPixelPosition,
+    getPercentagePosition,
   } = useContext(ClimbingContext);
   const isSelected = isRouteSelected(routeNumber);
 
   const pointsInString = route?.path.map(({ x, y }, index) => {
-    const currentX = imageSize.width * x;
-    const currentY = imageSize.height * y;
-    return `${index === 0 ? 'M' : 'L'}${currentX} ${currentY} `;
+    const position = getPixelPosition({ x, y });
+
+    return `${index === 0 ? 'M' : 'L'}${position.x} ${position.y} `;
   });
 
   const onMouseMove = (e, lineIndex: number) => {
     if (isSelectedRouteEditable) {
       if (!isHovered) setIsHovered(true);
       setTempPointPosition({
-        left: e.clientX - editorPosition.left,
-        top: e.clientY - editorPosition.top,
+        x: e.clientX - editorPosition.x,
+        y: e.clientY - editorPosition.y,
         lineIndex,
       });
     }
@@ -72,14 +73,16 @@ export const RoutePath = ({ onRouteSelect, route, routeNumber }) => {
   // };
 
   const onPointAdd = () => {
+    const position = getPercentagePosition({
+      x: tempPointPosition.x,
+      y: tempPointPosition.y,
+    });
+
     updateRouteOnIndex(routeSelectedIndex, (currentRoute) => ({
       ...currentRoute,
       path: [
         ...currentRoute.path.slice(0, tempPointPosition.lineIndex + 1),
-        {
-          x: tempPointPosition.left / imageSize.width,
-          y: tempPointPosition.top / imageSize.height,
-        },
+        position,
         ...currentRoute.path.slice(tempPointPosition.lineIndex + 1),
       ],
     }));
@@ -137,15 +140,18 @@ export const RoutePath = ({ onRouteSelect, route, routeNumber }) => {
       />
       {route.path.length > 1 &&
         route.path.map(({ x, y }, index) => {
+          const position1 = getPixelPosition({ x, y });
+
           if (route?.path && index < route.path.length - 1) {
+            const position2 = getPixelPosition(route.path[index + 1]);
             return (
               <InteractiveArea
                 stroke="transparent"
                 strokeWidth={20}
-                x1={imageSize.width * x}
-                y1={imageSize.height * y}
-                x2={imageSize.width * route.path[index + 1].x}
-                y2={imageSize.height * route.path[index + 1].y}
+                x1={position1.x}
+                y1={position1.y}
+                x2={position2.x}
+                y2={position2.y}
                 onMouseEnter={onMouseEnter}
                 onMouseLeave={onMouseLeave}
                 onMouseMove={(e) => onMouseMove(e, index)}

src/components/FeaturePanel/Climbing/Editor/RouteWithLabel.tsx

@@ -21,10 +21,9 @@ export const RouteWithLabel = ({
 }: Props) => {
   if (!route || route.path.length === 0) return null;
 
-  const { imageSize } = useContext(ClimbingContext);
+  const { getPixelPosition } = useContext(ClimbingContext);
 
-  const x = imageSize.width * route.path[0].x; // @TODO do contextu, rename x?
-  const y = imageSize.height * route.path[0].y; // @TODO do contextu
+  const { x, y } = getPixelPosition(route.path[0]);
 
   if (route.path.length === 1) {
     return (

src/components/FeaturePanel/Climbing/contexts/climbingContext.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useState } from 'react';
-import { ClimbingRoute, EditorPosition } from '../types';
+import { ClimbingRoute, Position } from '../types';
 import { updateElementOnIndex } from '../utils';
 
 type ImageSize = {
@@ -8,15 +8,15 @@ type ImageSize = {
 };
 
 type ClimbingContextType = {
-  editorPosition: EditorPosition;
+  editorPosition: Position;
   imageSize: ImageSize;
   isPointMoving: boolean;
   isRouteSelected: (routeNumber: number) => boolean;
   isSelectedRouteEditable: boolean;
   pointSelectedIndex: number;
   routes: Array<ClimbingRoute>;
   routeSelectedIndex: number;
-  setEditorPosition: (position: EditorPosition) => void;
+  setEditorPosition: (position: Position) => void;
   setImageSize: (ImageSize) => void;
   setIsPointMoving: (isPointMoving: boolean) => void;
   setIsSelectedRouteEditable: (isSelectedRouteEditable: boolean) => void;
@@ -27,10 +27,12 @@ type ClimbingContextType = {
     routeIndex: number,
     callback?: (route: ClimbingRoute) => ClimbingRoute,
   ) => void;
+  getPixelPosition: (position: Position) => Position;
+  getPercentagePosition: (position: Position) => Position;
 };
 
 export const ClimbingContext = createContext<ClimbingContextType>({
-  editorPosition: { top: 0, left: 0 },
+  editorPosition: { x: 0, y: 0 },
   imageSize: {
     width: 0,
     height: 0,
@@ -49,23 +51,35 @@ export const ClimbingContext = createContext<ClimbingContextType>({
   setRoutes: () => null,
   setRouteSelectedIndex: () => null,
   updateRouteOnIndex: () => null,
+  getPixelPosition: () => null,
+  getPercentagePosition: () => null,
 });
 
 export const ClimbingContextProvider = ({ children }) => {
   const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
   const [isSelectedRouteEditable, setIsSelectedRouteEditable] = useState(false);
   const [routes, setRoutes] = useState<Array<ClimbingRoute>>([]);
   const [isPointMoving, setIsPointMoving] = useState<boolean>(false);
-  const [editorPosition, setEditorPosition] = useState<EditorPosition>({
-    top: 0,
-    left: 0,
+  const [editorPosition, setEditorPosition] = useState<Position>({
+    x: 0,
+    y: 0,
   });
   const [routeSelectedIndex, setRouteSelectedIndex] = useState<number>(null);
   const [pointSelectedIndex, setPointSelectedIndex] = useState<number>(null);
 
   const isRouteSelected = (routeNumber: number) =>
     routeSelectedIndex === routeNumber;
 
+  const getPercentagePosition = ({ x, y }: Position) => ({
+    x: x / imageSize.width,
+    y: y / imageSize.height,
+  });
+
+  const getPixelPosition = ({ x, y }: Position) => ({
+    x: imageSize.width * x,
+    y: imageSize.height * y,
+  });
+
   const updateRouteOnIndex = (
     routeIndex: number,
     callback?: (route: ClimbingRoute) => ClimbingRoute,
@@ -95,6 +109,8 @@ export const ClimbingContextProvider = ({ children }) => {
     setRouteSelectedIndex,
     updateRouteOnIndex,
     isRouteSelected,
+    getPixelPosition,
+    getPercentagePosition,
   };
 
   return (

src/components/FeaturePanel/Climbing/types.ts

@@ -1,13 +1,16 @@
 export type PointType = 'belay' | 'bolt' | 'piton';
 
-export type EditorPosition = { top: number; left: number };
-
-export type PathPoints = Array<{
+export type Position = {
   x: number;
   y: number;
-  type?: PointType;
-  note?: string;
-}>;
+};
+
+export type PathPoints = Array<
+  Position & {
+    type?: PointType;
+    note?: string;
+  }
+>;
 
 export type ClimbingRoute = {
   difficulty?: string;