react-x11 1.2.0 → 2.0.0

package/src/geometry3d.js

@@ -1,223 +0,0 @@
-// Geometry generators for the primitive `<*Geometry>` elements. Each takes
-// the same `args` tuple as its three.js counterpart and returns plain
-// arrays — positions, normals, uvs and a triangle index — which the display
-// list compiler turns into one server-side list (src/scene3d.js).
-
-/**
- * Build a parametric surface as a (segmentsX+1) x (segmentsY+1) vertex grid.
- * `point(u, v)` returns [position, normal] for u, v in 0..1.
- */
-function grid(segmentsX, segmentsY, point) {
-  const positions = [];
-  const normals = [];
-  const uvs = [];
-  const index = [];
-  for (let iy = 0; iy <= segmentsY; iy++) {
-    for (let ix = 0; ix <= segmentsX; ix++) {
-      const u = ix / segmentsX;
-      const v = iy / segmentsY;
-      const [p, n] = point(u, v);
-      positions.push(p[0], p[1], p[2]);
-      normals.push(n[0], n[1], n[2]);
-      uvs.push(u, 1 - v);
-    }
-  }
-  const stride = segmentsX + 1;
-  for (let iy = 0; iy < segmentsY; iy++) {
-    for (let ix = 0; ix < segmentsX; ix++) {
-      const a = iy * stride + ix;
-      const b = a + 1;
-      const c = a + stride;
-      const d = c + 1;
-      index.push(a, c, b, b, c, d);
-    }
-  }
-  return { positions, normals, uvs, index };
-}
-
-function merge(parts) {
-  const out = { positions: [], normals: [], uvs: [], index: [] };
-  for (const part of parts) {
-    const offset = out.positions.length / 3;
-    out.positions.push(...part.positions);
-    out.normals.push(...part.normals);
-    out.uvs.push(...part.uvs);
-    for (const i of part.index) out.index.push(i + offset);
-  }
-  return out;
-}
-
-export function planeGeometry([width = 1, height = 1, ws = 1, hs = 1] = []) {
-  return grid(ws, hs, (u, v) => [
-    [(u - 0.5) * width, (0.5 - v) * height, 0],
-    [0, 0, 1],
-  ]);
-}
-
-export function boxGeometry([
-  width = 1,
-  height = 1,
-  depth = 1,
-  ws = 1,
-  hs = 1,
-  ds = 1,
-] = []) {
-  // one grid per face, oriented by (right, up, normal) basis vectors
-  const face = (right, up, normal, w, h, segU, segV, offset) =>
-    grid(segU, segV, (u, v) => {
-      const su = (u - 0.5) * w;
-      const sv = (0.5 - v) * h;
-      return [
-        [
-          right[0] * su + up[0] * sv + normal[0] * offset,
-          right[1] * su + up[1] * sv + normal[1] * offset,
-          right[2] * su + up[2] * sv + normal[2] * offset,
-        ],
-        normal,
-      ];
-    });
-
-  const x = width / 2;
-  const y = height / 2;
-  const z = depth / 2;
-  return merge([
-    face([0, 0, 1], [0, 1, 0], [-1, 0, 0], depth, height, ds, hs, x), // -x
-    face([0, 0, -1], [0, 1, 0], [1, 0, 0], depth, height, ds, hs, x), // +x
-    face([1, 0, 0], [0, 0, -1], [0, 1, 0], width, depth, ws, ds, y), // +y
-    face([1, 0, 0], [0, 0, 1], [0, -1, 0], width, depth, ws, ds, y), // -y
-    face([-1, 0, 0], [0, 1, 0], [0, 0, -1], width, height, ws, hs, z), // -z
-    face([1, 0, 0], [0, 1, 0], [0, 0, 1], width, height, ws, hs, z), // +z
-  ]);
-}
-
-export function sphereGeometry([radius = 1, ws = 32, hs = 16] = []) {
-  return grid(ws, hs, (u, v) => {
-    const theta = u * Math.PI * 2;
-    const phi = v * Math.PI;
-    const n = [
-      -Math.sin(phi) * Math.cos(theta),
-      Math.cos(phi),
-      Math.sin(phi) * Math.sin(theta),
-    ];
-    return [[n[0] * radius, n[1] * radius, n[2] * radius], n];
-  });
-}
-
-export function cylinderGeometry([
-  radiusTop = 1,
-  radiusBottom = 1,
-  height = 1,
-  radialSegments = 32,
-  heightSegments = 1,
-  openEnded = false,
-] = []) {
-  const half = height / 2;
-  const slope = (radiusBottom - radiusTop) / height;
-  const side = grid(radialSegments, heightSegments, (u, v) => {
-    const theta = u * Math.PI * 2;
-    const radius = radiusTop + (radiusBottom - radiusTop) * v;
-    const cos = Math.cos(theta);
-    const sin = Math.sin(theta);
-    const len = Math.hypot(1, slope) || 1;
-    return [
-      [radius * sin, half - v * height, radius * cos],
-      [sin / len, slope / len, cos / len],
-    ];
-  });
-  if (openEnded) return side;
-
-  // caps: a triangle fan around the centre, expressed as a 1-segment grid
-  const cap = (radius, y, dir) =>
-    grid(radialSegments, 1, (u, v) => {
-      const theta = u * Math.PI * 2 * dir;
-      const r = v * radius;
-      return [
-        [r * Math.sin(theta), y, r * Math.cos(theta)],
-        [0, dir, 0],
-      ];
-    });
-  const parts = [side];
-  if (radiusTop > 0) parts.push(cap(radiusTop, half, 1));
-  if (radiusBottom > 0) parts.push(cap(radiusBottom, -half, -1));
-  return merge(parts);
-}
-
-export function torusGeometry([
-  radius = 1,
-  tube = 0.4,
-  radialSegments = 12,
-  tubularSegments = 48,
-] = []) {
-  return grid(tubularSegments, radialSegments, (u, v) => {
-    const theta = u * Math.PI * 2;
-    const phi = v * Math.PI * 2;
-    const cx = radius * Math.cos(theta);
-    const cz = radius * Math.sin(theta);
-    const n = [
-      Math.cos(theta) * Math.cos(phi),
-      Math.sin(phi),
-      Math.sin(theta) * Math.cos(phi),
-    ];
-    return [[cx + tube * n[0], tube * n[1], cz + tube * n[2]], n];
-  });
-}
-
-export const GEOMETRY_BUILDERS = {
-  boxGeometry,
-  planeGeometry,
-  sphereGeometry,
-  cylinderGeometry,
-  torusGeometry,
-};
-
-/** `<bufferGeometry position={…} normal={…} uv={…} index={…} />` */
-export function bufferGeometry(props) {
-  const positions = props.position ?? props.positions ?? [];
-  const count = positions.length / 3;
-  let normals = props.normal ?? props.normals;
-  const index = props.index ?? null;
-  if (!normals) normals = faceNormals(positions, index, count);
-  return {
-    positions,
-    normals,
-    uvs: props.uv ?? props.uvs ?? new Array(count * 2).fill(0),
-    index,
-  };
-}
-
-/** Flat normals from the triangles themselves, averaged per vertex. */
-function faceNormals(positions, index, count) {
-  const normals = new Array(count * 3).fill(0);
-  const tri = index ?? Array.from({ length: count }, (_, i) => i);
-  for (let i = 0; i + 2 < tri.length; i += 3) {
-    const [a, b, c] = [tri[i], tri[i + 1], tri[i + 2]];
-    const ax = positions[a * 3];
-    const ay = positions[a * 3 + 1];
-    const az = positions[a * 3 + 2];
-    const ux = positions[b * 3] - ax;
-    const uy = positions[b * 3 + 1] - ay;
-    const uz = positions[b * 3 + 2] - az;
-    const vx = positions[c * 3] - ax;
-    const vy = positions[c * 3 + 1] - ay;
-    const vz = positions[c * 3 + 2] - az;
-    const nx = uy * vz - uz * vy;
-    const ny = uz * vx - ux * vz;
-    const nz = ux * vy - uy * vx;
-    for (const v of [a, b, c]) {
-      normals[v * 3] += nx;
-      normals[v * 3 + 1] += ny;
-      normals[v * 3 + 2] += nz;
-    }
-  }
-  for (let i = 0; i < normals.length; i += 3) {
-    const len = Math.hypot(normals[i], normals[i + 1], normals[i + 2]);
-    if (len > 0) {
-      normals[i] /= len;
-      normals[i + 1] /= len;
-      normals[i + 2] /= len;
-    } else {
-      normals[i + 1] = 1;
-    }
-  }
-  return normals;
-}

package/src/pointer3d.js

@@ -1,158 +0,0 @@
-// 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/raycast3d.js

@@ -1,146 +0,0 @@
-// 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);
-}