Class: SliceViewer

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

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

model: ISliceModel;

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

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

---

view

view: ISliceView;

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

The SliceView that handles rendering via PIXI.

---

controller

controller: ISliceController;

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

The SliceController that handles user interactions with the view.

Accessors

currentCoord

Get Signature

get currentCoord(): number[];

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

The currently visible coordinate in volume space.

Returns

number[]

Current 3D coordinate position in the volume. This is typically the focal point or crosshair position.

Implementation of

ViewerStateInfo.currentCoord

---

currentSliceIndex

Get Signature

get currentSliceIndex(): number;

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

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

Returns

number

---

mouseImagePosition

Get Signature

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

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

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

get mouseVolumeCoordinate(): number[] | null;

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

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

Returns

number[] | null

---

mouseWorldCoordinate

Get Signature

get mouseWorldCoordinate(): number[] | null;

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

The last pointer position in world space from the SliceController.

Returns

number[] | null

---

mouseState

Get Signature

get mouseState(): object;

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

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

Returns

object

viewName

viewName: string | null;

imageCoordinate

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

volumeCoordinate

volumeCoordinate: number[] | null;

worldCoordinate

worldCoordinate: number[] | null;

Information about the current mouse position and related coordinates. Contains details about which view the mouse is over and coordinates in both 2D (image) and 3D (volume) space.

Implementation of

ViewerStateInfo.mouseState

---

sliceIndices

Get Signature

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

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

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>

Information about current slice indices in different orientations. For single-slice viewers, this may have only one relevant property. For orthogonal viewers, it has properties for each orientation.

Implementation of

ViewerStateInfo.sliceIndices

---

totalSlices

Get Signature

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

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

Returns the total number of slices available.

Returns

Record<string, number>

Information about the total number of slices available in each view. For single-slice viewers, this may have only one property. For orthogonal viewers, it has properties for each orientation.

Implementation of

ViewerStateInfo.totalSlices

---

viewOrientation

Get Signature

get viewOrientation(): AxisSet3D;

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

Returns the view orientation information.

Returns

AxisSet3D

The axis orientation(s) currently being displayed. For SliceViewer, this is a single AxisSet3D. For OrthogonalImageViewer, this could be a record of orientations by view name.

Implementation of

ViewerStateInfo.viewOrientation

---

scale

Get Signature

get scale(): number;

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

Returns the current scale/zoom level of the viewer.

Returns

number

The current scaling/zoom level of the viewer(s). For single-slice viewers, this is a single value. For orthogonal viewers, it may have multiple values by view name.

Implementation of

ViewerStateInfo.scale

---

viewerType

Get Signature

get viewerType(): string;

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

Identifies this as a slice viewer.

Returns

string

Identifies the type of viewer. Useful for UI components that need to adapt based on viewer type.

Implementation of

ViewerStateInfo.viewerType

---

visibleLayers

Get Signature

get visibleLayers(): object[];

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

Returns information about visible layers.

Returns

object[]

Information about which layers are currently visible/active. This can include layer IDs, opacity values, etc.

Implementation of

ViewerStateInfo.visibleLayers

Methods

create()

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

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

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?

SliceViewOptions

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

Returns

Promise<SliceViewer>

A promise that resolves to the created SliceViewer instance.

---

setCrosshairVisible()

setCrosshairVisible(visible): void;

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

Toggle crosshair overlay at runtime for this view.

Parameters

visible

boolean

Returns

void

---

setOrientationLabelsVisible()

setOrientationLabelsVisible(visible, options?): void;

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

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

---

setBackground()

setBackground(color, alpha?): void;

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

Changes the canvas clear colour (and optionally alpha) in place.

Parameters

color

number

alpha?

number

Returns

void

---

setCrosshairStyle()

setCrosshairStyle(options): void;

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

Restyles the crosshair in place (colour, alpha, halo, width, gap). The styling is kept for a crosshair shown later via setCrosshairVisible(true).

Parameters

options

CrossHairOptions

Returns

void

---

setOrientationLabelStyle()

setOrientationLabelStyle(options): void;

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

Restyles the orientation labels in place (colour, alpha, stroke, shadow, font). The styling is kept for labels shown later.

Parameters

options

OrientationLabelOptions

Returns

void

---

setTheme()

setTheme(theme): void;

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

Applies a (partial) theme: background, crosshair and orientation labels, without rebuilding the view.

Parameters

theme

ViewerTheme

Returns

void

---

setPosition()

setPosition(coord): void;

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

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()

handleResize(): void;

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

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

Returns

void

---

onCurrentSliceIndexChange()

onCurrentSliceIndexChange(handler): IReactionDisposer;

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

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()

onCurrentCoordChange(handler): IReactionDisposer;

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

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()

dispose(): void;

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

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

Returns

void