react-x11 0.0.1 → 1.2.0

package/src/pointer3d.js

@@ -0,0 +1,158 @@
+// Pointer events for the 3D scene: X pointer events on the <glarea> window,
+// raycast against the CPU-side geometry (raycast3d.js), dispatched to the
+// mesh they hit and bubbled up its ancestors.
+//
+// The surface owns one X window, so this is a second, small event pipeline
+// beside the 2D EventManager rather than part of it: the hit test is a ray,
+// not a rect, and the events carry 3D information.
+import {
+  runWithPriority,
+  DiscreteEventPriority,
+  ContinuousEventPriority,
+} from './priority.js';
+import { hasPointerHandlers, raycast } from './raycast3d.js';
+
+/** Does anything in this subtree listen for pointer events? */
+export function sceneWantsPointer(nodes) {
+  for (const node of nodes) {
+    if (!node.isObject3D) continue;
+    if (hasPointerHandlers(node)) return true;
+    if (sceneWantsPointer(node.children)) return true;
+  }
+  return false;
+}
+
+/** The dispatch path: the mesh that was hit, then its ancestors. */
+function bubblePath(node, surface) {
+  const path = [];
+  for (let n = node; n && n !== surface; n = n.parent) path.push(n);
+  return path;
+}
+
+export class ScenePointer {
+  constructor(surface) {
+    this.surface = surface;
+    this.hovered = null;
+    this.pressed = null;
+    this.attached = false;
+  }
+
+  attach(wnd) {
+    if (this.attached || typeof wnd.on !== 'function') return;
+    this.attached = true;
+    wnd.on('mousedown', (ev) => this._onPointer('pointerdown', ev));
+    wnd.on('mouseup', (ev) => this._onPointer('pointerup', ev));
+    wnd.on('mousemove', (ev) => this._onPointer('pointermove', ev));
+    wnd.on('mouseout', () => this._onLeave());
+  }
+
+  /** The nearest hit under the pointer, or null. */
+  _pick(ev) {
+    const camera = this.surface.scene.camera;
+    if (!camera) return null;
+    const [hit] = raycast(this.surface, ev.x, ev.y, camera);
+    return hit ?? null;
+  }
+
+  _makeEvent(type, hit, native, target) {
+    let stopped = false;
+    return {
+      type,
+      target,
+      object: hit?.object ?? null,
+      point: hit?.point ?? null,
+      distance: hit?.distance ?? null,
+      face: hit?.face ?? null,
+      uv: hit?.uv ?? null,
+      x: native?.x,
+      y: native?.y,
+      nativeEvent: native,
+      surface: this.surface,
+      stopPropagation() {
+        stopped = true;
+      },
+      get propagationStopped() {
+        return stopped;
+      },
+    };
+  }
+
+  /** Call `on<Name>` along the bubble path until one stops propagation. */
+  _dispatch(name, hit, native, node = hit?.object) {
+    if (!node) return null;
+    const prop = `on${name[0].toUpperCase()}${name.slice(1)}`;
+    let event = null;
+    for (const target of bubblePath(node, this.surface)) {
+      const handler = target.props?.[prop];
+      if (typeof handler !== 'function') continue;
+      event = event ?? this._makeEvent(name.toLowerCase(), hit, native, target);
+      event.target = target;
+      handler(event);
+      if (event.propagationStopped) break;
+    }
+    return event;
+  }
+
+  _onPointer(type, native) {
+    const priority =
+      type === 'pointermove' ? ContinuousEventPriority : DiscreteEventPriority;
+    runWithPriority(priority, () => {
+      const hit = this._pick(native);
+      if (type === 'pointermove') {
+        this._updateHover(hit, native);
+        if (hit) this._dispatch('pointerMove', hit, native);
+        return;
+      }
+      if (type === 'pointerdown') {
+        this.pressed = hit?.object ?? null;
+        if (hit) this._dispatch('pointerDown', hit, native);
+        else
+          this.surface.props.onPointerMissed?.(
+            this._makeEvent('pointermissed', null, native, null),
+          );
+        return;
+      }
+      // pointerup: a click is down and up on the same object
+      if (hit) this._dispatch('pointerUp', hit, native);
+      if (hit && this.pressed === hit.object) {
+        this._dispatch('click', hit, native);
+      }
+      this.pressed = null;
+    });
+  }
+
+  /** enter/leave, diffed against the object hovered last time. */
+  _updateHover(hit, native) {
+    const next = hit?.object ?? null;
+    if (next === this.hovered) return;
+    const previous = this.hovered;
+    this.hovered = next;
+    if (previous && !previous.destroyed) {
+      this._dispatch('pointerOut', null, native, previous);
+    }
+    if (next) this._dispatch('pointerOver', hit, native);
+    this._applyCursor(next);
+  }
+
+  _applyCursor(node) {
+    const wnd = this.surface.window;
+    if (typeof wnd?.setCursor !== 'function') return;
+    const cursor = node?.props?.cursor ?? null;
+    if (cursor === this._cursor) return;
+    this._cursor = cursor;
+    wnd.setCursor(cursor);
+  }
+
+  _onLeave() {
+    if (!this.hovered) return;
+    runWithPriority(ContinuousEventPriority, () => {
+      this._updateHover(null, null);
+    });
+  }
+
+  /** A node left the tree: drop references to it. */
+  forget(node) {
+    if (this.hovered === node) this.hovered = null;
+    if (this.pressed === node) this.pressed = null;
+  }
+}

