import AxisLayer from 'waves-ui-piper/src/axis/axis-layer.js'

public class | source

AxisLayer

Extends:

events~events.EventEmitter → Layer → AxisLayer

Direct Subclass:

GridAxisLayer, TimeAxisLayer

Simplified Layer for Axis. The main difference with a regular layer is that an axis layer use the Timeline~timeContext attributes to render it's layout and stay synchronized with the tracks visible area. All getters and setters to the TimelineTimeContext attributes are bypassed.

It also handle it's own data and its updates. The _generateData method is responsible to create some usefull data to visualize

example usage of the layer-axis

Constructor Summary

Public Constructor
public	constructor(generator: Function, options: Object)

Member Summary

Public Members
public	$background: *
public	$el: *
public	$maingroup: *
public set	generator: Function The generator that creates the data to be rendered to display the axis.
public get	generator: Function The generator that creates the data to be rendered to display the axis.

Method Summary

Public Methods
public	update() Generates the data and update the layer.

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(generator: Function, options: Object) source

Override:

Layer#constructor

Params:

Name	Type	Attribute	Description
generator	Function		A function to create data according to the `Timeline~timeContext`.
options	Object		Layer options, cf. Layer for available options.