blockymodel-web 0.1.0

package/src/editor/index.ts

@@ -0,0 +1,19 @@
+// Editor core
+export { Editor } from "./Editor";
+export type { EditorEvent, EditorOptions } from "./Editor";
+
+// Subsystems
+export { SelectionManager } from "./SelectionManager";
+export { TransformManager } from "./TransformManager";
+export { History } from "./History";
+export { Serializer } from "./Serializer";
+
+// Commands
+export type { Command } from "./commands/Command";
+export { BaseCommand } from "./commands/Command";
+export { SetPositionCommand } from "./commands/SetPositionCommand";
+export { SetRotationCommand } from "./commands/SetRotationCommand";
+export { SetScaleCommand } from "./commands/SetScaleCommand";
+export { SetPropertyCommand } from "./commands/SetPropertyCommand";
+export { AddNodeCommand } from "./commands/AddNodeCommand";
+export { RemoveNodeCommand } from "./commands/RemoveNodeCommand";

package/src/index.ts

@@ -0,0 +1,49 @@
+// Editor core
+export { Editor } from "./editor/Editor";
+export { History } from "./editor/History";
+export { SelectionManager } from "./editor/SelectionManager";
+export { TransformManager } from "./editor/TransformManager";
+export { Serializer } from "./editor/Serializer";
+
+// Commands
+export { BaseCommand } from "./editor/commands/Command";
+export type { Command } from "./editor/commands/Command";
+export { SetPositionCommand } from "./editor/commands/SetPositionCommand";
+export { SetRotationCommand } from "./editor/commands/SetRotationCommand";
+export { SetScaleCommand } from "./editor/commands/SetScaleCommand";
+export { SetPropertyCommand } from "./editor/commands/SetPropertyCommand";
+export { AddNodeCommand } from "./editor/commands/AddNodeCommand";
+export { RemoveNodeCommand } from "./editor/commands/RemoveNodeCommand";
+
+// UI Components
+export { PropertyPanel } from "./ui/PropertyPanel";
+export { HierarchyPanel } from "./ui/HierarchyPanel";
+export { UVEditor } from "./ui/UVEditor";
+
+// Loader
+export { BlockyModelLoader } from "./loaders/BlockyModelLoader";
+
+// Viewer
+export { ViewerController } from "./viewer/ViewerController";
+
+// Types
+export type {
+  BlockyModel,
+  BlockyNode,
+  BlockyShape,
+  ShapeSettings,
+  TextureLayout,
+  FaceUV,
+  Vec3,
+  Vec2,
+  Quaternion,
+  ShapeType,
+  ShadingMode,
+  NormalDirection,
+} from "./types/blockymodel";
+
+export {
+  DEFAULT_POSITION,
+  DEFAULT_ORIENTATION,
+  DEFAULT_STRETCH,
+} from "./types/blockymodel";

package/src/loaders/BlockyModelLoader.ts

