blockymodel-web 0.1.0

package/src/editor/TransformManager.ts

@@ -0,0 +1,270 @@
+import * as THREE from "three";
+import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
+import type { Editor } from "./Editor";
+import { SetPositionCommand } from "./commands/SetPositionCommand";
+import { SetRotationCommand } from "./commands/SetRotationCommand";
+import { SetScaleCommand } from "./commands/SetScaleCommand";
+import type { Command } from "./commands/Command";
+
+type TransformMode = "translate" | "rotate" | "scale";
+type TransformCallback = (...args: unknown[]) => void;
+
+/**
+ * Manages transform controls for selected objects
+ */
+export class TransformManager {
+  private editor: Editor;
+  private controls: TransformControls;
+  private mode: TransformMode = "translate";
+  private eventListeners: Map<string, Set<TransformCallback>> = new Map();
+
+  // Track transform start state for undo
+  private transformStartPosition: THREE.Vector3 | null = null;
+  private transformStartRotation: THREE.Euler | null = null;
+  private transformStartScale: THREE.Vector3 | null = null;
+  private isTransforming: boolean = false;
+
+  constructor(editor: Editor) {
+    this.editor = editor;
+
+    // Create TransformControls
+    this.controls = new TransformControls(
+      this.editor.camera,
+      this.editor.renderer.domElement
+    );
+    this.controls.setSize(0.75);
+    this.editor.scene.add(this.controls.getHelper());
+
+    // Bind event handlers
+    this.handleDraggingChanged = this.handleDraggingChanged.bind(this);
+    this.handleObjectChange = this.handleObjectChange.bind(this);
+
+    this.controls.addEventListener("dragging-changed", this.handleDraggingChanged);
+    this.controls.addEventListener("objectChange", this.handleObjectChange);
+
+    // Setup keyboard shortcuts
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    document.addEventListener("keydown", this.handleKeyDown);
+  }
+
+  /**
+   * Handle dragging state changes
+   */
+  private handleDraggingChanged(event: { value: unknown }): void {
+    const isDragging = event.value as boolean;
+    // Disable orbit controls while transforming
+    this.editor.controls.enabled = !isDragging;
+
+    if (isDragging) {
+      // Starting transform - capture initial state
+      this.captureStartState();
+      this.isTransforming = true;
+    } else if (this.isTransforming) {
+      // Ending transform - create command
+      this.createCommand();
+      this.isTransforming = false;
+    }
+  }
+
+  /**
+   * Capture the start state before transform
+   */
+  private captureStartState(): void {
+    const object = this.controls.object;
+    if (!object) return;
+
+    this.transformStartPosition = object.position.clone();
+    this.transformStartRotation = object.rotation.clone();
+    this.transformStartScale = object.scale.clone();
+  }
+
+  /**
+   * Create a command after transform completes
+   */
+  private createCommand(): void {
+    const object = this.controls.object;
+    if (!object) return;
+
+    let command: Command | null = null;
+
+    switch (this.mode) {
+      case "translate":
+        if (this.transformStartPosition && !object.position.equals(this.transformStartPosition)) {
+          command = new SetPositionCommand(
+            object,
+            object.position.clone(),
+            this.transformStartPosition.clone()
+          );
+        }
+        break;
+
+      case "rotate":
+        if (this.transformStartRotation) {
+          const changed =
+            object.rotation.x !== this.transformStartRotation.x ||
+            object.rotation.y !== this.transformStartRotation.y ||
+            object.rotation.z !== this.transformStartRotation.z;
+          if (changed) {
+            command = new SetRotationCommand(
+              object,
+              object.rotation.clone(),
+              this.transformStartRotation.clone()
+            );
+          }
+        }
+        break;
+
+      case "scale":
+        if (this.transformStartScale && !object.scale.equals(this.transformStartScale)) {
+          command = new SetScaleCommand(
+            object,
+            object.scale.clone(),
+            this.transformStartScale.clone()
+          );
+        }
+        break;
+    }
+
+    if (command) {
+      this.emit("objectChanged", object, command);
+    }
+
+    // Clear start state
+    this.transformStartPosition = null;
+    this.transformStartRotation = null;
+    this.transformStartScale = null;
+  }
+
+  /**
+   * Handle object change during transform (live updates)
+   */
+  private handleObjectChange(): void {
+    // This fires continuously during drag - can be used for live UI updates
+    const object = this.controls.object;
+    if (object) {
+      // Emit a lightweight change event for UI updates without creating commands
+      this.emit("objectChanging", object);
+    }
+  }
+
+  /**
+   * Handle keyboard shortcuts
+   */
+  private handleKeyDown(event: KeyboardEvent): void {
+    // Ignore if in input field
+    if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
+      return;
+    }
+
+    switch (event.key.toLowerCase()) {
+      case "g":
+        this.setMode("translate");
+        break;
+      case "r":
+        if (!event.ctrlKey && !event.metaKey) {
+          this.setMode("rotate");
+        }
+        break;
+      case "s":
+        if (!event.ctrlKey && !event.metaKey) {
+          this.setMode("scale");
+        }
+        break;
+      case "escape":
+        if (this.isTransforming) {
+          // Cancel transform - restore start state
+          this.cancelTransform();
+        }
+        break;
+    }
+  }
+
+  /**
+   * Cancel current transform and restore original state
+   */
+  private cancelTransform(): void {
+    const object = this.controls.object;
+    if (!object) return;
+
+    if (this.transformStartPosition) {
+      object.position.copy(this.transformStartPosition);
+    }
+    if (this.transformStartRotation) {
+      object.rotation.copy(this.transformStartRotation);
+    }
+    if (this.transformStartScale) {
+      object.scale.copy(this.transformStartScale);
+    }
+
+    this.isTransforming = false;
+    this.transformStartPosition = null;
+    this.transformStartRotation = null;
+    this.transformStartScale = null;
+  }
+
+  /**
+   * Attach controls to an object
+   */
+  attach(object: THREE.Object3D | null): void {
+    const helper = this.controls.getHelper();
+    if (object) {
+      this.controls.attach(object);
+      helper.visible = true;
+    } else {
+      this.controls.detach();
+      helper.visible = false;
+    }
+  }
+
+  /**
+   * Set transform mode
+   */
+  setMode(mode: TransformMode): void {
+    this.mode = mode;
+    this.controls.setMode(mode);
+    this.emit("modeChanged", mode);
+  }
+
+  /**
+   * Get current transform mode
+   */
+  getMode(): TransformMode {
+    return this.mode;
+  }
+
+  /**
+   * Get TransformControls instance
+   */
+  getControls(): TransformControls {
+    return this.controls;
+  }
+
+  /**
+   * Add event listener
+   */
+  on(event: string, callback: TransformCallback): void {
+    if (!this.eventListeners.has(event)) {
+      this.eventListeners.set(event, new Set());
+    }
+    this.eventListeners.get(event)!.add(callback);
+  }
+
+  /**
+   * Emit event
+   */
+  private emit(event: string, ...args: unknown[]): void {
+    this.eventListeners.get(event)?.forEach((callback) => callback(...args));
+  }
+
+  /**
+   * Clean up
+   */
+  dispose(): void {
+    document.removeEventListener("keydown", this.handleKeyDown);
+    this.controls.removeEventListener("dragging-changed", this.handleDraggingChanged);
+    this.controls.removeEventListener("objectChange", this.handleObjectChange);
+    this.controls.dispose();
+    this.editor.scene.remove(this.controls.getHelper());
+    this.eventListeners.clear();
+  }
+}

package/src/editor/commands/AddNodeCommand.ts

@@ -0,0 +1,53 @@
+import * as THREE from "three";
+import { BaseCommand } from "./Command";
+
+/**
+ * Command to add a child node to a parent
+ */
+export class AddNodeCommand extends BaseCommand {
+  readonly type = "AddNode";
+  readonly updatable = false;
+
+  private parent: THREE.Object3D;
+  private child: THREE.Object3D;
+  private index: number;
+
+  constructor(
+    parent: THREE.Object3D,
+    child: THREE.Object3D,
+    index?: number
+  ) {
+    super(parent, false);
+    this.parent = parent;
+    this.child = child;
+    this.index = index ?? parent.children.length;
+  }
+
+  execute(): void {
+    this.parent.add(this.child);
+    // Reorder to correct index if needed
+    if (this.index < this.parent.children.length - 1) {
+      const children = this.parent.children;
+      children.splice(children.indexOf(this.child), 1);
+      children.splice(this.index, 0, this.child);
+    }
+  }
+
+  undo(): void {
+    this.parent.remove(this.child);
+  }
+
+  /**
+   * Get the added child
+   */
+  getChild(): THREE.Object3D {
+    return this.child;
+  }
+
+  /**
+   * Get the parent
+   */
+  getParent(): THREE.Object3D {
+    return this.parent;
+  }
+}

package/src/editor/commands/Command.ts

@@ -0,0 +1,63 @@
+import * as THREE from "three";
+
+/**
+ * Base interface for all editor commands
+ * Commands implement the command pattern for undo/redo support
+ */
+export interface Command {
+  /**
+   * Unique identifier for this command type
+   */
+  readonly type: string;
+
+  /**
+   * The object this command operates on
+   */
+  readonly object: THREE.Object3D;
+
+  /**
+   * Execute the command (apply the new state)
+   */
+  execute(): void;
+
+  /**
+   * Undo the command (restore the previous state)
+   */
+  undo(): void;
+
+  /**
+   * Whether this command can be merged with subsequent commands of the same type
+   * Used for rapid updates (e.g., continuous dragging)
+   */
+  readonly updatable: boolean;
+
+  /**
+   * Update this command with a new end state
+   * Only called if updatable is true and commands are of same type on same object
+   */
+  update?(command: Command): void;
+
+  /**
+   * Timestamp when this command was created
+   */
+  readonly timestamp: number;
+}
+
+/**
+ * Base class providing common functionality for commands
+ */
+export abstract class BaseCommand implements Command {
+  abstract readonly type: string;
+  readonly object: THREE.Object3D;
+  readonly updatable: boolean;
+  readonly timestamp: number;
+
+  constructor(object: THREE.Object3D, updatable: boolean = false) {
+    this.object = object;
+    this.updatable = updatable;
+    this.timestamp = Date.now();
+  }
+
+  abstract execute(): void;
+  abstract undo(): void;
+}

package/src/editor/commands/RemoveNodeCommand.ts

@@ -0,0 +1,59 @@
+import * as THREE from "three";
+import { BaseCommand } from "./Command";
+
+/**
+ * Command to remove a node from its parent
+ */
+export class RemoveNodeCommand extends BaseCommand {
+  readonly type = "RemoveNode";
+  readonly updatable = false;
+
+  private parent: THREE.Object3D;
+  private child: THREE.Object3D;
+  private index: number;
+
+  constructor(child: THREE.Object3D) {
+    super(child, false);
+    if (!child.parent) {
+      throw new Error("Cannot remove node without parent");
+    }
+    this.parent = child.parent;
+    this.child = child;
+    this.index = this.parent.children.indexOf(child);
+  }
+
+  execute(): void {
+    this.parent.remove(this.child);
+  }
+
+  undo(): void {
+    this.parent.add(this.child);
+    // Restore to original index
+    if (this.index < this.parent.children.length) {
+      const children = this.parent.children;
+      children.splice(children.indexOf(this.child), 1);
+      children.splice(this.index, 0, this.child);
+    }
+  }
+
+  /**
+   * Get the removed child
+   */
+  getChild(): THREE.Object3D {
+    return this.child;
+  }
+
+  /**
+   * Get the parent
+   */
+  getParent(): THREE.Object3D {
+    return this.parent;
+  }
+
+  /**
+   * Get the original index
+   */
+  getIndex(): number {
+    return this.index;
+  }
+}

package/src/editor/commands/SetPositionCommand.ts

@@ -0,0 +1,51 @@
+import * as THREE from "three";
+import { BaseCommand, type Command } from "./Command";
+
+/**
+ * Command to set an object's position
+ */
+export class SetPositionCommand extends BaseCommand {
+  readonly type = "SetPosition";
+  readonly updatable = true;
+
+  private newPosition: THREE.Vector3;
+  private oldPosition: THREE.Vector3;
+
+  constructor(
+    object: THREE.Object3D,
+    newPosition: THREE.Vector3,
+    oldPosition: THREE.Vector3
+  ) {
+    super(object, true);
+    this.newPosition = newPosition.clone();
+    this.oldPosition = oldPosition.clone();
+  }
+
+  execute(): void {
+    this.object.position.copy(this.newPosition);
+  }
+
+  undo(): void {
+    this.object.position.copy(this.oldPosition);
+  }
+
+  update(command: Command): void {
+    if (command instanceof SetPositionCommand) {
+      this.newPosition.copy(command.newPosition);
+    }
+  }
+
+  /**
+   * Get the new position
+   */
+  getNewPosition(): THREE.Vector3 {
+    return this.newPosition.clone();
+  }
+
+  /**
+   * Get the old position
+   */
+  getOldPosition(): THREE.Vector3 {
+    return this.oldPosition.clone();
+  }
+}

package/src/editor/commands/SetPropertyCommand.ts

