@gjsify/canvas2d-core 0.3.21 → 0.4.3

package/src/canvas-transform.spec.ts

@@ -1,211 +0,0 @@
-// Canvas 2D transform tests — verifies Cairo.Context affine matrix
-// decomposition (translate + rotate + scale) and getTransform round-trip
-// via userToDevice. Cairo.Context in GJS does not expose a generic
-// transform(matrix) call, so canvas2d-core decomposes the supplied 2D
-// affine matrix [a,b,c,d,e,f] into primitive translate/rotate/scale calls.
-//
-// These tests lock in the fix made for the excalibur-jelly-jumper showcase,
-// which exercises multiply/transform/setTransform inside its Canvas 2D
-// fallback rendering path.
-
-import { describe, it, expect } from '@gjsify/unit';
-import { CanvasRenderingContext2D } from './canvas-rendering-context-2d.js';
-
-function makeCtx(width = 100, height = 100): CanvasRenderingContext2D {
-    const canvas = { width, height };
-    return new CanvasRenderingContext2D(canvas);
-}
-
-/** Assert two numbers are equal to within an epsilon. */
-function nearlyEqual(actual: number, expected: number, eps = 1e-9): boolean {
-    return Math.abs(actual - expected) < eps;
-}
-
-export default async () => {
-    await describe('CanvasRenderingContext2D — transforms', async () => {
-
-        await describe('getTransform initial state', async () => {
-            await it('returns identity for a fresh context', async () => {
-                const ctx = makeCtx();
-                const m = ctx.getTransform();
-                expect(nearlyEqual(m.a, 1)).toBe(true);
-                expect(nearlyEqual(m.b, 0)).toBe(true);
-                expect(nearlyEqual(m.c, 0)).toBe(true);
-                expect(nearlyEqual(m.d, 1)).toBe(true);
-                expect(nearlyEqual(m.e, 0)).toBe(true);
-                expect(nearlyEqual(m.f, 0)).toBe(true);
-            });
-        });
-
-        await describe('translate', async () => {
-            await it('updates e and f in getTransform', async () => {
-                const ctx = makeCtx();
-                ctx.translate(10, 20);
-                const m = ctx.getTransform();
-                expect(nearlyEqual(m.a, 1)).toBe(true);
-                expect(nearlyEqual(m.d, 1)).toBe(true);
-                expect(nearlyEqual(m.e, 10)).toBe(true);
-                expect(nearlyEqual(m.f, 20)).toBe(true);
-            });
-
-            await it('composes translations cumulatively', async () => {
-                const ctx = makeCtx();
-                ctx.translate(10, 20);
-                ctx.translate(5, 7);
-                const m = ctx.getTransform();
-                expect(nearlyEqual(m.e, 15)).toBe(true);
-                expect(nearlyEqual(m.f, 27)).toBe(true);
-            });
-        });
-
-        await describe('scale', async () => {
-            await it('updates a and d in getTransform', async () => {
-                const ctx = makeCtx();
-                ctx.scale(2, 3);
-                const m = ctx.getTransform();
-                expect(nearlyEqual(m.a, 2)).toBe(true);
-                expect(nearlyEqual(m.d, 3)).toBe(true);
-            });
-
-            await it('composes with a prior translate (translate then scale)', async () => {
-                const ctx = makeCtx();
-                ctx.translate(10, 20);
-                ctx.scale(2, 2);
-                const m = ctx.getTransform();
-                expect(nearlyEqual(m.a, 2)).toBe(true);
-                expect(nearlyEqual(m.d, 2)).toBe(true);
-                expect(nearlyEqual(m.e, 10)).toBe(true);
-                expect(nearlyEqual(m.f, 20)).toBe(true);
-            });
-        });
-
-        await describe('transform (multiply-by-affine)', async () => {
-            await it('pure translate via transform(1,0,0,1,tx,ty)', async () => {
-                const ctx = makeCtx();
-                ctx.transform(1, 0, 0, 1, 15, 25);
-                const m = ctx.getTransform();
-                expect(nearlyEqual(m.a, 1)).toBe(true);
-                expect(nearlyEqual(m.d, 1)).toBe(true);
-                expect(nearlyEqual(m.e, 15)).toBe(true);
-                expect(nearlyEqual(m.f, 25)).toBe(true);
-            });
-
-            await it('pure scale via transform(sx,0,0,sy,0,0)', async () => {
-                const ctx = makeCtx();
-                ctx.transform(3, 0, 0, 4, 0, 0);
-                const m = ctx.getTransform();
-                expect(nearlyEqual(m.a, 3)).toBe(true);
-                expect(nearlyEqual(m.d, 4)).toBe(true);
-            });
-
-            await it('ignores NaN / Infinity values without crashing', async () => {
-                const ctx = makeCtx();
-                // Excalibur can emit non-finite matrices during scene
-                // transitions — our Cairo binding must not crash on them.
-                ctx.transform(NaN, 0, 0, 1, 0, 0);
-                ctx.transform(1, 0, 0, 1, Infinity, 0);
-                // Transform was no-op'd, so state is still identity
-                const m = ctx.getTransform();
-                expect(nearlyEqual(m.a, 1)).toBe(true);
-            });
-        });
-
-        await describe('setTransform', async () => {
-            await it('resets the matrix then applies the new transform (numeric)', async () => {
-                const ctx = makeCtx();
-                ctx.translate(100, 100);
-                ctx.setTransform(2, 0, 0, 2, 5, 10);
-                const m = ctx.getTransform();
-                expect(nearlyEqual(m.a, 2)).toBe(true);
-                expect(nearlyEqual(m.d, 2)).toBe(true);
-                expect(nearlyEqual(m.e, 5)).toBe(true);
-                expect(nearlyEqual(m.f, 10)).toBe(true);
-            });
-
-            await it('accepts a DOMMatrix-like object (a,b,c,d,e,f)', async () => {
-                const ctx = makeCtx();
-                ctx.setTransform({ a: 2, b: 0, c: 0, d: 2, e: 5, f: 10 });
-                const m = ctx.getTransform();
-                expect(nearlyEqual(m.a, 2)).toBe(true);
-                expect(nearlyEqual(m.d, 2)).toBe(true);
-                expect(nearlyEqual(m.e, 5)).toBe(true);
-                expect(nearlyEqual(m.f, 10)).toBe(true);
-            });
-
-            await it('no-arg resets to identity', async () => {
-                const ctx = makeCtx();
-                ctx.translate(10, 10);
-                ctx.scale(5, 5);
-                ctx.setTransform();
-                const m = ctx.getTransform();
-                expect(nearlyEqual(m.a, 1)).toBe(true);
-                expect(nearlyEqual(m.d, 1)).toBe(true);
-                expect(nearlyEqual(m.e, 0)).toBe(true);
-                expect(nearlyEqual(m.f, 0)).toBe(true);
-            });
-        });
-
-        await describe('save / restore', async () => {
-            await it('restore reverts the matrix set inside a save block', async () => {
-                const ctx = makeCtx();
-                ctx.translate(10, 20);
-                ctx.save();
-                ctx.scale(5, 5);
-                ctx.translate(100, 200);
-                ctx.restore();
-                const m = ctx.getTransform();
-                expect(nearlyEqual(m.a, 1)).toBe(true);
-                expect(nearlyEqual(m.d, 1)).toBe(true);
-                expect(nearlyEqual(m.e, 10)).toBe(true);
-                expect(nearlyEqual(m.f, 20)).toBe(true);
-            });
-        });
-
-        await describe('Excalibur-style multiply pattern', async () => {
-            await it('ctx.setTransform(ctx.getTransform().multiply(other)) round-trips', async () => {
-                // getTransform returns a real DOMMatrix instance only when
-                // globalThis.DOMMatrix is installed (via @gjsify/dom-elements).
-                // Inject a minimal DOMMatrix for this test so the multiply
-                // code path runs end-to-end.
-                if (typeof (globalThis as any).DOMMatrix === 'undefined') {
-                    class TestDOMMatrix {
-                        a = 1; b = 0; c = 0; d = 1; e = 0; f = 0;
-                        constructor(init?: number[]) {
-                            if (Array.isArray(init) && init.length === 6) {
-                                this.a = init[0]; this.b = init[1];
-                                this.c = init[2]; this.d = init[3];
-                                this.e = init[4]; this.f = init[5];
-                            }
-                        }
-                        multiply(o: { a: number; b: number; c: number; d: number; e: number; f: number }) {
-                            const a = this.a * o.a + this.c * o.b;
-                            const b = this.b * o.a + this.d * o.b;
-                            const c = this.a * o.c + this.c * o.d;
-                            const d = this.b * o.c + this.d * o.d;
-                            const e = this.a * o.e + this.c * o.f + this.e;
-                            const f = this.b * o.e + this.d * o.f + this.f;
-                            return new TestDOMMatrix([a, b, c, d, e, f]);
-                        }
-                    }
-                    (globalThis as any).DOMMatrix = TestDOMMatrix;
-                }
-
-                const ctx = makeCtx();
-                ctx.translate(50, 50);
-                // Simulate Excalibur's GraphicsContext2DCanvas.multiply():
-                //     ctx.setTransform(ctx.getTransform().multiply(otherMatrix))
-                const current = ctx.getTransform() as any;
-                expect(typeof current.multiply).toBe('function');
-                const other = { a: 2, b: 0, c: 0, d: 2, e: 0, f: 0 } as any;
-                const composed = current.multiply(other);
-                ctx.setTransform(composed);
-                const final = ctx.getTransform();
-                // translate(50,50) then scale(2,2) → matrix [2,0,0,2,50,50]
-                expect(nearlyEqual(final.a, 2)).toBe(true);
-                expect(nearlyEqual(final.d, 2)).toBe(true);
-                expect(nearlyEqual(final.e, 50)).toBe(true);
-                expect(nearlyEqual(final.f, 50)).toBe(true);
-            });
-        });
-    });
-};

package/src/color.ts

@@ -1,177 +0,0 @@
-// CSS color parser for Canvas 2D context
-// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
-
-export interface RGBA {
-    r: number; // 0-1
-    g: number; // 0-1
-    b: number; // 0-1
-    a: number; // 0-1
-}
-
-// CSS named colors (all 148 standard colors)
-const NAMED_COLORS: Record<string, string> = {
-    aliceblue: '#f0f8ff', antiquewhite: '#faebd7', aqua: '#00ffff', aquamarine: '#7fffd4',
-    azure: '#f0ffff', beige: '#f5f5dc', bisque: '#ffe4c4', black: '#000000',
-    blanchedalmond: '#ffebcd', blue: '#0000ff', blueviolet: '#8a2be2', brown: '#a52a2a',
-    burlywood: '#deb887', cadetblue: '#5f9ea0', chartreuse: '#7fff00', chocolate: '#d2691e',
-    coral: '#ff7f50', cornflowerblue: '#6495ed', cornsilk: '#fff8dc', crimson: '#dc143c',
-    cyan: '#00ffff', darkblue: '#00008b', darkcyan: '#008b8b', darkgoldenrod: '#b8860b',
-    darkgray: '#a9a9a9', darkgreen: '#006400', darkgrey: '#a9a9a9', darkkhaki: '#bdb76b',
-    darkmagenta: '#8b008b', darkolivegreen: '#556b2f', darkorange: '#ff8c00', darkorchid: '#9932cc',
-    darkred: '#8b0000', darksalmon: '#e9967a', darkseagreen: '#8fbc8f', darkslateblue: '#483d8b',
-    darkslategray: '#2f4f4f', darkslategrey: '#2f4f4f', darkturquoise: '#00ced1', darkviolet: '#9400d3',
-    deeppink: '#ff1493', deepskyblue: '#00bfff', dimgray: '#696969', dimgrey: '#696969',
-    dodgerblue: '#1e90ff', firebrick: '#b22222', floralwhite: '#fffaf0', forestgreen: '#228b22',
-    fuchsia: '#ff00ff', gainsboro: '#dcdcdc', ghostwhite: '#f8f8ff', gold: '#ffd700',
-    goldenrod: '#daa520', gray: '#808080', green: '#008000', greenyellow: '#adff2f',
-    grey: '#808080', honeydew: '#f0fff0', hotpink: '#ff69b4', indianred: '#cd5c5c',
-    indigo: '#4b0082', ivory: '#fffff0', khaki: '#f0e68c', lavender: '#e6e6fa',
-    lavenderblush: '#fff0f5', lawngreen: '#7cfc00', lemonchiffon: '#fffacd', lightblue: '#add8e6',
-    lightcoral: '#f08080', lightcyan: '#e0ffff', lightgoldenrodyellow: '#fafad2', lightgray: '#d3d3d3',
-    lightgreen: '#90ee90', lightgrey: '#d3d3d3', lightpink: '#ffb6c1', lightsalmon: '#ffa07a',
-    lightseagreen: '#20b2aa', lightskyblue: '#87cefa', lightslategray: '#778899', lightslategrey: '#778899',
-    lightsteelblue: '#b0c4de', lightyellow: '#ffffe0', lime: '#00ff00', limegreen: '#32cd32',
-    linen: '#faf0e6', magenta: '#ff00ff', maroon: '#800000', mediumaquamarine: '#66cdaa',
-    mediumblue: '#0000cd', mediumorchid: '#ba55d3', mediumpurple: '#9370db', mediumseagreen: '#3cb371',
-    mediumslateblue: '#7b68ee', mediumspringgreen: '#00fa9a', mediumturquoise: '#48d1cc',
-    mediumvioletred: '#c71585', midnightblue: '#191970', mintcream: '#f5fffa', mistyrose: '#ffe4e1',
-    moccasin: '#ffe4b5', navajowhite: '#ffdead', navy: '#000080', oldlace: '#fdf5e6',
-    olive: '#808000', olivedrab: '#6b8e23', orange: '#ffa500', orangered: '#ff4500',
-    orchid: '#da70d6', palegoldenrod: '#eee8aa', palegreen: '#98fb98', paleturquoise: '#afeeee',
-    palevioletred: '#db7093', papayawhip: '#ffefd5', peachpuff: '#ffdab9', peru: '#cd853f',
-    pink: '#ffc0cb', plum: '#dda0dd', powderblue: '#b0e0e6', purple: '#800080',
-    rebeccapurple: '#663399', red: '#ff0000', rosybrown: '#bc8f8f', royalblue: '#4169e1',
-    saddlebrown: '#8b4513', salmon: '#fa8072', sandybrown: '#f4a460', seagreen: '#2e8b57',
-    seashell: '#fff5ee', sienna: '#a0522d', silver: '#c0c0c0', skyblue: '#87ceeb',
-    slateblue: '#6a5acd', slategray: '#708090', slategrey: '#708090', snow: '#fffafa',
-    springgreen: '#00ff7f', steelblue: '#4682b4', tan: '#d2b48c', teal: '#008080',
-    thistle: '#d8bfd8', tomato: '#ff6347', turquoise: '#40e0d0', violet: '#ee82ee',
-    wheat: '#f5deb3', white: '#ffffff', whitesmoke: '#f5f5f5', yellow: '#ffff00',
-    yellowgreen: '#9acd32',
-    transparent: '#00000000',
-};
-
-/**
- * Parse a CSS color string into RGBA components (0-1 range).
- * Supports: #rgb, #rrggbb, #rgba, #rrggbbaa, rgb(), rgba(), hsl(), hsla(), named colors, 'transparent'.
- *
- * Also handles Excalibur's non-standard HSL format where h/s/l are all in 0-1 range (not degrees/%).
- * Excalibur's Color.toString() returns `hsla(h, s, l, a)` with values in 0-1 normalized form
- * (e.g. Color.White → "hsla(0, 0, 1, 1)", Color.Black → "hsla(0, 0, 0, 1)").
- */
-export function parseColor(color: string): RGBA | null {
-    if (!color || typeof color !== 'string') return null;
-
-    const trimmed = color.trim().toLowerCase();
-
-    // Named colors
-    const named = NAMED_COLORS[trimmed];
-    if (named) return parseHex(named);
-
-    // Hex formats
-    if (trimmed.startsWith('#')) return parseHex(trimmed);
-
-    // rgb()/rgba()
-    const rgbMatch = trimmed.match(
-        /^rgba?\(\s*(\d+(?:\.\d+)?%?)\s*[,\s]\s*(\d+(?:\.\d+)?%?)\s*[,\s]\s*(\d+(?:\.\d+)?%?)\s*(?:[,/]\s*(\d+(?:\.\d+)?%?))?\s*\)$/
-    );
-    if (rgbMatch) {
-        return {
-            r: parseComponent(rgbMatch[1], 255) / 255,
-            g: parseComponent(rgbMatch[2], 255) / 255,
-            b: parseComponent(rgbMatch[3], 255) / 255,
-            a: rgbMatch[4] !== undefined ? parseComponent(rgbMatch[4], 1) : 1,
-        };
-    }
-
-    // hsl()/hsla() — handles both standard CSS (degrees, %) and Excalibur's 0-1 normalized form.
-    // Heuristic: if s/l have no % and are ≤ 1, treat as 0-1 normalized; if h > 1, treat as degrees.
-    const hslMatch = trimmed.match(
-        /^hsla?\(\s*(\d+(?:\.\d+)?)\s*[,\s]\s*(\d+(?:\.\d+)?)(%)?\s*[,\s]\s*(\d+(?:\.\d+)?)(%)?\s*(?:[,/]\s*(\d+(?:\.\d+)?%?))?\s*\)$/
-    );
-    if (hslMatch) {
-        let h = parseFloat(hslMatch[1]);
-        let s = parseFloat(hslMatch[2]);
-        const sPct = hslMatch[3] === '%';
-        let l = parseFloat(hslMatch[4]);
-        const lPct = hslMatch[5] === '%';
-        const a = hslMatch[6] !== undefined ? parseComponent(hslMatch[6], 1) : 1;
-
-        // Normalize h to 0-1 range: if > 1, it's degrees (0-360)
-        if (h > 1) h /= 360;
-        // Normalize s to 0-1 range
-        if (sPct) s /= 100;
-        else if (s > 1) s /= 100;
-        // Normalize l to 0-1 range
-        if (lPct) l /= 100;
-        else if (l > 1) l /= 100;
-
-        return hslToRGBA(h, s, l, Math.max(0, Math.min(1, a)));
-    }
-
-    return null;
-}
-
-function parseHex(hex: string): RGBA | null {
-    const h = hex.slice(1);
-    let r: number, g: number, b: number, a = 1;
-
-    if (h.length === 3) {
-        r = parseInt(h[0] + h[0], 16) / 255;
-        g = parseInt(h[1] + h[1], 16) / 255;
-        b = parseInt(h[2] + h[2], 16) / 255;
-    } else if (h.length === 4) {
-        r = parseInt(h[0] + h[0], 16) / 255;
-        g = parseInt(h[1] + h[1], 16) / 255;
-        b = parseInt(h[2] + h[2], 16) / 255;
-        a = parseInt(h[3] + h[3], 16) / 255;
-    } else if (h.length === 6) {
-        r = parseInt(h.slice(0, 2), 16) / 255;
-        g = parseInt(h.slice(2, 4), 16) / 255;
-        b = parseInt(h.slice(4, 6), 16) / 255;
-    } else if (h.length === 8) {
-        r = parseInt(h.slice(0, 2), 16) / 255;
-        g = parseInt(h.slice(2, 4), 16) / 255;
-        b = parseInt(h.slice(4, 6), 16) / 255;
-        a = parseInt(h.slice(6, 8), 16) / 255;
-    } else {
-        return null;
-    }
-
-    return { r, g, b, a };
-}
-
-function parseComponent(value: string, max: number): number {
-    if (value.endsWith('%')) {
-        return (parseFloat(value) / 100) * max;
-    }
-    return parseFloat(value);
-}
-
-function hue2rgb(p: number, q: number, t: number): number {
-    if (t < 0) t += 1;
-    if (t > 1) t -= 1;
-    if (t < 1 / 6) return p + (q - p) * 6 * t;
-    if (t < 1 / 2) return q;
-    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-    return p;
-}
-
-function hslToRGBA(h: number, s: number, l: number, a: number): RGBA {
-    let r: number, g: number, b: number;
-    if (s === 0) {
-        r = g = b = l;
-    } else {
-        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-        const p = 2 * l - q;
-        r = hue2rgb(p, q, h + 1 / 3);
-        g = hue2rgb(p, q, h);
-        b = hue2rgb(p, q, h - 1 / 3);
-    }
-    return { r, g, b, a };
-}
-
-/** Default color: opaque black */
-export const BLACK: RGBA = { r: 0, g: 0, b: 0, a: 1 };
-/** Transparent black */
-export const TRANSPARENT: RGBA = { r: 0, g: 0, b: 0, a: 0 };

package/src/image-data.ts

@@ -1,34 +0,0 @@
-// ImageData implementation for Canvas 2D context
-// Reference: https://developer.mozilla.org/en-US/docs/Web/API/ImageData
-
-/**
- * ImageData represents the pixel data of a canvas area.
- * Each pixel is 4 bytes: R, G, B, A (0-255 each).
- */
-export class OurImageData {
-    readonly data: Uint8ClampedArray;
-    readonly width: number;
-    readonly height: number;
-    readonly colorSpace: PredefinedColorSpace = 'srgb';
-
-    constructor(sw: number, sh: number);
-    constructor(data: Uint8ClampedArray, sw: number, sh?: number);
-    constructor(swOrData: number | Uint8ClampedArray, sh: number, maybeHeight?: number) {
-        if (typeof swOrData === 'number') {
-            // new ImageData(width, height)
-            this.width = swOrData;
-            this.height = sh;
-            this.data = new Uint8ClampedArray(this.width * this.height * 4);
-        } else {
-            // new ImageData(data, width[, height])
-            this.data = swOrData;
-            this.width = sh;
-            this.height = maybeHeight ?? (this.data.length / (4 * this.width));
-            if (this.data.length !== this.width * this.height * 4) {
-                throw new RangeError(
-                    `Source data length ${this.data.length} is not a multiple of (4 * width=${this.width})`
-                );
-            }
-        }
-    }
-}

package/src/index.ts

@@ -1,14 +0,0 @@
-// Cairo-backed Canvas 2D core — no @gjsify/dom-elements dependency.
-// Extracted from @gjsify/canvas2d so @gjsify/dom-elements can depend on it
-// without creating a circular dependency.
-//
-// @gjsify/dom-elements imports this package to auto-register the '2d' context
-// factory on HTMLCanvasElement, mirroring browser behavior where
-// canvas.getContext('2d') works without any explicit import.
-
-export { CanvasRenderingContext2D } from './canvas-rendering-context-2d.js';
-export { CanvasGradient } from './canvas-gradient.js';
-export { CanvasPattern } from './canvas-pattern.js';
-export { Path2D } from './canvas-path.js';
-export { OurImageData as ImageData } from './image-data.js';
-export { parseColor } from './color.js';