@mecha.im/cli 0.3.4

package/agent/dashboard/src/pixel-engine/editor/editorActions.ts

@@ -0,0 +1,291 @@
+import { DEFAULT_NEUTRAL_COLOR } from '../constants.js';
+import { getCatalogEntry, getRotatedType, getToggledType } from '../layout/furnitureCatalog.js';
+import { getPlacementBlockedTiles } from '../layout/layoutSerializer.js';
+import type {
+  FloorColor,
+  OfficeLayout,
+  PlacedFurniture,
+  TileType as TileTypeVal,
+} from '../types.js';
+import { MAX_COLS, MAX_ROWS, TileType } from '../types.js';
+
+/** Paint a single tile with pattern and color. Returns new layout (immutable). */
+export function paintTile(
+  layout: OfficeLayout,
+  col: number,
+  row: number,
+  tileType: TileTypeVal,
+  color?: FloorColor,
+): OfficeLayout {
+  // Bounds-check col and row independently to prevent row aliasing
+  if (col < 0 || col >= layout.cols || row < 0 || row >= layout.rows) return layout;
+  const idx = row * layout.cols + col;
+
+  const existingColors = layout.tileColors || new Array(layout.tiles.length).fill(null);
+  const newColor =
+    color ??
+    (tileType === TileType.WALL || tileType === TileType.VOID
+      ? null
+      : { ...DEFAULT_NEUTRAL_COLOR });
+
+  // Check if anything actually changed
+  if (layout.tiles[idx] === tileType) {
+    const existingColor = existingColors[idx];
+    if (newColor === null && existingColor === null) return layout;
+    if (
+      newColor &&
+      existingColor &&
+      newColor.h === existingColor.h &&
+      newColor.s === existingColor.s &&
+      newColor.b === existingColor.b &&
+      newColor.c === existingColor.c &&
+      !!newColor.colorize === !!existingColor.colorize
+    )
+      return layout;
+  }
+
+  const tiles = [...layout.tiles];
+  tiles[idx] = tileType;
+  const tileColors = [...existingColors];
+  tileColors[idx] = newColor;
+  return { ...layout, tiles, tileColors };
+}
+
+/** Place furniture. Returns new layout (immutable). */
+export function placeFurniture(layout: OfficeLayout, item: PlacedFurniture): OfficeLayout {
+  if (!canPlaceFurniture(layout, item.type, item.col, item.row)) return layout;
+  return { ...layout, furniture: [...layout.furniture, item] };
+}
+
+/** Remove furniture by uid. Returns new layout (immutable). */
+export function removeFurniture(layout: OfficeLayout, uid: string): OfficeLayout {
+  const filtered = layout.furniture.filter((f) => f.uid !== uid);
+  if (filtered.length === layout.furniture.length) return layout;
+  return { ...layout, furniture: filtered };
+}
+
+/** Move furniture to new position. Returns new layout (immutable). */
+export function moveFurniture(
+  layout: OfficeLayout,
+  uid: string,
+  newCol: number,
+  newRow: number,
+): OfficeLayout {
+  const item = layout.furniture.find((f) => f.uid === uid);
+  if (!item) return layout;
+  if (!canPlaceFurniture(layout, item.type, newCol, newRow, uid)) return layout;
+  return {
+    ...layout,
+    furniture: layout.furniture.map((f) =>
+      f.uid === uid ? { ...f, col: newCol, row: newRow } : f,
+    ),
+  };
+}
+
+/** Rotate furniture to the next orientation. Returns new layout (immutable). */
+export function rotateFurniture(
+  layout: OfficeLayout,
+  uid: string,
+  direction: 'cw' | 'ccw',
+): OfficeLayout {
+  const item = layout.furniture.find((f) => f.uid === uid);
+  if (!item) return layout;
+  const newType = getRotatedType(item.type, direction);
+  if (!newType) return layout;
+  // Validate that the rotated type can be placed at the current position
+  if (!canPlaceFurniture(layout, newType, item.col, item.row, uid)) return layout;
+  return {
+    ...layout,
+    furniture: layout.furniture.map((f) => (f.uid === uid ? { ...f, type: newType } : f)),
+  };
+}
+
+/** Toggle furniture state (on/off). Returns new layout (immutable). */
+export function toggleFurnitureState(layout: OfficeLayout, uid: string): OfficeLayout {
+  const item = layout.furniture.find((f) => f.uid === uid);
+  if (!item) return layout;
+  const newType = getToggledType(item.type);
+  if (!newType) return layout;
+  return {
+    ...layout,
+    furniture: layout.furniture.map((f) => (f.uid === uid ? { ...f, type: newType } : f)),
+  };
+}
+
+/** For wall items, offset the row so the bottom row aligns with the hovered tile. */
+export function getWallPlacementRow(type: string, row: number): number {
+  const entry = getCatalogEntry(type);
+  if (!entry?.canPlaceOnWalls) return row;
+  return row - (entry.footprintH - 1);
+}
+
+/** Check if furniture can be placed at (col, row) without overlapping. */
+export function canPlaceFurniture(
+  layout: OfficeLayout,
+  type: string, // FurnitureType enum or asset ID
+  col: number,
+  row: number,
+  excludeUid?: string,
+): boolean {
+  const entry = getCatalogEntry(type);
+  if (!entry) return false;
+
+  // Check bounds — wall items may extend above the map (top rows hang above the wall)
+  if (entry.canPlaceOnWalls) {
+    const bottomRow = row + entry.footprintH - 1;
+    if (
+      col < 0 ||
+      col + entry.footprintW > layout.cols ||
+      bottomRow < 0 ||
+      bottomRow >= layout.rows
+    ) {
+      return false;
+    }
+  } else {
+    if (
+      col < 0 ||
+      row < 0 ||
+      col + entry.footprintW > layout.cols ||
+      row + entry.footprintH > layout.rows
+    ) {
+      return false;
+    }
+  }
+
+  // Wall/VOID placement check (background rows skip this check)
+  const bgRows = entry.backgroundTiles || 0;
+  for (let dr = 0; dr < entry.footprintH; dr++) {
+    if (dr < bgRows) continue;
+    if (row + dr < 0) continue; // row above map (wall items extending upward)
+    // Wall items: only the bottom row must be on wall tiles; upper rows can overlap VOID/anything
+    if (entry.canPlaceOnWalls && dr < entry.footprintH - 1) continue;
+    for (let dc = 0; dc < entry.footprintW; dc++) {
+      const idx = (row + dr) * layout.cols + (col + dc);
+      const tileVal = layout.tiles[idx];
+      if (entry.canPlaceOnWalls) {
+        if (tileVal !== TileType.WALL) return false;
+      } else {
+        if (tileVal === TileType.VOID) return false; // Cannot place on VOID
+        if (tileVal === TileType.WALL) return false; // Normal items cannot overlap walls
+      }
+    }
+  }
+
+  // Build occupied set excluding the item being moved, skipping background tile rows
+  const occupied = getPlacementBlockedTiles(layout.furniture, excludeUid);
+
+  // If this item can be placed on surfaces, build set of desk tiles to exclude from collision
+  let deskTiles: Set<string> | null = null;
+  if (entry.canPlaceOnSurfaces) {
+    deskTiles = new Set<string>();
+    for (const item of layout.furniture) {
+      if (item.uid === excludeUid) continue;
+      const itemEntry = getCatalogEntry(item.type);
+      if (!itemEntry || !itemEntry.isDesk) continue;
+      for (let dr = 0; dr < itemEntry.footprintH; dr++) {
+        for (let dc = 0; dc < itemEntry.footprintW; dc++) {
+          deskTiles.add(`${item.col + dc},${item.row + dr}`);
+        }
+      }
+    }
+  }
+
+  // Build set of tiles occupied by other surface items (prevent stacking)
+  let surfaceTiles: Set<string> | null = null;
+  if (entry.canPlaceOnSurfaces) {
+    surfaceTiles = new Set<string>();
+    for (const item of layout.furniture) {
+      if (item.uid === excludeUid) continue;
+      const itemEntry = getCatalogEntry(item.type);
+      if (!itemEntry || !itemEntry.canPlaceOnSurfaces) continue;
+      const itemBg = itemEntry.backgroundTiles || 0;
+      for (let dr = 0; dr < itemEntry.footprintH; dr++) {
+        if (dr < itemBg) continue;
+        for (let dc = 0; dc < itemEntry.footprintW; dc++) {
+          surfaceTiles.add(`${item.col + dc},${item.row + dr}`);
+        }
+      }
+    }
+  }
+
+  // Check overlap — also skip the NEW item's own background rows
+  const newBgRows = entry.backgroundTiles || 0;
+  for (let dr = 0; dr < entry.footprintH; dr++) {
+    if (dr < newBgRows) continue; // new item's background rows can overlap existing items
+    if (row + dr < 0) continue; // row above map (wall items extending upward)
+    for (let dc = 0; dc < entry.footprintW; dc++) {
+      const key = `${col + dc},${row + dr}`;
+      if (occupied.has(key) && !deskTiles?.has(key)) return false;
+      // Prevent stacking surface items on top of each other
+      if (surfaceTiles?.has(key)) return false;
+    }
+  }
+
+  return true;
+}
+
+export type ExpandDirection = 'left' | 'right' | 'up' | 'down';
+
+/**
+ * Expand layout by 1 tile in the given direction. New tiles are VOID.
+ * Furniture and tile indices are shifted when expanding left or up.
+ * Returns { layout, shift } or null if exceeding MAX_COLS/MAX_ROWS.
+ */
+export function expandLayout(
+  layout: OfficeLayout,
+  direction: ExpandDirection,
+): { layout: OfficeLayout; shift: { col: number; row: number } } | null {
+  const { cols, rows, tiles, furniture, tileColors } = layout;
+  const existingColors = tileColors || new Array(tiles.length).fill(null);
+
+  let newCols = cols;
+  let newRows = rows;
+  let shiftCol = 0;
+  let shiftRow = 0;
+
+  if (direction === 'right') {
+    newCols = cols + 1;
+  } else if (direction === 'left') {
+    newCols = cols + 1;
+    shiftCol = 1;
+  } else if (direction === 'down') {
+    newRows = rows + 1;
+  } else if (direction === 'up') {
+    newRows = rows + 1;
+    shiftRow = 1;
+  }
+
+  if (newCols > MAX_COLS || newRows > MAX_ROWS) return null;
+
+  // Build new tile array
+  const newTiles: TileTypeVal[] = new Array(newCols * newRows).fill(TileType.VOID as TileTypeVal);
+  const newColors: Array<FloorColor | null> = new Array(newCols * newRows).fill(null);
+
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < cols; c++) {
+      const oldIdx = r * cols + c;
+      const newIdx = (r + shiftRow) * newCols + (c + shiftCol);
+      newTiles[newIdx] = tiles[oldIdx];
+      newColors[newIdx] = existingColors[oldIdx];
+    }
+  }
+
+  // Shift furniture positions
+  const newFurniture: PlacedFurniture[] = furniture.map((f) => ({
+    ...f,
+    col: f.col + shiftCol,
+    row: f.row + shiftRow,
+  }));
+
+  return {
+    layout: {
+      ...layout,
+      cols: newCols,
+      rows: newRows,
+      tiles: newTiles,
+      tileColors: newColors,
+      furniture: newFurniture,
+    },
+    shift: { col: shiftCol, row: shiftRow },
+  };
+}

