feat(synchronizers): Add registration for synchronizers (#2861)

doc(hp):Update the sync group/hanging protocol documentation

extensions/cornerstone/src/init.js

@@ -259,6 +259,11 @@ export default async function init({
   //   }
   // };
 
+  const newStackCallback = evt => {
+    const { element } = evt.detail;
+    utilities.stackPrefetch.enable(element);
+  };
+
   function elementEnabledHandler(evt) {
     const { element } = evt.detail;
 
@@ -267,10 +272,10 @@ export default async function init({
       contextMenuHandleClick
     );
 
-    eventTarget.addEventListener(EVENTS.STACK_VIEWPORT_NEW_STACK, evt => {
-      const { element } = evt.detail;
-      utilities.stackPrefetch.enable(element);
-    });
+    eventTarget.addEventListener(
+      EVENTS.STACK_VIEWPORT_NEW_STACK,
+      newStackCallback
+    );
   }
 
   function elementDisabledHandler(evt) {
@@ -284,10 +289,11 @@ export default async function init({
       contextMenuHandleClick
     );
 
-    eventTarget.removeEventListener(EVENTS.STACK_VIEWPORT_NEW_STACK, evt => {
-      const { element } = evt.detail;
-      utilities.stackPrefetch.disable(element);
-    });
+    // TODO - consider removing the callback when all elements are gone
+    // eventTarget.removeEventListener(
+    //   EVENTS.STACK_VIEWPORT_NEW_STACK,
+    //   newStackCallback
+    // );
   }
 
   eventTarget.addEventListener(

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

@@ -1,4 +1,8 @@
-import { synchronizers, SynchronizerManager } from '@cornerstonejs/tools';
+import {
+  synchronizers,
+  SynchronizerManager,
+  Synchronizer,
+} from '@cornerstonejs/tools';
 
 import { pubSubServiceInterface } from '@ohif/core';
 
@@ -6,20 +10,40 @@ const EVENTS = {
   TOOL_GROUP_CREATED: 'event::cornerstone::syncgroupservice:toolgroupcreated',
 };
 
+/**
+ * @params options - are an optional set of options associated with the first
+ * sync group declared.
+ */
+export type SyncCreator = (
+  type: string,
+  options?: Record<string, unknown>
+) => Synchronizer;
+
 export type SyncGroup = {
   type: string;
-  id: string;
-  source: boolean;
-  target: boolean;
+  id?: string;
+  // Source and target default to true if not specified
+  source?: boolean;
+  target?: boolean;
+  options?: Record<string, unknown>;
 };
 
 const POSITION = 'cameraposition';
 const VOI = 'voi';
+const ZOOMPAN = 'zoompan';
+
+const asSyncGroup = (syncGroup: string | SyncGroup): SyncGroup =>
+  typeof syncGroup === 'string' ? { type: syncGroup } : syncGroup;
 
 export default class SyncGroupService {
   serviceManager: any;
   listeners: { [key: string]: (...args: any[]) => void } = {};
   EVENTS: { [key: string]: string };
+  synchronizerCreators: Record<string, SyncCreator> = {
+    [POSITION]: synchronizers.createCameraPositionSynchronizer,
+    [VOI]: synchronizers.createVOISynchronizer,
+    [ZOOMPAN]: synchronizers.createZoomPanSynchronizer,
+  };
 
   constructor(serviceManager) {
     this.serviceManager = serviceManager;
@@ -29,54 +53,71 @@ export default class SyncGroupService {
     Object.assign(this, pubSubServiceInterface);
   }
 
-  private _createSynchronizer(type: string, id: string) {
-    type = type.toLowerCase();
-    if (type === POSITION) {
-      return synchronizers.createCameraPositionSynchronizer(id);
-    } else if (type === VOI) {
-      return synchronizers.createVOISynchronizer(id);
+  private _createSynchronizer(
+    type: string,
+    id: string,
+    options
+  ): Synchronizer | undefined {
+    const syncCreator = this.synchronizerCreators[type.toLowerCase()];
+    if (syncCreator) {
+      return syncCreator(id, options);
+    } else {
+      console.warn('Unknown synchronizer type', type, id);
     }
   }
 
+  /**
+   * Creates a synchronizer type.
+   * @param type is the type of the synchronizer to create
+   * @param creator
+   */
+  public setSynchronizer(type: string, creator: SyncCreator): void {
+    this.synchronizerCreators[type] = creator;
+  }
+
+  protected _getOrCreateSynchronizer(
+    type: string,
+    id: string,
+    options: Record<string, unknown>
+  ): Synchronizer | undefined {
+    let synchronizer = SynchronizerManager.getSynchronizer(id);
+
+    if (!synchronizer) {
+      synchronizer = this._createSynchronizer(type, id, options);
+    }
+    return synchronizer;
+  }
+
   public addViewportToSyncGroup(
     viewportId: string,
     renderingEngineId: string,
-    syncGroups?: SyncGroup[]
+    syncGroups?: (SyncGroup | string)[]
   ): void {
     if (!syncGroups || !syncGroups.length) {
       return;
     }
 
     syncGroups.forEach(syncGroup => {
-      const { type, id, target, source } = syncGroup;
+      const syncGroupObj = asSyncGroup(syncGroup);
+      const { type, target = true, source = true, options = {} } = syncGroupObj;
+      const { id = type } = syncGroupObj;
 
-      let synchronizer = SynchronizerManager.getSynchronizer(id);
-
-      if (!synchronizer) {
-        synchronizer = this._createSynchronizer(type, id);
-      }
+      const synchronizer = this._getOrCreateSynchronizer(type, id, options);
 
+      synchronizer.setOptions(viewportId, options);
+      const viewportInfo = { viewportId, renderingEngineId };
       if (target && source) {
-        synchronizer.add({
-          viewportId,
-          renderingEngineId,
-        });
+        synchronizer.add(viewportInfo);
         return;
       } else if (source) {
-        synchronizer.addSource({
-          viewportId,
-          renderingEngineId,
-        });
+        synchronizer.addSource(viewportInfo);
       } else if (target) {
-        synchronizer.addTarget({
-          viewportId,
-          renderingEngineId,
-        });
+        synchronizer.addTarget(viewportInfo);
       }
     });
   }
 
-  public destroy() {
+  public destroy(): void {
     SynchronizerManager.destroy();
   }