package/src/priority.js

@@ -0,0 +1,39 @@
+// Shared update-priority state between the host config and the event
+// dispatcher. react-reconciler is CJS; default-import and destructure so the
+// named bindings work regardless of cjs-module-lexer's view of the package.
+import ReactReconcilerConstants from 'react-reconciler/constants.js';
+
+export const {
+  ConcurrentRoot,
+  DefaultEventPriority,
+  DiscreteEventPriority,
+  ContinuousEventPriority,
+  NoEventPriority,
+} = ReactReconcilerConstants;
+
+let currentUpdatePriority = NoEventPriority;
+
+export function getCurrentUpdatePriority() {
+  return currentUpdatePriority;
+}
+
+export function setCurrentUpdatePriority(priority) {
+  currentUpdatePriority = priority;
+}
+
+export function resolveUpdatePriority() {
+  return currentUpdatePriority !== NoEventPriority
+    ? currentUpdatePriority
+    : DefaultEventPriority;
+}
+
+/** Run fn (an event handler batch) at the given update priority. */
+export function runWithPriority(priority, fn) {
+  const previous = currentUpdatePriority;
+  currentUpdatePriority = priority;
+  try {
+    return fn();
+  } finally {
+    currentUpdatePriority = previous;
+  }
+}

package/src/raycast3d.js

