@liquidcars/atlas 0.1.26 → 0.1.27

package/README.md

@@ -180,8 +180,8 @@ 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. Para planos con imagen, `imageFit` admite `cover`, `contain` y
-`stretch`. El renderer mantiene Three.js encapsulado para evitar que los packs
+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.
@@ -222,12 +222,14 @@ 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.26.tgz
+npm install ./liquidcars-atlas-0.1.27.tgz
 ```
 
 ## Estado
 
-`0.1.26` 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,
 refuerza la liberación de recursos y expone `getRenderStats()`.

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.26"></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.26</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.26 | MIT */
+/*! LiquidCars Atlas 0.1.27 | MIT */
 
 // src/three.core.js
 /**
@@ -29650,12 +29650,20 @@ function createGeometryContent(definition, entity, modelPalette, invalidate) {
       bitmap.crossOrigin = "anonymous";
       material.map = new Texture(bitmap);
       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);
@@ -29679,16 +29687,45 @@ function createGeometryContent(definition, entity, modelPalette, invalidate) {
       };
       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);
-      bitmap.src = image;
+      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 !== "") {

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.26"></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.26</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.26",
+  "version": "0.1.27",
   "description": "Reusable 3D conceptual atlas Web Component for LiquidCars-style models",
   "type": "module",
   "main": "./dist/liquidcars-atlas.js",