Class: App

Constructor

new App()

Source: src/app/application.js, line 209

Example

import {App, AppOptions, ViewConfig} from '//esm.sh/dwv';
// create the dwv app
const app = new App();
// initialise
const viewConfig0 = new ViewConfig('layerGroup0');
const viewConfigs = {'*': [viewConfig0]};
const options = new AppOptions(viewConfigs);
app.init(options);
// load dicom data
app.loadURLs([
  'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323851.dcm'
]);

Methods

abortAllLoads()

Abort all the current loads.

Source: src/app/application.js, line 879

abortLoad(dataId)

Abort an individual data load.

Parameters:

Name	Type	Description
`dataId`	string	The data to stop loading.

Source: src/app/application.js, line 891

addAndRenderAnnotationData(data, divId, refDataId)

Add new data and render it with a simple new data view config.

Parameters:

Name	Type	Description
`data`	DicomData	The data to add.
`divId`	string	The div where to draw.
`refDataId`	string	The reference data id.

Source: src/app/application.js, line 1613

addData(data) → {string}

Add a new DicomData.

Parameters:

Name	Type	Description
`data`	DicomData	The new data.

Source: src/app/application.js, line 311

Returns:

The data id.

Type:: string

addDataViewConfig(dataId, config)

Add a data view config.

Parameters:

Name	Type	Description
`dataId`	string	The data id.
`config`	ViewConfig	The view configuration.

Source: src/app/application.js, line 1008

addDrawLayer(dataId, viewConfig)

Add a draw layer.

Parameters:

Name	Type	Description
`dataId`	string	The data id.
`viewConfig`	ViewConfig	The data view config.

Source: src/app/application.js, line 2149

addEventListener(type, callback)

Add an event listener to this class.

Parameters:

Name	Type	Description
`type`	string	The event type.
`callback`	function	The function associated with the provided event type, will be called with the fired event.

Source: src/app/application.js, line 760

addToUndoStack(cmd)

Add a command to the undo stack.

Parameters:

Name	Type	Description
`cmd`	object	The command to add.

Source: src/app/application.js, line 526

Fires:

UndoStack#event:undoadd

applyJsonState(jsonState, dataId)

Apply a JSON state to this app.

Parameters:

Name	Type	Description
`jsonState`	string	The state of the app as a JSON string.
`dataId`	string	The state data id.

Deprecated: Since v0.34, please switch to DICOM SR for annotations.
Source: src/app/application.js, line 1331

canScroll() → {boolean}

Can the data (of the active view of the active layer) be scrolled?

Deprecated: Since v0.33, please use the ViewController equivalent directly instead.
Source: src/app/application.js, line 367

Returns:

True if the data has a third dimension greater than one.

Type:: boolean

canWindowLevel() → {boolean}

Can window and level be applied to the data (of the active view of the active layer)?

Deprecated: Since v0.33, please use the ViewController equivalent directly instead.
Source: src/app/application.js, line 381

Returns:

True if the data is monochrome.

Type:: boolean

createAnnotationData(refDataId) → {DicomData}

Create new annotation data based on the data of the active view layer.

Parameters:

Name	Type	Description
`refDataId`	string	The reference data id.

Source: src/app/application.js, line 1565

Returns:

The new data.

Type:: DicomData

defaultOnKeydown(event)

Key down event handler example.

CRTL-Z: undo,
CRTL-Y: redo,
CRTL-ARROW_LEFT: next element on fourth dim,
CRTL-ARROW_UP: next element on third dim,
CRTL-ARROW_RIGHT: previous element on fourth dim,
CRTL-ARROW_DOWN: previous element on third dim.

Applies to the active view of the active layer group.

Parameters:

Name	Type	Description
`event`	KeyboardEvent	The key down event.

Source: src/app/application.js, line 1384

Fires:

fitToContainer()

Fit the display to the data of each layer group. To be called once the image is loaded.

Source: src/app/application.js, line 906

getActiveLayerGroup() → {LayerGroup|undefined}

Get the active layer group. The layer is available after the first loaded item.

Source: src/app/application.js, line 429

Returns:

The layer group.

Type:: LayerGroup | undefined

getAddedScale() → {Scalar3D}

Get the active layer group scale on top of the base scale.

Source: src/app/application.js, line 392

Returns:

The scale as {x,y,z}.

Type:: Scalar3D

getBaseScale() → {Scalar3D}

