@gjsify/canvas2d 0.3.21 → 0.4.3

package/src/canvas2d-bridge.ts

@@ -1,196 +0,0 @@
-// Canvas2DBridge — GTK container for HTMLCanvasElement (2D) backed by Cairo.
-// Provides a Gtk.DrawingArea subclass that handles Canvas 2D bootstrapping.
-// Pattern follows packages/dom/iframe/src/iframe-bridge.ts (IFrameBridge)
-
-import GObject from 'gi://GObject';
-import Gdk from 'gi://Gdk?version=4.0';
-import GLib from 'gi://GLib?version=2.0';
-import Gtk from 'gi://Gtk?version=4.0';
-import { HTMLCanvasElement as GjsifyHTMLCanvasElement } from '@gjsify/dom-elements';
-import { attachEventControllers } from '@gjsify/event-bridge';
-import { CanvasRenderingContext2D } from '@gjsify/canvas2d-core';
-import { Event } from '@gjsify/dom-events';
-
-type Canvas2DReadyCallback = (canvas: globalThis.HTMLCanvasElement, ctx: CanvasRenderingContext2D) => void;
-
-/**
- * A `Gtk.DrawingArea` subclass that handles Canvas 2D bootstrapping:
- * - Creates an `HTMLCanvasElement` + `CanvasRenderingContext2D` on first draw
- * - Blits the Canvas 2D Cairo.ImageSurface onto the DrawingArea each frame
- * - Fires `onReady()` callbacks with (canvas, ctx) once the context is available
- * - Provides `requestAnimationFrame()` backed by GTK frame clock (vsync)
- * - `installGlobals()` sets `globalThis.requestAnimationFrame` and `globalThis.performance`
- *
- * Usage:
- * ```ts
- * const widget = new Canvas2DBridge();
- * widget.installGlobals();  // sets globalThis.requestAnimationFrame
- * widget.onReady((canvas, ctx) => {
- *     ctx.fillStyle = 'red';
- *     ctx.fillRect(0, 0, 100, 100);
- * });
- * window.set_child(widget);
- * ```
- */
-// Gtk.DrawingArea inherits a 'resize' signal with signature
-// (widget: Drawable, width: int, height: int) from its ancestors (Gtk.Widget).
-// WebGLBridge uses Gtk.GLArea which has the same-shaped signal. We do
-// NOT register a custom signal — we piggyback on the inherited one so
-// consumers can use a single pattern on both widgets:
-//   widget.connect('resize', (w, width, height) => { ... })
-// In addition, _onDraw fires onResize(cb) callbacks and dispatches a DOM
-// 'resize' event on the canvas for browser-style listeners.
-
-export const Canvas2DBridge = GObject.registerClass(
-    { GTypeName: 'GjsifyCanvas2DBridge' },
-    class Canvas2DBridge extends Gtk.DrawingArea {
-        _canvas: GjsifyHTMLCanvasElement | null = null;
-        _ctx: CanvasRenderingContext2D | null = null;
-        _readyCallbacks: Canvas2DReadyCallback[] = [];
-        _resizeCallbacks: ((w: number, h: number) => void)[] = [];
-        _tickCallbackId: number | null = null;
-        _frameCallback: FrameRequestCallback | null = null;
-        // Time origin in microseconds (GLib monotonic clock).
-        // Both requestAnimationFrame timestamps and performance.now() are
-        // relative to this origin, matching the browser DOMHighResTimeStamp spec.
-        _timeOrigin: number = GLib.get_monotonic_time();
-
-        constructor(params?: Partial<Gtk.DrawingArea.ConstructorProps>) {
-            super(params);
-            this.set_draw_func(this._onDraw.bind(this));
-
-            // Bridge GTK events → DOM events on the canvas element
-            // captureKeys: true prevents GTK focus traversal consuming arrow/Enter keys
-            attachEventControllers(this, () => this._canvas, { captureKeys: true });
-
-            this.connect('unrealize', () => {
-                if (this._tickCallbackId !== null) {
-                    this.remove_tick_callback(this._tickCallbackId);
-                    this._tickCallbackId = null;
-                }
-                if (this._ctx) {
-                    this._ctx._dispose();
-                }
-                this._canvas = null;
-                this._ctx = null;
-            });
-        }
-
-        /** @internal Draw function called by GTK. Blits the Cairo surface to screen. */
-        _onDraw(_area: Gtk.DrawingArea, cr: any, width: number, height: number): void {
-            // Lazy init: create canvas + 2D context on first draw.
-            // We do NOT sync dimensions after onReady fires: ready callbacks may set their
-            // own canvas dimensions (e.g. a static render at a fixed size). Syncing here
-            // would clear the surface they just drew into.
-            if (!this._canvas) {
-                this._canvas = new GjsifyHTMLCanvasElement();
-                this._canvas.width = width;
-                this._canvas.height = height;
-                // Import side-effect registers the '2d' factory, so getContext('2d') works
-                this._ctx = this._canvas.getContext('2d') as unknown as CanvasRenderingContext2D;
-                if (this._ctx) {
-                    for (const cb of this._readyCallbacks) {
-                        cb(this._canvas as unknown as globalThis.HTMLCanvasElement, this._ctx);
-                    }
-                    this._readyCallbacks = [];
-                }
-            } else if (this._canvas.width !== width || this._canvas.height !== height) {
-                // Subsequent draw: GTK widget was resized — sync canvas and notify listeners.
-                // NOTE: Gtk.DrawingArea itself emits the 'resize' GObject signal
-                // (inherited) when the allocation changes, so consumers can use
-                // widget.connect('resize', ...) without us emitting it here.
-                // We additionally dispatch a DOM 'resize' event on the canvas
-                // and fire onResize() callbacks for cross-widget API parity
-                // with WebGLBridge.
-                this._canvas.width = width;
-                this._canvas.height = height;
-                this._canvas.dispatchEvent(new Event('resize'));
-                for (const cb of this._resizeCallbacks) {
-                    cb(width, height);
-                }
-            }
-
-            // Blit the Canvas 2D's Cairo.ImageSurface onto the DrawingArea
-            if (this._ctx) {
-                const surface = this._ctx._getSurface();
-                cr.setSourceSurface(surface, 0, 0);
-                cr.paint();
-            }
-        }
-
-        /** The HTMLCanvasElement backing this widget. Available after the first draw. */
-        get canvas(): globalThis.HTMLCanvasElement | null {
-            return this._canvas as unknown as globalThis.HTMLCanvasElement | null;
-        }
-
-        /** Get the 2D rendering context. Available after the first draw. */
-        getContext(_id: '2d'): CanvasRenderingContext2D | null {
-            return this._ctx;
-        }
-
-        /**
-         * Register a callback to be invoked once the Canvas 2D context is ready.
-         * If the context is already available, the callback fires synchronously.
-         */
-        onReady(cb: Canvas2DReadyCallback): void {
-            if (this._canvas && this._ctx) {
-                cb(this._canvas as unknown as globalThis.HTMLCanvasElement, this._ctx);
-                return;
-            }
-            this._readyCallbacks.push(cb);
-        }
-
-        /**
-         * Register a callback invoked whenever the GTK widget is resized.
-         * Canvas dimensions are already updated when the callback fires.
-         * Call `queue_draw()` after re-rendering to push the new surface to screen.
-         */
-        onResize(cb: (width: number, height: number) => void): void {
-            this._resizeCallbacks.push(cb);
-        }
-
-        /**
-         * Schedules a single animation frame callback, matching the browser `requestAnimationFrame` API.
-         * Backed by GTK frame clock (vsync-synced, typically ~60 FPS).
-         * Returns 0 (handle — cancel not yet implemented).
-         */
-        requestAnimationFrame(cb: FrameRequestCallback): number {
-            this._frameCallback = cb;
-            if (this._tickCallbackId === null) {
-                this._tickCallbackId = this.add_tick_callback((_widget: Gtk.Widget, frameClock: Gdk.FrameClock) => {
-                    this._tickCallbackId = null;
-                    // DOMHighResTimeStamp: ms since time origin, matching performance.now()
-                    const time = (frameClock.get_frame_time() - this._timeOrigin) / 1000;
-                    this._frameCallback?.(time);
-                    this.queue_draw();
-                    return GLib.SOURCE_REMOVE;
-                });
-            }
-            // Ensure GTK schedules a new frame so the tick callback fires.
-            // Without this, requestAnimationFrame called during the paint phase
-            // (e.g. from onReady) may not trigger the frame clock to tick again.
-            this.queue_draw();
-            return 0;
-        }
-
-        /**
-         * Sets browser globals (`requestAnimationFrame`, `performance`) so that
-         * browser-targeted code works unchanged on GJS.
-         */
-        installGlobals(): void {
-            (globalThis as any).requestAnimationFrame = (cb: FrameRequestCallback) =>
-                this.requestAnimationFrame(cb);
-            // Install performance.now() on the same time origin as rAF timestamps.
-            // Always override to ensure consistency — native GJS performance.now()
-            // may use a different time origin than the frame clock.
-            const timeOrigin = this._timeOrigin;
-            (globalThis as any).performance = {
-                now: () => (GLib.get_monotonic_time() - timeOrigin) / 1000,
-                timeOrigin: Date.now(),
-            };
-        }
-    }
-);
-
-// Export the instance type so callers can type-annotate their Canvas2DBridge variables
-export type Canvas2DBridge = InstanceType<typeof Canvas2DBridge>;

package/src/color.ts

@@ -1,125 +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(), named colors, 'transparent'.
- */
-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,
-        };
-    }
-
-    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);
-}
-
-/** 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,3 +0,0 @@
-// Moved to @gjsify/canvas2d-core — re-exported here for backward compatibility.
-// Note: canvas2d-core exports OurImageData as 'ImageData'; we re-export under the original internal name.
-export { ImageData as OurImageData } from '@gjsify/canvas2d-core';