feat(HP): Frame View HP (#4235)

extensions/cornerstone/src/getHangingProtocolModule.ts

@@ -5,6 +5,7 @@ import { mprAnd3DVolumeViewport } from './hps/mprAnd3DVolumeViewport';
 import { only3D } from './hps/only3D';
 import { primary3D } from './hps/primary3D';
 import { primaryAxial } from './hps/primaryAxial';
+import { frameView } from './hps/frameView';
 
 function getHangingProtocolModule() {
   return [
@@ -36,6 +37,10 @@ function getHangingProtocolModule() {
       name: primary3D.id,
       protocol: primary3D,
     },
+    {
+      name: frameView.id,
+      protocol: frameView,
+    },
   ];
 }
 

extensions/cornerstone/src/index.tsx

@@ -38,6 +38,7 @@ import { ViewportActionCornersProvider } from './contextProviders/ViewportAction
 import ActiveViewportWindowLevel from './components/ActiveViewportWindowLevel';
 import getSOPInstanceAttributes from './utils/measurementServiceMappings/utils/getSOPInstanceAttributes';
 import { findNearbyToolData } from './utils/findNearbyToolData';
+import { createFrameViewSynchronizer } from './synchronizers/frameViewSynchronizer';
 
 const { helpers: volumeLoaderHelpers } = csStreamingImageVolumeLoader;
 const { getDynamicVolumeInfo } = volumeLoaderHelpers ?? {};
@@ -114,6 +115,9 @@ const cornerstoneExtension: Types.Extensions.Extension = {
       ViewportActionCornersService.REGISTRATION.name,
       ViewportActionCornersProvider
     );
+
+    const { syncGroupService } = servicesManager.services;
+    syncGroupService.registerCustomSynchronizer('frameview', createFrameViewSynchronizer);
     return init.call(this, props);
   },
 

extensions/cornerstone/src/services/SyncGroupService/SyncGroupService.ts

@@ -98,6 +98,15 @@ export default class SyncGroupService {
     return SynchronizerManager.getSynchronizer(id);
   }
 
+  /**
+   * Registers a custom synchronizer.
+   * @param id - The id of the synchronizer.
+   * @param createFunction - The function that creates the synchronizer.
+   */
+  public registerCustomSynchronizer(id: string, createFunction: SyncCreator): void {
+    this.synchronizerCreators[id] = createFunction;
+  }
+
   /**
    * Retrieves an array of synchronizers of a specific type.
    * @param type - The type of synchronizers to retrieve.

extensions/cornerstone/src/synchronizers/frameViewSynchronizer.ts

@@ -0,0 +1,51 @@
+import { SynchronizerManager, Synchronizer, utilities } from '@cornerstonejs/tools';
+import { EVENTS, getRenderingEngine, Types } from '@cornerstonejs/core';
+
+const frameViewSyncCallback = (
+  synchronizerInstance: Synchronizer,
+  sourceViewport: Types.IViewportId,
+  targetViewport: Types.IViewportId
+) => {
+  const renderingEngine = getRenderingEngine(targetViewport.renderingEngineId);
+  if (!renderingEngine) {
+    throw new Error(`No RenderingEngine for Id: ${targetViewport.renderingEngineId}`);
+  }
+  const sViewport = renderingEngine.getViewport(sourceViewport.viewportId) as Types.IStackViewport;
+
+  const { viewportIndex: targetViewportIndex } = synchronizerInstance.getOptions(
+    targetViewport.viewportId
+  );
+
+  const { viewportIndex: sourceViewportIndex } = synchronizerInstance.getOptions(
+    sourceViewport.viewportId
+  );
+
+  if (targetViewportIndex === undefined || sourceViewportIndex === undefined) {
+    throw new Error('No viewportIndex provided');
+  }
+
+  const tViewport = renderingEngine.getViewport(targetViewport.viewportId) as Types.IStackViewport;
+
+  const sourceSliceIndex = sViewport.getSliceIndex();
+  const sliceDifference = Number(targetViewportIndex) - Number(sourceViewportIndex);
+  const targetSliceIndex = sourceSliceIndex + sliceDifference;
+
+  if (targetSliceIndex === tViewport.getSliceIndex()) {
+    return;
+  }
+
+  utilities.jumpToSlice(tViewport.element, {
+    imageIndex: targetSliceIndex,
+  });
+};
+
+const createFrameViewSynchronizer = (synchronizerName: string): Synchronizer => {
+  const synchronizer = SynchronizerManager.createSynchronizer(
+    synchronizerName,
+    EVENTS.CAMERA_MODIFIED,
+    frameViewSyncCallback
+  );
+  return synchronizer;
+};
+
+export { createFrameViewSynchronizer };