[ @sdxc/ui/mixins ]
colorWheelDrag
Reshapes a ColorWheel's underlying hue input into a ring the moment it attaches, then drags the root as one angular gesture.
import { colorWheelDrag } from "@sdxc/ui/mixins";Usage
Adds pointer-driven, angular dragging to a ColorWheel root, reshaping its hue input into a ring via COLOR_WHEEL_SHAPE_ATTRIBUTE, then mapping each captured pointer's angle to a hue and dispatching ColorWheelChangeEvent on settled values.
Signature
colorWheelDrag(): MixinDescriptor<HTMLElement>Returns a mixin descriptor for a ColorWheel root's mix prop.
Examples
<div
role="group"
aria-label={hueLabel}
mix={[colorWheelDrag(), css({ position: "relative" })]}
>
<input type="range" min={0} max={360} step={1} defaultValue={0} aria-label={hueLabel} />
</div>Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/mixins too.
ColorWheelChangeEvent
Dispatched on a ColorWheel's host by colorWheelDrag whenever a
pointer gesture writes the underlying hue input to a new value, so a
consumer can react to the settled hue without reading the <input> itself.
new ColorWheelChangeEvent(hue: number)| Property | Type | Description |
|---|---|---|
hue | readonly number | Settled hue, in degrees, 0–360, after mapping the pointer's angle through angleToHue. |
COLOR_WHEEL_SHAPE_ATTRIBUTE
data-* attribute colorWheelDrag sets to
COLOR_WHEEL_SHAPE_CIRCULAR on its host the moment it attaches, so
ColorWheel's own static css() styling repaints its track as a ring.
const COLOR_WHEEL_SHAPE_ATTRIBUTE = "data-shape"COLOR_WHEEL_SHAPE_CIRCULAR
Value colorWheelDrag writes to COLOR_WHEEL_SHAPE_ATTRIBUTE on attach.
const COLOR_WHEEL_SHAPE_CIRCULAR = "circular"