@gjsify/canvas2d 0.1.1 → 0.1.3

package/lib/esm/canvas-drawing-area.js

@@ -11,6 +11,7 @@ const Canvas2DWidget = GObject.registerClass(
       this._canvas = null;
       this._ctx = null;
       this._readyCallbacks = [];
+      this._resizeCallbacks = [];
       this._tickCallbackId = null;
       this._frameCallback = null;
       // Time origin in microseconds (GLib monotonic clock).
@@ -44,10 +45,12 @@ const Canvas2DWidget = GObject.registerClass(
           }
           this._readyCallbacks = [];
         }
-      }
-      if (this._canvas.width !== width || this._canvas.height !== height) {
+      } else if (this._canvas.width !== width || this._canvas.height !== height) {
         this._canvas.width = width;
         this._canvas.height = height;
+        for (const cb of this._resizeCallbacks) {
+          cb(width, height);
+        }
       }
       if (this._ctx) {
         const surface = this._ctx._getSurface();
@@ -74,6 +77,14 @@ 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) {
+      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/lib/esm/canvas-gradient.js

@@ -1,23 +1,4 @@
-import Cairo from "cairo";
-import { parseColor } from "./color.js";
-class CanvasGradient {
-  constructor(type, x0, y0, x1, y1, r0, r1) {
-    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, color) {
-    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() {
-    return this._pattern;
-  }
-}
+import { CanvasGradient } from "@gjsify/canvas2d-core";
 export {
   CanvasGradient
 };

package/lib/esm/canvas-path.js

@@ -1,104 +1,4 @@
-import { quadraticToCubic, cairoRoundRect } from "./cairo-utils.js";
-class Path2D {
-  constructor(pathOrSvg) {
-    /** @internal Recorded operations */
-    this._ops = [];
-    if (pathOrSvg instanceof Path2D) {
-      this._ops = [...pathOrSvg._ops];
-    }
-  }
-  addPath(path) {
-    this._ops.push(...path._ops);
-  }
-  moveTo(x, y) {
-    this._ops.push({ type: "moveTo", x, y });
-  }
-  lineTo(x, y) {
-    this._ops.push({ type: "lineTo", x, y });
-  }
-  closePath() {
-    this._ops.push({ type: "closePath" });
-  }
-  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
-    this._ops.push({ type: "bezierCurveTo", cp1x, cp1y, cp2x, cp2y, x, y });
-  }
-  quadraticCurveTo(cpx, cpy, x, y) {
-    this._ops.push({ type: "quadraticCurveTo", cpx, cpy, x, y });
-  }
-  arc(x, y, radius, startAngle, endAngle, counterclockwise = false) {
-    this._ops.push({ type: "arc", x, y, radius, startAngle, endAngle, ccw: counterclockwise });
-  }
-  ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise = false) {
-    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, y, w, h) {
-    this._ops.push({ type: "rect", x, y, w, h });
-  }
-  roundRect(x, y, w, h, radii = 0) {
-    this._ops.push({ type: "roundRect", x, y, w, h, radii });
-  }
-  /**
-   * @internal Replay all recorded path operations onto a Cairo context.
-   */
-  _replayOnCairo(ctx) {
-    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;
-      }
-    }
-  }
-}
+import { Path2D } from "@gjsify/canvas2d-core";
 export {
   Path2D
 };

package/lib/esm/canvas-pattern.js

@@ -1,58 +1,4 @@
-import Cairo from "cairo";
-import Gdk from "gi://Gdk?version=4.0";
-class CanvasPattern {
-  constructor(surface, repetition) {
-    this._pattern = new Cairo.SurfacePattern(surface);
-    const pat = this._pattern;
-    switch (repetition) {
-      case "repeat":
-      case "":
-      case null:
-        pat.setExtend(Cairo.Extend.REPEAT);
-        break;
-      case "repeat-x":
-      case "repeat-y":
-        pat.setExtend(Cairo.Extend.REPEAT);
-        break;
-      case "no-repeat":
-        pat.setExtend(Cairo.Extend.NONE);
-        break;
-    }
-  }
-  /** Create a CanvasPattern from a supported image source. Returns null if unsupported. */
-  static create(image, repetition) {
-    if ("isPixbuf" in image && typeof image.isPixbuf === "function" && image.isPixbuf()) {
-      const pixbuf = image._pixbuf;
-      const w = pixbuf.get_width();
-      const h = pixbuf.get_height();
-      const surface = new Cairo.ImageSurface(Cairo.Format.ARGB32, w, h);
-      const ctx = new Cairo.Context(surface);
-      Gdk.cairo_set_source_pixbuf(ctx, pixbuf, 0, 0);
-      ctx.paint();
-      ctx.$dispose();
-      return new CanvasPattern(surface, repetition);
-    }
-    if (typeof image?.getContext === "function") {
-      const ctx2d = image.getContext("2d");
-      if (ctx2d && typeof ctx2d._getSurface === "function") {
-        const sourceSurface = ctx2d._getSurface();
-        const w = sourceSurface.getWidth();
-        const h = sourceSurface.getHeight();
-        const surface = new Cairo.ImageSurface(Cairo.Format.ARGB32, w, h);
-        const ctx = new Cairo.Context(surface);
-        ctx.setSourceSurface(sourceSurface, 0, 0);
-        ctx.paint();
-        ctx.$dispose();
-        return new CanvasPattern(surface, repetition);
-      }
-    }
-    return null;
-  }
-  /** @internal Get the underlying Cairo pattern for rendering. */
-  _getCairoPattern() {
-    return this._pattern;
-  }
-}
+import { CanvasPattern } from "@gjsify/canvas2d-core";
 export {
   CanvasPattern
 };