Class: SingleSliceViewer

Defined in: src/display/SingleSliceViewer.ts:165

SingleSliceViewer provides a simplified, event-driven API for creating individual slice views (axial, sagittal, or coronal) that can be easily composed into custom layouts.

This is the recommended (canonical) composable view API. For multi-view coordination, combine several SingleSliceViewers with ViewSynchronizer; for a batteries-included 3-up layout use SimpleOrthogonalViewer. See the architecture note on SliceViewer for how the viewer layers relate.

This class wraps SliceViewer and adds:

Convenient factory methods for standard orientations
Type-safe event system for coordination
Direct access to coordinate transformers
Easy-to-use API for external applications

Example

typescript

// Create a standalone axial view
const axialView = await SingleSliceViewer.createAxial(
  document.getElementById('axial-panel'),
  volStack,
  { showCrosshair: true }
);

// Listen to coordinate changes
axialView.onCoordChange(coord => {
  console.log('New coordinate:', coord);
});

// Listen to pointer events
axialView.on('pointerMove', ({ worldCoord }) => {
  console.log('Mouse at:', worldCoord);
});

Methods

createAxial()

static createAxial(
   container, 
   volStack, 
   options?): Promise<SingleSliceViewer>;

Defined in: src/display/SingleSliceViewer.ts:217

Create an axial view (looking down through the head)

Parameters

container

HTMLElement

DOM element to attach the viewer to

volStack

VolStack

Volume data to display

options?

SingleSliceViewerOptions

Configuration options

Returns

Promise<SingleSliceViewer>

Promise resolving to the created viewer

createSagittal()

static createSagittal(
   container, 
   volStack, 
   options?): Promise<SingleSliceViewer>;

Defined in: src/display/SingleSliceViewer.ts:233

Create a sagittal view (looking from the side)

Parameters

container

HTMLElement

DOM element to attach the viewer to

volStack

VolStack

Volume data to display

options?

SingleSliceViewerOptions

Configuration options

Returns

Promise<SingleSliceViewer>

Promise resolving to the created viewer

createCoronal()

static createCoronal(
   container, 
   volStack, 
   options?): Promise<SingleSliceViewer>;

Defined in: src/display/SingleSliceViewer.ts:249

Create a coronal view (looking from the front)

Parameters

container

HTMLElement

DOM element to attach the viewer to

volStack

VolStack

Volume data to display

options?

SingleSliceViewerOptions

Configuration options

Returns

Promise<SingleSliceViewer>

Promise resolving to the created viewer

create()

static create(
   container, 
   volStack, 
   orientation, 
   options?): Promise<SingleSliceViewer>;

Defined in: src/display/SingleSliceViewer.ts:266

Create a view with a custom orientation

Parameters

container

HTMLElement

DOM element to attach the viewer to

volStack

VolStack

Volume data to display

orientation

AxisSet3D

Custom axis set defining the orientation

options?

SingleSliceViewerOptions

Configuration options

Returns

Promise<SingleSliceViewer>

Promise resolving to the created viewer

on()

on<K>(event, handler): () => void;

Defined in: src/display/SingleSliceViewer.ts:382

Subscribe to an event

Type Parameters

K

K extends keyof SingleSliceViewerEvents

Parameters

event

K

Event name

handler

(...args) => void

Event handler function

Returns

Unsubscribe function

() => void

onCoordChange()

onCoordChange(handler): () => void;

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

Subscribe to coordinate changes (convenience method)

Parameters

handler

(coord) => void

Function called when coordinate changes

Returns

Unsubscribe function

() => void

onSliceChange()

onSliceChange(handler): () => void;

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

Subscribe to slice index changes (convenience method)

Parameters

handler

(index) => void

Function called when slice index changes

Returns

Unsubscribe function

() => void

onPointerMove()

onPointerMove(handler): () => void;

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

Subscribe to pointer move events (convenience method)

Parameters

handler

(event) => void

Function called on pointer move

Returns

Unsubscribe function

() => void

onPointerDown()

onPointerDown(handler): () => void;

Defined in: src/display/SingleSliceViewer.ts:429

Subscribe to pointer down events (convenience method)

Parameters

handler

(event) => void

Function called on pointer down

Returns

Unsubscribe function

() => void

getCurrentCoord()

getCurrentCoord(): number[];

Defined in: src/display/SingleSliceViewer.ts:440

Get the current coordinate in world space (mm)

Returns

number[]

setCoord()

setCoord(coord): void;

Defined in: src/display/SingleSliceViewer.ts:449

Set the current coordinate in world space (mm)

