wulkano/kap

[Feature Request] Add an undo / redo stack for cropper.

Open

#976 opened on Feb 4, 2021

View on GitHub
 (0 comments) (2 reactions) (0 assignees)JavaScript (11,043 stars) (548 forks)batch import
Help WantedType: Enhancement

Description

Problem

One of the vanishingly few negative user experiences I've had with Kap is when I'm recording multiple captures of the same part of my screen, but then accidentally reside the cropped area between recordings. It's often impossible to manually restore the same cropped bounds.

Solution

To fix this, we could implement an undo / redo stack for the cropper, allowing a user to restore previous cropper settings.

Implementation

This feature could be implemented in the cropper container, following a standard undo/redo implementation pattern.

  • The container's state would keep an array of settings (the "stack") and a number (the "stack pointer") indicating the index of the current settings.
  • Each updateSettings call would update the stack by slicing it up to the pointer, pushing the new settings, and then updating the pointer.
  • Standard keyboard shortcuts would be used to move the pointer up and down, with each change restoring the settings found in the stack at the pointer's index.

This change would also replace the logic for restoring the previous (or original) cropper bounds after leaving full screen. We could move isFullscreen into the settings definition (stored in the stack), allowing a user to undo or redo back into or out of full screen mode.

Contributor guide

Tech stack
javascriptreact
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
basic knowledge of JavaScriptfamiliarity with React state management
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Start by examining the cropper container component in the Kap repository, likely located in a file like 'src/components/Cropper.js' or similar. Review the existing state management patterns used in the app, particularly how 'settings' are updated. The issue suggests implementing an undo/redo stack following a standard pattern, so look for any existing undo/redo implementations elsewhere in the codebase as a reference. There are no comments or maintainer questions to address, so proceed with the described approach.