npm - @liquidcars/atlas - Versions diffs - 0.1.12 → 0.1.14 - Mend

@liquidcars/atlas 0.1.12 → 0.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md +13 -3
package/demo/index.html +2 -2
package/dist/liquidcars-atlas.js +75 -19
package/index.html +2 -2
package/package.json +1 -1

package/README.md CHANGED Viewed

@@ -17,7 +17,7 @@ Después abre <http://localhost:4173/> (o <http://localhost:4173/demo/>). La dem
 ```html
 <script type="module" src="./dist/liquidcars-atlas.js"></script>
-<liquidcars-atlas height="720" relation-mode="selected" shell-labels="on">
+<liquidcars-atlas height="720" relation-mode="selected" shell-labels="on" toolbar="on">
   <script type="application/json">
   {
     "palette": {
@@ -51,6 +51,14 @@ const atlas = document.querySelector('liquidcars-atlas');
 atlas.model = model;
 atlas.select('distribution-agreement');
 atlas.setRelationMode('all'); // 'all' | 'selected' | 'none'
+atlas.setToolbarVisible(true); // también se puede usar toolbar="on" | "off"
+atlas.zoomIn();
+atlas.zoomOut();
+atlas.fit();
+atlas.frontView();
+atlas.setShellLabels(true);
+atlas.openAllContainers();
+atlas.closeAllContainers();
 atlas.setTheme({
   background: { color: '#07121e', glow: '#20394b' },
   lighting: { ambient: 1.8, directional: 3.0 },
@@ -80,6 +88,8 @@ Geometrías incluidas en esta primera versión: `box`, `cylinder`, `sphere`, `co
 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 de la toolbar también están disponibles para la página anfitriona: `zoomIn()`, `zoomOut()`, `fit()`, `frontView()`, `setShellLabels()`, `toggleShellLabels()`, `openAllContainers()` y `closeAllContainers()`. Así se puede construir una barra de controles propia sin depender de la toolbar interna.
 ## Distribución
 El archivo `dist/liquidcars-atlas.js` es un módulo ESM autocontenido: Three.js se incluye dentro del bundle, por lo que el consumidor no necesita instalar otra dependencia para probarlo. El bundle no contiene ningún modelo de negocio ni datos de LiquidCars Atlas; los modelos se suministran aparte mediante `model`, `src` o un `<script type="application/json">`. Para una distribución privada se puede servir ese archivo desde un CDN propio o desde el mismo sitio. Para publicar en npm, después de revisar el API estable:
@@ -93,9 +103,9 @@ Una vez publicado, los consumidores podrán instalarlo con `npm install @liquidc
 Para probar el paquete sin publicarlo, basta con instalar el tarball generado:
 ```bash
