import Timeline from 'waves-ui/src/core/timeline.js'

public class | source

Timeline

Extends:

events~events.EventEmitter → Timeline

Is the main entry point to create a temporal visualization.

A timeline instance mainly provides the context for any visualization of temporal data and maintains the hierarchy of Track, Layer and Shape over the entiere visualisation.

Its main responsabilites are:

maintaining the temporal consistency accross the visualisation through its timeContext property (instance of TimelineTimeContext).
handling interactions to its current state (acting here as a simple state machine).

Constructor Summary

Public Constructor
public	constructor(pixelsPerSecond: Number, visibleWidth: Number)

Member Summary

Public Members
public get	groupedLayers: Object Object maintaining arrays of `Layer` instances ordered by their `groupId`.
public get	layers: Array Returns the list of all registered layers.
public get	maintainVisibleDuration: Boolean Returns `TimelineTimeContext`'s `maintainVisibleDuration` current value.
public set	maintainVisibleDuration: Boolean Updates the `TimelineTimeContext`'s `maintainVisibleDuration` value. Defines if the duration of the visible area should be maintain when the `visibleWidth` attribute is updated.
public set	offset: Number Updates `TimelineTimeContext`'s `offset` time domain value.
public get	offset: Number Returns `TimelineTimeContext`'s `offset` time domain value.
public get	pixelsPerSecond: Number Returns the `TimelineTimeContext`'s `pixelsPerSecond` ratio.
public set	pixelsPerSecond: Number Updates the `TimelineTimeContext`'s `pixelsPerSecond` ratio.
public get	state: BaseState Returns the current state of the timeline.
public set	state: BaseState Updates the state of the timeline.
public	timeContext: TimelineTimeContext
public get	timeToPixel: Function Returns `TimelineTimeContext`'s `timeToPixel` transfert function.
public get	tracks: TrackCollection Returns the `TrackCollection` instance.
public get	visibleDuration: Number Returns `TimelineTimeContext`'s `visibleDuration` helper value.
public set	visibleWidth: Number Updates the `TimelineTimeContext`'s `visibleWidth` pixel domain value.
public get	visibleWidth: Number Returns the `TimelineTimeContext`'s `visibleWidth` pixel domain value.
public set	zoom: Number Updates the `TimelineTimeContext`'s `zoom` value.
public get	zoom: Number Returns the `TimelineTimeContext`'s `zoom` value.

Method Summary

Public Methods
public	* [Symbol.iterator]() Iterates through the added tracks.
public	add(track: Track, trackId: String) Adds a new track to the timeline.
public	addLayer(layer: Layer, trackOrTrackId: Track \| String, groupId: String, isAxis: Boolean) Helper to add a `Layer` instance into a given `Track`.
public	configureSurface(ctor: EventSource) Overrides the default `Surface` that is instanciated on each `Track` instance.
public	createInteraction(ctor: EventSource, $el: Element, options: Object) Factory method to add interaction modules the timeline should listen to.
public	createTrack($el: Element, trackHeight: Number, trackId: String): Track Helper to create a new `Track` instance.
public	getHitLayers(e: WavesEvent): Array Returns a list of the layers situated under the position of a `WaveEvent`.
public	getLayersByGroup(groupId: String): Array \| undefined Returns an array of layers from their given group id.
public	getTrackById(trackId: String): Track Returns a `Track` instance from it's given id.
public	getTrackFromDOMElement($el: Element): Track Returns the track containing a given DOM Element, returns null if no match found.
public	remove(track: Track) Removes a track from the timeline.
public	removeLayer(layer: Layer) Removes a layer from its track.

Public Constructors

public constructor(pixelsPerSecond: Number, visibleWidth: Number) source

Params:

Name	Type	Attribute	Description
pixelsPerSecond	Number	optional default: 100	the default scaling between time and pixels.
visibleWidth	Number	optional default: 1000	the default visible area for all registered tracks.

Public Members

public get groupedLayers: Object source

Object maintaining arrays of Layer instances ordered by their groupId. Is used internally by the TrackCollection instance.

public get layers: Array source

Returns the list of all registered layers.

public get maintainVisibleDuration: Boolean source

Returns TimelineTimeContext's maintainVisibleDuration current value.

public set maintainVisibleDuration: Boolean source

Updates the TimelineTimeContext's maintainVisibleDuration value. Defines if the duration of the visible area should be maintain when the visibleWidth attribute is updated.

public set offset: Number source

Updates TimelineTimeContext's offset time domain value.

public get offset: Number source

Returns TimelineTimeContext's offset time domain value.

public get pixelsPerSecond: Number source

