@genome-spy/app 0.84.0 → 0.85.0

package/dist/canvas2d-DoAXEiF9.js

@@ -0,0 +1,309 @@
+import { Vt as e } from "./paramUtils-BYI4rwyL.js";
+import { a as t, o as n } from "./clipOptions-gqdb3fvW.js";
+import { n as r, t as i } from "./warning-DRGdb6BF.js";
+import { n as a, t as o } from "./viewRenderingContext-HtpqwS_x.js";
+import { C as s, E as c, S as l, _ as u, a as d, b as f, c as p, d as m, f as h, g, h as _, i as v, l as y, m as b, n as x, o as S, p as C, r as w, s as T, t as E, u as D, w as O, x as k } from "./nativeText-DMO8gLt7.js";
+//#region ../core/src/rendering/canvas2d/renderers/arrow.js
+function A(e, t) {
+	let n = e, r = t.context, i = n.encoders, a = _(n);
+	r.lineJoin = "miter";
+	let o, s;
+	return g(n, a, t, (e) => {
+		e.headShapeFallback && t.warn(`Canvas2D rendered unsupported arrow headShape "${a.headShape}" as a triangle.`), r.beginPath();
+		for (let t of e.boundaryLoops) {
+			let e = t[0];
+			r.moveTo(e.x, e.y);
+			for (let e = 1; e < t.length; e++) r.lineTo(t[e].x, t[e].y);
+			r.closePath();
+		}
+		let n = k(i.fill(e.datum)), c = u(i.fillOpacity, e.datum) * t.viewOpacity;
+		n != "none" && c > 0 && (o != n && (r.fillStyle = n, o = n), r.globalAlpha = c, r.fill());
+		let l = k(i.stroke(e.datum)), d = u(i.strokeOpacity, e.datum) * t.viewOpacity;
+		l != "none" && d > 0 && e.strokeWidth > 0 && (s != l && (r.strokeStyle = l, s = l), r.globalAlpha = d, r.lineWidth = e.strokeWidth, r.stroke());
+	});
+}
+//#endregion
+//#region ../core/src/rendering/canvas2d/renderers/link.js
+function j(e, t) {
+	let n = e, r = t.context, i = n.encoders, a = f(n, n.properties.arcFadingDistance), o = C(n);
+	o.shape == "arc" && a !== !1 && a[0] > 0 && a[1] > 0 && t.warn("Canvas2D ignored unsupported link arc fading."), r.lineCap = "butt";
+	let s;
+	return b(n, o, t, (e) => {
+		let n = k(i.color(e.datum)), a = u(i.opacity, e.datum) * t.viewOpacity;
+		if (n == "none" || a <= 0 || e.strokeWidth <= 0) return;
+		s != n && (r.strokeStyle = n, s = n), r.globalAlpha = a, r.lineWidth = e.strokeWidth;
+		let [o, c, l, d] = e.points;
+		r.beginPath(), r.moveTo(o[0], o[1]), r.bezierCurveTo(c[0], c[1], l[0], l[1], d[0], d[1]), r.stroke();
+	});
+}
+//#endregion
+//#region ../core/src/rendering/canvas2d/renderers/point.js
+function M(e, t) {
+	let n = e;
+	f(n, n.properties.fillGradientStrength) && t.warn("Canvas2D ignored unsupported point property fillGradientStrength."), n.properties.geometricZoomBound && t.warn("Canvas2D ignored unsupported point property geometricZoomBound.");
+	let r = m(n), i = t.context, a = n.encoders, o, s;
+	return h(n, r, t, (e) => {
+		let n = e.datum, r = e.lineShape, c = k(a.fill(n)), l = u(a.fillOpacity, n) * t.viewOpacity, d = k(a.stroke(n)), f = u(a.strokeOpacity, n) * t.viewOpacity;
+		r && (d == "none" || f <= 0) && (d = c, f = l), i.beginPath();
+		let p = e.angle != 0 && e.shape != "circle";
+		p && (i.save(), i.translate(e.x, e.y), i.rotate(e.angle * Math.PI / 180));
+		let m = p ? 0 : e.x, h = p ? 0 : e.y, g = !0;
+		if (e.shape == "circle") i.arc(m, h, e.geometryRadius, 0, Math.PI * 2);
+		else if (e.shape == "square") {
+			let t = e.geometryRadius * 2;
+			i.rect(m - e.geometryRadius, h - e.geometryRadius, t, t);
+		} else g = D(e.shape, m, h, e.geometryRadius, i);
+		p && i.restore(), g || (t.warn(`Canvas2D rendered unsupported point shape "${e.shape}" as a circle.`), i.arc(e.x, e.y, e.geometryRadius, 0, Math.PI * 2)), !r && c != "none" && l > 0 && (o != c && (i.fillStyle = c, o = c), N(i, l), i.fill()), d != "none" && f > 0 && e.strokeWidth > 0 && (r && i.lineCap != "butt" && (i.lineCap = "butt"), s != d && (i.strokeStyle = d, s = d), N(i, f), P(i, e.strokeWidth), i.stroke());
+	});
+}
+function N(e, t) {
+	e.globalAlpha != t && (e.globalAlpha = t);
+}
+function P(e, t) {
+	e.lineWidth != t && (e.lineWidth = t);
+}
+//#endregion
+//#region ../core/src/rendering/canvas2d/renderers/rect.js
+function F(e, t) {
+	let n = e, r = p(n);
+	r.hatch != "none" && t.warn("Canvas2D ignored unsupported rect hatch."), r.shadow.opacity > 0 && t.warn("Canvas2D ignored unsupported rect shadow.");
+	let i = t.context, a = n.encoders, o, s, c = [
+		0,
+		0,
+		0,
+		0
+	];
+	return y(n, r, t, (e) => {
+		let n = e.opacityFactor, r = e.fill != "none" && e.fillOpacity > 0, l = k(a.stroke(e.datum)), d = u(a.strokeOpacity, e.datum) * t.viewOpacity * n, f = l != "none" && d > 0 && e.strokeWidth > 0, p = e.radii.topLeft != 0 || e.radii.topRight != 0 || e.radii.bottomRight != 0 || e.radii.bottomLeft != 0;
+		p && (r || f) && (c[0] = e.radii.topLeft, c[1] = e.radii.topRight, c[2] = e.radii.bottomRight, c[3] = e.radii.bottomLeft, i.beginPath(), i.roundRect(e.x, e.y, e.width, e.height, c)), r && (o != e.fill && (i.fillStyle = e.fill, o = e.fill), I(i, e.fillOpacity * n), p ? i.fill() : i.fillRect(e.x, e.y, e.width, e.height)), f && (s != l && (i.strokeStyle = l, s = l), I(i, d), L(i, e.strokeWidth), p ? i.stroke() : i.strokeRect(e.x, e.y, e.width, e.height));
+	});
+}
+function I(e, t) {
+	e.globalAlpha != t && (e.globalAlpha = t);
+}
+function L(e, t) {
+	e.lineWidth != t && (e.lineWidth = t);
+}
+//#endregion
+//#region ../core/src/rendering/canvas2d/renderers/rule.js
+function R(e, t) {
+	let n = e, r = t.context, i = n.encoders;
+	r.lineCap = f(n, n.properties.strokeCap), r.setLineDash(f(n, n.properties.strokeDash) ?? []), r.lineDashOffset = f(n, n.properties.strokeDashOffset);
+	let a;
+	return T(n, S(n), t, (e) => {
+		let n = k(i.color(e.datum)), o = u(i.opacity, e.datum) * t.viewOpacity;
+		n == "none" || o <= 0 || e.strokeWidth <= 0 || (a != n && (r.strokeStyle = n, a = n), r.globalAlpha = o, r.lineWidth = e.strokeWidth, r.beginPath(), r.moveTo(e.x1, e.y1), r.lineTo(e.x2, e.y2), r.stroke());
+	});
+}
+//#endregion
+//#region ../core/src/rendering/canvas2d/renderers/text.js
+function z(e, t) {
+	let n = e, r = n.properties, i = v(n), a = t.context, o = n.encoders, s = E(r.font), c = `${r.fontStyle ?? "normal"} ${w(r.fontWeight ?? "normal")} `, l = i.baseline == "baseline" ? "alphabetic" : i.baseline;
+	[
+		r.viewportEdgeFadeWidthTop,
+		r.viewportEdgeFadeWidthRight,
+		r.viewportEdgeFadeWidthBottom,
+		r.viewportEdgeFadeWidthLeft
+	].some((e) => f(n, e) > 0) && t.warn("Canvas2D ignored unsupported text viewport edge fading.");
+	let p, m;
+	return i.logoLetters || (a.textAlign = i.align, a.textBaseline = l), d(n, i, t, (e) => {
+		e.multiCharacterLogo && t.warn("Canvas2D stretches multi-character logo text as a single glyph cell.");
+		let n = k(o.color(e.datum)), r = u(o.opacity, e.datum) * t.viewOpacity * e.fadeOpacity;
+		if (!(n == "none" || r <= 0)) if (p != n && (a.fillStyle = n, p = n), a.globalAlpha = r, m != e.size && (a.font = `${c}${e.size}px ${s}`, m = e.size), e.logoScale) {
+			a.save(), a.translate(e.x, e.y), a.rotate(e.angle * Math.PI / 180), a.translate(e.dx, e.dy);
+			let t = a.measureText(e.text).width;
+			a.scale(e.logoScale.width / t, e.logoScale.heightScale), a.textAlign = "center", a.textBaseline = "alphabetic", a.fillText(e.text, 0, x("middle", 1)), a.restore();
+		} else e.angle ? (a.save(), a.translate(e.x, e.y), a.rotate(e.angle * Math.PI / 180), a.fillText(e.text, e.dx, e.dy, e.width), a.restore()) : a.fillText(e.text, e.x + e.dx, e.y + e.dy, e.width);
+	});
+}
+//#endregion
+//#region ../core/src/rendering/canvas2d/renderers/index.js
+function B(e, t) {
+	return e.getType() == "arrow" ? A(e, t) : e.getType() == "link" ? j(e, t) : e.getType() == "rect" ? F(e, t) : e.getType() == "point" ? M(e, t) : e.getType() == "rule" || e.getType() == "tick" ? R(e, t) : e.getType() == "text" ? z(e, t) : (t.warn(`Canvas2D rendering is not implemented for mark type "${e.getType()}".`), 0);
+}
+//#endregion
+//#region ../core/src/rendering/canvas2d/canvas2DViewRenderingContext.js
+var V = class extends o {
+	#e = [];
+	#t = /* @__PURE__ */ new Set();
+	constructor(e, t) {
+		if (super(e), this.context = t.context, this.width = t.width, this.height = t.height, this.devicePixelRatio = t.devicePixelRatio, this.paint = t.paint, this.paint) {
+			let e = this.context;
+			e.resetTransform(), e.clearRect(0, 0, e.canvas.width, e.canvas.height), e.setTransform(this.devicePixelRatio, 0, 0, this.devicePixelRatio, 0, 0), e.globalAlpha = 1, e.globalCompositeOperation = "source-over", t.background != null && (e.fillStyle = t.background, e.fillRect(0, 0, this.width, this.height));
+		}
+	}
+	getDevicePixelRatio() {
+		return this.devicePixelRatio;
+	}
+	pushView(e, t) {
+		this.paint && !this.#t.has(e) && (e.onBeforeRender(), this.#t.add(e)), this.#e.push({
+			view: e,
+			coords: t
+		});
+	}
+	popView(e) {
+		if (this.#e.pop()?.view !== e) throw Error("Unbalanced Canvas2D view rendering context stack.");
+	}
+	renderMark(e, r) {
+		if (!this.paint || e.unitView.getEffectiveOpacity() <= 0) return;
+		let a = this.currentCoords, o = t(r), u = n(o, e.properties.clip, a), d = s(this.width, this.height, u);
+		if (!O(d)) return;
+		let f = l(a, o, e.properties.cullByVisibleRange), p = this.context;
+		if (p.save(), u) {
+			let e = u.rect.flatten(), t = u.clipX ? e.x : 0, n = u.clipY ? e.y : 0, r = u.clipX ? e.width : this.width, i = u.clipY ? e.height : this.height;
+			p.beginPath(), p.rect(t, n, r, i), p.clip();
+		}
+		try {
+			c(e, r, a, (t, n) => B(e, {
+				context: p,
+				coords: t,
+				data: n,
+				visibleBounds: d,
+				anchorCullBounds: f,
+				viewOpacity: e.unitView.getEffectiveOpacity(),
+				warn: (t) => i(`${t} View: ${e.unitView.getPathString()}`)
+			}), (t) => i(`Canvas2D could not resolve sample facet index ${t}. View: ${e.unitView.getPathString()}`));
+		} finally {
+			p.restore();
+		}
+	}
+	get currentCoords() {
+		let t = e(this.#e);
+		if (!t) throw Error("No current view in Canvas2D rendering context.");
+		return t.coords;
+	}
+};
+//#endregion
+//#region ../core/src/rendering/canvas2d/renderCanvas2D.js
+function H(e) {
+	let t = new V({ picking: !1 }, e);
+	e.viewRoot.render(t, a.create(0, 0, e.width, e.height), { firstFacet: !0 });
+}
+//#endregion
+//#region ../core/src/rendering/canvas2d/canvas2DRenderCoordinator.js
+var U = class {
+	constructor(e) {
+		this.viewRoot = e.viewRoot, this.context = e.context, this.surface = e.surface, this.getBackground = e.getBackground, this.broadcast = e.broadcast, this.onLayoutComputed = e.onLayoutComputed;
+	}
+	computeLayout() {
+		this.broadcast("layout"), this.surface.invalidateSize();
+		let e = 5;
+		for (;;) {
+			if (this.#e(!1), !this.surface.invalidateSize()) {
+				this.onLayoutComputed(), this.broadcast("layoutComputed");
+				return;
+			}
+			if (e--, e == 0) throw Error("Layout did not settle: canvas size kept changing.");
+		}
+	}
+	renderAll() {
+		this.#e(!0);
+	}
+	#e(e) {
+		let t = this.surface.getLogicalCanvasSize();
+		isNaN(t.width) || isNaN(t.height) || H({
+			viewRoot: this.viewRoot,
+			context: this.context,
+			width: t.width,
+			height: t.height,
+			devicePixelRatio: this.surface.getDevicePixelRatio(),
+			background: this.getBackground(),
+			paint: e
+		});
+	}
+}, W = class {
+	#e;
+	#t;
+	constructor(e) {
+		let t = document.createElement("canvas"), n = t.getContext("2d");
+		if (!n) throw Error("Unable to initialize a Canvas2D rendering context.");
+		this.canvas = t, this.context = n, e.container.appendChild(t);
+		try {
+			this.#e = new r(e.container, t, e.sizeSource, () => {
+				this.#n() && e.onCanvasResize();
+			}), this.#n();
+		} catch (e) {
+			throw this.#e?.finalize(), t.remove(), e;
+		}
+	}
+	invalidateSize() {
+		return this.#e.invalidate(), this.#n();
+	}
+	#n() {
+		let e = this.getLogicalCanvasSize(), t = this.#e.getPhysicalCanvasSize(e);
+		return this.#t?.logicalWidth == e.width && this.#t.logicalHeight == e.height && this.#t.physicalWidth == t.width && this.#t.physicalHeight == t.height ? !1 : (this.canvas.style.width = `${e.width}px`, this.canvas.style.height = `${e.height}px`, this.canvas.width = t.width, this.canvas.height = t.height, this.#t = {
+			logicalWidth: e.width,
+			logicalHeight: e.height,
+			physicalWidth: t.width,
+			physicalHeight: t.height
+		}, !0);
+	}
+	getLogicalCanvasSize() {
+		return this.#e.getLogicalCanvasSize();
+	}
+	getDevicePixelRatio() {
+		return this.#e.getDevicePixelRatio();
+	}
+	finalize() {
+		this.#e.finalize(), this.canvas.remove();
+	}
+};
+//#endregion
+//#region ../core/src/rendering/canvas2d/rasterExport.js
+async function G(e) {
+	let t = e.mimeType ?? "image/png";
+	if (t != "image/png") throw Error(`Unsupported raster export MIME type: ${t}`);
+	let n = q(e);
+	return new Promise((e, r) => {
+		n.toBlob((t) => {
+			t ? e(t) : r(/* @__PURE__ */ Error("Canvas2D could not encode the raster export."));
+		}, t);
+	});
+}
+function K(e) {
+	return q({
+		...e,
+		pixelRatio: e.devicePixelRatio ?? e.pixelRatio
+	}).toDataURL("image/png");
+}
+function q(e) {
+	let t = e.logicalWidth ?? e.liveSize.width, n = e.logicalHeight ?? e.liveSize.height, r = e.pixelRatio ?? e.liveDevicePixelRatio, i = document.createElement("canvas");
+	i.width = Math.floor(t * r), i.height = Math.floor(n * r);
+	let a = i.getContext("2d");
+	if (!a) throw Error("Unable to initialize a Canvas2D export context.");
+	return H({
+		viewRoot: e.viewRoot,
+		context: a,
+		width: t,
+		height: n,
+		devicePixelRatio: r,
+		background: e.clearColor ?? null,
+		paint: !0
+	}), i;
+}
+//#endregion
+//#region ../core/src/rendering/canvas2d/index.js
+function J(e) {
+	let t = new W(e);
+	return {
+		surface: t,
+		glHelper: void 0,
+		createRenderCoordinator: (e) => new U({
+			...e,
+			surface: t,
+			context: t.context
+		}),
+		exportCanvas: (e) => K({
+			...e,
+			liveSize: t.getLogicalCanvasSize(),
+			liveDevicePixelRatio: t.getDevicePixelRatio()
+		}),
+		exportRaster: (e) => G({
+			...e,
+			liveSize: t.getLogicalCanvasSize(),
+			liveDevicePixelRatio: t.getDevicePixelRatio()
+		})
+	};
+}
+//#endregion
+export { J as createCanvas2DRenderingBackend };

package/dist/canvas2d-f5jl4A5D.js

@@ -0,0 +1,310 @@
+import { r as e } from "./arrayUtils-LJpQOu-U.js";
+import { a as t, o as n } from "./clipOptions-gqdb3fvW.js";
+import { t as r } from "./canvasSizeHelper-7h_8rOcx.js";
+import { n as i, t as a } from "./viewRenderingContext-HtpqwS_x.js";
+import { t as o } from "./warning-CpIIpk8e.js";
+import { C as s, E as c, S as l, _ as u, a as d, b as f, c as p, d as m, f as h, g, h as _, i as v, l as y, m as b, n as x, o as S, p as C, r as w, s as T, t as E, u as D, w as O, x as k } from "./nativeText-m5AUINMq.js";
+//#region ../core/src/rendering/canvas2d/renderers/arrow.js
+function A(e, t) {
+	let n = e, r = t.context, i = n.encoders, a = _(n);
+	r.lineJoin = "miter";
+	let o, s;
+	return g(n, a, t, (e) => {
+		e.headShapeFallback && t.warn(`Canvas2D rendered unsupported arrow headShape "${a.headShape}" as a triangle.`), r.beginPath();
+		for (let t of e.boundaryLoops) {
+			let e = t[0];
+			r.moveTo(e.x, e.y);
+			for (let e = 1; e < t.length; e++) r.lineTo(t[e].x, t[e].y);
+			r.closePath();
+		}
+		let n = k(i.fill(e.datum)), c = u(i.fillOpacity, e.datum) * t.viewOpacity;
+		n != "none" && c > 0 && (o != n && (r.fillStyle = n, o = n), r.globalAlpha = c, r.fill());
+		let l = k(i.stroke(e.datum)), d = u(i.strokeOpacity, e.datum) * t.viewOpacity;
+		l != "none" && d > 0 && e.strokeWidth > 0 && (s != l && (r.strokeStyle = l, s = l), r.globalAlpha = d, r.lineWidth = e.strokeWidth, r.stroke());
+	});
+}
+//#endregion
+//#region ../core/src/rendering/canvas2d/renderers/link.js
+function j(e, t) {
+	let n = e, r = t.context, i = n.encoders, a = f(n, n.properties.arcFadingDistance), o = C(n);
+	o.shape == "arc" && a !== !1 && a[0] > 0 && a[1] > 0 && t.warn("Canvas2D ignored unsupported link arc fading."), r.lineCap = "butt";
+	let s;
+	return b(n, o, t, (e) => {
+		let n = k(i.color(e.datum)), a = u(i.opacity, e.datum) * t.viewOpacity;
+		if (n == "none" || a <= 0 || e.strokeWidth <= 0) return;
+		s != n && (r.strokeStyle = n, s = n), r.globalAlpha = a, r.lineWidth = e.strokeWidth;
+		let [o, c, l, d] = e.points;
+		r.beginPath(), r.moveTo(o[0], o[1]), r.bezierCurveTo(c[0], c[1], l[0], l[1], d[0], d[1]), r.stroke();
+	});
+}
+//#endregion
+//#region ../core/src/rendering/canvas2d/renderers/point.js
+function M(e, t) {
+	let n = e;
+	f(n, n.properties.fillGradientStrength) && t.warn("Canvas2D ignored unsupported point property fillGradientStrength."), n.properties.geometricZoomBound && t.warn("Canvas2D ignored unsupported point property geometricZoomBound.");
+	let r = m(n), i = t.context, a = n.encoders, o, s;
+	return h(n, r, t, (e) => {
+		let n = e.datum, r = e.lineShape, c = k(a.fill(n)), l = u(a.fillOpacity, n) * t.viewOpacity, d = k(a.stroke(n)), f = u(a.strokeOpacity, n) * t.viewOpacity;
+		r && (d == "none" || f <= 0) && (d = c, f = l), i.beginPath();
+		let p = e.angle != 0 && e.shape != "circle";
+		p && (i.save(), i.translate(e.x, e.y), i.rotate(e.angle * Math.PI / 180));
+		let m = p ? 0 : e.x, h = p ? 0 : e.y, g = !0;
+		if (e.shape == "circle") i.arc(m, h, e.geometryRadius, 0, Math.PI * 2);
+		else if (e.shape == "square") {
+			let t = e.geometryRadius * 2;
+			i.rect(m - e.geometryRadius, h - e.geometryRadius, t, t);
+		} else g = D(e.shape, m, h, e.geometryRadius, i);
+		p && i.restore(), g || (t.warn(`Canvas2D rendered unsupported point shape "${e.shape}" as a circle.`), i.arc(e.x, e.y, e.geometryRadius, 0, Math.PI * 2)), !r && c != "none" && l > 0 && (o != c && (i.fillStyle = c, o = c), N(i, l), i.fill()), d != "none" && f > 0 && e.strokeWidth > 0 && (r && i.lineCap != "butt" && (i.lineCap = "butt"), s != d && (i.strokeStyle = d, s = d), N(i, f), P(i, e.strokeWidth), i.stroke());
+	});
+}
+function N(e, t) {
+	e.globalAlpha != t && (e.globalAlpha = t);
+}
+function P(e, t) {
+	e.lineWidth != t && (e.lineWidth = t);
+}
+//#endregion
+//#region ../core/src/rendering/canvas2d/renderers/rect.js
+function F(e, t) {
+	let n = e, r = p(n);
+	r.hatch != "none" && t.warn("Canvas2D ignored unsupported rect hatch."), r.shadow.opacity > 0 && t.warn("Canvas2D ignored unsupported rect shadow.");
+	let i = t.context, a = n.encoders, o, s, c = [
+		0,
+		0,
+		0,
+		0
+	];
+	return y(n, r, t, (e) => {
+		let n = e.opacityFactor, r = e.fill != "none" && e.fillOpacity > 0, l = k(a.stroke(e.datum)), d = u(a.strokeOpacity, e.datum) * t.viewOpacity * n, f = l != "none" && d > 0 && e.strokeWidth > 0, p = e.radii.topLeft != 0 || e.radii.topRight != 0 || e.radii.bottomRight != 0 || e.radii.bottomLeft != 0;
+		p && (r || f) && (c[0] = e.radii.topLeft, c[1] = e.radii.topRight, c[2] = e.radii.bottomRight, c[3] = e.radii.bottomLeft, i.beginPath(), i.roundRect(e.x, e.y, e.width, e.height, c)), r && (o != e.fill && (i.fillStyle = e.fill, o = e.fill), I(i, e.fillOpacity * n), p ? i.fill() : i.fillRect(e.x, e.y, e.width, e.height)), f && (s != l && (i.strokeStyle = l, s = l), I(i, d), L(i, e.strokeWidth), p ? i.stroke() : i.strokeRect(e.x, e.y, e.width, e.height));
+	});
+}
+function I(e, t) {
+	e.globalAlpha != t && (e.globalAlpha = t);
+}
+function L(e, t) {
+	e.lineWidth != t && (e.lineWidth = t);
+}
+//#endregion
+//#region ../core/src/rendering/canvas2d/renderers/rule.js
+function R(e, t) {
+	let n = e, r = t.context, i = n.encoders;
+	r.lineCap = f(n, n.properties.strokeCap), r.setLineDash(f(n, n.properties.strokeDash) ?? []), r.lineDashOffset = f(n, n.properties.strokeDashOffset);
+	let a;
+	return T(n, S(n), t, (e) => {
+		let n = k(i.color(e.datum)), o = u(i.opacity, e.datum) * t.viewOpacity;
+		n == "none" || o <= 0 || e.strokeWidth <= 0 || (a != n && (r.strokeStyle = n, a = n), r.globalAlpha = o, r.lineWidth = e.strokeWidth, r.beginPath(), r.moveTo(e.x1, e.y1), r.lineTo(e.x2, e.y2), r.stroke());
+	});
+}
+//#endregion
+//#region ../core/src/rendering/canvas2d/renderers/text.js
+function z(e, t) {
+	let n = e, r = n.properties, i = v(n), a = t.context, o = n.encoders, s = E(r.font), c = `${r.fontStyle ?? "normal"} ${w(r.fontWeight ?? "normal")} `, l = i.baseline == "baseline" ? "alphabetic" : i.baseline;
+	[
+		r.viewportEdgeFadeWidthTop,
+		r.viewportEdgeFadeWidthRight,
+		r.viewportEdgeFadeWidthBottom,
+		r.viewportEdgeFadeWidthLeft
+	].some((e) => f(n, e) > 0) && t.warn("Canvas2D ignored unsupported text viewport edge fading.");
+	let p, m;
+	return i.logoLetters || (a.textAlign = i.align, a.textBaseline = l), d(n, i, t, (e) => {
+		e.multiCharacterLogo && t.warn("Canvas2D stretches multi-character logo text as a single glyph cell.");
+		let n = k(o.color(e.datum)), r = u(o.opacity, e.datum) * t.viewOpacity * e.fadeOpacity;
+		if (!(n == "none" || r <= 0)) if (p != n && (a.fillStyle = n, p = n), a.globalAlpha = r, m != e.size && (a.font = `${c}${e.size}px ${s}`, m = e.size), e.logoScale) {
+			a.save(), a.translate(e.x, e.y), a.rotate(e.angle * Math.PI / 180), a.translate(e.dx, e.dy);
+			let t = a.measureText(e.text).width;
+			a.scale(e.logoScale.width / t, e.logoScale.heightScale), a.textAlign = "center", a.textBaseline = "alphabetic", a.fillText(e.text, 0, x("middle", 1)), a.restore();
+		} else e.angle ? (a.save(), a.translate(e.x, e.y), a.rotate(e.angle * Math.PI / 180), a.fillText(e.text, e.dx, e.dy, e.width), a.restore()) : a.fillText(e.text, e.x + e.dx, e.y + e.dy, e.width);
+	});
+}
+//#endregion
+//#region ../core/src/rendering/canvas2d/renderers/index.js
+function B(e, t) {
+	return e.getType() == "arrow" ? A(e, t) : e.getType() == "link" ? j(e, t) : e.getType() == "rect" ? F(e, t) : e.getType() == "point" ? M(e, t) : e.getType() == "rule" || e.getType() == "tick" ? R(e, t) : e.getType() == "text" ? z(e, t) : (t.warn(`Canvas2D rendering is not implemented for mark type "${e.getType()}".`), 0);
+}
+//#endregion
+//#region ../core/src/rendering/canvas2d/canvas2DViewRenderingContext.js
+var V = class extends a {
+	#e = [];
+	#t = /* @__PURE__ */ new Set();
+	constructor(e, t) {
+		if (super(e), this.context = t.context, this.width = t.width, this.height = t.height, this.devicePixelRatio = t.devicePixelRatio, this.paint = t.paint, this.paint) {
+			let e = this.context;
+			e.resetTransform(), e.clearRect(0, 0, e.canvas.width, e.canvas.height), e.setTransform(this.devicePixelRatio, 0, 0, this.devicePixelRatio, 0, 0), e.globalAlpha = 1, e.globalCompositeOperation = "source-over", t.background != null && (e.fillStyle = t.background, e.fillRect(0, 0, this.width, this.height));
+		}
+	}
+	getDevicePixelRatio() {
+		return this.devicePixelRatio;
+	}
+	pushView(e, t) {
+		this.paint && !this.#t.has(e) && (e.onBeforeRender(), this.#t.add(e)), this.#e.push({
+			view: e,
+			coords: t
+		});
+	}
+	popView(e) {
+		if (this.#e.pop()?.view !== e) throw Error("Unbalanced Canvas2D view rendering context stack.");
+	}
+	renderMark(e, r) {
+		if (!this.paint || e.unitView.getEffectiveOpacity() <= 0) return;
+		let i = this.currentCoords, a = t(r), u = n(a, e.properties.clip, i), d = s(this.width, this.height, u);
+		if (!O(d)) return;
+		let f = l(i, a, e.properties.cullByVisibleRange), p = this.context;
+		if (p.save(), u) {
+			let e = u.rect.flatten(), t = u.clipX ? e.x : 0, n = u.clipY ? e.y : 0, r = u.clipX ? e.width : this.width, i = u.clipY ? e.height : this.height;
+			p.beginPath(), p.rect(t, n, r, i), p.clip();
+		}
+		try {
+			c(e, r, i, (t, n) => B(e, {
+				context: p,
+				coords: t,
+				data: n,
+				visibleBounds: d,
+				anchorCullBounds: f,
+				viewOpacity: e.unitView.getEffectiveOpacity(),
+				warn: (t) => o(`${t} View: ${e.unitView.getPathString()}`)
+			}), (t) => o(`Canvas2D could not resolve sample facet index ${t}. View: ${e.unitView.getPathString()}`));
+		} finally {
+			p.restore();
+		}
+	}
+	get currentCoords() {
+		let t = e(this.#e);
+		if (!t) throw Error("No current view in Canvas2D rendering context.");
+		return t.coords;
+	}
+};
+//#endregion
+//#region ../core/src/rendering/canvas2d/renderCanvas2D.js
+function H(e) {
+	let t = new V({ picking: !1 }, e);
+	e.viewRoot.render(t, i.create(0, 0, e.width, e.height), { firstFacet: !0 });
+}
+//#endregion
+//#region ../core/src/rendering/canvas2d/canvas2DRenderCoordinator.js
+var U = class {
+	constructor(e) {
+		this.viewRoot = e.viewRoot, this.context = e.context, this.surface = e.surface, this.getBackground = e.getBackground, this.broadcast = e.broadcast, this.onLayoutComputed = e.onLayoutComputed;
+	}
+	computeLayout() {
+		this.broadcast("layout"), this.surface.invalidateSize();
+		let e = 5;
+		for (;;) {
+			if (this.#e(!1), !this.surface.invalidateSize()) {
+				this.onLayoutComputed(), this.broadcast("layoutComputed");
+				return;
+			}
+			if (e--, e == 0) throw Error("Layout did not settle: canvas size kept changing.");
+		}
+	}
+	renderAll() {
+		this.#e(!0);
+	}
+	#e(e) {
+		let t = this.surface.getLogicalCanvasSize();
+		isNaN(t.width) || isNaN(t.height) || H({
+			viewRoot: this.viewRoot,
+			context: this.context,
+			width: t.width,
+			height: t.height,
+			devicePixelRatio: this.surface.getDevicePixelRatio(),
+			background: this.getBackground(),
+			paint: e
+		});
+	}
+}, W = class {
+	#e;
+	#t;
+	constructor(e) {
+		let t = document.createElement("canvas"), n = t.getContext("2d");
+		if (!n) throw Error("Unable to initialize a Canvas2D rendering context.");
+		this.canvas = t, this.context = n, e.container.appendChild(t);
+		try {
+			this.#e = new r(e.container, t, e.sizeSource, () => {
+				this.#n() && e.onCanvasResize();
+			}), this.#n();
+		} catch (e) {
+			throw this.#e?.finalize(), t.remove(), e;
+		}
+	}
+	invalidateSize() {
+		return this.#e.invalidate(), this.#n();
+	}
+	#n() {
+		let e = this.getLogicalCanvasSize(), t = this.#e.getPhysicalCanvasSize(e);
+		return this.#t?.logicalWidth == e.width && this.#t.logicalHeight == e.height && this.#t.physicalWidth == t.width && this.#t.physicalHeight == t.height ? !1 : (this.canvas.style.width = `${e.width}px`, this.canvas.style.height = `${e.height}px`, this.canvas.width = t.width, this.canvas.height = t.height, this.#t = {
+			logicalWidth: e.width,
+			logicalHeight: e.height,
+			physicalWidth: t.width,
+			physicalHeight: t.height
+		}, !0);
+	}
+	getLogicalCanvasSize() {
+		return this.#e.getLogicalCanvasSize();
+	}
+	getDevicePixelRatio() {
+		return this.#e.getDevicePixelRatio();
+	}
+	finalize() {
+		this.#e.finalize(), this.canvas.remove();
+	}
+};
+//#endregion
+//#region ../core/src/rendering/canvas2d/rasterExport.js
+async function G(e) {
+	let t = e.mimeType ?? "image/png";
+	if (t != "image/png") throw Error(`Unsupported raster export MIME type: ${t}`);
+	let n = q(e);
+	return new Promise((e, r) => {
+		n.toBlob((t) => {
+			t ? e(t) : r(/* @__PURE__ */ Error("Canvas2D could not encode the raster export."));
+		}, t);
+	});
+}
+function K(e) {
+	return q({
+		...e,
+		pixelRatio: e.devicePixelRatio ?? e.pixelRatio
+	}).toDataURL("image/png");
+}
+function q(e) {
+	let t = e.logicalWidth ?? e.liveSize.width, n = e.logicalHeight ?? e.liveSize.height, r = e.pixelRatio ?? e.liveDevicePixelRatio, i = document.createElement("canvas");
+	i.width = Math.floor(t * r), i.height = Math.floor(n * r);
+	let a = i.getContext("2d");
+	if (!a) throw Error("Unable to initialize a Canvas2D export context.");
+	return H({
+		viewRoot: e.viewRoot,
+		context: a,
+		width: t,
+		height: n,
+		devicePixelRatio: r,
+		background: e.clearColor ?? null,
+		paint: !0
+	}), i;
+}
+//#endregion
+//#region ../core/src/rendering/canvas2d/index.js
+function J(e) {
+	let t = new W(e);
+	return {
+		surface: t,
+		glHelper: void 0,
+		createRenderCoordinator: (e) => new U({
+			...e,
+			surface: t,
+			context: t.context
+		}),
+		exportCanvas: (e) => K({
+			...e,
+			liveSize: t.getLogicalCanvasSize(),
+			liveDevicePixelRatio: t.getDevicePixelRatio()
+		}),
+		exportRaster: (e) => G({
+			...e,
+			liveSize: t.getLogicalCanvasSize(),
+			liveDevicePixelRatio: t.getDevicePixelRatio()
+		})
+	};
+}
+//#endregion
+export { J as createCanvas2DRenderingBackend };