Get the base scale of the active layer group.

Source: src/app/application.js, line 401

Returns:

The scale as {x,y,z}.

Type:: Scalar3D

getCurrentStackIndex() → {number}

Get the current undo stack index.

Source: src/app/application.js, line 1524

Returns:

The stack index.

Type:: number

getData(dataId) → {DicomData|undefined}

Get a DicomData.

Parameters:

Name	Type	Description
`dataId`	string	The data id.

Source: src/app/application.js, line 276

Returns:

The data.

Type:: DicomData | undefined

getDataIds() → {Array.<string>}

Get the list of ids in the data storage.

Source: src/app/application.js, line 346

Returns:

The list of data ids.

Type:: Array.<string>

getDataIdsFromSopUids(uids) → {Array.<string>}

Get the list of dataIds that contain the input UIDs.

Parameters:

Name	Type	Description
`uids`	Array.<string>	A list of UIDs.

Source: src/app/application.js, line 356

Returns:

The list of dataIds that contain the UIDs.

Type:: Array.<string>

getDataViewConfigs() → {Object.<string, Array.<ViewConfig>>}

Get the data view config. Carefull, returns a reference, do not modify without resetting.

Source: src/app/application.js, line 983

Returns:

The configuration list.

Type:: Object.<string, Array.<ViewConfig>>

getDrawLayers(callbackFnopt) → {Array.<DrawLayer>}

Get a list of draw layers according to an input callback function.

Parameters:

Name	Type	Attributes	Description
`callbackFn`	function	<optional>	A function that takes a DrawLayer as input and returns a boolean. If undefined, returns all draw layers.

Source: src/app/application.js, line 486

Returns:

The layers that satisfy the callbackFn.

Type:: Array.<DrawLayer>

getDrawLayersByDataId(dataId) → {Array.<DrawLayer>}

Get the draw layers associated to a data id. The layer are available after the first loaded item.

Parameters:

Name	Type	Description
`dataId`	string	The data id.

Source: src/app/application.js, line 473

Returns:

The layers.

Type:: Array.<DrawLayer>

getImage(dataId) → {Image|undefined}

Get the image.

Parameters:

Name	Type	Description
`dataId`	string	The data id.

Deprecated: Since v0.34, please use the getData method.
Source: src/app/application.js, line 287

Returns:

The associated image.

Type:: Image | undefined

getLayerGroupByDivId(divId) → {LayerGroup|undefined}

Get a layer group by div id. The layer is available after the first loaded item.

Parameters:

Name	Type	Description
`divId`	string	The div id.

Source: src/app/application.js, line 497

Returns:

The layer group.

Type:: LayerGroup | undefined

getMetaData(dataId) → {Object.<string, DataElement>|undefined}

Get the meta data.

Parameters:

Name	Type	Description
`dataId`	string	The data id.

Source: src/app/application.js, line 333

Returns:

The list of meta data.

Type:: Object.<string, DataElement> | undefined

getNumberOfLayerGroups() → {number}

Get the number of layer groups.

Source: src/app/application.js, line 506

Returns:

The number of groups.

Type:: number

getOffset() → {Scalar3D}

Get the layer offset of the active layer group.

Source: src/app/application.js, line 410

Returns:

The offset as {x,y,z}.

Type:: Scalar3D

getOverlayData(dataId) → {OverlayData|undefined}

Get the overlay data for a data id.

Parameters:

Name	Type	Description
`dataId`	string	The data id.

Source: src/app/application.js, line 1534

Returns:

The overlay data.

Type:: OverlayData | undefined

getStackSize() → {number}

Get the undo stack size.

Source: src/app/application.js, line 1515

Returns:

The size of the stack.

Type:: number

getStyle() → {object}

Get the app style.

Source: src/app/application.js, line 515

Returns:

The app style.

Type:: object

getToolboxController() → {ToolboxController}

Get the toolbox controller.

Source: src/app/application.js, line 419

Returns:

The controller.

Type:: ToolboxController

getViewConfig(dataId, groupDivId, excludeStarConfigopt) → {ViewConfig|undefined}

Get the layer group configuration for a data id and group div id.

Parameters:

Name	Type	Attributes	Description
`dataId`	string		The data id.
`groupDivId`	string		The layer group div id.
`excludeStarConfig`	boolean	<optional>	Exclude the star config (default to false).

Source: src/app/application.js, line 970

