blockymodel-web 0.1.0

package/src/editor/History.ts

@@ -0,0 +1,123 @@
+import type { Command } from "./commands/Command";
+
+type HistoryCallback = () => void;
+
+const MERGE_WINDOW_MS = 500; // Commands within this window can be merged
+
+/**
+ * Manages undo/redo history for editor commands
+ */
+export class History {
+  private undoStack: Command[] = [];
+  private redoStack: Command[] = [];
+  private eventListeners: Map<string, Set<HistoryCallback>> = new Map();
+
+  /**
+   * Execute a command and add it to history
+   */
+  execute(command: Command): void {
+    command.execute();
+
+    // Try to merge with last command if within time window and updatable
+    const lastCommand = this.undoStack[this.undoStack.length - 1];
+    if (
+      lastCommand &&
+      lastCommand.updatable &&
+      command.updatable &&
+      lastCommand.type === command.type &&
+      lastCommand.object === command.object &&
+      command.timestamp - lastCommand.timestamp < MERGE_WINDOW_MS
+    ) {
+      // Merge into existing command
+      if (lastCommand.update) {
+        lastCommand.update(command);
+      }
+    } else {
+      // Add as new command
+      this.undoStack.push(command);
+    }
+
+    // Clear redo stack on new action
+    this.redoStack = [];
+
+    this.emit("historyChanged");
+  }
+
+  /**
+   * Undo the last command
+   */
+  undo(): void {
+    const command = this.undoStack.pop();
+    if (command) {
+      command.undo();
+      this.redoStack.push(command);
+      this.emit("historyChanged");
+    }
+  }
+
+  /**
+   * Redo the last undone command
+   */
+  redo(): void {
+    const command = this.redoStack.pop();
+    if (command) {
+      command.execute();
+      this.undoStack.push(command);
+      this.emit("historyChanged");
+    }
+  }
+
+  /**
+   * Check if undo is available
+   */
+  canUndo(): boolean {
+    return this.undoStack.length > 0;
+  }
+
+  /**
+   * Check if redo is available
+   */
+  canRedo(): boolean {
+    return this.redoStack.length > 0;
+  }
+
+  /**
+   * Clear all history
+   */
+  clear(): void {
+    this.undoStack = [];
+    this.redoStack = [];
+    this.emit("historyChanged");
+  }
+
+  /**
+   * Get the number of items in undo stack
+   */
+  getUndoCount(): number {
+    return this.undoStack.length;
+  }
+
+  /**
+   * Get the number of items in redo stack
+   */
+  getRedoCount(): number {
+    return this.redoStack.length;
+  }
+
+  /**
+   * Add event listener
+   */
+  on(event: string, callback: HistoryCallback): void {
+    if (!this.eventListeners.has(event)) {
+      this.eventListeners.set(event, new Set());
+    }
+    this.eventListeners.get(event)!.add(callback);
+  }
+
+  /**
+   * Emit event
+   */
+  private emit(event: string): void {
+    this.eventListeners.get(event)?.forEach((callback) => callback());
+  }
+}

package/src/editor/SelectionManager.ts

