@liquidcars/atlas 0.1.24 → 0.1.26

package/README.md

@@ -180,9 +180,11 @@ El modelo configura cada instancia sin conocer la implementación del paquete:
 Cada definición puede declarar parámetros tipados, una paleta local,
 proporciones canónicas y anchors. Las piezas declarativas admiten primitivas,
 posición, rotación, escala, materiales, iconos de texto o emoji e imágenes por
-URL/data URI. El renderer mantiene Three.js encapsulado para evitar que los
-packs dependan de su versión interna. Las relaciones pueden seleccionar anchors
-con `fromAnchor` y `toAnchor`.
+URL/data URI. Para planos con imagen, `imageFit` admite `cover`, `contain` y
+`stretch`. El renderer mantiene Three.js encapsulado para evitar que los packs
+dependan de su versión interna. Las relaciones parten del centro por defecto;
+`fromAnchor` y `toAnchor` quedan como overrides explícitos para casos
+excepcionales.
 
 Si un namespace no está registrado, Atlas conserva el modelo renderizable con
 una caja roja de fallback y emite `lc-warning` con el código
@@ -200,6 +202,13 @@ gestionan relaciones. Cada operación reconstruye la geometría necesaria,
 conserva la cámara y la selección cuando sigue siendo válida, y emite
 `lc-model-change` con el tipo de operación y el modelo resultante.
 
+`getRenderStats()` devuelve una instantánea de entidades, relaciones, objetos
+animados, draw calls y contadores de geometrías, texturas y programas del
+renderer. Resulta útil para comprobar que una secuencia repetida de mutaciones
+vuelve a una línea base estable. Al reconstruir o desconectar el componente se
+liberan geometrías, materiales, texturas, cargas de imagen pendientes y el
+contexto WebGL.
+
 ## 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:
