@fqqb/timeline

class ItemBand extends Band

Band that draws events.

Properties
background, borderColor, borderWidth, contentHeight, data, frozen, headerBackground, height, itemBackground, itemBorderColor, itemBorderDash, itemBorderWidth, itemCornerRadius, itemCursor, itemFontFamily, itemHeight, itemHoverBackground, itemMarginLeft, itemTextColor, itemTextOverflow, itemTextSize, items, label, lineSpacing, marginBottom, marginTop, milestoneShape, multiline, spaceBetween, timeline, width, x, y
Methods
constructor, addHeaderClickListener, addItemClickListener, addItemMouseEnterListener, addItemMouseLeaveListener, addItemMouseMoveListener, addMutationListener, beforeDraw, calculateContentHeight, createAnimatableProperty, disconnectedCallback, drawBandContent, drawContent, drawOverlay, drawUnderlay, removeHeaderClickListener, removeItemClickListener, removeItemMouseEnterListener, removeItemMouseLeaveListener, removeItemMouseMoveListener, removeMutationListener, 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
get

The height of the band content (excluding margins).

Type:
number
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
itemBackground
getset

Default background color of items belonging to this band.

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

Default border color of items belonging to this band.

Type:
string
Default value:
'#000000'
itemBorderDash
getset

Default border dash of items belong to this band.

Provide an array of values that specify alternating lengths of lines and gaps.

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

Default border thickness of items belonging to this band.

Type:
number
Default value:
0
itemCornerRadius
getset

Default corner radius of items belonging to this band.

Type:
number
Default value:
0
itemCursor
getset

Cursor when mouse hovers an item.

Type:
string
Default value:
'pointer'
itemFontFamily
getset

Default font family of items belonging to this band.

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

Height in points of items belonging to this band.

Type:
number
Default value:
30
itemHoverBackground
getset

Item background when hovering.

This is drawn on top of the actual item background.

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

Whitespace between the left border of an item, and its label.

Type:
number
Default value:
5
itemTextColor
getset

Default text color of items belonging to this band.

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

Indicates what must happen with an item label in case its width would exceed that of the item box.

Type:
TextOverflow
Default value:
'show'
itemTextSize
getset

Default text size of items belonging to this band.

Type:
number
Default value:
10
items
getset

List of items to be drawn on this band.

An item is allowed to fall outside of the visible time range, and in fact this can be used to preload data prior to an anticipated pan operation.

Type:
Item[]
Default value:
[]
label
getset

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

Type:
undefined | string
lineSpacing
getset

In case of , this specifies the whitespace between lines.

Type:
number
Default value:
0
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
milestoneShape
getset

In case the item is a milestone (when it has no stop time), this is the shape drawn for it.

Type:
MilestoneShape
Default value:
'diamond'
multiline
getset

True if items belonging to this band should wrap over multiple lines when otherwise they would overlap.

Type:
boolean
Default value:
true
spaceBetween
getset

In case of , this allows reserving some extra whitespace that has to be present, or else an item is considered to overlap.

Type:
number
Default value:
0
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
addItemClickListener(listener)

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

Parameters:
Return type:
void
addItemMouseEnterListener(listener)

Register a listener that receives updates whenever the mouse enters an item.

Parameters:
Return type:
void
addItemMouseLeaveListener(listener)

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

Parameters:
Return type:
void
addItemMouseMoveListener(listener)

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

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
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
removeItemClickListener(listener)

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

Parameters:
Return type:
void
removeItemMouseEnterListener(listener)

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

Parameters:
Return type:
void
removeItemMouseLeaveListener(listener)

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

Parameters:
Return type:
void
removeItemMouseMoveListener(listener)

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

Parameters:
Return type:
void
removeMutationListener(mutationListener)

Remove a previously added mutation listener.

Parameters:
  • () => void mutationListener
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