fix: enhancements for preview style

graasp · Jul 5, 2024 · 5d8885d · 5d8885d
1 parent fc49fba
commit 5d8885d
Show file tree

Hide file tree

Showing 12 changed files with 101 additions and 69 deletions.
diff --git a/src/config/constants.ts b/src/config/constants.ts
@@ -1,4 +1,3 @@
 export const FILE_UPLOAD_MAX_FILES = 1;
 
-export const ADD_LABEL_FRAME_WIDTH = 600;
 export const ADD_LABEL_FRAME_HEIGHT = 600;
diff --git a/src/langs/constants.ts b/src/langs/constants.ts
@@ -15,4 +15,5 @@ export const APP = {
   ADD: 'ADD',
   DRAG_DROP_EXERCISE_TITLE: 'DRAG_DROP_EXERCISE_TITLE',
   SAVE: 'SAVE',
+  PREVIEW_NOTE: 'PREVIEW_NOTE',
 };
diff --git a/src/langs/en.json b/src/langs/en.json
@@ -15,5 +15,6 @@
   "REPLACE_IMAGE": "Replace the image",
   "ADD": "Add",
   "DRAG_DROP_EXERCISE_TITLE": "Drag and drop these labels into the correct frame of the image",
-  "SAVE": "Save"
+  "SAVE": "Save",
+  "PREVIEW_NOTE": "Here is what your application will look like from the player's perspective. To modify any settings, please return to the previous steps."
 }
diff --git a/src/modules/builder/configuration/AddLabelsStep/AddDraggableLabel.tsx b/src/modules/builder/configuration/AddLabelsStep/AddDraggableLabel.tsx
@@ -14,10 +14,7 @@ import { PermissionLevel } from '@graasp/sdk';
 import { v4 } from 'uuid';
 
 import { Label } from '@/@types';
-import {
-  ADD_LABEL_FRAME_HEIGHT,
-  ADD_LABEL_FRAME_WIDTH,
-} from '@/config/constants';
+import { ADD_LABEL_FRAME_HEIGHT } from '@/config/constants';
 
 import AddLabelForm from './AddLabelForm';
 import DraggableLabel from './DraggableLabel';
