ui(components): New Dialog and Modal components for ui-next (#4772)

Co-authored-by: sedghi <ar.sedghi@gmail.com>

extensions/cornerstone/src/commandsModule.ts

@@ -18,21 +18,19 @@ import * as cornerstoneTools from '@cornerstonejs/tools';
 import { Types as OhifTypes, utils } from '@ohif/core';
 import i18n from '@ohif/i18n';
 import {
-  callLabelAutocompleteDialog,
-  showLabelAnnotationPopup,
+  callInputDialogAutoComplete,
   createReportAsync,
-  callInputDialog,
   colorPickerDialog,
+  callInputDialog,
 } from '@ohif/extension-default';
 import { vec3, mat4 } from 'gl-matrix';
-import CornerstoneViewportDownloadForm from './utils/CornerstoneViewportDownloadForm';
 import toggleImageSliceSync from './utils/imageSliceSync/toggleImageSliceSync';
 import { getFirstAnnotationSelected } from './utils/measurementServiceMappings/utils/selection';
 import getActiveViewportEnabledElement from './utils/getActiveViewportEnabledElement';
 import toggleVOISliceSync from './utils/toggleVOISliceSync';
 import { usePositionPresentationStore, useSegmentationPresentationStore } from './stores';
 import { toolNames } from './initCornerstoneTools';
-
+import CornerstoneViewportDownloadForm from './utils/CornerstoneViewportDownloadForm';
 const { DefaultHistoryMemo } = csUtils.HistoryMemo;
 const toggleSyncFunctions = {
   imageSlice: toggleImageSliceSync,
@@ -200,26 +198,55 @@ function commandsModule({
       }
     },
     /**
-     * Show the measurement labelling input dialog and update the label
-     * on the measurement with a response if not cancelled.
+     * Common logic for handling measurement label updates through dialog
+     * @param uid - measurement uid
+     * @returns Promise that resolves when the label is updated
      */
-    setMeasurementLabel: ({ uid }) => {
+    _handleMeasurementLabelDialog: async uid => {
       const labelConfig = customizationService.getCustomization('measurementLabels');
       const renderContent = customizationService.getCustomization('ui.labellingComponent');
       const measurement = measurementService.getMeasurement(uid);
-      showLabelAnnotationPopup(measurement, uiDialogService, labelConfig, renderContent).then(
-        (val: Map<any, any>) => {
-          measurementService.update(
-            uid,
-            {
-              ...val,
-            },
-            true
-          );
-        }
-      );
-    },
 
+      if (!measurement) {
+        console.debug('No measurement found for label editing');
+        return;
+      }
+
+      if (!labelConfig) {
+        const label = await callInputDialog({
+          uiDialogService,
+          title: 'Edit Measurement Label',
+          placeholder: measurement.label || 'Enter new label',
+          defaultValue: measurement.label,
+        });
+
+        if (label !== undefined && label !== null) {
+          measurementService.update(uid, { ...measurement, label }, true);
+        }
+        return;
+      }
+
+      const val = await callInputDialogAutoComplete({
+        measurement,
+        uiDialogService,
+        labelConfig,
+        renderContent,
+      });
+
+      if (val !== undefined && val !== null) {
+        measurementService.update(uid, { ...val }, true);
+      }
+    },
+    /**
+     * Show the measurement labelling input dialog and update the label
+     * on the measurement with a response if not cancelled.
+     */
+    setMeasurementLabel: async ({ uid }) => {
+      await actions._handleMeasurementLabelDialog(uid);
+    },
+    renameMeasurement: async ({ uid }) => {
+      await actions._handleMeasurementLabelDialog(uid);
+    },
     /**
      *
      * @param props - containing the updates to apply
@@ -321,23 +348,6 @@ function commandsModule({
       measurementService.remove(uid);
     },
 
-    renameMeasurement: ({ uid }) => {
-      const labelConfig = customizationService.getCustomization('measurementLabels');
-      const renderContent = customizationService.getCustomization('ui.labellingComponent');
-      const measurement = measurementService.getMeasurement(uid);
-      showLabelAnnotationPopup(measurement, uiDialogService, labelConfig, renderContent).then(
-        val => {
-          measurementService.update(
-            uid,
-            {
-              ...val,
-            },
-            true
-          );
-        }
-      );
-    },
-
     toggleLockMeasurement: ({ uid }) => {
       measurementService.toggleLockMeasurement(uid);
     },
@@ -375,10 +385,10 @@ function commandsModule({
 
       viewportGridService.setActiveViewportId(viewportId);
     },
-    arrowTextCallback: ({ callback, data, uid }) => {
+    arrowTextCallback: ({ callback }) => {
       const labelConfig = customizationService.getCustomization('measurementLabels');
       const renderContent = customizationService.getCustomization('ui.labellingComponent');
-      callLabelAutocompleteDialog(uiDialogService, callback, {}, labelConfig, renderContent);
+      callInputDialogAutoComplete(uiDialogService, callback, {}, labelConfig, renderContent);
     },
     toggleCine: () => {
       const { viewports } = viewportGridService.getState();
@@ -568,6 +578,7 @@ function commandsModule({
         ],
       });
     },
+    // capture viewport
     showDownloadViewportModal: () => {
       const { activeViewportId } = viewportGridService.getState();
 
@@ -589,10 +600,9 @@ function commandsModule({
           title: 'Download High Quality Image',
           contentProps: {
             activeViewportId,
-            onClose: uiModalService.hide,
             cornerstoneViewportService,
           },
-          containerDimensions: 'w-[70%] max-w-[900px]',
+          containerClassName: 'max-w-4xl p-4',
         });
       }
     },
@@ -1138,14 +1148,12 @@ function commandsModule({
      */
     storeSegmentationCommand: async ({ segmentationId }) => {
       const { segmentationService, viewportGridService } = servicesManager.services;
-      const datasources = extensionManager.getActiveDataSource();
 
       const displaySetInstanceUIDs = await createReportAsync({
         servicesManager,
         getReport: () =>
           commandsManager.runCommand('storeSegmentation', {
             segmentationId,
-            dataSource: datasources[0],
           }),
         reportType: 'Segmentation',
       });
@@ -1271,7 +1279,7 @@ function commandsModule({
       segmentationService.setStyle({ type }, { fillAlphaInactive: value });
     },
 
-    editSegmentLabel: ({ segmentationId, segmentIndex }) => {
+    editSegmentLabel: async ({ segmentationId, segmentIndex }) => {
       const { segmentationService, uiDialogService } = servicesManager.services;
       const segmentation = segmentationService.getSegmentation(segmentationId);
 
@@ -1280,19 +1288,14 @@ function commandsModule({
       }
 
       const segment = segmentation.segments[segmentIndex];
-      const { label } = segment;
-
-      const callback = (label, actionId) => {
-        if (label === '') {
-          return;
-        }
 
+      callInputDialog({
+        uiDialogService,
+        title: 'Edit Segment Label',
+        placeholder: 'Enter new label',
+        defaultValue: segment.label,
+      }).then(label => {
         segmentationService.setSegmentLabel(segmentationId, segmentIndex, label);
-      };
-
-      callInputDialog(uiDialogService, label, callback, false, {
-        dialogTitle: 'Edit Segment Label',
-        inputLabel: 'Enter new label',
       });
     },
 
@@ -1306,17 +1309,13 @@ function commandsModule({
 
       const { label } = segmentation;
 
-      const callback = (label, actionId) => {
-        if (label === '') {
-          return;
-        }
-
+      callInputDialog({
+        uiDialogService,
+        title: 'Edit Segmentation Label',
+        placeholder: 'Enter new label',
+        defaultValue: label,
+      }).then(label => {
         segmentationService.addOrUpdateSegmentation({ segmentationId, label });
-      };
-
-      callInputDialog(uiDialogService, label, callback, false, {
-        dialogTitle: 'Edit Segmentation Label',
-        inputLabel: 'Enter new label',
       });
     },
 
@@ -1333,13 +1332,16 @@ function commandsModule({
         a: color[3] / 255.0,
       };
 
-      colorPickerDialog(uiDialogService, rgbaColor, (newRgbaColor, actionId) => {
-        if (actionId === 'cancel') {
-          return;
-        }
-
-        const color = [newRgbaColor.r, newRgbaColor.g, newRgbaColor.b, newRgbaColor.a * 255.0];
-        segmentationService.setSegmentColor(viewportId, segmentationId, segmentIndex, color);
+      uiDialogService.show({
+        content: colorPickerDialog,
+        title: 'Segment Color',
+        contentProps: {
+          value: rgbaColor,
+          onSave: newRgbaColor => {
+            const color = [newRgbaColor.r, newRgbaColor.g, newRgbaColor.b, newRgbaColor.a * 255.0];
+            segmentationService.setSegmentColor(viewportId, segmentationId, segmentIndex, color);
+          },
+        },
       });
     },
 
@@ -1395,6 +1397,9 @@ function commandsModule({
     setMeasurementLabel: {
       commandFn: actions.setMeasurementLabel,
     },
+    renameMeasurement: {
+      commandFn: actions.renameMeasurement,
+    },
     updateMeasurement: {
       commandFn: actions.updateMeasurement,
     },
@@ -1407,9 +1412,6 @@ function commandsModule({
     removeMeasurement: {
       commandFn: actions.removeMeasurement,
     },
-    renameMeasurement: {
-      commandFn: actions.renameMeasurement,
-    },
     toggleLockMeasurement: {
       commandFn: actions.toggleLockMeasurement,
     },