Interface SvelteReactive

Contains the reactive functionality / Svelte stores associated with SvelteApplication and retrievable by SvelteApplication.reactive.

There are several reactive getters for UI state such and for two-way bindings / stores see SvelteReactive.storeUIState:

There are also reactive getters / setters for SvelteApplicationOptions and Foundry ApplicationOptions. You can use the following as one way bindings and update the associated stores. For two-way bindings / stores see SvelteReactive.storeAppOptions.

An instance of TJSWebStorage (session) / TJSSessionStorage is accessible via SvelteReactive.sessionStorage. Optionally you can pass in an existing TJSWebStorage instance that can be shared across multiple SvelteApplications by setting SvelteApplicationOptions.sessionStorage.

This API is not sealed, and it is recommended that you extend it with accessors to get / set data that is reactive in your application. An example of setting an exported prop document from the main mounted application shell.

Example

import { hasSetter } from '#runtime/util/object';

// Note: make a normal comment.
//  * @member {object} document - Adds accessors to SvelteReactive to get / set the document associated with
//  *                             Document with the mounted application shell Svelte component.
//  *
//  * @memberof SvelteReactive#
//  *
Object.defineProperty(this.reactive, 'document', {
   get: () => this.svelte?.applicationShell?.document,
   set: (document) =>
   {
      const component = this.svelte?.applicationShell;
      if (hasSetter(component, 'document')) { component.document = document; }
   }
});
interface SvelteReactive {
    draggable: boolean;
    get dragging(): boolean;
    focusAuto: boolean;
    focusKeep: boolean;
    focusTrap: boolean;
    headerButtonNoClose: boolean;
    headerButtonNoLabel: boolean;
    headerIcon: string;
    headerNoTitleMinimized: boolean;
    minimizable: boolean;
    get minimized(): boolean;
    popOut: boolean;
    positionable: boolean;
    resizable: boolean;
    get resizing(): boolean;
    get sessionStorage(): TJSWebStorage;
    get storeAppOptions(): StoreAppOptions;
    get storeUIState(): StoreUIOptions;
    title: string;
    getOptions(accessor, defaultValue?): any;
    mergeOptions(options): void;
    setOptions(accessor, value): void;
    updateHeaderButtons(opts?): void;
}

Accessors

draggable dragging focusAuto focusKeep focusTrap headerButtonNoClose headerButtonNoLabel headerIcon headerNoTitleMinimized minimizable minimized popOut positionable resizable resizing sessionStorage storeAppOptions storeUIState title

Methods

getOptions mergeOptions setOptions updateHeaderButtons

Accessors

draggable

  • get draggable(): boolean

  • Returns the draggable app option.

    Returns boolean

    Draggable app option.

  • set draggable(draggable): void

  • Sets this.options.draggable which is reactive for application shells.

    Parameters

    • draggable: boolean

      Sets the draggable option.

    Returns void

dragging

  • get dragging(): boolean

  • Returns the current dragging UI state.

    Returns boolean

    Dragging UI state.

focusAuto

  • get focusAuto(): boolean

  • Returns the focusAuto app option.

    Returns boolean

    When true auto-management of app focus is enabled.

  • set focusAuto(focusAuto): void

  • Sets this.options.focusAuto which is reactive for application shells.

    Parameters

    • focusAuto: boolean

      Sets the focusAuto option.

    Returns void

focusKeep

  • get focusKeep(): boolean

  • Returns the focusKeep app option.

    Returns boolean

    When focusAuto and focusKeep is true; keeps internal focus.

  • set focusKeep(focusKeep): void

  • Sets this.options.focusKeep which is reactive for application shells.

    Parameters

    • focusKeep: boolean

      Sets the focusKeep option.

    Returns void

focusTrap

  • get focusTrap(): boolean

  • Returns the focusTrap app option.

    Returns boolean

    When true focus trapping / wrapping is enabled keeping focus inside app.

  • set focusTrap(focusTrap): void

  • Sets this.options.focusTrap which is reactive for application shells.

    Parameters

    • focusTrap: boolean

      Sets the focusTrap option.

    Returns void

headerButtonNoClose

  • get headerButtonNoClose(): boolean

  • Returns the headerButtonNoClose app option.

    Returns boolean

    Remove the close the button in header app option.

  • set headerButtonNoClose(headerButtonNoClose): void

  • Sets this.options.headerButtonNoClose which is reactive for application shells.

    Parameters

    • headerButtonNoClose: boolean

      Sets the headerButtonNoClose option.

    Returns void

headerButtonNoLabel

  • get headerButtonNoLabel(): boolean

  • Returns the headerButtonNoLabel app option.

    Returns boolean

    Remove the labels from buttons in header app option.

  • set headerButtonNoLabel(headerButtonNoLabel): void

  • Sets this.options.headerButtonNoLabel which is reactive for application shells.

    Parameters

    • headerButtonNoLabel: boolean

      Sets the headerButtonNoLabel option.

    Returns void