Returns:

The associated config.

Type:: ViewConfig | undefined

getViewConfigs(dataId, excludeStarConfigopt) → {Array.<ViewConfig>}

Get the layer group configuration from a data id.

Parameters:

Name	Type	Attributes	Description
`dataId`	string		The data id.
`excludeStarConfig`	boolean	<optional>	Exclude the star config (default to false).

Source: src/app/application.js, line 941

Returns:

The list of associated configs.

Type:: Array.<ViewConfig>

getViewLayers(callbackFnopt) → {Array.<ViewLayer>}

Get a list of view layers according to an input callback function.

Parameters:

Name	Type	Attributes	Description
`callbackFn`	function	<optional>	A function that takes a ViewLayer as input and returns a boolean. If undefined, returns all view layers.

Source: src/app/application.js, line 462

Returns:

The layers that satisfy the callbackFn.

Type:: Array.<ViewLayer>

getViewLayersByDataId(dataId) → {Array.<ViewLayer>}

Get the view layers associated to a data id. The layer are available after the first loaded item.

Parameters:

Name	Type	Description
`dataId`	string	The data id.

Source: src/app/application.js, line 449

Returns:

The layers.

Type:: Array.<ViewLayer>

init(opt)

Initialise the application.

Parameters:

Name	Type	Description
`opt`	AppOptions	The application options.

Source: src/app/application.js, line 581

Example

import {App, AppOptions, ViewConfig} from '//esm.sh/dwv';
// create the dwv app
const app = new App();
// initialise
const viewConfig0 = new ViewConfig('layerGroup0');
const viewConfigs = {'*': [viewConfig0]};
const options = new AppOptions(viewConfigs);
options.viewOnFirstLoadItem = false;
app.init(options);
// render button
const button = document.createElement('button');
button.id = 'render';
button.disabled = true;
button.appendChild(document.createTextNode('render'));
document.body.appendChild(button);
app.addEventListener('load', function () {
  const button = document.getElementById('render');
  button.disabled = false;
  button.onclick = function () {
    // render data #0
    app.render(0);
  };
});
// load dicom data
app.loadURLs([
  'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323851.dcm'
]);

initWLDisplay()

Init the Window/Level display (of the active layer of the active layer group).

Deprecated: Since v0.33, please set the opacity of the desired view layer directly.
Source: src/app/application.js, line 917

loadFiles(files) → {string}

Load a list of files. Can be image files or a state file.

Parameters:

Name	Type	Description
`files`	Array.<File>	The list of files to load.

Source: src/app/application.js, line 790

Fires:

Returns:

The data ID, '-1' if problem.

Type:: string

loadFromUri(uri, optionsopt)

Load from an input uri.

Parameters:

Name	Type	Attributes	Description
`uri`	string		The input uri, for example: 'window.location.href'.
`options`	object	<optional>	Optional url request options.

Source: src/app/application.js, line 834

loadImageObject(data) → {string}

Load a list of ArrayBuffers.

Parameters:

Name	Type	Description
`data`	Array	The list of ArrayBuffers to load in the form of [{name: "", filename: "", data: data}].

Source: src/app/application.js, line 870

Fires:

Returns:

The data ID.

Type:: string

loadURLs(urls, optionsopt) → {string}

Load a list of URLs. Can be image files or a state file.

Parameters:

Name Type Attributes Description

Name	Type	Attributes	Description
`urls`	Array.<string>		The list of urls to load.
`options`	object	<optional>	The options object, can contain: requestHeaders: an array of {name, value} to use as request headers, withCredentials: boolean xhr.withCredentials flag to pass to the request, batchSize: the size of the request url batch.

urls

Array.<string>

The list of urls to load.

options

object

The options object, can contain:

requestHeaders: an array of {name, value} to use as request headers,
withCredentials: boolean xhr.withCredentials flag to pass to the request,
batchSize: the size of the request url batch.

Source: src/app/application.js, line 817

Fires:

Returns:

The data ID, '-1' if problem.

Type:: string

onKeydown(event)

Key down callback. Meant to be used in tools.

Parameters:

Name	Type	Description
`event`	KeyboardEvent	The key down event.

Source: src/app/application.js, line 1356

Fires:

App#event:keydown

onResize()

Handle resize: fit the display to the window. To be called once the image is loaded. Can be connected to a window 'resize' event.

Source: src/app/application.js, line 1345

