wa-dev-tools/EDITOR-DOC.md

Mini Photoshop — Browser Image Editor

Overview

Client-side image editor tool at /editor on images.wadevelop.ru. All processing via Canvas API — images never leave the browser.

File

• /public/editor.html — standalone page (~600 lines)

Layout

• Sidebar (56px) — standard site navigation
• Toolbar (44px top) — Open, Export, drawing tools, transforms, undo/redo, color, zoom
• Tool Options Bar (36px, contextual) — appears when tool selected
• Canvas Viewport (center) — checkerboard bg for transparency, 3 stacked canvases
• Status Bar (28px bottom) — dimensions, zoom%, cursor coords, history position

Canvas Architecture

3 overlaid <canvas> elements:

1. canvasMain — final image
2. canvasOverlay — preview of drawing/crop/filters (cleared each frame)
3. canvasUI — cursors, selection frames

Zoom/pan via CSS transform: translate() scale() on wrapper (GPU-accelerated).

Undo/Redo

• History as PNG blobs (canvas.toBlob() → URL.createObjectURL())
• Max 30 snapshots
• Ctrl+Z / Ctrl+Shift+Z

Image Loading

• File input (Open button)
• Drag & drop on viewport
• Paste from clipboard (Ctrl+V)
• Before loading — dropzone with hint, toolbar disabled

Tools

Crop

• Presets: Free, 1:1, 4:3, 16:9, 3:2, 2:3, 9:16
• 8 drag handles (corners + edges)
• Semi-transparent overlay outside crop, rule of thirds
• Apply / Cancel buttons

Resize

• Width/height in px, aspect ratio lock (on by default)
• imageSmoothingQuality = 'high'
• Max 16384x16384

Rotate 90 CW/CCW

• Two buttons in toolbar
• Via temp canvas with ctx.translate() + ctx.rotate()

Flip H/V

• Two buttons, via ctx.scale(-1, 1) / ctx.scale(1, -1)

Brightness / Contrast / Saturation

• Three sliders -100...+100
• Preview via CSS filter on overlay (instant)
• Commit via pixel-level ImageData processing
• Apply / Cancel

Brush

• Sliders: size 1-100px, opacity 0-100%
• lineCap: 'round', lineJoin: 'round'
• Drawing on overlay → commit to main on pointerup

Eraser

• Like brush but globalCompositeOperation: 'destination-out'
• Draws directly on main canvas

Line, Rectangle, Circle, Arrow

• Stroke width 1-20px, fill toggle (rect/circle)
• Shift for snap to 45 degrees (line/arrow) and square/circle (rect/circle)
• Arrow: filled triangle arrowhead

Text

• Font select (sans-serif, serif, monospace, Manrope, JetBrains Mono)
• Size 8-200px, Bold, Italic, Color
• Click on canvas → <textarea> at position → Ctrl+Enter to commit
• ctx.fillText() with multiline text support

Color Picker (Eyedropper)

• Click → getImageData(x, y, 1, 1) → hex → sets as foreground color
• Color chosen via native <input type="color">

Export

• Formats: PNG, JPEG, WebP
• Quality 1-100 (for JPEG/WebP)
• Filename (pre-filled from original)
• Warning for JPEG + transparency
• canvas.toBlob() → download via <a download>

Keyboard Shortcuts

Shortcut	Action
Ctrl+O	Open
Ctrl+S	Export
Ctrl+Z	Undo
Ctrl+Shift+Z	Redo
B	Brush
E	Eraser
T	Text
C	Crop
L	Line
U	Rectangle
O	Ellipse
A	Arrow
I	Eyedropper
[ / ]	Brush size +/-
Space+drag	Pan
Ctrl+scroll	Zoom
Ctrl+0	Fit
Ctrl+1	100%
Escape	Cancel