@@ -213,12 +222,16 @@ 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.24.tgz
+npm install ./liquidcars-atlas-0.1.26.tgz
 ```
 
 ## Estado
 
-`0.1.24` incorpora geometry packs independientes, namespaces, parámetros
+`0.1.26` mantiene el centro como anclaje implícito de toda relación y utiliza
+los puertos de geometrías externas únicamente cuando el modelo los solicita.
+También evita recorrer los materiales de geometrías compuestas en cada frame,
+refuerza la liberación de recursos y expone `getRenderStats()`.
+`0.1.24` incorporó geometry packs independientes, namespaces, parámetros
 personalizados, paletas locales, anchors e imágenes/iconos declarativos. La
 versión `0.1.23` añadió desplazamiento lateral de cámara mediante ratón, teclado
 modificador y gestos táctiles, además de la API pública `panBy()` y `panTo()`.

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.24"></script>
+  <script type="module" src="../dist/liquidcars-atlas.js?v=0.1.26"></script>
 </head>
 <body>
   <header>
     <h1>LiquidCars Atlas</h1>
-    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.24</p>
+    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.26</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.24 | MIT */
+/*! LiquidCars Atlas 0.1.26 | MIT */
 
 // src/three.core.js
 /**
@@ -29642,17 +29642,52 @@ function createGeometryContent(definition, entity, modelPalette, invalidate) {
       opacity: Number.isFinite(Number(part.opacity)) ? Number(part.opacity) : 1,
       side: part.doubleSided ? DoubleSide : FrontSide
     });
+    let mesh;
     const icon = part.icon;
     const image = part.image;
     if (typeof image === "string" && image) {
       const bitmap = new Image();
       bitmap.crossOrigin = "anonymous";
       material.map = new Texture(bitmap);
-      bitmap.addEventListener("load", () => {
+      let cancelled = false;
+      const removeListeners = () => {
+        bitmap.removeEventListener("load", onLoad);
+        bitmap.removeEventListener("error", onError);
+      };
+      const onLoad = () => {
+        removeListeners();
+        if (cancelled || !material.map) return;
+        const fit = part.imageFit || part.fit || "stretch";
+        const imageAspect = bitmap.naturalWidth / Math.max(1, bitmap.naturalHeight);
+        const baseWidth = Math.abs(Number(part.size?.[0])) || 1;
+        const baseHeight = Math.abs(Number(part.size?.[1])) || 1;
+        const faceAspect = baseWidth / baseHeight;
+        if (fit === "cover") {
+          if (imageAspect > faceAspect) {
+            material.map.repeat.set(faceAspect / imageAspect, 1);
+            material.map.offset.set((1 - material.map.repeat.x) / 2, 0);
+          } else {
+            material.map.repeat.set(1, imageAspect / faceAspect);
+            material.map.offset.set(0, (1 - material.map.repeat.y) / 2);
+          }
+        } else if (fit === "contain" && mesh) {
+          if (imageAspect > faceAspect) mesh.scale.y = baseWidth / imageAspect;
+          else mesh.scale.x = baseHeight * imageAspect;
+        }
         material.map.needsUpdate = true;
         invalidate?.();
-      });
-      bitmap.addEventListener("error", () => invalidate?.());
+      };
+      const onError = () => {
+        removeListeners();
+        if (!cancelled) invalidate?.();
+      };
+      material.userData.atlasImageCleanup = () => {
+        cancelled = true;
+        removeListeners();
+        bitmap.src = "";
+      };
+      bitmap.addEventListener("load", onLoad);
+      bitmap.addEventListener("error", onError);
       bitmap.src = image;
       material.map.colorSpace = SRGBColorSpace;
       material.needsUpdate = true;
@@ -29661,7 +29696,7 @@ function createGeometryContent(definition, entity, modelPalette, invalidate) {
       material.transparent = true;
       material.needsUpdate = true;
     }
-    const mesh = new Mesh(geometry, material);
+    mesh = new Mesh(geometry, material);
     mesh.position.fromArray(Array.isArray(part.position) ? part.position : [0, 0, 0]);
     mesh.scale.fromArray(Array.isArray(part.size) ? part.size : [1, 1, 1]);
     if (Array.isArray(part.rotation)) mesh.rotation.set(...part.rotation.map(Number));
@@ -29820,6 +29855,7 @@ var LiquidCarsAtlas = class extends HTMLElement {
   }
   connectedCallback() {
     globalThis.addEventListener?.("lc-geometry-registry-change", this._geometryRegistryListener);
+    this.resizeObserver.observe(this.canvas);
     if (this.hasAttribute("height")) this.style.setProperty("--lc-height", this.getAttribute("height"));
     this._loadInitial();
   }
@@ -29827,7 +29863,13 @@ var LiquidCarsAtlas = class extends HTMLElement {
     globalThis.removeEventListener?.("lc-geometry-registry-change", this._geometryRegistryListener);
     this.resizeObserver.disconnect();
     if (this.animationFrame) cancelAnimationFrame(this.animationFrame);
-    if (this.renderer) this.renderer.dispose();
+    this._clearObjects();
+    if (this.renderer) {
+      this.renderer.dispose();
+      this.renderer.forceContextLoss?.();
+      this.renderer = null;
+    }
+    this.ready = false;
     this.dispatchEvent(new CustomEvent("lc-disconnect"));
   }
   attributeChangedCallback(name, previous, value) {
@@ -29861,6 +29903,28 @@ var LiquidCarsAtlas = class extends HTMLElement {
     const relation = this.selectedRelation;
     return relation ? { kind: "relation", id: relation.id || null, index: relation.index, relation } : null;
   }
+  getRenderStats() {
+    const info = this.renderer?.info;
+    return {
+      ready: this.ready,
+      nodes: this.nodes.size,
+      relations: this.relations.length,
+      relationObjects: this.relationGroup.children.length,
+      animatedRelationObjects: this.relationGroup.children.filter((object) => object.userData?.start).length,
+      memory: {
+        geometries: info?.memory?.geometries || 0,
+        textures: info?.memory?.textures || 0,
+        programs: info?.programs?.length || 0
+      },
+      render: {
+        frame: info?.render?.frame || 0,
+        calls: info?.render?.calls || 0,
+        triangles: info?.render?.triangles || 0,
+        lines: info?.render?.lines || 0,
+        points: info?.render?.points || 0
+      }
+    };
+  }
   get clickBehavior() {
     return this.selectionMode;
   }
@@ -30240,17 +30304,26 @@ var LiquidCarsAtlas = class extends HTMLElement {
     return parent ? this._worldPosition(parent, trail).add(position) : position;
   }
   _clearObjects() {
+    const geometries = /* @__PURE__ */ new Set();
+    const materials = /* @__PURE__ */ new Set();
+    const textures2 = /* @__PURE__ */ new Set();
     for (const node of this.nodes.values()) {
       node.group?.traverse((object) => {
         if (!object.isMesh && !object.isSprite && !object.isLineSegments) return;
-        object.geometry?.dispose();
-        if (Array.isArray(object.material)) object.material.forEach((material) => {
-          material.map?.dispose();
+        if (object.geometry && !geometries.has(object.geometry)) {
+          geometries.add(object.geometry);
+          object.geometry.dispose();
+        }
+        const objectMaterials = Array.isArray(object.material) ? object.material : [object.material];
+        for (const material of objectMaterials.filter(Boolean)) {
+          if (materials.has(material)) continue;
+          materials.add(material);
+          material.userData?.atlasImageCleanup?.();
+          if (material.map && !textures2.has(material.map)) {
+            textures2.add(material.map);
+            material.map.dispose();
+          }
           material.dispose();
-        });
-        else {
-          object.material?.map?.dispose();
-          object.material?.dispose();
         }
       });
       this.scene.remove(node.group);
@@ -30305,8 +30378,12 @@ var LiquidCarsAtlas = class extends HTMLElement {
         try {
           const content = createGeometryContent(definition, entity, this.modelData.palette, () => this.invalidate());
           content.root.scale.multiply(new Vector3().fromArray(entity.s));
+          node.appearanceMaterials = [];
           content.root.traverse((object) => {
-            if (object.isMesh) object.userData.node = node;
+            if (!object.isMesh) return;
+            object.userData.node = node;
+            const materials = Array.isArray(object.material) ? object.material : [object.material];
+            node.appearanceMaterials.push(...materials.filter(Boolean));
           });
           node.mesh = content.root;
           node.colorBindings = content.colorBindings;
@@ -30370,7 +30447,10 @@ var LiquidCarsAtlas = class extends HTMLElement {
     const center = this._worldPosition(node);
     const mode = node.anchor || "center";
     const requestedAnchor = relation?.[isSource ? "fromAnchor" : "toAnchor"] || relation?.[isSource ? "from_anchor" : "to_anchor"];
-    if (mode === "port" || requestedAnchor || node.geometryDefinition?.anchors) {
+    // Geometry packs may advertise available ports, but their mere presence
+    // must not alter the model. The centre remains the default endpoint;
+    // ports are used only when the entity or relation explicitly requests one.
+    if (mode === "port" || requestedAnchor) {
       const ports = node.ports || {};
       const port = ports[requestedAnchor] || ports[isSource ? "output" : "input"] || ports.default;
       if (Array.isArray(port) && port.length >= 3) {
@@ -30631,12 +30711,12 @@ var LiquidCarsAtlas = class extends HTMLElement {
         node.material.depthWrite = !transparent;
         node.material.emissive?.set(node === this.selected ? node.material.color : 0);
         node.material.emissiveIntensity = node === this.selected ? 0.15 : 0;
-      } else {
-        node.mesh.traverse((object) => {
-          if (!object.isMesh || !object.material) return;
-          object.material.emissive?.set(node === this.selected ? object.material.color : 0);
-          object.material.emissiveIntensity = node === this.selected ? 0.15 : 0;
-        });
+      } else if (node._appearanceSelected !== (node === this.selected)) {
+        for (const material of node.appearanceMaterials || []) {
+          material.emissive?.set(node === this.selected ? material.color : 0);
+          material.emissiveIntensity = node === this.selected ? 0.15 : 0;
+        }
+        node._appearanceSelected = node === this.selected;
       }
       if (node.edge?.material) node.edge.material.opacity = node === this.selected ? 1 : 0.65;
       const opened = node.type === "shell" && this.open.has(node.id);

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.24"></script>
+  <script type="module" src="./dist/liquidcars-atlas.js?v=0.1.26"></script>
 </head>
 <body>
   <header>
     <h1>LiquidCars Atlas</h1>
-    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.24</p>
+    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.26</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.24",
+  "version": "0.1.26",
   "description": "Reusable 3D conceptual atlas Web Component for LiquidCars-style models",
   "type": "module",
   "main": "./dist/liquidcars-atlas.js",