@cornerstonejs/core 1.71.4 → 1.71.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/core",
-  "version": "1.71.4",
+  "version": "1.71.6",
   "description": "",
   "main": "src/index.ts",
   "types": "dist/types/index.d.ts",
@@ -47,5 +47,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "c80a68cc56c7e2c96168051a6e2b8d83dab91cc0"
+  "gitHead": "8abef807de438a043258b10395c516fa0cd0541d"
 }

package/src/RenderingEngine/BaseVolumeViewport.ts

@@ -37,11 +37,12 @@ import type {
   VolumeViewportProperties,
   ViewReferenceSpecifier,
   ReferenceCompatibleOptions,
+  ViewPresentation,
+  ViewReference,
+  IVolumeViewport,
 } from '../types';
 import { VoiModifiedEventDetail } from '../types/EventTypes';
 import type { ViewportInput } from '../types/IViewport';
-import type IVolumeViewport from '../types/IVolumeViewport';
-import type { ViewReference } from '../types/IViewport';
 import {
   actorIsA,
   applyPreset,
@@ -51,6 +52,10 @@ import {
   invertRgbTransferFunction,
   triggerEvent,
   colormap as colormapUtils,
+  isEqualNegative,
+  getVolumeViewportScrollInfo,
+  snapFocalPointToSlice,
+  isEqual,
 } from '../utilities';
 import { createVolumeActor } from './helpers';
 import volumeNewImageEventDispatcher, {
@@ -600,15 +605,36 @@ abstract class BaseVolumeViewport extends Viewport implements IVolumeViewport {
     viewRefSpecifier: ViewReferenceSpecifier = {}
   ): ViewReference {
     const target = super.getViewReference(viewRefSpecifier);
+    const volumeId = this.getVolumeId(viewRefSpecifier);
     if (viewRefSpecifier?.forFrameOfReference !== false) {
-      target.volumeId = this.getVolumeId(viewRefSpecifier);
-    }
-    // TODO - add referencedImageId as a base URL for an image to allow a generic
-    // method to specify which volumes this should apply to.
-    return {
-      ...target,
-      sliceIndex: this.getCurrentImageIdIndex(),
-    };
+      target.volumeId = volumeId;
+    }
+    if (typeof viewRefSpecifier?.sliceIndex !== 'number') {
+      return target;
+    }
+    const { viewPlaneNormal } = target;
+    const delta =
+      (viewRefSpecifier.sliceIndex as number) - this.getCurrentImageIdIndex();
+    // Calculate a camera focal point and position
+    const { sliceRangeInfo } = getVolumeViewportScrollInfo(
+      this,
+      volumeId,
+      true
+    );
+
+    const { sliceRange, spacingInNormalDirection, camera } = sliceRangeInfo;
+    const { focalPoint, position } = camera;
+    const { newFocalPoint } = snapFocalPointToSlice(
+      focalPoint,
+      position,
+      sliceRange,
+      viewPlaneNormal,
+      spacingInNormalDirection,
+      delta
+    );
+    target.cameraFocalPoint = newFocalPoint;
+
+    return target;
   }
 
   /**
@@ -622,6 +648,9 @@ abstract class BaseVolumeViewport extends Viewport implements IVolumeViewport {
     viewRef: ViewReference,
     options?: ReferenceCompatibleOptions
   ): boolean {
+    if (!viewRef.FrameOfReferenceUID) {
+      return false;
+    }
     if (!super.isReferenceViewable(viewRef, options)) {
       return false;
     }
@@ -638,6 +667,117 @@ abstract class BaseVolumeViewport extends Viewport implements IVolumeViewport {
     return sliceIndex === undefined || sliceIndex === currentSliceIndex;
   }
 
+  /**
+   * Scrolls the viewport in the given direction/amount
+   */
+  public scroll(delta = 1) {
+    const volumeId = this.getVolumeId();
+    const { sliceRangeInfo } = getVolumeViewportScrollInfo(
+      this,
+      volumeId,
+      true
+    );
+
+    if (!sliceRangeInfo) {
+      return;
+    }
+
+    const { sliceRange, spacingInNormalDirection, camera } = sliceRangeInfo;
+    const { focalPoint, viewPlaneNormal, position } = camera;
+
+    const { newFocalPoint, newPosition } = snapFocalPointToSlice(
+      focalPoint,
+      position,
+      sliceRange,
+      viewPlaneNormal,
+      spacingInNormalDirection,
+      delta
+    );
+
+    this.setCamera({
+      focalPoint: newFocalPoint,
+      position: newPosition,
+    });
+  }
+
+  /**
+   * Navigates to the specified view reference.
+   */
+  public setViewReference(viewRef: ViewReference): void {
+    if (!viewRef) {
+      return;
+    }
+    const volumeId = this.getVolumeId();
+    const {
+      viewPlaneNormal: refViewPlaneNormal,
+      FrameOfReferenceUID: refFrameOfReference,
+      cameraFocalPoint,
+      viewUp,
+    } = viewRef;
+    let { sliceIndex } = viewRef;
+    const { focalPoint, viewPlaneNormal, position } = this.getCamera();
+    const isNegativeNormal = isEqualNegative(
+      viewPlaneNormal,
+      refViewPlaneNormal
+    );
+    const isSameNormal = isEqual(viewPlaneNormal, refViewPlaneNormal);
+
+    // Handle slices
+    if (
+      typeof sliceIndex === 'number' &&
+      viewRef.volumeId === volumeId &&
+      (isNegativeNormal || isSameNormal)
+    ) {
+      const { currentStepIndex, sliceRangeInfo, numScrollSteps } =
+        getVolumeViewportScrollInfo(this, volumeId, true);
+
+      const { sliceRange, spacingInNormalDirection } = sliceRangeInfo;
+      if (isNegativeNormal) {
+        // Convert opposite orientation view refs to normal orientation
+        sliceIndex = numScrollSteps - sliceIndex - 1;
+      }
+      const delta = sliceIndex - currentStepIndex;
+      const { newFocalPoint, newPosition } = snapFocalPointToSlice(
+        focalPoint,
+        position,
+        sliceRange,
+        viewPlaneNormal,
+        spacingInNormalDirection,
+        delta
+      );
+      this.setCamera({ focalPoint: newFocalPoint, position: newPosition });
+    } else if (refFrameOfReference === this.getFrameOfReferenceUID()) {
+      // Handle same frame of reference navigation
+
+      if (refViewPlaneNormal && !isNegativeNormal && !isSameNormal) {
+        // Need to update the orientation vectors correctly for this case
+        // this.setCameraNoEvent({ viewPlaneNormal: refViewPlaneNormal, viewUp });
+        this.setOrientation({ viewPlaneNormal: refViewPlaneNormal, viewUp });
+        return this.setViewReference(viewRef);
+      }
+      if (cameraFocalPoint) {
+        const focalDelta = vec3.subtract(
+          [0, 0, 0],
+          cameraFocalPoint,
+          focalPoint
+        );
+        const useNormal = refViewPlaneNormal ?? viewPlaneNormal;
+        const normalDot = vec3.dot(focalDelta, useNormal);
+        if (!isEqual(normalDot, 0)) {
+          // Gets the portion of the focal point in the normal direction
+          vec3.scale(focalDelta, useNormal, normalDot);
+        }
+        const newFocal = <Point3>vec3.add([0, 0, 0], focalPoint, focalDelta);
+        const newPosition = <Point3>vec3.add([0, 0, 0], position, focalDelta);
+        this.setCamera({ focalPoint: newFocal, position: newPosition });
+      }
+    } else {
+      throw new Error(
+        `Incompatible view refs: ${refFrameOfReference}!==${this.getFrameOfReferenceUID()}`
+      );
+    }
+  }
+
   /**
    * Sets the properties for the volume viewport on the volume
    * and if setProperties is called for the first time, the properties will also become the default one.
@@ -1087,7 +1227,10 @@ abstract class BaseVolumeViewport extends Viewport implements IVolumeViewport {
    * @param orientation - The orientation to set the camera to.
    * @param immediate - Whether the `Viewport` should be rendered as soon as the camera is set.
    */
-  public setOrientation(orientation: OrientationAxis, immediate = true): void {
+  public setOrientation(
+    _orientation: OrientationAxis | OrientationVectors,
+    _immediate = true
+  ): void {
     console.warn('Method "setOrientation" needs implementation');
   }
 
@@ -1567,21 +1710,40 @@ abstract class BaseVolumeViewport extends Viewport implements IVolumeViewport {
 
   abstract getCurrentImageId(): string;
 
-  /** Gets the volumeId to use for references */
-  protected getVolumeId(specifier: ViewReferenceSpecifier) {
+  /**
+   * Gets the volumeId to use for references.
+   * Returns undefined if the specified volume is NOT in this viewport.
+   */
+  protected getVolumeId(specifier?: ViewReferenceSpecifier) {
+    const actorEntries = this.getActors();
+    if (!actorEntries) {
+      return;
+    }
     if (!specifier?.volumeId) {
-      const actorEntries = this.getActors();
-      if (!actorEntries) {
-        return;
-      }
       // find the first image actor of instance type vtkVolume
       return actorEntries.find(
         (actorEntry) => actorEntry.actor.getClassName() === 'vtkVolume'
       )?.uid;
     }
-    return specifier.volumeId;
+
+    // See if this volumeId can be found in one of the actors for this
+    // viewport.  This check will cause undefined to be returned when the
+    // volumeId isn't currently shown in this viewport.
+    return actorEntries.find(
+      (actorEntry) =>
+        actorEntry.actor.getClassName() === 'vtkVolume' &&
+        actorEntry.uid === specifier.volumeId
+    )?.uid;
   }
 
+  /**
+   * For a volume viewport, the reference id will be a URN starting with
+   * `volumeId:<volumeId>`, followed by additional arguments to specify
+   * the view orientation.  This will end up being a unique string that
+   * identifies the view reference being shown.  It is different from the
+   * view reference in that the values are all incorporated into a string to
+   * allow using it as a parameter key.
+   */
   public getReferenceId(specifier: ViewReferenceSpecifier = {}): string {
     let { volumeId, sliceIndex: sliceIndex } = specifier;
     if (!volumeId) {
@@ -1595,7 +1757,8 @@ abstract class BaseVolumeViewport extends Viewport implements IVolumeViewport {
       )?.uid;
     }
 
-    sliceIndex ??= this.getCurrentImageIdIndex();
+    const currentIndex = this.getCurrentImageIdIndex();
+    sliceIndex ??= currentIndex;
     const { viewPlaneNormal, focalPoint } = this.getCamera();
     const querySeparator = volumeId.indexOf('?') > -1 ? '&' : '?';
     return `volumeId:${volumeId}${querySeparator}sliceIndex=${sliceIndex}&viewPlaneNormal=${viewPlaneNormal.join(

package/src/RenderingEngine/StackViewport.ts

@@ -511,34 +511,13 @@ class StackViewport extends Viewport implements IStackViewport, IImagesLoader {
    * metadata, it returns undefined, otherwise, frameOfReferenceUID is returned.
    * @returns frameOfReferenceUID : string representing frame of reference id
    */
-  public getFrameOfReferenceUID = (): string | undefined => {
-    // Get the current image that is displayed in the viewport
-    const imageId = this.getCurrentImageId();
-
-    if (!imageId) {
-      return;
-    }
-
-    // Use the metadata provider to grab its imagePlaneModule metadata
-    const imagePlaneModule = metaData.get('imagePlaneModule', imageId);
-
-    // If nothing exists, return undefined
-    if (!imagePlaneModule) {
-      return;
-    }
-
-    // Otherwise, provide the FrameOfReferenceUID so we can map
-    // annotations made on VolumeViewports back to StackViewports
-    // and vice versa
-    return imagePlaneModule.frameOfReferenceUID;
-  };
+  public getFrameOfReferenceUID = (sliceIndex?: number): string =>
+    this.getImagePlaneReferenceData(sliceIndex)?.FrameOfReferenceUID;
 
   /**
    * Returns the raw/loaded image being shown inside the stack viewport.
    */
-  public getCornerstoneImage = (): IImage => {
-    return this.csImage;
-  };
+  public getCornerstoneImage = (): IImage => this.csImage;
 
   /**
    * Creates imageMapper based on the provided vtkImageData and also creates
@@ -1609,6 +1588,37 @@ class StackViewport extends Viewport implements IStackViewport, IImagesLoader {
     };
   }
 
+  /**
+   * Gets the view reference data for a given image slice.  This uses the
+   * image plane module to read a default focal point/normal, and also returns
+   * the referenced image id and the frame of reference uid.
+   */
+  public getImagePlaneReferenceData(
+    sliceIndex = this.getCurrentImageIdIndex()
+  ): ViewReference {
+    const imageId = this.imageIds[sliceIndex];
+    if (!imageId) {
+      return;
+    }
+    const imagePlaneModule = metaData.get(MetadataModules.IMAGE_PLANE, imageId);
+    const { imagePositionPatient, frameOfReferenceUID: FrameOfReferenceUID } =
+      imagePlaneModule;
+    let { rowCosines, columnCosines } = imagePlaneModule;
+    // Values are null, not undefined, so need to assign instead of defaulting
+    rowCosines ||= [1, 0, 0];
+    columnCosines ||= [0, 1, 0];
+    const viewPlaneNormal = <Point3>(
+      vec3.cross([0, 0, 0], columnCosines, rowCosines)
+    );
+    return {
+      FrameOfReferenceUID,
+      viewPlaneNormal,
+      cameraFocalPoint: <Point3>imagePositionPatient,
+      referencedImageId: imageId,
+      sliceIndex,
+    };
+  }
+
   /**
    * Converts the image direction to camera viewUp and viewplaneNormal
    *
@@ -2215,7 +2225,7 @@ class StackViewport extends Viewport implements IStackViewport, IImagesLoader {
    *
    * @param  stackInputs - An array of stack inputs, each containing an image ID and an actor UID.
    */
-  public async addImages(stackInputs: Array<IStackInput>): Promise<void> {
+  public addImages(stackInputs: Array<IStackInput>) {
     const actors = this.getActors();
     stackInputs.forEach((stackInput) => {
       const image = cache.getImage(stackInput.imageId);
@@ -2870,10 +2880,6 @@ class StackViewport extends Viewport implements IStackViewport, IImagesLoader {
     return this.currentImageIdIndex;
   };
 
-  public getSliceIndex = (): number => {
-    return this.currentImageIdIndex;
-  };
-
   /**
    * Checks to see if this target is or could be shown in this viewport
    */
@@ -2910,40 +2916,65 @@ class StackViewport extends Viewport implements IStackViewport, IImagesLoader {
 
   /**
    * Gets a standard target to show this image instance.
+   * Returns undefined if the requested slice index is not available.
+   *
+   * <b>Warning<b>If using sliceIndex for requeseting a specific reference, the slice index MUST come
+   * from the stack of image ids.  Using slice index from a volume or from a different
+   * stack of images ids, EVEN if they contain the same set of images will result in
+   * random images being chosen.
    */
   public getViewReference(
     viewRefSpecifier: ViewReferenceSpecifier = {}
   ): ViewReference {
-    const { sliceIndex: sliceIndex = this.currentImageIdIndex } =
-      viewRefSpecifier;
-    return {
-      ...super.getViewReference(viewRefSpecifier),
-      referencedImageId: `${this.imageIds[sliceIndex as number]}`,
-      sliceIndex: sliceIndex,
-    };
+    const { sliceIndex = this.getCurrentImageIdIndex() } = viewRefSpecifier;
+    const reference = super.getViewReference(viewRefSpecifier);
+    const referencedImageId = this.imageIds[sliceIndex as number];
+    if (!referencedImageId) {
+      return;
+    }
+    reference.referencedImageId = referencedImageId;
+    if (this.getCurrentImageIdIndex() !== sliceIndex) {
+      const referenceData = this.getImagePlaneReferenceData(
+        sliceIndex as number
+      );
+      if (!referenceData) {
+        return;
+      }
+      Object.assign(reference, referenceData);
+    }
+    return reference;
   }
 
   /**
    * Applies the view reference, which may navigate the slice index and apply
-   * other camera modifications
+   * other camera modifications.
+   * Assumes that the slice index is correct for this viewport
    */
-  public setView(viewRef?: ViewReference, viewPres?: ViewPresentation): void {
-    const camera = this.getCamera();
-    super.setView(viewRef, viewPres);
-    if (viewRef) {
-      const { viewPlaneNormal, sliceIndex } = viewRef;
-      if (
-        viewPlaneNormal &&
-        !isEqual(viewPlaneNormal, camera.viewPlaneNormal)
-      ) {
-        return;
-      }
-      if (sliceIndex || sliceIndex === 0) {
-        this.setImageIdIndex(sliceIndex as number);
+  public setViewReference(viewRef: ViewReference): void {
+    if (!viewRef) {
+      return;
+    }
+    const { referencedImageId, sliceIndex, volumeId } = viewRef;
+    if (
+      typeof sliceIndex === 'number' &&
+      referencedImageId &&
+      referencedImageId === this.imageIds[sliceIndex]
+    ) {
+      this.setImageIdIndex(sliceIndex);
+    } else {
+      const foundIndex = this.imageIds.indexOf(referencedImageId);
+      if (foundIndex !== -1) {
+        this.setImageIdIndex(foundIndex);
+      } else {
+        throw new Error('Unsupported - referenced image id not found');
       }
     }
   }
 
+  /**
+   * Returns the imageId string for the specified view, using the
+   * `imageId:<imageId>` URN format.
+   */
   public getReferenceId(specifier: ViewReferenceSpecifier = {}): string {
     const { sliceIndex: sliceIndex = this.currentImageIdIndex } = specifier;
     if (Array.isArray(sliceIndex)) {

package/src/RenderingEngine/Viewport.ts

@@ -695,7 +695,7 @@ class Viewport implements IViewport {
       this.setDisplayAreaScale(displayArea);
     } else {
       this.setInterpolationType(
-        this.getProperties().interpolationType || InterpolationType.LINEAR
+        this.getProperties()?.interpolationType || InterpolationType.LINEAR
       );
       this.setDisplayAreaFit(displayArea);
     }
@@ -1097,6 +1097,11 @@ class Viewport implements IViewport {
     throw new Error('Not implemented');
   }
 
+  /**
+   * Gets a referenced image url of some sort - could be a real image id, or
+   * could be a URL with parameters. Regardless it refers to the currently displaying
+   * image as a string value.
+   */
   public getReferenceId(_specifier?: ViewReferenceSpecifier): string {
     return null;
   }
@@ -1592,11 +1597,16 @@ class Viewport implements IViewport {
   public getViewReference(
     viewRefSpecifier: ViewReferenceSpecifier = {}
   ): ViewReference {
-    const { focalPoint: cameraFocalPoint, viewPlaneNormal } = this.getCamera();
+    const {
+      focalPoint: cameraFocalPoint,
+      viewPlaneNormal,
+      viewUp,
+    } = this.getCamera();
     const target: ViewReference = {
       FrameOfReferenceUID: this.getFrameOfReferenceUID(),
       cameraFocalPoint,
       viewPlaneNormal,
+      viewUp,
       sliceIndex: viewRefSpecifier.sliceIndex ?? this.getCurrentImageIdIndex(),
     };
     return target;
@@ -1630,8 +1640,8 @@ class Viewport implements IViewport {
         viewPlaneNormal
       )
     ) {
-      // Could navigate as a volume to the reference
-      return options?.asVolume === true;
+      // Could navigate as a volume to the reference with an orientation change
+      return options?.withOrientation === true;
     }
     return true;
   }
@@ -1689,27 +1699,30 @@ class Viewport implements IViewport {
   }
 
   /**
-   * Sets the given view.  This can apply both the view reference and view presentation
-   * without getting multiple event notifications on shared values like camera updates or
-   * flickers as multiple changes are applied.
-   *
-   * @param viewRef - the basic positioning in terms of what image id/slice index/orientation to display
-   *        * The viewRef must be applicable to the current stack or volume, otherwise an exception will be thrown
-   * @param viewPres - the presentation information to apply to the current image (as chosen above)
+   * Navigates to the image specified by the viewRef.
    */
-  public setView(viewRef?: ViewReference, viewPres?: ViewPresentation) {
-    if (viewPres) {
-      const { displayArea, zoom = this.getZoom(), pan, rotation } = viewPres;
-      if (displayArea !== this.getDisplayArea()) {
-        this.setDisplayArea(displayArea);
-      }
-      this.setZoom(zoom);
-      if (pan) {
-        this.setPan(vec2.scale([0, 0], pan, zoom) as Point2);
-      }
-      if (rotation >= 0) {
-        this.setRotation(rotation);
-      }
+  public setViewReference(viewRef: ViewReference) {
+    // No-op
+  }
+
+  /**
+   * Applies the display area, zoom, pan and rotation from the view presentation.
+   * No-op is viewPres isn't defined.
+   */
+  public setViewPresentation(viewPres: ViewPresentation) {
+    if (!viewPres) {
+      return;
+    }
+    const { displayArea, zoom = this.getZoom(), pan, rotation } = viewPres;
+    if (displayArea !== this.getDisplayArea()) {
+      this.setDisplayArea(displayArea);
+    }
+    this.setZoom(zoom);
+    if (pan) {
+      this.setPan(vec2.scale([0, 0], pan, zoom) as Point2);
+    }
+    if (rotation >= 0) {
+      this.setRotation(rotation);
     }
   }
 

package/src/RenderingEngine/VolumeViewport.ts

@@ -1,8 +1,6 @@
 import vtkPlane from '@kitware/vtk.js/Common/DataModel/Plane';
 import vtkVolume from '@kitware/vtk.js/Rendering/Core/Volume';
 
-import { vec3 } from 'gl-matrix';
-
 import cache from '../cache';
 import { MPR_CAMERA_VALUES, RENDERING_DEFAULTS } from '../constants';
 import { BlendModes, OrientationAxis, Events } from '../enums';
@@ -13,6 +11,8 @@ import type {
   OrientationVectors,
   Point3,
   EventTypes,
+  ViewReference,
+  ViewReferenceSpecifier,
 } from '../types';
 import type { ViewportInput } from '../types/IViewport';
 import {
@@ -29,6 +29,7 @@ import setDefaultVolumeVOI from './helpers/setDefaultVolumeVOI';
 import { setTransferFunctionNodes } from '../utilities/transferFunctionUtils';
 import { ImageActor } from '../types/IActor';
 import getImageSliceDataForVolumeViewport from '../utilities/getImageSliceDataForVolumeViewport';
+import getVolumeViewportScrollInfo from '../utilities/getVolumeViewportScrollInfo';
 
 /**
  * An object representing a VolumeViewport. VolumeViewports are used to render
@@ -267,7 +268,6 @@ class VolumeViewport extends BaseVolumeViewport {
 
     const activeCamera = this.getVtkActiveCamera();
     const viewPlaneNormal = <Point3>activeCamera.getViewPlaneNormal();
-    const viewUp = <Point3>activeCamera.getViewUp();
     const focalPoint = <Point3>activeCamera.getFocalPoint();
 
     // always add clipping planes for the volume viewport. If a use case
@@ -365,6 +365,10 @@ class VolumeViewport extends BaseVolumeViewport {
   }
 
   /**
+   * Uses the origin and focalPoint to calculate the slice index.
+
+
+
    * Resets the slab thickness of the actors of the viewport to the default value.
    */
   public resetSlabThickness(): void {
@@ -383,32 +387,23 @@ class VolumeViewport extends BaseVolumeViewport {
   }
 
   /**
-   * Uses the origin and focalPoint to calculate the slice index.
+   * Uses the slice range information to compute the current image id index.
+   * Note that this may be offset from the origin location, or opposite in
+   * direction to the distance from the origin location, as the index is a
+   * complete index from minimum to maximum.
    *
    * @returns The slice index in the direction of the view
    */
-  public getCurrentImageIdIndex = (volumeId?: string): number => {
-    const { viewPlaneNormal, focalPoint } = this.getCamera();
-
-    const imageData = this.getImageData(volumeId);
-
-    if (!imageData) {
-      return;
-    }
-
-    const { origin, direction, spacing } = imageData;
-
-    const spacingInNormal = getSpacingInNormalDirection(
-      { direction, spacing },
-      viewPlaneNormal
+  public getCurrentImageIdIndex = (
+    volumeId?: string,
+    useSlabThickness = true
+  ): number => {
+    const { currentStepIndex } = getVolumeViewportScrollInfo(
+      this,
+      volumeId || this.getVolumeId(),
+      useSlabThickness
     );
-    const sub = vec3.create();
-    vec3.sub(sub, focalPoint, origin);
-    const distance = vec3.dot(sub, viewPlaneNormal);
-
-    // divide by the spacing in the normal direction to get the
-    // number of steps, and subtract 1 to get the index
-    return Math.round(Math.abs(distance) / spacingInNormal);
+    return currentStepIndex;
   };
 
   /**
@@ -438,6 +433,26 @@ class VolumeViewport extends BaseVolumeViewport {
     return getClosestImageId(volume, focalPoint, viewPlaneNormal);
   };
 
+  /**
+   * Gets a view target, allowing comparison between view positions as well
+   * as restoring views later.
+   * Add the referenced image id.
+   */
+  public getViewReference(
+    viewRefSpecifier: ViewReferenceSpecifier = {}
+  ): ViewReference {
+    const viewRef = super.getViewReference(viewRefSpecifier);
+    if (!viewRef?.volumeId) {
+      return;
+    }
+    const volume = cache.getVolume(viewRef.volumeId);
+    viewRef.referencedImageId = getClosestImageId(
+      volume,
+      viewRef.cameraFocalPoint,
+      viewRef.viewPlaneNormal
+    );
+    return viewRef;
+  }
   /**
    * Reset the viewport properties to the default values
    *