@scenoco-three/editor 0.4.0 → 0.5.0

package/app/touchControls.ts

@@ -2,34 +2,48 @@ import { Vector2 } from 'three';
 import type { CameraRig } from './cameraRig.js';
 
 /**
- * Touch navigation for mobile 3D editing (HypeHype-style):
- *   • one finger drag  → pan the camera up/down/left/right (like Q/E/A/D)
- *   • two finger drag  → rotate (look) with the two-finger movement
- *   • two finger pinch → dolly forward / back
+ * Touch navigation, for editing a scene on a phone or tablet:
  *
- * Event-driven (touchmove drives the rig directly); coexists with the desktop
- * controls because both only ever call `rig` verbs.
+ * - **one finger** drags the scene — the camera moves opposite the finger, so whatever is under
+ *   it stays under it
+ * - **two fingers** turn the view by their average movement, and pinch to dolly in and out
+ *
+ * One finger pans rather than orbits because the other half of the editor's one-finger vocabulary
+ * is already spoken for: a tap selects, and a drag on a gizmo handle moves the thing you selected.
+ * Turning is the gesture you reach for least often while placing something, so it gets the
+ * two-finger slot.
+ *
+ * Every motion is scaled by `focusDistance`, which is Unity's trick: a drag covers the same
+ * *screen* distance whether you're an arm's length from a crate or across the level, so the
+ * controls feel the same at every zoom.
+ *
+ * It shares the camera with the desktop controls by construction — both only ever call `rig`
+ * verbs, and the rig is what writes the transform.
  */
 export class TouchControls {
   private readonly points = new Map<number, Vector2>();
-  private prevPinch = 0;
-  // Per-pixel factors, multiplied by the focus distance (Unity-like): drag/dolly
-  // feel the same on screen at any zoom — fine up close, fast when far away.
+  private previousPinch = 0;
+
+  /** Per-pixel rates, multiplied by the focus distance (except look, which is angular). */
   private readonly pan = 0.0016;
   private readonly dolly = 0.005;
   private readonly look = 0.005; // radians per pixel
+
   private detach: Array<() => void> = [];
 
-  constructor(
-    private readonly rig: CameraRig,
-    canvas: HTMLElement,
-    /** When true, a gizmo handle owns the gesture — leave the camera alone. */
-    private readonly isBlocked: () => boolean = () => false,
-  ) {
-    const on = (type: string, fn: (e: TouchEvent) => void) => {
-      const h = fn as EventListener;
-      canvas.addEventListener(type, h, { passive: false });
-      this.detach.push(() => canvas.removeEventListener(type, h));
+  private readonly rig: CameraRig;
+  /** True while a gizmo handle owns the gesture — the camera stays out of it. */
+  private readonly isBlocked: () => boolean;
+
+  constructor(rig: CameraRig, canvas: HTMLElement, isBlocked: () => boolean = () => false) {
+    this.rig = rig;
+    this.isBlocked = isBlocked;
+    const on = (type: string, handler: (event: TouchEvent) => void): void => {
+      const listener = handler as EventListener;
+      // Not passive: these gestures have to beat the browser's own pan/zoom, and it only
+      // honours `preventDefault` from a listener that said up front it might call it.
+      canvas.addEventListener(type, listener, { passive: false });
+      this.detach.push(() => canvas.removeEventListener(type, listener));
     };
     on('touchstart', this.onStart);
     on('touchmove', this.onMove);
@@ -37,59 +51,68 @@ export class TouchControls {
     on('touchcancel', this.onEnd);
   }
 
-  private onStart = (e: TouchEvent): void => {
-    e.preventDefault();
-    for (const t of Array.from(e.changedTouches)) this.points.set(t.identifier, new Vector2(t.clientX, t.clientY));
-    this.prevPinch = this.pinchDistance();
+  private onStart = (event: TouchEvent): void => {
+    for (const touch of Array.from(event.changedTouches)) {
+      this.points.set(touch.identifier, new Vector2(touch.clientX, touch.clientY));
+    }
+    this.previousPinch = this.pinchDistance();
   };
 
-  private onMove = (e: TouchEvent): void => {
-    // A single finger dragging a gizmo handle also emits touch events — yield it.
+  private onMove = (event: TouchEvent): void => {
+    // A finger dragging a gizmo handle emits touch events too — that gesture belongs to the
+    // gizmo, and the camera must hold still under it or the drag fights the view.
     if (this.points.size === 1 && this.isBlocked()) return;
-    e.preventDefault();
-    const k = this.rig.focusDistance;
+    event.preventDefault();
+    const scale = this.rig.focusDistance;
+
     if (this.points.size === 1) {
-      // One finger → drag the scene: the camera moves *opposite* the finger so the
-      // grabbed point follows it. Scaled by focus distance.
-      for (const t of Array.from(e.touches)) {
-        const prev = this.points.get(t.identifier);
-        if (!prev) continue;
-        this.rig.move(-(t.clientX - prev.x) * this.pan * k, (t.clientY - prev.y) * this.pan * k, 0);
-        prev.set(t.clientX, t.clientY);
-      }
-    } else if (this.points.size >= 2) {
-      // Two fingers → rotate by the average movement, dolly by the pinch change.
-      let dx = 0;
-      let dy = 0;
-      let n = 0;
-      for (const t of Array.from(e.touches)) {
-        const prev = this.points.get(t.identifier);
-        if (!prev) continue;
-        dx += t.clientX - prev.x;
-        dy += t.clientY - prev.y;
-        prev.set(t.clientX, t.clientY);
-        n++;
+      for (const touch of Array.from(event.touches)) {
+        const previous = this.points.get(touch.identifier);
+        if (!previous) continue;
+        this.rig.move(
+          -(touch.clientX - previous.x) * this.pan * scale,
+          (touch.clientY - previous.y) * this.pan * scale,
+          0,
+        );
+        previous.set(touch.clientX, touch.clientY);
       }
-      if (n > 0) this.rig.rotate((-dx / n) * this.look, (-dy / n) * this.look);
+      return;
+    }
 
-      const pinch = this.pinchDistance();
-      if (this.prevPinch > 0) {
-        const forward = (pinch - this.prevPinch) * this.dolly * k;
-        this.rig.move(0, 0, forward);
-        this.rig.focusDistance = Math.max(0.1, this.rig.focusDistance - forward); // dollied closer → finer
-      }
-      this.prevPinch = pinch;
+    let dx = 0;
+    let dy = 0;
+    let moved = 0;
+    for (const touch of Array.from(event.touches)) {
+      const previous = this.points.get(touch.identifier);
+      if (!previous) continue;
+      dx += touch.clientX - previous.x;
+      dy += touch.clientY - previous.y;
+      previous.set(touch.clientX, touch.clientY);
+      moved++;
+    }
+    // The *average* of the two fingers, so a pinch — where they travel opposite ways — cancels
+    // out and dollies without also swinging the view around.
+    if (moved > 0) this.rig.rotate((-dx / moved) * this.look, (-dy / moved) * this.look);
+
+    const pinch = this.pinchDistance();
+    if (this.previousPinch > 0) {
+      const forward = (pinch - this.previousPinch) * this.dolly * scale;
+      this.rig.move(0, 0, forward);
+      // Closer in means finer control, the same way the wheel tunes fly speed on desktop.
+      this.rig.focusDistance = Math.max(0.1, this.rig.focusDistance - forward);
     }
+    this.previousPinch = pinch;
   };
 
-  private onEnd = (e: TouchEvent): void => {
-    for (const t of Array.from(e.changedTouches)) this.points.delete(t.identifier);
-    this.prevPinch = this.pinchDistance();
+  private onEnd = (event: TouchEvent): void => {
+    for (const touch of Array.from(event.changedTouches)) this.points.delete(touch.identifier);
+    // Lifting one of two fingers must not read as a huge pinch on the next move.
+    this.previousPinch = this.pinchDistance();
   };
 
   private pinchDistance(): number {
-    const pts = [...this.points.values()];
-    return pts.length >= 2 ? pts[0]!.distanceTo(pts[1]!) : 0;
+    const [a, b] = [...this.points.values()];
+    return a && b ? a.distanceTo(b) : 0;
   }
 
   dispose(): void {
@@ -98,7 +121,7 @@ export class TouchControls {
   }
 }
 
-/** True on a touch-capable device. */
+/** True on a device that can be touched — which is what decides fat gizmo handles. */
 export function isTouchDevice(): boolean {
-  return typeof window !== 'undefined' && ('ontouchstart' in window || (navigator.maxTouchPoints ?? 0) > 0);
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
 }

package/app/ui-react/AddMemberPopup.tsx

@@ -0,0 +1,114 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { X } from 'lucide-react';
+import { getDeps, useUI } from './store.js';
+import { cx } from './cx.js';
+import styles from './ui.module.css';
+
+/** One offerable tag with the registry description shown beside it. */
+interface Candidate {
+  tag: string;
+  description: string;
+}
+
+/**
+ * The "add component" picker: a centred modal with a case-insensitive filter over name and
+ * description.
+ *
+ * What it offers is every component class the project declares, read from `ProjectModel` — which
+ * is read from the source. v1 asked a runtime registry that decorators populated, so a component
+ * only appeared here if it had been registered; a class is the registration now.
+ *
+ * There is no attachment half any more: a geometry and a material are assets a mesh points at,
+ * so they are attributes rather than members to add.
+ */
+export function AddMemberPopup(): React.JSX.Element | null {
+  const adding = useUI((s) => s.adding);
+  const closeAdd = useUI((s) => s.closeAdd);
+  useUI((s) => s.rev);
+  const [query, setQuery] = useState('');
+  const input = useRef<HTMLInputElement>(null);
+
+  // Reopening for a different target starts from an empty filter.
+  useEffect(() => {
+    if (adding) {
+      setQuery('');
+      input.current?.focus();
+    }
+  }, [adding]);
+
+  const candidates = useMemo(() => (adding ? offerings() : []), [adding]);
+  if (!adding) return null;
+
+  const needle = query.trim().toLowerCase();
+  const matches = needle
+    ? candidates.filter((c) => c.tag.toLowerCase().includes(needle) || c.description.toLowerCase().includes(needle))
+    : candidates;
+
+  const { getDoc } = getDeps();
+  const add = (tag: string): void => {
+    getDoc()?.addComponent(adding, tag);
+    closeAdd();
+    useUI.getState().bump(); // re-read the inspector against the new member
+  };
+
+  const label = 'Add component';
+  return (
+    // Clicking the backdrop dismisses; clicks inside must not bubble to it.
+    <div className={styles.modalBackdrop} onClick={closeAdd}>
+      <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
+        <div className={styles.modalHead}>
+          <span className={styles.title}>{label}</span>
+          <button type="button" className={styles.clearBtn} title="Close" aria-label="Close" onClick={closeAdd}>
+            <X />
+          </button>
+        </div>
+        <input
+          ref={input}
+          type="text"
+          className={cx(styles.input, styles.modalFilter)}
+          placeholder="Filter…"
+          value={query}
+          autoFocus
+          onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Escape') closeAdd();
+            // Enter commits the only remaining match — the fast path once you've typed.
+            if (e.key === 'Enter' && matches.length === 1) add(matches[0]!.tag);
+          }}
+        />
+        <div className={styles.modalList}>
+          {matches.length === 0 ? (
+            <div className={styles.empty}>
+              {candidates.length === 0
+                ? 'This project declares no components yet.'
+                : 'Nothing matches that filter.'}
+            </div>
+          ) : (
+            matches.map((c) => (
+              <button key={c.tag} type="button" className={styles.modalItem} onClick={() => add(c.tag)}>
+                <span className={styles.modalItemTag}>{c.tag}</span>
+                <span className={styles.modalItemDesc}>{c.description}</span>
+              </button>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** What this node may still receive, straight from the registry. */
+/**
+ * Every component the project declares.
+ *
+ * A component with a `requiresNode` — `class Flicker extends Component<PointLight>` — is only
+ * offered on a node it can actually work on. Almost none declare one: like a MonoBehaviour on a
+ * GameObject, a component goes on anything, and the constraint exists for the rare one that
+ * reads a host-specific member.
+ */
+function offerings(): Candidate[] {
+  const model = getDeps().getModel();
+  return (model?.components ?? [])
+    .map((c) => ({ tag: c.name, description: c.description ?? '' }))
+    .sort((a, b) => a.tag.localeCompare(b.tag));
+}

package/app/ui-react/BottomLauncher.tsx

@@ -0,0 +1,15 @@
+import { ListTree } from 'lucide-react';
+import { useUI } from './store.js';
+import styles from './ui.module.css';
+
+/** The small bottom-right button that opens the node list. Hidden while it's open. */
+export function BottomLauncher(): React.JSX.Element | null {
+  const nodesOpen = useUI((s) => s.nodesOpen);
+  const openNodes = useUI((s) => s.openNodes);
+  if (nodesOpen) return null;
+  return (
+    <button className={styles.launcher} title="Node list" aria-label="Node list" onClick={openNodes}>
+      <ListTree />
+    </button>
+  );
+}

package/app/ui-react/EditorUI.tsx

@@ -0,0 +1,22 @@
+import { TopBar } from './TopBar.js';
+import { BottomLauncher } from './BottomLauncher.js';
+import { NodeListSheet } from './NodeListSheet.js';
+import { InspectorSheet } from './InspectorSheet.js';
+import { AddMemberPopup } from './AddMemberPopup.js';
+import { FilePicker } from './FilePicker.js';
+
+/** The whole editor chrome: a responsive top bar, a bottom launcher, the two bottom sheets
+ *  (node list + inspector), and the open dialog that stands in for all of it until a document
+ *  is open. */
+export function EditorUI(): React.JSX.Element {
+  return (
+    <>
+      <TopBar />
+      <BottomLauncher />
+      <NodeListSheet />
+      <InspectorSheet />
+      <AddMemberPopup />
+      <FilePicker />
+    </>
+  );
+}

package/app/ui-react/FilePicker.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useState } from 'react';
+import { getDeps, useUI } from './store.js';
+import styles from './ui.module.css';
+
+/** A document the picker offers — the scenes and prefabs the server found in the project. */
+interface Pickable {
+  kind: string;
+  /** Project-relative path, which is what `open` takes. */
+  path: string;
+  /** File name without its kind suffix — `main` from `main.scene.xml`. */
+  stem: string;
+}
+
+/** Only these two are a thing to *open*: the rest are referenced by path from inside one. */
+const OPENABLE = new Set(['scene', 'prefab']);
+
+/**
+ * The start-up open dialog, shown whenever no document is open — which is what a bare
+ * `scenoco-editor` means.
+ *
+ * Opening the first scene it happened to find instead would be a guess, and a wrong one in any
+ * project with more than one scene: the editor would come up on something the person has to
+ * navigate away from, with no way to see what else there is.
+ */
+export function FilePicker(): React.JSX.Element | null {
+  useUI((s) => s.rev); // an open (or a failed one) changes whether this shows at all
+  const { getDoc, listDocuments, openDocument } = getDeps();
+  const [files, setFiles] = useState<Pickable[] | null>(null);
+  const [failed, setFailed] = useState<string | null>(null);
+  const open = getDoc() !== undefined;
+
+  useEffect(() => {
+    if (open) return;
+    let live = true;
+    void listDocuments().then(
+      (all) => live && setFiles(all.filter((f) => OPENABLE.has(f.kind))),
+      () => live && setFiles([]),
+    );
+    return () => {
+      live = false;
+    };
+  }, [open, listDocuments]);
+
+  if (open) return null;
+
+  const pick = (file: Pickable): void => {
+    setFailed(null);
+    void openDocument(file.path).catch((error: unknown) =>
+      setFailed(error instanceof Error ? error.message : String(error)),
+    );
+  };
+
+  return (
+    <div className={styles.modalBackdrop}>
+      <div className={styles.modal}>
+        <div className={styles.modalHead}>
+          <span className={styles.title}>Open a document</span>
+        </div>
+        <div className={styles.modalList}>
+          {files === null ? (
+            <div className={styles.empty}>Scanning the project…</div>
+          ) : files.length === 0 ? (
+            <div className={styles.empty}>No .scene.xml or .prefab.xml documents in this project.</div>
+          ) : (
+            files.map((file) => (
+              <button key={file.path} type="button" className={styles.modalItem} onClick={() => pick(file)}>
+                <span className={styles.modalItemTag}>
+                  {file.stem}
+                  <span className={styles.pickKind}>{file.kind}</span>
+                </span>
+                <span className={styles.modalItemDesc}>{file.path}</span>
+              </button>
+            ))
+          )}
+          {failed !== null && <div className={styles.empty}>{failed}</div>}
+        </div>
+      </div>
+    </div>
+  );
+}

package/app/ui-react/HeadBtn.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import styles from './ui.module.css';
+
+/** An icon button in a sheet header (actions row / close). */
+export function HeadBtn({
+  label,
+  onClick,
+  disabled,
+  children,
+}: {
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+  children: ReactNode;
+}): React.JSX.Element {
+  return (
+    <button className={styles.headBtn} title={label} aria-label={label} onClick={onClick} disabled={disabled}>
+      {children}
+    </button>
+  );
+}