Skip to content

Class: SliceViewer

Defined in: src/display/SliceViewer.ts:42

SliceViewer is effectively a "manager" or "facade" that ties together:

  • A SliceModel: tracks current slice index, coordinate, dimension, etc.
  • A SliceView: handles rendering the slice in a PIXI canvas.
  • A SliceController: mediates pointer events, keyboard input, or other user interactions.

Because SliceView also includes its own "layers," SliceViewer might look somewhat redundant at first glance. However, it adds:

  • A single top-level function (create) to initialize model, view, and controller.
  • Central control over the slice index and coordinate via the model.
  • Optionally, consumer-friendly methods like setPosition(...), handleResize(...).

Naming note (SliceView vs SliceViewer): SliceView is the PIXI renderer; SliceViewer is the facade that binds model/view/controller. They are distinct layers, not duplicates.

VIEWER ARCHITECTURE — two stacks exist; prefer the composable one for new code:

  • Composable (recommended): SingleSliceViewer (a single orientation with an event API) composed via ViewSynchronizer for multi-view coordination.
  • High-level convenience: SimpleOrthogonalViewer — a batteries-included 3-up orthogonal viewer (wraps OrthogonalImageViewer).
  • Building blocks (this class, SliceView, SliceController, OrthogonalImageViewer): lower-level primitives the above are built from. Use directly only for custom layouts.

A future major version may unify the two coordination mechanisms (MobX reactions here vs. the EventEmitter used by SingleSliceViewer/ViewSynchronizer) into one; until then both are supported.

Implements

  • ViewerStateInfo

Properties

model

ts
model: ISliceModel;

Defined in: src/display/SliceViewer.ts:47

The SliceModel that stores how many slices exist (totalSlices), which slice index is currently viewed, and the current 3D coordinate.


view

ts
view: ISliceView;

Defined in: src/display/SliceViewer.ts:52

The SliceView that handles rendering via PIXI.


controller

ts
controller: ISliceController;

Defined in: src/display/SliceViewer.ts:57

The SliceController that handles user interactions with the view.

Accessors

currentCoord

Get Signature

ts
get currentCoord(): number[];

Defined in: src/display/SliceViewer.ts:253

The currently visible coordinate in volume space.

Returns

number[]

Implementation of

ts
ViewerStateInfo.currentCoord

currentSliceIndex

Get Signature

ts
get currentSliceIndex(): number;

Defined in: src/display/SliceViewer.ts:261

The integer-based slice index derived from the model's volume geometry.

Returns

number


mouseImagePosition

Get Signature

ts
get mouseImagePosition(): 
  | {
  x: number;
  y: number;
}
  | null;

Defined in: src/display/SliceViewer.ts:270

The last pointer position in image space from the SliceController, e.g. the local 2D coordinate on the slice.

Returns

| { x: number; y: number; } | null


mouseVolumeCoordinate

Get Signature

ts
get mouseVolumeCoordinate(): number[] | null;

Defined in: src/display/SliceViewer.ts:279

The last pointer position in volume space from the SliceController. (Might be useful for readouts or crosshair).

Returns

number[] | null


mouseWorldCoordinate

Get Signature

ts
get mouseWorldCoordinate(): number[] | null;

Defined in: src/display/SliceViewer.ts:287

The last pointer position in world space from the SliceController.

Returns

number[] | null


mouseState

Get Signature

ts
get mouseState(): object;

Defined in: src/display/SliceViewer.ts:334

Returns the current mouse state information. This implements the ViewerStateInfo for compatibility with StatusBar.

Returns

object

viewName
ts
viewName: string | null;
imageCoordinate
ts
imageCoordinate: 
  | {
  x: number;
  y: number;
}
  | null;
volumeCoordinate
ts
volumeCoordinate: number[] | null;
worldCoordinate
ts
worldCoordinate: number[] | null;

Implementation of

ts
ViewerStateInfo.mouseState

sliceIndices

Get Signature

ts
get sliceIndices(): Record<string, number>;

Defined in: src/display/SliceViewer.ts:349

Returns the current slice indices. For SliceViewer, this is a single index, but we return it in a format compatible with the ViewerStateInfo.

Returns

Record<string, number>

Implementation of

ts
ViewerStateInfo.sliceIndices

