title: Resize An Existing Rectangle On Mouse Hover
body: <p>I tried to follow a tutorial and finally came to a solution, almost. Here's the link for stackblitz - <a href="https://stackblitz.com/edit/basic-draw-app-minapa?file=src%2Fapp%2Fcanvas%2Fcanvas.component.ts" rel="nofollow noreferrer">Resize SVG Rectangle</a></p>
  <p>So here's the scenario, a rectangle is drawn using SVG with default perimeters that's working fine. My requirement is to resize the existing rectangle when I hover the mouse on it and if I click in any other section rather than the rectangle, then it should be drawn from scratch. So right now, whatever I do, it starts the drawing from scratch rather than resizing the existing one.</p>
  <p>For a reference, this is what I am trying for resizing only: <a href="https://ibb.co/M1MzLCM" rel="nofollow noreferrer">Resize Rectangle</a></p>
  <p>So these are the events that are attached to the svg element:</p>
  <pre><code>//This section starts drawing rectangle from scratch
  startDrawing(evt: MouseEvent) {
      this.createdShape = {
        type: this.shapeType,
        x: evt.offsetX,
        y: evt.offsetY,
        w: 0,
        h: 0,
    };
  
    this.shapesToDraw.fill(this.createdShape); //This fills with the created shape
  }
  
  //This does the resizing but only when I start drawing a rectangle from scratch, doesn't imply resizing for existing rectangle
  keepDrawing(evt: MouseEvent) {
     this.createdShape.w = evt.offsetX - this.createdShape.x;
     this.createdShape.h = evt.offsetY - this.createdShape.y;
  }
  
  //This stops drawing and sets **createdShape** to null
  stopDrawing() {
     this.createdShape = null;
  }
  </code></pre>
  <p>I am thinking to check if there are any certain conditions to check for resizing as follows:</p>
  <pre><code>private resizeConMeet(evt: MouseEvent) {
      
  }
  </code></pre>
  <p>But I am not sure if there's any way I can do so? Would expect a suggestion or guidance to make it work.</p>