Merge branch 'wip-konvas-2' into mui5-tetras-main-stable

# Conflicts:
#	src/AnnotationDrawing.js

src/AnnotationDrawing.js

@@ -27,7 +27,7 @@ function AnnotationDrawing(props) {
 
   /** Debug function facility */
   const debug = (command) => {
-    if(config.debugMode) {
+    // if(config.debugMode) {
       console.debug('***************************');
       console.debug(command);
       console.debug('shapes', shapes);
@@ -36,7 +36,7 @@ function AnnotationDrawing(props) {
       console.debug('isDrawing', isDrawing);
       console.debug('props.activeTool', props.activeTool);
       console.debug('-----------------------------');
-    }
+    // }
   };
 
   /** */
@@ -100,9 +100,14 @@ 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);
+      updateCurrentShapeInShapes();
 
-      window.removeEventListener('keydown', handleKeyPress);
+
+
+      //  window.removeEventListener('keydown', handleKeyPress);
       return;
     }
 
@@ -148,6 +153,10 @@ function AnnotationDrawing(props) {
   const handleMouseDown = (e) => {
 
     try {
+
+
+
+
       const pos = e.target.getStage().getPointerPosition();
       const relativePos = e.target.getStage().getRelativePointerPosition();
       //  debug('mouse down debut');
@@ -216,20 +225,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,
@@ -253,6 +263,7 @@ function AnnotationDrawing(props) {
         case "arrow":
 
           setIsDrawing(true);
+
           shape = {
             fill: props.fillColor || "red",
             stroke: props.fillColor || "red",
@@ -260,9 +271,11 @@ function AnnotationDrawing(props) {
             pointerWidth: 20,
             id: uuidv4(),
             points: [pos.x, pos.y, pos.x, pos.y],
-              type: 'arrow',
+            type: 'arrow'
+
 
           };
+
           setShapes([...shapes, shape]);
           setCurrentShape(shape);
 
@@ -334,18 +347,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();
 
@@ -367,6 +378,9 @@ function AnnotationDrawing(props) {
           updateCurrentShapeInShapes();
           break;
 
+
+          break;
+
         default:
           break;
       }
@@ -393,7 +407,6 @@ function AnnotationDrawing(props) {
       // updateCurrentShapeInShapes();
 
 
-          //setCurrentShape(null);
 
 
     } catch (error) {

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {Transformer, Shape, Line} from 'react-konva';
 
 /** FreeHand shape displaying */
-function FreeHand({
+function Polygon({
   activeTool, fill, height, onShapeClick, points, isSelected, shape, stroke, strokeWidth, width, x, y,
 }) {
   // TODO check if selectedShapeId is needed
@@ -25,12 +25,13 @@ function FreeHand({
   };
 
   return (
+  
     <>
       <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"
       />
 
@@ -49,7 +51,7 @@ function FreeHand({
   );
 }
 
-FreeHand.propTypes = {
+Polygon.propTypes = {
   activeTool: PropTypes.string.isRequired,
   fill: PropTypes.string,
   height: PropTypes.number,
@@ -61,7 +63,7 @@ FreeHand.propTypes = {
   width: PropTypes.number,
 };
 
-FreeHand.defaultProps = {
+Polygon.defaultProps = {
   fill: 'red',
   height: 1080,
   points: [0, 0, 100, 0, 100, 100],
@@ -70,4 +72,4 @@ FreeHand.defaultProps = {
   width: 1920,
 };
 
-export default FreeHand;
+export default Polygon;