@liquidcars/atlas 0.1.44 → 0.1.45

package/README.md

@@ -159,14 +159,23 @@ La misma funcionalidad puede controlarse explícitamente:
 
 ```js
 const atlas = document.querySelector("liquidcars-atlas");
-const frame = atlas.captureFrame(); // canvas 2D con el framebuffer actual
+const transparent = atlas.captureFrame(); // canvas 2D con alfa
+const themed = atlas.captureFrame({ background: "theme" }); // añade el fondo visual del componente
+const white = atlas.captureFrame({ background: "#ffffff" }); // fondo sólido opcional
+const presentation = atlas.captureFrame({ background: "transparent", scale: 2 }); // salida HD
 atlas.prepareForPrint();
 atlas.restoreAfterPrint();
 ```
 
 `captureFrame()` usa `WebGLRenderingContext.readPixels()` para funcionar también
 en navegadores que no permiten copiar directamente un canvas WebGL sin
-`preserveDrawingBuffer`. Para evitar que un bloque se divida entre páginas, el
+`preserveDrawingBuffer`. El framebuffer permanece transparente: el fondo de tema
+se compone en el canvas 2D únicamente cuando se solicita y no recibe luces ni
+sombras de la escena. `scale` vuelve a renderizar temporalmente entre 1× y 4×,
+respetando el límite de framebuffer del navegador, y restaura inmediatamente el
+canvas interactivo. Los colores WebGL semitransparentes se convierten de alfa
+premultiplicado a alfa directo para conservar el tono de los contenedores
+abiertos cuando el PNG se coloca sobre un fondo claro. Para evitar que un bloque se divida entre páginas, el
 componente aplica `break-inside: avoid` durante la impresión.
 
 ## Contrato de datos

package/dist/liquidcars-atlas.js

