New Image annotation tool

This is simple tool for quick markups / annotations, when loading whole photoshop or excalidraw instance is too much for such a trivial task. I wanted something what would allow me to quickly take do some scribbles over screenshots/ photos from all the lectures I am currently taking. The idea of being able to Paste image/screenshot into the note -> open it inside Obsidian without leaving the context/ note/ or the line your are in -> do some scribbles -> save image back into then note -> continue with the lecture. All without leaving Obsidian, swapping windows, copy pasting, exporting to over applications etc.

• This provides and ability to draw and add text directly on an image.
• Draw or add text inside the image or outside the image. You can zoom out to an almost infinite canvas size. Anything what goes outside image bounds will be saved back into original image.
• Any transparency is always preserved.
• Any changes are permanent and are saved back into the original image.
• Saving flattens any annotation into the image.

https://github.com/user-attachments/assets/19660874-7a92-4784-b3d1-d38135422b8b

To use:

Right click on any image and select "Annotate Image" from the context menu to open it in a new window.

To add annotation:

Simply use 1 of 3 tools: Brush (B), freehand Arrow (A), Text (T)

To modify annotation:

• Selection Tool. Active by default. Deselect active tools (Brush, Arrow, or Text) via shortcuts (B, A, T) or buttons to reactivate the Selection Tool. Use the Selection Tool to move or adjust elements.
• Changing Colors. Select an element and choose a color from the swatches or use the color picker. The color picker allows HEX, HSL, or RGB value input. 6 Dominant colors are automatically calculated, then 6 Complimentary colors at 180 degrees are provided beneath it.

• Editing text: Double-click anywhere to create a new text element. Double-click an existing text element to edit it. Text automatically sharpens when scaled to ensure clarity.

To delete:

• Select an element and press either: backspace or delete key.
• To delete all elements. Select all (CMD+A) elements and press either: backspace or delete key. Or use delete button provided.

To navigate:

• Scroll Wheel: Zoom in and out.
• Spacebar: Pan around the canvas.

Notes:

• Saved annotations are flattened into the image and cannot be modified later.
• This is not a replacement for Excalidraw.
• Dropping images into image annotation currently is not supported.
• Highlighting with multiply or linear blending modes currently is not supported.
• Bringing layers to the front or back is only manual, and follows order of creation. I might add some easy to use button later on.
• Arrow tool will automatically create arrowhead in the direction the stroke was done. Smoothing in certain cases might be too strong, and I might look into modifying/adjusting it .
• Creating custom shapes, rectangles, circles is not currently supported. Although I might add some custom background for Text elements, to make separation of text vs background easier (and much faster to create).
• If anyone is good with UI/UX, please help me out 🙏🥲