Class ViewersGrid

The ViewersGrid class displays a grid of molecule or a crystal viewers in 3D using MoleculeViewer for rendering.

Constructors

constructor

Properties

activeChanged delayChanged loadStructure oncreate onremove onselect

Accessors

active positionSettingsModal

Methods

addViewer applySettings onSettingChange pinned remove removeViewer saveSettings setActive show switchTarget

Constructors

constructor

  • new ViewersGrid(element, indexer, structures, target, properties?, environments?, maxViewers?): ViewersGrid

  • Create a new ViewersGrid inside the HTML element with the given id

    Parameters

    • element: string | HTMLElement

      HTML element or string 'id' of the element where viewer should live

    • indexer: EnvironmentIndexer

      EnvironmentIndexer used to translate indexes from environments index to structure/atom indexes

    • structures: Structure[] | UserStructure[]

      list of structure to display

    • target: DisplayTarget

      widget display modtargete (structure or atom)

    • Optionalproperties: {
          [name: string]: Property;
      }

      list of properties

    • Optionalenvironments: Environment[]

      list of atom-centered environments in the structures, used to highlight the selected environment

    • maxViewers: number = 9

      maximum number of allowed structure viewers

    Returns ViewersGrid

Properties

activeChanged

activeChanged: ((guid: GUID, indexes: Indexes) => void)

Callback fired when the active viewer is changed

Type declaration

    • (guid, indexes): void

    • Parameters

      • guid: GUID

        GUID of the new active viewer

      • indexes: Indexes

        environment showed in the new active viewer

      Returns void

delayChanged

delayChanged: ((delay: number) => void)

Callback fired when the playback delay for structure/atom playback changed

Type declaration

    • (delay): void

    • Parameters

      • delay: number

        the new delay value

      Returns void

loadStructure

loadStructure: ((index: number, structure: unknown) => Structure)

Callback used when a new structure should be loaded

By default, this assumes that the loaded dataset contains Structure directly, and returns the data from there. If the loaded dataset contains UserStructure instead, this callback should be set to transform from data in UserStructure.data to a Structure.

The callback gets two parameter: the structure index (0-based); and the full UserStructure.

oncreate

oncreate: ((guid: GUID, color: string, indexes: Indexes) => void)

Callback fired when a new viewer is created

Type declaration

    • (guid, color, indexes): void

    • Parameters

      • guid: GUID

        GUID of the new viewer

      • color: string

        GUID of the marker indicating the new viewer

      • indexes: Indexes

        environment showed in the new viewer

      Returns void

onremove

onremove: ((guid: GUID) => void)

Callback fired when a viewer is removed from the grid

onselect

onselect: ((indexes: Indexes) => void)

Callback used when the user select an environment

Accessors

active

positionSettingsModal

  • set positionSettingsModal(value): void

  • Set a callback to get the initial positioning of the settings modal of the viewers. The same callback is used for all viewers in the grid.

    The callback gets the current placement of the settings as a DOMRect, and should return top and left positions in pixels, used with position: fixed. The callback is called once, the first time the settings are opened.

    Parameters

    Returns void

Methods

addViewer

  • addViewer(): {
        color: string;
        guid?: GUID;
    }

  • Add a new empty viewer to the grid

    Returns {
        color: string;
        guid?: GUID;
    }

    the GUID and color of the new viewer, the GUID is undefined if we already reached the viewer limit.

    • color: string
    • Optionalguid?: GUID

applySettings

  • applySettings(settings): void

  • Apply the given saved setting to all viewers in the grid.

    The settings must be in viewer creation order.

    Parameters

    • settings: Settings[]

      settings for all viewers in the grid

    Returns void

onSettingChange

  • onSettingChange(callback): void

  • Add the given callback to be called whenever a setting changes. The callback will be given the path to the settings as a list of keys; and the new value of the setting.

    There is currently no way to remove a callback.

    Parameters

    • callback: ((keys: string[], value: unknown) => void)
        • (keys, value): void

        • Parameters

          • keys: string[]
          • value: unknown

          Returns void

    Returns void

pinned

remove

removeViewer

  • removeViewer(guid): void

  • Removes the viewer with the given guid from the viewer grid.

    Parameters

    • guid: GUID

      GUID of the viewer to remove

    Returns void

saveSettings

  • saveSettings(): Settings[]

  • Get the current values of settings for all viewers in the grid.

    The settings are given in viewer creation order.

    Returns Settings[]

    the settings in an array, suitable to be used with applySettings

setActive

  • setActive(guid): void

  • Function to set the active viewer for communicating with the map

    Parameters

    • guid: GUID

      GUID of the viewer to be active

    Returns void

show

  • show(indexes): void

  • Show a new structure, as identified by indexes in the active viewer.

    This will switch to the structure at index indexes.structure, and if environments where passed to the constructor and the current display target is 'atom', highlight the atom-centered environment corresponding to indexes.atom.

    Parameters

    • indexes: Indexes

      structure / atom pair to display

    Returns void

switchTarget

  • switchTarget(target): Promise<void>

  • Change widget display target and adapt the element to the new target

    Parameters

    Returns Promise<void>

Settings

Member Visibility

On This Page

Constructors
Properties
Accessors
Methods