@@ -11890,7 +11890,7 @@ var Qc = class {
 	}
 }, $c = {
 	name: "@liquidcars/atlas",
-	version: "0.1.44",
+	version: "0.1.45",
 	description: "Reusable 3D conceptual atlas Web Component for LiquidCars-style models",
 	type: "module",
 	scripts: {
@@ -12760,7 +12760,23 @@ function pu(e, t, n, r, i = .025) {
 		backRotation: Math.PI / 2
 	};
 }
-function mu(e, t, n, r = "", i = !0) {
+function mu(e, t, n = null, r = .08) {
+	let i = (Number(e?.x) || 0) - (Number(t?.x) || 0), a = (Number(e?.y) || 0) - (Number(t?.y) || 0), o = (Number(e?.z) || 0) - (Number(t?.z) || 0), s = Math.hypot(i, a, o), c = [
+		"front",
+		"back",
+		"top"
+	];
+	if (!s) return c.includes(n) ? n : "front";
+	let l = {
+		front: o / s,
+		back: -o / s,
+		top: a / s
+	}, u = "front";
+	for (let e of c.slice(1)) l[e] > l[u] && (u = e);
+	let d = Math.max(0, Math.min(.5, Number(r) || 0));
+	return c.includes(n) && l[n] > 0 && l[n] + d >= l[u] ? n : l[u] > 0 ? u : c.includes(n) ? n : "front";
+}
+function hu(e, t, n, r = "", i = !0) {
 	let a = document.createElement("canvas"), o = a.getContext("2d"), s = n.x * .88, c = Math.min(.82, n.y * .64);
 	a.width = Math.ceil(s * 320), a.height = Math.ceil(c * 320), o.imageSmoothingEnabled = !0, o.imageSmoothingQuality = "high", o.clearRect(0, 0, a.width, a.height);
 	let l = a.height * .62;
@@ -12805,29 +12821,69 @@ function mu(e, t, n, r = "", i = !0) {
 	]) e.renderOrder = 20, e.frustumCulled = !1, e.material.depthTest = !0, e.material.depthWrite = !1, e.material.transparent = !0;
 	return x.renderOrder = 20, x.frustumCulled = !1, x.userData.front = S, x.userData.back = C, x.userData.top = w, x.userData.height = c, x.userData.width = s, x.userData.textOffsetX = h, x.userData.textOffsetY = g, x.userData.nodeLabel = !0, x;
 }
-function hu(e, t, n, r = globalThis.document) {
+function gu(e, t, n, r) {
+	if (!r || r === "transparent" || !e?.fillRect) return;
+	let i = typeof r == "string" ? { color: r } : r, a = i.fade || i.color || "#0a111a", o = i.glow || a;
+	if (e.save?.(), e.globalCompositeOperation = "destination-over", o !== a && e.createRadialGradient && e.scale) {
+		e.scale(t, n);
+		let r = e.createRadialGradient(.5, .45, 0, .5, .45, .75);
+		r.addColorStop(0, o), r.addColorStop(.82, a), r.addColorStop(1, a), e.fillStyle = r, e.fillRect(0, 0, 1, 1);
+	} else e.fillStyle = a, e.fillRect(0, 0, t, n);
+	e.restore?.();
+}
+function _u(e) {
+	for (let t = 0; t < e.length; t += 4) {
+		let n = e[t + 3];
+		if (!n || n === 255) continue;
+		let r = 255 / n;
+		e[t] = Math.min(255, Math.round(e[t] * r)), e[t + 1] = Math.min(255, Math.round(e[t + 1] * r)), e[t + 2] = Math.min(255, Math.round(e[t + 2] * r));
+	}
+}
+function vu(e, t, n, r = 8192) {
+	let i = Math.max(1, Math.min(4, Number(n) || 1));
+	if (i === 1 || !e?.getPixelRatio || !e?.getSize || !e?.setPixelRatio || !e?.setSize) return null;
+	let a = e.getPixelRatio(), o = {
+		x: 0,
+		y: 0,
+		set(e, t) {
+			return this.x = e, this.y = t, this;
+		}
+	};
+	if (e.getSize(o), !o.x || !o.y) return null;
+	let s = t?.getParameter && t?.MAX_RENDERBUFFER_SIZE ? Number(t.getParameter(t.MAX_RENDERBUFFER_SIZE)) : 0, c = Math.max(1, Math.min(Number(r) || 8192, s || Infinity)), l = t?.drawingBufferWidth || o.x * a, u = t?.drawingBufferHeight || o.y * a, d = Math.max(1, Math.min(i, c / l, c / u));
+	return d <= 1 ? null : (e.setPixelRatio(a * d), e.setSize(o.x, o.y, !1), () => {
+		e.setPixelRatio(a), e.setSize(o.x, o.y, !1);
+	});
+}
+function yu(e, t, n, r = globalThis.document, i = {}) {
 	if (!e || !t || !n || !r?.createElement) return null;
+	let a = null;
 	try {
-		e.render(t, n);
-		let i = e.getContext?.(), a = i?.drawingBufferWidth || e.domElement?.width || 0, o = i?.drawingBufferHeight || e.domElement?.height || 0;
-		if (!i?.readPixels || !a || !o) return null;
-		let s = new Uint8Array(a * o * 4);
-		i.readPixels(0, 0, a, o, i.RGBA, i.UNSIGNED_BYTE, s);
-		let c = r.createElement("canvas");
-		c.className = "atlas-print-snapshot", c.width = a, c.height = o, c.setAttribute("aria-hidden", "true");
-		let l = c.getContext?.("2d");
-		if (!l) return null;
-		let u = l.createImageData(a, o), d = a * 4;
-		for (let e = 0; e < o; e += 1) {
-			let t = o - e - 1;
-			u.data.set(s.subarray(t * d, (t + 1) * d), e * d);
-		}
-		return l.putImageData(u, 0, 0), c;
+		let o = e.getContext?.();
+		a = vu(e, o, i.scale, i.maximumDimension), e.render(t, n);
+		let s = e.getContext?.(), c = s?.drawingBufferWidth || e.domElement?.width || 0, l = s?.drawingBufferHeight || e.domElement?.height || 0;
+		if (!s?.readPixels || !c || !l) return null;
+		let u = new Uint8Array(c * l * 4);
+		s.readPixels(0, 0, c, l, s.RGBA, s.UNSIGNED_BYTE, u);
+		let d = r.createElement("canvas");
+		d.className = "atlas-print-snapshot", d.width = c, d.height = l, d.setAttribute("aria-hidden", "true");
+		let f = d.getContext?.("2d");
+		if (!f) return null;
+		let p = f.createImageData(c, l), m = c * 4;
+		for (let e = 0; e < l; e += 1) {
+			let t = l - e - 1;
+			p.data.set(u.subarray(t * m, (t + 1) * m), e * m);
+		}
+		return s.getContextAttributes?.().premultipliedAlpha !== !1 && _u(p.data), f.putImageData(p, 0, 0), gu(f, c, l, i.background), d;
 	} catch {
 		return null;
+	} finally {
+		if (a) try {
+			a(), e.render(t, n);
+		} catch {}
 	}
 }
-var gu = class extends HTMLElement {
+var bu = class extends HTMLElement {
 	static version = $c;
 	static get observedAttributes() {
 		return [
@@ -12916,8 +12972,12 @@ var gu = class extends HTMLElement {
 	set palette(e) {
 		this.setPalette(e);
 	}
-	captureFrame() {
-		return hu(this.renderer, this.scene, this.camera, this.ownerDocument);
+	captureFrame(e = {}) {
+		let t = e.background === "theme" ? this.theme?.background || jl.background : e.background;
+		return yu(this.renderer, this.scene, this.camera, this.ownerDocument, {
+			...e,
+			background: t
+		});
 	}
 	prepareForPrint() {
 		if (this._printState) return this;
@@ -13663,7 +13723,7 @@ var gu = class extends HTMLElement {
 					1
 				] : e.s), t.group.add(t.edge);
 			}
-			t.label = mu(e.name, a, t.labelSize, e.type, this.showShellLabels), t.labelAnchor = fu(e, this.modelData.style), t.label.userData.node = t, t.label.traverse((e) => {
+			t.label = hu(e.name, a, t.labelSize, e.type, this.showShellLabels), t.labelAnchor = fu(e, this.modelData.style), t.label.userData.node = t, t.label.traverse((e) => {
 				e.userData.node = t;
 			}), t.group.add(t.label), this.scene.add(t.group);
 		}
@@ -13953,10 +14013,10 @@ var gu = class extends HTMLElement {
 			e.label.userData.textOffsetY;
 			let m = e.labelSize || new U().fromArray(e.s), h = pu(e.labelAnchor, m, f, d);
 			e.label.visible = n;
-			let g = this._worldPosition(e), _ = this.itemFacing === "camera" && !wl(e.type) || this.camera.position.z >= g.z, v = this.camera.position.y > g.y + .25;
-			if (h) c.visible = _, l.visible = !_, u.visible = !1, c.scale.setScalar(1), l.scale.setScalar(1), c.position.set(h.x, h.y, m.z / 2 + .025), l.position.set(h.x, h.y, -m.z / 2 - .025), c.rotation.z = h.frontRotation, l.rotation.z = h.backRotation, c.material.color.set(15923964), l.material.color.set(15923964), c.material.opacity = t, l.material.opacity = t;
+			let g = this._worldPosition(e), _ = this.itemFacing === "camera" && !wl(e.type) || this.camera.position.z >= g.z, v = e.label.userData.visibleFace || (_ ? "front" : "back"), y = o ? mu(this.camera.position, g, v) : null;
+			if (y && (e.label.userData.visibleFace = y), h) c.visible = _, l.visible = !_, u.visible = !1, c.scale.setScalar(1), l.scale.setScalar(1), c.position.set(h.x, h.y, m.z / 2 + .025), l.position.set(h.x, h.y, -m.z / 2 - .025), c.rotation.z = h.frontRotation, l.rotation.z = h.backRotation, c.material.color.set(15923964), l.material.color.set(15923964), c.material.opacity = t, l.material.opacity = t;
 			else if (wl(e.type)) {
-				c.rotation.z = 0, l.rotation.z = 0, c.visible = _ && (!o || s), l.visible = !_ && (!o || s), u.visible = s && v;
+				c.rotation.z = 0, l.rotation.z = 0, c.visible = o ? y === "front" : _, l.visible = o ? y === "back" : !_, u.visible = s && y === "top";
 				let e = s ? .52 : 1;
 				c.scale.setScalar(e), c.position.x = s ? -m.x / 2 + .18 + f * e / 2 - p * e : 0;
 				let n = .18;
@@ -14139,8 +14199,8 @@ var gu = class extends HTMLElement {
 		n ? n.textContent = e : t.insertAdjacentHTML("beforeend", "<div class=\"error\" role=\"alert\">" + Ul(e) + "</div>");
 	}
 };
-customElements.get("liquidcars-atlas") || customElements.define("liquidcars-atlas", gu);
+customElements.get("liquidcars-atlas") || customElements.define("liquidcars-atlas", bu);
 //#endregion
-export { $c as ATLAS_VERSION, tl as DEFAULT_RELATION_MARKER, gu as LiquidCarsAtlas, nl as RELATION_DISPLAY_MODES, hu as captureRendererFrame, su as createSvgExtrudeGeometry, xl as getGeometryCatalog, Sl as getGeometryPackCatalog, pu as labelPlacementForAnchor, du as normalizeLabelAnchor, ql as normalizeModel, yl as registerGeometryPack, fu as resolveEntityLabelAnchor, bl as unregisterGeometryPack };
+export { $c as ATLAS_VERSION, tl as DEFAULT_RELATION_MARKER, bu as LiquidCarsAtlas, nl as RELATION_DISPLAY_MODES, yu as captureRendererFrame, su as createSvgExtrudeGeometry, xl as getGeometryCatalog, Sl as getGeometryPackCatalog, pu as labelPlacementForAnchor, du as normalizeLabelAnchor, ql as normalizeModel, mu as preferredContainerLabelFace, yl as registerGeometryPack, fu as resolveEntityLabelAnchor, bl as unregisterGeometryPack };
 
 //# sourceMappingURL=liquidcars-atlas.js.map