Skip to content

Annotation Editor

Jump to bottom
CyberGems edited this page Aug 31, 2026 · 2 revisions

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

Action Description
Click tab Switch to that document
Close button Close the tab (prompts to save if dirty)
Mouse wheel Scroll tab strip when many tabs are open
Ctrl + W Close active document

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

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

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

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 / tab

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

CyberSnap is free and open source software licensed under GPLv3. Made by CyberGems.

CyberSnap Wiki

Home

Changelog · Donate · GitHub

Clone this wiki locally