Class KeyWindowTutorial

The KeyWindowTutorial class provides a way to guide users through a series of steps in the editor. The tutorial is designed to be used with KeyWindow instances and can be used to highlight elements and provide instructions to the user.

The tutorial is a linear sequence of steps that are executed one after the other. Each step can highlight an element and provide a description. A step can also provide a lambda KeyWindowTutorialStep.onEnterStep to prepare the context for the tutorial and another lambda KeyWindowTutorialStep.onExitStep to clean up after the step.

A KeyWindow implementation can return its own tutorial instance by overriding the KeyWindow.createTutorial method. If a tutorial is returned, it will be automatically started when the key window is opened for the first time. The tutorial can be manually started using the beginForKeyWindow method.

Constructors

Properties

activeTutorial: KeyWindowTutorial

Methods

  • Aborts the tutorial.

    Returns void

  • Adds a new step to the KeyWindowTutorial.

    Parameters

    Returns void

  • Adds an array of KeyWindowTutorialStep objects to the current steps.

    Parameters

    Returns void

  • Begins the tutorial for the specified key window.

    Parameters

    • keyWindow: KeyWindow

      The key window for which the tutorial is to be started.

    Returns void

    Error - If the tutorial has already been started for a key window.

  • Handles the logic for progressing through a tutorial step.

    Parameters

    • step: KeyWindowTutorialStep<any>

      The current tutorial step to process.

      This method performs the following actions:

      1. Checks if any active window's UI is null and aborts the tutorial if true.
      2. Finds the active window containing the target element and aborts the tutorial if none is found.
      3. Sets the current step and initializes offline elements.
      4. Adds a dark overlay panel to non-active windows to prevent interaction.
      5. Raises active windows and ensures their layout is current.
      6. Calculates the bounds for the focus element and creates a tutorial overlay with a border animation.
      7. Opens an inline callout window with step details and navigation buttons.
      8. Invokes any additional step-specific options.

    Returns void

  • Invoked when a tutorial step is completed.

    Returns void

  • Invoked when the tutorial is aborted.

    Returns void

  • Invoked when the tutorial is completed.

    Returns void

  • Invoked when the tutorial is ended. This is called when the tutorial is completed or aborted.

    Returns void

  • Tears down the current tutorial step.

    Returns void