Parameters

coord

number[]

World coordinate [x, y, z] in mm

Returns

void

setMarkers()

setMarkers(markers, options?): void;

Defined in: src/display/SingleSliceViewer.ts:454

Draw world-coordinate point markers with a constant screen-pixel size.

Parameters

markers

PointMarker[]

options?

PointMarkerOptions = {}

Returns

void

markersOnSlice()

markersOnSlice(): string[];

Defined in: src/display/SingleSliceViewer.ts:467

IDs of markers actually drawn in the current slice and viewport.

Returns

string[]

worldToSliceIndex()

worldToSliceIndex(xyz): number;

Defined in: src/display/SingleSliceViewer.ts:472

Slice index selected by the same rounding rule as the viewer model.

Parameters

xyz

[number, number, number]

Returns

number

getCurrentSliceIndex()

getCurrentSliceIndex(): number;

Defined in: src/display/SingleSliceViewer.ts:480

Get the current slice index

Returns

number

getMouseImagePosition()

getMouseImagePosition(): 
  | {
  x: number;
  y: number;
}
  | null;

Defined in: src/display/SingleSliceViewer.ts:487

Get the current mouse position in image coordinates

Returns

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

getMouseVolumeCoordinate()

getMouseVolumeCoordinate(): number[] | null;

Defined in: src/display/SingleSliceViewer.ts:494

Get the current mouse position in volume coordinates

Returns

number[] | null

getMouseWorldCoordinate()

getMouseWorldCoordinate(): number[] | null;

Defined in: src/display/SingleSliceViewer.ts:501

Get the current mouse position in world coordinates

Returns

number[] | null

getCoordinateTransformer()

getCoordinateTransformer(): ICoordinateTransformer;

Defined in: src/display/SingleSliceViewer.ts:509

Get the coordinate transformer for this view Useful for custom coordinate conversions

Returns

ICoordinateTransformer

getOrientation()

getOrientation(): AxisSet3D;

Defined in: src/display/SingleSliceViewer.ts:516

Get the orientation of this view

Returns

AxisSet3D

getCanvas()

getCanvas(): HTMLCanvasElement;

Defined in: src/display/SingleSliceViewer.ts:523

Get the canvas element

Returns

HTMLCanvasElement

setCrosshairVisible()

setCrosshairVisible(visible): void;

Defined in: src/display/SingleSliceViewer.ts:532

Toggle crosshair visibility

Parameters

visible

boolean

Whether to show the crosshair

Returns

void

setOrientationLabelsVisible()

setOrientationLabelsVisible(visible, options?): void;

Defined in: src/display/SingleSliceViewer.ts:542

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

Parameters

visible

boolean

Whether to show the labels

options?

OrientationLabelOptions

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

Returns

void

setBackground()

setBackground(color, alpha?): void;

Defined in: src/display/SingleSliceViewer.ts:547

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/SingleSliceViewer.ts:552

Restyles the crosshair in place; omitted fields keep their value.

Parameters

options

CrossHairOptions

Returns

void

setOrientationLabelStyle()

setOrientationLabelStyle(options): void;

Defined in: src/display/SingleSliceViewer.ts:557

Restyles the orientation labels in place; omitted fields keep their value.

Parameters

options

OrientationLabelOptions

Returns

void

setTheme()

setTheme(theme): void;

Defined in: src/display/SingleSliceViewer.ts:562

Applies a (partial) theme — background, crosshair, labels — without a rebuild.

Parameters

theme

ViewerTheme

Returns

void

handleResize()

handleResize(): void;

Defined in: src/display/SingleSliceViewer.ts:569

Handle resize events (call when container size changes)

Returns

void

getScale()

getScale(): number;

Defined in: src/display/SingleSliceViewer.ts:576

Get the current scale/zoom level

Returns

number

getWidth()

getWidth(): number;

Defined in: src/display/SingleSliceViewer.ts:583

Get the width of the view in pixels

Returns

number

getHeight()

getHeight(): number;

Defined in: src/display/SingleSliceViewer.ts:590

Get the height of the view in pixels

Returns

number

getImageLayer()

getImageLayer(): ImageLayer | null;

Defined in: src/display/SingleSliceViewer.ts:598

Get the ImageLayer used by this viewer. Useful for connecting external controls (e.g. LayerControlPanel) to the VolStack.

Returns

ImageLayer | null

setZoom()

setZoom(level): void;

Defined in: src/display/SingleSliceViewer.ts:620

Set the zoom level for this view

Parameters

level

number

