@liquidcars/atlas 0.1.10 → 0.1.12

package/README.md

@@ -56,6 +56,7 @@ atlas.setTheme({
   lighting: { ambient: 1.8, directional: 3.0 },
   ui: { breadcrumbs: true, panel: true, toolbar: true, hint: false }
 });
+atlas.setPalette({ channels: '#58b6ec', offers: '#48c8b0', connection: '#f4edba' });
 ```
 
 El mismo bloque `theme` puede formar parte del JSON del modelo. Los estilos
@@ -75,11 +76,13 @@ Eventos disponibles: `lc-ready`, `lc-error`, `lc-select`, `lc-relation-mode` y `
 - `s` son dimensiones absolutas locales `[x, y, z]`.
 - `relations` acepta objetos `{from, to, label}` o la forma corta `[from, to, label]`.
 
-Geometrías incluidas en esta primera versión: `box`, `cylinder`, `sphere`, `cone`, `frustum-cone`, `frustum-pyramid`, `frustum-triangle`, `prism`, `pyramid-square`, `pyramid-triangle`, `octahedron`, `dodecahedron` e `icosahedron`.
+Geometrías incluidas en esta primera versión: `box`, `cylinder`, `sphere`, `cone`, `frustum-cone`, `frustum-pyramid`, `frustum-triangle`, `prism`, `pyramid-square`, `pyramid-triangle`, `octahedron`, `dodecahedron` e `icosahedron`. Las variantes `frustum-*` son sólidos truncados con dos caras finitas paralelas; las dimensiones `s` se aplican sobre su caja final normalizada.
+
+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.
 
 ## 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. 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:
+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:
 
 ```bash
 npm publish --access public
@@ -95,4 +98,4 @@ npm install ./liquidcars-atlas-0.1.10.tgz
 
 ## Estado
 
-`0.1.10` 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 incluye configuración programática de tema, iluminación y elementos de interfaz.
+`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`.

package/demo/index.html

@@ -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.10"></script>
+  <script type="module" src="../dist/liquidcars-atlas.js?v=0.1.12"></script>
 </head>
 <body>
   <header>
     <h1>LiquidCars Atlas</h1>
-    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.10</p>
+    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.12</p>
   </header>
   <main>
     <liquidcars-atlas id="atlas" height="720" relation-mode="selected" shell-labels="on"></liquidcars-atlas>

package/dist/liquidcars-atlas.js

@@ -1,4 +1,4 @@
-/*! LiquidCars Atlas 0.1.10 | MIT */
+/*! LiquidCars Atlas 0.1.12 | MIT */
 
 // src/three.core.js
 var REVISION = "180";
@@ -28993,15 +28993,7 @@ var WebGLRenderer = class {
 
 // src/liquidcars-atlas.js
 var DEFAULT_PALETTE = {
-  offers: "#48c8b0",
-  ole: "#a995f1",
-  agreements: "#edb36f",
-  channels: "#60b5e6",
-  buyer: "#9cc95e",
-  dealer: "#48c8b0",
-  serviceProvider: "#ed8f98",
   component: "#8ae4d0",
-  channelOffer: "#d2c4ff",
   connection: "#f4edba"
 };
 var DEFAULT_THEME = {
@@ -29029,7 +29021,7 @@ function normalizeTheme(value) {
 }
 var CSS = [
   ":host{display:block;position:relative;height:var(--lc-height,680px);min-height:420px;color:var(--lc-panel-title,#e9f0f5);font:14px Inter,system-ui,-apple-system,sans-serif;background:var(--lc-bg,#0a111a);border:1px solid #294252;border-radius:12px;overflow:hidden;contain:content}",
-  "*{box-sizing:border-box}.atlas{display:grid;grid-template-columns:minmax(0,1fr) 300px;height:100%}.atlas[data-panel=hidden]{grid-template-columns:1fr}.viewport{position:relative;min-width:0;background:radial-gradient(ellipse at 50% 45%,var(--lc-bg-glow,#1c2b39),var(--lc-bg-fade,#0a111a) 82%)}canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}.toolbar{position:absolute;z-index:2;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:3px;padding:6px;background:var(--lc-toolbar-bg,#15232fe8);border:1px solid var(--lc-toolbar-border,#3a5062);border-radius:8px;white-space:nowrap}.toolbar[data-hidden=true],.panel[data-hidden=true],.crumbs[data-hidden=true],.hint[data-hidden=true]{display:none}.toolbar button{height:30px;padding:0 9px;border:0;border-radius:5px;background:none;color:var(--lc-toolbar-text,#dbe7ec);cursor:pointer}.toolbar button:hover,.toolbar button.active{background:var(--lc-toolbar-active,#1f3d4b);color:var(--lc-toolbar-active-text,#c5f2e9)}.toolbar i{display:block;width:1px;margin:2px 3px;background:#38515f}.hint{position:absolute;bottom:5px;left:0;right:0;text-align:center;font-size:11px;color:var(--lc-hint,#8da6b8);pointer-events:none}.panel{overflow:auto;padding:24px 20px;background:var(--lc-panel-bg,linear-gradient(140deg,#182633,#0e1925 65%));border-left:1px solid var(--lc-panel-border,#2a3a48)}.panel h2{font-size:26px;line-height:1.12;font-weight:470;margin:12px 0;color:var(--lc-panel-title,#e9f0f5)}.panel h3{font-size:11px;letter-spacing:1.4px;color:#91aabd;margin:24px 0 10px}.panel p{font-size:14px;line-height:1.55;color:var(--lc-panel-text,#b5c6d2)}.panel .eyebrow{font-size:11px;letter-spacing:1.7px;color:#6ad7c0}.panel .sub{font-size:13px;color:#8fa8bd;margin-bottom:16px}.panel button{display:block;width:100%;padding:10px 0;text-align:left;background:none;border:0;border-bottom:1px solid var(--lc-panel-border,#2a3a48);color:#d9e7eb;cursor:pointer}.panel button:hover{color:#6ad7c0}.panel .relation{padding:10px 0;border-bottom:1px solid var(--lc-panel-border,#2a3a48)}.panel .relation strong{display:block;font-weight:550}.panel .relation small{display:block;color:#86a6b9;font-size:12px;margin-top:4px}.panel .back{color:#9db7c8;font-size:13px}.panel .crumbs{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:0 0 12px}.panel .crumbs button{display:inline;width:auto;padding:3px 7px;border:0;border-radius:4px;background:var(--lc-crumb-bg,#142733);color:var(--lc-crumb-text,#91b6c7);font-size:12px}.panel .crumbs button.current{background:var(--lc-crumb-active,#1c4a4d);color:var(--lc-crumb-active-text,#c5f2e9)}.panel .note{border-top:1px solid var(--lc-panel-border,#2a3a48);padding-top:16px;margin-top:22px;font-size:12px;color:#7692a6}.error{position:absolute;inset:20%;padding:18px;background:#172b3b;border:1px solid #7896a9;line-height:1.5;z-index:4}@media(max-width:900px){.toolbar{gap:0}.toolbar button{padding:0 6px;font-size:12px}}@media(max-width:760px){:host{height:680px}.atlas{grid-template-columns:1fr;grid-template-rows:minmax(420px,1fr) auto}.panel{max-height:250px;border-left:0;border-top:1px solid var(--lc-panel-border,#2a3a48);padding:18px}.toolbar{bottom:10px}.hint{display:none}}"
+  "*{box-sizing:border-box}.atlas{display:grid;grid-template-columns:minmax(0,1fr) 300px;height:100%}.atlas[data-panel=hidden]{grid-template-columns:1fr}.viewport{position:relative;min-width:0;background:radial-gradient(ellipse at 50% 45%,var(--lc-bg-glow,#1c2b39),var(--lc-bg-fade,#0a111a) 82%)}canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}.toolbar{position:absolute;z-index:10;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:3px;padding:6px;background:var(--lc-toolbar-bg,#15232fe8);border:1px solid var(--lc-toolbar-border,#3a5062);border-radius:8px;white-space:nowrap}.toolbar[data-hidden=true],.toolbar[hidden],.panel[data-hidden=true],.panel[hidden],.crumbs[data-hidden=true],.crumbs[hidden],.hint[data-hidden=true],.hint[hidden]{display:none!important}.toolbar button{height:30px;padding:0 9px;border:0;border-radius:5px;background:none;color:var(--lc-toolbar-text,#dbe7ec);cursor:pointer}.toolbar button:hover,.toolbar button.active{background:var(--lc-toolbar-active,#1f3d4b);color:var(--lc-toolbar-active-text,#c5f2e9)}.toolbar i{display:block;width:1px;margin:2px 3px;background:#38515f}.hint{position:absolute;bottom:5px;left:0;right:0;text-align:center;font-size:11px;color:var(--lc-hint,#8da6b8);pointer-events:none}.panel{overflow:auto;padding:24px 20px;background:var(--lc-panel-bg,linear-gradient(140deg,#182633,#0e1925 65%));border-left:1px solid var(--lc-panel-border,#2a3a48)}.panel h2{font-size:26px;line-height:1.12;font-weight:470;margin:12px 0;color:var(--lc-panel-title,#e9f0f5)}.panel h3{font-size:11px;letter-spacing:1.4px;color:#91aabd;margin:24px 0 10px}.panel p{font-size:14px;line-height:1.55;color:var(--lc-panel-text,#b5c6d2)}.panel .eyebrow{font-size:11px;letter-spacing:1.7px;color:#6ad7c0}.panel .sub{font-size:13px;color:#8fa8bd;margin-bottom:16px}.panel button{display:block;width:100%;padding:10px 0;text-align:left;background:none;border:0;border-bottom:1px solid var(--lc-panel-border,#2a3a48);color:#d9e7eb;cursor:pointer}.panel button:hover{color:#6ad7c0}.panel .relation{padding:10px 0;border-bottom:1px solid var(--lc-panel-border,#2a3a48)}.panel .relation strong{display:block;font-weight:550}.panel .relation small{display:block;color:#86a6b9;font-size:12px;margin-top:4px}.panel .back{color:#9db7c8;font-size:13px}.panel .crumbs{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:0 0 12px}.panel .crumbs button{display:inline;width:auto;padding:3px 7px;border:0;border-radius:4px;background:var(--lc-crumb-bg,#142733);color:var(--lc-crumb-text,#91b6c7);font-size:12px}.panel .crumbs button.current{background:var(--lc-crumb-active,#1c4a4d);color:var(--lc-crumb-active-text,#c5f2e9)}.panel .note{border-top:1px solid var(--lc-panel-border,#2a3a48);padding-top:16px;margin-top:22px;font-size:12px;color:#7692a6}.error{position:absolute;inset:20%;padding:18px;background:#172b3b;border:1px solid #7896a9;line-height:1.5;z-index:4}@media(max-width:900px){.toolbar{gap:0}.toolbar button{padding:0 6px;font-size:12px}}@media(max-width:760px){:host{height:680px}.atlas{grid-template-columns:1fr;grid-template-rows:minmax(420px,1fr) auto}.panel{max-height:250px;border-left:0;border-top:1px solid var(--lc-panel-border,#2a3a48);padding:18px}.toolbar{bottom:10px}.hint{display:none}}"
 ].join("");
 var TEMPLATE = '<div class="atlas"><section class="viewport"><canvas tabindex="0" aria-label="Modelo 3D interactivo"></canvas><div class="toolbar"><button data-action="minus" aria-label="Alejar">\u2212</button><button data-action="plus" aria-label="Acercar">+</button><i></i><button data-action="fit">\u2316 Encuadrar</button><button data-action="front">\u25B1 Frontal</button><button data-action="labels" class="active" aria-pressed="true">\u25A7 Etiquetas</button><i></i><button data-action="relations-all" aria-pressed="false">Todas</button><button data-action="relations-selected" class="active" aria-pressed="true">Selecci\xF3n</button><button data-action="relations-none" aria-pressed="false">Ocultar</button></div><div class="hint">Arrastra para girar \xB7 rueda para zoom \xB7 clic para seleccionar</div></section><aside class="panel" aria-live="polite"></aside></div>';
 function escapeHtml(value) {
@@ -29117,11 +29109,15 @@ function makeGeometry(kind, radius = 0, segments = 4, size = [1, 1, 1]) {
     case "frustum-cone":
     case "truncated-cone":
       return r ? roundedFrustum(0.28, 0.5, r, s) : new CylinderGeometry(0.28, 0.5, 1, 32);
+    // A frustum is a solid with two finite parallel faces.  ConeGeometry
+    // leaves the narrow face collapsed to an apex, which made both truncated
+    // pyramid variants look like ordinary pyramids.  CylinderGeometry with
+    // three/four radial segments gives us a real triangular/square frustum.
     case "frustum-pyramid":
     case "truncated-pyramid":
-      return softenPolyhedron(new ConeGeometry(0.24, 0.5, 4), r);
+      return new CylinderGeometry(0.28, 0.5, 1, 4);
     case "frustum-triangle":
-      return softenPolyhedron(new ConeGeometry(0.24, 0.5, 3), r);
+      return new CylinderGeometry(0.28, 0.5, 1, 3);
     case "prism":
       return r ? roundedPrism(6, r, s) : new CylinderGeometry(0.5, 0.5, 1, 6);
     case "pyramid-square":
@@ -29140,6 +29136,15 @@ function makeGeometry(kind, radius = 0, segments = 4, size = [1, 1, 1]) {
       return r ? roundedBox(r, s, size) : new BoxGeometry(1, 1, 1);
   }
 }
+function normalizeGeometry(geometry) {
+  geometry.computeBoundingBox();
+  const bounds = geometry.boundingBox;
+  const size = bounds?.getSize(new Vector3());
+  if (!size || !size.x || !size.y || !size.z) return geometry;
+  geometry.scale(1 / size.x, 1 / size.y, 1 / size.z);
+  geometry.computeBoundingBox();
+  return geometry;
+}
 function makeLabel(text, color, dimensions, type = "") {
   const bitmap = document.createElement("canvas");
   const context = bitmap.getContext("2d");
@@ -29280,6 +29285,24 @@ var LiquidCarsAtlas = class extends HTMLElement {
   set model(value) {
     this.load(value);
   }
+  get palette() {
+    return this.modelData?.palette || { ...DEFAULT_PALETTE };
+  }
+  set palette(value) {
+    this.setPalette(value);
+  }
+  setPalette(value = {}) {
+    if (!value || typeof value !== "object") return this;
+    if (!this.modelData) {
+      this._pendingPalette = { ...this._pendingPalette || {}, ...value };
+      return this;
+    }
+    this.modelData.palette = { ...this.modelData.palette, ...value };
+    this._recolorNodes();
+    this._rebuildRelations();
+    this.invalidate();
+    return this;
+  }
   get styles() {
     return this.theme;
   }
@@ -29325,11 +29348,25 @@ 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";
-    if (toolbar) toolbar.dataset.hidden = String(theme.ui.toolbar === false);
-    if (panel) panel.dataset.hidden = String(theme.ui.panel === false);
-    if (hint) hint.dataset.hidden = String(theme.ui.hint === false);
+    const toolbarVisible = theme.ui.toolbar !== false;
+    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";
+    }
+    if (panel) {
+      panel.dataset.hidden = String(!panelVisible);
+      panel.hidden = !panelVisible;
+    }
+    if (hint) {
+      hint.dataset.hidden = String(!hintVisible);
+      hint.hidden = !hintVisible;
+    }
     this.shadowRoot.querySelectorAll(".crumbs").forEach((crumbs) => {
       crumbs.dataset.hidden = String(theme.ui.breadcrumbs === false);
+      crumbs.hidden = theme.ui.breadcrumbs === false;
     });
   }
   async _loadInitial() {
@@ -29348,6 +29385,10 @@ var LiquidCarsAtlas = class extends HTMLElement {
     try {
       const data = typeof source === "string" ? await fetch(source).then((response) => response.json()) : source;
       this.modelData = normalizeModel(data);
+      if (this._pendingPalette) {
+        this.modelData.palette = { ...this.modelData.palette, ...this._pendingPalette };
+        this._pendingPalette = null;
+      }
       this.theme = this.modelData.theme;
       this._applyTheme();
       this._build();
@@ -29405,6 +29446,14 @@ var LiquidCarsAtlas = class extends HTMLElement {
     this.nodes.clear();
     this.relationGroup.clear();
   }
+  _recolorNodes() {
+    if (!this.modelData) return;
+    for (const node of this.nodes.values()) {
+      const color = this.modelData.palette[node.c] || node.c || this.modelData.palette.component;
+      if (node.material) node.material.color.set(color);
+      if (node.edge?.material) node.edge.material.color.set(color);
+    }
+  }
   _build() {
     if (!this._ensureRenderer()) return;
     this._clearObjects();
@@ -29416,6 +29465,7 @@ var LiquidCarsAtlas = class extends HTMLElement {
       const geometryKind = entity.geometry || "box";
       const baked = geometryKind === "box" && Number(entity.radius) > 0;
       const geometry = makeGeometry(geometryKind, entity.radius, entity.segments, entity.s);
+      if (!baked) normalizeGeometry(geometry);
       const color = this.modelData.palette[entity.c] || entity.c || this.modelData.palette.component;
       node.material = new MeshStandardMaterial({ color, roughness: 0.72, metalness: 0.06, transparent: true, opacity: entity.type === "shell" ? 0.96 : 1 });
       node.mesh = new Mesh(geometry, node.material);

package/index.html

@@ -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.10"></script>
+  <script type="module" src="./dist/liquidcars-atlas.js?v=0.1.12"></script>
 </head>
 <body>
   <header>
     <h1>LiquidCars Atlas</h1>
-    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.10</p>
+    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.12</p>
   </header>
   <main>
     <liquidcars-atlas id="atlas" height="720" relation-mode="selected" shell-labels="on"></liquidcars-atlas>

package/package.json

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