package/dist/canvasSizeHelper-7h_8rOcx.js

@@ -0,0 +1,56 @@
+//#region ../core/src/rendering/canvasSizeHelper.js
+var e = class {
+	constructor(e, t, n, r) {
+		this._container = e, this._canvas = t, this._sizeSource = n, this._onPhysicalSizeChange = r ?? (() => {}), this._logicalCanvasSize = void 0, this._devicePixelContentBoxSize = void 0, this._devicePixelContentBoxObserver = void 0, this._observeDevicePixelContentBox();
+	}
+	invalidate() {
+		this._logicalCanvasSize = void 0, this._devicePixelContentBoxSize = void 0;
+	}
+	finalize() {
+		this._devicePixelContentBoxObserver && this._devicePixelContentBoxObserver.disconnect();
+	}
+	getPhysicalCanvasSize(e) {
+		if (this._devicePixelContentBoxSize) return this._devicePixelContentBoxSize;
+		let t = window.devicePixelRatio ?? 1;
+		return e ||= this.getLogicalCanvasSize(), {
+			width: Math.round(e.width * t),
+			height: Math.round(e.height * t)
+		};
+	}
+	getDevicePixelRatio(e) {
+		e ||= this.getLogicalCanvasSize();
+		let t = this.getPhysicalCanvasSize(e), n = e.width > 0 ? t.width / e.width : void 0, r = e.height > 0 ? t.height / e.height : void 0;
+		return n !== void 0 && r !== void 0 ? (n + r) / 2 : n === void 0 ? r === void 0 ? window.devicePixelRatio ?? 1 : r : n;
+	}
+	getLogicalCanvasSize() {
+		if (this._logicalCanvasSize) return this._logicalCanvasSize;
+		let e = this._sizeSource(), t = window.getComputedStyle(this._container, null), n = this._container.getBoundingClientRect(), r = parseFloat(t.paddingLeft), i = parseFloat(t.paddingRight), a = parseFloat(t.paddingTop), o = parseFloat(t.paddingBottom), s = parseFloat(t.borderLeftWidth), c = parseFloat(t.borderRightWidth), l = parseFloat(t.borderTopWidth), u = parseFloat(t.borderBottomWidth), d = e.width ?? n.width - r - i - s - c, f = e.height ?? n.height - a - o - l - u;
+		return this._logicalCanvasSize = {
+			width: d,
+			height: f
+		}, this._logicalCanvasSize;
+	}
+	_observeDevicePixelContentBox() {
+		if (typeof ResizeObserver != "function") return;
+		let e = new ResizeObserver((e) => {
+			let t = e.find((e) => e.target == this._canvas);
+			if (!t) return;
+			let n = t.devicePixelContentBoxSize;
+			if (!n) return;
+			let r = Array.isArray(n) ? n[0] : n;
+			if (!r) return;
+			let i = {
+				width: r.inlineSize,
+				height: r.blockSize
+			};
+			this._devicePixelContentBoxSize && this._devicePixelContentBoxSize.width == i.width && this._devicePixelContentBoxSize.height == i.height || (this._devicePixelContentBoxSize = i, this._onPhysicalSizeChange());
+		});
+		try {
+			e.observe(this._canvas, { box: "device-pixel-content-box" }), this._devicePixelContentBoxObserver = e;
+		} catch {
+			e.disconnect();
+		}
+	}
+};
+//#endregion
+export { e as t };