headerIcon

  • get headerIcon(): string

  • Returns the headerIcon app option.

    Returns string

    URL for header app icon.

  • set headerIcon(headerIcon): void

  • Sets this.options.headerIcon which is reactive for application shells.

    Parameters

    • headerIcon: string

      Sets the headerButtonNoLabel option.

    Returns void

headerNoTitleMinimized

  • get headerNoTitleMinimized(): boolean

  • Returns the headerNoTitleMinimized app option.

    Returns boolean

    When true removes the header title when minimized.

  • set headerNoTitleMinimized(headerNoTitleMinimized): void

  • Sets this.options.headerNoTitleMinimized which is reactive for application shells.

    Parameters

    • headerNoTitleMinimized: boolean

      Sets the headerNoTitleMinimized option.

    Returns void

minimizable

  • get minimizable(): boolean

  • Returns the minimizable app option.

    Returns boolean

    Minimizable app option.

  • set minimizable(minimizable): void

  • Sets this.options.minimizable which is reactive for application shells that are also pop out.

    Parameters

    • minimizable: boolean

      Sets the minimizable option.

    Returns void

minimized

  • get minimized(): boolean

  • Returns the current minimized UI state.

    Returns boolean

    Minimized UI state.

popOut

  • get popOut(): boolean

  • Returns the Foundry popOut state; ApplicationOptions.popOut

    Returns boolean

    Positionable app option.

  • set popOut(popOut): void

  • Sets this.options.popOut which is reactive for application shells. This will add / remove this application from ui.windows.

    Parameters

    • popOut: boolean

      Sets the popOut option.

    Returns void

positionable

  • get positionable(): boolean

  • Returns the positionable app option; SvelteApplicationOptions.positionable

    Returns boolean

    Positionable app option.

  • set positionable(positionable): void

  • Sets this.options.positionable enabling / disabling SvelteApplication.position.

    Parameters

    • positionable: boolean

      Sets the positionable option.

    Returns void

resizable

  • get resizable(): boolean

  • Returns the resizable option.

    Returns boolean

    Resizable app option.

  • set resizable(resizable): void

  • Sets this.options.resizable which is reactive for application shells.

    Parameters

    • resizable: boolean

      Sets the resizable option.

    Returns void

resizing

  • get resizing(): boolean

  • Returns the current resizing UI state.

    Returns boolean

    Resizing UI state.

sessionStorage

storeAppOptions

storeUIState

title

  • get title(): string

  • Returns the title accessor from the parent Application class; ApplicationOptions.title

    Returns string

    Title.

  • set title(title): void

  • Sets this.options.title which is reactive for application shells.

    Note: Will set empty string if title is undefined or null.

    Parameters

    • title: string

      Application title; will be localized, so a translation key is fine.

    Returns void

Methods

getOptions

  • getOptions(accessor, defaultValue?): any

  • Provides a way to safely get this applications options given an accessor string which describes the entries to walk. To access deeper entries into the object format the accessor string with . between entries to walk.

    Parameters

    • accessor: string

      The path / key to set. You can set multiple levels.

    • Optional defaultValue: any

      A default value returned if the accessor is not found.

    Returns any

    Value at the accessor.

mergeOptions

  • mergeOptions(options): void

  • Provides a way to merge options into this applications options and update the appOptions store.

    Parameters

    • options: object

      The options object to merge with this.options.

    Returns void

setOptions

  • setOptions(accessor, value): void

  • Provides a way to safely set this applications options given an accessor string which describes the entries to walk. To access deeper entries into the object format the accessor string with . between entries to walk.

    Additionally, if an application shell Svelte component is mounted and exports the appOptions property then the application options is set to appOptions potentially updating the application shell / Svelte component.

    Parameters

    • accessor: string

      The path / key to set. You can set multiple levels.

    • value: any

      Value to set.

    Returns void

updateHeaderButtons

  • updateHeaderButtons(opts?): void

  • Updates the UI Options store with the current header buttons. You may dynamically add / remove header buttons if using an application shell Svelte component. In either overriding _getHeaderButtons or responding to the Hooks fired return a new button array and the uiOptions store is updated and the application shell will render the new buttons.

    Optionally you can set in the SvelteApplication app options SvelteApplicationOptions.headerButtonNoClose to remove the close button and SvelteApplicationOptions.headerButtonNoLabel to true and labels will be removed from the header buttons.

    Parameters

    • Optional opts: {
          headerButtonNoClose?: boolean;
          headerButtonNoLabel?: boolean;
      }

      Optional parameters (for internal use)

      • Optional headerButtonNoClose?: boolean

        The value for headerButtonNoClose.

      • Optional headerButtonNoLabel?: boolean

        The value for headerButtonNoLabel.

    Returns void

Settings

Member Visibility

Theme

On This Page