Options
All
  • Public
  • Public/Protected
  • All
Menu

Class CustomTick

Class that represents a single Axis tick that can be managed by the user.

Custom ticks are created with Axis.addCustomTick.

Frequently used methods:

Method Purpose
setValue Set tick position along Axis.
setTextFormatter Set tick label text using a callback function.
dispose Destroy tick temporarily, or permanently
restore Restore tick after dispose
setGridStrokeStyle Set tick gridline style
setTickLength Set tick line length as pixels
setTickLabelPadding Set padding between tick line and label

Styling CustomTicks:

Tick gridline can be styled with CustomTick.setGridStrokeStyle

TickMarker (label, tick, possible background) are styled via CustomTick.setMarker as a callback function, like this:

 CustomTick.setMarker((tickMarker) => tickMarker
     // Style TickMarker.
     .setTextFillStyle(new SolidFill({ color: ColorRGBA( 255, 0, 0 ) }))
     .setFont((font) => font.setStyle( 'italic' ))
 )

See TickMarker for available customization API.

Styling specific TickMarkers:

When a custom tick is created, a tick marker builder can be specified. This specifies the shape, and general visual look of the custom tick, and can also expose a larger set of customization API for the tick marker. To use the specific API, it is required to cast the tick marker object to the correct type (TypeScript users only):

 const customTick = Axis.addCustomTick(UIElementBuilders.PointableTextBox)
 customTick.setMarker((tickMarker: UIPointableTextBox) => tickMarker
     // ^ Above type cast is necessary to access full configuration API of UIPointableTextBox
     // Style TickMarker background fill color.
     .setBackground((background) => background
         .setFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0, 100) }))
     )
 )

For reference,

  • CustomTick created with UIElementBuilders.AxisTick will support API as described by UITick
  • CustomTick created with UIElementBuilders.PointableTextBox will support API as described by UIPointableTextBox

Index

Properties

Methods

Properties

Readonly axis

axis : Axis

Axis that CustomTick belongs to.

Readonly axisScale

axisScale : LinearScale1D | LogarithmicScale1D

Scale that is used for positioning CustomTick along Axis dimension. Translated to renderingScale in plotting stage as UI system doesn't support nonlinear rendering Scales.

Readonly renderingScale

renderingScale : LinearScaleXY

Scale used for rendering CustomTicks Shapes.

Methods

dispose

  • dispose(): this

  • Disposes all custom tick sub-elements

    Returns this

    This for fluid interface

disposeMarker

  • disposeMarker(): this

  • Remove Marker from rendering collection, so it can be safely trashed by GC

    Returns this

    Object itself for fluent interface

getAllocatesAxisSpace

  • getAllocatesAxisSpace(): boolean

  • Get whether CustomTick should allocate space on its Axis.

    By default, this is true, which means that Axis will always make sure it is big enough to fit the tick.

    By setting to false, this particular CustomTick can be removed from this behaviour, which can be useful in applications where some custom ticks are only enabled temporarily. Disabling this functionality can prevent the size of the Axis from changing in unwanted ways.

    Returns boolean

    Boolean flag.

getGridStrokeLength

  • getGridStrokeLength(): number

  • Returns number

    Grid stroke length as a % of the viewport size

getGridStrokeStyle

  • Returns LineStyle

    Grid stroke style as a LineStyle object

getIsUnderMouse

  • getIsUnderMouse(): boolean

  • Get boolean flag for whether object is currently under mouse or not

    Returns boolean

    Boolean for is object under mouse currently

getMarker

  • Get custom ticks TickMarker (label, tick, possible background).

    Returns TickMarker

    TickMarker object

getMouseInteractions

  • getMouseInteractions(): boolean

  • Returns boolean

    Mouse interactions state

getTickLabelPadding

  • getTickLabelPadding(): pixel

  • Get pixel padding between tick line and label.

    Returns pixel

getTickLabelRotation

  • getTickLabelRotation(): number

  • Get rotation of tick label.

    Returns number

    Rotation in degrees

getTickLength

  • getTickLength(): pixel

  • Get tick length as pixels.

    Returns pixel

    Tick length as pixels.

