Global

Members

clampPixel

Source:

Clamps the given value into the pixel range of this transformation.

clampValue

Source:

Clamps the given value into the value range of this transformation.

(constant) rangedRenderers

Source:
Properties:
Name Type Attributes Default Description
options.scale String | Array.<Number> | function <optional>
 "linear"

The type of the scale. Either one of linear, decibel, log2, frequency or frequency-reverse; or an array containing a piece-wise linear scale; or a callback function of type Ranged~scale_cb.
options.reverse Boolean <optional>
 false

Reverse the scale of the range.
options.basis Number <optional>
 1

The size of the linear scale. Set to pixel width or height if used for drawing purposes or to 100 for percentages.
options.clip Boolean <optional>
 true

If true, snap() will clip values into the interval between min and max.
options.min Number <optional>
 0

Minimum value of the range.
options.max Number <optional>
 1

Maximum value of the range.
options.log_factor Number <optional>
 1

Used to overexpand logarithmic curves. 1 keeps the natural curve while values above 1 will overbend.
options.snap Number | Array.<number> <optional>
 0

Defines a virtual grid. If options.snap is a positive number, it is interpreted as the distance of grid points. Then, inside of the interval options.min ... options.max the grid points are options.base + n * options.snap where n is any integer. Any values outside of that interval are rounded to the biggest or smallest grid point, respectively. In order to define grids with non-uniform spacing, set options.snap to an Array of grid points.
options.base Number <optional>
 0

Base point. Used e.g. to mark 0dB on a fader from -96dB to 12dB.
options.step Number <optional>
 0

Step size. Used for instance by ScrollValue as the step size.
options.shift_up Number <optional>
 4

Multiplier for increased stepping speed, e.g. used by ScrollValue when simultaneously pressing 'shift'.
options.shift_down Number <optional>
 0.25

Multiplier for decreased stepping speed, e.g. used by ScrollValue when simultaneously pressing 'shift' and 'ctrl'.
options.format_ariavalue function <optional>
 v => v.toFixed(2)

Function to format the aria-valuenow attribute.
options.set_ariavalue Boolean <optional>
 false

Define if aria-valuemin, aria-valuemax and aria-valuenow should be set.

Making a widget ranged combines functionality for two distinct purposes. Firstly, Ranged can be used to snap values to a virtual grid. This grid is defined by the options snap, step, min, max and base. The second feature of anged is that it allows transforming values between coordinate systems. This can be used to transform values from and to linear scales in which they are displayed on the screen. It is used inside of AUX to translate values (e.g. in Hz or dB) to pixel positions or percentages, for instance in widgets such as Scale, Meter or Graph.

Ranged features several types of coordinate systems which are often used in audio applications. They can be configured using the options.scale option, possible values are:

  • linear for linear coordinates,
  • decibel for linear coordinates,
  • log2 for linear coordinates,
  • frequency for linear coordinates or
  • frequency-reverse" for linear coordinates.
If options.scale is a function, it is used as the coordinate transformation. Its signature is Ranged~scale_cb. This allows the definition of custom coordinate transformations, which go beyond the standard types.

(constant) TrivialSnapModule

Source:

Does not snapping or clipping at all.

Methods

announceFocusMoveKeys()

Source:

Adds all possible keyboard commands used in focus_move to aria-keyshortcuts on all getFocusTargets() elements. Call this function in the context of an actual widget.

arrayDiff()

Source:

Calculates a diff between two arrays. Returns two arrays. The first contains all items in the first array which are missing from the second array. The second contains all items of the second array which are not in the first.

ArraySnapModule()

Source:

A factory function which creates a snap module which snaps to values in a sorted list.

clamp()

Source:

Clamps value into the range between min and max, inclusively.

defineChildElement(widget, name, config)

Source:

Creates a HTMLElement as a child for a widget. Is used to simplify widget definitions. E.g. the tiny marker used to display the back-end value is a simple DIV added using child element. The generic element is a DIV added to Widget.element with the class .aux-[name]. Default creating and adding can be overwritten with custom callback functions.

Parameters:
Name Type Description
widget Widget

The Widget to add the child element to.
name string

The identifier of the element. It will be prefixed by an underscore Widget["_" + config.name].
config object

The configuration of the child element.

Properties
Name Type Attributes Default Description
show boolean <optional>
 false

Show/hide the child element on initialization.
option string <optional>
 "show_"+config.name

