41 lines
1.8 KiB
Markdown
41 lines
1.8 KiB
Markdown
# scrub-input Specification
|
|
|
|
## Purpose
|
|
Drag-to-scrub numeric input component. Replaces plain number inputs across all property panel sections with drag-to-adjust, click-to-edit, and suffix display capabilities.
|
|
## Requirements
|
|
### Requirement: Drag-to-scrub numeric input
|
|
The ScrubInput component SHALL allow users to drag anywhere on the input field to scrub (adjust) the numeric value. The entire field area SHALL be draggable.
|
|
|
|
#### Scenario: Drag to increase value
|
|
- **WHEN** user clicks and drags right on a ScrubInput with value 100
|
|
- **THEN** the value increases proportionally to the drag distance
|
|
|
|
### Requirement: Click-to-edit mode
|
|
Clicking (without dragging) a ScrubInput SHALL enter direct text editing mode where the user can type a numeric value.
|
|
|
|
#### Scenario: Click to type
|
|
- **WHEN** user clicks a ScrubInput without dragging
|
|
- **THEN** the input becomes editable and accepts keyboard input
|
|
|
|
### Requirement: Suffix styling
|
|
ScrubInput SHALL support a visual suffix (e.g., "°", "px", "%") displayed after the value.
|
|
|
|
#### Scenario: Display suffix
|
|
- **WHEN** a ScrubInput has suffix "°" and value 45
|
|
- **THEN** the input displays "45°"
|
|
|
|
### Requirement: Used across all numeric properties
|
|
ScrubInput SHALL replace plain number inputs in all property panel sections (position, size, rotation, opacity, corner radius, gap, padding, font size, stroke weight).
|
|
|
|
#### Scenario: Position input uses ScrubInput
|
|
- **WHEN** the Position section renders X and Y inputs
|
|
- **THEN** they are ScrubInput components with drag-to-scrub behavior
|
|
|
|
### Requirement: Scrub label hit area
|
|
The clickable/draggable area of the scrub label SHALL be properly sized to avoid missing clicks.
|
|
|
|
#### Scenario: Reliable click target
|
|
- **WHEN** user clicks on the scrub label text
|
|
- **THEN** the click is registered and scrub mode activates
|
|
|