fix: remaining bugs for MPR and toolbar icon colors (#3026)

* feat: warn for overlapping segments

* fix: typo

* refactor mpr toggle and stack sync

* fix: wip for more general mpr

* fix: tool groups for mpr

* fix: changing of viewport id

* fix: viewport Id for the seg viewports

* fix

* update cornerstone version

extensions/cornerstone/src/utils/stackSync/calculateViewportRegistrations.ts

@@ -0,0 +1,30 @@
+import { Types, getRenderingEngine, utilities } from '@cornerstonejs/core';
+
+export default function calculateViewportRegistrations(
+  viewports: Types.IViewportId[]
+) {
+  const viewportPairs = _getViewportPairs(viewports);
+
+  for (const [viewport, nextViewport] of viewportPairs) {
+    // check if they are in the same Frame of Reference
+    const renderingEngine1 = getRenderingEngine(viewport.renderingEngineId);
+    const renderingEngine2 = getRenderingEngine(nextViewport.renderingEngineId);
+
+    const csViewport1 = renderingEngine1.getViewport(viewport.viewportId);
+    const csViewport2 = renderingEngine2.getViewport(nextViewport.viewportId);
+
+    utilities.calculateViewportsSpatialRegistration(csViewport1, csViewport2);
+  }
+}
+
+const _getViewportPairs = (viewports: Types.IViewportId[]) => {
+  const viewportPairs = [];
+
+  for (let i = 0; i < viewports.length; i++) {
+    for (let j = i + 1; j < viewports.length; j++) {
+      viewportPairs.push([viewports[i], viewports[j]]);
+    }
+  }
+
+  return viewportPairs;
+};

extensions/cornerstone/src/utils/stackSync/toggleStackImageSync.ts

@@ -0,0 +1,115 @@
+import calculateViewportRegistrations from './calculateViewportRegistrations';
+
+// [ {
+//   synchronizerId: string,
+//   viewports: [ { viewportId: number, renderingEngineId: string, index: number } , ...]
+// ]}
+let STACK_IMAGE_SYNC_GROUPS_INFO = [];
+
+export default function toggleStackImageSync({
+  toggledState,
+  servicesManager,
+  getEnabledElement,
+}) {
+  const {
+    SyncGroupService,
+    ViewportGridService,
+    DisplaySetService,
+    CornerstoneViewportService,
+  } = servicesManager.services;
+
+  if (!toggledState) {
+    STACK_IMAGE_SYNC_GROUPS_INFO.forEach(syncGroupInfo => {
+      const { viewports, synchronizerId } = syncGroupInfo;
+
+      viewports.forEach(({ viewportId, renderingEngineId }) => {
+        SyncGroupService.removeViewportFromSyncGroup(
+          viewportId,
+          renderingEngineId,
+          synchronizerId
+        );
+      });
+    });
+
+    return;
+  }
+
+  STACK_IMAGE_SYNC_GROUPS_INFO = [];
+
+  // create synchronization groups and add viewports
+  let { viewports } = ViewportGridService.getState();
+
+  // filter empty viewports
+  viewports = viewports.filter(
+    viewport =>
+      viewport.displaySetInstanceUIDs && viewport.displaySetInstanceUIDs.length
+  );
+
+  // filter reconstructable viewports
+  viewports = viewports.filter(viewport => {
+    const { displaySetInstanceUIDs } = viewport;
+
+    for (const displaySetInstanceUID of displaySetInstanceUIDs) {
+      const displaySet = DisplaySetService.getDisplaySetByUID(
+        displaySetInstanceUID
+      );
+
+      if (displaySet && displaySet.isReconstructable) {
+        return true;
+      }
+
+      return false;
+    }
+  });
+
+  const viewportsByOrientation = viewports.reduce((acc, viewport) => {
+    const { viewportId, viewportType } = viewport.viewportOptions;
+
+    if (viewportType !== 'stack') {
+      console.warn('Viewport is not a stack, cannot sync images yet');
+      return acc;
+    }
+
+    const { element } = CornerstoneViewportService.getViewportInfo(viewportId);
+    const { viewport: csViewport, renderingEngineId } = getEnabledElement(
+      element
+    );
+    const { viewPlaneNormal } = csViewport.getCamera();
+
+    // Should we round here? I guess so, but not sure how much precision we need
+    const orientation = viewPlaneNormal.map(v => Math.round(v)).join(',');
+
+    if (!acc[orientation]) {
+      acc[orientation] = [];
+    }
+
+    acc[orientation].push({ viewportId, renderingEngineId });
+
+    return acc;
+  }, {});
+
+  // create synchronizer for each group
+  Object.values(viewportsByOrientation).map(viewports => {
+    let synchronizerId = viewports
+      .map(({ viewportId }) => viewportId)
+      .join(',');
+
+    synchronizerId = `imageSync_${synchronizerId}`;
+
+    calculateViewportRegistrations(viewports);
+
+    viewports.forEach(({ viewportId, renderingEngineId }) => {
+      SyncGroupService.addViewportToSyncGroup(viewportId, renderingEngineId, {
+        type: 'stackimage',
+        id: synchronizerId,
+        source: true,
+        target: true,
+      });
+    });
+
+    STACK_IMAGE_SYNC_GROUPS_INFO.push({
+      synchronizerId,
+      viewports,
+    });
+  });
+}