import Track from 'waves-ui/src/core/track.js'

public class | source

Track

Acts as a placeholder to organize the vertical layout of the visualization and the horizontal alignement to an abscissa that correspond to a common time reference. It basically offer a view on the overall timeline.

Tracks are inserted into a given DOM element, allowing to create DAW like representations. Each Track instance can host multiple Layer instances. A track must be added to a timeline before being updated.

A timeline with 3 tracks:

0                 6                               16
+- - - - - - - - -+-------------------------------+- - - - - - -
|                 |x track 1 xxxxxxxxxxxxxxxxxxxxx|
+- - - - - - - - -+-------------------------------+- - - - - - -
|                 |x track 2 xxxxxxxxxxxxxxxxxxxxx|
+- - - - - - - - -+-------------------------------+- - - - - - -
|                 |x track 3 xxxxxxxxxxxxxxxxxxxxx|
+- - - - - - - - ---------------------------------+- - - - - - -
+----------------->
timeline.timeContext.timeToPixel(timeline.timeContext.offset)

                  <------------------------------->
                  timeline's tracks defaults to 1000px
                  with a default pixelsPerSecond of 100px/s.
                  and a default `stretchRatio = 1`
                  track1 shows 10 seconds of the timeline

Track DOM structure

<svg width="${visibleWidth}">
  <!-- background -->
  <rect><rect>
  <!-- main view -->
  <g class="offset" transform="translate(${offset}, 0)">
    <g class="layout">
      <!-- layers -->
    </g>
  </g>
  <g class="interactions"><!-- for feedback --></g>
</svg>

Constructor Summary

Public Constructor
public	constructor($el: DOMElement, height: Number)

Member Summary

Public Members
public	$background: Element
public	$el: Element The DOM element in which the track is created.
public	$interactions: Element A placeholder to add shapes for interactions feedback.
public	$layout: Element
public	$offset: Element
public	$svg: Element
public get	height: Number Returns the height of the track.
public set	height: Number Sets the height of the track.
public	layers: Array<Layer> An array of all the layers belonging to the track.
public	renderingContext: TimelineTimeContext The context used to maintain the DOM structure of the track.

Method Summary

Public Methods
public	* [Symbol.iterator]() Iterates through the added layers.
public	add(layer: Layer) Adds a layer to the track.
public	destroy() Destroy the track.
public	hasElement($el: Element): bool Tests if a given element belongs to the track.
public	remove(layer: Layer) Removes a layer from the track.
public	render() Render all the layers added to the track.
public	update(layers: Array<Layer>) Updates the track DOM structure and updates the layers.
public	updateContainer() Updates the track DOM structure.
public	updateLayers(layers: Array<Layer>) Updates the layers.

Public Constructors

public constructor($el: DOMElement, height: Number) source

Params:

Name	Type	Attribute	Description
$el	DOMElement
height	Number	optional	= 100]

Public Members

public $background: Element source

public $el: Element source

The DOM element in which the track is created.

public $interactions: Element source

A placeholder to add shapes for interactions feedback.

public $layout: Element source

public $offset: Element source

public $svg: Element source

public get height: Number source

Returns the height of the track.

public set height: Number source

Sets the height of the track.

TODO:

propagate to layers, keeping ratio? could be handy for vertical resize. This is why a set/get is implemented here.

public layers: Array<Layer> source

An array of all the layers belonging to the track.

public renderingContext: TimelineTimeContext source

The context used to maintain the DOM structure of the track.

Public Methods

public * [Symbol.iterator]() source

Iterates through the added layers.

public add(layer: Layer) source

Adds a layer to the track.

Params:

Name	Type	Attribute	Description
layer	Layer		the layer to add to the track.

public destroy() source

Destroy the track. The layers from this track can still be reused elsewhere.

public hasElement($el: Element): bool source

Tests if a given element belongs to the track.

Params:

Name	Type	Attribute	Description
$el	Element

Return:

bool

public remove(layer: Layer) source

Removes a layer from the track. The layer can be reused elsewhere.

Params:

Name	Type	Attribute	Description
layer	Layer		the layer to remove from the track.

public render() source

Render all the layers added to the track.

public update(layers: Array<Layer>) source

Updates the track DOM structure and updates the layers.

Params:

Name	Type	Attribute	Description
layers	Array<Layer>	optional default: null	if not null, a subset of the layers to update.

public updateContainer() source

Updates the track DOM structure.

public updateLayers(layers: Array<Layer>) source

Updates the layers.

Params:

Name	Type	Attribute	Description
layers	Array<Layer>	optional default: null	if not null, a subset of the layers to update.