@ohif/app 3.8.0-beta.7 → 3.8.0-beta.70

package/dist/{181.css → 574.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)}

package/dist/{410.bundle.38c9d3820e152e89288e.js → 594.bundle.ffeebda1bb9a81182a80.js}

@@ -1,7 +1,7 @@
 "use strict";
-(self["webpackChunk"] = self["webpackChunk"] || []).push([[410],{
+(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[594],{
 
-/***/ 15410:
+/***/ 26594:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -12,51 +12,21 @@ __webpack_require__.d(__webpack_exports__, {
   "default": () => (/* binding */ basic_dev_mode_src)
 });
 
-// EXTERNAL MODULE: ../../ui/src/index.js + 486 modules
-var src = __webpack_require__(22582);
-// EXTERNAL MODULE: ../../core/src/index.ts + 65 modules
-var core_src = __webpack_require__(71771);
+// EXTERNAL MODULE: ../../ui/src/index.js + 542 modules
+var src = __webpack_require__(48804);
+// EXTERNAL MODULE: ../../core/src/index.ts + 68 modules
+var core_src = __webpack_require__(85073);
 ;// CONCATENATED MODULE: ../../../modes/basic-dev-mode/src/toolbarButtons.js
-// TODO: torn, can either bake this here; or have to create a whole new button type
-// Only ways that you can pass in a custom React component for render :l
 
 
 const {
   windowLevelPresets
 } = core_src.defaults;
-/**
- *
- * @param {*} type - 'tool' | 'action' | 'toggle'
- * @param {*} id
- * @param {*} icon
- * @param {*} label
- */
-function _createButton(type, id, icon, label, commands, tooltip) {
-  return {
-    id,
-    icon,
-    label,
-    type,
-    commands,
-    tooltip
-  };
-}
-const _createActionButton = _createButton.bind(null, 'action');
-const _createToggleButton = _createButton.bind(null, 'toggle');
-const _createToolButton = _createButton.bind(null, 'tool');
-
-/**
- *
- * @param {*} preset - preset number (from above import)
- * @param {*} title
- * @param {*} subtitle
- */
 function _createWwwcPreset(preset, title, subtitle) {
   return {
     id: preset.toString(),
     title,
     subtitle,
-    type: 'action',
     commands: [{
       commandName: 'setWindowLevel',
       commandOptions: {
@@ -66,197 +36,214 @@ function _createWwwcPreset(preset, title, subtitle) {
     }]
   };
 }
-const toolbarButtons = [
-// Measurement
-{
+function _createSetToolActiveCommands(toolName, toolGroupIds = ['default', 'mpr']) {
+  return toolGroupIds.map(toolGroupId => ({
+    commandName: 'setToolActive',
+    commandOptions: {
+      toolGroupId,
+      toolName
+    },
+    context: 'CORNERSTONE'
+  }));
+}
+const toolbarButtons = [{
   id: 'MeasurementTools',
-  type: 'ohif.splitButton',
+  uiType: 'ohif.splitButton',
   props: {
     groupId: 'MeasurementTools',
-    isRadio: true,
-    // ?
-    // Switch?
-    primary: _createToolButton('Length', 'tool-length', 'Length', [{
-      commandName: 'setToolActive',
-      commandOptions: {
-        toolName: 'Length'
-      },
-      context: 'CORNERSTONE'
-    }], 'Length'),
+    evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
+    primary: core_src.ToolbarService.createButton({
+      id: 'Length',
+      icon: 'tool-length',
+      label: 'Length',
+      tooltip: 'Length Tool',
+      commands: _createSetToolActiveCommands('Length'),
+      evaluate: 'evaluate.cornerstoneTool'
+    }),
     secondary: {
       icon: 'chevron-down',
-      label: '',
-      isActive: true,
       tooltip: 'More Measure Tools'
     },
-    items: [_createToolButton('Length', 'tool-length', 'Length', [{
-      commandName: 'setToolActive',
-      commandOptions: {
-        toolName: 'Length'
-      },
-      context: 'CORNERSTONE'
-    }], 'Length Tool'), _createToolButton('Bidirectional', 'tool-bidirectional', 'Bidirectional', [{
-      commandName: 'setToolActive',
-      commandOptions: {
-        toolName: 'Bidirectional'
-      },
-      context: 'CORNERSTONE'
-    }], 'Bidirectional Tool'), _createToolButton('EllipticalROI', 'tool-elipse', 'Ellipse', [{
-      commandName: 'setToolActive',
-      commandOptions: {
-        toolName: 'EllipticalROI'
-      },
-      context: 'CORNERSTONE'
-    }], 'Ellipse Tool'), _createToolButton('CircleROI', 'tool-circle', 'Circle', [{
-      commandName: 'setToolActive',
-      commandOptions: {
-        toolName: 'CircleROI'
-      },
-      context: 'CORNERSTONE'
-    }], 'Circle Tool')]
+    items: [core_src.ToolbarService.createButton({
+      id: 'Bidirectional',
+      icon: 'tool-bidirectional',
+      label: 'Bidirectional',
+      tooltip: 'Bidirectional Tool',
+      commands: _createSetToolActiveCommands('Bidirectional'),
+      evaluate: 'evaluate.cornerstoneTool'
+    }), core_src.ToolbarService.createButton({
+      id: 'EllipticalROI',
+      icon: 'tool-ellipse',
+      label: 'Ellipse',
+      tooltip: 'Ellipse ROI',
+      commands: _createSetToolActiveCommands('EllipticalROI'),
+      evaluate: 'evaluate.cornerstoneTool'
+    }), core_src.ToolbarService.createButton({
+      id: 'CircleROI',
+      icon: 'tool-circle',
+      label: 'Circle',
+      tooltip: 'Circle Tool',
+      commands: _createSetToolActiveCommands('CircleROI'),
+      evaluate: 'evaluate.cornerstoneTool'
+    })]
   }
-},
-// Zoom..
-{
+}, {
   id: 'Zoom',
-  type: 'ohif.radioGroup',
+  uiType: 'ohif.radioGroup',
   props: {
-    type: 'tool',
     icon: 'tool-zoom',
     label: 'Zoom',
-    commands: [{
-      commandName: 'setToolActive',
-      commandOptions: {
-        toolName: 'Zoom'
-      },
-      context: 'CORNERSTONE'
-    }]
+    commands: _createSetToolActiveCommands('Zoom'),
+    evaluate: 'evaluate.cornerstoneTool'
   }
-},
-// Window Level + Presets...
-{
+}, {
   id: 'WindowLevel',
-  type: 'ohif.splitButton',
+  uiType: 'ohif.splitButton',
   props: {
     groupId: 'WindowLevel',
-    primary: _createToolButton('WindowLevel', 'tool-window-level', 'Window Level', [{
-      commandName: 'setToolActive',
-      commandOptions: {
-        toolName: 'WindowLevel'
-      },
-      context: 'CORNERSTONE'
-    }], 'Window Level'),
+    primary: core_src.ToolbarService.createButton({
+      id: 'WindowLevel',
+      icon: 'tool-window-level',
+      label: 'Window Level',
+      tooltip: 'Window Level',
+      commands: _createSetToolActiveCommands('WindowLevel'),
+      evaluate: 'evaluate.cornerstoneTool'
+    }),
     secondary: {
       icon: 'chevron-down',
-      label: 'W/L Manual',
-      isActive: true,
       tooltip: 'W/L Presets'
     },
-    isAction: true,
-    // ?
-    renderer: src/* WindowLevelMenuItem */.eJ,
+    renderer: src/* WindowLevelMenuItem */.d4,
     items: [_createWwwcPreset(1, 'Soft tissue', '400 / 40'), _createWwwcPreset(2, 'Lung', '1500 / -600'), _createWwwcPreset(3, 'Liver', '150 / 90'), _createWwwcPreset(4, 'Bone', '2500 / 480'), _createWwwcPreset(5, 'Brain', '80 / 40')]
   }
-},
-// Pan...
-{
+}, {
   id: 'Pan',
-  type: 'ohif.radioGroup',
+  uiType: 'ohif.radioGroup',
   props: {
-    type: 'tool',
     icon: 'tool-move',
     label: 'Pan',
-    commands: [{
-      commandName: 'setToolActive',
-      commandOptions: {
-        toolName: 'Pan'
-      },
-      context: 'CORNERSTONE'
-    }]
+    commands: _createSetToolActiveCommands('Pan'),
+    evaluate: 'evaluate.cornerstoneTool'
   }
 }, {
   id: 'Capture',
-  type: 'ohif.action',
+  uiType: 'ohif.radioGroup',
   props: {
     icon: 'tool-capture',
     label: 'Capture',
-    type: 'action',
     commands: [{
       commandName: 'showDownloadViewportModal',
-      commandOptions: {},
       context: 'CORNERSTONE'
-    }]
+    }],
+    evaluate: 'evaluate.action'
   }
 }, {
   id: 'Layout',
-  type: 'ohif.layoutSelector'
-},
-// More...
-{
+  uiType: 'ohif.layoutSelector',
+  props: {
+    rows: 3,
+    columns: 4,
+    evaluate: 'evaluate.action',
+    commands: [{
+      commandName: 'setViewportGridLayout'
+    }]
+  }
+}, {
   id: 'MoreTools',
-  type: 'ohif.splitButton',
+  uiType: 'ohif.splitButton',
   props: {
-    isRadio: true,
-    // ?
     groupId: 'MoreTools',
-    primary: _createActionButton('Reset', 'tool-reset', 'Reset View', [{
-      commandName: 'resetViewport',
-      commandOptions: {},
-      context: 'CORNERSTONE'
-    }], 'Reset'),
+    evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
+    primary: core_src.ToolbarService.createButton({
+      id: 'Reset',
+      icon: 'tool-reset',
+      label: 'Reset View',
+      tooltip: 'Reset View',
+      commands: [{
+        commandName: 'resetViewport',
+        context: 'CORNERSTONE'
+      }],
+      evaluate: 'evaluate.action'
+    }),
     secondary: {
       icon: 'chevron-down',
-      label: '',
-      isActive: true,
       tooltip: 'More Tools'
     },
-    items: [_createActionButton('Reset', 'tool-reset', 'Reset View', [{
-      commandName: 'resetViewport',
-      commandOptions: {},
-      context: 'CORNERSTONE'
-    }], 'Reset'), _createActionButton('rotate-right', 'tool-rotate-right', 'Rotate Right', [{
-      commandName: 'rotateViewportCW',
-      commandOptions: {},
-      context: 'CORNERSTONE'
-    }], 'Rotate +90'), _createActionButton('flip-horizontal', 'tool-flip-horizontal', 'Flip Horizontally', [{
-      commandName: 'flipViewportHorizontal',
-      commandOptions: {},
-      context: 'CORNERSTONE'
-    }], 'Flip Horizontal'), _createToolButton('StackScroll', 'tool-stack-scroll', 'Stack Scroll', [{
-      commandName: 'setToolActive',
-      commandOptions: {
-        toolName: 'StackScroll'
-      },
-      context: 'CORNERSTONE'
-    }], 'Stack Scroll'), _createActionButton('invert', 'tool-invert', 'Invert', [{
-      commandName: 'invertViewport',
-      commandOptions: {},
-      context: 'CORNERSTONE'
-    }], 'Invert Colors'), _createToolButton('CalibrationLine', 'tool-calibration', 'Calibration', [{
-      commandName: 'setToolActive',
-      commandOptions: {
-        toolName: 'CalibrationLine'
-      },
-      context: 'CORNERSTONE'
-    }], 'Calibration Line')]
+    items: [core_src.ToolbarService.createButton({
+      id: 'Reset',
+      icon: 'tool-reset',
+      label: 'Reset View',
+      tooltip: 'Reset View',
+      commands: [{
+        commandName: 'resetViewport',
+        context: 'CORNERSTONE'
+      }],
+      evaluate: 'evaluate.action'
+    }), core_src.ToolbarService.createButton({
+      id: 'RotateRight',
+      icon: 'tool-rotate-right',
+      label: 'Rotate Right',
+      tooltip: 'Rotate Right +90',
+      commands: [{
+        commandName: 'rotateViewportCW',
+        context: 'CORNERSTONE'
+      }],
+      evaluate: 'evaluate.action'
+    }), core_src.ToolbarService.createButton({
+      id: 'FlipHorizontal',
+      icon: 'tool-flip-horizontal',
+      label: 'Flip Horizontally',
+      tooltip: 'Flip Horizontally',
+      commands: [{
+        commandName: 'flipViewportHorizontal',
+        context: 'CORNERSTONE'
+      }],
+      evaluate: 'evaluate.action'
+    }), core_src.ToolbarService.createButton({
+      id: 'StackScroll',
+      icon: 'tool-stack-scroll',
+      label: 'Stack Scroll',
+      tooltip: 'Stack Scroll',
+      commands: _createSetToolActiveCommands('StackScroll'),
+      evaluate: 'evaluate.cornerstoneTool'
+    }), core_src.ToolbarService.createButton({
+      id: 'Invert',
+      icon: 'tool-invert',
+      label: 'Invert Colors',
+      tooltip: 'Invert Colors',
+      commands: [{
+        commandName: 'invertViewport',
+        context: 'CORNERSTONE'
+      }],
+      evaluate: 'evaluate.action'
+    }), core_src.ToolbarService.createButton({
+      id: 'CalibrationLine',
+      icon: 'tool-calibration',
+      label: 'Calibration Line',
+      tooltip: 'Calibration Line',
+      commands: _createSetToolActiveCommands('CalibrationLine'),
+      evaluate: 'evaluate.cornerstoneTool'
+    })]
   }
 }];
 /* harmony default export */ const src_toolbarButtons = (toolbarButtons);
 ;// CONCATENATED MODULE: ../../../modes/basic-dev-mode/package.json
-const package_namespaceObject = JSON.parse('{"u2":"@ohif/mode-basic-dev-mode"}');
+const package_namespaceObject = /*#__PURE__*/JSON.parse('{"UU":"@ohif/mode-basic-dev-mode"}');
 ;// CONCATENATED MODULE: ../../../modes/basic-dev-mode/src/id.js
 
-const id = package_namespaceObject.u2;
+const id = package_namespaceObject.UU;
 
+// EXTERNAL MODULE: ../../../node_modules/i18next/dist/esm/i18next.js
+var i18next = __webpack_require__(92344);
 ;// CONCATENATED MODULE: ../../../modes/basic-dev-mode/src/index.js
 
 
 
+
 const configs = {
   Length: {}
   //
 };
-
 const ohif = {
   layout: '@ohif/extension-default.layoutTemplateModule.viewerLayout',
   sopClassHandler: '@ohif/extension-default.sopClassHandlerModule.stack',
@@ -285,22 +272,20 @@ const extensionDependencies = {
   '@ohif/extension-dicom-pdf': '^3.0.1',
   '@ohif/extension-dicom-video': '^3.0.1'
 };
-function modeFactory(_ref) {
-  let {
-    modeConfiguration
-  } = _ref;
+function modeFactory({
+  modeConfiguration
+}) {
   return {
     id: id,
     routeName: 'dev',
-    displayName: 'Basic Dev Viewer',
+    displayName: i18next/* default */.A.t('Modes:Basic Dev Viewer'),
     /**
      * Lifecycle hooks
      */
-    onModeEnter: _ref2 => {
-      let {
-        servicesManager,
-        extensionManager
-      } = _ref2;
+    onModeEnter: ({
+      servicesManager,
+      extensionManager
+    }) => {
       const {
         toolbarService,
         toolGroupService
@@ -353,71 +338,48 @@ function modeFactory(_ref) {
         }]
         // disabled
       };
-
-      const toolGroupId = 'default';
-      toolGroupService.createToolGroupAndAddTools(toolGroupId, tools);
-      let unsubscribe;
-      const activateTool = () => {
-        toolbarService.recordInteraction({
-          groupId: 'WindowLevel',
-          interactionType: 'tool',
-          commands: [{
-            commandName: 'setToolActive',
-            commandOptions: {
-              toolName: 'WindowLevel'
-            },
-            context: 'CORNERSTONE'
-          }]
-        });
-
-        // We don't need to reset the active tool whenever a viewport is getting
-        // added to the toolGroup.
-        unsubscribe();
-      };
-
-      // Since we only have one viewport for the basic cs3d mode and it has
-      // only one hanging protocol, we can just use the first viewport
-      ({
-        unsubscribe
-      } = toolGroupService.subscribe(toolGroupService.EVENTS.VIEWPORT_ADDED, activateTool));
-      toolbarService.init(extensionManager);
+      toolGroupService.createToolGroupAndAddTools('default', tools);
       toolbarService.addButtons(src_toolbarButtons);
       toolbarService.createButtonSection('primary', ['MeasurementTools', 'Zoom', 'WindowLevel', 'Pan', 'Layout', 'MoreTools']);
     },
-    onModeExit: _ref3 => {
-      let {
-        servicesManager
-      } = _ref3;
+    onModeExit: ({
+      servicesManager
+    }) => {
       const {
         toolGroupService,
         measurementService,
-        toolbarService
+        toolbarService,
+        uiDialogService,
+        uiModalService
       } = servicesManager.services;
+      uiDialogService.dismissAll();
+      uiModalService.hide();
       toolGroupService.destroy();
     },
     validationTags: {
       study: [],
       series: []
     },
-    isValidMode: _ref4 => {
-      let {
-        modalities
-      } = _ref4;
+    isValidMode: ({
+      modalities
+    }) => {
       const modalities_list = modalities.split('\\');
 
       // Slide Microscopy modality not supported by basic mode yet
-      return !modalities_list.includes('SM');
+      return {
+        valid: !modalities_list.includes('SM'),
+        description: 'The mode does not support the following modalities: SM'
+      };
     },
     routes: [{
       path: 'viewer-cs3d',
       /*init: ({ servicesManager, extensionManager }) => {
         //defaultViewerRouteInit
       },*/
-      layoutTemplate: _ref5 => {
-        let {
-          location,
-          servicesManager
-        } = _ref5;
+      layoutTemplate: ({
+        location,
+        servicesManager
+      }) => {
         return {
           id: ohif.layout,
           props: {
@@ -441,7 +403,7 @@ function modeFactory(_ref) {
     extensions: extensionDependencies,
     hangingProtocol: 'default',
     sopClassHandlers: [dicomvideo.sopClassHandler, ohif.sopClassHandler, dicompdf.sopClassHandler, dicomsr.sopClassHandler],
-    hotkeys: [...core_src/* hotkeys */.dD.defaults.hotkeyBindings]
+    hotkeys: [...core_src/* hotkeys */.ot.defaults.hotkeyBindings]
   };
 }
 const mode = {