Adapt wording

src/annotationForm/AnnotationDrawing.js

@@ -64,12 +64,13 @@ function AnnotationDrawing({ drawingState, setDrawingState, ...props }) {
     if (drawingState.shapes.find((s) => s.id === drawingState.currentShape?.id)) {
       window.addEventListener('keydown', handleKeyPress);
 
-      // props.setShapeProperties(drawingState.currentShape); // TODO Check that code ?
+      // Set here all the properties of the current shape for the tool options
       props.setColorToolFromCurrentShape(
         {
           fillColor: drawingState.currentShape.fill,
           strokeColor: drawingState.currentShape.stroke,
           strokeWidth: drawingState.currentShape.strokeWidth,
+          text: drawingState.currentShape.text,
         },
       );
 

src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlay.js

@@ -43,9 +43,12 @@ function AnnotationFormOverlay({
     updateToolState({
       ...toolState,
       activeTool: tool,
+      currentShape: null,
     });
   };
 
+
+
   const {
     activeTool,
   } = toolState;

src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayTool.js

@@ -69,7 +69,7 @@ function AnnotationFormOverlayTool({
             currentShape && (
             <Paper>
               <Typography variant="overline">
-                Forme selectionnée
+                Selected object
               </Typography>
 
               <ul>
@@ -115,6 +115,10 @@ function AnnotationFormOverlayTool({
       }
       {
         isShapesTool(toolState.activeTool) && (
+        <>
+          <Typography variant="overline">
+            Drawing tool
+          </Typography>
           <StyledToggleButtonGroup
             value={toolState.activeTool} // State or props ?
             exclusive
@@ -138,18 +142,22 @@ function AnnotationFormOverlayTool({
               <GestureIcon />
             </ToggleButton>
           </StyledToggleButtonGroup>
+        </>
         )
       }
       {
         toolState.activeTool === OVERLAY_TOOL.DELETE && (
         <>
+          <Typography variant="overline">
+            Delete
+          </Typography>
           <p>
-            Cliquer sur les formes pour les supprimer
+            Click on object to remove it.
           </p>
           <Button
             onClick={() => deleteShape()}
           >
-            <span>Supprimer toutes les formes</span>
+            <span>Delete all</span>
             <DeleteIcon color="red" />
           </Button>
         </>

src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayToolOptions.js

@@ -163,6 +163,9 @@ function AnnotationFormOverlayToolOptions({ updateToolState, toolState }) {
       {
         isShapesTool(toolState.activeTool) && (
           <Grid container>
+            <Typography variant="overline">
+              Object styles
+            </Typography>
             <Grid item xs={12}>
               <Typography variant="overline">
                 Style
@@ -258,6 +261,9 @@ function AnnotationFormOverlayToolOptions({ updateToolState, toolState }) {
       {
           toolState.activeTool === OVERLAY_TOOL.IMAGE && (
           <>
+            <Typography variant="overline">
+              Add image from URL
+            </Typography>
             <Grid container>
               <ImageFormField xs={8} value={toolState.image} onChange={handleImgChange} />
             </Grid>
@@ -271,10 +277,19 @@ function AnnotationFormOverlayToolOptions({ updateToolState, toolState }) {
       }
       {
           toolState.activeTool === 'text' && (
+          <>
+            <Typography variant="overline">
+              Text
+            </Typography>
+            { toolState.text ? (
               <TextField
                 value={toolState.text}
                 fullWidth
               />
+            ) : (
+              <p>Click on canva to add text</p>
+            )}
+          </>
           )
       }
     </div>