@gjsify/canvas2d 0.1.2 → 0.1.3

package/lib/esm/image-data.js

@@ -1,22 +1,4 @@
-class OurImageData {
-  constructor(swOrData, sh, maybeHeight) {
-    this.colorSpace = "srgb";
-    if (typeof swOrData === "number") {
-      this.width = swOrData;
-      this.height = sh;
-      this.data = new Uint8ClampedArray(this.width * this.height * 4);
-    } else {
-      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})`
-        );
-      }
-    }
-  }
-}
+import { ImageData } from "@gjsify/canvas2d-core";
 export {
-  OurImageData
+  ImageData as OurImageData
 };

package/lib/esm/index.js

@@ -1,12 +1,7 @@
-import { CanvasRenderingContext2D } from "./canvas-rendering-context-2d.js";
-import { CanvasGradient } from "./canvas-gradient.js";
-import { CanvasPattern } from "./canvas-pattern.js";
-import { Path2D } from "./canvas-path.js";
-import { OurImageData } from "./image-data.js";
-import { parseColor } from "./color.js";
+import { CanvasRenderingContext2D, CanvasGradient, CanvasPattern, Path2D, ImageData, parseColor } from "@gjsify/canvas2d-core";
 import { Canvas2DWidget } from "./canvas-drawing-area.js";
 import { HTMLCanvasElement as GjsifyHTMLCanvasElement } from "@gjsify/dom-elements";
-import { CanvasRenderingContext2D as CanvasRenderingContext2D2 } from "./canvas-rendering-context-2d.js";
+import { CanvasRenderingContext2D as CanvasRenderingContext2D2, ImageData as ImageData2, Path2D as Path2D2 } from "@gjsify/canvas2d-core";
 const CONTEXT_KEY = /* @__PURE__ */ Symbol.for("gjsify_canvas2d_context");
 GjsifyHTMLCanvasElement.registerContextFactory("2d", (canvas, options) => {
   const existing = canvas[CONTEXT_KEY];
@@ -15,15 +10,13 @@ GjsifyHTMLCanvasElement.registerContextFactory("2d", (canvas, options) => {
   canvas[CONTEXT_KEY] = ctx;
   return ctx;
 });
-import { OurImageData as OurImageData2 } from "./image-data.js";
-import { Path2D as Path2D2 } from "./canvas-path.js";
 Object.defineProperty(globalThis, "CanvasRenderingContext2D", {
   value: CanvasRenderingContext2D2,
   writable: true,
   configurable: true
 });
 Object.defineProperty(globalThis, "ImageData", {
-  value: OurImageData2,
+  value: ImageData2,
   writable: true,
   configurable: true
 });
@@ -37,7 +30,7 @@ export {
   CanvasGradient,
   CanvasPattern,
   CanvasRenderingContext2D,
-  OurImageData as ImageData,
+  ImageData,
   Path2D,
   parseColor
 };

package/lib/types/canvas-drawing-area.d.ts

@@ -3,7 +3,7 @@ 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 { CanvasRenderingContext2D } from './canvas-rendering-context-2d.js';
+import { CanvasRenderingContext2D } from '@gjsify/canvas2d-core';
 type Canvas2DReadyCallback = (canvas: globalThis.HTMLCanvasElement, ctx: CanvasRenderingContext2D) => void;
 /**
  * A `Gtk.DrawingArea` subclass that handles Canvas 2D bootstrapping:
@@ -29,6 +29,7 @@ export declare const Canvas2DWidget: {
         _canvas: GjsifyHTMLCanvasElement | null;
         _ctx: CanvasRenderingContext2D | null;
         _readyCallbacks: Canvas2DReadyCallback[];
+        _resizeCallbacks: ((w: number, h: number) => void)[];
         _tickCallbackId: number | null;
         _frameCallback: FrameRequestCallback | null;
         _timeOrigin: number;
@@ -43,6 +44,12 @@ export declare const Canvas2DWidget: {
          * If the context is already available, the callback fires synchronously.
          */
         onReady(cb: Canvas2DReadyCallback): void;
+        /**
+         * 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;
         /**
          * Schedules a single animation frame callback, matching the browser `requestAnimationFrame` API.
          * Backed by GTK frame clock (vsync-synced, typically ~60 FPS).

package/lib/types/canvas-gradient.d.ts

@@ -1,11 +1 @@
-import Cairo from 'cairo';
-/**
- * CanvasGradient wrapping a Cairo LinearGradient or RadialGradient.
- */
-export declare class CanvasGradient {
-    private _pattern;
-    constructor(type: 'linear' | 'radial', x0: number, y0: number, x1: number, y1: number, r0?: number, r1?: number);
-    addColorStop(offset: number, color: string): void;
-    /** @internal Get the underlying Cairo pattern for rendering. */
-    _getCairoPattern(): Cairo.LinearGradient | Cairo.RadialGradient;
-}
+export { CanvasGradient } from '@gjsify/canvas2d-core';

package/lib/types/canvas-path.d.ts

@@ -1,80 +1 @@
-/** A recorded path operation. */
-type PathOp = {
-    type: 'moveTo';
-    x: number;
-    y: number;
-} | {
-    type: 'lineTo';
-    x: number;
-    y: number;
-} | {
-    type: 'closePath';
-} | {
-    type: 'bezierCurveTo';
-    cp1x: number;
-    cp1y: number;
-    cp2x: number;
-    cp2y: number;
-    x: number;
-    y: number;
-} | {
-    type: 'quadraticCurveTo';
-    cpx: number;
-    cpy: number;
-    x: number;
-    y: number;
-} | {
-    type: 'arc';
-    x: number;
-    y: number;
-    radius: number;
-    startAngle: number;
-    endAngle: number;
-    ccw: boolean;
-} | {
-    type: 'ellipse';
-    x: number;
-    y: number;
-    rx: number;
-    ry: number;
-    rotation: number;
-    startAngle: number;
-    endAngle: number;
-    ccw: boolean;
-} | {
-    type: 'rect';
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-} | {
-    type: 'roundRect';
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-    radii: number | number[];
-};
-/**
- * Path2D records path operations for later replay on a CanvasRenderingContext2D.
- */
-export declare class Path2D {
-    /** @internal Recorded operations */
-    _ops: PathOp[];
-    constructor(pathOrSvg?: Path2D | string);
-    addPath(path: Path2D): void;
-    moveTo(x: number, y: number): void;
-    lineTo(x: number, y: number): void;
-    closePath(): void;
-    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
-    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
-    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
-    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
-    rect(x: number, y: number, w: number, h: number): void;
-    roundRect(x: number, y: number, w: number, h: number, radii?: number | number[]): void;
-    /**
-     * @internal Replay all recorded path operations onto a Cairo context.
-     */
-    _replayOnCairo(ctx: import('cairo').default.Context): void;
-}
-export {};
+export { Path2D } from '@gjsify/canvas2d-core';

package/lib/types/canvas-pattern.d.ts

@@ -1,12 +1 @@
-import Cairo from 'cairo';
-/**
- * CanvasPattern wrapping a Cairo SurfacePattern.
- */
-export declare class CanvasPattern {
-    private _pattern;
-    private constructor();
-    /** Create a CanvasPattern from a supported image source. Returns null if unsupported. */
-    static create(image: any, repetition: string | null): CanvasPattern | null;
-    /** @internal Get the underlying Cairo pattern for rendering. */
-    _getCairoPattern(): Cairo.SurfacePattern;
-}
+export { CanvasPattern } from '@gjsify/canvas2d-core';

package/lib/types/canvas-rendering-context-2d.d.ts

@@ -1,155 +1 @@
-import Cairo from 'cairo';
-import { Path2D } from './canvas-path.js';
-/**
- * CanvasRenderingContext2D backed by Cairo.ImageSurface.
- * Implements the Canvas 2D API for GJS.
- */
-export declare class CanvasRenderingContext2D {
-    readonly canvas: any;
-    private _surface;
-    private _ctx;
-    private _state;
-    private _stateStack;
-    private _surfaceWidth;
-    private _surfaceHeight;
-    constructor(canvas: any, _options?: any);
-    /** Ensure the surface matches the current canvas dimensions. Recreate if resized. */
-    private _ensureSurface;
-    /** Apply the current fill style (color, gradient, or pattern) to the Cairo context. */
-    private _applyFillStyle;
-    /** Apply the current stroke style to the Cairo context. */
-    private _applyStrokeStyle;
-    /** Apply line properties to the Cairo context. */
-    private _applyLineStyle;
-    /** Apply compositing operator. */
-    private _applyCompositing;
-    /** Get the Cairo ImageSurface (used by other contexts like drawImage). */
-    _getSurface(): Cairo.ImageSurface;
-    /** Check if shadow rendering is needed. */
-    private _hasShadow;
-    /**
-     * Render a shadow for the current path by painting to a temp surface,
-     * applying a simple box blur approximation, and compositing back.
-     * This is called before the actual fill/stroke when shadows are active.
-     */
-    private _renderShadow;
-    save(): void;
-    restore(): void;
-    translate(x: number, y: number): void;
-    rotate(angle: number): void;
-    scale(x: number, y: number): void;
-    /**
-     * Multiply the current transformation matrix by the given values.
-     * Matrix: [a c e]
-     *         [b d f]
-     *         [0 0 1]
-     */
-    transform(a: number, b: number, c: number, d: number, e: number, f: number): void;
-    /**
-     * Reset the transform to identity, then apply the given matrix.
-     */
-    setTransform(matrix?: DOMMatrix2DInit): void;
-    setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;
-    /**
-     * Return the current transformation matrix as a DOMMatrix-like object.
-     */
-    getTransform(): DOMMatrix;
-    resetTransform(): void;
-    get fillStyle(): string | CanvasGradient | CanvasPattern;
-    set fillStyle(value: string | CanvasGradient | CanvasPattern);
-    get strokeStyle(): string | CanvasGradient | CanvasPattern;
-    set strokeStyle(value: string | CanvasGradient | CanvasPattern);
-    get lineWidth(): number;
-    set lineWidth(value: number);
-    get lineCap(): CanvasLineCap;
-    set lineCap(value: CanvasLineCap);
-    get lineJoin(): CanvasLineJoin;
-    set lineJoin(value: CanvasLineJoin);
-    get miterLimit(): number;
-    set miterLimit(value: number);
-    get globalAlpha(): number;
-    set globalAlpha(value: number);
-    get globalCompositeOperation(): GlobalCompositeOperation;
-    set globalCompositeOperation(value: GlobalCompositeOperation);
-    get imageSmoothingEnabled(): boolean;
-    set imageSmoothingEnabled(value: boolean);
-    get imageSmoothingQuality(): ImageSmoothingQuality;
-    set imageSmoothingQuality(value: ImageSmoothingQuality);
-    setLineDash(segments: number[]): void;
-    getLineDash(): number[];
-    get lineDashOffset(): number;
-    set lineDashOffset(value: number);
-    get shadowColor(): string;
-    set shadowColor(value: string);
-    get shadowBlur(): number;
-    set shadowBlur(value: number);
-    get shadowOffsetX(): number;
-    set shadowOffsetX(value: number);
-    get shadowOffsetY(): number;
-    set shadowOffsetY(value: number);
-    get font(): string;
-    set font(value: string);
-    get textAlign(): CanvasTextAlign;
-    set textAlign(value: CanvasTextAlign);
-    get textBaseline(): CanvasTextBaseline;
-    set textBaseline(value: CanvasTextBaseline);
-    get direction(): CanvasDirection;
-    set direction(value: CanvasDirection);
-    beginPath(): void;
-    moveTo(x: number, y: number): void;
-    lineTo(x: number, y: number): void;
-    closePath(): void;
-    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
-    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
-    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
-    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
-    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
-    rect(x: number, y: number, w: number, h: number): void;
-    roundRect(x: number, y: number, w: number, h: number, radii?: number | number[]): void;
-    fill(fillRule?: CanvasFillRule): void;
-    fill(path: Path2D, fillRule?: CanvasFillRule): void;
-    stroke(): void;
-    stroke(path: Path2D): void;
-    fillRect(x: number, y: number, w: number, h: number): void;
-    strokeRect(x: number, y: number, w: number, h: number): void;
-    clearRect(x: number, y: number, w: number, h: number): void;
-    clip(fillRule?: CanvasFillRule): void;
-    clip(path: Path2D, fillRule?: CanvasFillRule): void;
-    isPointInPath(x: number, y: number, fillRule?: CanvasFillRule): boolean;
-    isPointInPath(path: Path2D, x: number, y: number, fillRule?: CanvasFillRule): boolean;
-    isPointInStroke(x: number, y: number): boolean;
-    isPointInStroke(path: Path2D, x: number, y: number): boolean;
-    createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient;
-    createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient;
-    createPattern(image: any, repetition: string | null): CanvasPattern | null;
-    createImageData(sw: number, sh: number): ImageData;
-    createImageData(imagedata: ImageData): ImageData;
-    getImageData(sx: number, sy: number, sw: number, sh: number): ImageData;
-    putImageData(imageData: ImageData, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number): void;
-    drawImage(image: any, dx: number, dy: number): void;
-    drawImage(image: any, dx: number, dy: number, dw: number, dh: number): void;
-    drawImage(image: any, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
-    private _getDrawImageSource;
-    /** Create a PangoCairo layout configured with current font/text settings. */
-    private _createTextLayout;
-    /** Parse a CSS font string (e.g. "bold 16px Arial") into a Pango.FontDescription. */
-    private _parseFontToDescription;
-    /**
-     * Compute the x-offset for text alignment relative to the given x coordinate.
-     */
-    private _getTextAlignOffset;
-    /**
-     * Compute the y-offset for text baseline positioning.
-     */
-    private _getTextBaselineOffset;
-    fillText(text: string, x: number, y: number, _maxWidth?: number): void;
-    strokeText(text: string, x: number, y: number, _maxWidth?: number): void;
-    measureText(text: string): TextMetrics;
-    /**
-     * Write the canvas surface to a PNG file and return as data URL.
-     * Used by HTMLCanvasElement.toDataURL() when a '2d' context is active.
-     */
-    _toDataURL(type?: string, _quality?: number): string;
-    /** Release native Cairo resources. Call when the canvas is discarded. */
-    _dispose(): void;
-}
+export { CanvasRenderingContext2D } from '@gjsify/canvas2d-core';

package/lib/types/image-data.d.ts

@@ -1,12 +1 @@
-/**
- * ImageData represents the pixel data of a canvas area.
- * Each pixel is 4 bytes: R, G, B, A (0-255 each).
- */
-export declare class OurImageData {
-    readonly data: Uint8ClampedArray;
-    readonly width: number;
-    readonly height: number;
-    readonly colorSpace: PredefinedColorSpace;
-    constructor(sw: number, sh: number);
-    constructor(data: Uint8ClampedArray, sw: number, sh?: number);
-}
+export { ImageData as OurImageData } from '@gjsify/canvas2d-core';

package/lib/types/index.d.ts

@@ -1,7 +1,2 @@
-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';
+export { CanvasRenderingContext2D, CanvasGradient, CanvasPattern, Path2D, ImageData, parseColor } from '@gjsify/canvas2d-core';
 export { Canvas2DWidget } from './canvas-drawing-area.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjsify/canvas2d",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Canvas 2D rendering context for GJS, backed by Cairo",
   "type": "module",
   "module": "lib/esm/index.js",
@@ -29,22 +29,23 @@
     "cairo"
   ],
   "dependencies": {
-    "@girs/gdk-4.0": "^4.0.0-4.0.0-beta.43",
-    "@girs/gdkpixbuf-2.0": "^2.0.0-4.0.0-beta.43",
-    "@girs/gjs": "^4.0.0-beta.43",
-    "@girs/glib-2.0": "^2.88.0-4.0.0-beta.43",
-    "@girs/gobject-2.0": "^2.88.0-4.0.0-beta.43",
-    "@girs/gtk-4.0": "^4.22.1-4.0.0-beta.43",
-    "@girs/pango-1.0": "^1.57.0-4.0.0-beta.43",
-    "@girs/pangocairo-1.0": "^1.0.0-4.0.0-beta.43",
-    "@gjsify/dom-elements": "^0.1.2",
-    "@gjsify/event-bridge": "^0.1.2",
-    "@gjsify/utils": "^0.1.2"
+    "@girs/gdk-4.0": "^4.0.0-4.0.0-rc.1",
+    "@girs/gdkpixbuf-2.0": "^2.0.0-4.0.0-rc.1",
+    "@girs/gjs": "^4.0.0-rc.1",
+    "@girs/glib-2.0": "^2.88.0-4.0.0-rc.1",
+    "@girs/gobject-2.0": "^2.88.0-4.0.0-rc.1",
+    "@girs/gtk-4.0": "^4.23.0-4.0.0-rc.1",
+    "@girs/pango-1.0": "^1.57.1-4.0.0-rc.1",
+    "@girs/pangocairo-1.0": "^1.0.0-4.0.0-rc.1",
+    "@gjsify/canvas2d-core": "^0.1.3",
+    "@gjsify/dom-elements": "^0.1.3",
+    "@gjsify/event-bridge": "^0.1.3",
+    "@gjsify/utils": "^0.1.3"
   },
   "devDependencies": {
-    "@gjsify/cli": "^0.1.2",
-    "@gjsify/unit": "^0.1.2",
-    "@types/node": "^25.5.0",
+    "@gjsify/cli": "^0.1.3",
+    "@gjsify/unit": "^0.1.3",
+    "@types/node": "^25.5.2",
     "typescript": "^6.0.2"
   }
 }

package/src/canvas-drawing-area.ts

@@ -8,7 +8,7 @@ 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 './canvas-rendering-context-2d.js';
+import { CanvasRenderingContext2D } from '@gjsify/canvas2d-core';
 
 type Canvas2DReadyCallback = (canvas: globalThis.HTMLCanvasElement, ctx: CanvasRenderingContext2D) => void;
 
@@ -37,6 +37,7 @@ export const Canvas2DWidget = GObject.registerClass(
         _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).
@@ -66,7 +67,10 @@ export const Canvas2DWidget = GObject.registerClass(
 
         /** @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
+            // 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;
@@ -79,12 +83,13 @@ export const Canvas2DWidget = GObject.registerClass(
                     }
                     this._readyCallbacks = [];
                 }
-            }
-
-            // Sync dimensions if widget was resized
-            if (this._canvas.width !== width || this._canvas.height !== height) {
+            } else if (this._canvas.width !== width || this._canvas.height !== height) {
+                // Subsequent draw: GTK widget was resized — sync canvas and notify listeners.
                 this._canvas.width = width;
                 this._canvas.height = height;
+                for (const cb of this._resizeCallbacks) {
+                    cb(width, height);
+                }
             }
 
             // Blit the Canvas 2D's Cairo.ImageSurface onto the DrawingArea
@@ -117,6 +122,15 @@ export const Canvas2DWidget = GObject.registerClass(
             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).

package/src/canvas-gradient.ts

@@ -1,36 +1,2 @@
-// CanvasGradient implementation backed by Cairo gradient patterns
-// Reference: https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient
-
-import Cairo from 'cairo';
-import { parseColor } from './color.js';
-
-/**
- * CanvasGradient wrapping a Cairo LinearGradient or RadialGradient.
- */
-export class CanvasGradient {
-    private _pattern: Cairo.LinearGradient | Cairo.RadialGradient;
-
-    constructor(
-        type: 'linear' | 'radial',
-        x0: number, y0: number,
-        x1: number, y1: number,
-        r0?: number, r1?: number,
-    ) {
-        if (type === 'radial') {
-            this._pattern = new Cairo.RadialGradient(x0, y0, r0!, x1, y1, r1!);
-        } else {
-            this._pattern = new Cairo.LinearGradient(x0, y0, x1, y1);
-        }
-    }
-
-    addColorStop(offset: number, color: string): void {
-        const parsed = parseColor(color);
-        if (!parsed) return;
-        this._pattern.addColorStopRGBA(offset, parsed.r, parsed.g, parsed.b, parsed.a);
-    }
-
-    /** @internal Get the underlying Cairo pattern for rendering. */
-    _getCairoPattern(): Cairo.LinearGradient | Cairo.RadialGradient {
-        return this._pattern;
-    }
-}
+// Moved to @gjsify/canvas2d-core — re-exported here for backward compatibility.
+export { CanvasGradient } from '@gjsify/canvas2d-core';

package/src/canvas-path.ts

@@ -1,131 +1,2 @@
-// Path2D implementation for Canvas 2D context
-// Reference: https://developer.mozilla.org/en-US/docs/Web/API/Path2D
-// Records path operations and replays them on a Cairo context.
-
-import { quadraticToCubic, cairoRoundRect } from './cairo-utils.js';
-
-/** A recorded path operation. */
-type PathOp =
-    | { type: 'moveTo'; x: number; y: number }
-    | { type: 'lineTo'; x: number; y: number }
-    | { type: 'closePath' }
-    | { type: 'bezierCurveTo'; cp1x: number; cp1y: number; cp2x: number; cp2y: number; x: number; y: number }
-    | { type: 'quadraticCurveTo'; cpx: number; cpy: number; x: number; y: number }
-    | { type: 'arc'; x: number; y: number; radius: number; startAngle: number; endAngle: number; ccw: boolean }
-    | { type: 'ellipse'; x: number; y: number; rx: number; ry: number; rotation: number; startAngle: number; endAngle: number; ccw: boolean }
-    | { type: 'rect'; x: number; y: number; w: number; h: number }
-    | { type: 'roundRect'; x: number; y: number; w: number; h: number; radii: number | number[] };
-
-/**
- * Path2D records path operations for later replay on a CanvasRenderingContext2D.
- */
-export class Path2D {
-    /** @internal Recorded operations */
-    _ops: PathOp[] = [];
-
-    constructor(pathOrSvg?: Path2D | string) {
-        if (pathOrSvg instanceof Path2D) {
-            this._ops = [...pathOrSvg._ops];
-        }
-        // SVG path string parsing is not implemented (complex, rarely needed)
-    }
-
-    addPath(path: Path2D): void {
-        this._ops.push(...path._ops);
-    }
-
-    moveTo(x: number, y: number): void {
-        this._ops.push({ type: 'moveTo', x, y });
-    }
-
-    lineTo(x: number, y: number): void {
-        this._ops.push({ type: 'lineTo', x, y });
-    }
-
-    closePath(): void {
-        this._ops.push({ type: 'closePath' });
-    }
-
-    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void {
-        this._ops.push({ type: 'bezierCurveTo', cp1x, cp1y, cp2x, cp2y, x, y });
-    }
-
-    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void {
-        this._ops.push({ type: 'quadraticCurveTo', cpx, cpy, x, y });
-    }
-
-    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise = false): void {
-        this._ops.push({ type: 'arc', x, y, radius, startAngle, endAngle, ccw: counterclockwise });
-    }
-
-    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise = false): void {
-        if (radiusX < 0 || radiusY < 0) throw new RangeError('The radii provided are negative');
-        this._ops.push({ type: 'ellipse', x, y, rx: radiusX, ry: radiusY, rotation, startAngle, endAngle, ccw: counterclockwise });
-    }
-
-    rect(x: number, y: number, w: number, h: number): void {
-        this._ops.push({ type: 'rect', x, y, w, h });
-    }
-
-    roundRect(x: number, y: number, w: number, h: number, radii: number | number[] = 0): void {
-        this._ops.push({ type: 'roundRect', x, y, w, h, radii });
-    }
-
-    /**
-     * @internal Replay all recorded path operations onto a Cairo context.
-     */
-    _replayOnCairo(ctx: import('cairo').default.Context): void {
-        let lastX = 0, lastY = 0;
-
-        for (const op of this._ops) {
-            switch (op.type) {
-                case 'moveTo':
-                    ctx.moveTo(op.x, op.y);
-                    lastX = op.x; lastY = op.y;
-                    break;
-                case 'lineTo':
-                    ctx.lineTo(op.x, op.y);
-                    lastX = op.x; lastY = op.y;
-                    break;
-                case 'closePath':
-                    ctx.closePath();
-                    break;
-                case 'bezierCurveTo':
-                    ctx.curveTo(op.cp1x, op.cp1y, op.cp2x, op.cp2y, op.x, op.y);
-                    lastX = op.x; lastY = op.y;
-                    break;
-                case 'quadraticCurveTo': {
-                    const { cp1x, cp1y, cp2x, cp2y } = quadraticToCubic(lastX, lastY, op.cpx, op.cpy, op.x, op.y);
-                    ctx.curveTo(cp1x, cp1y, cp2x, cp2y, op.x, op.y);
-                    lastX = op.x; lastY = op.y;
-                    break;
-                }
-                case 'arc':
-                    if (op.ccw) {
-                        ctx.arcNegative(op.x, op.y, op.radius, op.startAngle, op.endAngle);
-                    } else {
-                        ctx.arc(op.x, op.y, op.radius, op.startAngle, op.endAngle);
-                    }
-                    break;
-                case 'ellipse':
-                    ctx.save();
-                    ctx.translate(op.x, op.y);
-                    ctx.rotate(op.rotation);
-                    ctx.scale(op.rx, op.ry);
-                    if (op.ccw) {
-                        ctx.arcNegative(0, 0, 1, op.startAngle, op.endAngle);
-                    } else {
-                        ctx.arc(0, 0, 1, op.startAngle, op.endAngle);
-                    }
-                    ctx.restore();
-                    break;
-                case 'rect':
-                    ctx.rectangle(op.x, op.y, op.w, op.h);
-                    break;
-                case 'roundRect':
-                    cairoRoundRect(ctx, op.x, op.y, op.w, op.h, op.radii);
-                    break;
-            }
-        }
-    }
-}
+// Moved to @gjsify/canvas2d-core — re-exported here for backward compatibility.
+export { Path2D } from '@gjsify/canvas2d-core';