package/agent/dashboard/src/pixel-engine/editor/editorState.ts

@@ -0,0 +1,123 @@
+import { DEFAULT_FLOOR_COLOR, DEFAULT_WALL_COLOR, UNDO_STACK_MAX_SIZE } from '../constants.js';
+import type { FloorColor, OfficeLayout, TileType as TileTypeVal } from '../types.js';
+import { EditTool, TileType } from '../types.js';
+
+export class EditorState {
+  isEditMode = false;
+  activeTool: EditTool = EditTool.SELECT;
+  selectedTileType: TileTypeVal = TileType.FLOOR_1;
+  selectedFurnitureType = ''; // asset ID, set when catalog loads
+
+  // Floor color settings (applied to new tiles when painting)
+  floorColor: FloorColor = { ...DEFAULT_FLOOR_COLOR };
+
+  // Wall color settings (applied to new wall tiles when painting)
+  wallColor: FloorColor = { ...DEFAULT_WALL_COLOR };
+
+  // Selected wall set index (0-based, indexes into loaded wall sets)
+  selectedWallSet = 0;
+
+  // Tracks toggle direction during wall drag (true=adding walls, false=removing, null=undecided)
+  wallDragAdding: boolean | null = null;
+
+  // Picked furniture color (copied by pick tool, applied on placement)
+  pickedFurnitureColor: FloorColor | null = null;
+
+  // Ghost preview position
+  ghostCol = -1;
+  ghostRow = -1;
+  ghostValid = false;
+
+  // Selection
+  selectedFurnitureUid: string | null = null;
+
+  // Mouse drag state (tile paint)
+  isDragging = false;
+
+  // Undo / Redo stacks
+  undoStack: OfficeLayout[] = [];
+  redoStack: OfficeLayout[] = [];
+
+  // Dirty flag — true when layout differs from last save
+  isDirty = false;
+
+  // Drag-to-move state
+  dragUid: string | null = null;
+  dragStartCol = 0;
+  dragStartRow = 0;
+  dragOffsetCol = 0;
+  dragOffsetRow = 0;
+  isDragMoving = false;
+
+  pushUndo(layout: OfficeLayout): void {
+    this.undoStack.push(layout);
+    // Limit undo stack size
+    if (this.undoStack.length > UNDO_STACK_MAX_SIZE) {
+      this.undoStack.shift();
+    }
+  }
+
+  popUndo(): OfficeLayout | null {
+    return this.undoStack.pop() || null;
+  }
+
+  pushRedo(layout: OfficeLayout): void {
+    this.redoStack.push(layout);
+    if (this.redoStack.length > UNDO_STACK_MAX_SIZE) {
+      this.redoStack.shift();
+    }
+  }
+
+  popRedo(): OfficeLayout | null {
+    return this.redoStack.pop() || null;
+  }
+
+  clearRedo(): void {
+    this.redoStack = [];
+  }
+
+  clearSelection(): void {
+    this.selectedFurnitureUid = null;
+  }
+
+  clearGhost(): void {
+    this.ghostCol = -1;
+    this.ghostRow = -1;
+    this.ghostValid = false;
+  }
+
+  startDrag(
+    uid: string,
+    startCol: number,
+    startRow: number,
+    offsetCol: number,
+    offsetRow: number,
+  ): void {
+    this.dragUid = uid;
+    this.dragStartCol = startCol;
+    this.dragStartRow = startRow;
+    this.dragOffsetCol = offsetCol;
+    this.dragOffsetRow = offsetRow;
+    this.isDragMoving = false;
+  }
+
+  clearDrag(): void {
+    this.dragUid = null;
+    this.isDragMoving = false;
+  }
+
+  reset(): void {
+    this.activeTool = EditTool.SELECT;
+    this.selectedFurnitureUid = null;
+    this.ghostCol = -1;
+    this.ghostRow = -1;
+    this.ghostValid = false;
+    this.isDragging = false;
+    this.wallDragAdding = null;
+    this.undoStack = [];
+    this.redoStack = [];
+    this.isDirty = false;
+    this.dragUid = null;
+    this.isDragMoving = false;
+  }
+}