@gjsify/canvas2d-core 0.3.16 → 0.3.17

package/lib/esm/cairo-utils.js

@@ -1,191 +1 @@
-//#region src/cairo-utils.ts
-/**
-* Convert quadratic Bezier control point to cubic Bezier control points.
-* Canvas 2D has quadraticCurveTo but Cairo only has cubic curveTo.
-*
-* Given current point (cx, cy), quadratic control point (cpx, cpy), and end (x, y):
-*   cp1 = current + 2/3 * (cp - current)
-*   cp2 = end + 2/3 * (cp - end)
-*/
-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)
-	};
-}
-/**
-* Compute arcTo parameters.
-* Canvas arcTo(x1,y1,x2,y2,radius) draws a line from current point to the tangent point,
-* then an arc of the given radius tangent to both lines (current→p1 and p1→p2).
-*
-* Returns the two tangent points and arc center, or null if degenerate (collinear points).
-*/
-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
-	};
-}
-/**
-* Apply an arcTo operation to a Cairo context.
-*/
-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);
-	}
-}
-/**
-* Draw an ellipse on a Cairo context.
-* Canvas ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise)
-* is implemented via save/translate/rotate/scale/arc/restore.
-*/
-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();
-}
-/**
-* Draw a rounded rectangle path on a Cairo context.
-* Implements the Canvas roundRect(x, y, w, h, radii) method.
-*/
-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();
-}
-/**
-* Map Canvas globalCompositeOperation to Cairo.Operator values.
-*
-* Cairo.Operator enum (verified runtime in GJS 1.86):
-*   CLEAR=0, SOURCE=1, OVER=2, IN=3, OUT=4, ATOP=5,
-*   DEST=6, DEST_OVER=7, DEST_IN=8, DEST_OUT=9, DEST_ATOP=10,
-*   XOR=11, ADD=12, SATURATE=13,
-*   MULTIPLY=14, SCREEN=15, OVERLAY=16, DARKEN=17, LIGHTEN=18,
-*   COLOR_DODGE=19, COLOR_BURN=20, HARD_LIGHT=21, SOFT_LIGHT=22,
-*   DIFFERENCE=23, EXCLUSION=24, HSL_HUE=25, HSL_SATURATION=26,
-*   HSL_COLOR=27, HSL_LUMINOSITY=28
-*/
-const COMPOSITE_OP_MAP = {
-	"source-over": 2,
-	"source-in": 3,
-	"source-out": 4,
-	"source-atop": 5,
-	"destination-over": 7,
-	"destination-in": 8,
-	"destination-out": 9,
-	"destination-atop": 10,
-	"lighter": 12,
-	"copy": 1,
-	"xor": 11,
-	"multiply": 14,
-	"screen": 15,
-	"overlay": 16,
-	"darken": 17,
-	"lighten": 18,
-	"color-dodge": 19,
-	"color-burn": 20,
-	"hard-light": 21,
-	"soft-light": 22,
-	"difference": 23,
-	"exclusion": 24,
-	"hue": 25,
-	"saturation": 26,
-	"color": 27,
-	"luminosity": 28
-};
-/** Map Canvas lineCap to Cairo.LineCap values */
-const LINE_CAP_MAP = {
-	"butt": 0,
-	"round": 1,
-	"square": 2
-};
-/** Map Canvas lineJoin to Cairo.LineJoin values */
-const LINE_JOIN_MAP = {
-	"miter": 0,
-	"round": 1,
-	"bevel": 2
-};
-
-//#endregion
-export { COMPOSITE_OP_MAP, LINE_CAP_MAP, LINE_JOIN_MAP, cairoArcTo, cairoEllipse, cairoRoundRect, computeArcTo, quadraticToCubic };
+function e(e,t,n,r,i,a){return{cp1x:e+2/3*(n-e),cp1y:t+2/3*(r-t),cp2x:i+2/3*(n-i),cp2y:a+2/3*(r-a)}}function t(e,t,n,r,i,a,o){let s=e-n,c=t-r,l=i-n,u=a-r,d=Math.sqrt(s*s+c*c),f=Math.sqrt(l*l+u*u);if(d===0||f===0)return null;let p=s/d,m=c/d,h=l/f,g=u/f,_=p*g-m*h;if(Math.abs(_)<1e-10)return null;let v=p*h+m*g,y=Math.acos(Math.max(-1,Math.min(1,v)))/2,b=o/Math.tan(y),x=n+p*b,S=r+m*b,C=n+h*b,w=r+g*b,T=o/Math.sin(y),E=(p+h)/2,D=(m+g)/2,O=Math.sqrt(E*E+D*D),k=n+E/O*T,A=r+D/O*T;return{tx0:x,ty0:S,tx1:C,ty1:w,cx:k,cy:A,startAngle:Math.atan2(S-A,x-k),endAngle:Math.atan2(w-A,C-k),counterclockwise:_>0}}function n(e,n,r,i,a,o,s,c){let l=t(n,r,i,a,o,s,c);if(!l){e.lineTo(i,a);return}let{tx0:u,ty0:d,cx:f,cy:p,startAngle:m,endAngle:h,counterclockwise:g}=l;e.lineTo(u,d),g?e.arcNegative(f,p,c,m,h):e.arc(f,p,c,m,h)}function r(e,t,n,r,i,a,o,s,c){e.save(),e.translate(t,n),e.rotate(a),e.scale(r,i),c?e.arcNegative(0,0,1,o,s):e.arc(0,0,1,o,s),e.restore()}function i(e,t,n,r,i,a){let o,s,c,l;typeof a==`number`?o=s=c=l=a:a.length===1?o=s=c=l=a[0]:a.length===2?(o=c=a[0],s=l=a[1]):a.length===3?(o=a[0],s=l=a[1],c=a[2]):(o=a[0],s=a[1],c=a[2],l=a[3]);let u=Math.min(r/2,i/2);o=Math.min(o,u),s=Math.min(s,u),c=Math.min(c,u),l=Math.min(l,u);let d=Math.PI/2;e.newSubPath(),e.arc(t+o,n+o,o,Math.PI,Math.PI+d),e.arc(t+r-s,n+s,s,-d,0),e.arc(t+r-c,n+i-c,c,0,d),e.arc(t+l,n+i-l,l,d,Math.PI),e.closePath()}const a={"source-over":2,"source-in":3,"source-out":4,"source-atop":5,"destination-over":7,"destination-in":8,"destination-out":9,"destination-atop":10,lighter:12,copy:1,xor:11,multiply:14,screen:15,overlay:16,darken:17,lighten:18,"color-dodge":19,"color-burn":20,"hard-light":21,"soft-light":22,difference:23,exclusion:24,hue:25,saturation:26,color:27,luminosity:28},o={butt:0,round:1,square:2},s={miter:0,round:1,bevel:2};export{a as COMPOSITE_OP_MAP,o as LINE_CAP_MAP,s as LINE_JOIN_MAP,n as cairoArcTo,r as cairoEllipse,i as cairoRoundRect,t as computeArcTo,e as quadraticToCubic};

package/lib/esm/canvas-gradient.js

@@ -1,28 +1 @@
-import { parseColor } from "./color.js";
-import Cairo from "cairo";
-
-//#region src/canvas-gradient.ts
-/**
-* CanvasGradient wrapping a Cairo LinearGradient or RadialGradient.
-*/
-var CanvasGradient = class {
-	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;
-	}
-};
-
-//#endregion
-export { CanvasGradient };
+import{parseColor as e}from"./color.js";import t from"cairo";var n=class{constructor(e,n,r,i,a,o,s){e===`radial`?this._pattern=new t.RadialGradient(n,r,o,i,a,s):this._pattern=new t.LinearGradient(n,r,i,a)}addColorStop(t,n){let r=e(n);r&&this._pattern.addColorStopRGBA(t,r.r,r.g,r.b,r.a)}_getCairoPattern(){return this._pattern}};export{n as CanvasGradient};

package/lib/esm/canvas-path.js

@@ -1,161 +1 @@
-import { cairoRoundRect, quadraticToCubic } from "./cairo-utils.js";
-
-//#region src/canvas-path.ts
-/**
-* Path2D records path operations for later replay on a CanvasRenderingContext2D.
-*/
-var Path2D = class Path2D {
-	constructor(pathOrSvg) {
-		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;
-			}
-		}
-	}
-};
-
-//#endregion
-export { Path2D };
+import{cairoRoundRect as e,quadraticToCubic as t}from"./cairo-utils.js";var n=class n{constructor(e){this._ops=[],e instanceof n&&(this._ops=[...e._ops])}addPath(e){this._ops.push(...e._ops)}moveTo(e,t){this._ops.push({type:`moveTo`,x:e,y:t})}lineTo(e,t){this._ops.push({type:`lineTo`,x:e,y:t})}closePath(){this._ops.push({type:`closePath`})}bezierCurveTo(e,t,n,r,i,a){this._ops.push({type:`bezierCurveTo`,cp1x:e,cp1y:t,cp2x:n,cp2y:r,x:i,y:a})}quadraticCurveTo(e,t,n,r){this._ops.push({type:`quadraticCurveTo`,cpx:e,cpy:t,x:n,y:r})}arc(e,t,n,r,i,a=!1){this._ops.push({type:`arc`,x:e,y:t,radius:n,startAngle:r,endAngle:i,ccw:a})}ellipse(e,t,n,r,i,a,o,s=!1){if(n<0||r<0)throw RangeError(`The radii provided are negative`);this._ops.push({type:`ellipse`,x:e,y:t,rx:n,ry:r,rotation:i,startAngle:a,endAngle:o,ccw:s})}rect(e,t,n,r){this._ops.push({type:`rect`,x:e,y:t,w:n,h:r})}roundRect(e,t,n,r,i=0){this._ops.push({type:`roundRect`,x:e,y:t,w:n,h:r,radii:i})}_replayOnCairo(n){let r=0,i=0;for(let a of this._ops)switch(a.type){case`moveTo`:n.moveTo(a.x,a.y),r=a.x,i=a.y;break;case`lineTo`:n.lineTo(a.x,a.y),r=a.x,i=a.y;break;case`closePath`:n.closePath();break;case`bezierCurveTo`:n.curveTo(a.cp1x,a.cp1y,a.cp2x,a.cp2y,a.x,a.y),r=a.x,i=a.y;break;case`quadraticCurveTo`:{let{cp1x:e,cp1y:o,cp2x:s,cp2y:c}=t(r,i,a.cpx,a.cpy,a.x,a.y);n.curveTo(e,o,s,c,a.x,a.y),r=a.x,i=a.y;break}case`arc`:a.ccw?n.arcNegative(a.x,a.y,a.radius,a.startAngle,a.endAngle):n.arc(a.x,a.y,a.radius,a.startAngle,a.endAngle);break;case`ellipse`:n.save(),n.translate(a.x,a.y),n.rotate(a.rotation),n.scale(a.rx,a.ry),a.ccw?n.arcNegative(0,0,1,a.startAngle,a.endAngle):n.arc(0,0,1,a.startAngle,a.endAngle),n.restore();break;case`rect`:n.rectangle(a.x,a.y,a.w,a.h);break;case`roundRect`:e(n,a.x,a.y,a.w,a.h,a.radii);break}}};export{n as Path2D};

