import WaveformLayer from 'waves-ui-piper/src/helpers/waveform-layer.js'

public class | source

WaveformLayer

Extends:

events~events.EventEmitter → Layer → WaveformLayer

Helper to create a waveform layer.

example usage

Constructor Summary

Public Constructor
public	constructor(buffer: AudioBuffer, options: Object)

Inherited Summary

From class Layer
public static	configureTimeContextBehavior(ctor: Object) Allows to override default the `TimeContextBehavior` used to edit the layer.
public get	data: Object[] Returns the data associated to the layer.
public set	data: Object \| Object[] Sets the data associated with the layer.
public get	duration: Number Returns `LayerTimeContext`'s `duration` time domain value.
public set	duration: Number Sets `LayerTimeContext`'s `duration` time domain value.
public get	items: Array<Element> Returns an array containing all the displayed items.
public get	offset: Number Returns `LayerTimeContext`'s `offset` time domain value.
public set	offset: Number Sets `LayerTimeContext`'s `offset` time domain value.
public get	opacity: Number Returns the opacity of the whole layer.
public set	opacity: Number Sets the opacity of the whole layer.
public get	selectedItems: Array<Element> Returns the items marked as selected.
public get	start: Number Returns `LayerTimeContext`'s `start` time domain value.
public set	start: Number Sets `LayerTimeContext`'s `start` time domain value.
public get	stretchRatio: Number Returns `LayerTimeContext`'s `stretchRatio` time domain value.
public set	stretchRatio: Number Sets `LayerTimeContext`'s `stretchRatio` time domain value.
public get	timeToPixel: Number Returns the transfert function used to display the data in the x axis.
public get	valueToPixel: Number Returns the transfert function used to display the data in the y axis.
public get	yDomain: Array Returns the domain boundaries of the data for the y axis.
public set	yDomain: Array Set the domain boundaries of the data for the y axis.
public	$background: Element
public	$boundingBox: Element
public	$el: Element
public	$interactions: Element
public	$maingroup: Element
public	contextShape: Segment A Segment instanciated to interact with the Layer itself.
public	dataType: String Defines how the layer should look at the data (`'entity'` or `'collection'`).
public	params: Object Parameters of the layers, `defaults` overrided with options.
public	timeContext: LayerTimeContext
public	configureCommonShape(ctor: BaseShape, accessors: Object, options: Object) Optionally register a shape to be used across the entire collection.
public	configureShape(ctor: BaseShape, accessors: Object, options: Object) Register a shape and its configuration to use in order to render the data.
public	describe(x: ):
public	destroy() Destroy the layer, clear all references.
public	edit($items: Element \| Element[], dx: Number, dy: Number, $target: Element) Edit item(s) according to the `edit` defined in the registered `Behavior`.
public	editContext(dx: Number, dy: Number, $target: Element) Edit the layer and thus its related `LayerTimeContext` attributes.
public	getDatumFromDOMElement($el: Element): Object \| Array \| null Returns the datum associated to a specific item from any DOM element composing the shape.
public	getDatumFromItem($item: Element): Object \| Array \| null Returns the datum associated to a specific item.
public	getItemFromDOMElement($el: Element): Element \| null Returns an item from a DOM element related to the shape, null otherwise.
public	getItemsInArea(area: Object): Array Retrieve all the items in a given area as defined in the registered `Shape~inArea` method.
public	hasElement($el: Element): bool Defines if a given element belongs to the layer.
public	hasItem($item: Element): Boolean Tests if the given DOM element is an item of the layer.
public	render() Create the DOM structure of the shapes according to the given data.
public	select($items: Element \| Element[]) Mark item(s) as selected.
public	setBehavior(behavior: BaseBehavior) Register the behavior to use when interacting with a shape.
public	setContextEditable(bool: boolean) Defines if the `Layer`, and thus the `LayerTimeContext` is editable or not.
public	setTimeContext(timeContext: TimeContext) Sets the context of the layer, thus defining its `start`, `duration`, `offset` and `stretchRatio`.
public	stretchContext(dx: Number, dy: Number, $target: Element) Stretch the layer and thus its related `LayerTimeContext` attributes.
public	toggleSelection($items: Element \| Element[]) Toggle item(s) selection state according to their current state.
public	unselect($items: Element \| Element[]) Removes item(s) from selected items.
public	update() Updates the container of the layer and the attributes of the existing shapes.

Public Constructors

public constructor(buffer: AudioBuffer, options: Object) source

Override:

Layer#constructor

Params:

Name	Type	Attribute	Description
buffer	AudioBuffer		The audio buffer to display.
options	Object		An object to configure the layer.