@@ -0,0 +1,100 @@
+import * as THREE from "three";
+import { BaseCommand, type Command } from "./Command";
+
+/**
+ * Command to set a property on an object
+ */
+export class SetPropertyCommand extends BaseCommand {
+  readonly type = "SetProperty";
+  readonly updatable = true;
+
+  private propertyPath: string;
+  private newValue: unknown;
+  private oldValue: unknown;
+
+  constructor(
+    object: THREE.Object3D,
+    propertyPath: string,
+    newValue: unknown,
+    oldValue: unknown
+  ) {
+    super(object, true);
+    this.propertyPath = propertyPath;
+    this.newValue = this.cloneValue(newValue);
+    this.oldValue = this.cloneValue(oldValue);
+  }
+
+  /**
+   * Clone a value if it's an object/array
+   */
+  private cloneValue(value: unknown): unknown {
+    if (value === null || value === undefined) return value;
+    if (typeof value === "object") {
+      return JSON.parse(JSON.stringify(value));
+    }
+    return value;
+  }
+
+  /**
+   * Get a nested property by path (e.g., "userData.size.x")
+   */
+  private getProperty(obj: unknown, path: string): unknown {
+    const parts = path.split(".");
+    let current = obj as Record<string, unknown>;
+    for (const part of parts) {
+      if (current === null || current === undefined) return undefined;
+      current = current[part] as Record<string, unknown>;
+    }
+    return current;
+  }
+
+  /**
+   * Set a nested property by path
+   */
+  private setProperty(obj: unknown, path: string, value: unknown): void {
+    const parts = path.split(".");
+    let current = obj as Record<string, unknown>;
+    for (let i = 0; i < parts.length - 1; i++) {
+      if (current[parts[i]] === undefined) {
+        current[parts[i]] = {};
+      }
+      current = current[parts[i]] as Record<string, unknown>;
+    }
+    current[parts[parts.length - 1]] = value;
+  }
+
+  execute(): void {
+    this.setProperty(this.object, this.propertyPath, this.cloneValue(this.newValue));
+  }
+
+  undo(): void {
+    this.setProperty(this.object, this.propertyPath, this.cloneValue(this.oldValue));
+  }
+
+  update(command: Command): void {
+    if (command instanceof SetPropertyCommand && command.propertyPath === this.propertyPath) {
+      this.newValue = command.newValue;
+    }
+  }
+
+  /**
+   * Get the property path
+   */
+  getPropertyPath(): string {
+    return this.propertyPath;
+  }
+
+  /**
+   * Get the new value
+   */
+  getNewValue(): unknown {
+    return this.cloneValue(this.newValue);
+  }
+
+  /**
+   * Get the old value
+   */
+  getOldValue(): unknown {
+    return this.cloneValue(this.oldValue);
+  }
+}

package/src/editor/commands/SetRotationCommand.ts

@@ -0,0 +1,51 @@
+import * as THREE from "three";
+import { BaseCommand, type Command } from "./Command";
+
+/**
+ * Command to set an object's rotation
+ */
+export class SetRotationCommand extends BaseCommand {
+  readonly type = "SetRotation";
+  readonly updatable = true;
+
+  private newRotation: THREE.Euler;
+  private oldRotation: THREE.Euler;
+
+  constructor(
+    object: THREE.Object3D,
+    newRotation: THREE.Euler,
+    oldRotation: THREE.Euler
+  ) {
+    super(object, true);
+    this.newRotation = newRotation.clone();
+    this.oldRotation = oldRotation.clone();
+  }
+
+  execute(): void {
+    this.object.rotation.copy(this.newRotation);
+  }
+
+  undo(): void {
+    this.object.rotation.copy(this.oldRotation);
+  }
+
+  update(command: Command): void {
+    if (command instanceof SetRotationCommand) {
+      this.newRotation.copy(command.newRotation);
+    }
+  }
+
+  /**
+   * Get the new rotation
+   */
+  getNewRotation(): THREE.Euler {
+    return this.newRotation.clone();
+  }
+
+  /**
+   * Get the old rotation
+   */
+  getOldRotation(): THREE.Euler {
+    return this.oldRotation.clone();
+  }
+}

package/src/editor/commands/SetScaleCommand.ts

@@ -0,0 +1,51 @@
+import * as THREE from "three";
+import { BaseCommand, type Command } from "./Command";
+
+/**
+ * Command to set an object's scale
+ */
+export class SetScaleCommand extends BaseCommand {
+  readonly type = "SetScale";
+  readonly updatable = true;
+
+  private newScale: THREE.Vector3;
+  private oldScale: THREE.Vector3;
+
+  constructor(
+    object: THREE.Object3D,
+    newScale: THREE.Vector3,
+    oldScale: THREE.Vector3
+  ) {
+    super(object, true);
+    this.newScale = newScale.clone();
+    this.oldScale = oldScale.clone();
+  }
+
+  execute(): void {
+    this.object.scale.copy(this.newScale);
+  }
+
+  undo(): void {
+    this.object.scale.copy(this.oldScale);
+  }
+
+  update(command: Command): void {
+    if (command instanceof SetScaleCommand) {
+      this.newScale.copy(command.newScale);
+    }
+  }
+
+  /**
+   * Get the new scale
+   */
+  getNewScale(): THREE.Vector3 {
+    return this.newScale.clone();
+  }
+
+  /**
+   * Get the old scale
+   */
+  getOldScale(): THREE.Vector3 {
+    return this.oldScale.clone();
+  }
+}