getValue

  • getValue(): number

  • Value of CustomTick

    Returns number

isDisposed

  • isDisposed(): boolean

  • Returns boolean

    True if all customTick child elements are disposed, false if not.

isDisposedMarker

  • isDisposedMarker(): boolean

  • Returns boolean

    True if visible and False for invisible

isInScale

  • isInScale(): boolean

  • Check that customTick fit the main scale

    Returns boolean

    Boolean with the result

offMouseClick

  • offMouseClick(token: Token): boolean

  • Remove event listener from Mouse Click Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseDoubleClick

  • offMouseDoubleClick(token: Token): boolean

  • Remove event listener from Mouse Double Click Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseDown

  • offMouseDown(token: Token): boolean

  • Remove event listener from Mouse Down Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseDrag

  • offMouseDrag(token: Token): boolean

  • Remove event listener from Mouse Drag Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseDragStart

  • offMouseDragStart(token: Token): boolean

  • Remove event listener from Mouse Drag Start Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseDragStop

  • offMouseDragStop(token: Token): boolean

  • Remove event listener from Mouse Drag Stop Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseEnter

  • offMouseEnter(token: Token): boolean

  • Remove event listener from Mouse Enter Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseLeave

  • offMouseLeave(token: Token): boolean

  • Remove event listener from Mouse Leave Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseMove

  • offMouseMove(token: Token): boolean

  • Remove event listener from Mouse Move Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseUp

  • offMouseUp(token: Token): boolean

  • Remove event listener from Mouse Up Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseWheel

  • offMouseWheel(token: Token): boolean

  • Remove event listener from Mouse Wheel Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offTouchEnd

  • offTouchEnd(token: Token): boolean

  • Remove event listener from Touch End Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offTouchMove

  • offTouchMove(token: Token): boolean

  • Remove event listener from Touch Move Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offTouchStart

  • offTouchStart(token: Token): boolean

  • Remove event listener from Touch Start Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offValueChange

  • offValueChange(token: Token): boolean

  • Unsubscribe from value change event.

    This event is called whenever the position of the CustomTick is changed via CustomTick.setValue.

    Parameters

    • token: Token

      Token that was received when the subscription was created.

    Returns boolean

    True if unsubscription was successful.

onMouseClick

  • Subscribe to Mouse Click event

    Parameters

    • listener: MouseEventHandler<this>

      Function that will be called when mouse clicks the bounds of UiObject.

    Returns Token

    Token-object that is a reference ID to the listener created.

onMouseDoubleClick

  • Subscribe to Mouse Double Click event

    Parameters

    Returns Token

onMouseDown

  • Subscribe to Mouse Down event

    Parameters

    Returns Token

onMouseDrag

onMouseDragStart

onMouseDragStop

onMouseEnter

  • Subscribe to Mouse Enter event

    Parameters

    • listener: MouseEventHandler<this>

      Function that will be called when mouse enters the bounds of UiObject.

    Returns Token

    Token-object that is a reference ID to the listener created.

onMouseLeave

  • Subscribe to Mouse Leave event

    Parameters

    Returns Token

    Token-object that is a reference ID to the listener created.

onMouseMove

  • Subscribe to Mouse Move event

    Parameters

    Returns Token

    Token of subscription

onMouseUp

  • Subscribe to Mouse Up event

    Parameters

    Returns Token

onMouseWheel

  • Subscribe to Mouse Wheel event

    Parameters

    Returns Token

    Token of subscription

onTouchEnd

  • Subscribe to Touch End event

    Parameters

    Returns Token

    Token of subscription

onTouchMove

  • Subscribe to Touch Move event

    Parameters

    Returns Token

    Token of subscription

onTouchStart

  • Subscribe to Touch Start event

    Parameters

    Returns Token

    Token of subscription

onValueChange

  • onValueChange(handler: function): Token

  • Subscribe to value change event. This event is triggered when setValue is called.

    Example usage:

    // Set onValueChange event
CustomTick.onValueChange((num) => {
 console.log(num)
})

// Set customTick value
CustomTick.setValue(20)

    Parameters

    • handler: function

      Function that is called when event is triggered.

        • Parameters

          • value: number

          Returns unknown

    Returns Token

    Token that can be used to unsubscribe from the event.