redo()

Redo the last action.

Source: src/app/application.js, line 1506

Fires:

UndoStack#event:redo

removeDataViewConfig(dataId, divId)

Remove a data view config. Removes the associated layer if found, removes the layer group if empty.

Parameters:

Name	Type	Description
`dataId`	string	The data id.
`divId`	string	The div id.

Source: src/app/application.js, line 1044

removeEventListener(type, callback)

Remove an event listener from this class.

Parameters:

Name	Type	Description
`type`	string	The event type.
`callback`	function	The function associated with the provided event type.

Source: src/app/application.js, line 771

removeFromUndoStack(name) → {boolean}

Remove a command from the undo stack.

Parameters:

Name	Type	Description
`name`	string	The name of the command to remove.

Source: src/app/application.js, line 540

Fires:

UndoStack#event:undoremove

Returns:

True if the command was found and removed.

Type:: boolean

render(dataId, viewConfigsopt)

Render the current data.

Parameters:

Name	Type	Attributes	Description
`dataId`	string		The data id to render.
`viewConfigs`	Array.<ViewConfig>	<optional>	The list of configs to render.

Source: src/app/application.js, line 1195

reset()

Reset the application.

Source: src/app/application.js, line 715

resetDisplay()

Reset the display.

Source: src/app/application.js, line 1425

resetLayout()

Reset the layout of the application.

Deprecated: Since v0.35, prefer resetZoomPan.
Source: src/app/application.js, line 733

resetViews()

Reset the position and window level of the stage.

Source: src/app/application.js, line 749

resetZoom()

Reset the app zoom.

Source: src/app/application.js, line 1433

resetZoomPan()

Reset the zoom and pan of the stage.

Source: src/app/application.js, line 741

setActiveLayerGroup(index)

Set the active layer group.

Parameters:

Name	Type	Description
`index`	number	The layer group index.

Source: src/app/application.js, line 438

setColourMap(name)

Set the colour map of the active view of the active layer group.

Parameters:

Name	Type	Description
`name`	string	The colour map name.

Deprecated: Since v0.33, please use the ViewController equivalent directly instead.
Source: src/app/application.js, line 1444

setDataViewConfigs(configs)

Set the data view configuration. Resets the stage and recreates all the views.

Parameters:

Name	Type	Description
`configs`	Object.<string, Array.<ViewConfig>>	The configuration list.

Source: src/app/application.js, line 993

setDrawings(drawings, drawingsDetails, dataId)

Set the drawings of the active layer group.

Parameters:

Name	Type	Description
`drawings`	Array	An array of drawings.
`drawingsDetails`	Array	An array of drawings details.
`dataId`	string	The converted data id.

Deprecated: Since v0.34, please switch to DICOM SR annotations.
Source: src/app/application.js, line 1299

setImage(dataId, img)

Set the image at the given id.

Parameters:

Name	Type	Description
`dataId`	string	The data id.
`img`	Image	The associated image.

Source: src/app/application.js, line 301

setImageSmoothing(flag)

Set the imageSmoothing flag value. Default is false.

Parameters:

Name	Type	Description
`flag`	boolean	True to enable smoothing.

Source: src/app/application.js, line 928

setLayerGroupsBinders(list)

Set the layer groups binders.

Parameters:

Name	Type	Description
`list`	Array.<string>	The list of binder names.

Source: src/app/application.js, line 1177

setOpacity(alpha)

Set the active view layer (of the active layer group) opacity.

Parameters:

Name	Type	Description
`alpha`	number	The opacity ([0:1] range).

Deprecated: Since v0.33, pplease set the opacity of the desired view layer directly.
Source: src/app/application.js, line 1285

setTool(tool)

Set the tool.

Parameters:

Name	Type	Description
`tool`	string	The tool.

Source: src/app/application.js, line 1470

setToolFeatures(list)

Set the tool live features.

Parameters:

Name	Type	Description
`list`	object	The list of features.

Source: src/app/application.js, line 1488

setWindowLevelPreset(preset)

Set the window/level preset of the active view of the active layer group.

Parameters:

Name	Type	Description
`preset`	string	The window/level preset.

Deprecated: Since v0.33, please use the ViewController equivalent directly instead.
Source: src/app/application.js, line 1458

toggleOverlayListeners(dataId)

Toggle overlay listeners.

Parameters:

Name	Type	Description
`dataId`	string	The data id.

