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.

---

Multi-Tab Editor

Overview

The editor supports multiple documents in tabs within the same window. Open several captures or projects simultaneously and switch between them instantly.

Opening Tabs

• New capture — When the active document is blank, it replaces it. Otherwise, it opens in a new tab.
• Open file — Opens in a new tab if a document is already active.
• Blank canvas — Creates a new blank document in a tab.
• Project files — Opens .csnp projects in separate tabs.

Tab Strip

• Appears automatically when more than one document is open.
• Located in the horizontal ruler row to save vertical space.
• Shows document name (or "Untitled" for unsaved documents).
• Dirty indicator — A colored dot appears on tabs with unsaved changes.
• Close button — Each tab has a close button (×).
• Scroll — Mouse wheel scrolls through tabs when many are open.

Tab Limit

• Soft limit: 8 tabs. A warning appears when exceeding this limit.
• Closing tabs beyond the limit returns to normal operation.

Tab Navigation

Behavior

• Single document — Tab strip is hidden, only the canvas is visible.
• Multiple documents — Tab strip appears above the canvas.
• Session restore — Open tabs are remembered between sessions.
• Save prompt — Closing a dirty tab prompts to save changes.

---

Drawing Tools

Navigation Tools

Drawing Tools

Transform Tools

---

Tool Constraints and Modifiers

---

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:

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

Shape Rotation

Selected shapes display a rotation handle (circular arrow) above the bounding box:

• Drag to rotate the shape freely
• Shift snaps rotation to 15° increments
• Rotation cursor appears when hovering the handle

Auto-Selection

• New shapes are automatically selected after drawing
• Undo/Redo restores the previous selection state

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
• Accessible from the editor palette (transform tools)

---

Canvas Resize

Resize Handles

8 cyan handles floating outside image edge:

• Edge handles (4): Extend/trim canvas in one direction
• Corner handles (4): Resize canvas in two directions simultaneously
• 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

---

Transform Operations

Rotation

Flip

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

---

Zoom and Pan

Zoom Controls

Zoom Range

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

Keyboard Shortcuts

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

Keyboard Shortcuts

---

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

PDF Export Options

Copy to Clipboard

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

---

Context Menu

Canvas Right-Click

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

Edit Operations

View Operations

Transform

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