package/lib/esm/canvas-pattern.js

@@ -1,63 +1 @@
-import Cairo from "cairo";
-import Gdk from "gi://Gdk?version=4.0";
-
-//#region src/canvas-pattern.ts
-/**
-* CanvasPattern wrapping a Cairo SurfacePattern.
-*/
-var CanvasPattern = 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;
-	}
-};
-
-//#endregion
-export { CanvasPattern };
+import e from"cairo";import t from"gi://Gdk?version=4.0";var n=class n{constructor(t,n){this._pattern=new e.SurfacePattern(t);let r=this._pattern;switch(n){case`repeat`:case``:case null:r.setExtend(e.Extend.REPEAT);break;case`repeat-x`:case`repeat-y`:r.setExtend(e.Extend.REPEAT);break;case`no-repeat`:r.setExtend(e.Extend.NONE);break}}static create(r,i){if(`isPixbuf`in r&&typeof r.isPixbuf==`function`&&r.isPixbuf()){let a=r._pixbuf,o=a.get_width(),s=a.get_height(),c=new e.ImageSurface(e.Format.ARGB32,o,s),l=new e.Context(c);return t.cairo_set_source_pixbuf(l,a,0,0),l.paint(),l.$dispose(),new n(c,i)}if(typeof r?.getContext==`function`){let t=r.getContext(`2d`);if(t&&typeof t._getSurface==`function`){let r=t._getSurface(),a=r.getWidth(),o=r.getHeight(),s=new e.ImageSurface(e.Format.ARGB32,a,o),c=new e.Context(s);return c.setSourceSurface(r,0,0),c.paint(),c.$dispose(),new n(s,i)}}return null}_getCairoPattern(){return this._pattern}};export{n as CanvasPattern};