Returns the TimelineTimeContext's pixelsPerSecond ratio.

public set pixelsPerSecond: Number source

Updates the TimelineTimeContext's pixelsPerSecond ratio.

public get state: BaseState source

Returns the current state of the timeline.

public set state: BaseState source

Updates the state of the timeline.

public timeContext: TimelineTimeContext source

public get timeToPixel: Function source

Returns TimelineTimeContext's timeToPixel transfert function.

public get tracks: TrackCollection source

Returns the TrackCollection instance.

public get visibleDuration: Number source

Returns TimelineTimeContext's visibleDuration helper value.

public set visibleWidth: Number source

Updates the TimelineTimeContext's visibleWidth pixel domain value.

public get visibleWidth: Number source

Returns the TimelineTimeContext's visibleWidth pixel domain value.

public set zoom: Number source

Updates the TimelineTimeContext's zoom value.

public get zoom: Number source

Returns the TimelineTimeContext's zoom value.

Public Methods

public * [Symbol.iterator]() source

Iterates through the added tracks.

public add(track: Track, trackId: String) source

Adds a new track to the timeline.

Params:

Name	Type	Attribute	Description
track	Track		The new track to be registered in the timeline.
trackId	String	optional default: null	Optionnal unique id to associate with the track, this id only exists in timeline's context and should be used in conjonction with `addLayer` method.

public addLayer(layer: Layer, trackOrTrackId: Track | String, groupId: String, isAxis: Boolean) source

Helper to add a Layer instance into a given Track. Is designed to be used in conjonction with the Timeline~getLayersByGroup method. The layer is internally rendered and updated.

Params:

Name	Type	Attribute	Description
layer	Layer		The `Layer` instance to add into the visualization.
trackOrTrackId	Track \| String		The `Track` instance (or its `id` as defined in the `createTrack` method) where the `Layer` instance should be inserted.
groupId	String	optional default: 'default'	An optionnal group id in which the `Layer` should be inserted.
isAxis	Boolean	optional	Set to `true` if the added `layer` is an instance of `AxisLayer` (these layers shares the `TimlineTimeContext` instance of the timeline).

public configureSurface(ctor: EventSource) source

Overrides the default Surface that is instanciated on each Track instance. This methos should be called before adding any Track instance to the current timeline.

Params:

Name	Type	Attribute	Description
ctor	EventSource		The constructor to use in order to catch mouse events on each `Track` instances.

public createInteraction(ctor: EventSource, $el: Element, options: Object) source

Factory method to add interaction modules the timeline should listen to. By default, the timeline instanciate a global Keyboard instance and a Surface instance on each container. Should be used to install new interactions implementing the EventSource interface.

Params:

Name	Type	Attribute	Description
ctor	EventSource		The contructor of the interaction module to instanciate.
$el	Element		The DOM element which will be binded to the `EventSource` module.
options	Object	optional default: {}	Options to be applied to the `ctor`.

public createTrack($el: Element, trackHeight: Number, trackId: String): Track source

Helper to create a new Track instance. The track is added, rendered and updated before being returned.

Params:

Name	Type	Attribute	Description
$el	Element		The DOM element where the track should be inserted.
trackHeight	Number		The height of the newly created track.
trackId	String	optional default: null	Optionnal unique id to associate with the track, this id only exists in timeline's context and should be used in conjonction with `addLayer` method.

Return:

Track

public getHitLayers(e: WavesEvent): Array source

Returns a list of the layers situated under the position of a WaveEvent.

Params:

Name	Type	Attribute	Description
e	WavesEvent		An event triggered by a `WaveEvent`

Return:

Array

Matched layers

public getLayersByGroup(groupId: String): Array | undefined source

Returns an array of layers from their given group id.

Params:

Name	Type	Attribute	Description
groupId	String		The id of the group as defined in `addLayer`.

Return:

Array | undefined

public getTrackById(trackId: String): Track source

Returns a Track instance from it's given id.

Params:

Name	Type	Attribute	Description
trackId	String

Return:

Track

public getTrackFromDOMElement($el: Element): Track source

Returns the track containing a given DOM Element, returns null if no match found.

Params:

Name	Type	Attribute	Description
$el	Element		The DOM Element to be tested.

Return:

Track

public remove(track: Track) source

Removes a track from the timeline.

Params:

Name	Type	Attribute	Description
track	Track		the track to remove from the timeline.

TODO:

not implemented.

public removeLayer(layer: Layer) source

Removes a layer from its track. The layer is detatched from the DOM but can still be reused later.

Params:

Name	Type	Attribute	Description
layer	Layer		The layer to remove.