A custom option of the parent widget to determine the visibility of the child element. If this is null, Widget.options["show_"+ config.name] is used to toggle its visibility. The child element is visible, if this options is !== false.
display_check function <optional>

A function overriding the generic show_option behavior. If set, this function is called with the value of show_option as argument as soon as it gets set and is supposed to return a boolean defining the visibility of the element.
append function <optional>

A function overriding the generic append mechanism. If not null, this function is supposed to take care of adding the child element to the parent widget's DOM.
create function <optional>

A function overriding the generic creation mechanism. If not null, this function is supposed to create and return a DOM element to be added to the parent widget.
toggle_class boolean <optional>
 false

Defines if the parent widget receives the class .aux-has-[name] as soon as the child element is shown.
draw_options array <optional>

A list of options of the parent widget which are supposed to trigger a check if the element has to be added or removed.
draw function <optional>

A function to be called on redraw.

defineChildWidget(widget, name, config)

Source:

Defines a Widget as a child for another widget. This function is used internally to simplify widget definitions. E.g. the Icon of a Button is defined as a child widget. Child widgets are created/added after the initialization of the parent widget. If not configured explicitly, all options of the child widget can be accessed via Widget.options[config.name + "." + option] on the parent widget.

Parameters:
Name Type Description
widget Widget

The Widget to add the ChildWidget to.
name string

The identifier of the element inside the parent element, Widget[config.name].
config object

The configuration of the child element.

Properties
Name Type Attributes Default Description
create Widget

A Widget class derivate to be used as child widget.
fixed boolean <optional>

A fixed child widget cannot be removed after initialization.
show boolean <optional>
 false

Show/hide a non-fixed child widget on initialization.
option string <optional>
 "show_"+config.name

A custom option of the parent widget to determine the visibility of the child element. If this is null, Widget.options["show_"+ config.name] is used to toggle its visibility. The child element is visible, if this options is !== false.
append function <optional>

A function overriding the generic append mechanism. If not null, this function is supposed to take care of adding the child widget to the parent widget's DOM. Otherwise the element of the child widget is added to the element of the parent widget.
inherit_options boolean <optional>
 false

Defines if both widgets share the same set of options. If true, Setting an option on the parent widget also sets the same option on the child widget. If false, the options of the child widget can be accessed via options[config.name + "." + option] in the parent widget.
map_options array <optional>
 []

An array containing option names to be mapped between parent and child widget. If one of these options is set on the parent widget, it also gets set on the child widget. This is a fine-grained version of config.inherit-options.
userset_ignore boolean <optional>
 false

Do not care about the userset event of the parent widget, only keep track of set.
userset_delegate boolean <optional>
 false

Delegates all user interaction from the child to the parent element. If the user triggers an event on the child widget, the userset function of the parent element is called.
static_events array <optional>
 []

An array of static events to be added to the parent widget. Each entry is a mapping between the name of the event and the callback function.
toggle_class boolean <optional>
 false

Defines if the parent widget receives the class .aux-has-[name] as soon as the child element is shown.
blacklist_options array.<string> <optional>

Array containing options names which are skipped on inherit_options.
map_interacting boolean <optional>
 true

If true, the interacting property will be true if it is true in the child.
no_resize boolean <optional>
 false

If true, no triggerResize is called on the parent as soon as a child is added or removed.

defineRange(widget, args, name) → {Range}

Source:

Add a new Range to the given widget. If name is set and this.options[name] exists, is an object and from is an object, too, both are merged before a range is created.

Parameters:
Name Type Description
widget Widget

The widget to define the range on.
args function | Object

A function returning a Range instance or an object containing options for a new Range.
name string

Designator of the Range. If a name is set a new set function is added to the item to set the options of the Range. Use the set function like this: this.set(name, {key: value});
Fires:
  • event:rangeadded
Returns:

The new Range.

Type
Range

defineRecalculation(widget, dependencies, cb)

Source:

Register a reclaculation function. If one of the dependencies changes it will be called before the next call to redraw().

Parameters:
Name Type Description
widget class

The Widget to define a recalculation function for.
dependencies Array.<string>

The list of options this function uses.
cb function

The function to run. The first parameter will be the options of the widget.

defineTask()

Source:

