feat(processing): implement adding R markers and 90-degree rotation for multiple selected viewers simultaneously

src/pages/view/components/ViewerContainer.tsx

@@ -1,5 +1,24 @@
 import React, { useState, useEffect, ReactElement } from 'react';
-import StackViewer, { addLMark } from './viewers/stack.image.viewer';
+import StackViewer, {
+  activateMagnifier,
+  addLMark,
+  addMask,
+  addRLabel,
+  adjustBrightnessAndContrast,
+  ApplyColormap,
+  deleteSelectedMark,
+  fitImageSize,
+  HorizontalFlip,
+  invertContrast,
+  InvertImage,
+  remoteMask,
+  ResetImage,
+  rotateAnyAngle,
+  RotateClockwise90,
+  RotateCounterclockwise90,
+  setOriginalSize,
+  VerticalFlip,
+} from './viewers/stack.image.viewer';
 import { useSelector, useDispatch } from 'react-redux';
 import store, { RootState } from '@/states/store';
 import { clearAction } from '@/states/view/functionAreaSlice';
@@ -107,87 +126,81 @@ const ViewerContainer: React.FC<ViewerContainerProps> = ({ imageUrls }) => {
 
           break;
         case 'Add R Mark':
-          // Implement the logic to add an R mark
           selectedViewers.forEach((index) => {
-            viewersState[index].props.addRLabel();
+            addRLabel(`viewport-${index}`);
           });
           console.log('Adding R Mark');
           break;
         case 'Delete Selected Mark': {
           selectedViewers.forEach((index) => {
-            viewersState[index].props.deleteSelectedMark();
+            deleteSelectedMark(`viewport-${index}`);
           });
           break;
         }
         case 'Horizontal Flip': {
           selectedViewers.forEach((index) => {
-            viewersState[index].props.HorizontalFlip();
+            HorizontalFlip(`viewport-${index}`);
           });
           break;
         }
         case 'Vertical Flip': {
           selectedViewers.forEach((index) => {
-            viewersState[index].props.VerticalFlip();
+            VerticalFlip(`viewport-${index}`);
           });
           break;
         }
         case 'Rotate Counterclockwise 90': {
           selectedViewers.forEach((index) => {
-            viewersState[index].props.RotateCounterclockwise90();
+            RotateCounterclockwise90(`viewport-${index}`);
           });
           break;
         }
         case 'Rotate Clockwise 90':
           selectedViewers.forEach((index) => {
-            viewersState[index].props.RotateClockwise90();
+            RotateClockwise90(`viewport-${index}`);
           });
           break;
         case 'Rotate Any Angle':
-          // Implement the logic to rotate the image by any angle
           selectedViewers.forEach((index) => {
-            viewersState[index].props.rotateAnyAngle();
+            rotateAnyAngle(`viewport-${index}`);
           });
           break;
         case 'AddMask':
           selectedViewers.forEach((index) => {
-            viewersState[index].props.addMask();
+            addMask(`viewport-${index}`);
           });
           break;
         case 'Delete Digital Mask':
           selectedViewers.forEach((index) => {
-            viewersState[index].props.remoteMask();
+            remoteMask(`viewport-${index}`);
           });
           break;
         case 'Adjust Brightness and Contrast':
           selectedViewers.forEach((index) => {
-            viewersState[index].props.adjustBrightnessAndContrast();
+            adjustBrightnessAndContrast(`viewport-${index}`);
           });
           break;
         case 'Crop Selected Area':
-          // Implement the logic to crop the selected area
-          selectedViewers.forEach((index) => {
-            viewersState[index].props.cropSelectedArea();
-          });
+          // selectedViewers.forEach((index) => {
+          //   cropSelectedArea(`viewport-${index}`);
+          // });
           console.log('Cropping Selected Area');
           break;
         case 'Delete Mask':
-          // Implement the logic to delete the mask
-          selectedViewers.forEach((index) => {
-            viewersState[index].props.deleteMask();
-          });
+          // selectedViewers.forEach((index) => {
+          //   deleteMask(`viewport-${index}`);
+          // });
           console.log('Deleting Mask');
           break;
         case 'Image Comparison':
-          // Implement the logic for image comparison
-          selectedViewers.forEach((index) => {
-            viewersState[index].props.imageComparison();
-          });
+          // selectedViewers.forEach((index) => {
+          //   imageComparison(`viewport-${index}`);
+          // });
           console.log('Comparing Images');
           break;
         case 'Invert Contrast':
-          // Implement the logic to invert the contrast
           selectedViewers.forEach((index) => {
-            viewersState[index].props.invertContrast();
+            invertContrast(`viewport-${index}`);
           });
           console.log('Inverting Contrast');
           break;
@@ -206,97 +219,86 @@ const ViewerContainer: React.FC<ViewerContainerProps> = ({ imageUrls }) => {
           setGridLayout('2x2');
           break;
         case 'Magnifier': {
-          // Implement the logic for magnifier
           selectedViewers.forEach((index) => {
-            viewersState[index].props.activateMagnifier();
+            activateMagnifier(`viewport-${index}`);
           });
           break;
         }
         case 'Fit Size': {
-          // Implement the logic to fit the image size
           selectedViewers.forEach((index) => {
-            viewersState[index].props.fitImageSize();
+            fitImageSize(`viewport-${index}`);
           });
           console.log('Fitting Image Size');
           break;
         }
         case 'Original Size': {
-          // Implement the logic to set the image to original size
-          console.log('Setting Image to Original Size');
           selectedViewers.forEach((index) => {
-            viewersState[index].props.setOriginalSize();
+            setOriginalSize(`viewport-${index}`);
           });
+          console.log('Setting Image to Original Size');
           break;
         }
         case 'Zoom Image':
-          // Implement the logic to zoom the image
-          selectedViewers.forEach((index) => {
-            viewersState[index].props.zoomImage();
-          });
+          // selectedViewers.forEach((index) => {
+          //   zoomImage(`viewport-${index}`);
+          // });
           console.log('Zooming Image');
           break;
         case 'Reset Cursor':
-          // Implement the logic to reset the cursor
-          selectedViewers.forEach((index) => {
-            viewersState[index].props.resetCursor();
-          });
+          // selectedViewers.forEach((index) => {
+          //   resetCursor(`viewport-${index}`);
+          // });
           console.log('Resetting Cursor');
           break;
         case 'Pan':
-          // Implement the logic to pan the image
-          selectedViewers.forEach((index) => {
-            viewersState[index].props.panImage();
-          });
+          // selectedViewers.forEach((index) => {
+          //   panImage(`viewport-${index}`);
+          // });
           console.log('Panning Image');
           break;
         case 'Invert Image':
           selectedViewers.forEach((index) => {
-            viewersState[index].props.InvertImage();
+            InvertImage(`viewport-${index}`);
           });
           break;
         case 'Reset Image':
           selectedViewers.forEach((index) => {
-            viewersState[index].props.ResetImage();
+            ResetImage(`viewport-${index}`);
           });
           break;
         case 'Snapshot':
-          // Implement the logic to take a snapshot
-          selectedViewers.forEach((index) => {
-            viewersState[index].props.takeSnapshot();
-          });
+          // selectedViewers.forEach((index) => {
+          //   takeSnapshot(`viewport-${index}`);
+          // });
           console.log('Taking Snapshot');
           break;
         case 'Advanced Processing':
-          // Implement the logic for advanced processing
-          selectedViewers.forEach((index) => {
-            viewersState[index].props.advancedProcessing();
-          });
+          // selectedViewers.forEach((index) => {
+          //   advancedProcessing(`viewport-${index}`);
+          // });
           console.log('Performing Advanced Processing');
           break;
         case 'Musician':
-          // Implement the logic for musician
-          selectedViewers.forEach((index) => {
-            viewersState[index].props.activateMusician();
-          });
+          // selectedViewers.forEach((index) => {
+          //   activateMusician(`viewport-${index}`);
+          // });
           console.log('Activating Musician');
           break;
         case 'Image Measurement':
-          // Implement the logic for image measurement
-          selectedViewers.forEach((index) => {
-            viewersState[index].props.imageMeasurement();
-          });
+          // selectedViewers.forEach((index) => {
+          //   imageMeasurement(`viewport-${index}`);
+          // });
           console.log('Measuring Image');
           break;
         case 'More':
-          // Implement the logic for more options
-          selectedViewers.forEach((index) => {
-            viewersState[index].props.moreOptions();
-          });
+          // selectedViewers.forEach((index) => {
+          //   moreOptions(`viewport-${index}`);
+          // });
           console.log('Showing More Options');
           break;
         case 'Apply Colormap':
           selectedViewers.forEach((index) => {
-            viewersState[index].props.ApplyColormap();
+            ApplyColormap(`viewport-${index}`);
           });
           break;
         default: