feat: save label position as percentage

graasp · Aug 7, 2024 · a3823c8 · a3823c8
1 parent f773355
commit a3823c8
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 107 deletions.
diff --git a/src/@types/index.ts b/src/@types/index.ts
@@ -1,32 +1,22 @@
 export type Settings = {
   description: string;
   labels: Label[];
-  imageDimension: { width: number; height: number };
 };
 
 export enum SettingsKeys {
   File = 'file',
   SettingsData = 'settings-data',
 }
 
-export type Position = { x: number; y: number };
+// x and y are relative to image size (percentage)
+export type Position = { x: string; y: string };
 
 export type Label = Position & {
   content: string;
   id: string;
 };
 
-export type Choice = { content: string; id: string };
-
-export type DraggableLabelType = {
-  // x and y are relative to image size (percentage)
-  y: string;
-  x: string;
-  id: string;
-  content: string;
-};
-
 export type AnsweredLabel = {
-  expected: DraggableLabelType;
-  actual: null | DraggableLabelType;
+  expected: Label;
+  actual: null | Label;
 };
diff --git a/src/modules/builder/configuration/AddLabelsStep/AddLabelWithinFrame.tsx b/src/modules/builder/configuration/AddLabelsStep/AddLabelWithinFrame.tsx
@@ -12,6 +12,7 @@ import { Label } from '@/@types';
 import { useAppTranslation } from '@/config/i18n';
 import { APP } from '@/langs/constants';
 import { LabelsContext } from '@/modules/context/LabelsContext';
+import { useImageDimensionsContext } from '@/modules/context/imageDimensionContext';
 
 import AddLabelForm from './AddLabelForm';
 import DraggableLabel from './DraggableLabel';
