casesandberg/react-color

EditableInput: Increment on Drag

Open

#8 opened on Aug 17, 2015

View on GitHub
 (4 comments) (1 reaction) (0 assignees)JavaScript (11,679 stars) (946 forks)batch import
help wanted

Description

The text input fields could be draggable, as with applications like After Effects.

  • On :hover, a east-west cursor is shown (north-south if more appropriate for the given layout).
  • On drag originating from the field, the value is modified by +/-1 at an interval that scales with the vector's magnitude. On account of typical input precision, the rate should be slow (1 per 500ms?) for a generous margin near the field (estimated: first 8-10px).
  • On mouseup, the timeout is cancelled so as to not increment after gesture ends.
  • It may be necessary to lock out text-selection until mouseup (or focus) inside the field. Many apps that support this have an edit state to resolve these conflicting interactions.

Contributor guide

Tech stack
javascriptreacthtmlcss
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.
1-2 days
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
ReactDOM eventssetTimeout
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
Examine the EditableInput component in src/components/editable/EditableInput.js (or similar). Understand current value update mechanism via onChange. Implement mouse event handlers for mousedown, mousemove, mouseup. Use setTimeout to increment value at intervals based on drag distance. Ensure to cancel timeout on mouseup. Test with a simple color number field. Consider if input should be a number or text. The issue is old; verify the component is still used in the latest code.