pixelweaver 0.1.0

package/src/lib/leveleditor/tile-source-registry.svelte.ts

@@ -0,0 +1,91 @@
+/**
+ * Tile Source Registry -- maps tile reference ids to live PixelBuffer getters.
+ *
+ * The level editor stores tile placements as abstract `(projectRef, canvasRef,
+ * frameIndex)` triples. To render those placements as actual pixels, the
+ * editor needs a way to look up the buffer behind each reference. This
+ * registry is that bridge: callers (a future tile picker UI, project loader,
+ * etc.) register lazy getters keyed by a string id, and the renderer reads
+ * the current buffer on every frame so source edits propagate live.
+ *
+ * Backed by SvelteMap so plugin UIs that iterate the registry stay reactive
+ * to register/unregister calls.
+ */
+import { SvelteMap } from 'svelte/reactivity';
+import type { PixelBuffer } from '../canvas/pixel-buffer.js';
+import type { TilePlacement } from './map-state.svelte.js';
+
+/** Canonical id format -- `"${projectRef}:${canvasRef}:${frameIndex}"`. */
+export function tileRefId(ref: {
+  projectRef: string;
+  canvasRef: string;
+  frameIndex: number;
+}): string {
+  return `${ref.projectRef}:${ref.canvasRef}:${String(ref.frameIndex)}`;
+}
+
+/** Build the canonical id for a TilePlacement. */
+export function placementToTileRefId(p: TilePlacement): string {
+  return tileRefId(p);
+}
+
+/** A registered entry: lazy getter so source edits propagate without re-registration. */
+interface TileSourceEntry {
+  getBuffer: () => PixelBuffer;
+}
+
+// Reactive store. SvelteMap mutations trigger re-renders in any reader.
+const entries = new SvelteMap<string, TileSourceEntry>();
+
+export const tileSourceRegistry = {
+  /**
+   * Register (or replace) a tile source under the given id.
+   * The getter is invoked on every render, so it should be cheap and
+   * always return the current buffer for that frame.
+   */
+  register(id: string, getBuffer: () => PixelBuffer): void {
+    entries.set(id, { getBuffer });
+  },
+
+  /** Remove a tile source. */
+  unregister(id: string): void {
+    entries.delete(id);
+  },
+
+  /** Resolve an id to its current PixelBuffer, or null if not registered. */
+  get(id: string): PixelBuffer | null {
+    const entry = entries.get(id);
+    if (!entry) return null;
+    try {
+      return entry.getBuffer();
+    } catch {
+      // A getter may throw if the underlying source was destroyed mid-frame.
+      // Treat as missing -- the renderer will fall back to its placeholder.
+      return null;
+    }
+  },
+
+  /** Whether an id is registered. */
+  has(id: string): boolean {
+    return entries.has(id);
+  },
+
+  /** All registered ids. Useful for a future tile picker UI. */
+  list(): string[] {
+    return Array.from(entries.keys());
+  },
+
+  /** Reactive read of the underlying map (for tile picker iteration). */
+  getAll(): ReadonlyMap<string, TileSourceEntry> {
+    return entries;
+  },
+
+  get size(): number {
+    return entries.size;
+  },
+
+  /** Test helper -- clears every entry. */
+  _resetForTesting(): void {
+    entries.clear();
+  },
+};

package/src/lib/leveleditor/tiled-export.test.ts

