Fix bug on freehand

src/AnnotationDrawing.js

@@ -12,7 +12,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { OSDReferences } from 'mirador/dist/es/src/plugins/OSDReferences';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { VideosReferences } from 'mirador/dist/es/src/plugins/VideosReferences';
-import ParentComponent from './shapes/ParentComponent';
+import ParentComponent from './KonvaDrawing/shapes/ParentComponent';
 
 /** All the stuff to draw on the canvas */
 
@@ -225,10 +225,8 @@ function AnnotationDrawing(props) {
           setShapes([...shapes, shape]);
           setCurrentShape(shape);
           break;
-
         case 'freehand':
           // Not totally functionnal
-          // TODO Not sure for this one
           setIsDrawing(true);
           shape = {
             fill: props.fillColor,
@@ -245,6 +243,8 @@ function AnnotationDrawing(props) {
             rotation: 0,
             scaleX: 1,
             scaleY: 1,
+            stroke: props.strokeColor,
+            strokeWidth: props.strokeWidth,
             type: 'freehand',
             x: 0,
             y: 0,
@@ -272,7 +272,7 @@ function AnnotationDrawing(props) {
         case 'arrow':
           setIsDrawing(true);
           shape = {
-            fill: props.fillColor || 'red',
+            fill: props.fillColor,
             id: uuidv4(),
             pointerLength: 20,
             pointerWidth: 20,
@@ -280,10 +280,9 @@ function AnnotationDrawing(props) {
             rotation: 0,
             scaleX: 1,
             scaleY: 1,
-            stroke: props.fillColor || 'red',
+            stroke: props.strokeColor,
             type: 'arrow',
           };
-
           setShapes([...shapes, shape]);
           setCurrentShape(shape);
         case 'debug':
@@ -459,7 +458,7 @@ AnnotationDrawing.propTypes = {
 AnnotationDrawing.defaultProps = {
   activeTool: null,
   closed: true,
-  fillColor: null,
+  fillColor: 'red',
   selectedShapeId: null,
   strokeColor: '#00BFFF',
   strokeWidth: 1,

src/KonvaDrawing/shapes/Freehand.js

 import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import {
-    Transformer, Shape, Line,
-    Layer, Group
-} from 'react-konva';
+import { Transformer, Line, Group } from 'react-konva';
 
 /** FreeHand shape displaying */
 function Freehand({
-    activeTool, fill, height, onShapeClick, points, isSelected, shape, stroke, strokeWidth, width, x, y,onTransformEnd, handleDragEnd
+  activeTool, fill, height, onShapeClick, points, isSelected, shape, stroke, strokeWidth, width, x, y, onTransformEnd, handleDragEnd,
 }) {
   // TODO check if selectedShapeId is needed
   const shapeRef = useRef();
@@ -20,22 +17,15 @@ function Freehand({
     }
   }, [isSelected, shape]);
 
-
   /** */
   const handleClick = () => {
-   
     onShapeClick(shape);
   };
 
-   
   return (
-
     <>
       <Group
         ref={shapeRef}
-             
-                // x={ 0}
-                // y={ 0}
         onClick={handleClick}
         onTransformEnd={onTransformEnd}
         scaleX={shape.scaleX}
@@ -46,22 +36,19 @@ function Freehand({
         width={shape.width || 1920}
         height={shape.height || 1080}
         onDragEnd={handleDragEnd}
-            
       >
         {shape.lines.map((line, i) => (
-                   
           <Line
             key={i}
+            fill={shape.fill || 'black'}
             points={line.points}
-                        stroke={line.stroke || 'black'}
+            stroke={shape.stroke || 'black'}
             strokeWidth={15}
             tension={0.5}
             lineCap="round"
             lineJoin="round"
-                       
           />
         ))}
-
       </Group>
       <Transformer
         ref={trRef}

src/KonvaDrawing/shapes/ParentComponent.js

@@ -15,7 +15,7 @@ import ImageShape from './Image';
 
 function ParentComponent({
   shapes, onShapeClick, selectedShapeId, activeTool,
-  scale, width, height,onTransformEnd,handleDragEnd
+  scale, width, height, onTransformEnd, handleDragEnd,
 }) {
   // TODO Simplify these state
   const [selectedShape, setSelectedShape] = useState(null);
@@ -37,8 +37,6 @@ function ParentComponent({
   const handleShapeClick = (shape) => {
     onShapeClick(shape);
     setSelectedShape(shape);
-
-
   };
 
   return (
@@ -47,18 +45,21 @@ function ParentComponent({
       height={height}
       scaleX={scale}
       scaleY={scale}
-
     >
       {shapes.map((shape, i) => {
-
         const isSelected = selectedShapeId === shape.id;
         switch (shape.type) {
           case 'rectangle':
             return (
               <Rectangle
                 {...{
-                  ...shape, activeTool, isSelected, onShapeClick: handleShapeClick, shape,
-                  onTransformEnd,handleDragEnd
+                  ...shape,
+                  activeTool,
+                  isSelected,
+                  onShapeClick: handleShapeClick,
+                  shape,
+                  onTransformEnd,
+                  handleDragEnd,
                 }}
                 key={i}
               />
@@ -67,8 +68,13 @@ function ParentComponent({
             return (
               <TextNode
                 {...{
-                  ...shape, activeTool, isSelected, onShapeClick: handleShapeClick, shape,
-                  onTransformEnd,handleDragEnd
+                  ...shape,
+                  activeTool,
+                  isSelected,
+                  onShapeClick: handleShapeClick,
+                  shape,
+                  onTransformEnd,
+                  handleDragEnd,
                 }}
                 key={i}
               />
@@ -77,8 +83,13 @@ function ParentComponent({
             return (
               <EllipseNode
                 {...{
-                  ...shape, activeTool, isSelected, onShapeClick: handleShapeClick, shape,
-                  onTransformEnd,handleDragEnd
+                  ...shape,
+                  activeTool,
+                  isSelected,
+                  onShapeClick: handleShapeClick,
+                  shape,
+                  onTransformEnd,
+                  handleDragEnd,
                 }}
                 key={i}
               />
@@ -87,8 +98,13 @@ function ParentComponent({
             return (
               <Freehand
                 {...{
-                  ...shape, activeTool, isSelected, onShapeClick: handleShapeClick, shape,
-                  onTransformEnd,handleDragEnd
+                  ...shape,
+                  activeTool,
+                  isSelected,
+                  onShapeClick: handleShapeClick,
+                  shape,
+                  onTransformEnd,
+                  handleDragEnd,
                 }}
                 key={i}
               />
@@ -97,13 +113,17 @@ function ParentComponent({
             return (
               <Polygon
                 {...{
-                  ...shape, activeTool, isSelected, onShapeClick: handleShapeClick, shape,
-                  onTransformEnd,handleDragEnd
+                  ...shape,
+                  activeTool,
+                  isSelected,
+                  onShapeClick: handleShapeClick,
+                  shape,
+                  onTransformEnd,
+                  handleDragEnd,
                 }}
                 key={i}
               />
             );
-
           case 'arrow':
             return (
               <ArrowNode
@@ -113,19 +133,23 @@ function ParentComponent({
                   isSelected,
                   onShapeClick: handleShapeClick,
                   shape,
-                     onTransformEnd,handleDragEnd
-
+                  onTransformEnd,
+                  handleDragEnd,
                 }}
                 key={i}
               />
             );
-
           case 'image':
             return (
               <ImageShape
                 {...{
-                  ...shape, activeTool, isSelected, onShapeClick: handleShapeClick, shape,
-                  onTransformEnd,handleDragEnd,
+                  ...shape,
+                  activeTool,
+                  isSelected,
+                  onShapeClick: handleShapeClick,
+                  shape,
+                  onTransformEnd,
+                  handleDragEnd,
                   src: shape.src,
                 }}
                 key={i}