Annotation Editor

Annotation Editor

The Annotation Editor is a full-featured image editor that opens after each capture (configurable) or can be launched independently. It provides 17 drawing tools, text formatting, color management, undo/redo, and multiple export formats.

---

Overview

The editor is a borderless window with custom chrome, hosting a canvas control with a left-side toolbar and bottom status bar.

Opening the editor:

• Automatically after capture (configurable)
• Via hotkey (configurable)
• From the Gallery (double-click any capture)
• From the Capture Preview (click Edit)
• Command line: CyberSnap.exe --editor

Single Instance

Only one editor window can be open at a time. Opening a new capture in the editor prompts to save changes before replacing the content.

---

Drawing Tools

Navigation Tools

Tool	Description
Pan	Drag to pan the canvas
Move (Pick)	Select, move, and resize annotations
Eraser	Click annotations to delete them

Drawing Tools

Tool	Description	Constraints
Draw	Freehand stroke	—
Rectangle	Draw rectangles and squares	Shift = square
Circle	Draw ellipses and circles	Shift = circle
Line	Draw straight lines	Shift = 45° snap
Arrow	Draw arrows with head	Shift = 45° snap
Curved Arrow	Draw Bezier-curve arrows	—
Text	Add text annotations with formatting	—
Highlight	Semi-transparent highlight overlay	—
Blur	Pixelate/blur regions for privacy	—
Step Number	Auto-incrementing numbered badges	—
Magnifier	Loupe lens showing 3× zoom	—
Emoji	Place emoji glyphs from picker	Scroll to resize

Transform Tools

Tool	Description
Cut Out	Remove horizontal or vertical strips
Crop	Crop to a rectangular region
Rotate 90° CW	Rotate canvas clockwise
Rotate 90° CCW	Rotate canvas counter-clockwise
Flip Vertical	Flip canvas vertically
Flip Horizontal	Flip canvas horizontally

---

Tool Constraints and Modifiers

Modifier	Effect
Shift (hold)	Constrain proportions (square/circle), snap angles (45°)
Space (hold)	Temporary Pan from any tool
Enter	Confirm Crop/Cut Out operation
Escape	Cancel current operation, deselect tool
Mouse wheel	Adjust size (Emoji) or zoom

---

Color System

Preset Palette

11 preset colors:

• Cyan, Blue, Purple, Red, Orange, Yellow, Green, White, Pink, Gray, Black

Custom Color

• 12th button opens the Color Picker Flyout
• Persists custom color to settings
• Click without custom color → opens picker
• Click with custom color → applies it directly

Cursor Color Chip

A floating chip near the cursor shows the current tool color and stroke width. Visible for: Draw, Arrow, Curved Arrow, Line, Rectangle, Circle, Highlight.

---

Stroke Width

Preset Widths

5 stroke widths: 2, 3, 4, 6, 10 points

Proportional Scaling

Annotations scale proportionally with canvas size relative to a 1280px standard width. Larger images automatically use thicker strokes for visual consistency.

---

Text Tool

Floating Formatting Toolbar

A toolbar appears above the text being edited with:

Button	Function
B	Bold toggle
I	Italic toggle
Stroke	Text outline toggle
Shadow	Drop shadow toggle
Background	Background chip toggle
Font	Font family dropdown
−	Decrease font size
+	Increase font size
Grip	Drag to move text box
Align L	Left alignment
Align C	Center alignment
Align R	Right alignment

Font Dropdown

• System fonts + favorites + recents
• 12 visible items, scrollable
• Star column to toggle favorites
• Persists recent and favorite fonts to settings

Inline Text Editing

• Multiline text box with AcceptsReturn
• Enter commits text; Shift+Enter inserts newline
• Escape cancels editing
• Double-click word selection
• Corner handles resize font size while dragging
• Mouse wheel adjusts font size when editing

Text Style Persistence

Text style settings persist between annotations:

• Bold (default: true), Italic (default: false)
• Stroke (default: true), Shadow (default: true)
• Background (default: false)
• Font size (default: 24), Font family (default: Segoe UI)
• Font size range: 10–120

---

Selection System

Move Tool

• Click an annotation to select it (surface-scoped, not hollow interior)
• Drag to move selected annotation
• 8 resize handles: 4 corners + 4 edges
• Center knob for move-only items

Marquee Selection

Click-drag on empty space for rubber-band rectangle selection.

Multi-Selection

• Ctrl+Click to toggle items in multi-selection
• Group drag moves all selected items
• Sticky banner shows count: "{N} objects selected"

Select All

• Ctrl+A selects all annotations
• Double-click in Pick mode selects all

---

Blur Tool