-npm install ./liquidcars-atlas-0.1.10.tgz
+npm install ./liquidcars-atlas-0.1.14.tgz
 ```
 ## Estado
-`0.1.12` mantiene la corrección del desplazamiento interno del texto y ancla las etiquetas a las dimensiones reales de las geometrías redondeadas. Además fija un margen superior absoluto para las etiquetas secundarias de contenedores abiertos, situado dentro del frontal del contenedor y sin depender de sus dimensiones. También corrige los sólidos truncados, normaliza sus dimensiones finales, refuerza la visibilidad de la toolbar, desacopla la paleta por defecto de nombres de dominio y añade actualización programática de la paleta con `setPalette`.
+`0.1.14` mantiene la corrección del desplazamiento interno del texto y ancla las etiquetas a las dimensiones reales de las geometrías redondeadas. Además fija un margen superior absoluto para las etiquetas secundarias de contenedores abiertos, situado dentro del frontal del contenedor y sin depender de sus dimensiones. También corrige los sólidos truncados, normaliza sus dimensiones finales, refuerza la visibilidad de la toolbar con el atributo `toolbar="on"`/`"off"` y `setToolbarVisible()`, desacopla la paleta por defecto de nombres de dominio, añade actualización programática de la paleta con `setPalette` y expone las acciones de navegación para controles externos.

package/demo/index.html CHANGED Viewed

@@ -14,12 +14,12 @@
     liquidcars-atlas { display: block; width: 100%; max-width: 1480px; margin: 0 auto; }
     code { color: #85e5d3; }
   </style>
-  <script type="module" src="../dist/liquidcars-atlas.js?v=0.1.12"></script>
+  <script type="module" src="../dist/liquidcars-atlas.js?v=0.1.14"></script>
 </head>
 <body>
   <header>
     <h1>LiquidCars Atlas</h1>
-    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.12</p>
+    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.14</p>
   </header>
   <main>
     <liquidcars-atlas id="atlas" height="720" relation-mode="selected" shell-labels="on"></liquidcars-atlas>

package/dist/liquidcars-atlas.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/*! LiquidCars Atlas 0.1.12 | MIT */
+/*! LiquidCars Atlas 0.1.14 | MIT */
 // src/three.core.js
 var REVISION = "180";
@@ -29223,7 +29223,7 @@ function makeLabel(text, color, dimensions, type = "") {
 }
 var LiquidCarsAtlas = class extends HTMLElement {
   static get observedAttributes() {
-    return ["height", "relation-mode", "shell-labels"];
+    return ["height", "relation-mode", "shell-labels", "toolbar"];
   }
   constructor() {
     super();
@@ -29256,6 +29256,8 @@ var LiquidCarsAtlas = class extends HTMLElement {
     this.relations = [];
     this.animationFrame = 0;
     this.ready = false;
+    this._toolbarVisible = this.getAttribute("toolbar") !== "off";
+    this.toolbar = this.shadowRoot.querySelector(".toolbar");
     this._bindControls();
     this.resizeObserver = new ResizeObserver(() => this.resize());
     this.resizeObserver.observe(this.canvas);
@@ -29278,6 +29280,10 @@ var LiquidCarsAtlas = class extends HTMLElement {
       this.showShellLabels = value !== "false";
       this.invalidate();
     }
+    if (name === "toolbar") {
+      this._toolbarVisible = value !== "off";
+      if (this.ready) this._applyTheme();
+    }
   }
   get model() {
     return this.modelData;
@@ -29303,6 +29309,66 @@ var LiquidCarsAtlas = class extends HTMLElement {
     this.invalidate();
     return this;
   }
+  get toolbarVisible() {
+    return this.hasAttribute("toolbar") ? this._toolbarVisible : this.theme.ui.toolbar !== false;
+  }
+  setToolbarVisible(value) {
+    this._toolbarVisible = Boolean(value);
+    this.setAttribute("toolbar", value ? "on" : "off");
+    this._applyTheme();
+    return this;
+  }
+  zoomIn() {
+    this.targetZoom = Math.min(2.8, this.targetZoom * 1.18);
+    this.invalidate();
+    return this;
+  }
+  zoomOut() {
+    this.targetZoom = Math.max(0.55, this.targetZoom / 1.18);
+    this.invalidate();
+    return this;
+  }
+  fit() {
+    this.targetZoom = 1;
+    this.targetFocus.set(0, 0, 0);
+    this.invalidate();
+    return this;
+  }
+  frontView() {
+    this.yaw = 0;
+    this.pitch = 0;
+    this.invalidate();
+    return this;
+  }
+  setShellLabels(value) {
+    this.showShellLabels = Boolean(value);
+    this.setAttribute("shell-labels", this.showShellLabels ? "on" : "false");
+    const button = this.shadowRoot.querySelector('[data-action="labels"]');
+    if (button) {
+      button.classList.toggle("active", this.showShellLabels);
+      button.setAttribute("aria-pressed", String(this.showShellLabels));
+    }
+    this.invalidate();
+    return this;
+  }
+  toggleShellLabels() {
+    return this.setShellLabels(!this.showShellLabels);
+  }
+  openAllContainers() {
+    for (const node of this.nodes.values()) if (node.type === "shell") this.open.add(node.id);
+    this._renderPanel();
+    this._rebuildRelations();
+    this.invalidate();
+    return this;
+  }
+  closeAllContainers() {
+    this.open.clear();
+    this.selected = null;
+    this._renderPanel();
+    this._rebuildRelations();
+    this.invalidate();
+    return this;
+  }
   get styles() {
     return this.theme;
   }
@@ -29348,13 +29414,13 @@ var LiquidCarsAtlas = class extends HTMLElement {
     const panel = this.shadowRoot.querySelector(".panel");
     const hint = this.shadowRoot.querySelector(".hint");
     if (atlas) atlas.dataset.panel = theme.ui.panel === false ? "hidden" : "visible";
-    const toolbarVisible = theme.ui.toolbar !== false;
+    const toolbarVisible = this.toolbarVisible;
     const panelVisible = theme.ui.panel !== false;
     const hintVisible = theme.ui.hint !== false;
     if (toolbar) {
       toolbar.dataset.hidden = String(!toolbarVisible);
       toolbar.hidden = !toolbarVisible;
-      toolbar.style.display = toolbarVisible ? "flex" : "none";
+      toolbar.style.setProperty("display", toolbarVisible ? "flex" : "none", "important");
     }
     if (panel) {
       panel.dataset.hidden = String(!panelVisible);
@@ -29757,21 +29823,11 @@ var LiquidCarsAtlas = class extends HTMLElement {
   _bindControls() {
     this.shadowRoot.addEventListener("click", (event) => {
       const action = event.target.closest?.("[data-action]")?.dataset.action;
-      if (action === "minus") this.targetZoom = Math.max(0.55, this.targetZoom / 1.18);
-      if (action === "plus") this.targetZoom = Math.min(2.8, this.targetZoom * 1.18);
-      if (action === "fit") {
-        this.targetZoom = 1;
-        this.targetFocus.set(0, 0, 0);
-      }
-      if (action === "front") {
-        this.yaw = 0;
-        this.pitch = 0;
-      }
-      if (action === "labels") {
-        this.showShellLabels = !this.showShellLabels;
-        event.target.classList.toggle("active", this.showShellLabels);
-        event.target.setAttribute("aria-pressed", String(this.showShellLabels));
-      }
+      if (action === "minus") this.zoomOut();
+      if (action === "plus") this.zoomIn();
+      if (action === "fit") this.fit();
+      if (action === "front") this.frontView();
+      if (action === "labels") this.toggleShellLabels();
       if (action === "relations-all") this.setRelationMode("all");
       if (action === "relations-selected") this.setRelationMode("selected");
       if (action === "relations-none") this.setRelationMode("none");

package/index.html CHANGED Viewed

@@ -14,12 +14,12 @@
     liquidcars-atlas { display: block; width: 100%; max-width: 1480px; margin: 0 auto; }
     code { color: #85e5d3; }
   </style>
-  <script type="module" src="./dist/liquidcars-atlas.js?v=0.1.12"></script>
+  <script type="module" src="./dist/liquidcars-atlas.js?v=0.1.14"></script>
 </head>
 <body>
   <header>
     <h1>LiquidCars Atlas</h1>
-    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.12</p>
+    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.14</p>
   </header>
   <main>
     <liquidcars-atlas id="atlas" height="720" relation-mode="selected" shell-labels="on"></liquidcars-atlas>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@liquidcars/atlas",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "Reusable 3D conceptual atlas Web Component for LiquidCars-style models",
   "type": "module",
   "main": "./dist/liquidcars-atlas.js",