Source: src/app/application.js, line 1547

translate(tx, ty)

Apply a translation to the layers of the active layer group.

Parameters:

Name	Type	Description
`tx`	number	The translation along X.
`ty`	number	The translation along Y.

Source: src/app/application.js, line 1272

undo()

Undo the last action.

Source: src/app/application.js, line 1497

Fires:

UndoStack#event:undo

updateDataViewConfig(dataId, divId, config)

Update an existing data view config. Removes and re-creates the layer if found.

Parameters:

Name	Type	Description
`dataId`	string	The data id.
`divId`	string	The div id.
`config`	ViewConfig	The view configuration.

Source: src/app/application.js, line 1093

zoom(step, cx, cy)

Zoom the layers of the active layer group.

Parameters:

Name	Type	Description
`step`	number	The step to add to the current zoom.
`cx`	number	The zoom center X coordinate.
`cy`	number	The zoom center Y coordinate.

Source: src/app/application.js, line 1257

Events

abort

Load abort event.

Type:

object

Properties

Name	Type	Description
`type`	string	The event type: abort.
`loadType`	string	The load type: image or state.
`source`	*	The load source: string for an url, File for a file.

Source: src/app/application.js, line 1854

drawlayeradd

Add draw layer event.

Type:

object

Properties

Name	Type	Description
`type`	string	The event type.
`layerid`	string	The layer id.
`layergroupid`	string	The layer group id.
`dataid`	string	The data id.

Source: src/app/application.js, line 2250

error

Load error event.

Type:

object

Properties

Name	Type	Description
`type`	string	The event type: error.
`loadType`	string	The load type: image or state.
`source`	*	The load source: string for an url, File for a file.
`error`	object	The error.
`target`	object	The event target.

Source: src/app/application.js, line 1808

keydown

Key down event.

Type:

KeyboardEvent

Properties

Name	Type	Description
`type`	string	The event type: keydown.
`context`	string	The tool where the event originated.

Source: src/app/application.js, line 1357

load

Load event: fired when a load finishes successfully.

Type:

object

Properties

Name	Type	Description
`type`	string	The event type: load.
`loadType`	string	The load type: image or state.

Source: src/app/application.js, line 1769

loadend

Main load end event: fired when the load finishes, successfully or not.

Type:

object

Properties

Name	Type	Description
`type`	string	The event type: loadend.
`loadType`	string	The load type: image or state.
`source`	*	The load source: string for an url, File for a file.

Source: src/app/application.js, line 1787

loaditem

Load item event: fired when an item has been successfully loaded.

Type:

object

Properties

Name	Type	Description
`type`	string	The event type.
`loadType`	string	The load type: image or state.
`source`	*	The load source: string for an url, File for a file.
`data`	object	The loaded meta data.

Source: src/app/application.js, line 1716

loadprogress

Load progress event.

Type:

object

Properties

Name	Type	Description
`type`	string	The event type: loadprogress.
`loadType`	string	The load type: image or state.
`source`	*	The load source: string for an url, File for a file.
`loaded`	number	The loaded percentage.
`total`	number	The total percentage.

Source: src/app/application.js, line 1679

loadstart

Load start event.

Type:

object

Properties

Name	Type	Description
`type`	string	The event type: loadstart.
`loadType`	string	The load type: image or state.
`source`	*	The load source: string for an url, File for a file.

Source: src/app/application.js, line 1659

opacitychange

Opacity change event.

Type:

object

Properties

Name	Type	Description
`type`	string	The event type.

Source: src/gui/viewLayer.js, line 430

renderend

Render end event.

Type:

object

Properties

Name	Type	Description
`type`	string	The event type.

Source: src/gui/viewLayer.js, line 778

renderstart

Render start event.

Type:

object

Properties

Name	Type	Description
`type`	string	The event type.

Source: src/gui/viewLayer.js, line 733

timeout

Load timeout event.

Type:

object

Properties

Name	Type	Description
`type`	string	The event type: timeout.
`loadType`	string	The load type: image or state.
`source`	*	The load source: an url as a string.
`target`	object	The event target.

Source: src/app/application.js, line 1832

viewlayeradd

Add view layer event.

Type:

object

Properties

Name	Type	Description
`type`	string	The event type.
`layerid`	string	The layer id.
`layergroupid`	string	The layer group id.
`dataid`	string	The data id.

Source: src/app/application.js, line 2055