NGL@1.0.0-beta.7 Home Manual Reference Source Gallery
import Stage from 'ngl/src/stage/stage.js'
public class | source

Stage

Stage class, central for creating molecular scenes with NGL.

Example:

var stage = new Stage( "elementId", { backgroundColor: "white" } );

Constructor Summary

Public Constructor
public

constructor(idOrElement: String | Element, params: StageParameters)

Create a Stage instance

Member Summary

Public Members
public
public
public
public
public
public
public
public
public
public
public
public
public
public
public

Events emitted by the stage

public
public

Counter that keeps track of various potentially long-running tasks, including file loading and surface calculation.

public

tooltip: Element

Tooltip element

public
public
public

Method Summary

Public Methods
public

Add the given component to the stage

public

Create a component from the given object and add to the stage

public

autoView(duration: Integer): undefined

Add a zoom and a move animation with automatic targets

public

Create default representations for the given component

public

Cleanup when disposing of a stage object

public

eachComponent(callback: Function, type: String): undefined

Iterator over each component and executing the callback

public

Iterator over each representation and executing the callback

public

Get collection of components and representations by name

public

getBox()

public
public

Get collection of components by name

public

Get collection of components by object

public

Get stage parameters

public

Get collection of representations by name

public
public
public

Handle any size-changes of the container element

public

loadFile(path: String | File | Blob, params: LoaderParameters): Promise

Load a file onto the stage

public

Make image from what is shown in a viewer canvas

public

Remove all components from the stage

public

Remove the given component

public
public
public

Set stage parameters

public
public

Set rock

public

setSize(width: String, height: String): undefined

Set width and height

public

Set spin

public

toggleFullscreen(element: Element): undefined

Toggle fullscreen

public

Toggle rock

public

Toggle spin

Public Constructors

public constructor(idOrElement: String | Element, params: StageParameters) source

Create a Stage instance

Params:

NameTypeAttributeDescription
idOrElement String | Element
  • optional

dom id or element

params StageParameters

parameters object

Public Members

public animationBehavior source

public animationControls: AnimationControls source

public compList source

public defaultFileParams source

public keyBehavior source

public keyControls: KeyControls source

public lastFullscreenElement source

public mouseBehavior source

public mouseControls: MouseControls source

public mouseObserver: MouseObserver source

public parameters source

public pickingBehavior source

public pickingControls source

public rockAnimation: RockAnimation source

public signals: StageSignals source

Events emitted by the stage

public spinAnimation: SpinAnimation source

public tasks: Counter source

Counter that keeps track of various potentially long-running tasks, including file loading and surface calculation.

public tooltip: Element source

Tooltip element

public trackballControls source

public viewer source

public viewerControls: ViewerControls source

Public Methods

public addComponent(component: Component): undefined source

Add the given component to the stage

Params:

NameTypeAttributeDescription
component Component

the component to add

Return:

undefined

public addComponentFromObject(object: Script | Shape | Structure | Surface | Volume, params: ComponentParameters): Component source

Create a component from the given object and add to the stage

Params:

NameTypeAttributeDescription
object Script | Shape | Structure | Surface | Volume

the object to add

params ComponentParameters

parameter object

Return:

Component

the created component

public autoView(duration: Integer): undefined source

Add a zoom and a move animation with automatic targets

Params:

NameTypeAttributeDescription
duration Integer

animation time in milliseconds

Return:

undefined

public defaultFileRepresentation(object: StructureComponent | SurfaceComponent): undefined source

Create default representations for the given component

Params:

NameTypeAttributeDescription
object StructureComponent | SurfaceComponent

component to create the representations for

Return:

undefined

public dispose(): undefined source

Cleanup when disposing of a stage object

Return:

undefined

public eachComponent(callback: Function, type: String): undefined source

Iterator over each component and executing the callback

Params:

NameTypeAttributeDescription
callback Function

function to execute

type String

limit iteration to components of this type

Return:

undefined

public eachRepresentation(callback: Function, type: String): undefined source

Iterator over each representation and executing the callback

Params:

NameTypeAttributeDescription
callback Function

function to execute

type String

limit iteration to components of this type