totalSlices

Get Signature

ts
get totalSlices(): Record<string, number>;

Defined in: src/display/SliceViewer.ts:359

Returns the total number of slices available.

Returns

Record<string, number>

Implementation of

ts
ViewerStateInfo.totalSlices

viewOrientation

Get Signature

ts
get viewOrientation(): AxisSet3D;

Defined in: src/display/SliceViewer.ts:369

Returns the view orientation information.

Returns

AxisSet3D

Implementation of

ts
ViewerStateInfo.viewOrientation

scale

Get Signature

ts
get scale(): number;

Defined in: src/display/SliceViewer.ts:377

Returns the current scale/zoom level of the viewer.

Returns

number

Implementation of

ts
ViewerStateInfo.scale

viewerType

Get Signature

ts
get viewerType(): string;

Defined in: src/display/SliceViewer.ts:385

Identifies this as a slice viewer.

Returns

string

Implementation of

ts
ViewerStateInfo.viewerType

visibleLayers

Get Signature

ts
get visibleLayers(): object[];

Defined in: src/display/SliceViewer.ts:393

Returns information about visible layers.

Returns

object[]

Implementation of

ts
ViewerStateInfo.visibleLayers

Methods

create()

ts
static create(
   domElement, 
   imageLayer, 
   viewAxes, 
   options?): Promise<SliceViewer>;

Defined in: src/display/SliceViewer.ts:120

Factory method for building a fully-initialized SliceViewer (model, view, controller). The view is created asynchronously since it sets up a PIXI Application.

Parameters

domElement

HTMLElement

Container element in the DOM for the canvas.

imageLayer

ImageLayer

The main ImageLayer, containing a VolStack of volumetric data.

viewAxes

AxisSet3D

The orientation for slicing.

options?

Optional config (width, height, showCrosshair, showSlider).

width?

number

height?

number

showCrosshair?

boolean

showSlider?

boolean

Returns

Promise<SliceViewer>

A promise that resolves to the created SliceViewer instance.


setCrosshairVisible()

ts
setCrosshairVisible(visible): void;

Defined in: src/display/SliceViewer.ts:188

Toggle crosshair overlay at runtime for this view.

Parameters

visible

boolean

Returns

void


setOrientationLabelsVisible()

ts
setOrientationLabelsVisible(visible, options?): void;

Defined in: src/display/SliceViewer.ts:215

Toggle anatomical orientation labels (L/R/A/P/S/I) at runtime for this view.

Labels are drawn at a fixed screen size, pinned to the viewport edges, and the letter on each edge is derived from the live image orientation so it always matches what is displayed.

Parameters

visible

boolean

Whether the labels should be shown.

options?

OrientationLabelOptions

Optional styling (font size, color, margin, outline).

Returns

void


setPosition()

ts
setPosition(coord): void;

Defined in: src/display/SliceViewer.ts:242

Sets the 3D coordinate in the model if it differs from the currentCoord. Triggers re-rendering in the SliceView.

Parameters

coord

number[]

The [x,y,z] coordinate to set (in volume space).

Returns

void


handleResize()

ts
handleResize(): void;

Defined in: src/display/SliceViewer.ts:307

Forwards a resize event to the SliceView (which resizes the PIXI renderer and re-fits the slice to screen).

Returns

void


onCurrentSliceIndexChange()

ts
onCurrentSliceIndexChange(handler): IReactionDisposer;

Defined in: src/display/SliceViewer.ts:316

Registers a callback for when the model's currentSliceIndex changes.

Parameters

handler

(index) => void

A function receiving the new slice index.

Returns

IReactionDisposer

A disposer function that unsubscribes the reaction.


onCurrentCoordChange()

ts
onCurrentCoordChange(handler): IReactionDisposer;

Defined in: src/display/SliceViewer.ts:325

Registers a callback for when the model's currentCoord changes.

Parameters

handler

(coord) => void

A function receiving the new [x,y,z] coordinate.

Returns

IReactionDisposer

A disposer function that unsubscribes the reaction.


dispose()

ts
dispose(): void;

Defined in: src/display/SliceViewer.ts:420

Disposes of the viewer and all its resources. Cleans up the view, controller, and any other resources.

Returns

void

Released under the MIT License.