@ohif/app 3.7.0-beta.5 → 3.7.0-beta.51

package/dist/{351.bundle.0742237651aef9694a65.js → 181.bundle.234fef330d4fe6baca8b.js}

@@ -1,7 +1,7 @@
 "use strict";
-(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[351],{
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[181],{
 
-/***/ 30351:
+/***/ 86181:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -13,22 +13,22 @@ __webpack_require__.d(__webpack_exports__, {
 });
 
 // EXTERNAL MODULE: ../../../node_modules/react/index.js
-var react = __webpack_require__(32735);
+var react = __webpack_require__(43001);
 // EXTERNAL MODULE: ../../../node_modules/react-resize-detector/build/index.esm.js
-var index_esm = __webpack_require__(14664);
+var index_esm = __webpack_require__(7023);
 // EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
-var prop_types = __webpack_require__(60216);
+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 + 321 modules
-var esm = __webpack_require__(57270);
-// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 335 modules
-var dist_esm = __webpack_require__(77331);
-// EXTERNAL MODULE: ../../core/src/index.ts + 101 modules
-var src = __webpack_require__(48501);
-// EXTERNAL MODULE: ../../ui/src/index.js + 452 modules
-var ui_src = __webpack_require__(28619);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 323 modules
+var esm = __webpack_require__(26925);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 337 modules
+var dist_esm = __webpack_require__(45754);
+// EXTERNAL MODULE: ../../core/src/index.ts + 104 modules
+var src = __webpack_require__(24966);
+// EXTERNAL MODULE: ../../ui/src/index.js + 456 modules
+var ui_src = __webpack_require__(60082);
 // EXTERNAL MODULE: ../../../extensions/cornerstone/src/state.ts
-var state = __webpack_require__(21922);
+var state = __webpack_require__(73704);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.css
 // extracted by mini-css-extract-plugin
 
@@ -160,9 +160,9 @@ CornerstoneImageScrollbar.propTypes = {
 };
 /* harmony default export */ const ViewportImageScrollbar = (CornerstoneImageScrollbar);
 // EXTERNAL MODULE: ../../../node_modules/gl-matrix/esm/index.js + 10 modules
-var gl_matrix_esm = __webpack_require__(88256);
+var gl_matrix_esm = __webpack_require__(45451);
 // EXTERNAL MODULE: ../../../node_modules/moment/moment.js
-var moment = __webpack_require__(53806);
+var moment = __webpack_require__(71271);
 var moment_default = /*#__PURE__*/__webpack_require__.n(moment);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/Overlays/utils.ts
 
@@ -634,7 +634,7 @@ CustomizableViewportOverlay.propTypes = {
 };
 /* harmony default export */ const Overlays_CustomizableViewportOverlay = (CustomizableViewportOverlay);
 // EXTERNAL MODULE: ../../../node_modules/classnames/index.js
-var classnames = __webpack_require__(40841);
+var classnames = __webpack_require__(44921);
 var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/Overlays/ViewportOrientationMarkers.css
 // extracted by mini-css-extract-plugin
@@ -963,7 +963,100 @@ function CornerstoneOverlays(props) {
 }
 /* harmony default export */ const Overlays_CornerstoneOverlays = (CornerstoneOverlays);
 // EXTERNAL MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/utils/getSOPInstanceAttributes.js
-var getSOPInstanceAttributes = __webpack_require__(63130);
+var getSOPInstanceAttributes = __webpack_require__(87172);
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/CinePlayer/CinePlayer.tsx
+
+
+
+function WrappedCinePlayer(_ref) {
+  let {
+    enabledVPElement,
+    viewportIndex,
+    servicesManager
+  } = _ref;
+  const {
+    toolbarService,
+    customizationService
+  } = servicesManager.services;
+  const [{
+    isCineEnabled,
+    cines
+  }, cineService] = (0,ui_src/* useCine */.vQ)();
+  const [{
+    activeViewportIndex
+  }] = (0,ui_src/* useViewportGrid */.O_)();
+  const {
+    component: CinePlayerComponent = ui_src/* CinePlayer */.H6
+  } = customizationService.get('cinePlayer') ?? {};
+  const handleCineClose = () => {
+    toolbarService.recordInteraction({
+      groupId: 'MoreTools',
+      itemId: 'cine',
+      interactionType: 'toggle',
+      commands: [{
+        commandName: 'toggleCine',
+        commandOptions: {},
+        context: 'CORNERSTONE'
+      }]
+    });
+  };
+  const cineHandler = () => {
+    if (!cines || !cines[viewportIndex] || !enabledVPElement) {
+      return;
+    }
+    const cine = cines[viewportIndex];
+    const isPlaying = cine.isPlaying || false;
+    const frameRate = cine.frameRate || 24;
+    const validFrameRate = Math.max(frameRate, 1);
+    if (isPlaying) {
+      cineService.playClip(enabledVPElement, {
+        framesPerSecond: validFrameRate
+      });
+    } else {
+      cineService.stopClip(enabledVPElement);
+    }
+  };
+  (0,react.useEffect)(() => {
+    dist_esm.eventTarget.addEventListener(dist_esm.Enums.Events.STACK_VIEWPORT_NEW_STACK, cineHandler);
+    return () => {
+      cineService.setCine({
+        id: viewportIndex,
+        isPlaying: false
+      });
+      dist_esm.eventTarget.removeEventListener(dist_esm.Enums.Events.STACK_VIEWPORT_NEW_STACK, cineHandler);
+    };
+  }, [enabledVPElement]);
+  (0,react.useEffect)(() => {
+    if (!cines || !cines[viewportIndex] || !enabledVPElement) {
+      return;
+    }
+    cineHandler();
+    return () => {
+      if (enabledVPElement && cines?.[viewportIndex]?.isPlaying) {
+        cineService.stopClip(enabledVPElement);
+      }
+    };
+  }, [cines, viewportIndex, cineService, enabledVPElement, cineHandler]);
+  const cine = cines[viewportIndex];
+  const isPlaying = cine && cine.isPlaying || false;
+  return isCineEnabled && /*#__PURE__*/react.createElement(CinePlayerComponent, {
+    className: "absolute left-1/2 -translate-x-1/2 bottom-3",
+    isPlaying: isPlaying,
+    onClose: handleCineClose,
+    onPlayPauseChange: isPlaying => cineService.setCine({
+      id: activeViewportIndex,
+      isPlaying
+    }),
+    onFrameRateChange: frameRate => cineService.setCine({
+      id: activeViewportIndex,
+      frameRate
+    })
+  });
+}
+/* harmony default export */ const CinePlayer = (WrappedCinePlayer);
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/CinePlayer/index.ts
+
+/* harmony default export */ const components_CinePlayer = (CinePlayer);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx
 
 
@@ -976,6 +1069,7 @@ var getSOPInstanceAttributes = __webpack_require__(63130);
 
 
 
+
 const STACK = 'stack';
 
 /**
@@ -1038,21 +1132,16 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
     viewportOptions,
     displaySetOptions,
     servicesManager,
+    commandsManager,
     onElementEnabled,
     onElementDisabled,
+    isJumpToMeasurementDisabled,
     // Note: you SHOULD NOT use the initialImageIdOrIndex for manipulation
     // of the imageData in the OHIFCornerstoneViewport. This prop is used
     // to set the initial state of the viewport's first image to render
     initialImageIndex
   } = props;
   const [scrollbarHeight, setScrollbarHeight] = (0,react.useState)('100px');
-  const [{
-    isCineEnabled,
-    cines
-  }, cineService] = (0,ui_src/* useCine */.vQ)();
-  const [{
-    activeViewportIndex
-  }] = (0,ui_src/* useViewportGrid */.O_)();
   const [enabledVPElement, setEnabledVPElement] = (0,react.useState)(null);
   const elementRef = (0,react.useRef)();
   const {
@@ -1067,58 +1156,6 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
     stateSyncService
   } = servicesManager.services;
   const [viewportDialogState] = (0,ui_src/* useViewportDialog */.en)();
-  const cineHandler = () => {
-    if (!cines || !cines[viewportIndex] || !enabledVPElement) {
-      return;
-    }
-    const cine = cines[viewportIndex];
-    const isPlaying = cine.isPlaying || false;
-    const frameRate = cine.frameRate || 24;
-    const validFrameRate = Math.max(frameRate, 1);
-    if (isPlaying) {
-      cineService.playClip(enabledVPElement, {
-        framesPerSecond: validFrameRate
-      });
-    } else {
-      cineService.stopClip(enabledVPElement);
-    }
-  };
-  (0,react.useEffect)(() => {
-    dist_esm.eventTarget.addEventListener(dist_esm.Enums.Events.STACK_VIEWPORT_NEW_STACK, cineHandler);
-    return () => {
-      cineService.setCine({
-        id: viewportIndex,
-        isPlaying: false
-      });
-      dist_esm.eventTarget.removeEventListener(dist_esm.Enums.Events.STACK_VIEWPORT_NEW_STACK, cineHandler);
-    };
-  }, [enabledVPElement]);
-  (0,react.useEffect)(() => {
-    if (!cines || !cines[viewportIndex] || !enabledVPElement) {
-      return;
-    }
-    cineHandler();
-    return () => {
-      if (enabledVPElement && cines?.[viewportIndex]?.isPlaying) {
-        cineService.stopClip(enabledVPElement);
-      }
-    };
-  }, [cines, viewportIndex, cineService, enabledVPElement, cineHandler]);
-  const cine = cines[viewportIndex];
-  const isPlaying = cine && cine.isPlaying || false;
-  const handleCineClose = () => {
-    toolbarService.recordInteraction({
-      groupId: 'MoreTools',
-      itemId: 'cine',
-      interactionType: 'toggle',
-      commands: [{
-        commandName: 'toggleCine',
-        commandOptions: {},
-        context: 'CORNERSTONE'
-      }]
-    });
-  };
-
   // useCallback for scroll bar height calculation
   const setImageScrollBarHeight = (0,react.useCallback)(() => {
     const scrollbarHeight = `${elementRef.current.clientHeight - 20}px`;
@@ -1132,35 +1169,6 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
       setImageScrollBarHeight();
     }
   }, [elementRef]);
-  const storePresentation = () => {
-    const currentPresentation = cornerstoneViewportService.getPresentation(viewportIndex);
-    if (!currentPresentation || !currentPresentation.presentationIds) return;
-    const {
-      lutPresentationStore,
-      positionPresentationStore
-    } = stateSyncService.getState();
-    const {
-      presentationIds
-    } = currentPresentation;
-    const {
-      lutPresentationId,
-      positionPresentationId
-    } = presentationIds || {};
-    const storeState = {};
-    if (lutPresentationId) {
-      storeState.lutPresentationStore = {
-        ...lutPresentationStore,
-        [lutPresentationId]: currentPresentation
-      };
-    }
-    if (positionPresentationId) {
-      storeState.positionPresentationStore = {
-        ...positionPresentationStore,
-        [positionPresentationId]: currentPresentation
-      };
-    }
-    stateSyncService.store(storeState);
-  };
   const cleanUpServices = (0,react.useCallback)(() => {
     const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(viewportIndex);
     if (!viewportInfo) {
@@ -1201,7 +1209,9 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
     dist_esm.eventTarget.addEventListener(dist_esm.Enums.Events.ELEMENT_ENABLED, elementEnabledHandler);
     setImageScrollBarHeight();
     return () => {
-      storePresentation();
+      commandsManager.runCommand('storePresentation', {
+        viewportIndex
+      });
       cleanUpServices();
       const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(viewportIndex);
       cornerstoneViewportService.disableElement(viewportIndex);
@@ -1284,6 +1294,9 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
    * the cache for jumping to see if there is any jump queued, then we jump to the correct slice.
    */
   (0,react.useEffect)(() => {
+    if (isJumpToMeasurementDisabled) {
+      return;
+    }
     const unsubscribeFromJumpToMeasurementEvents = _subscribeToJumpToMeasurementEvents(measurementService, displaySetService, elementRef, viewportIndex, displaySets, viewportGridService, cornerstoneViewportService);
     _checkForCachedJumpToMeasurementEvents(measurementService, displaySetService, elementRef, viewportIndex, displaySets, viewportGridService, cornerstoneViewportService);
     return () => {
@@ -1293,12 +1306,8 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
   return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
     className: "viewport-wrapper"
   }, /*#__PURE__*/react.createElement(index_esm/* default */.ZP, {
-    handleWidth: true,
-    handleHeight: true,
-    skipOnMount: true // Todo: make these configurable
-    ,
-    refreshMode: 'debounce',
-    refreshRate: 200 // transition amount in side panel
+    refreshMode: "debounce",
+    refreshRate: 50 // Wait 50 ms after last move to render
     ,
     onResize: onResize,
     targetRef: elementRef.current
@@ -1317,18 +1326,10 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
     element: elementRef.current,
     scrollbarHeight: scrollbarHeight,
     servicesManager: servicesManager
-  }), isCineEnabled && /*#__PURE__*/react.createElement(ui_src/* CinePlayer */.H6, {
-    className: "absolute left-1/2 -translate-x-1/2 bottom-3",
-    isPlaying: isPlaying,
-    onClose: handleCineClose,
-    onPlayPauseChange: isPlaying => cineService.setCine({
-      id: activeViewportIndex,
-      isPlaying
-    }),
-    onFrameRateChange: frameRate => cineService.setCine({
-      id: activeViewportIndex,
-      frameRate
-    })
+  }), /*#__PURE__*/react.createElement(components_CinePlayer, {
+    enabledVPElement: enabledVPElement,
+    viewportIndex: viewportIndex,
+    servicesManager: servicesManager
   })), /*#__PURE__*/react.createElement("div", {
     className: "absolute w-full"
   }, viewportDialogState.viewportIndex === viewportIndex && /*#__PURE__*/react.createElement(ui_src/* Notification */.P_, {
@@ -1351,7 +1352,9 @@ function _subscribeToJumpToMeasurementEvents(measurementService, displaySetServi
       measurement,
       isConsumed
     } = props;
-    if (!measurement || isConsumed) return;
+    if (!measurement || isConsumed) {
+      return;
+    }
     if (cacheJumpToMeasurementEvent.cornerstoneViewport === undefined) {
       // Decide on which viewport should handle this
       cacheJumpToMeasurementEvent.cornerstoneViewport = cornerstoneViewportService.getViewportIndexToJump(jumpIndex, measurement.displaySetInstanceUID, {
@@ -1368,13 +1371,17 @@ function _subscribeToJumpToMeasurementEvents(measurementService, displaySetServi
 
 // Check if there is a queued jumpToMeasurement event
 function _checkForCachedJumpToMeasurementEvents(measurementService, displaySetService, elementRef, viewportIndex, displaySets, viewportGridService, cornerstoneViewportService) {
-  if (!cacheJumpToMeasurementEvent) return;
+  if (!cacheJumpToMeasurementEvent) {
+    return;
+  }
   if (cacheJumpToMeasurementEvent.isConsumed) {
     cacheJumpToMeasurementEvent = null;
     return;
   }
   const displaysUIDs = displaySets.map(displaySet => displaySet.displaySetInstanceUID);
-  if (!displaysUIDs?.length) return;
+  if (!displaysUIDs?.length) {
+    return;
+  }
 
   // Jump to measurement if the measurement exists
   const {
@@ -1451,6 +1458,9 @@ function _jumpToMeasurement(measurement, targetElementRef, viewportIndex, measur
 
 // Component displayName
 OHIFCornerstoneViewport.displayName = 'OHIFCornerstoneViewport';
+OHIFCornerstoneViewport.defaultProps = {
+  isJumpToMeasurementDisabled: false
+};
 OHIFCornerstoneViewport.propTypes = {
   viewportIndex: (prop_types_default()).number.isRequired,
   displaySets: (prop_types_default()).array.isRequired,
@@ -1459,6 +1469,7 @@ OHIFCornerstoneViewport.propTypes = {
   displaySetOptions: prop_types_default().arrayOf((prop_types_default()).any),
   servicesManager: (prop_types_default()).object.isRequired,
   onElementEnabled: (prop_types_default()).func,
+  isJumpToMeasurementDisabled: (prop_types_default()).bool,
   // Note: you SHOULD NOT use the initialImageIdOrIndex for manipulation
   // of the imageData in the OHIFCornerstoneViewport. This prop is used
   // to set the initial state of the viewport's first image to render

package/dist/{351.css → 181.css}

@@ -1,3 +1,3 @@
-.cornerstone-viewport-element,.viewport-wrapper{height:100%;position:relative;width:100%}.cornerstone-viewport-element{background-color:#000;outline:0!important;overflow:hidden}
+.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%}
 .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)}