Class CanvasTour

A tour for demonstrating an aspect of Canvas functionality. Automatically activates a certain canvas layer or tool depending on the needs of the step.

Hierarchy (View Summary)

Constructors

constructor

Properties

config fadeElement overlayElement targetElement HIGHLIGHT_PADDING

Accessors

canStart currentStep description hasNext hasPrevious id key namespace status stepIndex steps title activeTour tourInProgress

Methods

_preStep _reloadProgress complete exit next previous progress reset start _getTargetElement _postStep _renderStep fromJSON onMovementAction

Constructors

constructor

  • new CanvasTour(
        config: TourConfig,
        options?: { id?: string; namespace?: string },
    ): CanvasTour

    Construct a Tour by providing a configuration.

    Parameters

    • config: TourConfig

      The configuration of the Tour

    • Optionaloptions: { id?: string; namespace?: string } = {}

      Additional options for configuring the tour

      • Optionalid?: string

        A tour ID that supercedes TourConfig#id

      • Optionalnamespace?: string

        A tour namespace that supercedes TourConfig#namespace

    Returns CanvasTour

Properties

config

config: TourConfig

Configuration of the tour. This object is cloned to avoid mutating the original configuration.

fadeElement

fadeElement: HTMLElement

The HTMLElement that fades out the rest of the screen

overlayElement

overlayElement: any

The HTMLElement that blocks input while a Tour is active

targetElement

targetElement: HTMLElement

The HTMLElement which is the focus of the current tour step.

StaticHIGHLIGHT_PADDING

HIGHLIGHT_PADDING: number = 10

Padding around a Highlighted Element

Accessors

canStart

  • get canStart(): boolean

    Returns boolean

currentStep

  • get currentStep(): null | TourStep

    Return the current Step, or null if the tour has not yet started.

    Returns null | TourStep

description

  • get description(): string

    The human-readable description of the tour.

    Returns string

hasNext

  • get hasNext(): boolean

    Returns True if there is a next TourStep

    Returns boolean

hasPrevious

  • get hasPrevious(): boolean

    Returns True if there is a previous TourStep

    Returns boolean

id

  • get id(): string

    The unique identifier of the tour.

    Returns string

key

  • get key(): string

    The key the Tour is stored under in game.tours, of the form ${namespace}.${id}

    Returns string

namespace

  • get namespace(): string

    The package namespace for the tour.

    Returns string

status

stepIndex

  • get stepIndex(): null | number

    The index of the current step; -1 if the tour has not yet started, or null if the tour is finished.

    Returns null | number

steps

  • get steps(): TourStep[]

    The configuration of tour steps

    Returns TourStep[]

title

  • get title(): string

    The human-readable title for the tour.

    Returns string

StaticactiveTour

  • get activeTour(): null | Tour

    Returns the active Tour, if any

    Returns null | Tour

StatictourInProgress

  • get tourInProgress(): boolean

    Indicates if a Tour is currently in progress.

    Returns boolean

Methods

_preStep

  • _preStep(): Promise<void>

    Returns Promise<void>

_reloadProgress

  • _reloadProgress(): void
    Internal

    Reloads the Tour's current step from the saved progress

    Returns void

complete

  • complete(): Promise<any>

    Advance the tour to a completed state.

    Returns Promise<any>

exit

  • exit(): void

    Exit the tour at the current step.

    Returns void

next

  • next(): Promise<any>

    Progress the Tour to the next step.

    Returns Promise<any>

previous

  • previous(): Promise<any>

    Rewind the Tour to the previous step.

    Returns Promise<any>

progress

  • progress(stepIndex: number): Promise<any>

    Progresses to a given Step

    Parameters

    • stepIndex: number

      The step to progress to

    Returns Promise<any>

reset

  • reset(): Promise<any>

    Reset the Tour to an un-started state.

    Returns Promise<any>

start

  • start(): Promise<void>

    Returns Promise<void>

Protected_getTargetElement

  • _getTargetElement(selector: string): null | Element
    Protected

    Query the DOM for the target element using the provided selector

    Parameters

    • selector: string

      A CSS selector

    Returns null | Element

    The target element, or null if not found

Protected Abstract_postStep

  • _postStep(): Promise<void>
    Protected

    Clean-up operations performed after a step is completed.

    Returns Promise<void>

Protected_renderStep

  • _renderStep(): Promise<void>
    Protected

    Renders the current Step of the Tour

    Returns Promise<void>

StaticfromJSON

  • fromJSON(filepath: string): Promise<Tour>

    Creates and returns a Tour by loading a JSON file

    Parameters

    • filepath: string

      The path to the JSON file

    Returns Promise<Tour>

StaticonMovementAction

  • onMovementAction(movementDirections: string[]): true | void

    Handle a movement action to either progress or regress the Tour.

    Parameters

    • movementDirections: string[]

      The Directions being moved in

    Returns true | void

Settings

Member Visibility

On This Page

Constructors
Properties
Accessors
Methods