Zoom level (1.0 = no zoom, >1 = zoom in, <1 = zoom out)

Returns

void

getZoom()

getZoom(): number;

Defined in: src/display/SingleSliceViewer.ts:631

Get the current zoom level

Returns

number

setPan()

setPan(offset): void;

Defined in: src/display/SingleSliceViewer.ts:641

Set the pan offset

Parameters

offset

Pan offset in pixels { x, y }

x

number

y

number

Returns

void

getPan()

getPan(): object;

Defined in: src/display/SingleSliceViewer.ts:651

Get the current pan offset

Returns

object

x

x: number;

y

y: number;

resetView()

resetView(): void;

Defined in: src/display/SingleSliceViewer.ts:659

Reset zoom and pan to defaults

Returns

void

isDepthEnhancementEnabled()

isDepthEnhancementEnabled(): boolean;

Defined in: src/display/SingleSliceViewer.ts:674

Check if depth enhancement is enabled

Returns

boolean

setDepthEnhancementEnabled()

setDepthEnhancementEnabled(enabled): void;

Defined in: src/display/SingleSliceViewer.ts:683

Enable or disable depth enhancement

Parameters

enabled

boolean

Whether to enable depth enhancement

Returns

void

getDepthEnhancementOptions()

getDepthEnhancementOptions(): DepthEnhancedOptions | null;

Defined in: src/display/SingleSliceViewer.ts:692

Get current depth enhancement options

Returns

DepthEnhancedOptions | null

setDepthEnhancementOptions()

setDepthEnhancementOptions(options): void;

Defined in: src/display/SingleSliceViewer.ts:701

Update depth enhancement options

Parameters

options

Partial<DepthEnhancedOptions>

Partial options to update

Returns

void

hasDepthEnhancement()

hasDepthEnhancement(): boolean;

Defined in: src/display/SingleSliceViewer.ts:711

Check if depth enhancement layer is available (only true if enableDepthEnhancement was set during creation)

Returns

boolean

dispose()

dispose(): void;

Defined in: src/display/SingleSliceViewer.ts:718

Dispose of the viewer and clean up all resources

Returns

void

Class: SingleSliceViewer ​

Example ​

Methods ​

createAxial() ​

Parameters ​

container ​

volStack ​

options? ​

Returns ​

createSagittal() ​

Parameters ​

container ​

volStack ​

options? ​

Returns ​

createCoronal() ​

Parameters ​

container ​

volStack ​

options? ​

Returns ​

create() ​

Parameters ​

container ​

volStack ​

orientation ​

options? ​

Returns ​

on() ​

Type Parameters ​

K ​

Parameters ​

event ​

handler ​

Returns ​

onCoordChange() ​

Parameters ​

handler ​

Returns ​

onSliceChange() ​

Parameters ​

handler ​

Returns ​

onPointerMove() ​

Parameters ​

handler ​

Returns ​

onPointerDown() ​

Parameters ​

handler ​

Returns ​

getCurrentCoord() ​

Returns ​

setCoord() ​

Parameters ​

coord ​

Returns ​

setMarkers() ​

Parameters ​

markers ​

options? ​

Returns ​

markersOnSlice() ​

Returns ​

worldToSliceIndex() ​

Parameters ​

xyz ​

Returns ​

getCurrentSliceIndex() ​

Returns ​

getMouseImagePosition() ​

Returns ​

getMouseVolumeCoordinate() ​

Returns ​

getMouseWorldCoordinate() ​

Returns ​

getCoordinateTransformer() ​

Returns ​

getOrientation() ​

Returns ​

Class: SingleSliceViewer

Example

Methods

createAxial()

Parameters

container

volStack

options?

Returns

createSagittal()

Parameters

container

volStack

options?

Returns

createCoronal()

Parameters

container

volStack

options?

Returns

create()

Parameters

container

volStack

orientation

options?

Returns

on()

Type Parameters

K

Parameters

event

handler

Returns

onCoordChange()

Parameters

handler

Returns

onSliceChange()

Parameters

handler

Returns

onPointerMove()

Parameters

handler

Returns

onPointerDown()

Parameters

handler

Returns

getCurrentCoord()

Returns

setCoord()

Parameters

coord

Returns

setMarkers()

Parameters

markers

options?

Returns

markersOnSlice()

Returns

worldToSliceIndex()

Parameters

xyz

Returns

getCurrentSliceIndex()

Returns

getMouseImagePosition()

Returns

getMouseVolumeCoordinate()

Returns

getMouseWorldCoordinate()

Returns

getCoordinateTransformer()

Returns

getOrientation()

Returns