[ @sdxc/ui/mixins ]
colorAreaDrag
Drags a ColorArea root as one two-dimensional pointer gesture, mapping the pointer position onto paired horizontal- and vertical-axis range inputs and writing both together.
import { colorAreaDrag } from "@sdxc/ui/mixins";Usage
Adds pointer-driven, two-dimensional dragging to a ColorArea root, mapping each captured pointer's position onto the paired axis inputs found via COLOR_AREA_AXIS_ATTRIBUTE and dispatching ColorAreaChangeEvent on settled pairs.
Signature
colorAreaDrag(): MixinDescriptor<HTMLElement>Returns a mixin descriptor for a ColorArea root's mix prop.
Examples
<div mix={[colorAreaDrag(), css({ position: "relative" })]}>
<input type="range" data-color-area-axis="x" min={0} max={100} defaultValue={50} />
<input type="range" data-color-area-axis="y" min={0} max={100} defaultValue={50} />
<span aria-hidden="true" mix={css({ position: "absolute" })} />
</div>Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/mixins too.
ColorAreaChangeEvent
Dispatched on a ColorArea's host by colorAreaDrag whenever a
pointer gesture settles both paired axis inputs on new values, so a
consumer can react to the pair without reading the two <input> elements itself.
new ColorAreaChangeEvent(init: Point)| Property | Type | Description |
|---|---|---|
x | readonly number | Settled value of the horizontal-axis input, after mapping the pointer position through its own min–max range. |
y | readonly number | Settled value of the vertical-axis input, after mapping the pointer position through its own min–max range. |
COLOR_AREA_AXIS_ATTRIBUTE
data-* attribute a ColorArea's paired axis inputs carry so
colorAreaDrag can tell the horizontal-axis input from the
vertical-axis input.
const COLOR_AREA_AXIS_ATTRIBUTE = "data-color-area-axis"COLOR_AREA_AXIS_X
COLOR_AREA_AXIS_ATTRIBUTE value the horizontal-axis input of a pair carries.
const COLOR_AREA_AXIS_X = "x"COLOR_AREA_AXIS_Y
COLOR_AREA_AXIS_ATTRIBUTE value the vertical-axis input of a pair carries.
const COLOR_AREA_AXIS_Y = "y"