@scenoco-three/editor 0.5.4 → 0.6.0

package/app/touchControls.ts

@@ -1,127 +0,0 @@
-import { Vector2 } from 'three';
-import type { CameraRig } from './cameraRig.js';
-
-/**
- * Touch navigation, for editing a scene on a phone or tablet:
- *
- * - **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 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> = [];
-
-  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);
-    on('touchend', this.onEnd);
-    on('touchcancel', this.onEnd);
-  }
-
-  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 = (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;
-    event.preventDefault();
-    const scale = this.rig.focusDistance;
-
-    if (this.points.size === 1) {
-      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);
-      }
-      return;
-    }
-
-    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 = (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 [a, b] = [...this.points.values()];
-    return a && b ? a.distanceTo(b) : 0;
-  }
-
-  dispose(): void {
-    for (const off of this.detach) off();
-    this.detach = [];
-  }
-}
-
-/** True on a device that can be touched — which is what decides fat gizmo handles. */
-export function isTouchDevice(): boolean {
-  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
-}

package/app/ui-react/AddMemberPopup.tsx

@@ -1,114 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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

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