pixelweaver 0.1.0

package/src/lib/leveleditor/map-state.svelte.ts

@@ -0,0 +1,372 @@
+/**
+ * Map State -- reactive state for the isometric level editor.
+ *
+ * Manages a layered map with tile, entity, and collision layers.
+ * Uses Svelte 5 runes for reactivity so that UI components automatically
+ * update when the map changes.
+ */
+
+// --- Interfaces ---
+
+export interface TilePlacement {
+  projectRef: string;    // PixelWeaver project name used as tile source
+  canvasRef: string;     // canvas name within the project
+  frameIndex: number;    // which frame to display
+  height: number;        // elevation (integer, half, or continuous)
+}
+
+export interface EntityPlacement {
+  id: string;
+  projectRef: string;
+  canvasRef: string;
+  x: number;             // screen position (free placement)
+  y: number;
+  height: number;
+  properties: Record<string, string>;  // key-value metadata
+}
+
+export interface CollisionShape {
+  id: string;
+  type: 'rect' | 'polygon';
+  // For rect: [topLeft, bottomRight]; for polygon: ordered vertices
+  points: { x: number; y: number }[];
+}
+
+export interface MapLayer {
+  id: string;
+  name: string;
+  type: 'tile' | 'entity' | 'collision';
+  visible: boolean;
+  tiles?: Map<string, TilePlacement>;       // "col,row" -> placement (tile layers)
+  entities?: EntityPlacement[];              // entity layers
+  collisionShapes?: CollisionShape[];        // collision layers
+}
+
+/** Serialized form of MapLayer (Maps become plain objects). */
+interface SerializedLayer {
+  id: string;
+  name: string;
+  type: 'tile' | 'entity' | 'collision';
+  visible: boolean;
+  tiles?: Record<string, TilePlacement>;
+  entities?: EntityPlacement[];
+  collisionShapes?: CollisionShape[];
+}
+
+/** Grid projection mode. Affects rendering and Tiled export orientation. */
+export type GridMode = 'iso' | 'ortho';
+
+interface SerializedMapState {
+  layers: SerializedLayer[];
+  activeLayerId: string;
+  gridCols: number;
+  gridRows: number;
+  tileWidth: number;
+  tileHeight: number;
+  /** Optional for backward compat with maps saved before activeTile existed. */
+  activeTile?: TilePlacement | null;
+  /** Optional for backward compat with maps saved before gridMode existed. */
+  gridMode?: GridMode;
+}
+
+// --- Reactive state ---
+
+let layers: MapLayer[] = $state([]);
+let activeLayerId: string = $state('');
+let gridCols: number = $state(20);
+let gridRows: number = $state(20);
+let tileWidth: number = $state(32);
+let tileHeight: number = $state(16);
+// Currently selected tile to paint with. null = nothing selected -> paint is a no-op.
+let activeTile: TilePlacement | null = $state(null);
+// Grid projection: 'iso' = isometric diamond, 'ortho' = axis-aligned rectangles.
+let gridMode: GridMode = $state('iso');
+
+// --- Helper: generate a unique ID ---
+
+function uid(): string {
+  return crypto.randomUUID();
+}
+
+// --- Layer key helper ---
+
+/** Create the tile lookup key from column and row. */
+function tileKey(col: number, row: number): string {
+  return `${String(col)},${String(row)}`;
+}
+
+// --- Operations ---
+
+function addLayer(name: string, type: MapLayer['type']): MapLayer {
+  const layer: MapLayer = {
+    id: uid(),
+    name,
+    type,
+    visible: true,
+  };
+  if (type === 'tile') layer.tiles = new Map();
+  if (type === 'entity') layer.entities = [];
+  if (type === 'collision') layer.collisionShapes = [];
+
+  layers = [...layers, layer];
+  activeLayerId = layer.id;
+  return layer;
+}
+
+function removeLayer(id: string): void {
+  layers = layers.filter((l) => l.id !== id);
+  // If the removed layer was active, switch to the first remaining layer
+  if (activeLayerId === id) {
+    activeLayerId = layers[0]?.id ?? '';
+  }
+}
+
+/** Move a layer from one index to another (splice-based reorder). */
+function moveLayer(fromIndex: number, toIndex: number): void {
+  if (fromIndex === toIndex) return;
+  if (fromIndex < 0 || fromIndex >= layers.length) return;
+  if (toIndex < 0 || toIndex >= layers.length) return;
+  const copy = [...layers];
+  const [removed] = copy.splice(fromIndex, 1);
+  copy.splice(toIndex, 0, removed!);
+  layers = copy;
+}
+
+function findLayer(id: string): MapLayer | undefined {
+  return layers.find((l) => l.id === id);
+}
+
+function placeTile(layerId: string, col: number, row: number, tile: TilePlacement): void {
+  const layer = findLayer(layerId);
+  if (!layer || layer.type !== 'tile' || !layer.tiles) return;
+  layer.tiles.set(tileKey(col, row), tile);
+}
+
+function removeTile(layerId: string, col: number, row: number): void {
+  const layer = findLayer(layerId);
+  if (!layer || layer.type !== 'tile' || !layer.tiles) return;
+  layer.tiles.delete(tileKey(col, row));
+}
+
+function addEntity(layerId: string, entity: Omit<EntityPlacement, 'id'>): EntityPlacement {
+  const layer = findLayer(layerId);
+  if (!layer || layer.type !== 'entity' || !layer.entities) {
+    throw new Error(`Layer "${layerId}" is not an entity layer`);
+  }
+  const placed: EntityPlacement = { ...entity, id: uid() };
+  layer.entities.push(placed);
+  return placed;
+}
+
+/** Re-insert an entity with its original ID (used by undo). */
+function restoreEntity(layerId: string, entity: EntityPlacement): void {
+  const layer = findLayer(layerId);
+  if (!layer || layer.type !== 'entity' || !layer.entities) return;
+  layer.entities.push(entity);
+}
+
+function removeEntity(layerId: string, entityId: string): void {
+  const layer = findLayer(layerId);
+  if (!layer || layer.type !== 'entity' || !layer.entities) return;
+  const idx = layer.entities.findIndex((e) => e.id === entityId);
+  if (idx !== -1) layer.entities.splice(idx, 1);
+}
+
+function updateEntityProperties(
+  layerId: string,
+  entityId: string,
+  properties: Record<string, string>,
+): void {
+  const layer = findLayer(layerId);
+  if (!layer || layer.type !== 'entity' || !layer.entities) return;
+  const entity = layer.entities.find((e) => e.id === entityId);
+  if (entity) {
+    entity.properties = { ...entity.properties, ...properties };
+  }
+}
+
+function addCollisionShape(
+  layerId: string,
+  shape: Omit<CollisionShape, 'id'>,
+): CollisionShape {
+  const layer = findLayer(layerId);
+  if (!layer || layer.type !== 'collision' || !layer.collisionShapes) {
+    throw new Error(`Layer "${layerId}" is not a collision layer`);
+  }
+  const placed: CollisionShape = { ...shape, id: uid() };
+  layer.collisionShapes.push(placed);
+  return placed;
+}
+
+/** Re-insert a collision shape with its original ID (used by undo). */
+function restoreCollisionShape(layerId: string, shape: CollisionShape): void {
+  const layer = findLayer(layerId);
+  if (!layer || layer.type !== 'collision' || !layer.collisionShapes) return;
+  layer.collisionShapes.push(shape);
+}
+
+function removeCollisionShape(layerId: string, shapeId: string): void {
+  const layer = findLayer(layerId);
+  if (!layer || layer.type !== 'collision' || !layer.collisionShapes) return;
+  const idx = layer.collisionShapes.findIndex((s) => s.id === shapeId);
+  if (idx !== -1) layer.collisionShapes.splice(idx, 1);
+}
+
+function moveEntity(layerId: string, entityId: string, x: number, y: number): void {
+  const layer = findLayer(layerId);
+  if (!layer || layer.type !== 'entity' || !layer.entities) return;
+  const entity = layer.entities.find((e) => e.id === entityId);
+  if (entity) {
+    entity.x = x;
+    entity.y = y;
+  }
+}
+
+function getEntity(layerId: string, entityId: string): EntityPlacement | undefined {
+  const layer = findLayer(layerId);
+  if (!layer || layer.type !== 'entity' || !layer.entities) return undefined;
+  return layer.entities.find((e) => e.id === entityId);
+}
+
+function setEntityHeight(layerId: string, entityId: string, height: number): void {
+  const layer = findLayer(layerId);
+  if (!layer || layer.type !== 'entity' || !layer.entities) return;
+  const entity = layer.entities.find((e) => e.id === entityId);
+  if (entity) {
+    entity.height = height;
+  }
+}
+
+function updateCollisionShape(
+  layerId: string,
+  shapeId: string,
+  points: { x: number; y: number }[],
+): void {
+  const layer = findLayer(layerId);
+  if (!layer || layer.type !== 'collision' || !layer.collisionShapes) return;
+  const shape = layer.collisionShapes.find((s) => s.id === shapeId);
+  if (shape) {
+    shape.points = points;
+  }
+}
+
+function getCollisionShape(layerId: string, shapeId: string): CollisionShape | undefined {
+  const layer = findLayer(layerId);
+  if (!layer || layer.type !== 'collision' || !layer.collisionShapes) return undefined;
+  return layer.collisionShapes.find((s) => s.id === shapeId);
+}
+
+// --- Serialization ---
+
+function serialize(): SerializedMapState {
+  return {
+    layers: layers.map((l) => {
+      const serialized: SerializedLayer = {
+        id: l.id,
+        name: l.name,
+        type: l.type,
+        visible: l.visible,
+      };
+      if (l.tiles) {
+        serialized.tiles = Object.fromEntries(l.tiles);
+      }
+      if (l.entities) {
+        serialized.entities = [...l.entities];
+      }
+      if (l.collisionShapes) {
+        serialized.collisionShapes = [...l.collisionShapes];
+      }
+      return serialized;
+    }),
+    activeLayerId,
+    gridCols,
+    gridRows,
+    tileWidth,
+    tileHeight,
+    activeTile,
+    gridMode,
+  };
+}
+
+function deserialize(data: SerializedMapState): void {
+  layers = data.layers.map((l) => {
+    const layer: MapLayer = {
+      id: l.id,
+      name: l.name,
+      type: l.type,
+      visible: l.visible,
+    };
+    if (l.tiles) {
+      layer.tiles = new Map(Object.entries(l.tiles));
+    }
+    if (l.entities) {
+      layer.entities = [...l.entities];
+    }
+    if (l.collisionShapes) {
+      layer.collisionShapes = [...l.collisionShapes];
+    }
+    return layer;
+  });
+  activeLayerId = data.activeLayerId;
+  gridCols = data.gridCols;
+  gridRows = data.gridRows;
+  tileWidth = data.tileWidth;
+  tileHeight = data.tileHeight;
+  // Backward compat: older serialized maps may not have these fields.
+  activeTile = data.activeTile ?? null;
+  gridMode = data.gridMode ?? 'iso';
+}
+
+// --- Reset (for tests) ---
+
+function _resetForTesting(): void {
+  layers = [];
+  activeLayerId = '';
+  gridCols = 20;
+  gridRows = 20;
+  tileWidth = 32;
+  tileHeight = 16;
+  activeTile = null;
+  gridMode = 'iso';
+}
+
+// --- Public API ---
+
+export const mapState = {
+  get layers() { return layers; },
+  get activeLayerId() { return activeLayerId; },
+  set activeLayerId(id: string) { activeLayerId = id; },
+  get gridCols() { return gridCols; },
+  set gridCols(v: number) { gridCols = v; },
+  get gridRows() { return gridRows; },
+  set gridRows(v: number) { gridRows = v; },
+  get tileWidth() { return tileWidth; },
+  set tileWidth(v: number) { tileWidth = v; },
+  get tileHeight() { return tileHeight; },
+  set tileHeight(v: number) { tileHeight = v; },
+  get activeTile() { return activeTile; },
+  set activeTile(v: TilePlacement | null) { activeTile = v; },
+  get gridMode() { return gridMode; },
+  set gridMode(v: GridMode) { gridMode = v; },
+
+  addLayer,
+  removeLayer,
+  moveLayer,
+  placeTile,
+  removeTile,
+  addEntity,
+  restoreEntity,
+  removeEntity,
+  updateEntityProperties,
+  moveEntity,
+  getEntity,
+  setEntityHeight,
+  addCollisionShape,
+  restoreCollisionShape,
+  removeCollisionShape,
+  updateCollisionShape,
+  getCollisionShape,
+  serialize,
+  deserialize,
+  _resetForTesting,
+};