restore

  • restore(): this

  • Restore all sub-elements of custom tick

    Returns this

    This for fluent interface

restoreMarker

  • restoreMarker(): this

  • Place Marker back to rendering collection, so it became visible again

    Returns this

    Object itself for fluent interface

setAllocatesAxisSpace

  • setAllocatesAxisSpace(shouldAxisAllocateSpace: boolean): this

  • Set whether CustomTick should allocate space on its Axis.

    By default, this is true, which means that Axis will always make sure it is big enough to fit the tick.

    By setting to false, this particular CustomTick can be removed from this behaviour, which can be useful in applications where some custom ticks are only enabled temporarily. Disabling this functionality can prevent the size of the Axis from changing in unwanted ways.

     // Example syntax, disable custom tick space allocation.
 CustomTick.setAllocatesAxisSpace(false)

    Parameters

    • shouldAxisAllocateSpace: boolean

      Boolean flag.

    Returns this

    Object itself for fluent interface.

setGridStrokeLength

  • setGridStrokeLength(length: number): this

  • Set length of grid stroke in percents

    Parameters

    • length: number

      Grid line length as a % of viewport size

    Returns this

    This for fluent interface

setGridStrokeStyle

setMarker

  • Configure custom ticks TickMarker (label, tick, possible background) via a callback function.

    Example usage:

     CustomTick.setMarker((tickMarker) => tickMarker
     // Style TickMarker.
     .setTextFillStyle(new SolidFill({ color: ColorRGBA( 255, 0, 0 ) }))
     .setFont((font) => font.setStyle( 'italic' ))
 )

    See TickMarker for available customization API.

    Styling specific TickMarkers:

    When a custom tick is created, a tick marker builder can be specified. This specifies the shape, and general visual look of the custom tick, and can also expose a larger set of customization API for the tick marker. To use the specific API, it is required to cast the tick marker object to the correct type (TypeScript users only):

     const customTick = Axis.addCustomTick(UIElementBuilders.PointableTextBox)
 customTick.setMarker((tickMarker: UIPointableTextBox) => tickMarker
     // ^ Above type cast is necessary to access full configuration API of UIPointableTextBox
     // Style TickMarker background fill color.
     .setBackground((background) => background
         .setFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0, 100) }))
     )
 )

    For reference,

    • CustomTick created with UIElementBuilders.AxisTick will support API as described by UITick
    • CustomTick created with UIElementBuilders.PointableTextBox will support API as described by UIPointableTextBox

    Parameters

    Returns this

setMouseInteractions

  • setMouseInteractions(state: boolean): this

  • Set mouse interactions enabled or disabled

    Parameters

    • state: boolean

      Specifies state of mouse interactions

    Returns this

    Object itself for fluent interface

setTextFormatter

  • Set text of CustomTicks' Marker with a formatting function.

    Example usage:

    // Marker shows formatted position of CustomTick on its Axis
CustomTick.setTextFormatter((position, customTick) => customTick.axis.formatValue(position))
// Marker shows 'Hello world'
CustomTick.setTextFormatter((position, customTick) => 'Hello world')

    Parameters

    • textFormatter: CustomTickTextFormatter

      A function of type: CustomTickTextFormatter, that defines text of CustomTicks' Marker.

    Returns this

    Object itself

setTickLabelPadding

  • setTickLabelPadding(padding: pixel): this

  • Set pixel padding between tick line and label.

    Parameters

    • padding: pixel

    Returns this

setTickLabelRotation

  • setTickLabelRotation(value: number): this

  • Set rotation of tick label.

    Parameters

    • value: number

      Rotation in degrees

    Returns this

    Object itself

setTickLength

  • setTickLength(length: pixel): this

  • Set tick length as pixels.

    Parameters

    • length: pixel

      Tick length as pixels.

    Returns this

    Object itself for fluent interface.

setValue

  • setValue(value: number): this

  • Sets the position of this custom tick on its Axis

    sideeffect

    Overrides text of CustomTicks Marker with formated value.

    Parameters

    • value: number

      Value in the units of main scale

    Returns this

    This for fluid interface