Skip to content

feat: overlays, labels, GIF export, undo/redo, and sidebar UX - #13

Merged
CodeWithDennis merged 9 commits into
mainfrom
feat/overlay-per-side-sidebars
Jul 28, 2026
Merged

feat: overlays, labels, GIF export, undo/redo, and sidebar UX#13
CodeWithDennis merged 9 commits into
mainfrom
feat/overlay-per-side-sidebars

Conversation

@CodeWithDennis

@CodeWithDennis CodeWithDennis commented Jul 27, 2026

Copy link
Copy Markdown
Owner

Summary

Expands Pairframe composition, export, and editing UX: overlays, per-side layers, per-image labels, collapsible sidebars with dirty-only reset, animated GIF export, optional easing / hold, and undo/redo for settings.

New features

Overlay (pattern marks only)

  • Overlay panel: none / dots / grid / stripes / diagonal / chevron / noise
  • Painted after images, before labels
  • Color, opacity, density — no solid base fill (legacy solidnone)

Per-side background & overlay

  • Independent Per side toggles → A | B editors
  • Enabling copies A into B; split uses the split mask; overlap uses a 50/50 divide
  • Default remains one shared full-canvas layer; presets persist both modes

Per-image labels

  • Image A, Image B, and optional Badge
  • 9-point presets (TL…BR) + custom X/Y % on the content canvas
  • Labels stay fixed when split position changes
  • Legacy top/middle/bottom presets migrate automatically

Sidebar UX

  • Collapsible groups with scrollable panels
  • Edge-to-edge layout; collapsed tint; border under every group (including the last)
  • Reset icon per group — shown only when that group differs from defaults
  • Open state in localStorage (pairframe.panels.v2)

Motion export: GIF + easing + hold

  • New GIF format (same transition pipeline as video)
  • Formats: PNG / JPG / Video (MP4·WebM) / GIF
  • Hold start / Hold end within total duration
  • Easing: Linear (default) or Ease in-out (opt-in)
  • Shared by preview, video export, and GIF

Undo / redo

  • History for settings decisions (layout, split, labels, layers, export, …)
  • Images, theme, and panel open state are not tracked
  • Header Undo / Redo buttons
  • Shortcuts: Cmd/Ctrl+Z, Cmd/Ctrl+Shift+Z (and Cmd/Ctrl+Y)
  • Slider drags coalesce (~300ms); max 50 steps
  • Applying a preset records as a single history step

Behavior / impact

  • Still look is unchanged until overlay, per-side, labels, or motion settings are customized
  • Background owns solid fills; overlay is marks-only
  • GIF uses gifenc; large source resolutions may take longer to encode
  • Overlap layouts still cannot export video/GIF (split layouts only)

Test plan

  • Sidebars scroll; last group shows bottom border
  • Dirty group shows reset; reset restores defaults and hides icon
  • Overlay marks only; per-side A/B for background and overlay
  • Labels: presets + custom X/Y; split move does not drag labels
  • Video/GIF preview with holds; linear vs ease-in-out
  • Export MP4/WebM and GIF
  • Change settings → Undo / Redo via buttons and shortcuts
  • Drag a slider → one undo step; type in an input → shortcuts ignored
  • Apply preset → one undo restores prior settings
  • Save/load preset with new fields; old presets still load
  • Light/dark theme readability

Ship pattern-only overlays with optional A/B layers, dual-side
backgrounds, and scrollable collapsible sidebar groups.
Anchor labels with 9-point presets and custom X/Y, show per-group
reset only when dirty, and keep overlays mark-only on the canvas.
@CodeWithDennis CodeWithDennis changed the title feat: add overlay layer, per-side backgrounds, and collapsible sidebars feat: overlays, per-side layers, per-image labels, and collapsible sidebars Jul 27, 2026
Support animated GIF alongside video, shared hold-start/hold-end
timing, opt-in ease-in-out, and restore the last sidebar border.
@CodeWithDennis CodeWithDennis changed the title feat: overlays, per-side layers, per-image labels, and collapsible sidebars feat: overlays, labels, GIF export, and sidebar UX Jul 27, 2026
Track composition and export decisions with debounced history,
header controls, and Cmd/Ctrl+Z shortcuts.
@CodeWithDennis CodeWithDennis changed the title feat: overlays, labels, GIF export, and sidebar UX feat: overlays, labels, GIF export, undo/redo, and sidebar UX Jul 27, 2026
@CodeWithDennis

Copy link
Copy Markdown
Owner Author
Screenshot 2026-07-27 at 22 52 25

@CodeWithDennis
CodeWithDennis marked this pull request as draft July 27, 2026 20:57
Support layout-like edge overlays (wavy, torn, etc.) with edge, coverage,
and opacity; default background to none; and make slider values look editable.
Allow coverage 0–100% and density 1–100 so edge overlay controls can reach both ends.
Drop wavy/torn/etc. overlay washes and keep pattern overlays, background
none default, and editable slider value chips.
@CodeWithDennis
CodeWithDennis marked this pull request as ready for review July 28, 2026 18:09
@CodeWithDennis
CodeWithDennis merged commit 8d191d8 into main Jul 28, 2026
4 checks passed
@CodeWithDennis
CodeWithDennis deleted the feat/overlay-per-side-sidebars branch July 28, 2026 18:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant