@scenoco-three/editor 0.4.0 → 0.5.0

package/app/editLog.ts

@@ -0,0 +1,127 @@
+import type { Edit } from './document.js';
+
+/** One reversible step. `redo` is replaced rather than appended while a drag coalesces. */
+interface Step {
+  label: string;
+  undo: () => void;
+  redo: () => void;
+}
+
+/**
+ * The undo stack, the pending splices, and who to tell when either changes.
+ *
+ * Split out of `SceneDocument` because they are two objects: one answers *what the document
+ * says* — which element built this node, what may be edited, what an attribute reads as — and
+ * this one answers *what has changed since it was opened*. They were one class of forty-eight
+ * methods, and the half you were reading was never the half you wanted.
+ *
+ * Every step is a pair of closures the document supplies, so this knows nothing about XML,
+ * elements or the live scene: it decides only when a change is recorded, folded into the
+ * previous one, or reversed.
+ */
+export class EditLog {
+  private readonly pending: Edit[] = [];
+  private readonly undoStack: Step[] = [];
+  private redoStack: Step[] = [];
+  private readonly listeners = new Set<() => void>();
+  private saved = true;
+
+  /** Everything not yet written to disk. */
+  get edits(): readonly Edit[] {
+    return this.pending;
+  }
+
+  get canUndo(): boolean {
+    return this.undoStack.length > 0;
+  }
+
+  get canRedo(): boolean {
+    return this.redoStack.length > 0;
+  }
+
+  get isDirty(): boolean {
+    return !this.saved;
+  }
+
+  /**
+   * Record one change.
+   *
+   * `coalesce` folds it into the previous step when it touches the same thing, so a gizmo drag
+   * that produced two hundred edits undoes in one.
+   */
+  commit(label: string, apply: () => void, revert: () => void, coalesce: boolean): void {
+    const previous = this.undoStack[this.undoStack.length - 1];
+    apply();
+    if (coalesce && previous?.label === label) {
+      previous.redo = apply;
+    } else {
+      this.undoStack.push({ label, undo: revert, redo: apply });
+    }
+    this.redoStack = [];
+    this.saved = false;
+    this.emit();
+  }
+
+  /** Record a splice with nothing to apply to the live scene — a structural edit. */
+  push(edit: Edit, label: string): void {
+    this.commit(
+      label,
+      () => this.pending.push(edit),
+      () => this.pending.pop(),
+      false,
+    );
+  }
+
+  /**
+   * Queue an attribute write, replacing any pending write to the same attribute.
+   *
+   * The **last** write to one attribute wins, so a scrubbed number leaves one edit rather than
+   * one per pixel — the file is written once, and the diff shows the value that survived.
+   */
+  replaceAttribute(edit: Extract<Edit, { op: 'setAttribute' }>): void {
+    const index = this.pending.findIndex(
+      (e) =>
+        e.op === 'setAttribute' &&
+        e.at.line === edit.at.line &&
+        e.at.column === edit.at.column &&
+        e.name === edit.name,
+    );
+    if (index !== -1) this.pending.splice(index, 1);
+    this.pending.push(edit);
+  }
+
+  undo(): void {
+    const step = this.undoStack.pop();
+    if (!step) return;
+    step.undo();
+    this.redoStack.push(step);
+    this.saved = false;
+    this.emit();
+  }
+
+  redo(): void {
+    const step = this.redoStack.pop();
+    if (!step) return;
+    step.redo();
+    this.undoStack.push(step);
+    this.saved = false;
+    this.emit();
+  }
+
+  /** The file has been written: nothing is pending and nothing is undoable past this point. */
+  clear(): void {
+    this.pending.length = 0;
+    this.undoStack.length = 0;
+    this.redoStack = [];
+    this.saved = true;
+  }
+
+  onChange(listener: () => void): () => void {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  emit(): void {
+    for (const listener of this.listeners) listener();
+  }
+}

package/app/editor.css

@@ -0,0 +1,51 @@
+/*
+ * The page shell and the theme.
+ *
+ * `ui.module.css` styles the chrome and reads these three variables for every panel — so they
+ * have to be defined here, on `:root`, not inside the module: a CSS Module hashes class names but
+ * a custom property still resolves through the cascade, and an undefined `var(--line)` is not an
+ * error. It silently paints nothing, which is exactly how every panel border went missing.
+ */
+:root {
+  color-scheme: dark;
+  /* Translucent, because a panel floats over the viewport and the scene behind it is context. */
+  --panel: rgba(20, 24, 32, 0.92);
+  --line: #2a3344;
+  /* A panel floats over the scene, so its outline has to hold against whatever is behind it —
+     brighter than `--line`, which divides rows *inside* a panel and should stay quiet. */
+  --edge: #3d4b64;
+  --accent: #4af0e0;
+}
+
+* { box-sizing: border-box; }
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+  background: #15181f;
+  color: #d6e2f0;
+  font: 13px/1.5 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+}
+
+#viewport {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  touch-action: none;
+}
+
+/*
+ * The chrome overlays the viewport but lets pointer events fall through to the canvas; each
+ * panel re-enables them on its own surface. Otherwise an invisible full-screen div would eat
+ * every click meant for the scene.
+ */
+#sc-ui {
+  position: fixed;
+  inset: 0;
+  z-index: 5;
+  pointer-events: none;
+}

