@ohif/app 3.8.0-beta.63 → 3.8.0-beta.65

package/dist/{889.bundle.a776c87be9e3580f3437.js → 889.bundle.ffc727aa6d1a74f2138d.js}

@@ -23,10 +23,10 @@ var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
 var esm = __webpack_require__(20767);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 383 modules
 var dist_esm = __webpack_require__(50719);
-// EXTERNAL MODULE: ../../core/src/index.ts + 66 modules
-var src = __webpack_require__(14283);
-// EXTERNAL MODULE: ../../ui/src/index.js + 489 modules
-var ui_src = __webpack_require__(6804);
+// EXTERNAL MODULE: ../../core/src/index.ts + 67 modules
+var src = __webpack_require__(78198);
+// EXTERNAL MODULE: ../../ui/src/index.js + 497 modules
+var ui_src = __webpack_require__(58046);
 // EXTERNAL MODULE: ../../../extensions/cornerstone/src/state.ts
 var state = __webpack_require__(71353);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.css
@@ -262,78 +262,11 @@ function getCompression(imageId) {
 
 
 const EPSILON = 1e-4;
-/**
- * Window Level / Center Overlay item
- */
-function VOIOverlayItem({
-  voi,
-  customization
-}) {
-  const {
-    windowWidth,
-    windowCenter
-  } = voi;
-  if (typeof windowCenter !== 'number' || typeof windowWidth !== 'number') {
-    return null;
-  }
-  return /*#__PURE__*/react.createElement("div", {
-    className: "overlay-item flex flex-row",
-    style: {
-      color: customization && customization.color || undefined
-    }
-  }, /*#__PURE__*/react.createElement("span", {
-    className: "mr-1 shrink-0"
-  }, "W:"), /*#__PURE__*/react.createElement("span", {
-    className: "ml-1 mr-2 shrink-0 font-light"
-  }, windowWidth.toFixed(0)), /*#__PURE__*/react.createElement("span", {
-    className: "mr-1 shrink-0"
-  }, "L:"), /*#__PURE__*/react.createElement("span", {
-    className: "ml-1 shrink-0 font-light"
-  }, windowCenter.toFixed(0)));
-}
-
-/**
- * Zoom Level Overlay item
- */
-function ZoomOverlayItem({
-  scale,
-  customization
-}) {
-  return /*#__PURE__*/react.createElement("div", {
-    className: "overlay-item flex flex-row",
-    style: {
-      color: customization && customization.color || undefined
-    }
-  }, /*#__PURE__*/react.createElement("span", {
-    className: "mr-1 shrink-0"
-  }, "Zoom:"), /*#__PURE__*/react.createElement("span", {
-    className: "font-light"
-  }, scale.toFixed(2), "x"));
-}
-
-/**
- * Instance Number Overlay Item
- */
-function InstanceNumberOverlayItem({
-  instanceNumber,
-  imageSliceData,
-  customization
-}) {
-  const {
-    imageIndex,
-    numberOfSlices
-  } = imageSliceData;
-  return /*#__PURE__*/react.createElement("div", {
-    className: "overlay-item flex flex-row",
-    style: {
-      color: customization && customization.color || undefined
-    }
-  }, /*#__PURE__*/react.createElement("span", {
-    className: "mr-1 shrink-0"
-  }, "I:"), /*#__PURE__*/react.createElement("span", {
-    className: "font-light"
-  }, instanceNumber !== undefined && instanceNumber !== null ? `${instanceNumber} (${imageIndex + 1}/${numberOfSlices})` : `${imageIndex + 1}/${numberOfSlices}`));
-}
+const OverlayItemComponents = {
+  'ohif.overlayItem.windowLevel': VOIOverlayItem,
+  'ohif.overlayItem.zoomLevel': ZoomOverlayItem,
+  'ohif.overlayItem.instanceNumber': InstanceNumberOverlayItem
+};
 
 /**
  * Customizable Viewport Overlay
@@ -346,16 +279,15 @@ function CustomizableViewportOverlay({
   servicesManager
 }) {
   const {
-    toolbarService,
     cornerstoneViewportService,
-    customizationService
+    customizationService,
+    toolGroupService
   } = servicesManager.services;
   const [voi, setVOI] = (0,react.useState)({
     windowCenter: null,
     windowWidth: null
   });
   const [scale, setScale] = (0,react.useState)(1);
-  const [activeTools, setActiveTools] = (0,react.useState)([]);
   const {
     imageIndex
   } = imageSliceData;
@@ -363,26 +295,8 @@ function CustomizableViewportOverlay({
   const topRightCustomization = customizationService.getModeCustomization('cornerstoneOverlayTopRight');
   const bottomLeftCustomization = customizationService.getModeCustomization('cornerstoneOverlayBottomLeft');
   const bottomRightCustomization = customizationService.getModeCustomization('cornerstoneOverlayBottomRight');
-  const instance = (0,react.useMemo)(() => {
-    if (viewportData != null) {
-      return _getViewportInstance(viewportData, imageIndex);
-    } else {
-      return null;
-    }
-  }, [viewportData, imageIndex]);
-  const instanceNumber = (0,react.useMemo)(() => {
-    if (viewportData != null) {
-      return _getInstanceNumber(viewportData, viewportId, imageIndex, cornerstoneViewportService);
-    }
-    return null;
-  }, [viewportData, viewportId, imageIndex, cornerstoneViewportService]);
-
-  /**
-   * Initial toolbar state
-   */
-  (0,react.useEffect)(() => {
-    setActiveTools(toolbarService.getActiveTools());
-  }, []);
+  const instance = (0,react.useMemo)(() => viewportData ? getViewportInstance(viewportData, imageIndex) : null, [viewportData, imageIndex]);
+  const instanceNumber = (0,react.useMemo)(() => viewportData ? getInstanceNumber(viewportData, viewportId, imageIndex, cornerstoneViewportService) : null, [viewportData, viewportId, imageIndex, cornerstoneViewportService]);
 
   /**
    * Updating the VOI when the viewport changes its voi
@@ -449,21 +363,6 @@ function CustomizableViewportOverlay({
       element.removeEventListener(dist_esm.Enums.Events.CAMERA_MODIFIED, updateScale);
     };
   }, [viewportId, viewportData, cornerstoneViewportService, element]);
-
-  /**
-   * Updating the active tools when the toolbar changes
-   */
-  // Todo: this should act on the toolGroups instead of the toolbar state
-  (0,react.useEffect)(() => {
-    const {
-      unsubscribe
-    } = toolbarService.subscribe(toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED, () => {
-      setActiveTools(toolbarService.getActiveTools());
-    });
-    return () => {
-      unsubscribe();
-    };
-  }, [toolbarService]);
   const _renderOverlayItem = (0,react.useCallback)(item => {
     const overlayItemProps = {
       element,
@@ -479,17 +378,19 @@ function CustomizableViewportOverlay({
         formatNumberPrecision: formatNumberPrecision
       },
       instance,
-      // calculated
       voi,
       scale,
       instanceNumber
     };
-    if (item.customizationType === 'ohif.overlayItem.windowLevel') {
-      return /*#__PURE__*/react.createElement(VOIOverlayItem, overlayItemProps);
-    } else if (item.customizationType === 'ohif.overlayItem.zoomLevel') {
-      return /*#__PURE__*/react.createElement(ZoomOverlayItem, overlayItemProps);
-    } else if (item.customizationType === 'ohif.overlayItem.instanceNumber') {
-      return /*#__PURE__*/react.createElement(InstanceNumberOverlayItem, overlayItemProps);
+    if (!item) {
+      return null;
+    }
+    const {
+      customizationType
+    } = item;
+    const OverlayItemComponent = OverlayItemComponents[customizationType];
+    if (OverlayItemComponent) {
+      return /*#__PURE__*/react.createElement(OverlayItemComponent, overlayItemProps);
     } else {
       const renderItem = customizationService.transform(item);
       if (typeof renderItem.content === 'function') {
@@ -497,68 +398,68 @@ function CustomizableViewportOverlay({
       }
     }
   }, [element, viewportData, imageSliceData, viewportId, servicesManager, customizationService, instance, voi, scale, instanceNumber]);
-  const getTopLeftContent = (0,react.useCallback)(() => {
-    const items = topLeftCustomization?.items || [{
+  const getContent = (0,react.useCallback)((customization, defaultItems, keyPrefix) => {
+    const items = customization?.items ?? defaultItems;
+    return /*#__PURE__*/react.createElement(react.Fragment, null, items.map((item, index) => /*#__PURE__*/react.createElement("div", {
+      key: `${keyPrefix}_${index}`
+    }, item?.condition ? item.condition() ? _renderOverlayItem(item) : null : _renderOverlayItem(item))));
+  }, [_renderOverlayItem]);
+  return /*#__PURE__*/react.createElement(ui_src/* ViewportOverlay */.pU, {
+    topLeft:
+    /**
+     * Inline default overlay items for a more standard expansion
+     */
+    getContent(topLeftCustomization, [{
       id: 'WindowLevel',
       customizationType: 'ohif.overlayItem.windowLevel'
-    }];
-    return /*#__PURE__*/react.createElement(react.Fragment, null, items.map((item, i) => /*#__PURE__*/react.createElement("div", {
-      key: `topLeftOverlayItem_${i}`
-    }, _renderOverlayItem(item))));
-  }, [topLeftCustomization, _renderOverlayItem]);
-  const getTopRightContent = (0,react.useCallback)(() => {
-    const items = topRightCustomization?.items || [{
-      id: 'InstanceNmber',
+    }, {
+      id: 'ZoomLevel',
+      customizationType: 'ohif.overlayItem.zoomLevel',
+      condition: () => {
+        const activeToolName = toolGroupService.getActiveToolForViewport(viewportId);
+        return activeToolName === 'Zoom';
+      }
+    }], 'topLeftOverlayItem'),
+    topRight: getContent(topRightCustomization, [{
+      id: 'InstanceNumber',
       customizationType: 'ohif.overlayItem.instanceNumber'
-    }];
-    return /*#__PURE__*/react.createElement(react.Fragment, null, items.map((item, i) => /*#__PURE__*/react.createElement("div", {
-      key: `topRightOverlayItem_${i}`
-    }, _renderOverlayItem(item))));
-  }, [topRightCustomization, _renderOverlayItem]);
-  const getBottomLeftContent = (0,react.useCallback)(() => {
-    const items = bottomLeftCustomization?.items || [];
-    return /*#__PURE__*/react.createElement(react.Fragment, null, items.map((item, i) => /*#__PURE__*/react.createElement("div", {
-      key: `bottomLeftOverlayItem_${i}`
-    }, _renderOverlayItem(item))));
-  }, [bottomLeftCustomization, _renderOverlayItem]);
-  const getBottomRightContent = (0,react.useCallback)(() => {
-    const items = bottomRightCustomization?.items || [];
-    return /*#__PURE__*/react.createElement(react.Fragment, null, items.map((item, i) => /*#__PURE__*/react.createElement("div", {
-      key: `bottomRightOverlayItem_${i}`
-    }, _renderOverlayItem(item))));
-  }, [bottomRightCustomization, _renderOverlayItem]);
-  return /*#__PURE__*/react.createElement(ui_src/* ViewportOverlay */.pU, {
-    topLeft: getTopLeftContent(),
-    topRight: getTopRightContent(),
-    bottomLeft: getBottomLeftContent(),
-    bottomRight: getBottomRightContent()
+    }], 'topRightOverlayItem'),
+    bottomLeft: getContent(bottomLeftCustomization, [null], 'bottomLeftOverlayItem'),
+    bottomRight: getContent(bottomRightCustomization, [null], 'bottomRightOverlayItem')
   });
 }
-function _getViewportInstance(viewportData, imageIndex) {
+const getViewportInstance = (viewportData, imageIndex) => {
+  const {
+    viewportType,
+    data
+  } = viewportData;
   let imageId = null;
-  if (viewportData.viewportType === dist_esm.Enums.ViewportType.STACK) {
-    imageId = viewportData.data.imageIds[imageIndex];
-  } else if (viewportData.viewportType === dist_esm.Enums.ViewportType.ORTHOGRAPHIC) {
-    const volumes = viewportData.data;
-    if (volumes && volumes.length == 1) {
-      const volume = volumes[0];
-      imageId = volume.imageIds[imageIndex];
-    }
+  switch (viewportType) {
+    case dist_esm.Enums.ViewportType.STACK:
+      imageId = data.imageIds[imageIndex];
+      break;
+    case dist_esm.Enums.ViewportType.ORTHOGRAPHIC:
+      if (data?.length === 1) {
+        imageId = data[0].imageIds[imageIndex];
+      }
+      break;
+    default:
+      break;
   }
   return imageId ? dist_esm.metaData.get('instance', imageId) || {} : {};
-}
-function _getInstanceNumber(viewportData, viewportId, imageIndex, cornerstoneViewportService) {
+};
+const getInstanceNumber = (viewportData, viewportId, imageIndex, cornerstoneViewportService) => {
   let instanceNumber;
-  if (viewportData.viewportType === dist_esm.Enums.ViewportType.STACK) {
-    instanceNumber = _getInstanceNumberFromStack(viewportData, imageIndex);
-    if (!instanceNumber && instanceNumber !== 0) {
-      return null;
-    }
-  } else if (viewportData.viewportType === dist_esm.Enums.ViewportType.ORTHOGRAPHIC) {
-    instanceNumber = _getInstanceNumberFromVolume(viewportData, imageIndex, viewportId, cornerstoneViewportService);
+  switch (viewportData.viewportType) {
+    case dist_esm.Enums.ViewportType.STACK:
+      instanceNumber = _getInstanceNumberFromStack(viewportData, imageIndex);
+      break;
+    case dist_esm.Enums.ViewportType.ORTHOGRAPHIC:
+      instanceNumber = _getInstanceNumberFromVolume(viewportData, viewportId, cornerstoneViewportService);
+      break;
   }
-  return instanceNumber;
-}
+  return instanceNumber ?? null;
+};
 function _getInstanceNumberFromStack(viewportData, imageIndex) {
   const imageIds = viewportData.data.imageIds;
   const imageId = imageIds[imageIndex];
@@ -617,6 +518,79 @@ function _getInstanceNumberFromVolume(viewportData, viewportId, cornerstoneViewp
     return parseInt(instanceNumber);
   }
 }
+
+/**
+ * Window Level / Center Overlay item
+ */
+function VOIOverlayItem({
+  voi,
+  customization
+}) {
+  const {
+    windowWidth,
+    windowCenter
+  } = voi;
+  if (typeof windowCenter !== 'number' || typeof windowWidth !== 'number') {
+    return null;
+  }
+  return /*#__PURE__*/react.createElement("div", {
+    className: "overlay-item flex flex-row",
+    style: {
+      color: customization && customization.color || undefined
+    }
+  }, /*#__PURE__*/react.createElement("span", {
+    className: "mr-1 shrink-0"
+  }, "W:"), /*#__PURE__*/react.createElement("span", {
+    className: "ml-1 mr-2 shrink-0 font-light"
+  }, windowWidth.toFixed(0)), /*#__PURE__*/react.createElement("span", {
+    className: "mr-1 shrink-0"
+  }, "L:"), /*#__PURE__*/react.createElement("span", {
+    className: "ml-1 shrink-0 font-light"
+  }, windowCenter.toFixed(0)));
+}
+
+/**
+ * Zoom Level Overlay item
+ */
+function ZoomOverlayItem({
+  scale,
+  customization
+}) {
+  return /*#__PURE__*/react.createElement("div", {
+    className: "overlay-item flex flex-row",
+    style: {
+      color: customization && customization.color || undefined
+    }
+  }, /*#__PURE__*/react.createElement("span", {
+    className: "mr-1 shrink-0"
+  }, "Zoom:"), /*#__PURE__*/react.createElement("span", {
+    className: "font-light"
+  }, scale.toFixed(2), "x"));
+}
+
+/**
+ * Instance Number Overlay Item
+ */
+function InstanceNumberOverlayItem({
+  instanceNumber,
+  imageSliceData,
+  customization
+}) {
+  const {
+    imageIndex,
+    numberOfSlices
+  } = imageSliceData;
+  return /*#__PURE__*/react.createElement("div", {
+    className: "overlay-item flex flex-row",
+    style: {
+      color: customization && customization.color || undefined
+    }
+  }, /*#__PURE__*/react.createElement("span", {
+    className: "mr-1 shrink-0"
+  }, "I:"), /*#__PURE__*/react.createElement("span", {
+    className: "font-light"
+  }, instanceNumber !== undefined && instanceNumber !== null ? `${instanceNumber} (${imageIndex + 1}/${numberOfSlices})` : `${imageIndex + 1}/${numberOfSlices}`));
+}
 CustomizableViewportOverlay.propTypes = {
   viewportData: (prop_types_default()).object,
   imageIndex: (prop_types_default()).number,
@@ -965,33 +939,20 @@ function WrappedCinePlayer({
   servicesManager
 }) {
   const {
-    toolbarService,
     customizationService,
     displaySetService,
-    viewportGridService,
-    cineService
+    viewportGridService
   } = servicesManager.services;
   const [{
     isCineEnabled,
     cines
-  }] = (0,ui_src/* useCine */.tq)();
+  }, api] = (0,ui_src/* useCine */.tq)();
   const [newStackFrameRate, setNewStackFrameRate] = (0,react.useState)(24);
   const [appConfig] = (0,state_0/* useAppConfig */.r)();
+  const isMountedRef = (0,react.useRef)(null);
   const {
     component: CinePlayerComponent = ui_src/* CinePlayer */.F0
   } = customizationService.get('cinePlayer') ?? {};
-  const handleCineClose = () => {
-    toolbarService.recordInteraction({
-      groupId: 'MoreTools',
-      interactionType: 'toggle',
-      commands: [{
-        commandName: 'toggleCine',
-        commandOptions: {},
-        toolName: 'cine',
-        context: 'CORNERSTONE'
-      }]
-    });
-  };
   const cineHandler = () => {
     if (!cines || !cines[viewportId] || !enabledVPElement) {
       return;
@@ -1001,11 +962,11 @@ function WrappedCinePlayer({
     const frameRate = cine.frameRate || 24;
     const validFrameRate = Math.max(frameRate, 1);
     if (isPlaying) {
-      cineService.playClip(enabledVPElement, {
+      api.playClip(enabledVPElement, {
         framesPerSecond: validFrameRate
       });
     } else {
-      cineService.stopClip(enabledVPElement);
+      api.stopClip(enabledVPElement);
     }
   };
   const newStackCineHandler = (0,react.useCallback)(() => {
@@ -1027,19 +988,22 @@ function WrappedCinePlayer({
       }
     });
     if (isPlaying) {
-      cineService.setIsCineEnabled(isPlaying);
+      api.setIsCineEnabled(isPlaying);
     }
-    cineService.setCine({
+    api.setCine({
       id: viewportId,
       isPlaying,
       frameRate
     });
     setNewStackFrameRate(frameRate);
-  }, [cineService, displaySetService, viewportId, viewportGridService, cines]);
+  }, [displaySetService, viewportId, viewportGridService, cines]);
   (0,react.useEffect)(() => {
+    isMountedRef.current = true;
     dist_esm.eventTarget.addEventListener(dist_esm.Enums.Events.STACK_VIEWPORT_NEW_STACK, newStackCineHandler);
     return () => {
-      cineService.setCine({
+      isMountedRef.current = false;
+      api.stopClip(enabledVPElement);
+      api.setCine({
         id: viewportId,
         isPlaying: false
       });
@@ -1047,28 +1011,35 @@ function WrappedCinePlayer({
     };
   }, [enabledVPElement, newStackCineHandler]);
   (0,react.useEffect)(() => {
-    if (!cines || !cines[viewportId] || !enabledVPElement) {
+    if (!cines || !cines[viewportId] || !enabledVPElement || !isMountedRef.current) {
       return;
     }
     cineHandler();
     return () => {
-      if (enabledVPElement && cines?.[viewportId]?.isPlaying) {
-        cineService.stopClip(enabledVPElement);
-      }
+      api.stopClip(enabledVPElement);
     };
-  }, [cines, viewportId, cineService, enabledVPElement, cineHandler]);
+  }, [cines, viewportId, enabledVPElement, cineHandler]);
   const cine = cines[viewportId];
   const isPlaying = cine && cine.isPlaying || false;
   return isCineEnabled && /*#__PURE__*/react.createElement(CinePlayerComponent, {
     className: "absolute left-1/2 bottom-3 -translate-x-1/2",
     frameRate: newStackFrameRate,
     isPlaying: isPlaying,
-    onClose: handleCineClose,
-    onPlayPauseChange: isPlaying => cineService.setCine({
-      id: viewportId,
-      isPlaying
-    }),
-    onFrameRateChange: frameRate => cineService.setCine({
+    onClose: () => {
+      // also stop the clip
+      api.setCine({
+        id: viewportId,
+        isPlaying: false
+      });
+      api.setIsCineEnabled(false);
+    },
+    onPlayPauseChange: isPlaying => {
+      api.setCine({
+        id: viewportId,
+        isPlaying
+      });
+    },
+    onFrameRateChange: frameRate => api.setCine({
       id: viewportId,
       frameRate
     })
@@ -1161,7 +1132,8 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
     // 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
+    initialImageIndex,
+    onReady
   } = props;
   const viewportId = viewportOptions.viewportId;
   const [scrollbarHeight, setScrollbarHeight] = (0,react.useState)('100px');
@@ -1222,6 +1194,7 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
     }
     if (onElementEnabled) {
       onElementEnabled(evt);
+      onReady?.(evt);
     }
   }, [viewportId, onElementEnabled, toolGroupService]);