climbing: Fix when image is smaller than its container (#243)

zbycz · Feb 15, 2024 · 6ea02be · 6ea02be
1 parent 672ebfe
commit 6ea02be
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 5 deletions.
diff --git a/src/components/FeaturePanel/Climbing/Editor/MouseTrackingLine.tsx b/src/components/FeaturePanel/Climbing/Editor/MouseTrackingLine.tsx
@@ -19,7 +19,7 @@ export const MouseTrackingLine = ({ routeNumber }) => {
   const lastPoint = path[path.length - 1];
   const lastPointPositionInPx = getPixelPosition(lastPoint);
   const mousePositionWithEditorPosition = addOffsets(
-    ['editorPosition'],
+    ['editorPosition', 'imageContainer'],
     mousePosition,
   );
   const closerMousePositionPoint = mousePositionWithEditorPosition

diff --git a/src/components/FeaturePanel/Climbing/Editor/RoutePath.tsx b/src/components/FeaturePanel/Climbing/Editor/RoutePath.tsx
@@ -51,7 +51,7 @@ export const RoutePath = ({ route, routeNumber }) => {
     ) {
       if (!isLineInteractiveAreaHovered) setIsLineInteractiveAreaHovered(true);
 
-      const position = addOffsets(['editorPosition'], {
+      const position = addOffsets(['editorPosition', 'imageContainer'], {
         x: e.clientX,
         y: e.clientY,
         units: 'px',

diff --git a/src/components/FeaturePanel/Climbing/Editor/RoutesEditor.tsx b/src/components/FeaturePanel/Climbing/Editor/RoutesEditor.tsx
@@ -83,7 +83,7 @@ export const RoutesEditor = ({
 
       setIsPointMoving(true);
       const newCoordinate = getPercentagePosition(
-        addOffsets(['editorPosition'], position),
+        addOffsets(['editorPosition', 'imageContainer'], position),
       );
 
       const closestPoint = findCloserPoint(newCoordinate);

diff --git a/src/components/FeaturePanel/Climbing/contexts/ClimbingContext.tsx b/src/components/FeaturePanel/Climbing/contexts/ClimbingContext.tsx
@@ -40,6 +40,7 @@ type ImageSize = {
 type ClimbingContextType = {
   editorPosition: PositionPx;
   imageSize: ImageSize;
+  imageContainerSize: ImageSize;
   isPointMoving: boolean;
   isRouteSelected: (routeNumber: number) => boolean;
   isPointSelected: (pointNumber: number) => boolean;
@@ -52,6 +53,7 @@ type ClimbingContextType = {
   setIsPointClicked: (isPointClicked: boolean) => void;
   setEditorPosition: (position: PositionPx) => void;
   setImageSize: (ImageSize) => void;
+  setImageContainerSize: (ImageSize) => void;
   splitPaneHeight: number | null;
   setSplitPaneHeight: (height: number | null) => void;
   photoPaths: Array<string>;
@@ -143,6 +145,10 @@ export const ClimbingContextProvider = ({ children, feature }: Props) => {
   const [showDebugMenu, setShowDebugMenu] = useState(false);
   const [isEditMode, setIsEditMode] = useState(false);
   const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
+  const [imageContainerSize, setImageContainerSize] = useState({
+    width: 0,
+    height: 0,
+  });
   const [routes, setRoutes] = useState<Array<ClimbingRoute>>(initialRoutes);
   const [splitPaneHeight, setSplitPaneHeight] = useState<number | null>(null);
   const [isPointMoving, setIsPointMoving] = useState<boolean>(false);
@@ -242,6 +248,7 @@ export const ClimbingContextProvider = ({ children, feature }: Props) => {
       editorPosition,
       scrollOffset,
       imageSize,
+      imageContainerSize,
       photoZoom,
     });
 
@@ -299,6 +306,10 @@ export const ClimbingContextProvider = ({ children, feature }: Props) => {
       const [width, height] = getContainedSizeImage(photoRef.current);
       const { left, top } = photoRef.current.getBoundingClientRect();
 
+      setImageContainerSize({
+        width: photoRef.current.width,
+        height: photoRef.current.height,
+      });
       setImageSize({
         width,
         height,
@@ -384,6 +395,8 @@ export const ClimbingContextProvider = ({ children, feature }: Props) => {
     gradeTable,
     setGradeTable,
     preparePhotosAndSetFirst,
+    imageContainerSize,
+    setImageContainerSize,
   };
 
   return (

diff --git a/src/components/FeaturePanel/Climbing/utils/getMachineFactory.ts b/src/components/FeaturePanel/Climbing/utils/getMachineFactory.ts
@@ -131,7 +131,7 @@ export const getMachineFactory = ({
     if (!props) return;
     const { x, y } = props.position;
     const newCoordinate = getPercentagePosition(
-      addOffsets(['scrollOffset', 'editorPosition'], {
+      addOffsets(['scrollOffset', 'editorPosition', 'imageContainer'], {
         x,
         y,
         units: 'px',

diff --git a/src/components/FeaturePanel/Climbing/utils/positionUtilsFactory.ts b/src/components/FeaturePanel/Climbing/utils/positionUtilsFactory.ts
@@ -1,12 +1,16 @@
 import { Position, PositionPx } from '../types';
 import { roundNumber } from './number';
 
-export type CountPositionEntity = 'editorPosition' | 'scrollOffset';
+export type CountPositionEntity =
+  | 'editorPosition'
+  | 'scrollOffset'
+  | 'imageContainer';
 
 export const positionUtilsFactory = ({
   editorPosition,
   scrollOffset,
   imageSize,
+  imageContainerSize,
   photoZoom,
 }) => {
   const getPixelPosition = ({ x, y }: Position): PositionPx => ({
@@ -35,6 +39,13 @@ export const positionUtilsFactory = ({
           units: 'px',
         };
       }
+      if (offset === 'imageContainer') {
+        return {
+          x: acc.x - (imageContainerSize.width - imageSize.width) / 2,
+          y: acc.y - (imageContainerSize.height - imageSize.height) / 2,
+          units: 'px',
+        };
+      }
       return {
         x: scrollOffset.x + acc.x,
         y: scrollOffset.y + acc.y,