@guinetik/gcanvas 1.0.0

package/test/particle/updaters.test.js

@@ -0,0 +1,386 @@
+import { describe, it, expect, vi } from "vitest";
+import { Updaters } from "../../src/particle/updaters";
+import { Particle } from "../../src/particle/particle";
+
+describe("Updaters", () => {
+  describe("velocity", () => {
+    it("should apply velocity to position", () => {
+      const p = new Particle();
+      p.vx = 100;
+      p.vy = 200;
+      p.vz = 50;
+
+      Updaters.velocity(p, 0.5);
+
+      expect(p.x).toBe(50); // 100 * 0.5
+      expect(p.y).toBe(100); // 200 * 0.5
+      expect(p.z).toBe(25); // 50 * 0.5
+    });
+  });
+
+  describe("lifetime", () => {
+    it("should increment age", () => {
+      const p = new Particle();
+      p.lifetime = 2;
+
+      Updaters.lifetime(p, 0.5);
+
+      expect(p.age).toBe(0.5);
+      expect(p.alive).toBe(true);
+    });
+
+    it("should kill particle when age exceeds lifetime", () => {
+      const p = new Particle();
+      p.lifetime = 1;
+      p.age = 0.5;
+
+      Updaters.lifetime(p, 0.6);
+
+      expect(p.age).toBe(1.1);
+      expect(p.alive).toBe(false);
+    });
+
+    it("should kill particle exactly at lifetime", () => {
+      const p = new Particle();
+      p.lifetime = 1;
+      p.age = 0;
+
+      Updaters.lifetime(p, 1);
+
+      expect(p.alive).toBe(false);
+    });
+  });
+
+  describe("gravity", () => {
+    it("should apply downward velocity", () => {
+      const p = new Particle();
+      const gravityUpdater = Updaters.gravity(200);
+
+      gravityUpdater(p, 0.5);
+
+      expect(p.vy).toBe(100); // 200 * 0.5
+    });
+
+    it("should use default strength", () => {
+      const p = new Particle();
+      const gravityUpdater = Updaters.gravity();
+
+      gravityUpdater(p, 1);
+
+      expect(p.vy).toBe(200); // default
+    });
+
+    it("should accumulate over time", () => {
+      const p = new Particle();
+      const gravityUpdater = Updaters.gravity(100);
+
+      gravityUpdater(p, 0.1);
+      gravityUpdater(p, 0.1);
+
+      expect(p.vy).toBe(20); // 10 + 10
+    });
+  });
+
+  describe("rise", () => {
+    it("should apply upward velocity", () => {
+      const p = new Particle();
+      const riseUpdater = Updaters.rise(100);
+
+      riseUpdater(p, 0.5);
+
+      expect(p.vy).toBe(-50); // -100 * 0.5
+    });
+
+    it("should use default strength", () => {
+      const p = new Particle();
+      const riseUpdater = Updaters.rise();
+
+      riseUpdater(p, 1);
+
+      expect(p.vy).toBe(-100);
+    });
+  });
+
+  describe("damping", () => {
+    it("should reduce velocity by factor", () => {
+      const p = new Particle();
+      p.vx = 100;
+      p.vy = 100;
+      p.vz = 100;
+
+      const dampingUpdater = Updaters.damping(0.9);
+      dampingUpdater(p, 0); // dt not used
+
+      expect(p.vx).toBe(90);
+      expect(p.vy).toBe(90);
+      expect(p.vz).toBe(90);
+    });
+
+    it("should use default factor", () => {
+      const p = new Particle();
+      p.vx = 100;
+
+      const dampingUpdater = Updaters.damping();
+      dampingUpdater(p, 0);
+
+      expect(p.vx).toBe(98); // 100 * 0.98
+    });
+  });
+
+  describe("fadeOut", () => {
+    it("should fade alpha based on progress", () => {
+      const p = new Particle();
+      p.lifetime = 1;
+
+      // At start
+      p.age = 0;
+      Updaters.fadeOut(p, 0);
+      expect(p.color.a).toBe(1);
+
+      // At 50%
+      p.age = 0.5;
+      Updaters.fadeOut(p, 0);
+      expect(p.color.a).toBe(0.5);
+
+      // At end
+      p.age = 1;
+      Updaters.fadeOut(p, 0);
+      expect(p.color.a).toBe(0);
+    });
+  });
+
+  describe("fadeInOut", () => {
+    it("should fade in then out (peak at 50%)", () => {
+      const p = new Particle();
+      p.lifetime = 1;
+
+      // At start
+      p.age = 0;
+      Updaters.fadeInOut(p, 0);
+      expect(p.color.a).toBe(0);
+
+      // At 25%
+      p.age = 0.25;
+      Updaters.fadeInOut(p, 0);
+      expect(p.color.a).toBe(0.5);
+
+      // At 50% (peak)
+      p.age = 0.5;
+      Updaters.fadeInOut(p, 0);
+      expect(p.color.a).toBe(1);
+
+      // At 75%
+      p.age = 0.75;
+      Updaters.fadeInOut(p, 0);
+      expect(p.color.a).toBe(0.5);
+
+      // At end
+      p.age = 1;
+      Updaters.fadeInOut(p, 0);
+      expect(p.color.a).toBe(0);
+    });
+  });
+
+  describe("shrink", () => {
+    it("should shrink size over lifetime", () => {
+      const p = new Particle();
+      p.size = 10;
+      p.lifetime = 1;
+
+      const shrinkUpdater = Updaters.shrink(0);
+
+      // At start
+      p.age = 0;
+      shrinkUpdater(p, 0);
+      expect(p.size).toBe(10);
+
+      // At 50%
+      p.age = 0.5;
+      shrinkUpdater(p, 0);
+      expect(p.size).toBe(5);
+
+      // At end
+      p.age = 1;
+      shrinkUpdater(p, 0);
+      expect(p.size).toBe(0);
+    });
+
+    it("should respect endScale parameter", () => {
+      const p = new Particle();
+      p.size = 10;
+      p.lifetime = 1;
+
+      const shrinkUpdater = Updaters.shrink(0.5);
+
+      // At end
+      p.age = 1;
+      shrinkUpdater(p, 0);
+      expect(p.size).toBe(5); // 10 * 0.5
+    });
+  });
+
+  describe("grow", () => {
+    it("should grow size over lifetime", () => {
+      const p = new Particle();
+      p.size = 5;
+      p.lifetime = 1;
+
+      const growUpdater = Updaters.grow(3);
+
+      // At start
+      p.age = 0;
+      growUpdater(p, 0);
+      expect(p.size).toBe(5);
+
+      // At 50%
+      p.age = 0.5;
+      growUpdater(p, 0);
+      expect(p.size).toBe(10); // 5 * (1 + 0.5 * (3-1)) = 5 * 2 = 10
+
+      // At end
+      p.age = 1;
+      growUpdater(p, 0);
+      expect(p.size).toBe(15); // 5 * 3
+    });
+  });
+
+  describe("colorOverLife", () => {
+    it("should interpolate color over lifetime", () => {
+      const p = new Particle();
+      p.lifetime = 1;
+
+      const startColor = { r: 255, g: 0, b: 0 };
+      const endColor = { r: 0, g: 255, b: 0 };
+
+      const colorUpdater = Updaters.colorOverLife(startColor, endColor);
+
+      // At start
+      p.age = 0;
+      colorUpdater(p, 0);
+      expect(p.color.r).toBe(255);
+      expect(p.color.g).toBe(0);
+      expect(p.color.b).toBe(0);
+
+      // At 50%
+      p.age = 0.5;
+      colorUpdater(p, 0);
+      expect(p.color.r).toBe(127);
+      expect(p.color.g).toBe(127);
+      expect(p.color.b).toBe(0);
+
+      // At end
+      p.age = 1;
+      colorUpdater(p, 0);
+      expect(p.color.r).toBe(0);
+      expect(p.color.g).toBe(255);
+      expect(p.color.b).toBe(0);
+    });
+  });
+
+  describe("wobble", () => {
+    it("should add random velocity perturbation", () => {
+      const p = new Particle();
+      p.vx = 0;
+      p.vy = 0;
+
+      const mockRandom = vi.spyOn(Math, "random");
+      mockRandom.mockReturnValue(1); // Max positive
+
+      const wobbleUpdater = Updaters.wobble(100);
+      wobbleUpdater(p, 1);
+
+      // (1 - 0.5) * 100 * 1 = 50
+      expect(p.vx).toBe(50);
+      expect(p.vy).toBe(50);
+
+      mockRandom.mockRestore();
+    });
+  });
+
+  describe("bounds", () => {
+    it("should bounce particles at boundaries", () => {
+      const bounds = { left: 0, right: 100, top: 0, bottom: 100 };
+      const boundsUpdater = Updaters.bounds(bounds, 1);
+
+      // Left boundary
+      const p1 = new Particle();
+      p1.x = -10;
+      p1.vx = -50;
+      boundsUpdater(p1, 0);
+      expect(p1.x).toBe(0);
+      expect(p1.vx).toBe(50);
+
+      // Right boundary
+      const p2 = new Particle();
+      p2.x = 110;
+      p2.vx = 50;
+      boundsUpdater(p2, 0);
+      expect(p2.x).toBe(100);
+      expect(p2.vx).toBe(-50);
+
+      // Top boundary
+      const p3 = new Particle();
+      p3.y = -10;
+      p3.vy = -50;
+      boundsUpdater(p3, 0);
+      expect(p3.y).toBe(0);
+      expect(p3.vy).toBe(50);
+
+      // Bottom boundary
+      const p4 = new Particle();
+      p4.y = 110;
+      p4.vy = 50;
+      boundsUpdater(p4, 0);
+      expect(p4.y).toBe(100);
+      expect(p4.vy).toBe(-50);
+    });
+
+    it("should apply bounce factor", () => {
+      const bounds = { left: 0, right: 100, top: 0, bottom: 100 };
+      const boundsUpdater = Updaters.bounds(bounds, 0.5);
+
+      const p = new Particle();
+      p.x = -10;
+      p.vx = -100;
+      boundsUpdater(p, 0);
+
+      expect(p.vx).toBe(50); // 100 * 0.5
+    });
+  });
+
+  describe("attract", () => {
+    it("should accelerate toward target", () => {
+      const target = { x: 100, y: 0, z: 0 };
+      const attractUpdater = Updaters.attract(target, 100);
+
+      const p = new Particle();
+      attractUpdater(p, 1);
+
+      // Should have positive vx (moving toward target)
+      expect(p.vx).toBeGreaterThan(0);
+    });
+
+    it("should not divide by zero when at target", () => {
+      const target = { x: 0, y: 0, z: 0 };
+      const attractUpdater = Updaters.attract(target, 100);
+
+      const p = new Particle();
+      p.x = 0;
+      p.y = 0;
+      p.z = 0;
+
+      // Should not throw
+      expect(() => attractUpdater(p, 1)).not.toThrow();
+    });
+
+    it("should handle 3D attraction", () => {
+      const target = { x: 0, y: 0, z: 100 };
+      const attractUpdater = Updaters.attract(target, 100);
+
+      const p = new Particle();
+      attractUpdater(p, 1);
+
+      expect(p.vz).toBeGreaterThan(0);
+    });
+  });
+});

