Knob
[BKnob]{#BKnob data-4search="ui/b/knob.js:BKnob;section"}
The input event on value changes and accepting inputs via the value prop.
Props:
bidir
: Boolean, flag indicating bidirectional inputs with value range -1…+1.
value
: Float, the knob value to be displayed, the value range is 0…+1 if bidir is false.
format
: String, format specification for popup bubbles, containinig a number for the peak amplitude.
label
: String, text string for popup bubbles.
hscroll
: Boolean, adjust value with horizontal scrolling (without dragging).
vscroll
: Boolean, adjust value with vertical scrolling (without dragging).
width4height
: Automatically determine width from externally specified height (default), otherwise determines height.
Implementation Notes
The knob is rendered based on an SVG drawing, which is arranged in such a
way that adding rotational transforms to the SVG elements is sufficient to
display varying knob levels.
Chrome cannot render individual SVG nodes into seperate layers (GPU textures)
so utilizing GPU acceleration requires splitting the original SVG into
several SVG layers, each of which can be utilized as a seperate GPU texture with
the CSS setting will-change: transform.
Functions
[spin_drag_start]{#spin_drag_start data-4search="ui/b/knob.js:spin_drag_start;func"} (element, event, value_callback)
: Setup drag handlers for numeric spin button behavior.
[spin_drag_stop]{#spin_drag_stop data-4search="ui/b/knob.js:spin_drag_stop;func"} (event_or_element)
: Stop sping drag event handlers and pointer grab.
[spin_drag_pointermove]{#spin_drag_pointermove data-4search="ui/b/knob.js:spin_drag_pointermove;func"} (event)
: Handle sping drag pointer motion.
[spin_drag_change]{#spin_drag_change data-4search="ui/b/knob.js:spin_drag_change;func"} ()
: Turn accumulated spin drag motions into actual value changes.
[spin_drag_granularity]{#spin_drag_granularity data-4search="ui/b/knob.js:spin_drag_granularity;func"} (event)
: Calculate spin drag acceleration (slowdown) from event type and modifiers.