package/src/lib/leveleditor/map-state.test.ts

@@ -0,0 +1,243 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mapState } from './map-state.svelte.js';
+
+describe('MapState', () => {
+  beforeEach(() => {
+    mapState._resetForTesting();
+  });
+
+  describe('layer management', () => {
+    it('should add a tile layer with an empty tiles map', () => {
+      const layer = mapState.addLayer('Ground', 'tile');
+      expect(layer.name).toBe('Ground');
+      expect(layer.type).toBe('tile');
+      expect(layer.visible).toBe(true);
+      expect(layer.tiles).toBeInstanceOf(Map);
+      expect(layer.tiles?.size).toBe(0);
+      expect(mapState.layers).toHaveLength(1);
+      expect(mapState.activeLayerId).toBe(layer.id);
+    });
+
+    it('should add an entity layer with an empty entities array', () => {
+      const layer = mapState.addLayer('NPCs', 'entity');
+      expect(layer.type).toBe('entity');
+      expect(layer.entities).toEqual([]);
+    });
+
+    it('should add a collision layer with an empty shapes array', () => {
+      const layer = mapState.addLayer('Walls', 'collision');
+      expect(layer.type).toBe('collision');
+      expect(layer.collisionShapes).toEqual([]);
+    });
+
+    it('should remove a layer by id', () => {
+      const l1 = mapState.addLayer('A', 'tile');
+      const l2 = mapState.addLayer('B', 'tile');
+      mapState.removeLayer(l1.id);
+      expect(mapState.layers).toHaveLength(1);
+      expect(mapState.layers[0]?.id).toBe(l2.id);
+    });
+
+    it('should switch active layer when the active one is removed', () => {
+      const l1 = mapState.addLayer('A', 'tile');
+      mapState.addLayer('B', 'tile');
+      // Active is now B (last added)
+      mapState.activeLayerId = l1.id;
+      mapState.removeLayer(l1.id);
+      // Should fallback to the first remaining layer
+      expect(mapState.activeLayerId).toBe(mapState.layers[0]?.id);
+    });
+  });
+
+  describe('tile operations', () => {
+    it('should place and retrieve a tile', () => {
+      const layer = mapState.addLayer('Ground', 'tile');
+      const placement = {
+        projectRef: 'myProject',
+        canvasRef: 'grassTile',
+        frameIndex: 0,
+        height: 0,
+      };
+      mapState.placeTile(layer.id, 3, 5, placement);
+      expect(layer.tiles?.get('3,5')).toEqual(placement);
+    });
+
+    it('should overwrite an existing tile at the same position', () => {
+      const layer = mapState.addLayer('Ground', 'tile');
+      mapState.placeTile(layer.id, 1, 1, {
+        projectRef: 'a', canvasRef: 'b', frameIndex: 0, height: 0,
+      });
+      mapState.placeTile(layer.id, 1, 1, {
+        projectRef: 'c', canvasRef: 'd', frameIndex: 1, height: 2,
+      });
+      expect(layer.tiles?.get('1,1')?.projectRef).toBe('c');
+    });
+
+    it('should remove a tile', () => {
+      const layer = mapState.addLayer('Ground', 'tile');
+      mapState.placeTile(layer.id, 2, 3, {
+        projectRef: 'p', canvasRef: 'c', frameIndex: 0, height: 0,
+      });
+      mapState.removeTile(layer.id, 2, 3);
+      expect(layer.tiles?.has('2,3')).toBe(false);
+    });
+  });
+
+  describe('entity operations', () => {
+    // Helper: re-fetch a layer from mapState.layers to get the current proxy state
+    function getLayer(id: string) {
+      const layer = mapState.layers.find((l) => l.id === id);
+      if (!layer) throw new Error(`Layer ${id} not found in test`);
+      return layer;
+    }
+
+    it('should add an entity and assign it an id', () => {
+      const layer = mapState.addLayer('Entities', 'entity');
+      const entity = mapState.addEntity(layer.id, {
+        projectRef: 'proj',
+        canvasRef: 'hero',
+        x: 100,
+        y: 200,
+        height: 0,
+        properties: { name: 'Player' },
+      });
+      expect(entity.id).toBeDefined();
+      expect(entity.x).toBe(100);
+      expect(getLayer(layer.id).entities).toHaveLength(1);
+    });
+
+    it('should remove an entity by id', () => {
+      const layer = mapState.addLayer('Entities', 'entity');
+      const e1 = mapState.addEntity(layer.id, {
+        projectRef: 'p', canvasRef: 'c', x: 0, y: 0, height: 0, properties: {},
+      });
+      const e2 = mapState.addEntity(layer.id, {
+        projectRef: 'p', canvasRef: 'c', x: 50, y: 50, height: 0, properties: {},
+      });
+      mapState.removeEntity(layer.id, e1.id);
+      const current = getLayer(layer.id);
+      expect(current.entities).toHaveLength(1);
+      expect(current.entities?.[0]?.id).toBe(e2.id);
+    });
+
+    it('should update entity properties by merging', () => {
+      const layer = mapState.addLayer('Entities', 'entity');
+      const entity = mapState.addEntity(layer.id, {
+        projectRef: 'p', canvasRef: 'c', x: 0, y: 0, height: 0,
+        properties: { name: 'NPC', dialogue: 'Hello' },
+      });
+      mapState.updateEntityProperties(layer.id, entity.id, { dialogue: 'Goodbye', quest: 'main' });
+      const updated = getLayer(layer.id).entities?.find((e) => e.id === entity.id);
+      if (!updated) throw new Error('updated entity missing');
+      expect(updated.properties).toEqual({
+        name: 'NPC',
+        dialogue: 'Goodbye',
+        quest: 'main',
+      });
+    });
+  });
+
+  describe('collision shape operations', () => {
+    function getLayer(id: string) {
+      const layer = mapState.layers.find((l) => l.id === id);
+      if (!layer) throw new Error(`Layer ${id} not found in test`);
+      return layer;
+    }
+
+    it('should add a rect collision shape', () => {
+      const layer = mapState.addLayer('Collision', 'collision');
+      const shape = mapState.addCollisionShape(layer.id, {
+        type: 'rect',
+        points: [{ x: 0, y: 0 }, { x: 32, y: 32 }],
+      });
+      expect(shape.id).toBeDefined();
+      expect(shape.type).toBe('rect');
+      expect(getLayer(layer.id).collisionShapes).toHaveLength(1);
+    });
+
+    it('should add a polygon collision shape', () => {
+      const layer = mapState.addLayer('Collision', 'collision');
+      const shape = mapState.addCollisionShape(layer.id, {
+        type: 'polygon',
+        points: [{ x: 0, y: 0 }, { x: 16, y: 0 }, { x: 8, y: 16 }],
+      });
+      expect(shape.type).toBe('polygon');
+      expect(shape.points).toHaveLength(3);
+    });
+
+    it('should remove a collision shape by id', () => {
+      const layer = mapState.addLayer('Collision', 'collision');
+      const s1 = mapState.addCollisionShape(layer.id, {
+        type: 'rect', points: [{ x: 0, y: 0 }, { x: 10, y: 10 }],
+      });
+      mapState.addCollisionShape(layer.id, {
+        type: 'rect', points: [{ x: 20, y: 20 }, { x: 30, y: 30 }],
+      });
+      mapState.removeCollisionShape(layer.id, s1.id);
+      expect(getLayer(layer.id).collisionShapes).toHaveLength(1);
+    });
+  });
+
+  describe('serialization', () => {
+    it('should roundtrip serialize/deserialize with all layer types', () => {
+      const tileLayer = mapState.addLayer('Ground', 'tile');
+      mapState.placeTile(tileLayer.id, 0, 0, {
+        projectRef: 'p', canvasRef: 'grass', frameIndex: 0, height: 0,
+      });
+      mapState.placeTile(tileLayer.id, 1, 2, {
+        projectRef: 'p', canvasRef: 'stone', frameIndex: 1, height: 1,
+      });
+
+      const entityLayer = mapState.addLayer('Entities', 'entity');
+      mapState.addEntity(entityLayer.id, {
+        projectRef: 'p', canvasRef: 'hero', x: 50, y: 60, height: 0,
+        properties: { type: 'player' },
+      });
+
+      const collisionLayer = mapState.addLayer('Collision', 'collision');
+      mapState.addCollisionShape(collisionLayer.id, {
+        type: 'rect', points: [{ x: 0, y: 0 }, { x: 32, y: 32 }],
+      });
+
+      mapState.gridCols = 30;
+      mapState.gridRows = 25;
+
+      const serialized = mapState.serialize();
+
+      // Reset and deserialize
+      mapState._resetForTesting();
+      expect(mapState.layers).toHaveLength(0);
+
+      mapState.deserialize(serialized);
+
+      expect(mapState.layers).toHaveLength(3);
+      expect(mapState.gridCols).toBe(30);
+      expect(mapState.gridRows).toBe(25);
+
+      // Verify tile data survived
+      const restoredTile = mapState.layers[0];
+      expect(restoredTile?.tiles).toBeInstanceOf(Map);
+      expect(restoredTile?.tiles?.get('0,0')?.canvasRef).toBe('grass');
+      expect(restoredTile?.tiles?.get('1,2')?.canvasRef).toBe('stone');
+
+      // Verify entity data survived
+      const restoredEntity = mapState.layers[1];
+      expect(restoredEntity?.entities).toHaveLength(1);
+      expect(restoredEntity?.entities?.[0]?.properties["type"]).toBe('player');
+
+      // Verify collision data survived
+      const restoredCollision = mapState.layers[2];
+      expect(restoredCollision?.collisionShapes).toHaveLength(1);
+      expect(restoredCollision?.collisionShapes?.[0]?.type).toBe('rect');
+    });
+
+    it('should produce JSON-serializable output', () => {
+      mapState.addLayer('Test', 'tile');
+      const serialized = mapState.serialize();
+      const json = JSON.stringify(serialized);
+      const parsed = JSON.parse(json) as { layers: { name: string }[] };
+      expect(parsed.layers).toHaveLength(1);
+      expect(parsed.layers[0]?.name).toBe('Test');
+    });
+  });
+});

package/src/lib/leveleditor/tile-picker-panel-plugin.ts

@@ -0,0 +1,25 @@
+/**
+ * Tile Picker Panel Plugin -- registers TilePickerPanel as a dockable
+ * panel in the right sidebar. Shows all tile sources as a selectable
+ * grid for the level editor.
+ *
+ * Discovered by bootstrap via the `*-plugin.ts` glob.
+ */
+
+import type { PluginModule } from '../core/plugin-loader.js';
+import TilePickerPanel from './TilePickerPanel.svelte';
+
+export const tilePickerPanelPlugin: PluginModule = {
+  name: 'leveleditor/tile-picker-panel',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    api.addPanel('tile-picker', {
+      title: 'Tile Picker',
+      component: TilePickerPanel,
+      position: 'right',
+      minWidth: 120,
+      maxWidth: 280,
+    });
+  },
+};