knob.js file
BKnob
The <b-knob> element provides a knob for scalar inputs. It
supports the Vue v-model
protocol by emitting an 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…+1if bidir isfalse. - 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(element, event, value_callback)- Setup drag handlers for numeric spin button behavior.
spin_drag_stop(event_or_element)- Stop sping drag event handlers and pointer grab.
spin_drag_pointermove(event)- Handle sping drag pointer motion.
spin_drag_change()- Turn accumulated spin drag motions into actual value changes.
spin_drag_granularity(event)- Calculate spin drag acceleration (slowdown) from event type and modifiers.