react-x11 0.0.1 → 1.2.0

package/src/geometry3d.js

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

@@ -0,0 +1,275 @@
+// <glarea>: the one drawn element that owns a real X window.
+//
+// GLX needs a drawable created for a GL-capable visual, and GL output cannot
+// share the parent window's XRender pipeline — so this is a child X window
+// (NEXT_STEPS §4), sized and positioned by the parent's yoga layout like any
+// other drawn node. Everything about the surface is here; the scene graph
+// that draws into it comes later (docs/glx-plan.md).
+import { cssColor } from 'ntk';
+
+import { Node } from './nodes.js';
+import { ScenePointer, sceneWantsPointer } from './pointer3d.js';
+import { SceneRenderer } from './scene3d.js';
+
+// One visual query per (app, spec): GetFBConfigs is a round trip and every
+// <glarea> in an app wants the same answer.
+const configCache = new WeakMap();
+
+export function glxConfig(app, spec) {
+  const key = JSON.stringify(spec ?? null);
+  let perApp = configCache.get(app);
+  if (!perApp) configCache.set(app, (perApp = new Map()));
+  let promise = perApp.get(key);
+  if (!promise) {
+    promise =
+      typeof app.chooseGLXConfig === 'function'
+        ? app.chooseGLXConfig(spec)
+        : Promise.reject(
+            new Error(
+              'react-x11: <glarea> needs ntk >= 3.6.0 (app.chooseGLXConfig)',
+            ),
+          );
+    perApp.set(key, promise);
+  }
+  return promise;
+}
+
+/** clearColor as a CSS string or an [r, g, b, a] float tuple. */
+function clearColorOf(props) {
+  const value = props.clearColor ?? 'black';
+  if (Array.isArray(value)) return value.length === 4 ? value : [...value, 1];
+  const parsed = cssColor(value);
+  return parsed ?? [0, 0, 0, 1];
+}
+
+const px = (v) => Math.max(1, Math.round(v || 0));
+
+/**
+ * `<glarea>` — an OpenGL surface in the layout.
+ *
+ * ```jsx
+ * <glarea flexGrow={1} clearColor="#0b1021" frameLoop="always"
+ *         onDraw={(gl, { width, height }) => { ... }} />
+ * ```
+ *
+ * Props: layout props as usual, plus
+ * - `onDraw(gl, { width, height, node })` — draw a frame. The viewport and
+ *   the clear are already done; `SwapBuffers` follows.
+ * - `onCreated(gl, { width, height, node })` — once, when the context is
+ *   current: one-time GL state (`Enable(DEPTH_TEST)`, display lists).
+ * - `clearColor` — CSS colour or `[r, g, b, a]` floats (default black).
+ * - `frameLoop` — `'demand'` (default: redraw on prop/size/expose changes)
+ *   or `'always'` (drive ntk's frame clock continuously).
+ * - `glx` — a `chooseGLXConfig` spec, e.g. `{ DEPTH_SIZE: 24 }`.
+ *
+ * The X child window is stacked above everything drawn in the parent, so 2D
+ * content cannot overlap it — put HUD content in a sibling `<popup>`.
+ */
+export class GlAreaNode extends Node {
+  constructor(props, app) {
+    super('glarea', props, app);
+    this.window = null;
+    this.gl = null;
+    this.rect = null; // geometry last sent to the X window
+    this._realizing = false;
+    this._frameScheduled = false;
+    this._created = false;
+    this.scene = new SceneRenderer(this);
+    this.pointer = new ScenePointer(this);
+    this._pointerDirty = true;
+  }
+
+  get isGlArea() {
+    return true;
+  }
+
+  _setRoot(root) {
+    super._setRoot(root);
+    // the owning window may already exist (a <glarea> mounted into a live
+    // tree); otherwise WindowNode.realize picks the subtree up
+    if (root?.window) this.realize();
+  }
+
+  /** Create the GL child window. Async: the visual comes from the server. */
+  realize() {
+    if (this.window || this.destroyed || this._realizing) return;
+    const parent = this.root?.window;
+    if (!parent || typeof this.app?.createWindow !== 'function') return;
+    this._realizing = true;
+    glxConfig(this.app, this.props.glx).then(
+      (config) => {
+        this._realizing = false;
+        if (this.destroyed || this.window) return;
+        this._create(config, parent);
+      },
+      (err) => {
+        this._realizing = false;
+        this.error = err;
+        this.props.onError?.(err);
+        if (!this.props.onError) {
+          console.warn(`react-x11: <glarea> has no GL surface: ${err.message}`);
+        }
+      },
+    );
+  }
+
+  _create(config, parent) {
+    const rect = this._geometry();
+    const wnd = this.app.createWindow({
+      parent,
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height,
+      visual: config.visual,
+      depth: config.depth,
+      // GL draws into the window itself: no 2d backing pixmap, and the
+      // frame clock is ours to drive
+      backingStore: false,
+    });
+    this.window = wnd;
+    this.rect = rect;
+    this.config = config;
+    wnd._reactX11Node = this;
+    this.gl = wnd.getContext('opengl', config);
+    wnd.on?.('expose', () => this.requestFrame());
+    wnd.map?.();
+    this.requestFrame();
+  }
+
+  _geometry() {
+    return {
+      x: Math.round(this.abs.x),
+      y: Math.round(this.abs.y),
+      width: px(this.abs.width),
+      height: px(this.abs.height),
+    };
+  }
+
+  absolutize(originX, originY) {
+    super.absolutize(originX, originY);
+    this._syncGeometry();
+  }
+
+  _syncGeometry() {
+    const wnd = this.window;
+    if (!wnd) return;
+    const rect = this._geometry();
+    const prev = this.rect;
+    if (
+      prev &&
+      prev.x === rect.x &&
+      prev.y === rect.y &&
+      prev.width === rect.width &&
+      prev.height === rect.height
+    ) {
+      return;
+    }
+    this.rect = rect;
+    if (typeof wnd.setState === 'function') wnd.setState(rect);
+    else {
+      wnd.move?.(rect.x, rect.y);
+      wnd.resize?.(rect.width, rect.height);
+    }
+    this.requestFrame();
+  }
+
+  /** Draw one frame on the child window's next frame tick. */
+  requestFrame() {
+    if (!this.window || this.destroyed || this._frameScheduled) return;
+    this._frameScheduled = true;
+    const schedule =
+      typeof this.window.requestAnimationFrame === 'function'
+        ? (cb) => this.window.requestAnimationFrame(cb)
+        : (cb) => setImmediate(cb);
+    schedule(() => {
+      this._frameScheduled = false;
+      this._drawFrame();
+    });
+  }
+
+  _drawFrame() {
+    const gl = this.gl;
+    if (!gl || this.destroyed) return;
+    const { width, height } = this.rect;
+    const info = { width, height, node: this };
+    if (!this._created) {
+      this._created = true;
+      this.props.onCreated?.(gl, info);
+    }
+    this._syncPointerListeners();
+    gl.Viewport(0, 0, width, height);
+    const [r, g, b, a] = clearColorOf(this.props);
+    gl.ClearColor(r, g, b, a);
+    gl.Clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    this.scene.render(gl, info);
+    this.props.onDraw?.(gl, info);
+    gl.SwapBuffers();
+    if (this.props.frameLoop === 'always') this.requestFrame();
+  }
+
+  applyProps(newProps, oldProps) {
+    super.applyProps(newProps, oldProps);
+    // onDraw/clearColor are read at frame time, so any update is a new frame
+    this.requestFrame();
+  }
+
+  setHidden(hidden) {
+    super.setHidden(hidden);
+    if (hidden) this.window?.unmap?.();
+    else this.window?.map?.();
+  }
+
+  /**
+   * X pointer events are only worth selecting when something in the scene
+   * listens for them — the r3f rule that only handler-bearing objects take
+   * part in picking, applied one level up, to the wire.
+   */
+  _syncPointerListeners() {
+    if (!this._pointerDirty || !this.window || this.pointer.attached) return;
+    this._pointerDirty = false;
+    if (!sceneWantsPointer(this.children)) return;
+    this.pointer.attach(this.window);
+  }
+
+  /** A scene node was added, removed, or gained/lost pointer handlers. */
+  _sceneChanged() {
+    this._pointerDirty = true;
+    this.requestFrame();
+  }
+
+  /** scene children (<mesh>, <group>, …) attach to this surface. */
+  insertBefore(child, beforeChild) {
+    super.insertBefore(child, beforeChild);
+    child._setSurface?.(this);
+    this._sceneChanged();
+  }
+
+  removeChild(child) {
+    super.removeChild(child);
+    this.invalidateGeometry(child);
+    this.pointer.forget(child);
+    this._sceneChanged();
+  }
+
+  /** A removed geometry's display list is no longer needed server-side. */
+  invalidateGeometry(node) {
+    if (!node) return;
+    if (node.isGeometry) this.scene.forget(this.gl, node);
+    for (const child of node.children ?? []) this.invalidateGeometry(child);
+  }
+
+  // the child window covers this rect: nothing to paint into the parent's
+  // 2d context, and no drawn children are allowed under it
+  paint() {}
+
+  destroySubtree() {
+    if (this.destroyed) return;
+    super.destroySubtree();
+    this.scene.dispose(this.gl);
+    this.gl?.destroy?.();
+    this.gl = null;
+    this.window?.destroy?.();
+    this.window = null;
+  }
+}

package/src/index.js

@@ -0,0 +1,30 @@
+export {
+  render,
+  createRoot,
+  unmountComponentAtNode,
+  Renderer,
+} from './Reconciler.js';
+export {
+  Select,
+  SelectThemeProvider,
+  ThemeProvider,
+  Button,
+  Checkbox,
+  Radio,
+  RadioGroup,
+  Switch,
+  ProgressBar,
+  Slider,
+  Tooltip,
+  Dialog,
+  MenuBar,
+  ContextMenu,
+  useAnchor,
+  anchorRect,
+  centerRect,
+  Canvas3D,
+} from './components/index.js';
+
+import { render, createRoot, unmountComponentAtNode } from './Reconciler.js';
+
+export default { render, createRoot, unmountComponentAtNode };