feat: add coordinates to preview

[Logon27]

This feature was made in to address issue #289

Added Coordinates to preview. Press P to copy. There is a toggle for the coordinates in the settings. I added a video showing how the feature works. There will likely need to be some revisions to how the canvas is element is referenced. As well as probably some React best practices as this is fairly new to me.

@aarthificial whenever you have time to review, feel free.

(Video is outdated. Will be updated when comments are resolved.)
2023-06-05 19-36-49.webm

[aarthificial]

I'm not a huge fan of adding multiple shortcuts to do one thing.
I'd imagine it working the same way as the color picker, so:

1. Initial State - the coordinates are displayed in the top left, next to a button
   a. Clicking on the button switches to the Sampling State
   b. Pressing v switches to the Sampling State
2. Sampling State
   a. Clicking LMB anywhere on the canvas copies the position.
   b. Clicking ESC cancels sampling.

[Logon27]

I just thought I would add a toggle to turn the coordinates off in case someone did not want to see them. Do you want the coordinates always displayed?

[aarthificial]

Yes, we could also go this way.
If you think hiding the coordinates can be useful then we can add it as a checkbox in the application settings.

[Logon27]

I added the coordinates as a toggle in the settings. I did not make it a select button like the color picker. Currently its just a keybind to copy the coordinates. This is kind of a stretch goal for me if I have the time.

[Logon27]

@aarthificial Couple clarity questions if you want it to be a sampling state instead.

For the sampling state do you want the same EyeDropper selection as the color picker? Or do you want something different?

What svg icon would you like for the button itself?