@@ -0,0 +1,183 @@
+import * as THREE from "three";
+import type { Editor } from "./Editor";
+
+type SelectionCallback = (object: THREE.Object3D | null) => void;
+
+const HIGHLIGHT_EMISSIVE = 0x4488ff;
+const HIGHLIGHT_INTENSITY = 0.3;
+
+/**
+ * Manages object selection via raycasting
+ */
+export class SelectionManager {
+  private editor: Editor;
+  private raycaster: THREE.Raycaster;
+  private mouse: THREE.Vector2;
+  private selected: THREE.Object3D | null = null;
+  private highlightedMaterials: Map<THREE.Mesh, { emissive: THREE.Color; emissiveIntensity: number }> = new Map();
+  private eventListeners: Map<string, Set<SelectionCallback>> = new Map();
+
+  constructor(editor: Editor) {
+    this.editor = editor;
+    this.raycaster = new THREE.Raycaster();
+    this.mouse = new THREE.Vector2();
+
+    // Bind event handlers
+    this.handleClick = this.handleClick.bind(this);
+    this.editor.domElement.addEventListener("click", this.handleClick);
+  }
+
+  /**
+   * Handle click events for selection
+   */
+  private handleClick(event: MouseEvent): void {
+    // Ignore if clicking on UI elements or during transform
+    if (event.target !== this.editor.renderer.domElement) {
+      return;
+    }
+
+    const rect = this.editor.domElement.getBoundingClientRect();
+    this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+    this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+
+    this.raycaster.setFromCamera(this.mouse, this.editor.camera);
+
+    // Get pickable objects (meshes from current model)
+    const model = this.editor.getModel();
+    if (!model) {
+      this.deselect();
+      return;
+    }
+
+    const pickables: THREE.Object3D[] = [];
+    model.traverse((object) => {
+      if (object instanceof THREE.Mesh && object.visible) {
+        // Skip TransformControls gizmo objects
+        if (!this.isTransformControlPart(object)) {
+          pickables.push(object);
+        }
+      }
+    });
+
+    const intersects = this.raycaster.intersectObjects(pickables, false);
+
+    if (intersects.length > 0) {
+      // Find the most relevant parent (node with name/id)
+      let target = intersects[0].object;
+      while (target.parent && !target.userData.id && target.parent !== model) {
+        target = target.parent;
+      }
+      this.select(target);
+    } else {
+      this.deselect();
+    }
+  }
+
+  /**
+   * Check if object is part of TransformControls
+   */
+  private isTransformControlPart(object: THREE.Object3D): boolean {
+    let current: THREE.Object3D | null = object;
+    while (current) {
+      if (current.type === "TransformControlsGizmo" || current.type === "TransformControlsPlane") {
+        return true;
+      }
+      current = current.parent;
+    }
+    return false;
+  }
+
+  /**
+   * Select an object
+   */
+  select(object: THREE.Object3D | null): void {
+    if (object === this.selected) return;
+
+    // Remove highlight from previous selection
+    this.removeHighlight();
+
+    this.selected = object;
+
+    // Add highlight to new selection
+    if (object) {
+      this.applyHighlight(object);
+    }
+
+    this.emit("selectionChanged", object);
+  }
+
+  /**
+   * Deselect current object
+   */
+  deselect(): void {
+    this.select(null);
+  }
+
+  /**
+   * Get currently selected object
+   */
+  getSelected(): THREE.Object3D | null {
+    return this.selected;
+  }
+
+  /**
+   * Apply highlight effect to object
+   */
+  private applyHighlight(object: THREE.Object3D): void {
+    object.traverse((child) => {
+      if (child instanceof THREE.Mesh) {
+        const material = child.material as THREE.MeshStandardMaterial;
+        if (material.emissive) {
+          // Store original values
+          this.highlightedMaterials.set(child, {
+            emissive: material.emissive.clone(),
+            emissiveIntensity: material.emissiveIntensity,
+          });
+          // Apply highlight
+          material.emissive.setHex(HIGHLIGHT_EMISSIVE);
+          material.emissiveIntensity = HIGHLIGHT_INTENSITY;
+        }
+      }
+    });
+  }
+
+  /**
+   * Remove highlight effect
+   */
+  private removeHighlight(): void {
+    this.highlightedMaterials.forEach((original, mesh) => {
+      const material = mesh.material as THREE.MeshStandardMaterial;
+      if (material.emissive) {
+        material.emissive.copy(original.emissive);
+        material.emissiveIntensity = original.emissiveIntensity;
+      }
+    });
+    this.highlightedMaterials.clear();
+  }
+
+  /**
+   * Add event listener
+   */
+  on(event: string, callback: SelectionCallback): 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[0] as THREE.Object3D | null));
+  }
+
+  /**
+   * Clean up
+   */
+  dispose(): void {
+    this.editor.domElement.removeEventListener("click", this.handleClick);
+    this.removeHighlight();
+    this.eventListeners.clear();
+  }
+}

package/src/editor/Serializer.ts