@@ -0,0 +1,281 @@
+import * as THREE from "three";
+import type {
+  BlockyModel,
+  BlockyNode,
+  BlockyShape,
+  Vec3,
+} from "../types/blockymodel";
+import {
+  DEFAULT_POSITION,
+  DEFAULT_ORIENTATION,
+  DEFAULT_STRETCH,
+} from "../types/blockymodel";
+
+/**
+ * Loader for .blockymodel files
+ * Parses JSON and builds Three.js Object3D hierarchy
+ */
+export class BlockyModelLoader extends THREE.Loader {
+  constructor(manager?: THREE.LoadingManager) {
+    super(manager);
+  }
+
+  /**
+   * Load a .blockymodel file from URL
+   */
+  async load(url: string): Promise<THREE.Group> {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`Failed to load model: ${response.statusText}`);
+    }
+    const json = await response.json();
+    return this.parse(json);
+  }
+
+  /**
+   * Load from File object (for drag-drop / file input)
+   */
+  async loadFromFile(file: File): Promise<THREE.Group> {
+    const text = await file.text();
+    const json = JSON.parse(text);
+    return this.parse(json);
+  }
+
+  /**
+   * Parse BlockyModel JSON into Three.js scene graph
+   */
+  parse(json: BlockyModel): THREE.Group {
+    const root = new THREE.Group();
+    root.name = "BlockyModel";
+    root.userData.format = json.format;
+    root.userData.lod = json.lod;
+
+    for (const node of json.nodes) {
+      const object = this.parseNode(node);
+      root.add(object);
+    }
+
+    return root;
+  }
+
+  /**
+   * Recursively parse a BlockyNode into Three.js Object3D
+   */
+  private parseNode(node: BlockyNode): THREE.Object3D {
+    const object = this.createNodeObject(node);
+
+    // Set name and metadata
+    object.name = node.name;
+    object.userData.id = node.id;
+    object.userData.isPiece = node.shape?.settings?.isPiece ?? false;
+
+    // Apply position
+    const pos = node.position ?? DEFAULT_POSITION;
+    object.position.set(pos.x, pos.y, pos.z);
+
+    // Apply orientation (quaternion)
+    const orient = node.orientation ?? DEFAULT_ORIENTATION;
+    object.quaternion.set(orient.x, orient.y, orient.z, orient.w);
+
+    // Recursively add children
+    for (const child of node.children ?? []) {
+      const childObject = this.parseNode(child);
+      object.add(childObject);
+    }
+
+    return object;
+  }
+
+  /**
+   * Create the appropriate Object3D based on shape type
+   */
+  private createNodeObject(node: BlockyNode): THREE.Object3D {
+    const shape = node.shape;
+
+    // No shape or invisible - return empty group
+    if (!shape || shape.type === "none" || !shape.visible) {
+      const group = new THREE.Group();
+      group.userData.shapeType = shape?.type ?? "none";
+      return group;
+    }
+
+    if (shape.type === "box") {
+      return this.createBox(shape);
+    }
+
+    if (shape.type === "quad") {
+      return this.createQuad(shape);
+    }
+
+    // Fallback to empty group for unknown types
+    return new THREE.Group();
+  }
+
+  /**
+   * Create a box mesh from shape data
+   */
+  private createBox(shape: BlockyShape): THREE.Mesh {
+    const size = shape.settings.size ?? { x: 1, y: 1, z: 1 };
+    const stretch = shape.stretch ?? DEFAULT_STRETCH;
+    const offset = shape.offset ?? DEFAULT_POSITION;
+
+    // Apply stretch to size
+    const finalSize: Vec3 = {
+      x: size.x * stretch.x,
+      y: size.y * stretch.y,
+      z: size.z * stretch.z,
+    };
+
+    // Create geometry
+    const geometry = new THREE.BoxGeometry(finalSize.x, finalSize.y, finalSize.z);
+
+    // Apply offset by translating geometry vertices
+    geometry.translate(offset.x, offset.y, offset.z);
+
+    // Create material based on shading mode
+    const material = this.createMaterial(shape);
+
+    const mesh = new THREE.Mesh(geometry, material);
+    mesh.userData.shapeType = "box";
+    mesh.userData.originalSize = size;
+    mesh.userData.shadingMode = shape.shadingMode;
+
+    // Handle double-sided
+    if (shape.doubleSided) {
+      material.side = THREE.DoubleSide;
+    }
+
+    return mesh;
+  }
+
+  /**
+   * Create a quad (plane) mesh from shape data
+   */
+  private createQuad(shape: BlockyShape): THREE.Mesh {
+    const size = shape.settings.size ?? { x: 1, y: 1, z: 0 };
+    const stretch = shape.stretch ?? DEFAULT_STRETCH;
+    const offset = shape.offset ?? DEFAULT_POSITION;
+    const normal = shape.settings.normal ?? "+Z";
+
+    // Determine plane dimensions based on normal direction
+    let width: number, height: number;
+    switch (normal) {
+      case "+X":
+      case "-X":
+        width = size.z * stretch.z;
+        height = size.y * stretch.y;
+        break;
+      case "+Y":
+      case "-Y":
+        width = size.x * stretch.x;
+        height = size.z * stretch.z;
+        break;
+      case "+Z":
+      case "-Z":
+      default:
+        width = size.x * stretch.x;
+        height = size.y * stretch.y;
+        break;
+    }
+
+    const geometry = new THREE.PlaneGeometry(width, height);
+
+    // Rotate plane based on normal direction
+    switch (normal) {
+      case "+X":
+        geometry.rotateY(Math.PI / 2);
+        break;
+      case "-X":
+        geometry.rotateY(-Math.PI / 2);
+        break;
+      case "+Y":
+        geometry.rotateX(-Math.PI / 2);
+        break;
+      case "-Y":
+        geometry.rotateX(Math.PI / 2);
+        break;
+      case "-Z":
+        geometry.rotateY(Math.PI);
+        break;
+      // +Z is default orientation
+    }
+
+    geometry.translate(offset.x, offset.y, offset.z);
+
+    const material = this.createMaterial(shape);
+    material.side = shape.doubleSided ? THREE.DoubleSide : THREE.FrontSide;
+
+    const mesh = new THREE.Mesh(geometry, material);
+    mesh.userData.shapeType = "quad";
+    mesh.userData.shadingMode = shape.shadingMode;
+
+    return mesh;
+  }
+
+  /**
+   * Create material based on shading mode
+   * Phase 1: Basic color material, texture mapping in Phase 2
+   */
+  private createMaterial(shape: BlockyShape): THREE.MeshStandardMaterial {
+    const baseColor = 0x888888; // Gray placeholder until texture is applied
+
+    switch (shape.shadingMode) {
+      case "fullbright":
+        return new THREE.MeshStandardMaterial({
+          color: baseColor,
+          emissive: baseColor,
+          emissiveIntensity: 1,
+          roughness: 1,
+          metalness: 0,
+        });
+
+      case "flat":
+        return new THREE.MeshStandardMaterial({
+          color: baseColor,
+          flatShading: true,
+          roughness: 0.9,
+          metalness: 0,
+        });
+
+      case "reflective":
+        return new THREE.MeshStandardMaterial({
+          color: baseColor,
+          roughness: 0.1,
+          metalness: 0.8,
+        });
+
+      case "standard":
+      default:
+        return new THREE.MeshStandardMaterial({
+          color: baseColor,
+          roughness: 0.7,
+          metalness: 0,
+        });
+    }
+  }
+}
+
+/**
+ * Helper to apply a texture to all meshes in a loaded model
+ * Phase 1: Simple texture application without UV mapping
+ */
+export function applyTextureToModel(
+  model: THREE.Group,
+  texture: THREE.Texture
+): void {
+  // Configure texture for pixel art (no filtering)
+  texture.magFilter = THREE.NearestFilter;
+  texture.minFilter = THREE.NearestFilter;
+  texture.colorSpace = THREE.SRGBColorSpace;
+
+  model.traverse((object) => {
+    if (object instanceof THREE.Mesh) {
+      const material = object.material as THREE.MeshStandardMaterial;
+      if (material.isMeshStandardMaterial) {
+        material.map = texture;
+        material.color.setHex(0xffffff); // Reset color to white when texture applied
+        material.needsUpdate = true;
+      }
+    }
+  });
+}

package/src/main.ts

@@ -0,0 +1,290 @@
+import * as THREE from "three";
+import { ViewerController } from "./viewer/ViewerController";
+import { Editor } from "./editor/Editor";
+import { PropertyPanel } from "./ui/PropertyPanel";
+import { HierarchyPanel } from "./ui/HierarchyPanel";
+import { UVEditor } from "./ui/UVEditor";
+import { Serializer } from "./editor/Serializer";
+import "./styles.css";
+
+// Global instances
+let viewer: ViewerController;
+let editor: Editor;
+let _propertyPanel: PropertyPanel;
+let hierarchyPanel: HierarchyPanel;
+let _uvEditor: UVEditor;
+let serializer: Serializer;
+
+function init(): void {
+  const container = document.getElementById("viewport");
+  if (!container) {
+    console.error("Viewport container not found");
+    return;
+  }
+
+  // Initialize viewer
+  viewer = new ViewerController({ container });
+
+  // Initialize editor
+  editor = new Editor({
+    scene: viewer.scene,
+    camera: viewer.camera,
+    renderer: viewer.renderer,
+    controls: viewer.controls,
+    domElement: container,
+  });
+
+  // Initialize serializer
+  serializer = new Serializer();
+
+  // Initialize UI panels
+  _propertyPanel = new PropertyPanel(editor, "property-panel");
+  hierarchyPanel = new HierarchyPanel(editor, "hierarchy-panel");
+  _uvEditor = new UVEditor(editor, "uv-panel");
+
+  // Setup file inputs
+  setupFileInputs();
+
+  // Setup toolbar buttons
+  setupToolbar();
+
+  // Setup keyboard shortcuts
+  setupKeyboardShortcuts();
+
+  // Setup collapsible panels
+  setupCollapsiblePanels();
+
+  // Setup editor event handlers
+  setupEditorEvents();
+
+  // Log ready
+  console.log("BlockyModel Editor initialized");
+  updateStatus("Ready - Drag & drop files or use the toolbar");
+}
+
+function setupFileInputs(): void {
+  // Model file input
+  const modelInput = document.getElementById("model-input") as HTMLInputElement;
+  modelInput?.addEventListener("change", async (e) => {
+    const file = (e.target as HTMLInputElement).files?.[0];
+    if (file) {
+      await loadModel(file);
+    }
+  });
+
+  // Texture file input
+  const textureInput = document.getElementById("texture-input") as HTMLInputElement;
+  textureInput?.addEventListener("change", async (e) => {
+    const file = (e.target as HTMLInputElement).files?.[0];
+    if (file) {
+      try {
+        updateStatus("Applying texture...");
+        await viewer.loadTexture(file);
+        updateStatus(`Texture applied: ${file.name}`);
+      } catch (error) {
+        updateStatus(`Error: ${error}`);
+      }
+    }
+  });
+
+  // Wireframe toggle
+  const wireframeToggle = document.getElementById("wireframe-toggle") as HTMLInputElement;
+  wireframeToggle?.addEventListener("change", (e) => {
+    viewer.toggleWireframe((e.target as HTMLInputElement).checked);
+  });
+
+  // Drag and drop support
+  const viewport = document.getElementById("viewport");
+  if (viewport) {
+    viewport.addEventListener("dragover", (e) => {
+      e.preventDefault();
+      viewport.classList.add("drag-over");
+    });
+
+    viewport.addEventListener("dragleave", () => {
+      viewport.classList.remove("drag-over");
+    });
+
+    viewport.addEventListener("drop", async (e) => {
+      e.preventDefault();
+      viewport.classList.remove("drag-over");
+
+      const files = e.dataTransfer?.files;
+      if (!files?.length) return;
+
+      for (const file of files) {
+        if (file.name.endsWith(".blockymodel")) {
+          await loadModel(file);
+        } else if (file.name.match(/\.(png|jpg|jpeg)$/i)) {
+          await viewer.loadTexture(file);
+          updateStatus(`Texture applied: ${file.name}`);
+        }
+      }
+    });
+  }
+}
+
+async function loadModel(file: File): Promise<void> {
+  try {
+    updateStatus("Loading model...");
+    const model = await viewer.loadModel(file);
+    editor.setModel(model);
+    hierarchyPanel.refresh();
+    updateStatus(`Loaded: ${file.name}`);
+  } catch (error) {
+    updateStatus(`Error: ${error}`);
+  }
+}
+
+function setupToolbar(): void {
+  // Reset camera button
+  const resetBtn = document.getElementById("reset-camera");
+  resetBtn?.addEventListener("click", () => {
+    viewer.resetCamera();
+  });
+
+  // Save button
+  const saveBtn = document.getElementById("save-model");
+  saveBtn?.addEventListener("click", () => {
+    const model = editor.getModel();
+    if (model) {
+      serializer.download(model, "model.blockymodel");
+      updateStatus("Model saved");
+    } else {
+      updateStatus("No model to save");
+    }
+  });
+
+  // Undo button
+  const undoBtn = document.getElementById("undo-btn") as HTMLButtonElement;
+  undoBtn?.addEventListener("click", () => {
+    editor.undo();
+  });
+
+  // Redo button
+  const redoBtn = document.getElementById("redo-btn") as HTMLButtonElement;
+  redoBtn?.addEventListener("click", () => {
+    editor.redo();
+  });
+
+  // Mode buttons
+  const modeTranslate = document.getElementById("mode-translate");
+  const modeRotate = document.getElementById("mode-rotate");
+  const modeScale = document.getElementById("mode-scale");
+
+  modeTranslate?.addEventListener("click", () => {
+    editor.setTransformMode("translate");
+  });
+
+  modeRotate?.addEventListener("click", () => {
+    editor.setTransformMode("rotate");
+  });
+
+  modeScale?.addEventListener("click", () => {
+    editor.setTransformMode("scale");
+  });
+}
+
+function setupKeyboardShortcuts(): void {
+  document.addEventListener("keydown", (e) => {
+    // Ignore if in input field
+    if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+      return;
+    }
+
+    // Undo/Redo
+    if (e.ctrlKey || e.metaKey) {
+      if (e.key === "z") {
+        e.preventDefault();
+        if (e.shiftKey) {
+          editor.redo();
+        } else {
+          editor.undo();
+        }
+      } else if (e.key === "y") {
+        e.preventDefault();
+        editor.redo();
+      } else if (e.key === "s") {
+        e.preventDefault();
+        const model = editor.getModel();
+        if (model) {
+          serializer.download(model, "model.blockymodel");
+          updateStatus("Model saved");
+        }
+      }
+    }
+  });
+}
+
+function setupCollapsiblePanels(): void {
+  document.querySelectorAll(".panel-header.collapsible").forEach((header) => {
+    header.addEventListener("click", () => {
+      const targetId = header.getAttribute("data-target");
+      if (targetId) {
+        const content = document.getElementById(targetId);
+        if (content) {
+          header.classList.toggle("collapsed");
+          content.classList.toggle("collapsed");
+        }
+      }
+    });
+  });
+}
+
+function setupEditorEvents(): void {
+  // Selection changed
+  editor.on("selectionChanged", (object) => {
+    const selectionInfo = document.getElementById("selection-info");
+    if (selectionInfo) {
+      if (object) {
+        const obj = object as THREE.Object3D;
+        selectionInfo.textContent = `Selected: ${obj.name || "(unnamed)"}`;
+      } else {
+        selectionInfo.textContent = "";
+      }
+    }
+  });
+
+  // Mode changed
+  editor.on("modeChanged", (mode) => {
+    const modeInfo = document.getElementById("mode-info");
+    if (modeInfo) {
+      const modeStr = mode as string;
+      modeInfo.textContent = `Mode: ${modeStr.charAt(0).toUpperCase() + modeStr.slice(1)}`;
+    }
+
+    // Update mode buttons
+    document.querySelectorAll(".mode-btn").forEach((btn) => {
+      btn.classList.remove("active");
+    });
+    const activeBtn = document.getElementById(`mode-${mode}`);
+    activeBtn?.classList.add("active");
+  });
+
+  // History changed
+  editor.on("historyChanged", () => {
+    const undoBtn = document.getElementById("undo-btn") as HTMLButtonElement;
+    const redoBtn = document.getElementById("redo-btn") as HTMLButtonElement;
+
+    if (undoBtn) {
+      undoBtn.disabled = !editor.canUndo();
+    }
+    if (redoBtn) {
+      redoBtn.disabled = !editor.canRedo();
+    }
+  });
+}
+
+function updateStatus(message: string): void {
+  const status = document.getElementById("status");
+  if (status) {
+    status.textContent = message;
+  }
+}
+
+// Initialize when DOM is ready
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}