Possible (rendering) task patterns.

  • Simple: Some options change which results in some DOM manipulation to happen (e.g. a CSS class being set or removed).

  • Multi-Phase rendering: Some options change which results in some DOM manipulation, however that manipulation may have to inspect styles or measure dimensions, which requires it to be scheduled into different phases.

  • Animations: An animation runs after some options changed (e.g. a meter falling) or continuously.

  • Recalculations: Some synthetic options are calculated based on some other options being changed. This usually needs to run on demand before all other tasks.

  • A resize (or some other non option dependency) triggers some tasks to run which need to be scheduled before possible dom modifications. That will usually trigger some internal options to be changed.

focusMoveDefault(The)

Source:

Default handler for controlling values via keyboard. It sets an option depending on step, shgift_up, shift_down, min and max.

Parameters:
Name Type Description
The string

name of the option to set.
Returns:

A Function receiving an object defining the movement. This object has two members, speed and direction. speed is either slow, normal, fast or full, direction is one out of up, left, right, down.

forEachArrayDiff()

Source:

Calculates the diff between two arrays. Then calls the function removed for each item which is contained in a and not in b. Then calls the function added for each item which is contained in b and not in a.

limitDigits(limit, add, base)

Source:

Returns a formatting function for numerical values for reducing the amount of digits displayed by adding SI prefixes.

Parameters:
Name Type Description
limit Integer

the amount of digits to display, excluding the SI prefix.
add String

a possible additional string to add ad the end (e.g. 'B' for bytes)
base Integer

the base for calculations, defaults to 1000

LinearSnapModule()

Source:

A factory function which creates a snap module which snaps to values which are distributed at equal distance on a range.

makeFrequencyTransformation()

Source:

Factory function which creates a transformation for frequency scales.

makeFunctionTransformation()

Source:

Factory function which creates a transformation from generic function.

makeLinearTransformation()

Source:

Creates a linear transformation.

makeLogarithmicTransformation()

Source:

Factory function which creates a logarithmic transformation.

makePiecewiseLinearTransformation()

Source:

Factory function which creates a piecewise linear transformation.

NullSnapModule()

Source:

A factory function which creates a snap modules which does no snapping. If options.clip is true, it will clip to options.min and options.max.

observeResize()

Source:

Tracks resizes of the given list of elements using a ResizeObserver. The callback will be called whenever the resize observer triggers. Returns an unsubscription callback which can be used to stop the observation.

scrollbarSize() → {void}

Source:

Evaluate size of scroll bars. The size is set as CSS variable --aux-scrollbar-size on the body element.

Returns:
Type
void

selectAriaAttribute()

Source:

Returns the first value which is not undefined. It may be null which is a way to signal that a certain aria attribute should not be set.

setGlobalCursor(cursor)

Source:

setGlobalCursor adds global cursor classes to ensure one of the standard cursors is shown in the overall application.

Parameters:
Name Type Description
cursor string

one of the standard cursor strings.

subscribeOptions(parent, name, callback) → {function}

Source:

Subscribe to the set of options defined in the nearest AUX-OPTIONS component of a given name and parent.

Parameters:
Name Type Description
parent Node

Parent node. This is usually the parent node of the component which references a given set of options.
name String

Options name.
callback function

Callback to call when a set of options become available. Will be called with null as long as no options set can be found.
Returns:
  • Returns a function which must be called in order to unsubscribe from the options.
Type
function

subscribeOptionsAttributes(parent, name, callback) → {function}

Source:

Subscribe to the set of attributes defined by the inheritance chain of AUX-OPTIONS of a given name and parent.

Parameters:
Name Type Description
parent Node

Parent node. This is usually the parent node of the component which references a given set of options.
name String

Options name.
callback function

Callback to call when a set of options become available. Will be called with a Map of attributes.
Returns:
  • Returns a function which must be called in order to unsubscribe from the options.
Type
function

unsetGlobalCursor(cursor)

Source:

unsetGlobalCursor removes a cursor from the body. See standard cursors for a list of cursors.

Parameters:
Name Type Description
cursor string

one of the standard cursor strings.

updateData(index1, index2, connection, source, sink)

Source:

Updates the Indicator with the relevant data.

Parameters:
Name Type Description
index1 Integer

The index of the entry in the first list.
index2 Integer

The index of the entry in the second list.
connection ConnectionData

The connection data.
source PortData

The source data.
sink PortData

The sink data.

warning(element, timeout)

Source:

Adds the class "aux-warn" on this.element for a certain period of time. It is used e.g. in ChartHandle or Knob when the value exceeds the range.

Parameters:
Name Type Description
element HTMLElement

The element to apply the class 'aux-warn' to.
timeout Integer

The timer in milliseconds the warning should be active.