@ohif/app 3.8.0-beta.80 → 3.8.0-beta.81

package/dist/{433.bundle.4c77c1fe8fc90ac14218.js → 433.bundle.e0018820758f5a86fa7f.js}

@@ -2821,7 +2821,7 @@ class AdvancedMagnifyViewport {
         });
         return magnifyElement;
     }
-    _convertZoomFactorToParalellScale(viewport, magnifyViewport, zoomFactor) {
+    _convertZoomFactorToParallelScale(viewport, magnifyViewport, zoomFactor) {
         const { parallelScale } = viewport.getCamera();
         const canvasRatio = magnifyViewport.canvas.offsetWidth / viewport.canvas.offsetWidth;
         return parallelScale * (1 / zoomFactor) * canvasRatio;
@@ -2995,7 +2995,7 @@ class AdvancedMagnifyViewport {
     }
     _syncViewportsCameras(sourceViewport, magnifyViewport) {
         const worldPos = sourceViewport.canvasToWorld(this.position);
-        const parallelScale = this._convertZoomFactorToParalellScale(sourceViewport, magnifyViewport, this.zoomFactor);
+        const parallelScale = this._convertZoomFactorToParallelScale(sourceViewport, magnifyViewport, this.zoomFactor);
         const { focalPoint, position, viewPlaneNormal } = magnifyViewport.getCamera();
         const distance = Math.sqrt(Math.pow(focalPoint[0] - position[0], 2) +
             Math.pow(focalPoint[1] - position[1], 2) +
@@ -3023,11 +3023,17 @@ class AdvancedMagnifyViewport {
         const { viewport: sourceViewport } = this._sourceEnabledElement;
         const { viewport: magnifyViewport } = this._enabledElement;
         const sourceProperties = sourceViewport.getProperties();
+        const imageData = magnifyViewport.getImageData();
+        if (!imageData) {
+            return;
+        }
         magnifyViewport.setProperties(sourceProperties);
         this._syncViewportsCameras(sourceViewport, magnifyViewport);
         if (this._isStackViewport(sourceViewport)) {
             this._syncStackViewports(sourceViewport, magnifyViewport);
         }
+        this._syncViewportsCameras(sourceViewport, magnifyViewport);
+        magnifyViewport.render();
     }
     _resizeViewport() {
         const { viewport } = this._enabledElement;
@@ -3063,6 +3069,7 @@ class AdvancedMagnifyViewportManager {
             this._magnifyViewportsMap.set(magnifyViewport.viewportId, {
                 annotation,
                 magnifyViewport,
+                magnifyViewportInfo: viewportInfo,
             });
             return magnifyViewport;
         };
@@ -3071,11 +3078,15 @@ class AdvancedMagnifyViewportManager {
             if (annotation.metadata.toolName !== ADVANCED_MAGNIFY_TOOL_NAME) {
                 return;
             }
-            this._destroyViewport(annotation.data.magnifyViewportId);
+            this.destroyViewport(annotation.data.magnifyViewportId);
         };
         this._newStackImageCallback = (evt) => {
             const { viewportId: sourceViewportId, imageId } = evt.detail;
             const magnifyViewportsMapEntries = this._getMagnifyViewportsMapEntriesBySourceViewportId(sourceViewportId);
+            const { viewport } = (0,dist_esm.getEnabledElementByViewportId)(sourceViewportId);
+            if (viewport.stackActorReInitialized) {
+                this._reset(sourceViewportId);
+            }
             magnifyViewportsMapEntries.forEach(({ annotation }) => {
                 annotation.metadata.referencedImageId = imageId;
                 annotation.invalidated = true;
@@ -3124,7 +3135,7 @@ class AdvancedMagnifyViewportManager {
         this._removeEventListeners();
         this._destroyViewports();
     }
-    _destroyViewport(magnifyViewportId) {
+    destroyViewport(magnifyViewportId) {
         const magnifyViewportMapEntry = this._magnifyViewportsMap.get(magnifyViewportId);
         if (magnifyViewportMapEntry) {
             const { magnifyViewport } = magnifyViewportMapEntry;
@@ -3137,7 +3148,7 @@ class AdvancedMagnifyViewportManager {
     }
     _destroyViewports() {
         const magnifyViewportIds = Array.from(this._magnifyViewportsMap.keys());
-        magnifyViewportIds.forEach((magnifyViewportId) => this._destroyViewport(magnifyViewportId));
+        magnifyViewportIds.forEach((magnifyViewportId) => this.destroyViewport(magnifyViewportId));
     }
     _getMagnifyViewportsMapEntriesBySourceViewportId(sourceViewportId) {
         const magnifyViewportsMapEntries = Array.from(this._magnifyViewportsMap.values());
@@ -3146,6 +3157,19 @@ class AdvancedMagnifyViewportManager {
             return viewport.id === sourceViewportId;
         });
     }
+    _reset(sourceViewportId) {
+        const magnifyViewports = this._getMagnifyViewportsMapEntriesBySourceViewportId(sourceViewportId);
+        magnifyViewports.forEach(({ magnifyViewport, annotation, magnifyViewportInfo }) => {
+            this.destroyViewport(magnifyViewport.viewportId);
+            const newEnabledElement = (0,dist_esm.getEnabledElementByViewportId)(sourceViewportId);
+            this.createViewport(annotation, {
+                ...magnifyViewportInfo,
+                sourceEnabledElement: {
+                    ...newEnabledElement,
+                },
+            });
+        });
+    }
     _addEventListeners() {
         dist_esm.eventTarget.addEventListener(enums.Events.ANNOTATION_REMOVED, this._annotationRemovedCallback);
     }
@@ -3154,11 +3178,27 @@ class AdvancedMagnifyViewportManager {
     }
     _addSourceElementEventListener(element) {
         element.addEventListener(Events.STACK_NEW_IMAGE, this._newStackImageCallback);
+        const newStackHandler = (evt) => {
+            const { viewportId: sourceViewportId } = evt.detail;
+            this._reset(sourceViewportId);
+        };
+        element.addEventListener(Events.STACK_VIEWPORT_NEW_STACK, newStackHandler);
+        const newVolumeHandler = (evt) => {
+            const { viewportId: sourceViewportId } = evt.detail;
+            this._reset(sourceViewportId);
+        };
+        element.addEventListener(Events.VOLUME_VIEWPORT_NEW_VOLUME, newVolumeHandler);
         element.addEventListener(Events.VOLUME_NEW_IMAGE, this._newVolumeImageCallback);
+        element.newStackHandler = newStackHandler;
+        element.newVolumeHandler = newVolumeHandler;
     }
     _removeSourceElementEventListener(element) {
         element.removeEventListener(Events.STACK_NEW_IMAGE, this._newStackImageCallback);
         element.removeEventListener(Events.VOLUME_NEW_IMAGE, this._newVolumeImageCallback);
+        element.removeEventListener(Events.STACK_VIEWPORT_NEW_STACK, element.newStackHandler);
+        element.removeEventListener(Events.VOLUME_VIEWPORT_NEW_VOLUME, element.newVolumeHandler);
+        delete element.newStackHandler;
+        delete element.newVolumeHandler;
     }
     _initialize() {
         this._addEventListeners();
@@ -7180,6 +7220,9 @@ var esm = __webpack_require__(44753);
     [StrategyCallbacks/* default */.A.ComputeInnerCircleRadius]: (operationData) => {
         const { configuration, viewport } = operationData;
         const { THRESHOLD: { dynamicRadius = 0 } = {} } = configuration.strategySpecificConfiguration || {};
+        if (dynamicRadius === 0) {
+            return;
+        }
         const { spacing } = viewport.getImageData();
         const centerCanvas = [
             viewport.element.clientWidth / 2,
@@ -7342,6 +7385,14 @@ var segmentation = __webpack_require__(63421);
 
 
 
+function lightenColor(r, g, b, a, factor = 0.4) {
+    return [
+        Math.round(r + (255 - r) * factor),
+        Math.round(g + (255 - g) * factor),
+        Math.round(b + (255 - b) * factor),
+        a,
+    ];
+}
 /* harmony default export */ const preview = ({
     [StrategyCallbacks/* default */.A.Preview]: function (operationData) {
         const { previewColors, strategySpecificConfiguration, enabledElement } = operationData;
@@ -7379,11 +7430,11 @@ var segmentation = __webpack_require__(63421);
         if (!configColor && !segmentColor) {
             return;
         }
-        const previewColor = configColor || segmentColor.map((it) => it * 0.9);
+        const previewColor = configColor || lightenColor(...segmentColor);
         segmentation.config.color.setColorForSegmentIndex(toolGroupId, segmentationRepresentationUID, previewSegmentIndex, previewColor);
     },
     [StrategyCallbacks/* default */.A.AcceptPreview]: (operationData) => {
-        const { segmentationVoxelManager: segmentationVoxelManager, previewVoxelManager: previewVoxelManager, previewSegmentIndex, preview, } = operationData;
+        const { segmentationVoxelManager: segmentationVoxelManager, previewVoxelManager: previewVoxelManager, previewSegmentIndex, preview, } = operationData || {};
         if (previewSegmentIndex === undefined) {
             return;
         }
@@ -9534,6 +9585,9 @@ function filterAnnotationsForDisplay(viewport, annotations, filterOptions = {})
         if (!annotation.isVisible) {
             return false;
         }
+        if (annotation.data.isCanvasAnnotation) {
+            return true;
+        }
         return viewport.isReferenceViewable(annotation.metadata, filterOptions);
     });
 }

package/dist/{448.bundle.deedeff5744e77510734.js → 448.bundle.5e6da31477887bf53016.js}

@@ -301,8 +301,6 @@ function initDefaultToolGroup(extensionManager, toolGroupService, commandsManage
       toolName: toolNames.Magnify
     }, {
       toolName: toolNames.SegmentationDisplay
-    }, {
-      toolName: toolNames.AdvancedMagnify
     }, {
       toolName: toolNames.UltrasoundDirectional
     }, {
@@ -319,6 +317,8 @@ function initDefaultToolGroup(extensionManager, toolGroupService, commandsManage
     // disabled
     disabled: [{
       toolName: toolNames.ReferenceLines
+    }, {
+      toolName: toolNames.AdvancedMagnify
     }]
   };
   toolGroupService.createToolGroupAndAddTools(toolGroupId, tools);
@@ -497,12 +497,6 @@ const ReferenceLinesListeners = [{
   commandName: 'setSourceViewportForReferenceLinesTool',
   context: 'CORNERSTONE'
 }];
-const toggleEnabledDisabledToolbar = {
-  commandName: 'toggleEnabledDisabledToolbar',
-  commandOptions: {
-    toolGroupIds: ['default', 'mpr', 'SRToolGroup', 'volume3d']
-  }
-};
 const moreTools = [{
   id: 'MoreTools',
   uiType: 'ohif.splitButton',
@@ -568,7 +562,7 @@ const moreTools = [{
       icon: 'tool-referenceLines',
       label: 'Reference Lines',
       tooltip: 'Show Reference Lines',
-      commands: toggleEnabledDisabledToolbar,
+      commands: 'toggleEnabledDisabledToolbar',
       listeners: {
         [src/* ViewportGridService */.sI.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED]: ReferenceLinesListeners,
         [src/* ViewportGridService */.sI.EVENTS.VIEWPORTS_READY]: ReferenceLinesListeners
@@ -579,7 +573,7 @@ const moreTools = [{
       icon: 'toggle-dicom-overlay',
       label: 'Image Overlay',
       tooltip: 'Toggle Image Overlay',
-      commands: toggleEnabledDisabledToolbar,
+      commands: 'toggleEnabledDisabledToolbar',
       evaluate: 'evaluate.cornerstoneTool.toggle'
     }), moreTools_createButton({
       id: 'StackScroll',
@@ -648,8 +642,8 @@ const moreTools = [{
       icon: 'icon-tool-loupe',
       label: 'Loupe',
       tooltip: 'Loupe',
-      commands: setToolActiveToolbar,
-      evaluate: 'evaluate.cornerstoneTool'
+      commands: 'toggleActiveDisabledToolbar',
+      evaluate: 'evaluate.cornerstoneTool.toggle.ifStrictlyDisabled'
     }), moreTools_createButton({
       id: 'UltrasoundDirectionalTool',
       icon: 'icon-tool-ultrasound-bidirectional',

package/dist/{487.bundle.7890ca42826941ebcd60.js → 487.bundle.89d973049defb3ba6cb7.js}

@@ -733,7 +733,7 @@ const DynamicVolumeControls = ({
     className: "w-1/2",
     onClick: () => {
       setComputedView(false);
-      onDynamicClick();
+      onDynamicClick?.();
     }
   }, "4D"), /*#__PURE__*/react.createElement("button", {
     className: "w-1/2",
@@ -1009,7 +1009,8 @@ function PanelGenerateImage({
       element
     } = viewportInfo;
     cineService.playClip(element, {
-      framesPerSecond: frameRate
+      framesPerSecond: frameRate,
+      viewportId: activeViewportId
     });
   };
   const handleStop = () => {

package/dist/{530.bundle.7c94543955552475c56a.js → 530.bundle.207b38c15c4c01e4db0e.js}

@@ -17,6 +17,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _ohif_ui__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5085);
 /* harmony import */ var _utils_hydrateStructuredReport__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(77089);
 /* harmony import */ var _state__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(15575);
+/* harmony import */ var _utils_createReferencedImageDisplaySet__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(92643);
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 
@@ -26,6 +27,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 
 
+
 const MEASUREMENT_TRACKING_EXTENSION_ID = '@ohif/extension-measurement-tracking';
 const SR_TOOLGROUP_BASE_NAME = 'SRToolGroup';
 function OHIFCornerstoneSRViewport(props) {
@@ -198,7 +200,10 @@ function OHIFCornerstoneSRViewport(props) {
         // The positionIds for the viewport aren't meaningful for the child display sets
         positionIds: null
       },
-      onElementEnabled: onElementEnabled,
+      onElementEnabled: evt => {
+        props.onElementEnabled?.(evt);
+        onElementEnabled(evt);
+      },
       initialImageIndex: initialImageIndex,
       isJumpToMeasurementDisabled: true
     }));
@@ -332,12 +337,19 @@ OHIFCornerstoneSRViewport.defaultProps = {
   customProps: {}
 };
 async function _getViewportReferencedDisplaySetData(displaySet, measurementSelected, displaySetService) {
+  const {
+    measurements
+  } = displaySet;
+  const measurement = measurements[measurementSelected];
+  const {
+    displaySetInstanceUID
+  } = measurement;
   if (!displaySet.keyImageDisplaySet) {
     // Create a new display set, and preserve a reference to it here,
     // so that it can be re-displayed and shown inside the SR viewport.
     // This is only for ease of redisplay - the display set is stored in the
     // usual manner in the display set service.
-    displaySet.keyImageDisplaySet = createReferencedImageDisplaySet(displaySetService, displaySet);
+    displaySet.keyImageDisplaySet = (0,_utils_createReferencedImageDisplaySet__WEBPACK_IMPORTED_MODULE_8__/* ["default"] */ .A)(displaySetService, displaySet);
   }
   const referencedDisplaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
   const image0 = referencedDisplaySet.images[0];

package/dist/{574.bundle.be075ac52fb52b442a8b.js → 574.bundle.d648fea691d6709bf2b4.js}

@@ -1004,7 +1004,8 @@ function WrappedCinePlayer({
     } = cines[viewportId];
     const validFrameRate = Math.max(frameRate, 1);
     return isPlaying ? cineService.playClip(enabledVPElement, {
-      framesPerSecond: validFrameRate
+      framesPerSecond: validFrameRate,
+      viewportId
     }) : cineService.stopClip(enabledVPElement);
   };
   const newDisplaySetHandler = (0,react.useCallback)(() => {
@@ -2209,9 +2210,19 @@ 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,
+    // if the viewport is part of a hanging protocol layout
+    // we should not really rely on the old synchronizers and
+    // you see below we only rehydrate the synchronizers if the viewport
+    // is not part of the hanging protocol layout. HPs should
+    // define their own synchronizers. Since the synchronizers are
+    // viewportId dependent and
+    isHangingProtocolLayout
   } = props;
   const viewportId = viewportOptions.viewportId;
+  if (!viewportId) {
+    throw new Error('Viewport ID is required');
+  }
 
   // Since we only have support for dynamic data in volume viewports, we should
   // handle this case here and set the viewportType to volume if any of the
@@ -2272,7 +2283,7 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
     toolGroupService.addViewportToToolGroup(viewportId, renderingEngineId, toolGroupId);
     syncGroupService.addViewportToSyncGroup(viewportId, renderingEngineId, syncGroups);
     const synchronizersStore = stateSyncService.getState().synchronizersStore;
-    if (synchronizersStore?.[viewportId]?.length) {
+    if (synchronizersStore?.[viewportId]?.length && !isHangingProtocolLayout) {
       // If the viewport used to have a synchronizer, re apply it again
       _rehydrateSynchronizers(synchronizersStore, viewportId, syncGroupService);
     }

package/dist/{633.bundle.c1658e76f104cbd14cab.js → 633.bundle.acab89baaa06a299d679.js}

@@ -509,12 +509,14 @@ function PanelSegmentation({
   const {
     segmentationService,
     viewportGridService,
-    uiDialogService
+    uiDialogService,
+    displaySetService
   } = servicesManager.services;
   const {
     t
   } = (0,dist_es/* useTranslation */.Bd)('PanelSegmentation');
   const [selectedSegmentationId, setSelectedSegmentationId] = (0,react.useState)(null);
+  const [addSegmentationClassName, setAddSegmentationClassName] = (0,react.useState)('');
   const [segmentationConfiguration, setSegmentationConfiguration] = (0,react.useState)(segmentationService.getConfiguration());
   const [segmentations, setSegmentations] = (0,react.useState)(() => segmentationService.getSegmentations());
   (0,react.useEffect)(() => {
@@ -539,6 +541,47 @@ function PanelSegmentation({
       });
     };
   }, []);
+
+  // temporary measure to not allow add segmentation when the selected viewport
+  // is stack viewport
+  (0,react.useEffect)(() => {
+    const handleActiveViewportChange = viewportId => {
+      const displaySetUIDs = viewportGridService.getDisplaySetsUIDsForViewport(viewportId || viewportGridService.getActiveViewportId());
+      if (!displaySetUIDs) {
+        return;
+      }
+      const isReconstructable = displaySetUIDs?.some(displaySetUID => {
+        const displaySet = displaySetService.getDisplaySetByUID(displaySetUID);
+        return displaySet?.isReconstructable;
+      }) || false;
+      if (isReconstructable) {
+        setAddSegmentationClassName('');
+      } else {
+        setAddSegmentationClassName('ohif-disabled');
+      }
+    };
+
+    // Handle initial state
+    handleActiveViewportChange();
+    const changed = viewportGridService.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED;
+    const ready = viewportGridService.EVENTS.VIEWPORTS_READY;
+    const subs = [];
+    [ready, changed].forEach(evt => {
+      const {
+        unsubscribe
+      } = viewportGridService.subscribe(evt, ({
+        viewportId
+      }) => {
+        handleActiveViewportChange(viewportId);
+      });
+      subs.push(unsubscribe);
+    });
+
+    // Clean up
+    return () => {
+      subs.forEach(unsub => unsub());
+    };
+  }, []);
   const getToolGroupIds = segmentationId => {
     const toolGroupIds = segmentationService.getToolGroupIdsWithSegmentation(segmentationId);
     return toolGroupIds;
@@ -618,6 +661,8 @@ function PanelSegmentation({
   const onSegmentDelete = (segmentationId, segmentIndex) => {
     segmentationService.removeSegment(segmentationId, segmentIndex);
   };
+
+  // segment hide
   const onToggleSegmentVisibility = (segmentationId, segmentIndex) => {
     const segmentation = segmentationService.getSegmentation(segmentationId);
     const segmentInfo = segmentation.segments[segmentIndex];
@@ -692,6 +737,7 @@ function PanelSegmentation({
     disableEditing: configuration.disableEditing,
     activeSegmentationId: selectedSegmentationId || '',
     onSegmentationAdd: onSegmentationAddWrapper,
+    addSegmentationClassName: addSegmentationClassName,
     showAddSegment: allowAddSegment,
     onSegmentationClick: onSegmentationClick,
     onSegmentationDelete: onSegmentationDelete,
@@ -1366,30 +1412,6 @@ const commandsModule = ({
           });
         });
       });
-    },
-    toggleThresholdRangeAndDynamic() {
-      const toolGroupIds = toolGroupService.getToolGroupIds();
-      if (!toolGroupIds) {
-        return;
-      }
-      toolGroupIds.forEach(toolGroupId => {
-        const toolGroup = toolGroupService.getToolGroup(toolGroupId);
-        const brushInstances = segmentationUtils.getBrushToolInstances(toolGroup.id);
-        brushInstances.forEach(({
-          configuration
-        }) => {
-          const {
-            activeStrategy,
-            strategySpecificConfiguration
-          } = configuration;
-          if (activeStrategy.startsWith('THRESHOLD')) {
-            const thresholdConfig = strategySpecificConfiguration.THRESHOLD;
-            if (thresholdConfig) {
-              thresholdConfig.isDynamic = !thresholdConfig.isDynamic;
-            }
-          }
-        });
-      });
     }
   };
   const definitions = {
@@ -1422,9 +1444,6 @@ const commandsModule = ({
     },
     setThresholdRange: {
       commandFn: actions.setThresholdRange
-    },
-    toggleThresholdRangeAndDynamic: {
-      commandFn: actions.toggleThresholdRangeAndDynamic
     }
   };
   return {
@@ -1496,11 +1515,7 @@ function getToolNameForButton(button) {
   const commands = props?.commands || button.commands;
   const commandsArray = Array.isArray(commands) ? commands : [commands];
   const firstCommand = commandsArray[0];
-  if (typeof firstCommand === 'string') {
-    // likely not a cornerstone tool
-    return null;
-  }
-  if ('commandOptions' in firstCommand) {
+  if (firstCommand?.commandOptions) {
     return firstCommand.commandOptions.toolName ?? props?.id ?? button.id;
   }