polygon + get latest shape after delete

src/AnnotationDrawing.js

@@ -100,9 +100,12 @@ function AnnotationDrawing(props) {
 
       const newShapes = shapes.filter((shape) => shape.id !== currentShape.id);
       setShapes(newShapes);
-      setCurrentShape(null);
+      // get latest shape in the list
+      const newCurrentShape = newShapes[newShapes.length - 1];
+      setCurrentShape(newShapes.length > 0 ? newCurrentShape : null);
 
-      window.removeEventListener('keydown', handleKeyPress);
+
+    //  window.removeEventListener('keydown', handleKeyPress);
       return;
     }
 
@@ -220,20 +223,21 @@ function AnnotationDrawing(props) {
       //    window.addEventListener('keydown', handleKeyPress);
           break;
 
-        case 'freehand':
+        case 'polygon':
           setIsDrawing(true);
           // eslint-disable-next-line no-case-declarations
-          const tool = 'pen';
+      
           shape = {
             fill: props.fillColor,
-            height: 10,
+            stroke: props.strokeColor,
+   
             id: uuidv4(),
-            lines: [pos.x, pos.y],
-            points: [0, 0, 0, 0, 0, 0],
-            type: 'freehand',
-            width: 10,
-            x: pos.x,
-            y: pos.y,
+           
+            points: [pos.x, pos.y],
+            type: 'polygon',
+            
+            x: 0,
+            y: 0,
           };
           // shape = {
           //   fill: props.fillColor,
@@ -341,18 +345,16 @@ function AnnotationDrawing(props) {
           updateCurrentShapeInShapes();
 
             break;
-        case 'freehand':
+        case 'polygon':
 
         
-        const freehandShape = {...currentShape}
+        const polygonShape = {...currentShape}
 
-        freehandShape.points.push(pos.x );
-        freehandShape.points.push(pos.y );
+        polygonShape.points[2] = pos.x;
+        polygonShape.points[3] = pos.y;
+
+          setCurrentShape(polygonShape);
          
-          setCurrentShape(freehandShape);
-          // setShapes(shapes.map((shape) => (shape.id === currentShape.id
-          //   ? { ...shape, points: [...shape.points, e.evt.clientX, e.evt.clientY] }
-          //   : shape)));
 
           updateCurrentShapeInShapes();
 

src/shapes/ParentComponent.js

@@ -2,12 +2,13 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Layer } from 'react-konva';
 
-import FreeHand from './FreeHand';
+
 import Rectangle from './Rectangle';
 import EllipseNode from './EllipseNode';
 import TextNode from './TextNode';
 import LineNode from './LineNode';
 import ArrowNode from './ArrowNode';
+import Polygon from './Polygon';
 
 /** Loads Konva and display in function of their type */
 
@@ -80,9 +81,9 @@ function ParentComponent({
                 key={i}
               />
             );
-          case 'line':
+          case 'polygon':
             return (
-              <LineNode
+              <Polygon
                 {...{
                   ...shape, activeTool, isSelected, onShapeClick: handleShapeClick, shape,
                 }}

src/shapes/FreeHand.js → src/shapes/Polygon.js

@@ -25,12 +25,13 @@ function FreeHand({
   };
 
   return (
+    console.log("FreeHand shape", shape),
     <>
       <Line
           ref={shapeRef}
           id={shape.id}
-          points={shape.lines}
-          stroke="#df4b26"
+          points={shape.points}
+          stroke={shape.stroke || 'black'}
           strokeWidth={5}
           tension={0.5}
           lineCap="round"
@@ -38,6 +39,7 @@ function FreeHand({
           closed={false}
           onClick={handleClick}
           fill={fill || 'red'}
+          draggable={activeTool === 'cursor' || activeTool === 'edit'}
           globalCompositeOperation="source-over"
       />