Pixelation-based blur for obscuring sensitive information:

• Downscales region to blocks (10px), then upscales with bilinear interpolation
• Renders against clean base bitmap (ignores other annotations)
• Uses scratch buffer for performance

---

Step Number Tool

Auto-incrementing numbered badges:

• Next number = max existing number + 1
• Circular badge with shadow, inner edge, and contrast text
• Ghost preview (60% opacity) follows cursor before placement

---

Magnifier Tool

Loupe lens showing magnified detail:

• 3× zoom factor
• 50px source region sampled
• Circular lens with nearest-neighbor interpolation (crisp pixels)
• Crosshair at center
• Auto-positioning: flips to opposite side if near image edge
• 65% opacity ghost preview during hover

---

Emoji Tool

Emoji Picker Popup

• Search box filters emoji catalog by name
• Owner-drawn grid (8 columns × N rows, 40px cells)
• Scrollable with mouse wheel
• Keyboard: Escape closes, Space initiates pan
• 360×384px popup, positioned near tool button

Emoji Placement

• Mouse wheel adjusts size (16–128px range)
• Ghost preview at 60% opacity follows cursor
• Placed at click position with scaled bitmap size

---

Crop Tool

Interaction

• 8 crop handles: 4 corners (L-shaped) + 4 edge midpoints (pill-shaped)
• Dark overlay outside crop region
• Dashed cyan border around crop area
• Drag from empty space to create new crop rect

Confirmation

• Enter key confirms crop
• Double-click inside crop confirms
• Leaving Crop tool confirms
• Escape or right-click cancels

---

Cut Out Tool

Removes horizontal or vertical strips from the image:

• Auto-axis detection based on drag direction
• Shift locks axis
• Dark overlay on strip to remove
• Cyan border and size badge
• Confirmed/abandoned like Crop

---

Canvas Resize

Resize Handles

8 amber handles floating outside image edge:

• Default: extend/trim canvas (anchor opposite edge)
• ResizeHandlesScaleContent: scale content instead
• Shift at corner: toggle aspect ratio keep/break

Interaction

• Confirmation dialog before applying
• Live size badge shows dimensions during drag

Limits

Limit	Value
Minimum	16 × 16 px
Maximum	32768 × 32768 px

---

Transform Operations

Rotation

Operation	Description
Rotate 90° CW	Rotate canvas clockwise
Rotate 90° CCW	Rotate canvas counter-clockwise
Rotate 180°	Flip both axes

Flip

Operation	Description
Flip Horizontal	Mirror left-right
Flip Vertical	Mirror top-bottom

⚠️ Transforms flatten annotations into the bitmap (with confirmation dialog).

---

Zoom and Pan

Zoom Controls

Control	Action
Zoom in	Increase zoom by 1.15× per click
Zoom out	Decrease zoom by 1.15× per click
Fit to window	Auto-scale to fit viewport
Actual size	1:1 pixel mapping (100%)
Zoom percentage	Click to cycle presets

Zoom Range

• Minimum: 20%
• Maximum: 800%
• Step: 1.15× per click or mouse wheel notch

Keyboard Shortcuts

Shortcut	Action
Ctrl + Plus	Zoom in
Ctrl + Minus	Zoom out
Ctrl + 0	Fit to window
Ctrl + 1	Actual size
Mouse wheel	Zoom in/out
Space + drag	Temporary pan

Pan

• Click and drag with Pan tool to move the canvas
• Scroll bars appear when content exceeds viewport

---

Undo/Redo

Architecture

• Command pattern with IEditCommand (Apply()/Revert())
• Two stacks: undo and redo
• Configurable history limit (1–200 steps, default 100)
• Maximum 200 annotations per canvas

Command Types

Command	Description
AddAnnotationCommand	Add new annotation
DeleteAnnotationCommand	Remove annotation
ReplaceAnnotationCommand	Replace annotation
TransformAnnotationCommand	Move/resize annotation
TransformMultipleAnnotationsCommand	Move/resize multiple
DeleteMultipleAnnotationsCommand	Delete multiple
AddMultipleAnnotationsCommand	Add multiple
CropCommand	Crop canvas
CutOutCommand	Cut out strips
ResizeCanvasCommand	Resize canvas
TransformCanvasCommand	Rotate/flip canvas
PasteImageCommand	Paste image
EraseCommand	Eraser tool

Keyboard Shortcuts

Shortcut	Action
Ctrl + Z	Undo
Ctrl + Y	Redo
Ctrl + Shift + Z	Redo (alternative)

---

Export and Save

Project Format (.csnp)

Saves the complete editable project:

• Base bitmap + all annotations + guides
• Preserves editability of all vector elements
• Open and continue editing later

Image Export

Format	Extension	Description
PNG	.png	Lossless compression, best quality
JPEG	.jpg	Adjustable quality, smaller files
PDF	.pdf	Document export with page options

PDF Export Options

Option	Choices
Page size	Fit, A4, Legal, A3, Letter
Orientation	Portrait, Landscape
Margins	Configurable (cm)
Image layout	Fit to page, 1:1 draw
Span mode	Tall images sliced across pages
Metadata	Title, Author, Tags

Copy to Clipboard

Renders the final bitmap and copies to clipboard, including saved file path reference.

---

Context Menu

Canvas Right-Click

Menu Item	Action
Open image...	Open an image file
Paste	Paste from clipboard
Save project...	Save .csnp project
Resize canvas...	Open resize dialog
Transform → Rotate 90° CW/CCW, 180°, Flip H/V	Canvas transforms
Fit to window	Zoom to fit
Reset zoom	Return to 100%
Undo / Redo	History operations
Exit	Close editor

Tool Deselect

Right-click on canvas deselects the current tool back to Move and shows "Tool deselected" banner.

---

Status Bar

Left Side

• Hint area with lightbulb icon
• Dynamic text based on current tool/state
• Hidden when window width < 950px

Right Side

• Coordinates display — X, Y in image space
• Zoom controls — Slider (20–800%), percentage label, reset, fit
• Toggle switches — Auto-fit on load, pan mode lock

---

Top Bar

Title Bar

• Brand area: Editor icon + "CyberSnap" title
• Filename display with LED status indicator:
  • Amber — Unsaved changes
  • Blue — New canvas (untitled)
  • Green — Saved
• Window controls: Close, Maximize/Restore, Minimize
• Menu (burger), Donate (heart)

Command Bar

• Undo / Redo
• Gallery — Open history window
• Capture — Take new screenshot
• New / Open / Save
• Copy / Paste
• Export split-button — Main + chevron menu (PNG/JPEG/PDF)
• Share split-button — Main + chevron (providers)

---

Welcome Overlay

When the editor opens with a blank canvas:

• Centered card with multi-layered drop shadow
• Icon: Picture frame with mountain artwork, spark badge
• Title: "Drop an image or project"
• Hint: "Double-click · drag and drop"
• 4 action chips: New canvas, Open, Paste, Capture
• Drag-over state with highlighted border

---

Guide Lines

• Horizontal and vertical dashed cyan lines with shadow
• Hover highlight (brighter, thicker)
• Drag from rulers to create
• Remove by dragging off-canvas
• Controlled by EditorShowRulers setting

---

Keyboard Shortcuts

File Operations

Shortcut	Action
Ctrl + N	New canvas
Ctrl + O	Open file
Ctrl + S	Save project
Ctrl + Shift + S	Save as...
Ctrl + Shift + U	Share/upload
Ctrl + W	Close document

Edit Operations

Shortcut	Action
Ctrl + C	Copy to clipboard
Ctrl + V	Paste image
Ctrl + A	Select all
Ctrl + D	Duplicate selection
Delete	Delete selected
Escape	Deselect tool / cancel

View Operations

Shortcut	Action
Ctrl + Plus	Zoom in
Ctrl + Minus	Zoom out
Ctrl + 0	Fit to window
Ctrl + 1	Actual size
Mouse wheel	Zoom in/out

Transform

Shortcut	Action
Ctrl + Z	Undo
Ctrl + Y	Redo
Ctrl + Shift + Z	Redo (alternative)

All tools have configurable hotkeys.

---

Drag and Drop

Drag image files onto any part of the editor to open them. Supports the same formats as the Open dialog.

---

Settings Reference

Setting	Location	Description
Auto-open after capture	Settings → Capture	Launch editor automatically
Fit to window on open	Settings → Editor	Auto-zoom to fit canvas
Show rulers	Settings → Editor	Display canvas rulers
Show coordinates	Settings → Editor	Display cursor position
Show hints	Settings → Editor	Show contextual tooltips
Show banners	Settings → Editor	Show notification banners
Auto-crop controls	Settings → Editor	Auto-crop UI controls
Show resize handles	Settings → Editor	Display canvas resize handles
Resize handles scale content	Settings → Editor	Scale vs. extend on resize
Pan mode lock objects	Settings → Editor	Lock objects in pan mode
Undo limit	Settings → Editor	History depth (1–200)
Show scrollbars	Settings → Editor	Custom scrollbar overlays
Tool color	Settings → Editor	Default annotation color
Stroke width	Settings → Editor	Default stroke width
Text font size	Settings → Editor	Default text size