Merge pull request #23 from RtlZeroMemory/feat/filetree-context-menu

FileTreeExplorer: wire onContextMenu (right click)

Author: RtlZeroMemory

docs/widgets/file-tree-explorer.md

@@ -36,6 +36,11 @@ ui.fileTreeExplorer({
 | `onContextMenu` | `(node) => void` | - | Context menu callback |
 | `renderNode` | `(node, depth, state) => VNode` | - | Custom renderer |
 
+## Behavior
+
+- **Arrow keys** navigate. **Enter** activates the focused node.
+- **Right click** on a node calls `onContextMenu(node)` when provided.
+
 ## Notes
 
 - `FileNode` includes `name`, `path`, `type`, and optional `children` and `status`.

packages/core/src/app/__tests__/fileTreeExplorer.contextMenu.test.ts

@@ -0,0 +1,94 @@
+import { assert, describe, test } from "@rezi-ui/testkit";
+import type { RuntimeBackend } from "../../backend.js";
+import type { ZrevEvent } from "../../events.js";
+import { ui } from "../../index.js";
+import { DEFAULT_TERMINAL_CAPS } from "../../terminalCaps.js";
+import { defaultTheme } from "../../theme/defaultTheme.js";
+import type { FileNode } from "../../widgets/types.js";
+import { WidgetRenderer } from "../widgetRenderer.js";
+
+function noRenderHooks(): { enterRender: () => void; exitRender: () => void } {
+  return { enterRender: () => {}, exitRender: () => {} };
+}
+
+function mouseEvent(
+  x: number,
+  y: number,
+  mouseKind: 1 | 2 | 3 | 4 | 5,
+  opts: Readonly<{ buttons?: number; timeMs?: number }> = {},
+): ZrevEvent {
+  return {
+    kind: "mouse",
+    timeMs: opts.timeMs ?? 0,
+    x,
+    y,
+    mouseKind,
+    mods: 0,
+    buttons: opts.buttons ?? 0,
+    wheelX: 0,
+    wheelY: 0,
+  };
+}
+
+function createNoopBackend(): RuntimeBackend {
+  return {
+    start: async () => {},
+    stop: async () => {},
+    dispose: () => {},
+    requestFrame: async () => {},
+    pollEvents: async () =>
+      new Promise((_) => {
+        // Not used by WidgetRenderer unit-style tests.
+      }),
+    postUserEvent: () => {},
+    getCaps: async () => DEFAULT_TERMINAL_CAPS,
+  };
+}
+
+describe("FileTreeExplorer context menu", () => {
+  test("right click calls onContextMenu for the node under cursor", () => {
+    const backend = createNoopBackend();
+    const renderer = new WidgetRenderer<void>({
+      backend,
+      requestRender: () => {},
+    });
+
+    const calls: string[] = [];
+
+    const data: readonly FileNode[] = Object.freeze([
+      Object.freeze({ name: "a", path: "/a", type: "file" }),
+      Object.freeze({ name: "b", path: "/b", type: "file" }),
+    ]);
+
+    const vnode = ui.fileTreeExplorer({
+      id: "fte",
+      data,
+      expanded: [],
+      onToggle: () => {},
+      onSelect: () => {},
+      onActivate: () => {},
+      onContextMenu: (node) => calls.push(node.path),
+    });
+
+    const res = renderer.submitFrame(
+      () => vnode,
+      undefined,
+      { cols: 20, rows: 5 },
+      defaultTheme,
+      noRenderHooks(),
+    );
+    assert.ok(res.ok);
+
+    // Right-click (buttons bit 4) on the second row (index 1).
+    renderer.routeEngineEvent(mouseEvent(0, 1, 3, { buttons: 4 }));
+    assert.deepEqual(calls, ["/b"]);
+
+    // Middle click should not fire context menu.
+    renderer.routeEngineEvent(mouseEvent(0, 0, 3, { buttons: 2 }));
+    assert.deepEqual(calls, ["/b"]);
+
+    // Left click should not fire context menu.
+    renderer.routeEngineEvent(mouseEvent(0, 0, 3, { buttons: 1 }));
+    assert.deepEqual(calls, ["/b"]);
+  });
+});

packages/core/src/app/widgetRenderer.ts

@@ -1787,6 +1787,47 @@ export class WidgetRenderer<S> {
       }
     }
 
+    // Right-click context menu for FileTreeExplorer.
+    if (event.kind === "mouse" && event.mouseKind === 3) {
+      const targetId = mouseTargetId;
+      if (targetId !== null) {
+        const fte = this.fileTreeExplorerById.get(targetId);
+        const rect = this.rectById.get(targetId);
+        if (fte && rect && typeof fte.onContextMenu === "function") {
+          const RIGHT_BUTTON = 1 << 2;
+          if ((event.buttons & RIGHT_BUTTON) !== 0) {
+            const localY = event.y - rect.y;
+            const inBounds = localY >= 0 && localY < rect.h;
+            if (inBounds) {
+              const state = this.treeStore.get(fte.id);
+              const flatNodes =
+                readFileNodeFlatCache(state, fte.data, fte.expanded) ??
+                (() => {
+                  const next = flattenTree(
+                    fte.data,
+                    fileNodeGetKey,
+                    fileNodeGetChildren,
+                    fileNodeHasChildren,
+                    fte.expanded,
+                  );
+                  this.treeStore.set(fte.id, {
+                    flatCache: makeFileNodeFlatCache(fte.data, fte.expanded, next),
+                  });
+                  return next;
+                })();
+
+              const idx = Math.max(0, state.scrollTop) + localY;
+              const fn = flatNodes[idx];
+              if (fn) {
+                fte.onContextMenu(fn.node);
+                localNeedsRender = true;
+              }
+            }
+          }
+        }
+      }
+    }
+
     const res: RoutingResult & { nextZoneId?: string | null } =
       event.kind === "key"
         ? routeKeyWithZones(event, {