Class MoleculeViewer


  • MoleculeViewer


  • Create a new MoleculeViewer inside the HTML DOM element with the given id.


    • element: string | HTMLElement

      HTML element or HTML id of the DOM element where the viewer will be created

    Returns MoleculeViewer


_options: StructureOptions
onselect: ((atom: number) => void)

Type declaration

    • (atom: number): void
    • callback called when a new atom is clicked on


      • atom: number

      Returns void

positionSettingsModal: PositioningCallback

Callback to get the initial positioning of the settings modal.

The callback is called once, the first time the settings are opened.


  • Returns a PNG screenshot of the viewer as a URI string

    Returns string

  • Highlight a given atom in the current structure.

    If a supercell larger than [1, 1, 1] is currently displayed, this function accept indexes larger than the result of natoms(), and will then highlight atoms outside of the central image.


    • Optional center: number

      index of the central atom in the environment to show, or undefined to disable highlighting.

    Returns void

  • Get the number of atoms in the structure, or undefined if no structure is currently loaded


    the number of atoms in the currently loaded structure

    Returns undefined | number

  • 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.


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

          • keys: string[]
          • value: unknown

          Returns void

    Returns void

  • Resize the 3Dmol viewer/canvas to the size of the HTML element containing this widget.

    Returns void