package/test/setup.js

@@ -0,0 +1,120 @@
+import { expect, afterEach, vi } from 'vitest';
+import '@testing-library/jest-dom';
+
+// Mock Painter class
+vi.mock('../src/painter/painter', () => ({
+  Painter: {
+    ctx: {
+      save: vi.fn(),
+      restore: vi.fn(),
+      translate: vi.fn(),
+      rotate: vi.fn(),
+      scale: vi.fn(),
+    },
+    shapes: {
+      outlineRect: vi.fn(),
+      rect: vi.fn(),
+    },
+    logger: {
+      log: vi.fn(),
+    },
+    save: vi.fn(),
+    restore: vi.fn(),
+    translateTo: vi.fn(),
+    useCtx: vi.fn((callback) => {
+      const mockCtx = {
+        save: vi.fn(),
+        restore: vi.fn(),
+        translate: vi.fn(),
+        globalCompositeOperation: 'source-over',
+        fillStyle: '',
+        beginPath: vi.fn(),
+        arc: vi.fn(),
+        rect: vi.fn(),
+        fill: vi.fn(),
+        moveTo: vi.fn(),
+        lineTo: vi.fn(),
+        closePath: vi.fn(),
+      };
+      callback(mockCtx);
+    }),
+  },
+}));
+
+// Mock Loggable class
+vi.mock('../src/logger/loggable', () => ({
+  Loggable: class {
+    constructor() {
+      this.logger = {
+        log: vi.fn(),
+        groupCollapsed: vi.fn(),
+        groupEnd: vi.fn(),
+      };
+    }
+  },
+}));
+
+// Mock EventEmitter for io module
+vi.mock('../src/io/index', () => ({
+  EventEmitter: class {
+    constructor() {
+      this._events = {};
+    }
+    on(event, callback) {
+      if (!this._events[event]) this._events[event] = [];
+      this._events[event].push(callback);
+    }
+    off(event, callback) {
+      if (!this._events[event]) return;
+      this._events[event] = this._events[event].filter(cb => cb !== callback);
+    }
+    emit(event, ...args) {
+      if (!this._events[event]) return;
+      this._events[event].forEach(cb => cb(...args));
+    }
+  },
+  Keys: {},
+  Input: class {},
+  Touch: class {},
+}));
+
+// Mock mixins/anchor
+vi.mock('../src/mixins/anchor', () => ({
+  applyAnchor: vi.fn(),
+}));
+
+// Mock util/zindex
+vi.mock('../src/util/zindex', () => ({
+  ZOrderedCollection: class {
+    constructor() {
+      this.children = [];
+      this._owner = null;
+    }
+    add(item) {
+      this.children.push(item);
+    }
+    remove(item) {
+      const idx = this.children.indexOf(item);
+      if (idx > -1) {
+        this.children.splice(idx, 1);
+        return true;
+      }
+      return false;
+    }
+    clear() {
+      this.children = [];
+    }
+    getSortedChildren() {
+      return this.children;
+    }
+    bringToFront() {}
+    sendToBack() {}
+    bringForward() {}
+    sendBackward() {}
+  },
+}));
+
+// Reset mocks after each test
+afterEach(() => {
+  vi.clearAllMocks();
+}); 

package/test/shapes/euclidian.test.js

@@ -0,0 +1,44 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Euclidian } from '../../src/shapes/euclidian';
+
+describe('Euclidian', () => {
+  it('should initialize with default values', () => {
+    const euclidian = new Euclidian();
+    expect(euclidian.x).toBe(0);
+    expect(euclidian.y).toBe(0);
+    expect(euclidian.width).toBe(0);
+    expect(euclidian.height).toBe(0);
+  });
+
+  it('should initialize with custom values', () => {
+    const options = {
+      x: 10,
+      y: 20,
+      width: 100,
+      height: 200
+    };
+    const euclidian = new Euclidian(options);
+    expect(euclidian.x).toBe(10);
+    expect(euclidian.y).toBe(20);
+    expect(euclidian.width).toBe(100);
+    expect(euclidian.height).toBe(200);
+  });
+
+  it('should validate properties', () => {
+    const euclidian = new Euclidian();
+    expect(() => {
+      euclidian.x = null;
+    }).toThrow('Invalid property value: x null');
+    expect(() => {
+      euclidian.y = undefined;
+    }).toThrow('Invalid property value: y undefined');
+  });
+
+  it('should not allow negative width or height', () => {
+    const euclidian = new Euclidian();
+    euclidian.width = -10;
+    euclidian.height = -20;
+    expect(euclidian.width).toBe(0);
+    expect(euclidian.height).toBe(0);
+  });
+}); 

package/test/shapes/geometry.test.js

@@ -0,0 +1,86 @@
+import { describe, it, expect, vi } from "vitest";
+import { Geometry2d } from "../../src/shapes";
+
+describe("Geometry2d", () => {
+  it("should initialize with default values", () => {
+    const geometry = new Geometry2d();
+    expect(geometry.x).toBe(0);
+    expect(geometry.y).toBe(0);
+    expect(geometry.width).toBe(0);
+    expect(geometry.height).toBe(0);
+  });
+
+  it("should initialize with custom values", () => {
+    const geometry = new Geometry2d({ x: 10, y: 20, width: 100, height: 200 });
+    expect(geometry.x).toBe(10);
+    expect(geometry.y).toBe(20);
+    expect(geometry.width).toBe(100);
+    expect(geometry.height).toBe(200);
+  });
+
+  it("should validate properties", () => {
+    const geometry = new Geometry2d();
+    expect(() => {
+      geometry.x = null;
+    }).toThrow("Invalid property value: x null");
+  });
+
+  it("should not allow negative width or height", () => {
+    const geometry = new Geometry2d();
+    geometry.width = -10;
+    geometry.height = -20;
+    expect(geometry.width).toBe(0);
+    expect(geometry.height).toBe(0);
+  });
+
+  it("should update bounds when properties change", () => {
+    const geometry = new Geometry2d({ x: 10, y: 20, width: 100, height: 200 });
+    geometry.x = 30;
+    geometry.y = 40;
+    expect(geometry.boundsDirty).toBe(true);
+  });
+
+  it("should calculate bounds correctly", () => {
+    const geometry = new Geometry2d({ x: 10, y: 20, width: 100, height: 200 });
+    expect(geometry.getBounds()).toEqual({
+      width: 100,
+      height: 200,
+      x: 10,
+      y: 20,
+    });
+  });
+
+  it("should apply constraints correctly", () => {
+    const geometry = new Geometry2d({ x: 10, y: 20, width: 100, height: 200 });
+    geometry.minX = 50;
+    geometry.minY = 60;
+    geometry.maxX = 150;
+    geometry.maxY = 160;
+    geometry.applyConstraints();
+    expect(geometry.x).toBe(50);
+    expect(geometry.y).toBe(60);
+  });
+
+  it("should update bounds when constraints are applied", () => {
+    const geometry = new Geometry2d({ x: 10, y: 20, width: 100, height: 200 });
+    geometry.minX = 50;
+    geometry.minY = 60;
+    geometry.maxX = 150;
+    geometry.maxY = 160;
+    geometry.applyConstraints();
+    expect(geometry.getBounds()).toEqual({
+      width: 100,
+      height: 200,
+      x: 50,
+      y: 60,
+    });
+  });
+
+  it("should return correctly local position", () => {
+    const geometry = new Geometry2d({ x: 10, y: 20, width: 100, height: 200 });
+    expect(geometry.getLocalPosition()).toEqual({
+      x: -40,
+      y: -80,
+    });
+  });   
+});

package/test/shapes/group.test.js

@@ -0,0 +1,86 @@
+import { describe, it, expect, vi } from "vitest";
+import { Group, Rectangle } from "../../src/shapes";
+
+describe("Group", () => {
+  it("should initialize with default values", () => {
+    const group = new Group();
+    expect(group.x).toBe(0);
+    expect(group.y).toBe(0);
+    expect(group.width).toBe(0);
+    expect(group.height).toBe(0);
+  });
+
+  it("should initialize with custom values", () => {
+    const options = {
+      x: 10,
+      y: 20,
+      width: 100,
+      height: 200,
+    };
+    const group = new Group(options);
+    expect(group.x).toBe(10);
+    expect(group.y).toBe(20);
+    expect(group.width).toBe(100);
+    expect(group.height).toBe(200);
+  });
+
+  it("should validate properties", () => {
+    const group = new Group();
+    expect(() => {
+      group.x = null;
+    }).toThrow("Invalid property value: x null");
+    expect(() => {
+      group.y = undefined;
+    }).toThrow("Invalid property value: y undefined");
+  });
+
+  it("should not allow negative width or height", () => {
+    const group = new Group();
+    group.width = -10;
+    group.height = -20;
+    expect(group.width).toBe(0);
+    expect(group.height).toBe(0);
+  });
+
+  it("should add children", () => {
+    const group = new Group();
+    const child = new Rectangle({ width: 100, height: 100 });
+    group.add(child);
+    expect(group.children.length).toBe(1);
+  });
+
+  it("should remove children", () => {
+    const group = new Group();
+    const child = new Rectangle({ width: 100, height: 100 });
+    group.add(child);
+    group.remove(child);
+    expect(group.children.length).toBe(0);
+  });
+
+  it("should clear children", () => {
+    const group = new Group();  
+    const child = new Rectangle({ width: 100, height: 100 });
+    group.add(child);
+    group.clear();
+    expect(group.children.length).toBe(0);
+  });
+
+  it("should calculate bounds based on children", () => {
+    const group = new Group();
+    const child1 = new Rectangle({ width: 100, height: 100 });
+    const child2 = new Rectangle({ width: 100, height: 100 });
+    group.add(child1);
+    group.add(child2);
+    expect(group.width).toBe(100);
+    expect(group.height).toBe(100);
+  });
+
+  it("should calculate bounds based on children considering the children's position", () => {
+    const group = new Group();
+    group.add(new Rectangle({ width: 400, height: 300, color: "#323232" }));
+    group.add(new Rectangle({ width: 100, height: 100, color: "#0f0", x: -50 }));
+    group.add(new Rectangle({ width: 100, height: 100, color: "#0f0", x: 200 }));
+    expect(group.width).toBe(450);
+    expect(group.height).toBe(300);
+  });
+});