.

dicom-viewer/src/App.tsx

@@ -62,7 +62,19 @@ const MOUSE_BUTTONS = [
   { label: "Middle", value: "Auxiliary" },
   { label: "Right", value: "Secondary" },
 ]
-
+const ALL_MOUSE_BINDINGS = [
+  { label: "Left", value: "Primary", mask: 1 },
+  { label: "Middle", value: "Auxiliary", mask: 4 },
+  { label: "Right", value: "Secondary", mask: 2 },
+  { label: "Left + Right", value: "Primary_and_Secondary", mask: 3 },
+  { label: "Left + Middle", value: "Primary_and_Auxiliary", mask: 5 },
+  { label: "Right + Middle", value: "Secondary_and_Auxiliary", mask: 6 },
+  { label: "Left + Right + Middle", value: "Primary_and_Secondary_and_Auxiliary", mask: 7 },
+  { label: "Fourth Button", value: "Fourth_Button", mask: 8 },
+  { label: "Fifth Button", value: "Fifth_Button", mask: 16 },
+  { label: "Mouse Wheel", value: "Wheel", mask: 524288 },
+  { label: "Mouse Wheel + Left", value: "Wheel_Primary", mask: 524289 },
+];
 
 
 // App definintion
@@ -129,6 +141,8 @@ function App() {
   const [crossHairsEnabled, setCrossHairsEnabled] = useState(false);
   const [referenceLinesEnabled, setReferenceLinesEnabled] = useState(true);
 
+  const [showAdvancedMouseBindings, setShowAdvancedMouseBindings] = useState(false);
+
   const sortViewportImageIdsBySliceLocation = () => {
     setViewportImageIds(prev => {
       const next = prev.map((imageIds, idx) => {
@@ -256,6 +270,9 @@ function App() {
     Auxiliary: PanTool.toolName,
     Secondary: WindowLevelTool.toolName,
     Primary_and_Secondary: ZoomTool.toolName, // 1 (left) + 2 (right) = 3 
+    Fourth_Button: PlanarRotateTool.toolName, // 16
+    Wheel: StackScrollTool.toolName, // 524288
+
   })
   const [ctrlMouseToolBindings, setCtrlMouseToolBindings] = useState({
     Primary: LengthTool.toolName,
@@ -395,12 +412,31 @@ function App() {
         // Normal bindings
         Object.entries(mouseToolBindings).forEach(([btn, tool]) => {
           if (!toolBindings[tool]) toolBindings[tool] = [];
-          toolBindings[tool].push({ mouseButton: MouseBindings[btn] });
+          // Find the mask for this binding
+          const binding = ALL_MOUSE_BINDINGS.find(b => b.value === btn);
+          if (binding) {
+            toolBindings[tool].push({ mouseButton: binding.mask });
+          } else if (MouseBindings[btn]) {
+            // Fallback for legacy bindings
+            toolBindings[tool].push({ mouseButton: MouseBindings[btn] });
+          }
         });
-        // Ctrl bindings
+        // Ctrl bindings (now supports advanced mouse bindings)
         Object.entries(ctrlMouseToolBindings).forEach(([btn, tool]) => {
+          if (!tool) return;
           if (!toolBindings[tool]) toolBindings[tool] = [];
-          toolBindings[tool].push({ mouseButton: MouseBindings[btn], modifierKey: KeyboardBindings.Ctrl });
+          const binding = ALL_MOUSE_BINDINGS.find(b => b.value === btn);
+          if (binding) {
+            toolBindings[tool].push({
+              mouseButton: binding.mask,
+              modifierKey: KeyboardBindings.Ctrl,
+            });
+          } else if (MouseBindings[btn]) {
+            toolBindings[tool].push({
+              mouseButton: MouseBindings[btn],
+              modifierKey: KeyboardBindings.Ctrl,
+            });
+          }
         });
 
         // Apply all bindings for each tool in a single call
@@ -408,14 +444,14 @@ function App() {
           toolGroup.setToolActive(tool, { bindings });
         });
 
-        // Always re-apply the mouse wheel binding for StackScrollTool
+        //// Always re-apply the mouse wheel binding for StackScrollTool
-        toolGroup.setToolActive(StackScrollTool.toolName, {
+        //toolGroup.setToolActive(StackScrollTool.toolName, {
-          bindings: [
+        //  bindings: [
-            {
+        //    {
-              mouseButton: MouseBindings.Wheel, // Wheel Mouse
+        //      mouseButton: MouseBindings.Wheel, // Wheel Mouse
-            },
+        //    },
-          ],
+        //  ],
-        });
+        //});
 
       }
     });
@@ -636,7 +672,7 @@ function App() {
           typeof viewport.setImageIdIndex === "function"
         ) {
           //viewport.setImageIdIndex(prevScrollIndices.current[i]);
-          csUtilities.jumpToSlice(viewport.element, {imageIndex: prevScrollIndices.current[i]} )
+          csUtilities.jumpToSlice(viewport.element, { imageIndex: prevScrollIndices.current[i] })
         }
 
 
@@ -1218,7 +1254,7 @@ function App() {
                       ) {
 
                         //viewport.setImageIdIndex(idx);
-                        csUtilities.jumpToSlice(viewport.element, {imageIndex: idx} )
+                        csUtilities.jumpToSlice(viewport.element, { imageIndex: idx })
                         //viewport.render();
                         updateOverlay(i, viewport);
 
@@ -1698,12 +1734,58 @@ function App() {
                     </select>
                   </div>
                 ))}
+
+                {/* Expandable advanced mouse bindings */}
+                <div style={{ margin: "12px 0" }}>
+                  <button
+                    style={{
+                      background: "#333",
+                      color: "#fff",
+                      border: "none",
+                      borderRadius: "4px",
+                      padding: "4px 12px",
+                      cursor: "pointer",
+                      fontSize: "14px",
+                      marginBottom: "8px",
+                    }}
+                    onClick={() => setShowAdvancedMouseBindings(v => !v)}
+                  >
+                    {showAdvancedMouseBindings ? "Hide" : "Show"} Advanced Mouse Bindings
+                  </button>
+                  {showAdvancedMouseBindings && (
+                    <div style={{ marginTop: 8 }}>
+                      {ALL_MOUSE_BINDINGS.slice(3).map((btn) => (
+                        <div key={btn.value} style={{ marginBottom: 10 }}>
+                          <label style={{ marginRight: 8 }}>{btn.label}:</label>
+                          <select
+                            value={mouseToolBindings[btn.value] || ""}
+                            onChange={e => setMouseToolBindings(prev => ({ ...prev, [btn.value]: e.target.value }))}
+                            style={{
+                              background: "#333",
+                              color: "#fff",
+                              border: "1px solid #444",
+                              borderRadius: "4px",
+                              padding: "4px 8px",
+                              fontSize: "14px",
+                            }}
+                          >
+                            <option value="">(None)</option>
+                            {TOOL_OPTIONS.map(opt => (
+                              <option key={opt.value} value={opt.value}>{opt.label}</option>
+                            ))}
+                          </select>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+                {/* Ctrl + Mouse Button Tool Bindings */}
                 <div style={{ margin: "18px 0 8px 0", fontWeight: "bold" }}>Ctrl + Mouse Button Tool Bindings</div>
                 {MOUSE_BUTTONS.map((btn) => (
                   <div key={btn.value + "_ctrl"} style={{ marginBottom: 10 }}>
                     <label style={{ marginRight: 8 }}>{btn.label} + Ctrl:</label>
                     <select
-                      value={ctrlMouseToolBindings[btn.value]}
+                      value={ctrlMouseToolBindings[btn.value] || ""}
                       onChange={e => setCtrlMouseToolBindings(prev => ({ ...prev, [btn.value]: e.target.value }))}
                       style={{
                         background: "#333",
@@ -1714,12 +1796,41 @@ function App() {
                         fontSize: "14px",
                       }}
                     >
+                      <option value="">(None)</option>
                       {TOOL_OPTIONS.map(opt => (
                         <option key={opt.value} value={opt.value}>{opt.label}</option>
                       ))}
                     </select>
                   </div>
                 ))}
+
+                {/* Expandable advanced ctrl+mouse bindings */}
+                {showAdvancedMouseBindings && (
+                  <div style={{ marginTop: 8 }}>
+                    {ALL_MOUSE_BINDINGS.slice(3).map((btn) => (
+                      <div key={btn.value + "_ctrl"} style={{ marginBottom: 10 }}>
+                        <label style={{ marginRight: 8 }}>{btn.label} + Ctrl:</label>
+                        <select
+                          value={ctrlMouseToolBindings[btn.value] || ""}
+                          onChange={e => setCtrlMouseToolBindings(prev => ({ ...prev, [btn.value]: e.target.value }))}
+                          style={{
+                            background: "#333",
+                            color: "#fff",
+                            border: "1px solid #444",
+                            borderRadius: "4px",
+                            padding: "4px 8px",
+                            fontSize: "14px",
+                          }}
+                        >
+                          <option value="">(None)</option>
+                          {TOOL_OPTIONS.map(opt => (
+                            <option key={opt.value} value={opt.value}>{opt.label}</option>
+                          ))}
+                        </select>
+                      </div>
+                    ))}
+                  </div>
+                )}
               </div>
               <button
                 style={{