package/app/gizmo.ts

@@ -1,8 +1,21 @@
-import type { Camera, Object3D, Scene } from 'three';
+import { Quaternion, Vector3, type Camera, type Object3D, type Scene } from 'three';
 import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
 
 export type GizmoMode = 'translate' | 'rotate' | 'scale';
 
+/** Which axes the handles follow: the world's, or the object's own. */
+export type GizmoSpace = 'world' | 'local';
+
+/**
+ * How far the pointer must travel before a press on a handle counts as a drag.
+ *
+ * No click is perfectly still — a real mouse moves a pixel or two between down and up — and
+ * `TransformControls` applies every one of those pixels. Without a threshold, clicking an object
+ * in scale mode quietly resizes it by a fraction of a percent, which is invisible on screen and
+ * permanent in the document: the file gains a `scale` attribute nobody asked for.
+ */
+const DRAG_THRESHOLD = 3;
+
 export interface GizmoOptions {
   /** Live refresh while dragging (e.g. update the inspector numbers). */
   onObjectChange?: () => void;
@@ -24,26 +37,84 @@ export class Gizmo {
   private readonly controls: TransformControls;
   private readonly helper: Object3D;
 
+  private readonly scene: Scene;
+
+  /** Where the press started, while one is in progress. */
+  private pressedAt: { x: number; y: number } | null = null;
+  /** True once a press has travelled far enough to be a drag. */
+  private travelled = false;
+  /** The attached object's transform at the moment of the press, to put back after a click. */
+  private readonly grabbed = {
+    position: new Vector3(),
+    quaternion: new Quaternion(),
+    scale: new Vector3(),
+    /** Kept alongside the quaternion because it is the form the document writes. */
+    eulerAngles: new Vector3(),
+  };
+
   constructor(
     camera: Camera,
     domElement: HTMLElement,
-    private readonly scene: Scene,
+    scene: Scene,
     touch: boolean,
     opts: GizmoOptions = {},
   ) {
+    this.scene = scene;
     this.controls = new TransformControls(camera, domElement);
     this.controls.setSize(touch ? 1.4 : 1); // fat-finger handles on touch
     this.helper = this.controls.getHelper();
     this.helper.userData.scenocoEditorOnly = true; // keep it out of the Hierarchy + picking
     scene.add(this.helper);
 
-    this.controls.addEventListener('objectChange', () => opts.onObjectChange?.());
+    domElement.addEventListener('pointerdown', (event) => {
+      this.pressedAt = { x: event.clientX, y: event.clientY };
+      this.travelled = false;
+    });
+    domElement.addEventListener('pointermove', (event) => {
+      if (!this.pressedAt || this.travelled) return;
+      this.travelled = Math.hypot(event.clientX - this.pressedAt.x, event.clientY - this.pressedAt.y) > DRAG_THRESHOLD;
+    });
+
+    // A press that never travelled changed nothing the user meant to change, so the object goes
+    // back to where it was grabbed and the document never hears about it.
+    this.controls.addEventListener('objectChange', () => {
+      if (this.travelled) opts.onObjectChange?.();
+    });
     this.controls.addEventListener('dragging-changed', (e) => {
       // Fired true at drag start, false at drag end.
-      if (!e.value && this.controls.object) opts.onCommit?.(this.controls.object);
+      const object = this.controls.object;
+      if (!object) return;
+      if (e.value) {
+        this.grabbed.position.copy(object.position);
+        this.grabbed.quaternion.copy(object.quaternion);
+        this.grabbed.scale.copy(object.scale);
+        this.grabbed.eulerAngles.copy(object.eulerAngles);
+        return;
+      }
+      this.pressedAt = null;
+      if (this.travelled) opts.onCommit?.(object);
+      else {
+        object.position.copy(this.grabbed.position);
+        object.quaternion.copy(this.grabbed.quaternion);
+        object.scale.copy(this.grabbed.scale);
+      }
     });
   }
 
+  /**
+   * The attached object's value for one channel as it was when the drag began.
+   *
+   * Undo needs this and cannot work it out later. By the time the first edit is recorded the
+   * object has already moved — the write happens *because* it moved — so a "before" captured
+   * there is a frame late. For a channel the document writes, undo restores the text and the
+   * error never shows; for one it does not write (a rotation left at zero, a scale left at one,
+   * which is most of them) there is nothing to restore from, and the object is left wherever
+   * that first frame put it.
+   */
+  grabbedValue(channel: 'position' | 'eulerAngles' | 'scale'): Vector3 {
+    return this.grabbed[channel];
+  }
+
   /** True while a handle is being dragged — camera controls check this to yield. */
   get dragging(): boolean {
     return this.controls.dragging;
@@ -56,12 +127,35 @@ export class Gizmo {
     return this.controls.mode as GizmoMode;
   }
 
+  /**
+   * Whether the handles line up with the world's axes or the object's own — Unity's
+   * Global/Local button.
+   *
+   * It changes what a drag means, not just how it looks: dragging the green arrow moves a node
+   * along world Y in one space and along its own up in the other, and for anything rotated the
+   * two are different edits.
+   */
+  setSpace(space: GizmoSpace): void {
+    this.controls.setSpace(space);
+  }
+  get space(): GizmoSpace {
+    return this.controls.space as GizmoSpace;
+  }
+
+  /**
+   * Point the handles at an object — never at the handles themselves.
+   *
+   * Attaching the control to its own helper makes the helper its own parent's target: three walks
+   * `updateMatrixWorld` between the two for ever and the page dies on a stack overflow. It is one
+   * mis-routed pick away, and there is no legitimate reason to aim a gizmo at a gizmo, so it is
+   * refused here rather than trusted to every caller.
+   */
   attach(object: Object3D | null): void {
-    if (object) this.controls.attach(object);
+    if (object && !this.contains(object)) this.controls.attach(object);
     else this.controls.detach();
   }
 
-  /** True if `object` is part of the gizmo's own helper (so picks can ignore it). */
+  /** True if `object` is part of the gizmo's own helper. */
   contains(object: Object3D): boolean {
     for (let o: Object3D | null = object; o; o = o.parent) if (o === this.helper) return true;
     return false;

package/app/index.html

@@ -2,129 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>SceNoCo Editor</title>
-    <style>
-      html, body { margin: 0; height: 100%; background: #15181f; overflow: hidden; color: #d6e2f0; }
-      canvas { display: block; width: 100%; height: 100%; }
-      :root { --panel: rgba(20, 24, 32, 0.92); --line: #2a3344; --accent: #4af0e0; }
-      /* Each side is a slide-out drawer: a panel + a thin arrow tab that stays on
-         screen when collapsed. */
-      .sc-drawer { position: fixed; top: 0; bottom: 0; z-index: 5; display: flex;
-        transition: transform 0.22s ease; }
-      .sc-left { left: 0; }
-      .sc-right { right: 0; }
-      .sc-left.collapsed { transform: translateX(calc(-100% + 22px)); }
-      .sc-right.collapsed { transform: translateX(calc(100% - 22px)); }
-      .sc-panel {
-        width: 280px; height: 100%; background: var(--panel); overflow: auto;
-        font: 12px/1.5 ui-monospace, monospace; backdrop-filter: blur(6px);
-      }
-      .sc-left .sc-panel { border-right: 1px solid var(--line); }
-      .sc-right .sc-panel { border-left: 1px solid var(--line); }
-      .sc-tab {
-        flex: 0 0 22px; background: var(--panel); color: #9fe7ff; cursor: pointer;
-        border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
-        font-size: 15px; display: flex; align-items: center; justify-content: center;
-      }
-      .sc-tab:hover { color: var(--accent); background: rgba(74, 240, 224, 0.1); }
-      .sc-title { padding: 8px 12px; font-weight: 700; color: #9fe7ff; letter-spacing: 0.06em;
-        text-transform: uppercase; font-size: 11px; border-bottom: 1px solid var(--line); position: sticky; top: 0;
-        background: var(--panel); }
-      .sc-node { display: flex; align-items: center; gap: 4px; min-height: 28px; padding: 2px 8px; cursor: pointer;
-        white-space: nowrap; overflow: hidden; }
-      .sc-node:hover { background: rgba(74, 240, 224, 0.08); }
-      .sc-node.sel { background: rgba(74, 240, 224, 0.18); color: #eafdff; }
-      .sc-node .ty { color: #6f93b8; }
-      .sc-caret { flex: 0 0 14px; width: 14px; text-align: center; color: #6f93b8; cursor: pointer; user-select: none; }
-      .sc-inspector { padding: 8px 10px; }
-      .sc-sec { display: flex; align-items: center; gap: 4px; margin: 10px 0 4px; color: #9fe7ff; font-weight: 700;
-        border-bottom: 1px solid var(--line); padding-bottom: 3px; cursor: pointer; user-select: none;
-        text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }
-      .sc-sec.sc-sec-plain { cursor: default; }
-      .sc-sec .sc-caret { flex: 0 0 12px; width: 12px; }
-      .sc-sec-body { padding: 1px 0 2px; }
-      .sc-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 30px; padding: 2px 0; }
-      .sc-row .k { color: #8fa6c4; flex: 0 0 auto; }
-      .sc-row .v { color: #e7f0fb; text-align: right; word-break: break-word; display: flex; align-items: center;
-        justify-content: flex-end; gap: 4px; }
-      .sc-empty { color: #6f8099; padding: 12px 0; }
-      /* editable controls — 16px font avoids iOS tap-zoom; generous hit areas for touch */
-      .sc-input { background: #0e1219; color: #e7f0fb; border: 1px solid var(--line); border-radius: 5px;
-        padding: 4px 6px; font: 16px ui-monospace, monospace; min-height: 28px; box-sizing: border-box; }
-      .sc-input:focus { outline: none; border-color: var(--accent); }
-      .sc-num { width: 64px; text-align: right; }
-      .sc-axes { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
-      .sc-axis { display: flex; align-items: center; gap: 2px; }
-      .sc-axis-k { color: #6f93b8; font-size: 11px; width: 12px; text-align: center; }
-      .sc-scrub { cursor: ew-resize; touch-action: none; }
-      .sc-toggle { width: 22px; height: 22px; accent-color: var(--accent); }
-      .sc-color { display: flex; align-items: center; gap: 5px; }
-      .sc-swatch { width: 30px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 5px;
-        background: none; cursor: pointer; }
-      .sc-hex { width: 78px; }
-      .sc-select { min-width: 96px; cursor: pointer; }
-      #hint { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); padding: 6px 14px;
-        border-radius: 8px; background: rgba(0,0,0,.55); color: #9fb5cf; font: 11px ui-monospace, monospace;
-        pointer-events: none; }
-      /* floating toolbars (touch-reachable, top center): play panel + movement panel */
-      .sc-toolbars { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 6;
-        display: flex; align-items: flex-start; gap: 8px; }
-      .sc-toolbar { display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 12px;
-        background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(6px); }
-      .sc-tbtn { position: relative; width: 40px; height: 40px; display: flex; align-items: center;
-        justify-content: center; padding: 0; border: 1px solid transparent; border-radius: 9px;
-        background: transparent; color: #cfe0f2; cursor: pointer; }
-      .sc-tbtn svg { width: 22px; height: 22px; display: block; }
-      .sc-tbtn:hover:not(:disabled) { background: rgba(74, 240, 224, 0.12); color: #eafdff; }
-      .sc-tbtn.active { background: rgba(74, 240, 224, 0.2); border-color: var(--accent); color: #eafdff; }
-      .sc-tbtn:disabled { opacity: 0.3; cursor: default; }
-      .sc-tbtn.sc-save.dirty { color: var(--accent); }
-      .sc-tbtn.sc-save.dirty::after { content: ''; position: absolute; top: 7px; right: 7px;
-        width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
-      .sc-tbtn.sc-save.saving { opacity: 0.5; }
-      .sc-tsep { width: 1px; height: 24px; background: var(--line); margin: 0 3px; }
-      /* conflict banner: unsaved edits vs. an external file change */
-      #sc-conflict { position: fixed; top: 62px; left: 50%; transform: translateX(-50%); z-index: 7;
-        display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px;
-        background: rgba(40, 26, 26, 0.96); border: 1px solid #6b3a3a; color: #ffd9d9;
-        font: 13px ui-monospace, monospace; backdrop-filter: blur(6px); }
-      #sc-conflict button { border: 1px solid #6b3a3a; border-radius: 7px; background: transparent;
-        color: #ffd9d9; padding: 5px 10px; cursor: pointer; font: 12px ui-monospace, monospace; }
-      #sc-conflict button:first-of-type { background: var(--accent); color: #0e1219; border-color: var(--accent); }
-      #sc-conflict button:hover { filter: brightness(1.1); }
-      /* component-load error banner: last-good is live, this says what's broken */
-      #sc-error { position: fixed; top: 62px; left: 50%; transform: translateX(-50%); z-index: 7;
-        display: flex; align-items: flex-start; gap: 10px; max-width: min(680px, 92vw);
-        padding: 9px 13px; border-radius: 10px; background: rgba(44, 22, 14, 0.97);
-        border: 1px solid #7a4326; color: #ffdcc2; font: 12px/1.45 ui-monospace, monospace;
-        backdrop-filter: blur(6px); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5); }
-      #sc-error > span { white-space: pre-wrap; overflow: auto; max-height: 34vh; }
-      #sc-error button { flex: 0 0 auto; border: 1px solid #7a4326; border-radius: 7px; background: transparent;
-        color: #ffdcc2; padding: 5px 10px; cursor: pointer; font: 12px ui-monospace, monospace; }
-      #sc-error button:hover { filter: brightness(1.15); }
-      /* start-up file picker: shown when the editor opens with no ?file= */
-      .sc-picker { position: fixed; inset: 0; z-index: 8; display: flex; align-items: center;
-        justify-content: center; background: rgba(10, 12, 18, 0.72); backdrop-filter: blur(4px); }
-      .sc-picker-panel { width: min(440px, 88vw); max-height: 76vh; display: flex; flex-direction: column;
-        background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
-        font: 13px/1.5 ui-monospace, monospace; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5); }
-      .sc-picker-title { padding: 14px 18px; font-weight: 700; color: #9fe7ff; letter-spacing: 0.06em;
-        text-transform: uppercase; font-size: 12px; border-bottom: 1px solid var(--line); }
-      .sc-picker-list { overflow: auto; padding: 6px; }
-      .sc-picker-row { width: 100%; display: flex; align-items: center; justify-content: space-between;
-        gap: 10px; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: #e7f0fb;
-        font: 13px ui-monospace, monospace; text-align: left; cursor: pointer; }
-      .sc-picker-row:hover { background: rgba(74, 240, 224, 0.12); color: #eafdff; }
-      .sc-picker-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-      .sc-picker-kind { flex: 0 0 auto; color: #6f93b8; font-size: 11px; text-transform: uppercase;
-        letter-spacing: 0.04em; border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
-      .sc-picker-empty { padding: 22px 18px; color: #8fa6c4; text-align: center; }
-    </style>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>SceNoCo editor</title>
+    <link rel="stylesheet" href="./editor.css" />
   </head>
   <body>
-    <canvas id="app"></canvas>
-    <div id="hint">tap to select · right-drag look · WASD move · Q/E down/up · G/R/Y gizmo move/rotate/scale</div>
-    <script type="module" src="/main.ts"></script>
+    <canvas id="viewport"></canvas>
+    <div id="sc-ui"></div>
+    <script type="module" src="./main.ts"></script>
   </body>
 </html>