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 full)

Properties

config targetElement fadeElement overlayElement STATUS HIGHLIGHT_PADDING

Accessors

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

Methods

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

Properties

config

config: TourConfig

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

targetElement

targetElement: HTMLElement

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

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

Static STATUS

STATUS: {
    UNSTARTED: string;
    IN_PROGRESS: string;
    COMPLETED: string;
} = ...

Type declaration

  • UNSTARTED: string
  • IN_PROGRESS: string
  • COMPLETED: string

Static HIGHLIGHT_PADDING

HIGHLIGHT_PADDING: number = 10

Padding around a Highlighted Element

Accessors

canStart

  • get canStart(): boolean

  • Returns boolean

id

  • get id(): string

  • The unique identifier of the tour.

    Returns string

title

  • get title(): string

  • The human-readable title for the tour.

    Returns string

description

  • get description(): string

  • The human-readable description of the tour.

    Returns string

namespace

  • get namespace(): string

  • The package namespace for 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

steps

  • get steps(): TourStep[]

  • The configuration of tour steps

    Returns TourStep[]

currentStep

  • get currentStep(): TourStep

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

    Returns TourStep

stepIndex

  • get stepIndex(): number

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

    Returns number

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

status

  • get status(): string

  • The current status of the Tour

    Returns string

Static tourInProgress

  • get tourInProgress(): boolean

  • Indicates if a Tour is currently in progress.

    Returns boolean

Static activeTour

  • get activeTour(): Tour

  • Returns the active Tour, if any

    Returns Tour

Methods

start

  • start(): Promise<void>

  • Returns Promise<void>

_preStep

  • _preStep(): Promise<void>

  • Returns Promise<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

reset

  • reset(): Promise<any>

  • Reset the Tour to an un-started state.

    Returns Promise<any>

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): Promise<any>

  • Progresses to a given Step

    Parameters

    • stepIndex: number

      The step to progress to

    Returns Promise<any>

_reloadProgress

  • _reloadProgress(): void
  • Internal

    Reloads the Tour's current step from the saved progress

    Returns void

Protected _getTargetElement

  • _getTargetElement(selector): Element
  • Protected

    Query the DOM for the target element using the provided selector

    Parameters

    • selector: string

      A CSS selector

    Returns Element

    The target element, or null if not found

Protected _postStep

  • _postStep(): Promise<void>
  • Protected

    Clean-up operations performed after a step is completed.

    Returns Promise<void>

    Abstract

Protected _renderStep

  • _renderStep(): Promise<void>
  • Protected

    Renders the current Step of the Tour

    Returns Promise<void>

Private #activateTool

  • #activateTool(): void

  • Activate a canvas layer and control for each step

    Returns void

Static onMovementAction

  • onMovementAction(movementDirections): boolean

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

    Parameters

    • movementDirections: string[]

      The Directions being moved in

    Returns boolean

Static fromJSON

  • fromJSON(filepath): Promise<Tour>

  • Creates and returns a Tour by loading a JSON file

    Parameters

    • filepath: string

      The path to the JSON file

    Returns Promise<Tour>

Settings

Member Visibility

Theme

On This Page

configtargetElementfadeElementoverlayElementSTATUSHIGHLIGHT_PADDINGcanStartidtitledescriptionnamespacekeystepscurrentStepstepIndexhasNexthasPreviousstatustourInProgressactiveTourstart_preStepcompleteexitresetnextpreviousprogress_reloadProgress_getTargetElement_postStep_renderStep#activateToolonMovementActionfromJSON