@fqqb/timeline

class StateBand extends Band

Draw discrete state changes.

Properties
background, borderColor, borderWidth, contentHeight, data, frozen, headerBackground, height, label, marginBottom, marginTop, stateBackground, stateCursor, stateDividerColor, stateDividerDash, stateDividerWidth, stateFontFamily, stateHoverBackground, stateMarginLeft, stateTextColor, stateTextSize, states, timeline, width, x, y
Methods
constructor, addHeaderClickListener, addMutationListener, addStateClickListener, addStateMouseEnterListener, addStateMouseLeaveListener, addStateMouseMoveListener, beforeDraw, calculateContentHeight, createAnimatableProperty, disconnectedCallback, drawBandContent, drawContent, drawOverlay, drawUnderlay, removeHeaderClickListener, removeMutationListener, removeStateClickListener, removeStateMouseEnterListener, removeStateMouseLeaveListener, removeStateMouseMoveListener, reportMutation

Properties

background
getset

Background of this band.

Type:
FillStyle
borderColor
getset

Border color of this band. If undefined, the color is determined by the property ‘bandBorderColor’ of the Timeline instance.

Type:
undefined | string
borderWidth
getset

Border width of this band. If undefined, the width is determined by the property ‘bandBorderWidth’ of the Timeline instance.

Type:
undefined | number
contentHeight
getset

The height of the band content (excluding margins).

Type:
number
Default value:
30
data
getset

Arbitrary data. For example an identifier of a backend system.

Type:
any
frozen
getset

If set to true, this band stays fixed on top, even while scrolling vertically.

Frozen bands precede non-frozen bands, regardless of the order in which bands were added.

Type:
boolean
headerBackground
getset

Background of the header of this band.

Type:
FillStyle
height
get

The height of this band.

Type:
number
label
getset

Human-friendly label for this band. Used in sidebar.

Type:
undefined | string
marginBottom
getset

Whitespace in points between the bottom of this band and band content.

Type:
number
marginTop
getset

Whitespace in points between the top of this band and band content.

Type:
number
stateBackground
getset

Background color of states belonging to this band.

Type:
FillStyle
Default value:
'#77b1e1'
stateCursor
getset

Cursor when mouse hovers a state.

Type:
string
Default value:
'pointer'
stateDividerColor
getset

Color of the divider indicating a state change.

Type:
string
Default value:
'#e8e8e8'
stateDividerDash
getset

Dash pattern of the divider that separates states.

Type:
number[]
Default value:
[]
stateDividerWidth
getset

Width of the divider that separates states.

Type:
number
Default value:
1
stateFontFamily
getset

Font family of states belonging to this band.

Type:
string
Default value:
'Verdana, Geneva, sans-serif'
stateHoverBackground
getset

State background when hovering.

This is drawn on top of the actual state background.

Type:
FillStyle
Default value:
'rgba(255, 255, 255, 0.2)'
stateMarginLeft
getset

Whitespace between the left border of a state, and its label.

Type:
number
Default value:
5
stateTextColor
getset

Text color of states belonging to this band.

Type:
string
Default value:
'#333333'
stateTextSize
getset

Text size of states belonging to this band.

Type:
number
Default value:
10
states
getset

List of states to be drawn on this band.

Type:
State[]
Default value:
[]
timeline
get

Timeline instance that this instance is bound to.

Type:
Timeline
width
get

The width of this band.

Type:
number
x
get

The X-coordinate of this band.

Type:
number
y
get

The Y-coordinate of this band.

Type:
number

Methods

constructor(timeline)
Parameters:
  • Timeline timeline

    Timeline instance that this instance is bound to.

addHeaderClickListener(listener)

Register a listener that receives updates when a line header is clicked.

Parameters:
Return type:
void
addMutationListener(mutationListener)

Adds a listener that is notified whenever one of the properties changes.

This method is used by the Timeline instance to detect when to redraw the Canvas.

Parameters:
  • () => void mutationListener
Return type:
void
addStateClickListener(listener)

Register a listener that receives an update when a state is clicked.

Parameters:
Return type:
void
addStateMouseEnterListener(listener)

Register a listener that receives updates whenever the mouse enters a state.

Parameters:
Return type:
void
addStateMouseLeaveListener(listener)

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

Parameters:
Return type:
void
addStateMouseMoveListener(listener)

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

Parameters:
Return type:
void
beforeDraw(g)

Gets called before any of the draw methods.

Parameters:
Return type:
void
calculateContentHeight(g)

Implementations should return required content height (excluding margins) during the current draw operation.

Parameters:
Return type:
number
createAnimatableProperty(value)

Creates an animatable property.

Animatable properties apply easing over time between numeric value changes.

Parameters:
  • number value –
Return type:
AnimatableProperty
disconnectedCallback()

Called when this drawable is removed from its Timeline

Return type:
void
drawBandContent(g)
Parameters:
Return type:
void
drawContent(g)

Draw regular content.

Parameters:
Return type:
void
drawOverlay(g)

Gets called after regular content is drawn. Override this if you need a top layer.

Parameters:
Return type:
void
drawUnderlay(g)

Gets called before regular content is drawn. Override this if you need a bottom layer.

Parameters:
Return type:
void
removeHeaderClickListener(listener)

Unregister a previously registered listener to stop receiving header click events.

Parameters:
Return type:
void
removeMutationListener(mutationListener)

Remove a previously added mutation listener.

Parameters:
  • () => void mutationListener
Return type:
void
removeStateClickListener(listener)

Unregister a previously registered listener to stop receiving state click events.

Parameters:
Return type:
void
removeStateMouseEnterListener(listener)

Unregister a previously registered listener to stop receiving state mouse-enter events.

Parameters:
Return type:
void
removeStateMouseLeaveListener(listener)

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

Parameters:
Return type:
void
removeStateMouseMoveListener(listener)

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

Parameters:
Return type:
void
reportMutation()

Mark this Drawable as dirty. This method is intended for use in subclasses and should be called in the implementation of set accessors.

Return type:
void

Drawables