research.txt

Requirements:
- Image Upload: Users can upload images from their local machine.
- Zoom Functionality: Users can zoom in or zoom out on the uploaded image to view details or get an overview.
- Tag Creation: Users can create tags on specific areas of the image using their mouse.
- Visual Highlighting: When the user releases the mouse, the application highlights the tagged area and creates a box on the screen where the user dragged the mouse.

Research:

Zoom-in and Zoom-out
1. How to zoom-in the image on button click?
Two ways of zooming in and out the image:
    - Change the width and height of the image (in react I have to update the state of the element)
    - Use Transform:scale()

Zooming in and out using width and height property:
Important notes:
If I use (image.style.width), JS will set it as inline styles which is not a good practice. The second issue with this approch is that I only get the value of the styles that I myself sets manually on the element. For example: I set image.style.width and store the value in a variable. But, if I want to get or store image.style.height I can not do that. The reason is that I never set the height of the element using image.style.height. ele.style.cssProperty only works for inline styles. I will not be able to access the value of any styles coming from a class, from a stylesheet or element's own style. 

I have to add the zoom factor to the current width and height of the image and I can do it by following method:
- use getComputedStyle(element.property) function
- In react to change the width and height of the element I have to update the state so the DOM is manipulated and I can see the changes
- upadat the height and width of the canvas as well so it covers the full image

- use offsetHeight for images to get the height. offsetHeight ensures that we get the accurate rendered height of the image

2. How to create a selection on an image, which HTML tag to use?
- Let's first create a simple static box on the image, I will make it dynamic later
- Create two components:
    1. TagList: renders TagItem for each tag in the provided tags' array
    2. TagItem: renders a tag created by the user

- Tags Array Structure:
    [ 
        {
            id: '',
            description: '',
            xPosition: '',
            yPosition: '',
            width: '',
            height: ''
        }
    ]

- What do we need to show a static box on the specific area of the screen?
https://www.geeksforgeeks.org/how-to-position-a-div-at-specific-coordinates/

- Working with canvas:
https://www.programonaut.com/how-to-draw-on-an-html-canvas-with-a-mouse/
https://medium.com/web-dev-survey-from-kyoto/how-to-use-html-canvas-with-react-hooks-web-dev-survey-from-kyoto-e633812023b1

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

https://stackoverflow.com/questions/74376189/how-to-show-a-rectangle-while-drawing-it-on-mousemove-html-canvas

4. Making a selection with mouse
- issue: rect() not create rectangle as per defined dimension
    <canvas
      ref={canvas}
      id="canvas"
      style={{
        width: width,
        height: height,
      }} 
      className={`${styles.canvas}`}
      onMouseDown={createTag}
      onMouseUp={saveTag}
    ></canvas> -> wrong way of defining width and height of the canvas (may result destortion)

    RIGHT WAY:
    <canvas
      ref={canvas}
      id="canvas"
      width={width}
      height={height}
      className={`${styles.canvas}`}
      onMouseDown={createTag}
      onMouseUp={saveTag}
    ></canvas>

5. Drawing a rectangle on mouse events
To create a rectangle on mouse event we store the mouse position during mouse down event and draw the rectangle during mouse up event

- How to get the mouse position relative to an element (i.e image-container or maybe our canvas)
Use getBoundingClientRect() => It is a method available on DOM elements in JS, and it returns the size of an element and its position relative to the viewport (the visible portion of the webpage). It provides information about the element's position, dimensions, and spacing relative to the viewport edges.

It returns the following properties:
x, y, right, bottom, width, height

visual diagram: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

5. Adding Name on a tag
- On Mouse up -> show a input field that will take an input from the user as description of the tag and saves it in the respective object.
- The description is then displayed on the right sidearea  

- I am thinking to create a global state to check when the user has finished drawing, isDrawing is false. When the user finished drawing and isDrawing is false then we will show the input. Let's call this the edit mode. So, when the user is in the edit mode; he can not create a new tag until it names the current one.

- Using context API to manage state globally

- I am not able to update the state of a context inside another context file. Error: Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. You can only call Hooks at the top level of your React function.   

- using a different approch to update the state of the context without using reducer function (using useState hook)

- isDrawing state -> when the user is drawing on the canvas
- isEditing state -> when the user has finished drawing and adding description of the tag 

6. Zoom in & out tags as well?
- Lets try adding the zoom factor to the width and height of the tag (not working)
- We have to change the pixels values that we are storing inside our tag object into percentage (not working)

- Approach 2:
  - Calculate Scale factor
  - Repositioning
  - Resizing

- Mistake: Zoom in and out was working but was not pixel perfect...
- Reason -> Because I was using addition and subtraction to zoom in and out the image and canvas and * & / to zoom in-out the tags. This results in slightly miscalculated x, y, w, h. Now I am only using * and / to Zoom in and out