@@ -0,0 +1,146 @@
+// Client-side picking for the 3D scene.
+//
+// There is no GPU picking here: reading pixels back over the protocol is a
+// round trip per event, and on XQuartz GL output is not even readable
+// through GetImage. So the ray is cast against the CPU-side geometry — the
+// same arrays the display lists were compiled from — the way three.js does
+// it. Only meshes that (or whose ancestors) have pointer handlers take part,
+// which is r3f's one optimization that matters.
+import {
+  invert,
+  multiply,
+  transformDirection,
+  transformPoint,
+} from './mat4.js';
+
+const EPSILON = 1e-8;
+
+function normalize([x, y, z]) {
+  const len = Math.hypot(x, y, z) || 1;
+  return [x / len, y / len, z / len];
+}
+
+/**
+ * Möller–Trumbore. Returns the ray parameter at the intersection, or null.
+ * `dir` need not be unit length: `t` is then in the same units as `dir`,
+ * which is what keeps object-space hits comparable in world space.
+ */
+function intersectTriangle(origin, dir, a, b, c) {
+  const e1 = [b[0] - a[0], b[1] - a[1], b[2] - a[2]];
+  const e2 = [c[0] - a[0], c[1] - a[1], c[2] - a[2]];
+  const p = [
+    dir[1] * e2[2] - dir[2] * e2[1],
+    dir[2] * e2[0] - dir[0] * e2[2],
+    dir[0] * e2[1] - dir[1] * e2[0],
+  ];
+  const det = e1[0] * p[0] + e1[1] * p[1] + e1[2] * p[2];
+  if (Math.abs(det) < EPSILON) return null;
+  const inv = 1 / det;
+  const t0 = [origin[0] - a[0], origin[1] - a[1], origin[2] - a[2]];
+  const u = (t0[0] * p[0] + t0[1] * p[1] + t0[2] * p[2]) * inv;
+  if (u < 0 || u > 1) return null;
+  const q = [
+    t0[1] * e1[2] - t0[2] * e1[1],
+    t0[2] * e1[0] - t0[0] * e1[2],
+    t0[0] * e1[1] - t0[1] * e1[0],
+  ];
+  const v = (dir[0] * q[0] + dir[1] * q[1] + dir[2] * q[2]) * inv;
+  if (v < 0 || u + v > 1) return null;
+  const t = (e2[0] * q[0] + e2[1] * q[1] + e2[2] * q[2]) * inv;
+  return t > EPSILON ? { t, u, v } : null;
+}
+
+/**
+ * The world-space ray through a pixel of the surface.
+ * @returns {{origin: number[], direction: number[]}}
+ */
+export function rayThrough(x, y, { width, height, projection, view }) {
+  const inverse = invert(multiply(projection, view));
+  if (!inverse) return null;
+  const ndcX = (2 * x) / width - 1;
+  const ndcY = 1 - (2 * y) / height;
+  const near = transformPoint(inverse, [ndcX, ndcY, -1]);
+  const far = transformPoint(inverse, [ndcX, ndcY, 1]);
+  return {
+    origin: near,
+    direction: normalize([
+      far[0] - near[0],
+      far[1] - near[1],
+      far[2] - near[2],
+    ]),
+  };
+}
+
+const POINTER_PROPS = [
+  'onClick',
+  'onPointerDown',
+  'onPointerUp',
+  'onPointerMove',
+  'onPointerOver',
+  'onPointerOut',
+];
+
+export const hasPointerHandlers = (node) =>
+  POINTER_PROPS.some((name) => typeof node.props?.[name] === 'function');
+
+/** Meshes worth testing: they, or an ancestor, listen for pointer events. */
+function pickable(nodes, inherited, out = []) {
+  for (const node of nodes) {
+    if (!node.isObject3D || !node.visible) continue;
+    const listening = inherited || hasPointerHandlers(node);
+    if (listening && node.kind === 'mesh' && node.geometry) out.push(node);
+    pickable(node.children, listening, out);
+  }
+  return out;
+}
+
+/**
+ * Intersect the scene under `surface` with the ray through pixel (x, y).
+ * `world` matrices come from the last rendered frame.
+ * @returns {Array<{object, distance, point, face}>} nearest first
+ */
+export function raycast(surface, x, y, camera) {
+  const ray = rayThrough(x, y, camera);
+  if (!ray) return [];
+  const hits = [];
+
+  for (const mesh of pickable(surface.children, false)) {
+    const world = mesh._world;
+    const toObject = world ? invert(world) : null;
+    if (!toObject) continue;
+    const origin = transformPoint(toObject, ray.origin);
+    const direction = transformDirection(toObject, ray.direction);
+    const { positions, index } = mesh.geometry.data();
+    const count = index ? index.length : positions.length / 3;
+    const vertex = (i) => {
+      const v = index ? index[i] : i;
+      return [positions[v * 3], positions[v * 3 + 1], positions[v * 3 + 2]];
+    };
+
+    let best = null;
+    for (let i = 0; i + 2 < count; i += 3) {
+      const hit = intersectTriangle(
+        origin,
+        direction,
+        vertex(i),
+        vertex(i + 1),
+        vertex(i + 2),
+      );
+      if (hit && (!best || hit.t < best.t)) best = { ...hit, face: i / 3 };
+    }
+    if (!best) continue;
+    hits.push({
+      object: mesh,
+      distance: best.t,
+      point: [
+        ray.origin[0] + ray.direction[0] * best.t,
+        ray.origin[1] + ray.direction[1] * best.t,
+        ray.origin[2] + ray.direction[2] * best.t,
+      ],
+      face: best.face,
+      uv: [best.u, best.v],
+    });
+  }
+
+  return hits.sort((a, b) => a.distance - b.distance);
+}