fix(Image Download): various bug fixes for image download (#3396)

- prevent non-cornerstone viewports from showing the image download dialogue
- passing the rendering engine id to ToolGroup.addViewport
- fixed the keep/dismiss aspect feature

extensions/cornerstone/src/commandsModule.ts

@@ -368,6 +368,21 @@ function commandsModule({
     },
     showDownloadViewportModal: () => {
       const { activeViewportIndex } = viewportGridService.getState();
+
+      if (
+        !cornerstoneViewportService.getCornerstoneViewportByIndex(
+          activeViewportIndex
+        )
+      ) {
+        // Cannot download a non-cornerstone viewport (image).
+        uiNotificationService.show({
+          title: 'Download Image',
+          message: 'Image cannot be downloaded',
+          type: 'error',
+        });
+        return;
+      }
+
       const { uiModalService } = servicesManager.services;
 
       if (uiModalService) {

extensions/cornerstone/src/utils/CornerstoneViewportDownloadForm.tsx

@@ -217,7 +217,7 @@ const CornerstoneViewportDownloadForm = ({
     );
 
     // add the viewport to the toolGroup
-    toolGroup.addViewport(downloadViewportId);
+    toolGroup.addViewport(downloadViewportId, renderingEngineId);
 
     Object.keys(toolGroup._toolInstances).forEach(toolName => {
       // make all tools Enabled so that they can not be interacted with

platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.tsx

@@ -95,11 +95,11 @@ const ViewportDownloadForm = ({
 
   const onKeepAspectToggle = () => {
     const { width, height } = dimensions;
-    const aspectMultiplier = { ...aspectMultiplier };
     if (!keepAspect) {
-      const base = Math.min(width, height);
-      aspectMultiplier.width = width / base;
-      aspectMultiplier.height = height / base;
+      const aspectMultiplier = {
+        width: width / height,
+        height: height / width,
+      };
       setAspectMultiplier(aspectMultiplier);
     }
 
@@ -379,7 +379,7 @@ const ViewportDownloadForm = ({
 
       <div className="mt-8">
         <div
-          className="p-4 rounded bg-secondary-dark border-secondary-primary"
+          className="p-4 rounded bg-secondary-dark border-secondary-primary w-max-content min-w-full"
           data-cy="image-preview"
         >
           <Typography variant="h5">{t('Image preview')}</Typography>