pixelweaver 0.1.0

package/plugins/builtin/drawing-utils.test.ts

@@ -0,0 +1,495 @@
+/**
+ * Tests for drawing utility functions.
+ *
+ * Covers line algorithms, rectangle/ellipse/diamond primitives,
+ * flood fill, and snapshot/apply helpers.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { PixelBuffer } from '../../src/lib/canvas/pixel-buffer.js';
+import {
+  bresenhamLine,
+  bresenhamLineNoDoubles,
+  rectOutline,
+  rectFilled,
+  ellipseOutline,
+  ellipseFilled,
+  diamondOutline,
+  diamondFilled,
+  floodFill,
+  snapshotPixels,
+  applyPixels,
+  hexToRgba,
+} from './drawing-utils.js';
+
+// --- Helpers ---
+
+/** Convert point array to a set of "x,y" strings for easy lookup. */
+function toSet(points: { x: number; y: number }[]): Set<string> {
+  return new Set(points.map((p) => `${String(p.x)},${String(p.y)}`));
+}
+
+/** Check that a point list has no duplicate coordinates. */
+function hasNoDuplicates(points: { x: number; y: number }[]): boolean {
+  return toSet(points).size === points.length;
+}
+
+// --- Bresenham Line ---
+
+describe('bresenhamLine', () => {
+  it('should return a single point for same start and end', () => {
+    const points = bresenhamLine(5, 5, 5, 5);
+    expect(points).toEqual([{ x: 5, y: 5 }]);
+  });
+
+  it('should draw a horizontal line', () => {
+    const points = bresenhamLine(0, 0, 4, 0);
+    expect(points).toHaveLength(5);
+    for (let x = 0; x <= 4; x++) {
+      expect(points[x]).toEqual({ x, y: 0 });
+    }
+  });
+
+  it('should draw a vertical line', () => {
+    const points = bresenhamLine(2, 0, 2, 3);
+    expect(points).toHaveLength(4);
+    for (let y = 0; y <= 3; y++) {
+      expect(points[y]).toEqual({ x: 2, y });
+    }
+  });
+
+  it('should draw a 45-degree diagonal', () => {
+    const points = bresenhamLine(0, 0, 3, 3);
+    expect(points).toHaveLength(4);
+    for (let i = 0; i <= 3; i++) {
+      expect(points[i]).toEqual({ x: i, y: i });
+    }
+  });
+
+  it('should draw a line in reverse direction', () => {
+    const forward = bresenhamLine(0, 0, 5, 3);
+    const reverse = bresenhamLine(5, 3, 0, 0);
+    // Both should cover the same set of points
+    expect(toSet(forward)).toEqual(toSet(reverse));
+  });
+
+  it('should draw a steep line (dy > dx)', () => {
+    const points = bresenhamLine(0, 0, 2, 6);
+    expect(points).toHaveLength(7);
+    // Should start at origin and end at (2,6)
+    expect(points[0]).toEqual({ x: 0, y: 0 });
+    expect(points[points.length - 1]).toEqual({ x: 2, y: 6 });
+  });
+
+  it('should include both endpoints', () => {
+    const points = bresenhamLine(1, 2, 7, 5);
+    const set = toSet(points);
+    expect(set.has('1,2')).toBe(true);
+    expect(set.has('7,5')).toBe(true);
+  });
+});
+
+// --- No-Doubles Bresenham ---
+
+describe('bresenhamLineNoDoubles', () => {
+  it('should return a single point for same start and end', () => {
+    const points = bresenhamLineNoDoubles(3, 3, 3, 3);
+    expect(points).toEqual([{ x: 3, y: 3 }]);
+  });
+
+  it('should produce the same result as standard for horizontal line', () => {
+    const standard = bresenhamLine(0, 0, 5, 0);
+    const noDoubles = bresenhamLineNoDoubles(0, 0, 5, 0);
+    expect(toSet(noDoubles)).toEqual(toSet(standard));
+  });
+
+  it('should produce the same result as standard for vertical line', () => {
+    const standard = bresenhamLine(0, 0, 0, 5);
+    const noDoubles = bresenhamLineNoDoubles(0, 0, 0, 5);
+    expect(toSet(noDoubles)).toEqual(toSet(standard));
+  });
+
+  it('should produce the same result as standard for diagonal line', () => {
+    const standard = bresenhamLine(0, 0, 4, 4);
+    const noDoubles = bresenhamLineNoDoubles(0, 0, 4, 4);
+    expect(toSet(noDoubles)).toEqual(toSet(standard));
+  });
+
+  it('should never have two consecutive pixels differing only on minor axis', () => {
+    // Test with a shallow slope where doubles are likely
+    const points = bresenhamLineNoDoubles(0, 0, 10, 3);
+    for (let i = 1; i < points.length; i++) {
+      const prev = points[i - 1];
+      const curr = points[i];
+      if (!prev || !curr) continue;
+      // Two consecutive pixels should not have same x but different y
+      // (that would be a "double" on the minor axis for a shallow slope)
+      const sameX = prev.x === curr.x;
+      const sameY = prev.y === curr.y;
+      // At least one axis must change; if x is the major axis and stays same,
+      // that's a double
+      expect(sameX && sameY).toBe(false);
+    }
+  });
+
+  it('should produce fewer or equal points than standard for non-axis-aligned lines', () => {
+    const standard = bresenhamLine(0, 0, 10, 4);
+    const noDoubles = bresenhamLineNoDoubles(0, 0, 10, 4);
+    expect(noDoubles.length).toBeLessThanOrEqual(standard.length);
+  });
+
+  it('should include both endpoints', () => {
+    const points = bresenhamLineNoDoubles(1, 2, 8, 5);
+    const set = toSet(points);
+    expect(set.has('1,2')).toBe(true);
+    expect(set.has('8,5')).toBe(true);
+  });
+});
+
+// --- Rectangle Outline ---
+
+describe('rectOutline', () => {
+  it('should return empty for zero-sized rect', () => {
+    expect(rectOutline(0, 0, 0, 0)).toEqual([]);
+    expect(rectOutline(0, 0, 0, 5)).toEqual([]);
+    expect(rectOutline(0, 0, 5, 0)).toEqual([]);
+  });
+
+  it('should return single point for 1x1 rect', () => {
+    expect(rectOutline(3, 4, 1, 1)).toEqual([{ x: 3, y: 4 }]);
+  });
+
+  it('should return correct perimeter for a 3x3 rect', () => {
+    const points = rectOutline(0, 0, 3, 3);
+    // 3x3 rect has 8 perimeter points (3*4 - 4 corners counted once)
+    expect(points).toHaveLength(8);
+    expect(hasNoDuplicates(points)).toBe(true);
+    // Center should NOT be included (that's interior)
+    expect(toSet(points).has('1,1')).toBe(false);
+  });
+
+  it('should return correct perimeter for a 4x2 rect', () => {
+    const points = rectOutline(0, 0, 4, 2);
+    // Top: (0,0)(1,0)(2,0)(3,0), Bottom: (3,1)(2,1)(1,1)(0,1) = 8 points
+    expect(points).toHaveLength(8);
+    expect(hasNoDuplicates(points)).toBe(true);
+  });
+
+  it('should handle 1-wide rect (vertical line)', () => {
+    const points = rectOutline(5, 2, 1, 4);
+    expect(points).toHaveLength(4);
+    for (let y = 2; y <= 5; y++) {
+      expect(toSet(points).has(`5,${String(y)}`)).toBe(true);
+    }
+  });
+
+  it('should handle 1-tall rect (horizontal line)', () => {
+    const points = rectOutline(0, 3, 5, 1);
+    expect(points).toHaveLength(5);
+    for (let x = 0; x <= 4; x++) {
+      expect(toSet(points).has(`${String(x)},3`)).toBe(true);
+    }
+  });
+});
+
+// --- Filled Rectangle ---
+
+describe('rectFilled', () => {
+  it('should return empty for zero-sized rect', () => {
+    expect(rectFilled(0, 0, 0, 0)).toEqual([]);
+  });
+
+  it('should return correct area for a 3x2 rect', () => {
+    const points = rectFilled(1, 1, 3, 2);
+    expect(points).toHaveLength(6);
+    expect(hasNoDuplicates(points)).toBe(true);
+  });
+
+  it('should contain all interior and perimeter points', () => {
+    const points = rectFilled(0, 0, 4, 3);
+    expect(points).toHaveLength(12);
+    const set = toSet(points);
+    for (let y = 0; y < 3; y++) {
+      for (let x = 0; x < 4; x++) {
+        expect(set.has(`${String(x)},${String(y)}`)).toBe(true);
+      }
+    }
+  });
+});
+
+// --- Ellipse Outline ---
+
+describe('ellipseOutline', () => {
+  it('should return single point for radius 0,0', () => {
+    const points = ellipseOutline(5, 5, 0, 0);
+    expect(points).toEqual([{ x: 5, y: 5 }]);
+  });
+
+  it('should return a vertical line for rx=0', () => {
+    const points = ellipseOutline(5, 5, 0, 3);
+    expect(points).toHaveLength(7);
+    const set = toSet(points);
+    for (let y = 2; y <= 8; y++) {
+      expect(set.has(`5,${String(y)}`)).toBe(true);
+    }
+  });
+
+  it('should return a horizontal line for ry=0', () => {
+    const points = ellipseOutline(5, 5, 3, 0);
+    expect(points).toHaveLength(7);
+    const set = toSet(points);
+    for (let x = 2; x <= 8; x++) {
+      expect(set.has(`${String(x)},5`)).toBe(true);
+    }
+  });
+
+  it('should produce an approximately circular shape for equal radii', () => {
+    const r = 5;
+    const points = ellipseOutline(10, 10, r, r);
+    expect(points.length).toBeGreaterThan(0);
+    expect(hasNoDuplicates(points)).toBe(true);
+
+    // All points should be approximately distance r from center
+    for (const p of points) {
+      const dist = Math.sqrt((p.x - 10) ** 2 + (p.y - 10) ** 2);
+      // Allow some tolerance for pixel grid rasterization
+      expect(dist).toBeGreaterThan(r - 1.5);
+      expect(dist).toBeLessThan(r + 1.5);
+    }
+  });
+
+  it('should be symmetric around center', () => {
+    const points = ellipseOutline(10, 10, 4, 3);
+    const set = toSet(points);
+    // For every point (cx+dx, cy+dy), the mirrors should also exist
+    for (const p of points) {
+      const dx = p.x - 10;
+      const dy = p.y - 10;
+      expect(set.has(`${String(10 - dx)},${String(10 + dy)}`)).toBe(true);
+      expect(set.has(`${String(10 + dx)},${String(10 - dy)}`)).toBe(true);
+      expect(set.has(`${String(10 - dx)},${String(10 - dy)}`)).toBe(true);
+    }
+  });
+
+  it('should include cardinal extreme points', () => {
+    const points = ellipseOutline(10, 10, 5, 3);
+    const set = toSet(points);
+    expect(set.has('15,10')).toBe(true); // right
+    expect(set.has('5,10')).toBe(true);  // left
+    expect(set.has('10,13')).toBe(true); // bottom
+    expect(set.has('10,7')).toBe(true);  // top
+  });
+});
+
+// --- Filled Ellipse ---
+
+describe('ellipseFilled', () => {
+  it('should return single point for radius 0,0', () => {
+    const points = ellipseFilled(5, 5, 0, 0);
+    expect(points).toEqual([{ x: 5, y: 5 }]);
+  });
+
+  it('should fill more points than outline', () => {
+    const outline = ellipseOutline(10, 10, 4, 3);
+    const filled = ellipseFilled(10, 10, 4, 3);
+    expect(filled.length).toBeGreaterThan(outline.length);
+  });
+
+  it('should include the center point', () => {
+    const points = ellipseFilled(10, 10, 3, 3);
+    expect(toSet(points).has('10,10')).toBe(true);
+  });
+
+  it('should contain all outline points', () => {
+    const outline = ellipseOutline(10, 10, 4, 3);
+    const filledSet = toSet(ellipseFilled(10, 10, 4, 3));
+    for (const p of outline) {
+      expect(filledSet.has(`${String(p.x)},${String(p.y)}`)).toBe(true);
+    }
+  });
+});
+
+// --- Diamond Outline ---
+
+describe('diamondOutline', () => {
+  it('should return single point for radius 0,0', () => {
+    const points = diamondOutline(5, 5, 0, 0);
+    expect(points).toEqual([{ x: 5, y: 5 }]);
+  });
+
+  it('should have no duplicate points', () => {
+    const points = diamondOutline(10, 10, 5, 5);
+    expect(hasNoDuplicates(points)).toBe(true);
+  });
+
+  it('should include the four vertices', () => {
+    const cx = 10, cy = 10, rx = 4, ry = 3;
+    const set = toSet(diamondOutline(cx, cy, rx, ry));
+    expect(set.has(`${String(cx)},${String(cy - ry)}`)).toBe(true); // top
+    expect(set.has(`${String(cx + rx)},${String(cy)}`)).toBe(true);  // right
+    expect(set.has(`${String(cx)},${String(cy + ry)}`)).toBe(true);  // bottom
+    expect(set.has(`${String(cx - rx)},${String(cy)}`)).toBe(true);  // left
+  });
+
+  it('should be symmetric', () => {
+    const cx = 10, cy = 10;
+    const points = diamondOutline(cx, cy, 5, 3);
+    const set = toSet(points);
+    for (const p of points) {
+      const dx = p.x - cx;
+      const dy = p.y - cy;
+      expect(set.has(`${String(cx - dx)},${String(cy + dy)}`)).toBe(true);
+      expect(set.has(`${String(cx + dx)},${String(cy - dy)}`)).toBe(true);
+      expect(set.has(`${String(cx - dx)},${String(cy - dy)}`)).toBe(true);
+    }
+  });
+});
+
+// --- Diamond Filled ---
+
+describe('diamondFilled', () => {
+  it('should return single point for radius 0,0', () => {
+    const points = diamondFilled(5, 5, 0, 0);
+    expect(points).toEqual([{ x: 5, y: 5 }]);
+  });
+
+  it('should fill more points than outline', () => {
+    const outline = diamondOutline(10, 10, 5, 5);
+    const filled = diamondFilled(10, 10, 5, 5);
+    expect(filled.length).toBeGreaterThanOrEqual(outline.length);
+  });
+
+  it('should include the center', () => {
+    const set = toSet(diamondFilled(10, 10, 4, 3));
+    expect(set.has('10,10')).toBe(true);
+  });
+});
+
+// --- Flood Fill ---
+
+describe('floodFill', () => {
+  it('should return empty for out-of-bounds start', () => {
+    const buf = new PixelBuffer(4, 4);
+    expect(floodFill(buf, -1, 0)).toEqual([]);
+    expect(floodFill(buf, 4, 0)).toEqual([]);
+  });
+
+  it('should fill entire buffer when all pixels are the same color', () => {
+    const buf = new PixelBuffer(4, 3);
+    // All transparent (default)
+    const points = floodFill(buf, 0, 0);
+    expect(points).toHaveLength(12);
+  });
+
+  it('should stop at color boundaries', () => {
+    const buf = new PixelBuffer(5, 5);
+    // Draw a vertical wall at x=2
+    for (let y = 0; y < 5; y++) {
+      buf.setPixel(2, y, 255, 0, 0, 255);
+    }
+    // Fill from (0,0) should only reach x=0 and x=1 (5 rows * 2 cols = 10)
+    const points = floodFill(buf, 0, 0);
+    expect(points).toHaveLength(10);
+    // All points should have x < 2
+    for (const p of points) {
+      expect(p.x).toBeLessThan(2);
+    }
+  });
+
+  it('should fill a bounded region', () => {
+    const buf = new PixelBuffer(6, 6);
+    // Create a box with walls
+    for (let i = 0; i < 6; i++) {
+      buf.setPixel(i, 0, 255, 0, 0, 255); // top wall
+      buf.setPixel(i, 5, 255, 0, 0, 255); // bottom wall
+      buf.setPixel(0, i, 255, 0, 0, 255); // left wall
+      buf.setPixel(5, i, 255, 0, 0, 255); // right wall
+    }
+    // Fill from center (3,3), should fill interior: 4x4 = 16 transparent pixels
+    const points = floodFill(buf, 3, 3);
+    expect(points).toHaveLength(16);
+    for (const p of points) {
+      expect(p.x).toBeGreaterThanOrEqual(1);
+      expect(p.x).toBeLessThanOrEqual(4);
+      expect(p.y).toBeGreaterThanOrEqual(1);
+      expect(p.y).toBeLessThanOrEqual(4);
+    }
+  });
+
+  it('should return single pixel if it is surrounded by different colors', () => {
+    const buf = new PixelBuffer(3, 3);
+    buf.fill(255, 0, 0, 255); // Fill all red
+    buf.setPixel(1, 1, 0, 0, 0, 0); // Center is transparent
+    const points = floodFill(buf, 1, 1);
+    expect(points).toHaveLength(1);
+    expect(points[0]).toEqual({ x: 1, y: 1 });
+  });
+
+  it('should handle L-shaped region', () => {
+    const buf = new PixelBuffer(4, 4);
+    buf.fill(255, 0, 0, 255);
+    // Create an L-shaped transparent region
+    buf.setPixel(0, 0, 0, 0, 0, 0);
+    buf.setPixel(0, 1, 0, 0, 0, 0);
+    buf.setPixel(0, 2, 0, 0, 0, 0);
+    buf.setPixel(1, 2, 0, 0, 0, 0);
+
+    const points = floodFill(buf, 0, 0);
+    expect(points).toHaveLength(4);
+  });
+});
+
+// --- snapshotPixels / applyPixels roundtrip ---
+
+describe('snapshotPixels and applyPixels', () => {
+  it('should roundtrip pixel data correctly', () => {
+    const buf = new PixelBuffer(4, 4);
+    buf.setPixel(1, 1, 255, 0, 0, 255);
+    buf.setPixel(2, 2, 0, 255, 0, 128);
+    buf.setPixel(3, 3, 0, 0, 255, 64);
+
+    const points = [{ x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 3 }];
+    const snapshot = snapshotPixels(buf, points);
+
+    // Overwrite the pixels
+    buf.setPixel(1, 1, 0, 0, 0, 0);
+    buf.setPixel(2, 2, 0, 0, 0, 0);
+    buf.setPixel(3, 3, 0, 0, 0, 0);
+
+    // Restore from snapshot
+    applyPixels(buf, snapshot);
+
+    expect(buf.getPixel(1, 1)).toEqual([255, 0, 0, 255]);
+    expect(buf.getPixel(2, 2)).toEqual([0, 255, 0, 128]);
+    expect(buf.getPixel(3, 3)).toEqual([0, 0, 255, 64]);
+  });
+
+  it('should snapshot out-of-bounds points as [0,0,0,0]', () => {
+    const buf = new PixelBuffer(2, 2);
+    buf.fill(255, 255, 255, 255);
+
+    const snapshot = snapshotPixels(buf, [{ x: -1, y: 0 }, { x: 10, y: 10 }]);
+    expect(snapshot[0]).toEqual({ x: -1, y: 0, r: 0, g: 0, b: 0, a: 0 });
+    expect(snapshot[1]).toEqual({ x: 10, y: 10, r: 0, g: 0, b: 0, a: 0 });
+  });
+});
+
+// --- hexToRgba ---
+
+describe('hexToRgba', () => {
+  it('should parse black', () => {
+    expect(hexToRgba('#000000')).toEqual({ r: 0, g: 0, b: 0, a: 255 });
+  });
+
+  it('should parse white', () => {
+    expect(hexToRgba('#FFFFFF')).toEqual({ r: 255, g: 255, b: 255, a: 255 });
+  });
+
+  it('should parse red', () => {
+    expect(hexToRgba('#FF0000')).toEqual({ r: 255, g: 0, b: 0, a: 255 });
+  });
+
+  it('should parse arbitrary color', () => {
+    expect(hexToRgba('#1A2B3C')).toEqual({ r: 26, g: 43, b: 60, a: 255 });
+  });
+});