feat(image processing): add image magnifier functionality

src/pages/view/components/viewers/stack.image.viewer.tsx

@@ -11,6 +11,7 @@ import { clearAction } from '@/states/view/functionAreaSlice';
 import { useDispatch } from 'react-redux';
 
 const {
+  MagnifyTool,
   PanTool,
   WindowLevelTool,
   StackScrollTool,
@@ -26,6 +27,7 @@ let currentViewportId: string;
 
 function registerTools(viewportId, renderingEngineId) {
   // Add tools to Cornerstone3D
+  cornerstoneTools.addTool(MagnifyTool);
   cornerstoneTools.addTool(PanTool);
   cornerstoneTools.addTool(WindowLevelTool);
   cornerstoneTools.addTool(StackScrollTool);
@@ -40,6 +42,7 @@ function registerTools(viewportId, renderingEngineId) {
   }
   toolGroup = toolGroupTmp;
   // Add tools to the tool group
+  toolGroup.addTool(MagnifyTool.toolName);
   toolGroup.addTool(PanTool.toolName);
   toolGroup.addTool(WindowLevelTool.toolName);
   toolGroup.addTool(StackScrollTool.toolName);
@@ -495,10 +498,28 @@ const StackViewer = ({
           // Implement the logic for 4x4 layout
           console.log('Setting 4x4 Layout');
           break;
-        case 'Magnifier':
+        case 'Magnifier': {
           // Implement the logic for magnifier
           console.log('Activating Magnifier');
+          const isActive =
+            toolGroup.getActivePrimaryMouseButtonTool() ===
+            MagnifyTool.toolName;
+          if (isActive) {
+            toolGroup.setToolPassive(MagnifyTool.toolName, {
+              removeAllBindings: true,
+            });
+          } else {
+            toolGroup.setToolActive(MagnifyTool.toolName, {
+              bindings: [
+                {
+                  mouseButton: MouseBindings.Primary, // Left Click
+                },
+              ],
+            });
+          }
+
           break;
+        }
         case 'Fit Size':
           // Implement the logic to fit the image size
           console.log('Fitting Image Size');