@gjsify/canvas2d-core 0.1.3

package/lib/esm/cairo-utils.js

@@ -0,0 +1,172 @@
+function quadraticToCubic(cx, cy, cpx, cpy, x, y) {
+  return {
+    cp1x: cx + 2 / 3 * (cpx - cx),
+    cp1y: cy + 2 / 3 * (cpy - cy),
+    cp2x: x + 2 / 3 * (cpx - x),
+    cp2y: y + 2 / 3 * (cpy - y)
+  };
+}
+function computeArcTo(x0, y0, x1, y1, x2, y2, radius) {
+  const dx0 = x0 - x1;
+  const dy0 = y0 - y1;
+  const dx1 = x2 - x1;
+  const dy1 = y2 - y1;
+  const len0 = Math.sqrt(dx0 * dx0 + dy0 * dy0);
+  const len1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+  if (len0 === 0 || len1 === 0) return null;
+  const ux0 = dx0 / len0;
+  const uy0 = dy0 / len0;
+  const ux1 = dx1 / len1;
+  const uy1 = dy1 / len1;
+  const cross = ux0 * uy1 - uy0 * ux1;
+  if (Math.abs(cross) < 1e-10) return null;
+  const dot = ux0 * ux1 + uy0 * uy1;
+  const halfAngle = Math.acos(Math.max(-1, Math.min(1, dot))) / 2;
+  const tanDist = radius / Math.tan(halfAngle);
+  const tx0 = x1 + ux0 * tanDist;
+  const ty0 = y1 + uy0 * tanDist;
+  const tx1 = x1 + ux1 * tanDist;
+  const ty1 = y1 + uy1 * tanDist;
+  const centerDist = radius / Math.sin(halfAngle);
+  const bisectX = (ux0 + ux1) / 2;
+  const bisectY = (uy0 + uy1) / 2;
+  const bisectLen = Math.sqrt(bisectX * bisectX + bisectY * bisectY);
+  const cx = x1 + bisectX / bisectLen * centerDist;
+  const cy = y1 + bisectY / bisectLen * centerDist;
+  const startAngle = Math.atan2(ty0 - cy, tx0 - cx);
+  const endAngle = Math.atan2(ty1 - cy, tx1 - cx);
+  const counterclockwise = cross > 0;
+  return { tx0, ty0, tx1, ty1, cx, cy, startAngle, endAngle, counterclockwise };
+}
+function cairoArcTo(ctx, x0, y0, x1, y1, x2, y2, radius) {
+  const result = computeArcTo(x0, y0, x1, y1, x2, y2, radius);
+  if (!result) {
+    ctx.lineTo(x1, y1);
+    return;
+  }
+  const { tx0, ty0, cx, cy, startAngle, endAngle, counterclockwise } = result;
+  ctx.lineTo(tx0, ty0);
+  if (counterclockwise) {
+    ctx.arcNegative(cx, cy, radius, startAngle, endAngle);
+  } else {
+    ctx.arc(cx, cy, radius, startAngle, endAngle);
+  }
+}
+function cairoEllipse(ctx, x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
+  ctx.save();
+  ctx.translate(x, y);
+  ctx.rotate(rotation);
+  ctx.scale(radiusX, radiusY);
+  if (counterclockwise) {
+    ctx.arcNegative(0, 0, 1, startAngle, endAngle);
+  } else {
+    ctx.arc(0, 0, 1, startAngle, endAngle);
+  }
+  ctx.restore();
+}
+function cairoRoundRect(ctx, x, y, w, h, radii) {
+  let tl, tr, br, bl;
+  if (typeof radii === "number") {
+    tl = tr = br = bl = radii;
+  } else if (radii.length === 1) {
+    tl = tr = br = bl = radii[0];
+  } else if (radii.length === 2) {
+    tl = br = radii[0];
+    tr = bl = radii[1];
+  } else if (radii.length === 3) {
+    tl = radii[0];
+    tr = bl = radii[1];
+    br = radii[2];
+  } else {
+    tl = radii[0];
+    tr = radii[1];
+    br = radii[2];
+    bl = radii[3];
+  }
+  const maxR = Math.min(w / 2, h / 2);
+  tl = Math.min(tl, maxR);
+  tr = Math.min(tr, maxR);
+  br = Math.min(br, maxR);
+  bl = Math.min(bl, maxR);
+  const PI_2 = Math.PI / 2;
+  ctx.newSubPath();
+  ctx.arc(x + tl, y + tl, tl, Math.PI, Math.PI + PI_2);
+  ctx.arc(x + w - tr, y + tr, tr, -PI_2, 0);
+  ctx.arc(x + w - br, y + h - br, br, 0, PI_2);
+  ctx.arc(x + bl, y + h - bl, bl, PI_2, Math.PI);
+  ctx.closePath();
+}
+const COMPOSITE_OP_MAP = {
+  "source-over": 2,
+  // OVER
+  "source-in": 5,
+  // IN
+  "source-out": 6,
+  // OUT
+  "source-atop": 7,
+  // ATOP
+  "destination-over": 8,
+  // DEST_OVER
+  "destination-in": 9,
+  // DEST_IN
+  "destination-out": 10,
+  // DEST_OUT
+  "destination-atop": 11,
+  // DEST_ATOP
+  "lighter": 12,
+  // ADD
+  "copy": 1,
+  // SOURCE
+  "xor": 13,
+  // XOR
+  "multiply": 14,
+  // MULTIPLY
+  "screen": 15,
+  // SCREEN
+  "overlay": 16,
+  // OVERLAY
+  "darken": 17,
+  // DARKEN
+  "lighten": 18,
+  // LIGHTEN
+  "color-dodge": 19,
+  // COLOR_DODGE
+  "color-burn": 20,
+  // COLOR_BURN
+  "hard-light": 21,
+  // HARD_LIGHT
+  "soft-light": 22,
+  // SOFT_LIGHT
+  "difference": 23,
+  // DIFFERENCE
+  "exclusion": 24,
+  // EXCLUSION
+  "hue": 25,
+  // HSL_HUE
+  "saturation": 26,
+  // HSL_SATURATION
+  "color": 27,
+  // HSL_COLOR
+  "luminosity": 28
+  // HSL_LUMINOSITY
+};
+const LINE_CAP_MAP = {
+  "butt": 0,
+  "round": 1,
+  "square": 2
+};
+const LINE_JOIN_MAP = {
+  "miter": 0,
+  "round": 1,
+  "bevel": 2
+};
+export {
+  COMPOSITE_OP_MAP,
+  LINE_CAP_MAP,
+  LINE_JOIN_MAP,
+  cairoArcTo,
+  cairoEllipse,
+  cairoRoundRect,
+  computeArcTo,
+  quadraticToCubic
+};

package/lib/esm/canvas-gradient.js

@@ -0,0 +1,23 @@
+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;
+  }
+}
+export {
+  CanvasGradient
+};

package/lib/esm/canvas-path.js

@@ -0,0 +1,104 @@
+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;
+      }
+    }
+  }
+}
+export {
+  Path2D
+};

package/lib/esm/canvas-pattern.js

@@ -0,0 +1,58 @@
+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;
+  }
+}
+export {
+  CanvasPattern
+};