Graph: pan with left or right, open with the other

Frontend/src/Components/GraphPane.jsx

@@ -8,8 +8,9 @@ import { FetchGraph } from "../Api.js";
 // it (Backend/Graph.py). With directories turned off (Settings > Graph) only
 // the files and the references between them are left.
 // The layout is a small force simulation: dots push each other apart and
-// links pull them together until it settles. Pan with the button picked in
-// Settings > Graph, scroll to zoom, drag a dot to move it, click one to open it.
+// links pull them together until it settles. One mouse button pans (Settings
+// > Graph), the other opens the dot it clicks or moves it when dragged.
+// Scroll zooms.
 
 const ChildLength = 50;
 const ReferenceLength = 80;
@@ -19,7 +20,6 @@ const LabelZoom = 0.7; // below this, only hovered labels are drawn
 const ClickSlop = 4; // pixels a click may wander and still count as a click
 // Directories by depth, like the headings: h1 Purple, h2 Blue, ...
 const DepthRoles = ["Purple", "Blue", "Green", "Yellow", "Orange", "Red"];
-const ButtonNumbers = { Left: 0, Middle: 1, Right: 2 };
 
 function ReadRole(Name) {
   return getComputedStyle(document.documentElement).getPropertyValue(`--${Name}`).trim();
@@ -191,7 +191,9 @@ export default function GraphPane({ RootName, DirectoryPath, ShowDirectories, Pa
       const Depth = (Node.Id ? Node.Id.split("/").length : 0) - BaseDepth;
       Node.Colour = Node.IsDirectory ? DepthColours[Depth % DepthColours.length] : Colours.File;
     }
-    const PanNumber = ButtonNumbers[PanButton] ?? 1;
+    // Anything but "Left" (including an old "Middle") pans with Right.
+    const PanNumber = PanButton === "Left" ? 0 : 2;
+    const OpenNumber = PanNumber === 0 ? 2 : 0;
 
     const State = {
       Zoom: 1,
@@ -313,11 +315,9 @@ export default function GraphPane({ RootName, DirectoryPath, ShowDirectories, Pa
       const Node = NodeAt(X, Y);
       State.Moved = false;
       State.DownAt = [X, Y];
-      if (Event.button !== 0 || Event.button === PanNumber) {
-        Event.preventDefault(); // no middle-click autoscroll or right-click menu
-      }
-      if (Event.button === 0 && Node) {
-        // Left on a dot: a click opens it, a drag moves it.
+      Event.preventDefault();
+      if (Event.button === OpenNumber && Node) {
+        // The open button on a dot: a click opens it, a drag moves it.
         State.Dragging = Node;
         Node.Pinned = true;
       } else if (Event.button === PanNumber) {
@@ -365,7 +365,7 @@ export default function GraphPane({ RootName, DirectoryPath, ShowDirectories, Pa
     }
 
     function OnContextMenu(Event) {
-      if (PanNumber === 2) Event.preventDefault();
+      Event.preventDefault(); // right-click pans or opens here, never the browser menu
     }
 
     function OnLeave() {
@@ -432,8 +432,9 @@ export default function GraphPane({ RootName, DirectoryPath, ShowDirectories, Pa
       {!Graph && !Error && <div className="PreviewEmpty">Building the graph…</div>}
       {Graph && <canvas ref={CanvasRef} className="GraphCanvas" />}
       <div className="GraphHint">
-        {PanButton === "Left" ? "Drag" : `${PanButton}-drag`} the background to pan, scroll to zoom, drag a dot to move it,
-        click one to open it.
+        {PanButton === "Left"
+          ? "Drag to pan, right-click a dot to open it (right-drag moves it), scroll to zoom."
+          : "Right-drag to pan, click a dot to open it (drag moves it), scroll to zoom."}
       </div>
     </div>
   );

Frontend/src/Components/SettingsPanel.jsx

@@ -412,10 +412,12 @@ export default function SettingsPanel({
             </div>
             <div className="SettingsRow">
               <label className="SettingsLabel">Pan with mouse button</label>
-              <select value={Settings.GraphPanButton} onChange={(Event) => UpdateField("GraphPanButton", Event.target.value)}>
-                <option value="Left">Left</option>
-                <option value="Middle">Middle</option>
-                <option value="Right">Right</option>
+              <select
+                value={Settings.GraphPanButton === "Left" ? "Left" : "Right"}
+                onChange={(Event) => UpdateField("GraphPanButton", Event.target.value)}
+              >
+                <option value="Right">Right (left-click opens a dot)</option>
+                <option value="Left">Left (right-click opens a dot)</option>
               </select>
             </div>
           </div>