@@ -0,0 +1,212 @@
+import * as THREE from "three";
+import type {
+  BlockyModel,
+  BlockyNode,
+  BlockyShape,
+  Vec3,
+  Quaternion,
+  TextureLayout,
+  ShadingMode,
+  ShapeType,
+} from "../types/blockymodel";
+
+/**
+ * Generate a unique ID
+ */
+function generateId(): string {
+  return `node_${Date.now().toString(36)}_${Math.random().toString(36).substring(2, 8)}`;
+}
+
+/**
+ * Serializer for exporting Three.js scene to BlockyModel format
+ */
+export class Serializer {
+  /**
+   * Serialize a Three.js model group to BlockyModel JSON
+   */
+  serialize(model: THREE.Group): BlockyModel {
+    const blockyModel: BlockyModel = {
+      format: model.userData.format || "prop",
+      lod: model.userData.lod || "auto",
+      nodes: [],
+    };
+
+    // Serialize root-level children (skip helpers)
+    for (const child of model.children) {
+      if (this.shouldSerialize(child)) {
+        blockyModel.nodes.push(this.serializeNode(child));
+      }
+    }
+
+    return blockyModel;
+  }
+
+  /**
+   * Check if an object should be serialized
+   */
+  private shouldSerialize(object: THREE.Object3D): boolean {
+    // Skip transform controls and other helpers
+    if (
+      object.type === "TransformControlsGizmo" ||
+      object.type === "TransformControlsPlane" ||
+      object.type === "GridHelper" ||
+      object.type === "AxesHelper"
+    ) {
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * Serialize a single node
+   */
+  private serializeNode(object: THREE.Object3D): BlockyNode {
+    const node: BlockyNode = {
+      id: object.userData.id || object.name || generateId(),
+      name: object.name || "Unnamed",
+      position: this.serializePosition(object.position),
+      orientation: this.serializeQuaternion(object.quaternion),
+      shape: this.serializeShape(object),
+      children: [],
+    };
+
+    // Serialize children
+    for (const child of object.children) {
+      if (this.shouldSerialize(child)) {
+        node.children.push(this.serializeNode(child));
+      }
+    }
+
+    return node;
+  }
+
+  /**
+   * Serialize position
+   */
+  private serializePosition(position: THREE.Vector3): Vec3 {
+    return {
+      x: parseFloat(position.x.toFixed(4)),
+      y: parseFloat(position.y.toFixed(4)),
+      z: parseFloat(position.z.toFixed(4)),
+    };
+  }
+
+  /**
+   * Serialize quaternion
+   */
+  private serializeQuaternion(quaternion: THREE.Quaternion): Quaternion {
+    return {
+      w: parseFloat(quaternion.w.toFixed(6)),
+      x: parseFloat(quaternion.x.toFixed(6)),
+      y: parseFloat(quaternion.y.toFixed(6)),
+      z: parseFloat(quaternion.z.toFixed(6)),
+    };
+  }
+
+  /**
+   * Serialize shape
+   */
+  private serializeShape(object: THREE.Object3D): BlockyShape {
+    const shapeType = (object.userData.shapeType || "none") as ShapeType;
+
+    // Base shape with defaults
+    const shape: BlockyShape = {
+      type: shapeType,
+      offset: object.userData.offset || { x: 0, y: 0, z: 0 },
+      stretch: object.userData.stretch || { x: 1, y: 1, z: 1 },
+      settings: {
+        size: object.userData.originalSize || { x: 1, y: 1, z: 1 },
+        isPiece: object.userData.isPiece || false,
+        isStaticBox: object.userData.isStaticBox || false,
+      },
+      textureLayout: object.userData.textureLayout || this.getDefaultTextureLayout(),
+      unwrapMode: object.userData.unwrapMode || "custom",
+      visible: object.visible !== false,
+      doubleSided: object.userData.doubleSided || false,
+      shadingMode: (object.userData.shadingMode || "standard") as ShadingMode,
+    };
+
+    // For mesh objects, try to extract geometry info
+    if (object instanceof THREE.Mesh) {
+      const geometry = object.geometry;
+
+      // Extract size from BoxGeometry if available
+      if (geometry instanceof THREE.BoxGeometry) {
+        const params = geometry.parameters;
+        if (!object.userData.originalSize) {
+          shape.settings.size = {
+            x: params.width,
+            y: params.height,
+            z: params.depth,
+          };
+        }
+      }
+
+      // Extract material properties
+      const material = object.material as THREE.MeshStandardMaterial;
+      if (material) {
+        shape.doubleSided = material.side === THREE.DoubleSide;
+
+        // Infer shading mode from material properties
+        if (material.emissiveIntensity > 0.5) {
+          shape.shadingMode = "fullbright";
+        } else if (material.flatShading) {
+          shape.shadingMode = "flat";
+        } else if (material.metalness > 0.5) {
+          shape.shadingMode = "reflective";
+        }
+      }
+    }
+
+    // For quads, include normal direction
+    if (shapeType === "quad" && object.userData.normal) {
+      shape.settings.normal = object.userData.normal;
+    }
+
+    return shape;
+  }
+
+  /**
+   * Get default texture layout
+   */
+  private getDefaultTextureLayout(): TextureLayout {
+    const defaultFace = {
+      offset: { x: 0, y: 0 },
+      mirror: { x: false, y: false },
+      angle: 0 as const,
+    };
+
+    return {
+      front: { ...defaultFace },
+      back: { ...defaultFace },
+      left: { ...defaultFace },
+      right: { ...defaultFace },
+      top: { ...defaultFace },
+      bottom: { ...defaultFace },
+    };
+  }
+
+  /**
+   * Export model to JSON string
+   */
+  toJSON(model: THREE.Group): string {
+    const blockyModel = this.serialize(model);
+    return JSON.stringify(blockyModel, null, 2);
+  }
+
+  /**
+   * Download model as .blockymodel file
+   */
+  download(model: THREE.Group, filename: string = "model.blockymodel"): void {
+    const json = this.toJSON(model);
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename.endsWith(".blockymodel") ? filename : `${filename}.blockymodel`;
+    link.click();
+
+    URL.revokeObjectURL(url);
+  }
+}