@liquidcars/atlas 0.1.25 → 0.1.27

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; los SVG también pueden proporcionarse inline. 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,14 +222,17 @@ 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.25.tgz
+npm install ./liquidcars-atlas-0.1.27.tgz
 ```
 
 ## Estado
 
-`0.1.25` mantiene el centro como anclaje implícito de toda relación y utiliza
+`0.1.27` añade carga automática de imágenes SVG remotas, SVG mediante data URI
+y SVG inline, manteniendo las mismas opciones de cara y ajuste que las imágenes
+raster. `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.
+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

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.25"></script>
+  <script type="module" src="../dist/liquidcars-atlas.js?v=0.1.27"></script>
 </head>
 <body>
   <header>
     <h1>LiquidCars Atlas</h1>
-    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.25</p>
+    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.27</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.25 | MIT */
+/*! LiquidCars Atlas 0.1.27 | MIT */
 
 // src/three.core.js
 /**
@@ -29642,18 +29642,90 @@ 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;
+      let objectUrl = null;
+      const abortController = new AbortController();
+      const releaseObjectUrl = () => {
+        if (!objectUrl) return;
+        URL.revokeObjectURL(objectUrl);
+        objectUrl = null;
+      };
+      const removeListeners = () => {
+        bitmap.removeEventListener("load", onLoad);
+        bitmap.removeEventListener("error", onError);
+      };
+      const onLoad = () => {
+        removeListeners();
+        releaseObjectUrl();
+        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?.());
-      bitmap.src = image;
+      };
+      const onError = () => {
+        removeListeners();
+        releaseObjectUrl();
+        if (!cancelled) invalidate?.();
+      };
+      material.userData.atlasImageCleanup = () => {
+        cancelled = true;
+        abortController.abort();
+        removeListeners();
+        releaseObjectUrl();
+        bitmap.src = "";
+      };
+      bitmap.addEventListener("load", onLoad);
+      bitmap.addEventListener("error", onError);
+      const assignImageSource = async () => {
+        const inlineSvg = /^\s*<svg(?:\s|>)/i.test(image);
+        if (inlineSvg) {
+          objectUrl = URL.createObjectURL(new Blob([image], { type: "image/svg+xml" }));
+          bitmap.src = objectUrl;
+          return;
+        }
+        if (/^(?:data|blob):/i.test(image)) {
+          bitmap.src = image;
+          return;
+        }
+        try {
+          const response = await fetch(image, { mode: "cors", signal: abortController.signal });
+          if (!response.ok) throw new Error(`Image request failed with ${response.status}`);
+          let blob = await response.blob();
+          const contentType = response.headers.get("content-type") || blob.type;
+          const looksLikeSvg = /image\/svg\+xml/i.test(contentType) || /\.svg(?:[?#]|$)/i.test(image);
+          if (looksLikeSvg && blob.type !== "image/svg+xml") blob = new Blob([await blob.text()], { type: "image/svg+xml" });
+          if (cancelled) return;
+          objectUrl = URL.createObjectURL(blob);
+          bitmap.src = objectUrl;
+        } catch (error) {
+          if (cancelled || error?.name === "AbortError") return;
+          bitmap.src = image;
+        }
+      };
+      assignImageSource();
       material.map.colorSpace = SRGBColorSpace;
       material.needsUpdate = true;
     } else if (icon != null && icon !== "") {
@@ -29661,7 +29733,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 +29892,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 +29900,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 +29940,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 +30341,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);

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