Return:

undefined

public getAnythingByName(name: String | RegExp): Collection source

Get collection of components and representations by name

Params:

NameTypeAttributeDescription
name String | RegExp

the component or representation name

Return:

Collection

collection of selected components and representations

public getBox() source

public getCenter() source

public getComponentsByName(name: String | RegExp, type: String): ComponentCollection source

Get collection of components by name

Params:

NameTypeAttributeDescription
name String | RegExp

the component name

type String

limit iteration to components of this type

Return:

ComponentCollection

collection of selected components

public getComponentsByObject(object: Object): ComponentCollection source

Get collection of components by object

Params:

NameTypeAttributeDescription
object Object

the object to find

Return:

ComponentCollection

collection of selected components

public getParameters(): StageParameters source

Get stage parameters

Return:

StageParameters

parameter object

public getRepresentationsByName(name: String | RegExp, type: String): RepresentationCollection source

Get collection of representations by name

Params:

NameTypeAttributeDescription
name String | RegExp

the representation name

type String

limit iteration to components of this type

Return:

RepresentationCollection

collection of selected components

public getZoom() source

public getZoomForBox() source

public handleResize(): undefined source

Handle any size-changes of the container element

Return:

undefined

public loadFile(path: String | File | Blob, params: LoaderParameters): Promise source

Load a file onto the stage

Params:

NameTypeAttributeDescription
path String | File | Blob

either a URL or an object containing the file data

params LoaderParameters

loading parameters

params.asTrajectory Boolean

load multi-model structures as a trajectory

Return:

Promise

A Promise object that resolves to a StructureComponent, a SurfaceComponent or a ScriptComponent object, depending on the type of the loaded file.

Example:

// load from URL
stage.loadFile( "http://files.rcsb.org/download/5IOS.cif" );
// load binary data in CCP4 format via a Blob
var binaryBlob = new Blob( [ ccp4Data ], { type: 'application/octet-binary'} );
stage.loadFile( binaryBlob, { ext: "ccp4" } );
// load string data in PDB format via a Blob
var stringBlob = new Blob( [ pdbData ], { type: 'text/plain'} );
stage.loadFile( stringBlob, { ext: "pdb" } );
// load a File object
stage.loadFile( file );
// load from URL and add a 'ball+stick' representation with double/triple bonds
stage.loadFile( "http://files.rcsb.org/download/1crn.cif" ).then( function( comp ){
    comp.addRepresentation( "ball+stick", { multipleBond: true } );
} );

public makeImage(params: ImageParameters): Promise source

Make image from what is shown in a viewer canvas

Params:

NameTypeAttributeDescription
params ImageParameters

image generation parameters

Return:

Promise

A Promise object that resolves to an image Blob.

public removeAllComponents(type: String): undefined source

Remove all components from the stage

Params:

NameTypeAttributeDescription
type String
  • optional

component type to remove

Return:

undefined

public removeComponent(component: Component): undefined source

Remove the given component

Params:

NameTypeAttributeDescription
component Component

the component to remove

Return:

undefined

public setFocus() source

public setImpostor() source

public setParameters(params: StageParameters): Stage source

Set stage parameters

Params:

NameTypeAttributeDescription
params StageParameters

stage parameters

Return:

Stage

this object

public setQuality() source

public setRock(flag: Boolean): undefined source

Set rock

Params:

NameTypeAttributeDescription
flag Boolean

if true start rocking and stop spinning

Return:

undefined

public setSize(width: String, height: String): undefined source

Set width and height

Params:

NameTypeAttributeDescription
width String

CSS width value

height String

CSS height value

Return:

undefined

public setSpin(flag: Boolean): undefined source

Set spin

Params:

NameTypeAttributeDescription
flag Boolean

if true start rocking and stop spinning

Return:

undefined

public toggleFullscreen(element: Element): undefined source

Toggle fullscreen

Params:

NameTypeAttributeDescription
element Element
  • optional

document element to put into fullscreen, defaults to the viewer container

Return:

undefined

public toggleRock(): undefined source

Toggle rock

Return:

undefined

public toggleSpin(): undefined source

Toggle spin

Return:

undefined