delete selectioned shape on del keypress

src/AnnotationDrawing.js

@@ -76,7 +76,7 @@ class AnnotationDrawing extends Component {
             return;
         }
 
-        console.log('selected shape id', selectedShapeId);
+       
         if (!selectedShapeId) {
             return;
         }
@@ -154,11 +154,14 @@ class AnnotationDrawing extends Component {
                             y: pos.y,
                             width: 0,
                             height: 0,
-                        stroke: this.props.strokeColor,
+                            strokeColor: this.props.strokeColor,
                             strokeWidth: this.props.strokeWidth,
                             fill: this.props.fillColor,
                             id: uuidv4(),
                         },
+                    },() => {
+                        // Add global key press event listener
+                        window.addEventListener('keydown', this.handleKeyPress);
                     });
                     break;
                 case "text":
@@ -173,10 +176,34 @@ class AnnotationDrawing extends Component {
                         id: uuidv4(),
                     };
 
-                this.setState({ newShape: shape }, () => {
+                
+                    this.setState({
+
+                        shapes: [...this.state.shapes, shape],
+                        selectedShape: shape,
+                        selectedShapeId: shape.id,
+                        newShape: shape,
+                        currentShape: shape,
+                    },() => {
                         // Add global key press event listener
                         window.addEventListener('keydown', this.handleKeyPress);
                     });
+                    console.log('text', shape);
+                    break;
+
+
+                case "line":
+                    shape = {
+                        type: 'line',
+                        x: pos.x,
+                        y: pos.y,
+                        with: 10,
+                        height: 10,
+                        fill: this.props.fillColor,
+                        points: [0, 0, 0, 0, 0, 0],
+                        id: uuidv4(),
+                    };
+
                     this.setState({
 
                         shapes: [...this.state.shapes, shape],
@@ -184,9 +211,13 @@ class AnnotationDrawing extends Component {
                         selectedShapeId: shape.id,
                         newShape: shape,
                         currentShape: shape,
+                    },() => {
+                        // Add global key press event listener
+                        window.addEventListener('keydown', this.handleKeyPress);
                     });
-                console.log('text', shape);
                     break;
+
+
                 case "freehand":
 
 
@@ -210,6 +241,9 @@ class AnnotationDrawing extends Component {
                         selectedShapeId: shape.id,
                         newShape: shape,
                         currentShape: shape,
+                    },() => {
+                        // Add global key press event listener
+                        window.addEventListener('keydown', this.handleKeyPress);
                     });
 
                 // other cases
@@ -257,6 +291,20 @@ class AnnotationDrawing extends Component {
             switch (this.props.activeTool) {
                 case 'rectangle':
                 case 'ellipse':
+
+                    // prevent negative radius for ellipse
+
+                    if (this.state.currentShape.type === 'ellipse') {
+                        if (pos.x < this.state.currentShape.x) {
+                            pos.x = this.state.currentShape.x;
+                        }
+                        if (pos.y < this.state.currentShape.y) {
+                            pos.y = this.state.currentShape.y;
+                        }
+                    }
+
+
+
                     this.setState({
                         currentShape: {
                             ...this.state.currentShape,
@@ -266,6 +314,18 @@ class AnnotationDrawing extends Component {
                     });
 
                     break;
+                case "line":
+                    // update ponts 
+
+
+
+
+                    this.setState({
+                        currentShape: {
+                            ...this.state.currentShape,
+                            points: [0, 0, 0, 0, pos.x, pos.y],
+                        },
+                    });
                 case "freehand":
                     this.setState({
                         shapes: this.state.shapes.map(shape => shape.id === this.state.selectedShapeId
@@ -292,11 +352,35 @@ class AnnotationDrawing extends Component {
             if (!this.state.isDrawing) return;
             if (!this.state.currentShape) return;
 
+            switch (this.props.activeTool) {
+
+                case 'rectangle':
+                case 'ellipse':
+
+                    this.setState((prevState) => ({
+                        isDrawing: false,
+                        shapes: [...prevState.shapes, prevState.currentShape],
+                        currentShape: null,
+                    }));
+                    break;
+                case "line":
                     this.setState((prevState) => ({
                         isDrawing: false,
                         shapes: [...prevState.shapes, prevState.currentShape],
                         currentShape: null,
                     }));
+                    break;
+                case "freehand":
+                    this.setState((prevState) => ({
+                        isDrawing: false,
+                        shapes: [...prevState.shapes, prevState.currentShape],
+                        currentShape: null,
+                    }));
+                    break;
+                default:
+
+
+            }
         }
         catch (e) {
             console.log('error', e);

src/shapes/LineNode.js

+import React, { Component, useState } from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+
+import {
+    Stage, Layer, Star, Text, Circle, Rect
+    , Ellipse, Transformer,Shape, Line,
+
+} from 'react-konva';
+
+
+
+
+
+class LineNode extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.shapeRef = React.createRef();
+        this.trRef = React.createRef();
+    }
+
+    componentDidMount() {
+        if (this.trRef.current) {
+            this.trRef.current.nodes([this.shapeRef.current]);
+            this.trRef.current.getLayer().batchDraw();
+        }
+    }
+
+    handleClick = () => {
+        this.props.onShapeClick(this.props.shape);
+
+    };
+
+    render() {
+        const { activeTool } = this.props;
+        const isSelected = this.props.selectedShapeId === this.props.shape.id
+      
+        return (
+            <React.Fragment>
+                <Line
+                    // map props to konva
+                    ref={this.shapeRef}
+                    x={this.props.x || 0}
+                    y={this.props.y || 0}
+                 
+                    points={this.props.points || [0, 0, 0, 0, 100, 100]}
+                    fill={this.props.fill }
+                    stroke={this.props.fill }
+                    strokeWidth={this.props.strokeWidth || 1}
+                    id={this.props._id}
+                    draggable={activeTool === 'cursor' || activeTool === 'edit'}
+                    onClick={this.handleClick}
+
+                    />
+
+                <Transformer ref={this.trRef}
+
+                    visible={activeTool === 'edit' && isSelected}
+                />
+
+            </React.Fragment>
+        );
+    }
+}
+
+
+export default LineNode;
\ No newline at end of file

src/shapes/ParentComponent.js

@@ -8,6 +8,7 @@ import Rectangle from './Rectangle';
 
 import EllipseNode from './EllipseNode';
 import TextNode from './TextNode';
+import LineNode from './LineNode';
 import {
     Stage, Layer, Star, Text, Circle, Rect
     , Ellipse, Transformer,Shape
@@ -183,6 +184,32 @@ class ParentComponent extends React.Component {
                                 />
                             );
                             break;
+                        case 'line':
+                             return (
+                                  <LineNode
+    
+                                        shape={shape}
+                                        selectedShapeId={selid}
+                                        selectedShape={selectedShape}
+                                        onShapeClick={this.handleShapeClick}
+                                        activeTool={this.props.activeTool}
+                                        selected={selected}
+    
+                                        _id={shape.id}
+                                        key={i}
+                                        x={shape.x}
+                                        y={shape.y}
+                                        points={shape.points}
+                                        fill={shape.fill}
+                                        stroke={shape.strokeColor}
+                                        strokeWidth={shape.strokeWidth}
+                                        draggable={this.props.activeTool === 'cursor'}
+                                        onClick={this.props.activeTool === 'cursor' ? () => this.setState({ currentShape: shape }) : null}
+                                        //   onDragEnd={this.handleDragEnd(shape.id)} // Add this line
+                                        onDblClick={this.handleShapeDblClick}
+                                        />   
+                                );
+                        
                     }
                 })}
             </Layer>