neuroimjs

Appearance

Class: SingleSliceViewer ​

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ts
onCoordChange(handler): () => void;

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

Subscribe to coordinate changes (convenience method)

Parameters ​

handler ​

(coord) => void

Function called when coordinate changes

Returns ​

Unsubscribe function

() => void

onSliceChange() ​

ts
onSliceChange(handler): () => void;

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

Subscribe to slice index changes (convenience method)

Parameters ​

handler ​

(index) => void

Function called when slice index changes

Returns ​

Unsubscribe function

() => void

onPointerMove() ​

ts
onPointerMove(handler): () => void;

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

Subscribe to pointer move events (convenience method)

Parameters ​

handler ​

(event) => void

Function called on pointer move

Returns ​

Unsubscribe function

() => void

onPointerDown() ​

ts
onPointerDown(handler): () => void;

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

Subscribe to pointer down events (convenience method)

Parameters ​

handler ​

(event) => void

Function called on pointer down

Returns ​

Unsubscribe function

() => void

getCurrentCoord() ​

ts
getCurrentCoord(): number[];

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

Get the current coordinate in world space (mm)

Returns ​

number[]

setCoord() ​

ts
setCoord(coord): void;

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

Set the current coordinate in world space (mm)

Parameters ​

coord ​

number[]

World coordinate [x, y, z] in mm

Returns ​

void

getCurrentSliceIndex() ​

ts
getCurrentSliceIndex(): number;

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

Get the current slice index

Returns ​

number

getMouseImagePosition() ​

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

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

Get the current mouse position in image coordinates

Returns ​

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

getMouseVolumeCoordinate() ​

ts
getMouseVolumeCoordinate(): number[] | null;

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

Get the current mouse position in volume coordinates

Returns ​

number[] | null

getMouseWorldCoordinate() ​

ts
getMouseWorldCoordinate(): number[] | null;

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

Get the current mouse position in world coordinates

Returns ​

number[] | null

getCoordinateTransformer() ​

ts
getCoordinateTransformer(): ICoordinateTransformer;

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

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

Returns ​

ICoordinateTransformer

getOrientation() ​

ts
getOrientation(): AxisSet3D;

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

Get the orientation of this view

Returns ​

AxisSet3D

getCanvas() ​

ts
getCanvas(): HTMLCanvasElement;

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

Get the canvas element

Returns ​

HTMLCanvasElement

setCrosshairVisible() ​

ts
setCrosshairVisible(visible): void;

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

Toggle crosshair visibility

Parameters ​

visible ​

boolean

Whether to show the crosshair

Returns ​

void

setOrientationLabelsVisible() ​

ts
setOrientationLabelsVisible(visible, options?): void;

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

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

handleResize() ​

ts
handleResize(): void;

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

Handle resize events (call when container size changes)

Returns ​

void

getScale() ​

ts
getScale(): number;

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

Get the current scale/zoom level

Returns ​

number

getWidth() ​

ts
getWidth(): number;

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

Get the width of the view in pixels

Returns ​

number

getHeight() ​

ts
getHeight(): number;

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

Get the height of the view in pixels

Returns ​

number

getImageLayer() ​

ts
getImageLayer(): ImageLayer | null;

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

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

Returns ​

ImageLayer | null

setZoom() ​

ts
setZoom(level): void;

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

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

ts
getZoom(): number;

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

Get the current zoom level

Returns ​

number

setPan() ​

ts
setPan(offset): void;

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

Set the pan offset

Parameters ​

offset ​

Pan offset in pixels { x, y }

x ​

number

y ​

number

Returns ​

void

getPan() ​

ts
getPan(): object;

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

Get the current pan offset

Returns ​

object

x ​
ts
x: number;
y ​
ts
y: number;

resetView() ​

ts
resetView(): void;

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

Reset zoom and pan to defaults

Returns ​

void

isDepthEnhancementEnabled() ​

ts
isDepthEnhancementEnabled(): boolean;

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

Check if depth enhancement is enabled

Returns ​

boolean

setDepthEnhancementEnabled() ​

ts
setDepthEnhancementEnabled(enabled): void;

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

Enable or disable depth enhancement

Parameters ​

enabled ​

boolean

Whether to enable depth enhancement

Returns ​

void

getDepthEnhancementOptions() ​

ts
getDepthEnhancementOptions(): DepthEnhancedOptions | null;

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

Get current depth enhancement options

Returns ​

DepthEnhancedOptions | null

setDepthEnhancementOptions() ​

ts
setDepthEnhancementOptions(options): void;

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

Update depth enhancement options

Parameters ​

options ​

Partial<DepthEnhancedOptions>

Partial options to update

Returns ​

void

hasDepthEnhancement() ​

ts
hasDepthEnhancement(): boolean;

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

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

Returns ​

boolean

dispose() ​

ts
dispose(): void;

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

Dispose of the viewer and clean up all resources

Returns ​

void

Released under the MIT License.

Copyright © 2024–present Bradley Buchsbaum