@@ -39,10 +40,12 @@ const AddLabelWithinFrame = (): JSX.Element => {
   const [content, setContent] = useState('');
   const [labelToEdit, setLabelToEdit] = useState<Label | null>(null);
   const [formPosition, setFormPosition] = useState({
-    y: 0,
-    x: 0,
+    y: '0%',
+    x: '0%',
   });
 
+  const { dimension } = useImageDimensionsContext();
+
   const handleFormInputChange = (
     event: React.ChangeEvent<HTMLInputElement>,
   ): void => {
@@ -64,11 +67,7 @@ const AddLabelWithinFrame = (): JSX.Element => {
       saveLabelsChanges(newLabel);
     } else {
       const id = v4();
-      const p = {
-        y: formPosition.y,
-        x: formPosition.x,
-      };
-      const newLabel = { ...p, id, content };
+      const newLabel = { ...formPosition, id, content };
       saveLabelsChanges(newLabel);
     }
     handleShowLabelForm(false);
@@ -79,10 +78,9 @@ const AddLabelWithinFrame = (): JSX.Element => {
   ): void => {
     if (!isDragging) {
       const { offsetX, offsetY } = event.nativeEvent;
-
       setFormPosition({
-        y: offsetY,
-        x: offsetX,
+        y: `${(offsetY / dimension.height) * 100}%`,
+        x: `${(offsetX / dimension.width) * 100}%`,
       });
       setOpenForm(true);
       setLabelToEdit(null);

diff --git a/src/modules/builder/configuration/AddLabelsStep/DraggableLabel.tsx b/src/modules/builder/configuration/AddLabelsStep/DraggableLabel.tsx
@@ -6,6 +6,7 @@ import { Button, styled } from '@mui/material';
 
 import { Label } from '@/@types';
 import { LabelsContext } from '@/modules/context/LabelsContext';
+import { useImageDimensionsContext } from '@/modules/context/imageDimensionContext';
 
 const StyledLabel = styled(Button)(({ theme }) => ({
   background: theme.palette.primary.main,
@@ -29,11 +30,14 @@ type Props = {
 };
 
 const DraggableLabel = ({ showEditForm, label }: Props): JSX.Element => {
-  const [position, setPosition] = useState({ x: label.x, y: label.y });
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const { dimension } = useImageDimensionsContext();
 
   useEffect(() => {
-    setPosition({ x: label.x, y: label.y });
-  }, [label]);
+    const x = (parseFloat(label.x) * dimension.width) / 100;
+    const y = (parseFloat(label.y) * dimension.height) / 100;
+    setPosition({ x, y });
+  }, [label, dimension]);
 
   const { saveLabelsChanges, setIsDragging, isDragging } =
     useContext(LabelsContext);
@@ -49,14 +53,16 @@ const DraggableLabel = ({ showEditForm, label }: Props): JSX.Element => {
   const onStop = (e: DraggableEvent): void => {
     e.stopPropagation();
     e.preventDefault();
-
-    const newLabel = { ...label, ...position };
+    const y = `${(position.y / dimension.height) * 100}%`;
+    const x = `${(position.x / dimension.width) * 100}%`;
+    const newLabel = { ...label, x, y };
     // Set a delay before enabling actions like opening a new form or applying zoom/move to the image frame
     setTimeout(() => {
       setIsDragging(false);
     }, 2000);
     saveLabelsChanges(newLabel);
   };
+
   return (
     <Draggable
       position={position}

diff --git a/src/modules/builder/configuration/AddLabelsStep/ImageFrame.tsx b/src/modules/builder/configuration/AddLabelsStep/ImageFrame.tsx
@@ -1,12 +1,10 @@
-import { useRef } from 'react';
-
 import { Alert, Skeleton, styled } from '@mui/material';
 
 import { Settings, SettingsKeys } from '@/@types';
 import { useAppTranslation } from '@/config/i18n';
 import { hooks } from '@/config/queryClient';
 import { APP } from '@/langs/constants';
-import { useImageObserver } from '@/modules/context/imageDimensionContext';
+import { useImageDimensionsContext } from '@/modules/context/imageDimensionContext';
 
 const Container = styled('div')(() => ({
   display: 'flex',
@@ -19,11 +17,11 @@ const Container = styled('div')(() => ({
 const ImageFrame = (): JSX.Element | null => {
   const { data: appSettings, isLoading: settingLoading } =
     hooks.useAppSettings<Settings>();
-  const imgRef = useRef<HTMLImageElement | null>(null);
 
   const image = appSettings?.find(({ name }) => name === SettingsKeys.File);
   const appSettingId = image?.id || '';
 
+  const { imgRef } = useImageDimensionsContext();
   const {
     data: dataFile,
     isLoading: isImageLoading,
@@ -32,8 +30,6 @@ const ImageFrame = (): JSX.Element | null => {
     appSettingId,
   });
 
-  useImageObserver({ imgRef });
-
   const { t } = useAppTranslation();
 
   if (dataFile) {

diff --git a/src/modules/builder/configuration/index.tsx b/src/modules/builder/configuration/index.tsx
@@ -7,6 +7,7 @@ import { useAppTranslation } from '@/config/i18n';
 import { hooks } from '@/config/queryClient';
 import { CONFIGURATION_TAB_ID } from '@/config/selectors';
 import { APP } from '@/langs/constants';
+import { ImageDimensionsProvider } from '@/modules/context/imageDimensionContext';
 
 import AddImageStep from './AddImageStep';
 import AddLabelsStep from './AddLabelsStep/AddLabelsStep';
@@ -47,10 +48,12 @@ const Configurations = (): JSX.Element => {
     {
       label: t(APP.ADD_LABELS_STEP_LABEL),
       component: (
-        <AddLabelsStep
-          moveToNextStep={() => setActiveStep(2)}
-          moveToPrevStep={() => setActiveStep(0)}
-        />
+        <ImageDimensionsProvider>
+          <AddLabelsStep
+            moveToNextStep={() => setActiveStep(2)}
+            moveToPrevStep={() => setActiveStep(0)}
+          />
+        </ImageDimensionsProvider>
       ),
       disabled: !image?.id,
     },

diff --git a/src/modules/common/AllLabelsContainer.tsx b/src/modules/common/AllLabelsContainer.tsx
@@ -3,7 +3,7 @@ import { Droppable } from 'react-beautiful-dnd';
 
 import { styled } from '@mui/material';
 
-import { DraggableLabelType } from '@/@types';
+import { Label } from '@/@types';
 
 import DraggableLabel from './DraggableLabel';
 
@@ -22,7 +22,7 @@ export const Container = styled('div')<{
 }));
 
 type Props = {
-  labels: DraggableLabelType[];
+  labels: Label[];
 };
 
 const AllLabelsContainer = ({ labels }: Props): JSX.Element => (

diff --git a/src/modules/common/PlayerFrame.tsx b/src/modules/common/PlayerFrame.tsx
@@ -3,12 +3,7 @@ import { DragDropContext, DropResult } from 'react-beautiful-dnd';
 
 import { Box, Typography } from '@mui/material';
 
-import {
-  AnsweredLabel,
-  DraggableLabelType,
-  Settings,
-  SettingsKeys,
-} from '@/@types';
+import { AnsweredLabel, Label, Settings, SettingsKeys } from '@/@types';
 import { useAppTranslation } from '@/config/i18n';
 import { hooks } from '@/config/queryClient';
 import { APP } from '@/langs/constants';
@@ -25,36 +20,21 @@ const PlayerFrame = (): JSX.Element => {
   });
 
   const [labels, setLabels] = useState<AnsweredLabel[]>([]);
-  const [nonAnsweredLabels, setNonAnsweredLabels] = useState<
-    DraggableLabelType[]
-  >([]);
+  const [nonAnsweredLabels, setNonAnsweredLabels] = useState<Label[]>([]);
 
   const [isDragging, setIsDragging] = useState(false);
 
   useEffect(() => {
     const settingLabels = appSettings?.[0].data.labels;
-    const imageDimension = appSettings?.[0].data.imageDimension;
-
-    if (imageDimension && settingLabels) {
-      const answeredLabels = settingLabels.map(({ id, content, x, y }) => ({
-        expected: {
-          id,
-          content,
-          x: `${(x / imageDimension.width) * 100}%`,
-          y: `${(y / imageDimension.height) * 100}%`,
-        },
-        actual: null,
-      }));
 
-      const AllChoices = settingLabels.map(({ id, content, x, y }) => ({
-        id,
-        content,
-        x: `${(x / imageDimension.width) * 100}%`,
-        y: `${(y / imageDimension.height) * 100}%`,
+    if (settingLabels) {
+      const answeredLabels = settingLabels.map((label) => ({
+        expected: label,
+        actual: null,
       }));
 
       setLabels(answeredLabels);
-      setNonAnsweredLabels(AllChoices);
+      setNonAnsweredLabels(settingLabels);
     }
   }, [appSettings]);
 

diff --git a/src/modules/context/imageDimensionContext.tsx b/src/modules/context/imageDimensionContext.tsx
@@ -1,56 +1,45 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import { Settings, SettingsKeys } from '@/@types';
-import { hooks, mutations } from '@/config/queryClient';
+import { hooks } from '@/config/queryClient';
 import { debounce } from '@/utils';
 
-type Props = {
+type ImageDimensionContextType = {
   imgRef: React.MutableRefObject<HTMLImageElement | null> | null;
+  dimension: { width: number; height: number };
 };
-export const useImageObserver = ({ imgRef }: Props): void => {
-  const { mutate: patchSetting } = mutations.usePatchAppSetting();
+
+const ImageDimensionsContext = createContext<ImageDimensionContextType>({
+  imgRef: null,
+  dimension: { width: 0, height: 0 },
+});
+
+type Props1 = {
+  children: JSX.Element;
+};
+export const ImageDimensionsProvider = ({ children }: Props1): JSX.Element => {
+  const imgRef = useRef<HTMLImageElement | null>(null);
 
   const { data: settingsData } = hooks.useAppSettings<Settings>({
     name: SettingsKeys.SettingsData,
   });
 
+  const [imgDimension, setImgDimension] = useState({ width: 0, height: 0 });
   const saveImageDimension = useCallback(
-    (
-      imageDimension: {
-        width: number;
-        height: number;
-      },
-      id: string,
-    ): void => {
+    (imageDimension: { width: number; height: number }): void => {
       if (imageDimension.height && imageDimension.width) {
-        const labels = settingsData?.[0]?.data.labels;
-        const prevDimension = settingsData?.[0]?.data.imageDimension;
-
-        // Calculate new offsets if image dimensions have changed
-        const newLabels = labels?.map((label) => {
-          const { x, y } = label;
-          if (
-            prevDimension &&
-            (prevDimension.width !== imageDimension.width ||
-              prevDimension?.height !== imageDimension.height)
-          ) {
-            const newX = (x * imageDimension.width) / prevDimension.width;
-            const newY = (y * imageDimension.height) / prevDimension.height;
-            return { ...label, x: newX, y: newY };
-          }
-          return label;
-        });
-
-        const payload = {
-          ...settingsData?.[0]?.data,
-          imageDimension,
-          labels: newLabels,
-        };
-
-        patchSetting({ id, data: payload });
+        setImgDimension(imageDimension);
       }
     },
-    [settingsData, patchSetting],
+    [],
   );
 
   const debouncedSaveImageDimension = useMemo(
@@ -71,7 +60,7 @@ export const useImageObserver = ({ imgRef }: Props): void => {
       const { width, height } = entry.contentRect;
 
       if ((width !== dimension.width || height !== dimension.height) && id) {
-        debouncedSaveImageDimension({ width, height }, id);
+        debouncedSaveImageDimension({ width, height });
       }
     };
 
@@ -84,4 +73,19 @@ export const useImageObserver = ({ imgRef }: Props): void => {
       resizeObserver.disconnect();
     };
   }, [imgRef, debouncedSaveImageDimension, settingsData]);
+
+  const value: ImageDimensionContextType = useMemo(() => {
+    const dimension = imgDimension;
+
+    return { imgRef, dimension };
+  }, [imgRef, imgDimension]);
+
+  return (
+    <ImageDimensionsContext.Provider value={value}>
+      {children}
+    </ImageDimensionsContext.Provider>
+  );
 };
+
+export const useImageDimensionsContext = (): ImageDimensionContextType =>
+  useContext<ImageDimensionContextType>(ImageDimensionsContext);