@ohif/app 3.8.0-beta.5 → 3.8.0-beta.50

package/dist/{181.bundle.2ddc6f90740895a3949c.js → 181.bundle.aff453c348111303ceac.js}

@@ -1,5 +1,5 @@
 "use strict";
-(self["webpackChunk"] = self["webpackChunk"] || []).push([[181],{
+(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[181],{
 
 /***/ 86181:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
@@ -19,14 +19,14 @@ var index_esm = __webpack_require__(7023);
 // EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
 var prop_types = __webpack_require__(3827);
 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
-// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 348 modules
-var esm = __webpack_require__(14957);
-// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 331 modules
-var dist_esm = __webpack_require__(3743);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 454 modules
+var esm = __webpack_require__(76634);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 376 modules
+var dist_esm = __webpack_require__(64225);
 // EXTERNAL MODULE: ../../core/src/index.ts + 65 modules
 var src = __webpack_require__(71771);
-// EXTERNAL MODULE: ../../ui/src/index.js + 485 modules
-var ui_src = __webpack_require__(71783);
+// EXTERNAL MODULE: ../../ui/src/index.js + 487 modules
+var ui_src = __webpack_require__(18414);
 // EXTERNAL MODULE: ../../../extensions/cornerstone/src/state.ts
 var state = __webpack_require__(73704);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.css
@@ -38,16 +38,15 @@ var state = __webpack_require__(73704);
 
 
 
-function CornerstoneImageScrollbar(_ref) {
-  let {
-    viewportData,
-    viewportId,
-    element,
-    imageSliceData,
-    setImageSliceData,
-    scrollbarHeight,
-    servicesManager
-  } = _ref;
+function CornerstoneImageScrollbar({
+  viewportData,
+  viewportId,
+  element,
+  imageSliceData,
+  setImageSliceData,
+  scrollbarHeight,
+  servicesManager
+}) {
   const {
     cineService,
     cornerstoneViewportService
@@ -183,8 +182,7 @@ function isValidNumber(value) {
  * @param {number} precision
  * @returns {number} formatted number.
  */
-function formatNumberPrecision(number) {
-  let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+function formatNumberPrecision(number, precision = 0) {
   if (number !== null) {
     return parseFloat(number).toFixed(precision);
   }
@@ -197,8 +195,7 @@ function formatNumberPrecision(number) {
  * @param {string} strFormat
  * @returns {string} formatted date.
  */
-function formatDICOMDate(date) {
-  let strFormat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'MMM D, YYYY';
+function formatDICOMDate(date, strFormat = 'MMM D, YYYY') {
   return moment_default()(date, 'YYYYMMDD').format(strFormat);
 }
 
@@ -215,8 +212,7 @@ function formatDICOMDate(date) {
  * @param {string} strFormat
  * @returns {string} formatted name.
  */
-function formatDICOMTime(time) {
-  let strFormat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'HH:mm:ss';
+function formatDICOMTime(time, strFormat = 'HH:mm:ss') {
   return moment_default()(time, 'HH:mm:ss').format(strFormat);
 }
 
@@ -269,11 +265,10 @@ const EPSILON = 1e-4;
 /**
  * Window Level / Center Overlay item
  */
-function VOIOverlayItem(_ref) {
-  let {
-    voi,
-    customization
-  } = _ref;
+function VOIOverlayItem({
+  voi,
+  customization
+}) {
   const {
     windowWidth,
     windowCenter
@@ -300,11 +295,10 @@ function VOIOverlayItem(_ref) {
 /**
  * Zoom Level Overlay item
  */
-function ZoomOverlayItem(_ref2) {
-  let {
-    scale,
-    customization
-  } = _ref2;
+function ZoomOverlayItem({
+  scale,
+  customization
+}) {
   return /*#__PURE__*/react.createElement("div", {
     className: "overlay-item flex flex-row",
     style: {
@@ -320,12 +314,11 @@ function ZoomOverlayItem(_ref2) {
 /**
  * Instance Number Overlay Item
  */
-function InstanceNumberOverlayItem(_ref3) {
-  let {
-    instanceNumber,
-    imageSliceData,
-    customization
-  } = _ref3;
+function InstanceNumberOverlayItem({
+  instanceNumber,
+  imageSliceData,
+  customization
+}) {
   const {
     imageIndex,
     numberOfSlices
@@ -345,14 +338,13 @@ function InstanceNumberOverlayItem(_ref3) {
 /**
  * Customizable Viewport Overlay
  */
-function CustomizableViewportOverlay(_ref4) {
-  let {
-    element,
-    viewportData,
-    imageSliceData,
-    viewportId,
-    servicesManager
-  } = _ref4;
+function CustomizableViewportOverlay({
+  element,
+  viewportData,
+  imageSliceData,
+  viewportId,
+  servicesManager
+}) {
   const {
     toolbarService,
     cornerstoneViewportService,
@@ -632,7 +624,7 @@ CustomizableViewportOverlay.propTypes = {
 };
 /* harmony default export */ const Overlays_CustomizableViewportOverlay = (CustomizableViewportOverlay);
 // EXTERNAL MODULE: ../../../node_modules/classnames/index.js
-var classnames = __webpack_require__(44921);
+var classnames = __webpack_require__(33901);
 var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/Overlays/ViewportOrientationMarkers.css
 // extracted by mini-css-extract-plugin
@@ -649,15 +641,14 @@ const {
   getOrientationStringLPS,
   invertOrientationStringLPS
 } = esm.utilities.orientation;
-function ViewportOrientationMarkers(_ref) {
-  let {
-    element,
-    viewportData,
-    imageSliceData,
-    viewportId,
-    servicesManager,
-    orientationMarkers = ['top', 'left']
-  } = _ref;
+function ViewportOrientationMarkers({
+  element,
+  viewportData,
+  imageSliceData,
+  viewportId,
+  servicesManager,
+  orientationMarkers = ['top', 'left']
+}) {
   // Rotation is in degrees
   const [rotation, setRotation] = (0,react.useState)(0);
   const [flipHorizontal, setFlipHorizontal] = (0,react.useState)(false);
@@ -818,11 +809,10 @@ function _getOrientationMarkers(rowCosines, columnCosines, rotation, flipVertica
 
 
 
-function ViewportImageSliceLoadingIndicator(_ref) {
-  let {
-    viewportData,
-    element
-  } = _ref;
+function ViewportImageSliceLoadingIndicator({
+  viewportData,
+  element
+}) {
   const [loading, setLoading] = (0,react.useState)(false);
   const [error, setError] = (0,react.useState)(false);
   const loadIndicatorRef = (0,react.useRef)(null);
@@ -969,12 +959,11 @@ var state_0 = __webpack_require__(62657);
 
 
 
-function WrappedCinePlayer(_ref) {
-  let {
-    enabledVPElement,
-    viewportId,
-    servicesManager
-  } = _ref;
+function WrappedCinePlayer({
+  enabledVPElement,
+  viewportId,
+  servicesManager
+}) {
   const {
     toolbarService,
     customizationService,
@@ -1227,6 +1216,11 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
     const syncGroups = viewportInfo.getSyncGroups();
     toolGroupService.addViewportToToolGroup(viewportId, renderingEngineId, toolGroupId);
     syncGroupService.addViewportToSyncGroup(viewportId, renderingEngineId, syncGroups);
+    const synchronizersStore = stateSyncService.getState().synchronizersStore;
+    if (synchronizersStore?.[viewportId]?.length) {
+      // If the viewport used to have a synchronizer, re apply it again
+      _rehydrateSynchronizers(synchronizersStore, viewportId, syncGroupService);
+    }
     if (onElementEnabled) {
       onElementEnabled(evt);
     }
@@ -1242,13 +1236,17 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
       if (!viewportInfo) {
         return;
       }
-      cleanUpServices(viewportInfo);
       cornerstoneViewportService.storePresentation({
         viewportId
       });
+
+      // This should be done after the store presentation since synchronizers
+      // will get cleaned up and they need the viewportInfo to be present
+      cleanUpServices(viewportInfo);
       if (onElementDisabled) {
         onElementDisabled(viewportInfo);
       }
+      cornerstoneViewportService.disableElement(viewportId);
       dist_esm.eventTarget.removeEventListener(dist_esm.Enums.Events.ELEMENT_ENABLED, elementEnabledHandler);
     };
   }, []);
@@ -1264,11 +1262,10 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
   (0,react.useEffect)(() => {
     const {
       unsubscribe
-    } = displaySetService.subscribe(displaySetService.EVENTS.DISPLAY_SET_SERIES_METADATA_INVALIDATED, async _ref => {
-      let {
-        displaySetInstanceUID: invalidatedDisplaySetInstanceUID,
-        invalidateData
-      } = _ref;
+    } = displaySetService.subscribe(displaySetService.EVENTS.DISPLAY_SET_SERIES_METADATA_INVALIDATED, async ({
+      displaySetInstanceUID: invalidatedDisplaySetInstanceUID,
+      invalidateData
+    }) => {
       if (!invalidateData) {
         return;
       }
@@ -1501,6 +1498,42 @@ function _jumpToMeasurement(measurement, targetElementRef, viewportId, measureme
     cacheJumpToMeasurementEvent = null;
   }
 }
+function _rehydrateSynchronizers(synchronizersStore, viewportId, syncGroupService) {
+  synchronizersStore[viewportId].forEach(synchronizerObj => {
+    if (!synchronizerObj.id) {
+      return;
+    }
+    const {
+      id,
+      sourceViewports,
+      targetViewports
+    } = synchronizerObj;
+    const synchronizer = syncGroupService.getSynchronizer(id);
+    if (!synchronizer) {
+      return;
+    }
+    const sourceViewportInfo = sourceViewports.find(sourceViewport => sourceViewport.viewportId === viewportId);
+    const targetViewportInfo = targetViewports.find(targetViewport => targetViewport.viewportId === viewportId);
+    const isSourceViewportInSynchronizer = synchronizer.getSourceViewports().find(sourceViewport => sourceViewport.viewportId === viewportId);
+    const isTargetViewportInSynchronizer = synchronizer.getTargetViewports().find(targetViewport => targetViewport.viewportId === viewportId);
+
+    // if the viewport was previously a source viewport, add it again
+    if (sourceViewportInfo && !isSourceViewportInSynchronizer) {
+      synchronizer.addSource({
+        viewportId: sourceViewportInfo.viewportId,
+        renderingEngineId: sourceViewportInfo.renderingEngineId
+      });
+    }
+
+    // if the viewport was previously a target viewport, add it again
+    if (targetViewportInfo && !isTargetViewportInSynchronizer) {
+      synchronizer.addTarget({
+        viewportId: targetViewportInfo.viewportId,
+        renderingEngineId: targetViewportInfo.renderingEngineId
+      });
+    }
+  });
+}
 
 // Component displayName
 OHIFCornerstoneViewport.displayName = 'OHIFCornerstoneViewport';

package/dist/181.css

@@ -1,3 +1,3 @@
-.viewport-wrapper{height:100%;position:relative;width:100%}.cornerstone-viewport-element{background-color:#000;height:100%;outline:0!important;overflow:hidden;position:relative;width:100%}
+.cornerstone-viewport-element,.viewport-wrapper{height:100%;position:relative;width:100%}.cornerstone-viewport-element{background-color:#000;outline:0!important;overflow:hidden}
 .viewport-overlay{max-width:40%}.viewport-overlay span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.viewport-overlay.left-viewport{text-align:left}.viewport-overlay.right-viewport-scrollbar{text-align:right}.viewport-overlay.right-viewport-scrollbar .flex.flex-row{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}
 .ViewportOrientationMarkers{--marker-width:100px;--marker-height:100px;--scrollbar-width:20px;font-size:15px;line-height:18px;pointer-events:none}.ViewportOrientationMarkers .orientation-marker{position:absolute}.ViewportOrientationMarkers .top-mid{left:50%;top:.6rem}.ViewportOrientationMarkers .left-mid{left:5px;top:47%}.ViewportOrientationMarkers .right-mid{left:calc(100% - var(--marker-width) - var(--scrollbar-width));top:47%}.ViewportOrientationMarkers .bottom-mid{left:47%;top:calc(100% - var(--marker-height) - .6rem)}.ViewportOrientationMarkers .right-mid .orientation-marker-value{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;min-width:var(--marker-width)}.ViewportOrientationMarkers .bottom-mid .orientation-marker-value{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;min-height:var(--marker-height)}