@@ -0,0 +1,144 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mapState } from './map-state.svelte.js';
+import { exportTiledMap } from './tiled-export.js';
+
+describe('tiled-export', () => {
+  beforeEach(() => {
+    mapState._resetForTesting();
+    mapState.gridCols = 10;
+    mapState.gridRows = 10;
+    mapState.tileWidth = 32;
+    mapState.tileHeight = 16;
+  });
+
+  it('should produce a valid TiledMap structure', () => {
+    const result = exportTiledMap(mapState, null);
+
+    expect(result.type).toBe('map');
+    expect(result.version).toBe('1.10');
+    expect(result.orientation).toBe('isometric');
+    expect(result.renderorder).toBe('right-down');
+    expect(result.width).toBe(10);
+    expect(result.height).toBe(10);
+    expect(result.tilewidth).toBe(32);
+    expect(result.tileheight).toBe(16);
+    expect(result.layers).toEqual([]);
+    expect(result.tilesets).toEqual([]);
+  });
+
+  it('should export tile layers with correct GID data', () => {
+    const layer = mapState.addLayer('Ground', 'tile');
+    mapState.placeTile(layer.id, 0, 0, {
+      projectRef: 'proj', canvasRef: 'grass', frameIndex: 0, height: 0,
+    });
+    mapState.placeTile(layer.id, 2, 1, {
+      projectRef: 'proj', canvasRef: 'grass', frameIndex: 0, height: 0,
+    });
+
+    const result = exportTiledMap(mapState, null);
+
+    expect(result.layers).toHaveLength(1);
+    const tiledLayer = result.layers[0];
+    if (!tiledLayer) throw new Error("missing layer");
+    expect(tiledLayer.type).toBe('tilelayer');
+    expect(tiledLayer.name).toBe('Ground');
+    expect(tiledLayer.data).toBeDefined();
+    expect(tiledLayer.data?.length).toBe(100); // 10x10
+
+    // GID 1 should be at position [0,0] (index 0) and [2,1] (index 12)
+    expect(tiledLayer.data?.[0]).toBe(1);
+    expect(tiledLayer.data?.[12]).toBe(1);
+    // Empty tile should be 0
+    expect(tiledLayer.data?.[1]).toBe(0);
+
+    // Tileset should be created (legacy path uses registry id format)
+    expect(result.tilesets).toHaveLength(1);
+    expect(result.tilesets[0]?.name).toBe('proj:grass:0');
+    expect(result.tilesets[0]?.firstgid).toBe(1);
+  });
+
+  it('should export entity layers as object groups', () => {
+    const layer = mapState.addLayer('NPCs', 'entity');
+    mapState.addEntity(layer.id, {
+      projectRef: 'proj',
+      canvasRef: 'hero',
+      x: 100,
+      y: 200,
+      height: 0,
+      properties: { name: 'Player', health: '100' },
+    });
+
+    const result = exportTiledMap(mapState, null);
+
+    expect(result.layers).toHaveLength(1);
+    const tiledLayer = result.layers[0];
+    if (!tiledLayer) throw new Error("missing layer");
+    expect(tiledLayer.type).toBe('objectgroup');
+    expect(tiledLayer.name).toBe('NPCs');
+    expect(tiledLayer.objects).toHaveLength(1);
+
+    const obj = tiledLayer.objects?.[0];
+    if (!obj) throw new Error("missing obj");
+    expect(obj.x).toBe(100);
+    expect(obj.y).toBe(200);
+    expect(obj.properties).toBeDefined();
+    expect(obj.properties).toHaveLength(2);
+    expect(obj.properties?.find((p) => p.name === 'name')?.value).toBe('Player');
+  });
+
+  it('should export collision shapes as object groups', () => {
+    const layer = mapState.addLayer('Collision', 'collision');
+    mapState.addCollisionShape(layer.id, {
+      type: 'rect',
+      points: [{ x: 10, y: 20 }, { x: 42, y: 52 }],
+    });
+    mapState.addCollisionShape(layer.id, {
+      type: 'polygon',
+      points: [{ x: 0, y: 0 }, { x: 16, y: 0 }, { x: 8, y: 16 }],
+    });
+
+    const result = exportTiledMap(mapState, null);
+
+    expect(result.layers).toHaveLength(1);
+    const tiledLayer = result.layers[0];
+    if (!tiledLayer) throw new Error("missing layer");
+    expect(tiledLayer.type).toBe('objectgroup');
+    expect(tiledLayer.objects).toHaveLength(2);
+
+    // Rect
+    const rect = tiledLayer.objects?.[0];
+    if (!rect) throw new Error("missing rect");
+    expect(rect.x).toBe(10);
+    expect(rect.y).toBe(20);
+    expect(rect.width).toBe(32);
+    expect(rect.height).toBe(32);
+    expect(rect.type).toBe('collision');
+
+    // Polygon
+    const poly = tiledLayer.objects?.[1];
+    if (!poly) throw new Error("missing poly");
+    expect(poly.polygon).toBeDefined();
+    expect(poly.polygon).toHaveLength(3);
+    // First point should be (0,0) since anchor is subtracted
+    expect(poly.polygon?.[0]).toEqual({ x: 0, y: 0 });
+  });
+
+  it('should create separate tilesets for different tile sources', () => {
+    const layer = mapState.addLayer('Ground', 'tile');
+    mapState.placeTile(layer.id, 0, 0, {
+      projectRef: 'proj', canvasRef: 'grass', frameIndex: 0, height: 0,
+    });
+    mapState.placeTile(layer.id, 1, 0, {
+      projectRef: 'proj', canvasRef: 'stone', frameIndex: 0, height: 0,
+    });
+
+    const result = exportTiledMap(mapState, null);
+
+    expect(result.tilesets).toHaveLength(2);
+    expect(result.tilesets[0]?.firstgid).toBe(1);
+    expect(result.tilesets[1]?.firstgid).toBe(2);
+    // Tiles should have different GIDs
+    expect(result.layers[0]?.data?.[0]).toBe(1); // grass
+    expect(result.layers[0]?.data?.[1]).toBe(2); // stone
+  });
+});