@@ -27,6 +24,7 @@ type Props = {
   imageSettingId: string;
   labels: Label[];
   setLabels: (l: Label[]) => void;
+  saveData: (l: Label[]) => void;
 };
 
 const TransformContainer = styled(TransformWrapper)(() => ({
@@ -48,6 +46,7 @@ const AddDraggableLabel = ({
   labels,
   setLabels,
   imageSettingId,
+  saveData,
 }: Props): JSX.Element => {
   const { instance } = useControls();
   const { permission } = useLocalContext();
@@ -57,7 +56,6 @@ const AddDraggableLabel = ({
     y: 0,
     x: 0,
   });
-
   const [isDragging, setIsDragging] = useState(false);
   const { scale, positionX, positionY } = instance.transformState;
 
@@ -86,6 +84,7 @@ const AddDraggableLabel = ({
         ...labels.slice(editingIndex + 1),
       ];
       setLabels(newLabelGroups);
+      saveData(newLabelGroups);
     } else {
       const id = v4();
       const p = {
@@ -94,6 +93,7 @@ const AddDraggableLabel = ({
       };
       const newLabel = { ...p, id, content: labelText };
       setLabels([...labels, newLabel]);
+      saveData([...labels, newLabel]);
     }
     setOpenForm(false);
     setLabelText('');
@@ -114,7 +114,7 @@ const AddDraggableLabel = ({
     }
   };
 
-  const onStop = (
+  const onDrag = (
     e: DraggableEvent,
     position: DraggableData,
     labelId: string,
@@ -127,10 +127,9 @@ const AddDraggableLabel = ({
       const label = labels[labelInd];
 
       const p = {
-        left: x,
-        top: y,
+        x,
+        y,
       };
-
       const newLabel = { ...label, ...p };
       const newLabelGroups = [
         ...labels.slice(0, labelInd),
@@ -144,6 +143,7 @@ const AddDraggableLabel = ({
   const deleteLabel = (labelId: string): void => {
     const filteredLabels = labels.filter(({ id }) => labelId !== id);
     setLabels(filteredLabels);
+    saveData(filteredLabels);
   };
 
   const editLabel = (labelId: string): void => {
@@ -164,7 +164,7 @@ const AddDraggableLabel = ({
     <Box
       sx={{
         height: `${ADD_LABEL_FRAME_HEIGHT}px`,
-        width: `${ADD_LABEL_FRAME_WIDTH}px`,
+        width: `100%`,
       }}
     >
       {permission === PermissionLevel.Admin && openForm && !isDragging && (
@@ -182,13 +182,14 @@ const AddDraggableLabel = ({
           <DraggableLabel
             key={ele.id}
             label={ele}
-            onStop={(e: DraggableEvent, p: DraggableData) =>
-              onStop(e, p, ele.id)
+            onDrag={(e: DraggableEvent, p: DraggableData) =>
+              onDrag(e, p, ele.id)
             }
             deleteLabel={deleteLabel}
             editLabel={editLabel}
             scale={scale}
             setIsDragging={setIsDragging}
+            onStop={() => saveData(labels)}
           />
         ))}
       </Container>
@@ -200,18 +201,21 @@ const AddDraggableLabelWrapper = ({
   imageSettingId,
   labels,
   setLabels,
+  saveData,
 }: Props): JSX.Element => (
   <TransformContainer doubleClick={{ disabled: true }} centerOnInit>
     <TransformComponent
       wrapperStyle={{
-        maxWidth: '100%',
+        width: '100%',
         maxHeight: '100%',
       }}
+      contentStyle={{ width: '100%' }}
     >
       <AddDraggableLabel
         labels={labels}
         setLabels={setLabels}
         imageSettingId={imageSettingId}
+        saveData={saveData}
       />
     </TransformComponent>
   </TransformContainer>

diff --git a/src/modules/builder/configuration/AddLabelsStep/AddLabelForm.tsx b/src/modules/builder/configuration/AddLabelsStep/AddLabelForm.tsx
@@ -28,7 +28,6 @@ const AddLabelForm = ({
     <Stack
       sx={{
         position: 'absolute',
-
         zIndex: 500,
         top: formPosition.y,
         left: formPosition.x,

diff --git a/src/modules/builder/configuration/AddLabelsStep/AddLabelsStep.tsx b/src/modules/builder/configuration/AddLabelsStep/AddLabelsStep.tsx
@@ -34,15 +34,15 @@ const AddLabelsStep = ({
     settingsData?.data.labels || [],
   );
 
-  const saveData = (): void => {
+  const saveData = (l: Label[]): void => {
     if (settingsData && imgRef?.current) {
       const { width, height } = imgRef.current.getBoundingClientRect();
       const imageDimension = { width, height };
-      const data = { ...settingsData.data, labels, imageDimension };
+      const data = { ...settingsData.data, labels: l, imageDimension };
       patchSetting({ id: settingsData?.id, data });
     }
 
-    moveToNextStep();
+    // moveToNextStep();
   };
 
   return (
@@ -52,6 +52,7 @@ const AddLabelsStep = ({
           imageSettingId={image?.id}
           labels={labels}
           setLabels={setLabels}
+          saveData={saveData}
         />
       )}
       <Stack direction="row" gap={1} width="100%" justifyContent="flex-end">
@@ -61,7 +62,7 @@ const AddLabelsStep = ({
         <Button
           variant="contained"
           size="large"
-          onClick={saveData}
+          onClick={moveToNextStep}
           disabled={!settingsData?.data.labels && !labels.length}
         >
           {t(APP.NEXT)}

diff --git a/src/modules/builder/configuration/AddLabelsStep/DraggableLabel.tsx b/src/modules/builder/configuration/AddLabelsStep/DraggableLabel.tsx
@@ -7,7 +7,8 @@ import { Label } from '@/@types';
 import { buildLabelActionsID } from '@/config/selectors';
 
 type Props = {
-  onStop: (e: DraggableEvent, p: DraggableData) => void;
+  onDrag: (e: DraggableEvent, p: DraggableData) => void;
+  onStop: () => void;
   deleteLabel: (id: string) => void;
   editLabel: (id: string) => void;
   scale: number;
@@ -33,8 +34,8 @@ const StyledLabel = styled(Box)<{ labelId: string }>(({ theme, labelId }) => ({
 }));
 
 const DraggableLabel = ({
+  onDrag,
   onStop,
-
   deleteLabel,
   editLabel,
   scale,
@@ -43,9 +44,10 @@ const DraggableLabel = ({
 }: Props): JSX.Element => (
   <Draggable
     position={{ x: label.x, y: label.y }}
-    onDrag={onStop}
+    onDrag={onDrag}
     axis="none"
     onStop={() => {
+      onStop();
       setTimeout(() => {
         setIsDragging(false);
       }, 2000);

diff --git a/src/modules/builder/configuration/PreviewStep.tsx b/src/modules/builder/configuration/PreviewStep.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Stack, Typography } from '@mui/material';
+import { Alert, Box, Button, Stack, Typography } from '@mui/material';
 
 import { Settings, SettingsKeys } from '@/@types';
 import { useAppTranslation } from '@/config/i18n';
@@ -20,6 +20,7 @@ const PreviewStep = ({
   const { t } = useAppTranslation();
   return (
     <Stack spacing={2} padding={2}>
+      <Alert severity="success">{t(APP.PREVIEW_NOTE)}</Alert>
       <Box>
         <Typography variant="h5" fontWeight="bold">
           {appContext?.item.name}
@@ -33,9 +34,6 @@ const PreviewStep = ({
         <Button size="large" onClick={moveToPrevStep}>
           {t(APP.BACK)}
         </Button>
-        <Button variant="contained" size="large">
-          {t(APP.SAVE)}
-        </Button>
       </Stack>
     </Stack>
   );

diff --git a/src/modules/builder/configuration/index.tsx b/src/modules/builder/configuration/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { Stack, Step, StepButton, Stepper } from '@mui/material';
 
@@ -15,7 +15,6 @@ import PreviewStep from './PreviewStep';
 
 const Configurations = (): JSX.Element => {
   const { t } = useAppTranslation();
-  const [activeStep, setActiveStep] = useState(0);
 
   const { data: imageSetting } = hooks.useAppSettings({
     name: SettingsKeys.File,
@@ -27,6 +26,18 @@ const Configurations = (): JSX.Element => {
   const image = imageSetting?.[0];
 
   const settingsData = settings?.[0];
+  const [activeStep, setActiveStep] = useState(0);
+
+  const initialSetRef = useRef(false);
+
+  useEffect(() => {
+    if (!initialSetRef.current && settingsData?.data) {
+      if (settingsData.data.labels) {
+        setActiveStep(2);
+      }
+      initialSetRef.current = true;
+    }
+  }, [settingsData]);
 
   const steps = [
     {

diff --git a/src/modules/common/DraggableFrameWithLabels.tsx b/src/modules/common/DraggableFrameWithLabels.tsx
@@ -21,7 +21,11 @@ const DraggableFrameWithLabels = ({
 }: Props): JSX.Element => {
   const renderDraggableLabels = (): JSX.Element | JSX.Element[] => {
     const Labels = labels.map((label) => (
-      <DroppableDraggableLabel label={label} key={label.ind} />
+      <DroppableDraggableLabel
+        label={label}
+        key={label.ind}
+        isDragging={isDragging}
+      />
     ));
 
     return Labels;