@liquidcars/atlas 0.1.33 → 0.1.34

package/README.md

@@ -69,6 +69,11 @@ const initialView = atlas.getCameraView();
 atlas.setCameraView(initialView, { animate: false });
 atlas.restoreInitialCamera({ animate: false });
 atlas.setShellLabels(true);
+atlas.setContainerOpen('distribution-agreements', true);
+atlas.toggleContainer('distribution-agreements');
+console.log(atlas.isContainerOpen('distribution-agreements'));
+console.log(atlas.getOpenContainerIds());
+atlas.restoreInitialContainerState();
 atlas.openAllContainers();
 atlas.closeAllContainers();
 atlas.setTheme({
@@ -148,7 +153,7 @@ componente aplica `break-inside: avoid` durante la impresión.
 - `theme` (opcional): configuración de `background`, `lighting`, `panel`, `toolbar`, `breadcrumbs`, `hint` y `ui`. `ui` permite mostrar u ocultar `panel`, `toolbar`, `breadcrumbs` y `hint`.
 - `render.camera` (opcional): vista inicial con `position`, `target` y `zoom`. Las coordenadas pertenecen al espacio del modelo; `zoom` conserva el encuadre relativo entre tamaños de visor.
 - `render.focus` (opcional): filtrado visual por selección. `mode` acepta `all` o `connected`, `effect` acepta `dim` o `hide`, y `layout` distingue posiciones estables (`preserve`) de una proyección recompilada (`reflow`).
-- `entities`: objetos con `id`, `name`, `p`, `s`, `c`, `type`, `text`, `url` y opcionalmente `parent`, `geometry`, `radius`, `segments`, `frontLabel`, `anchor` y `ports`. Las URL HTTP(S) se abren en una pestaña nueva desde el panel de información.
+- `entities`: objetos con `id`, `name`, `p`, `s`, `c`, `type`, `text`, `url` y opcionalmente `parent`, `geometry`, `radius`, `segments`, `frontLabel`, `anchor` y `ports`. Un contenedor puede declarar `open: true` para comenzar abierto; el valor predeterminado es cerrado y se omite al serializar. Las URL HTTP(S) se abren en una pestaña nueva desde el panel de información.
 - `p` es la posición local respecto a `parent`; una entidad sin `parent` usa coordenadas de escena.
 - `s` son dimensiones absolutas locales `[x, y, z]`.
 - `relations` acepta objetos `{from, to, label, text, url}` o la forma corta `[from, to, label]`. `label` es el título corto de la conexión, `text` su descripción y `url` su documentación externa en el panel de información.
@@ -229,11 +234,21 @@ una caja roja de fallback y emite `lc-warning` con el código
 
 La paleta puede cambiarse después de cargar el modelo mediante `atlas.setPalette({ nombre: color })` o asignando `atlas.palette = { ... }`. El cambio actualiza las piezas, aristas y relaciones sin reconstruir el modelo.
 
-Las acciones de navegación y exploración también están disponibles para la página anfitriona: `zoomIn()`, `zoomOut()`, `panBy()`, `panTo()`, `fit()`, `frontView()`, `getCameraView()`, `setCameraView()`, `restoreInitialCamera()`, `setShellLabels()`, `toggleShellLabels()`, `setPanelVisible()`, `setFocusFilter()`, `clearFocusFilter()`, `getFocusedIds()`, `openAllContainers()` y `closeAllContainers()`. El usuario puede desplazar la vista con el botón derecho, con `Shift` + arrastre o mediante dos dedos en una pantalla táctil. Así se puede construir una barra de controles propia sin depender de la toolbar interna.
+Las acciones de navegación y exploración también están disponibles para la página anfitriona: `zoomIn()`, `zoomOut()`, `panBy()`, `panTo()`, `fit()`, `frontView()`, `getCameraView()`, `setCameraView()`, `restoreInitialCamera()`, `setShellLabels()`, `toggleShellLabels()`, `setPanelVisible()`, `setFocusFilter()`, `clearFocusFilter()`, `getFocusedIds()`, `isContainerOpen()`, `getOpenContainerIds()`, `setContainerOpen()`, `setOpenContainers()`, `toggleContainer()`, `restoreInitialContainerState()`, `openAllContainers()` y `closeAllContainers()`. El usuario puede desplazar la vista con el botón derecho, con `Shift` + arrastre o mediante dos dedos en una pantalla táctil. Así se puede construir una barra de controles propia sin depender de la toolbar interna.
+
+Cada cambio del estado vivo emite `lc-container-state-change`. Su detalle contiene
+`openContainers`, `changedContainers`, `changedContainer`, `open` y `source`, de
+modo que el host puede consultar o persistir una interacción sin acceder a
+detalles internos del componente.
 
 Una vista inicial portable puede declararse dentro del modelo:
 
 ```yaml
+entities:
+  - id: distribution-agreements
+    type: container
+    open: true
+    children: []
 render:
   focus:
     mode: connected

package/dist/liquidcars-atlas.js

@@ -12408,7 +12408,7 @@ var zl = class extends HTMLElement {
 		return ol();
 	}
 	constructor() {
-		super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = "<style>" + hl + gl + _l + "</style>" + Sl, this.canvas = this.shadowRoot.querySelector("canvas"), this.panel = this.shadowRoot.querySelector(".panel"), this.scene = new tr(), this.camera = new Kn(30, 1, .1, 2e3), this.cameraPosition = new U(), this.cameraTarget = new U(), this.raycaster = new Wa(), this.pointer = new V(), this.nodes = /* @__PURE__ */ new Map(), this.open = /* @__PURE__ */ new Set(), this.selected = null, this.selectedRelationIndex = null, this.modelData = null, this._loading = !1, this._pendingSelection = null, this.theme = pl(), this.relationMode = this.getAttribute("relation-mode") || "selected", this.focusFilter = ll({
+		super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = "<style>" + hl + gl + _l + "</style>" + Sl, this.canvas = this.shadowRoot.querySelector("canvas"), this.panel = this.shadowRoot.querySelector(".panel"), this.scene = new tr(), this.camera = new Kn(30, 1, .1, 2e3), this.cameraPosition = new U(), this.cameraTarget = new U(), this.raycaster = new Wa(), this.pointer = new V(), this.nodes = /* @__PURE__ */ new Map(), this.open = /* @__PURE__ */ new Set(), this._initialOpenContainers = /* @__PURE__ */ new Set(), this.selected = null, this.selectedRelationIndex = null, this.modelData = null, this._loading = !1, this._pendingSelection = null, this.theme = pl(), this.relationMode = this.getAttribute("relation-mode") || "selected", this.focusFilter = ll({
 			mode: this.getAttribute("focus-mode"),
 			effect: this.getAttribute("focus-effect"),
 			layout: this.getAttribute("focus-layout")
@@ -12671,6 +12671,40 @@ var zl = class extends HTMLElement {
 			composed: !0
 		}));
 	}
+	_containerEntityIds() {
+		return (this.modelData?.entities || []).filter((e) => cl(e.type)).map((e) => e.id);
+	}
+	_declaredOpenContainerIds() {
+		return (this.modelData?.entities || []).filter((e) => cl(e.type) && e.open === !0).map((e) => e.id);
+	}
+	_emitContainerStateChange(e, t = {}) {
+		if (!e?.changed || t.emit === !1) return;
+		let n = t.changedContainer || (e.changedContainers.length === 1 ? e.changedContainers[0] : null);
+		this._emit("lc-container-state-change", {
+			openContainers: [...e.current],
+			changedContainers: [...e.changedContainers],
+			changedContainer: n,
+			open: typeof t.open == "boolean" ? t.open : n ? e.current.includes(n) : null,
+			source: t.source || "api"
+		});
+	}
+	_replaceOpenContainers(e, t = {}) {
+		let n = new Set(e || []), r = this._containerEntityIds(), i = [...this.open], a = r.filter((e) => n.has(e)), o = new Set(i), s = new Set(a), c = [...i.filter((e) => !s.has(e)), ...a.filter((e) => !o.has(e))], l = {
+			changed: c.length > 0,
+			previous: i,
+			current: a,
+			changedContainers: c
+		};
+		return l.changed && (this.open = s), (l.changed || t.forceRefresh) && t.refresh !== !1 && (this._renderPanel?.(), this._rebuildRelations?.(), this.invalidate?.()), this._emitContainerStateChange(l, t), l;
+	}
+	_syncInitialContainerState(e = {}) {
+		let t = this._initialOpenContainers || /* @__PURE__ */ new Set(), n = new Set(this._declaredOpenContainerIds()), r = e.force ? new Set(n) : new Set(this.open);
+		if (!e.force) {
+			for (let e of t) n.has(e) || r.delete(e);
+			for (let e of n) t.has(e) || r.add(e);
+		}
+		return this._initialOpenContainers = n, this._replaceOpenContainers(r, e);
+	}
 	_publicEntity(e) {
 		let t = this.modelData?.entities?.find((t) => t.id === e);
 		return t ? {
@@ -12699,10 +12733,16 @@ var zl = class extends HTMLElement {
 	}
 	_commitModelChange(e, t = {}, n = {}) {
 		let r = n.preserveSelection === !1 ? null : this.selected?.id, i = n.preserveSelection === !1 ? null : this._publicRelation(this.selectedRelationIndex), a = i?.id ?? i?.index ?? null;
-		return this.modelData = Tl(this.modelData), this._build({
+		this.modelData = Tl(this.modelData);
+		let o = this._syncInitialContainerState({
+			refresh: !1,
+			emit: !1,
+			source: "model"
+		});
+		return this._build({
 			preserveSelection: r,
 			preserveRelation: a
-		}), this._emit("lc-model-change", {
+		}), this._emitContainerStateChange(o, { source: "model" }), this._emit("lc-model-change", {
 			kind: e,
 			model: this.modelData,
 			...t
@@ -12760,9 +12800,7 @@ var zl = class extends HTMLElement {
 		let i = this.modelData.relations[this.selectedRelationIndex];
 		this.modelData.entities = this.modelData.entities.filter((e) => !r.has(e.id)), this.modelData.relations = this.modelData.relations.filter((e) => !r.has(e.from) && !r.has(e.to));
 		let a = i ? this.modelData.relations.indexOf(i) : -1;
-		this.selectedRelationIndex = a >= 0 ? a : null;
-		for (let e of r) this.open.delete(e);
-		return this.selected && r.has(this.selected.id) && (this.selected = null), this._commitModelChange("entity-remove", {
+		return this.selectedRelationIndex = a >= 0 ? a : null, this.selected && r.has(this.selected.id) && (this.selected = null), this._commitModelChange("entity-remove", {
 			id: e,
 			removed: [...r]
 		});
@@ -12872,12 +12910,55 @@ var zl = class extends HTMLElement {
 	toggleShellLabels() {
 		return this.setShellLabels(!this.showShellLabels);
 	}
-	openAllContainers() {
-		for (let e of this.nodes.values()) cl(e.type) && this.open.add(e.id);
-		return this._renderPanel(), this._rebuildRelations(), this.invalidate(), this;
+	isContainerOpen(e) {
+		return this._containerEntityIds().includes(e) && this.open.has(e);
+	}
+	getOpenContainerIds() {
+		return this._containerEntityIds().filter((e) => this.open.has(e));
+	}
+	setOpenContainers(e, t = {}) {
+		if (e == null || typeof e == "string" || typeof e[Symbol.iterator] != "function") throw TypeError("Los contenedores abiertos deben indicarse mediante un iterable de ids.");
+		return this._replaceOpenContainers(e, t), this;
+	}
+	setContainerOpen(e, t = !0, n = {}) {
+		let r = this.modelData?.entities?.find((t) => t.id === e);
+		if (!r) throw Error(`No existe una entidad con id "${e}".`);
+		if (!cl(r.type)) throw TypeError(`La entidad "${e}" no es un contenedor.`);
+		let i = new Set(this.open);
+		if (t) i.add(e);
+		else if (i.delete(e), n.closeDescendants !== !1) for (let t of this.modelData.entities) {
+			let n = t.parent, r = /* @__PURE__ */ new Set();
+			for (; n && !r.has(n);) {
+				if (r.add(n), n === e) {
+					cl(t.type) && i.delete(t.id);
+					break;
+				}
+				n = this.modelData.entities.find((e) => e.id === n)?.parent || null;
+			}
+		}
+		return this._replaceOpenContainers(i, {
+			...n,
+			changedContainer: e,
+			open: !!t
+		}), this;
+	}
+	toggleContainer(e, t = {}) {
+		return this.setContainerOpen(e, !this.isContainerOpen(e), t);
+	}
+	restoreInitialContainerState(e = {}) {
+		return this._replaceOpenContainers(this._initialOpenContainers, {
+			...e,
+			source: e.source || "restore"
+		}), this;
+	}
+	openAllContainers(e = {}) {
+		return this.setOpenContainers(this._containerEntityIds(), e);
 	}
-	closeAllContainers() {
-		return this.open.clear(), this.selected = null, this._renderPanel(), this._rebuildRelations(), this.invalidate(), this;
+	closeAllContainers(e = {}) {
+		return this.selected = null, this.setOpenContainers([], {
+			...e,
+			forceRefresh: !0
+		});
 	}
 	get styles() {
 		return this.theme;
@@ -12923,10 +13004,14 @@ var zl = class extends HTMLElement {
 		this._loading = !0, this._pendingSelection = null;
 		try {
 			let t = typeof e == "string" ? await fetch(e).then((e) => e.json()) : e;
-			this.modelData = Tl(t), this.selected = null, this.selectedRelationIndex = null, this.open.clear(), this._pendingPalette &&= (this.modelData.palette = {
+			this.modelData = Tl(t), this.selected = null, this.selectedRelationIndex = null, this.open.clear(), this._initialOpenContainers.clear(), this._pendingPalette &&= (this.modelData.palette = {
 				...this.modelData.palette,
 				...this._pendingPalette
-			}, null), this.theme = this.modelData.theme, this._applyTheme(), this._build(), this._applyModelRenderOptions(), this.modelData.render?.camera && this.setCameraView(this.modelData.render.camera, { animate: !1 }), this.dispatchEvent(new CustomEvent("lc-ready", { detail: { model: this.modelData } })), this.dispatchEvent(new CustomEvent("lc-model-change", { detail: { model: this.modelData } }));
+			}, null), this.theme = this.modelData.theme, this._applyTheme(), this._syncInitialContainerState({
+				force: !0,
+				refresh: !1,
+				emit: !1
+			}), this._build(), this._applyModelRenderOptions(), this.modelData.render?.camera && this.setCameraView(this.modelData.render.camera, { animate: !1 }), this.dispatchEvent(new CustomEvent("lc-ready", { detail: { model: this.modelData } })), this.dispatchEvent(new CustomEvent("lc-model-change", { detail: { model: this.modelData } }));
 			let n = this._pendingSelection;
 			return this._pendingSelection = null, this._loading = !1, n?.kind === "relation" ? this.selectRelation(n.index, n.options) : n?.kind === "entity" && this.select(n.id, n.options), this;
 		} catch (e) {
@@ -13178,28 +13263,18 @@ var zl = class extends HTMLElement {
 			return "<button class=\"relation\" data-action=\"relation\" data-relation-index=\"" + n + "\"><strong>" + Cl(e.label || (e.from === t.id ? e.to : e.from)) + "</strong><small>" + Cl(e.from) + " → " + Cl(e.to) + "</small>" + r + "</button>";
 		}).join("");
 		this.panel.innerHTML = "<button class=\"back\" data-action=\"overview\">← Vista de conjunto</button>" + s + "<div class=\"eyebrow\">" + Cl(cl(t.type) ? "CONTENEDOR" : t.type === "actor" ? "ACTOR EXTERNO" : "COMPONENTE") + "</div><h2>" + Cl(t.name) + "</h2><div class=\"sub\">" + Cl(t.sub || "") + "</div><p>" + Cl(t.text || "") + "</p>" + wl(t.url) + (cl(t.type) ? "<button data-action=\"toggle-shell\">" + (this.open.has(t.id) ? "Cerrar bloque" : "Abrir bloque") + "</button>" : "") + (r.length ? "<h3>CONTIENE</h3><p>" + r.length + " pieza(s) interna(s).</p>" : "") + "<h3>RELACIONES</h3>" + (c || "<p>No hay relaciones directas.</p>"), this.panel.querySelectorAll("[data-action=\"overview\"]").forEach((e) => e.addEventListener("click", () => this.reset())), this.panel.querySelectorAll("[data-action=\"path\"]").forEach((e) => e.addEventListener("click", () => this.select(e.dataset.id))), this.panel.querySelectorAll("[data-action=\"relation\"]").forEach((e) => e.addEventListener("click", () => this.selectRelation(Number(e.dataset.relationIndex), { source: "panel" }))), this.panel.querySelector("[data-action=\"toggle-shell\"]")?.addEventListener("click", () => {
-			if (this.open.has(t.id)) {
-				this.open.delete(t.id);
-				for (let e of this.nodes.values()) {
-					let n = e.parent ? this.nodes.get(e.parent) : null;
-					for (; n;) {
-						if (n.id === t.id) {
-							this.open.delete(e.id);
-							break;
-						}
-						n = n.parent ? this.nodes.get(n.parent) : null;
-					}
-				}
-			} else this.open.add(t.id);
-			this._renderPanel(), this._rebuildRelations(), this.invalidate();
+			this.toggleContainer(t.id, { source: "panel" });
 		}), this._applyTheme();
 	}
 	select(e, t = {}) {
 		let n = this.nodes.get(e);
 		if (!n) return this;
-		let r = n.parent ? this.nodes.get(n.parent) : null;
-		for (; r;) this.open.add(r.id), r = r.parent ? this.nodes.get(r.parent) : null;
-		return this.selected = n, this.selectedRelationIndex = null, cl(n.type) && this.open.add(n.id), this.targetFocus.copy(this._worldPosition(n)), this.targetZoom = n.parent ? 1.35 : 1.1, this._renderPanel(), this._rebuildRelations(), this.invalidate(), t.focusEvent !== !1 && this._emitFocusChange(t.source || "api"), t.emit !== !1 && this._emit("lc-select", {
+		let r = new Set(this.open), i = n.parent ? this.nodes.get(n.parent) : null;
+		for (; i;) r.add(i.id), i = i.parent ? this.nodes.get(i.parent) : null;
+		return this.selected = n, this.selectedRelationIndex = null, cl(n.type) && r.add(n.id), this._replaceOpenContainers(r, {
+			refresh: !1,
+			source: t.source || "api"
+		}), this.targetFocus.copy(this._worldPosition(n)), this.targetZoom = n.parent ? 1.35 : 1.1, this._renderPanel(), this._rebuildRelations(), this.invalidate(), t.focusEvent !== !1 && this._emitFocusChange(t.source || "api"), t.emit !== !1 && this._emit("lc-select", {
 			kind: "entity",
 			id: e,
 			index: null,
@@ -13212,12 +13287,17 @@ var zl = class extends HTMLElement {
 		let n = this._relationIndex(e), r = this._publicRelation(n);
 		if (!r) return this;
 		this.selected = null, this.selectedRelationIndex = n;
+		let i = new Set(this.open);
 		for (let e of [r.from, r.to]) {
 			let t = this.nodes.get(e)?.parent ? this.nodes.get(this.nodes.get(e).parent) : null;
-			for (; t;) this.open.add(t.id), t = t.parent ? this.nodes.get(t.parent) : null;
+			for (; t;) i.add(t.id), t = t.parent ? this.nodes.get(t.parent) : null;
 		}
-		let i = this.nodes.get(r.from), a = this.nodes.get(r.to);
-		return i && a && this.targetFocus.copy(this._worldPosition(i).add(this._worldPosition(a)).multiplyScalar(.5)), this.targetZoom = 1.22, this._renderPanel(), this._rebuildRelations(), this.invalidate(), t.focusEvent !== !1 && this._emitFocusChange(t.source || "api"), t.emit !== !1 && this._emit("lc-select", {
+		this._replaceOpenContainers(i, {
+			refresh: !1,
+			source: t.source || "api"
+		});
+		let a = this.nodes.get(r.from), o = this.nodes.get(r.to);
+		return a && o && this.targetFocus.copy(this._worldPosition(a).add(this._worldPosition(o)).multiplyScalar(.5)), this.targetZoom = 1.22, this._renderPanel(), this._rebuildRelations(), this.invalidate(), t.focusEvent !== !1 && this._emitFocusChange(t.source || "api"), t.emit !== !1 && this._emit("lc-select", {
 			kind: "relation",
 			id: r.id || null,
 			index: n,
@@ -13234,7 +13314,10 @@ var zl = class extends HTMLElement {
 		].includes(e) ? e : "selected", this.setAttribute("relation-mode", this.relationMode), this._syncRelationToolbar(), this._rebuildRelations(), this.invalidate(), this.dispatchEvent(new CustomEvent("lc-relation-mode", { detail: { mode: this.relationMode } }));
 	}
 	reset() {
-		this.selected = null, this.selectedRelationIndex = null, this.open.clear(), this.relationMode = "selected", this.setAttribute("relation-mode", "selected"), this._syncRelationToolbar(), this.restoreInitialCamera({ animate: !1 }), this._renderPanel(), this._rebuildRelations(), this.invalidate(), this._emitFocusChange("reset");
+		this.selected = null, this.selectedRelationIndex = null, this.restoreInitialContainerState({
+			refresh: !1,
+			source: "reset"
+		}), this.relationMode = "selected", this.setAttribute("relation-mode", "selected"), this._syncRelationToolbar(), this.restoreInitialCamera({ animate: !1 }), this._renderPanel(), this._rebuildRelations(), this.invalidate(), this._emitFocusChange("reset");
 	}
 	resize() {
 		if (!this.renderer) return;
@@ -13314,7 +13397,7 @@ var zl = class extends HTMLElement {
 			e.key === "Escape" && (this._closeToolbarMenus(), this.canvas.focus({ preventScroll: !0 }));
 		}), this.shadowRoot.addEventListener("click", (e) => {
 			let t = e.target.closest?.("[data-action]"), n = t?.dataset.action;
-			e.target.closest?.(".toolbar-menu") || this._closeToolbarMenus(), n === "minus" && this.zoomOut(), n === "plus" && this.zoomIn(), n === "fit" && this.fit(), n === "front" && this.frontView(), n === "labels" && this.toggleShellLabels(), n === "panel" && this.setPanelVisible(!this.panelVisible), n === "open-all" && this.openAllContainers(), n === "close-all" && this.closeAllContainers(), n === "relations-all" && this.setRelationMode("all"), n === "relations-selected" && this.setRelationMode("selected"), n === "relations-none" && this.setRelationMode("none"), n === "focus-all" && this.setFocusFilter({ mode: "all" }, { source: "toolbar" }), n === "focus-dim" && this.setFocusFilter({
+			e.target.closest?.(".toolbar-menu") || this._closeToolbarMenus(), n === "minus" && this.zoomOut(), n === "plus" && this.zoomIn(), n === "fit" && this.fit(), n === "front" && this.frontView(), n === "labels" && this.toggleShellLabels(), n === "panel" && this.setPanelVisible(!this.panelVisible), n === "open-all" && this.openAllContainers({ source: "toolbar" }), n === "close-all" && this.closeAllContainers({ source: "toolbar" }), n === "relations-all" && this.setRelationMode("all"), n === "relations-selected" && this.setRelationMode("selected"), n === "relations-none" && this.setRelationMode("none"), n === "focus-all" && this.setFocusFilter({ mode: "all" }, { source: "toolbar" }), n === "focus-dim" && this.setFocusFilter({
 				mode: "connected",
 				effect: "dim"
 			}, { source: "toolbar" }), n === "focus-hide" && this.setFocusFilter({