package/src/lib/leveleditor/tiled-export.ts

@@ -0,0 +1,374 @@
+/**
+ * Tiled Export -- converts map state to the Tiled JSON format (.tmj).
+ *
+ * Produces a Tiled-compatible JSON document that can be opened in the
+ * Tiled map editor. Tile layers become Tiled tile layers with GID references,
+ * entity layers become object layers, and collision layers become object layers
+ * with shape objects.
+ *
+ * Reference: https://doc.mapeditor.org/en/stable/reference/json-map-format/
+ */
+
+import type { mapState } from './map-state.svelte.js';
+import { PixelBuffer } from '../canvas/pixel-buffer.js';
+import { tileSourceRegistry, placementToTileRefId } from './tile-source-registry.svelte.js';
+
+// --- Tiled JSON format types ---
+
+export interface TiledProperty {
+  name: string;
+  type: string;
+  value: string | number | boolean;
+}
+
+export interface TiledObject {
+  id: number;
+  name: string;
+  type: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rotation: number;
+  visible: boolean;
+  properties?: TiledProperty[];
+  polygon?: { x: number; y: number }[];
+}
+
+export interface TiledLayer {
+  id: number;
+  name: string;
+  type: 'tilelayer' | 'objectgroup';
+  visible: boolean;
+  opacity: number;
+  x: number;
+  y: number;
+  width?: number;
+  height?: number;
+  data?: number[];
+  objects?: TiledObject[];
+}
+
+export interface TiledTileset {
+  firstgid: number;
+  name: string;
+  tilewidth: number;
+  tileheight: number;
+  tilecount: number;
+  columns: number;
+  image?: string;
+  imagewidth?: number;
+  imageheight?: number;
+}
+
+export interface TiledMap {
+  type: 'map';
+  version: '1.10';
+  tiledversion: string;
+  orientation: 'isometric' | 'orthogonal';
+  renderorder: 'right-down';
+  width: number;
+  height: number;
+  tilewidth: number;
+  tileheight: number;
+  layers: TiledLayer[];
+  tilesets: TiledTileset[];
+  properties?: TiledProperty[];
+}
+
+/** Result of the tileset spritesheet builder. */
+export interface TilesetSpritesheetResult {
+  /** The combined spritesheet image (horizontal strip). */
+  spritesheet: PixelBuffer;
+  /** Maps each unique tile ref key to its 1-based GID in the tileset. */
+  gidMap: Map<string, number>;
+  /** Number of unique tiles in the spritesheet. */
+  tileCount: number;
+}
+
+/**
+ * Collect all unique tile ref keys from tile layers and assign sequential GIDs.
+ * The ref key format is "projectRef:canvasRef:frameIndex" matching the
+ * tile source registry's id format (via placementToTileRefId).
+ */
+function collectUniqueTileRefs(state: typeof mapState): string[] {
+  const seen = new Set<string>();
+  const ordered: string[] = [];
+  for (const layer of state.layers) {
+    if (layer.type === 'tile' && layer.tiles) {
+      for (const placement of layer.tiles.values()) {
+        const key = placementToTileRefId(placement);
+        if (!seen.has(key)) {
+          seen.add(key);
+          ordered.push(key);
+        }
+      }
+    }
+  }
+  return ordered;
+}
+
+/**
+ * Build a horizontal-strip tileset spritesheet from the unique tiles in the map.
+ *
+ * Each tile's PixelBuffer is fetched from the tile source registry and placed
+ * side-by-side in a single row. Tiles that can't be resolved (missing from the
+ * registry) get a transparent slot so GID indices remain stable.
+ *
+ * @returns null if the map has no tile placements.
+ */
+export function buildTilesetSpritesheet(
+  state: typeof mapState,
+): TilesetSpritesheetResult | null {
+  const refs = collectUniqueTileRefs(state);
+  if (refs.length === 0) return null;
+
+  const tw = state.tileWidth;
+  const th = state.tileHeight;
+
+  // GID 1-based: index 0 in the strip -> GID 1
+  const gidMap = new Map<string, number>();
+  const buffers: (PixelBuffer | null)[] = [];
+
+  for (let i = 0; i < refs.length; i++) {
+    const key = refs[i];
+    if (key === undefined) continue;
+    gidMap.set(key, i + 1);
+    buffers.push(tileSourceRegistry.get(key));
+  }
+
+  // Compose horizontal strip
+  const sheetWidth = tw * refs.length;
+  const sheetHeight = th;
+  const spritesheet = new PixelBuffer(sheetWidth, sheetHeight);
+
+  for (let i = 0; i < buffers.length; i++) {
+    const buf = buffers[i];
+    if (!buf) continue;
+    // Paste each tile at its horizontal slot; paste handles clipping
+    spritesheet.paste(buf, i * tw, 0);
+  }
+
+  return { spritesheet, gidMap, tileCount: refs.length };
+}
+
+/**
+ * Export the map state as a Tiled-compatible JSON document (.tmj).
+ *
+ * When spritesheetResult is provided, the exported map references a single
+ * tileset backed by the "tileset.png" spritesheet image. Without it, the
+ * export falls back to one imageless tileset per unique tile (legacy behavior
+ * that can't render in Tiled without manual image linking).
+ *
+ * @param state             - The current map state (from mapState)
+ * @param spritesheetResult - Output of buildTilesetSpritesheet(); pass null to
+ *                            get the legacy imageless export.
+ * @returns A TiledMap object ready for JSON.stringify()
+ */
+export function exportTiledMap(
+  state: typeof mapState,
+  spritesheetResult: TilesetSpritesheetResult | null,
+): TiledMap {
+  // --- Build tileset(s) and GID lookup ---
+
+  let gidMap: Map<string, number>;
+  let tilesets: TiledTileset[];
+
+  if (spritesheetResult) {
+    // Single tileset referencing the spritesheet image
+    gidMap = spritesheetResult.gidMap;
+    const tw = state.tileWidth;
+    const th = state.tileHeight;
+    tilesets = [
+      {
+        firstgid: 1,
+        name: 'tileset',
+        tilewidth: tw,
+        tileheight: th,
+        tilecount: spritesheetResult.tileCount,
+        columns: spritesheetResult.tileCount,
+        image: 'tileset.png',
+        imagewidth: tw * spritesheetResult.tileCount,
+        imageheight: th,
+      },
+    ];
+  } else {
+    // Legacy fallback: one tileset per unique tile, no image field.
+    gidMap = new Map();
+    tilesets = [];
+    let nextGid = 1;
+    for (const layer of state.layers) {
+      if (layer.type === 'tile' && layer.tiles) {
+        for (const placement of layer.tiles.values()) {
+          const key = placementToTileRefId(placement);
+          if (!gidMap.has(key)) {
+            gidMap.set(key, nextGid);
+            tilesets.push({
+              firstgid: nextGid,
+              name: key,
+              tilewidth: state.tileWidth,
+              tileheight: state.tileHeight,
+              tilecount: 1,
+              columns: 1,
+            });
+            nextGid++;
+          }
+        }
+      }
+    }
+  }
+
+  // --- Build layers ---
+  let layerId = 1;
+  const tiledLayers: TiledLayer[] = [];
+
+  for (const layer of state.layers) {
+    if (layer.type === 'tile') {
+      // Tile layer: produce a flat data array of GIDs, row-major.
+      // GID 0 means empty tile.
+      const data = new Array<number>(state.gridCols * state.gridRows).fill(0);
+      if (layer.tiles) {
+        for (const [key, placement] of layer.tiles.entries()) {
+          const [colStr, rowStr] = key.split(',') as [string, string];
+          const col = parseInt(colStr, 10);
+          const row = parseInt(rowStr, 10);
+          if (col >= 0 && col < state.gridCols && row >= 0 && row < state.gridRows) {
+            const ref = placementToTileRefId(placement);
+            const gid = gidMap.get(ref) ?? 0;
+            data[row * state.gridCols + col] = gid;
+          }
+        }
+      }
+      tiledLayers.push({
+        id: layerId++,
+        name: layer.name,
+        type: 'tilelayer',
+        visible: layer.visible,
+        opacity: 1,
+        x: 0,
+        y: 0,
+        width: state.gridCols,
+        height: state.gridRows,
+        data,
+      });
+    } else if (layer.type === 'entity') {
+      // Entity layer: becomes an object group
+      let objectId = 1;
+      const objects: TiledObject[] = (layer.entities ?? []).map((entity) => {
+        const obj: TiledObject = {
+          id: objectId++,
+          name: entity.projectRef,
+          type: entity.canvasRef,
+          x: entity.x,
+          y: entity.y,
+          width: 0,
+          height: 0,
+          rotation: 0,
+          visible: true,
+        };
+        // Convert entity properties to Tiled properties
+        const entries = Object.entries(entity.properties);
+        if (entries.length > 0) {
+          obj.properties = entries.map(([name, value]) => ({
+            name,
+            type: 'string',
+            value,
+          }));
+        }
+        return obj;
+      });
+      tiledLayers.push({
+        id: layerId++,
+        name: layer.name,
+        type: 'objectgroup',
+        visible: layer.visible,
+        opacity: 1,
+        x: 0,
+        y: 0,
+        objects,
+      });
+    } else {
+      // layer.type === 'collision' -- the only remaining case.
+      // Collision layer: becomes an object group with shape objects
+      let objectId = 1;
+      const objects: TiledObject[] = (layer.collisionShapes ?? []).flatMap((shape) => {
+        if (shape.type === 'rect' && shape.points.length >= 2) {
+          // length >= 2 guard ensures indices 0 and 1 exist
+          const topLeft = shape.points[0];
+          const bottomRight = shape.points[1];
+          if (!topLeft || !bottomRight) return [];
+          return {
+            id: objectId++,
+            name: '',
+            type: 'collision',
+            x: topLeft.x,
+            y: topLeft.y,
+            width: bottomRight.x - topLeft.x,
+            height: bottomRight.y - topLeft.y,
+            rotation: 0,
+            visible: true,
+          };
+        } else {
+          // Polygon: first point is the anchor, remaining are relative offsets
+          const anchor = shape.points[0] ?? { x: 0, y: 0 };
+          const polygon = shape.points.map((p) => ({
+            x: p.x - anchor.x,
+            y: p.y - anchor.y,
+          }));
+          return {
+            id: objectId++,
+            name: '',
+            type: 'collision',
+            x: anchor.x,
+            y: anchor.y,
+            width: 0,
+            height: 0,
+            rotation: 0,
+            visible: true,
+            polygon,
+          };
+        }
+      });
+      tiledLayers.push({
+        id: layerId++,
+        name: layer.name,
+        type: 'objectgroup',
+        visible: layer.visible,
+        opacity: 1,
+        x: 0,
+        y: 0,
+        objects,
+      });
+    }
+  }
+
+  // Tiled uses 'orthogonal' for axis-aligned grids and 'isometric' for diamonds.
+  const orientation: TiledMap['orientation'] =
+    state.gridMode === 'ortho' ? 'orthogonal' : 'isometric';
+
+  return {
+    type: 'map',
+    version: '1.10',
+    tiledversion: '1.10.2',
+    orientation,
+    renderorder: 'right-down',
+    width: state.gridCols,
+    height: state.gridRows,
+    tilewidth: state.tileWidth,
+    tileheight: state.tileHeight,
+    layers: tiledLayers,
+    tilesets,
+  };
+}
+
+/**
+ * Convert a PixelBuffer to a PNG Blob via OffscreenCanvas.
+ * Used to export the tileset spritesheet alongside the .tmj file.
+ */
+export function pixelBufferToPngBlob(buffer: PixelBuffer): Promise<Blob> {
+  const canvas = new OffscreenCanvas(buffer.width, buffer.height);
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return Promise.reject(new Error('Failed to get 2d context'));
+  ctx.putImageData(buffer.toImageData(), 0, 0);
+  return canvas.convertToBlob({ type: 'image/png' });
+}

package/src/lib/pywebview.d.ts

@@ -0,0 +1,15 @@
+interface DesktopBridgeApi {
+    save_file(data_b64: string, default_name: string, filter_name: string, extensions: string[]): Promise<string | null>;
+    open_file(filter_name: string, extensions: string[]): Promise<{ path: string; data: string } | null>;
+    write_file(path: string, data_b64: string): Promise<boolean>;
+    pick_directory(): Promise<string | null>;
+    write_files_to_directory(dir_path: string, files: Array<{ name: string; data: string }>): Promise<boolean>;
+}
+
+interface PyWebView {
+    api: DesktopBridgeApi;
+}
+
+interface Window {
+    pywebview?: PyWebView;
+}