@fqqb/timeline

class Timeline

Properties
animated, background, bandBorderColor, bandBorderWidth, center, cursor, fontFamily, foregroundColor, mainWidth, max, maxRange, min, minRange, sidebar, start, stop, textSize, tool, width
Methods
constructor, addViewportChangeListener, addViewportDoubleClickListener, addViewportMouseLeaveListener, addViewportMouseMoveListener, addViewportSelectionListener, clearSelection, createAnimatableProperty, disconnect, distanceBetween, getBands, getChildren, getSelection, panBy, panTo, positionTime, removeChild, removeViewportChangeListener, removeViewportDoubleClickListener, removeViewportMouseLeaveListener, removeViewportMouseMoveListener, removeViewportSelectionListener, requestRepaint, setSelection, setViewRange, timeForCanvasPosition, toDataURL, zoom, zoomIn, zoomOut

Properties

animated

If true, some actions (e.g. panBy) animate property transitions.

Type:
boolean
background
getset
Type:
FillStyle
Default value:
'#ffffff'
bandBorderColor
getset
Type:
string
Default value:
'#e8e8e8'
bandBorderWidth
getset
Type:
number
Default value:
1
center
getset

The time corresponding with the visible center.

Type:
number
cursor
getset
Type:
string
fontFamily
getset
Type:
string
Default value:
'Verdana, Geneva, sans-serif'
foregroundColor
getset
Type:
string
Default value:
'grey'
mainWidth
get

The pixel width of this Timeline (excl. sidebar)

Type:
number
max
getset

The maximum possible visible time.

Type:
undefined | number
maxRange
getset

The maximum possible visible time range.

Type:
undefined | number
min
getset

The minimum possible visible time.

Type:
undefined | number
minRange
getset

The minimum possible visible time range.

Type:
undefined | number
sidebar
getset

Optional sidebar. If set, this is positioned left of the main area.

Type:
undefined | Sidebar
start
get

The leftmost visible start time.

Type:
number
stop
get

The rightmost visible stop time.

Type:
number
textSize
getset
Type:
number
Default value:
10
tool
getset

Activate a built-in tool.

Type:
undefined | Tool
Default value:
'hand'
width
get

The pixel width of this Timeline (incl. sidebar)

Type:
number

Methods

constructor(targetElement)
Parameters:
  • HTMLElement targetElement
addViewportChangeListener(listener)

Register a listener that receives updates when the viewport bounds have changed.

Parameters:
Return type:
void
addViewportDoubleClickListener(listener)

Register a listener that recevies updates whenever the viewport is double-clicked.

Parameters:
Return type:
void
addViewportMouseLeaveListener(listener)

Register a listener that receives updates whenever the mouse is moving outside the viewport.

Parameters:
Return type:
void
addViewportMouseMoveListener(listener)

Register a listener that receives updates whenever the mouse is moving over the viewport.

Parameters:
Return type:
void
addViewportSelectionListener(listener)

Register a listener that receives updates whenever the time range selection has changed.

Parameters:
Return type:
void
clearSelection()

Clear the current time range selection (if any)

Return type:
void
createAnimatableProperty(value)
Parameters:
  • number value
Return type:
AnimatableProperty
disconnect()

Free resources used by this Timeline instance (like intervals).

Return type:
void
distanceBetween(time1, time2)

Returns pixel count between two times. The sign is negative if time2 comes after time1.

Parameters:
  • number time1
  • number time2
Return type:
number
getBands()

Returns all Band instances bound to this Timeline instance.

Return type:
Band[]
getChildren()

Returns the drawables bound to this Timeline instance.

Return type:
Drawable[]
getSelection()

Returns the currently active selection (if any).

Return type:
undefined | TimeRange
panBy(x, animate=true)

Change the the visible range by a distance in pixels.

A positive number pans towards the future, whereas a negative number pans towards the past.

Parameters:
  • number x
  • boolean animate
Return type:
void
panTo(time, animate=true)

Pan to the specified time while keeping the current time range.

Parameters:
  • number time –
  • boolean animate
Return type:
void
positionTime(time)

Returns the x position in points for the given time (relative to viewport)

Parameters:
  • number time
Return type:
number
removeChild(drawable)

Remove a drawable from this Timeline instance.

Parameters:
Return type:
boolean
removeViewportChangeListener(listener)

Unregister a previously registered listener to stop receiving viewport change events.

Parameters:
Return type:
void
removeViewportDoubleClickListener(listener)

Unregister a previously registered listener to stop receiving viewport double-click events.

Parameters:
Return type:
void
removeViewportMouseLeaveListener(listener)

Unregister a previously registered listener to stop receiving viewport mouse-leave events.

Parameters:
Return type:
void
removeViewportMouseMoveListener(listener)

Unregister a previously registered listener to stop receiving viewport mouse-move events.

Parameters:
Return type:
void
removeViewportSelectionListener(listener)

Unregister a previously registered listener to stop receiving viewport selection events.

Parameters:
Return type:
void
requestRepaint()

Request a repaint of the canvas.

The repaint is done async from a UI render loop.

In general it should not be needed to use this method. Bands and decorations trigger repaints automatically.

Return type:
void
setSelection(start, stop)

Highlight a time range as being selected.

Parameters:
  • number start –
  • number stop –
Return type:
void
setViewRange(start, stop, animate=true)

Sets the visible range.

Parameters:
  • number start
  • number stop
  • boolean animate
Return type:
void
timeForCanvasPosition(canvasX)

Returns the time matching canvas x coordinate (relative to full canvas)

Parameters:
  • number canvasX
Return type:
number
toDataURL(type='image/png', quality?)

Returns the content of the current canvas as an image.

Parameters:
  • string type
  • any quality
Return type:
string
zoom(factor, animate=true, relto?)

Zoom by a scale factor relative to the current range. For example: 2 shows twice the current range, 0.5 shows half the current range.

Parameters:
  • number factor
  • boolean animate
  • number relto –
Return type:
void
zoomIn()

Zooms in with a scale factor of 0.5 (half the current range).

Return type:
void
zoomOut()

Zooms out with a scale factor of 2 (twice the current range).

Return type:
void

Drawables