@liquidcars/atlas 0.1.26 → 0.1.28

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,15 @@ 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.28.tgz
 ```
 
 ## Estado
 
-`0.1.26` mantiene el centro como anclaje implícito de toda relación y utiliza
+`0.1.28` rasteriza explícitamente los SVG sobre un canvas antes de subirlos a
+WebGL y emite diagnósticos cuando falla la carga o la conversión. `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.28"></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.28</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.28 | MIT */
 
 // src/three.core.js
 /**
@@ -29615,7 +29615,7 @@ function partGeometry(part) {
   if (part.shape === "plane") return new PlaneGeometry(1, 1);
   return makeGeometry(part.shape || part.geometry || "box", part.radius, part.segments, part.size);
 }
-function createGeometryContent(definition, entity, modelPalette, invalidate) {
+function createGeometryContent(definition, entity, modelPalette, invalidate, reportWarning) {
   const parameters = resolveGeometryParameters(entity, definition);
   const localPalette = {
     ...modelPalette,
@@ -29650,13 +29650,41 @@ function createGeometryContent(definition, entity, modelPalette, invalidate) {
       bitmap.crossOrigin = "anonymous";
       material.map = new Texture(bitmap);
       let cancelled = false;
+      let objectUrl = null;
+      let svgSource = /^\s*<svg(?:\s|>)/i.test(image) || /^data:image\/svg\+xml/i.test(image) || /\.svg(?:[?#]|$)/i.test(image);
+      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();
-        if (cancelled || !material.map) return;
+        if (cancelled || !material.map) {
+          releaseObjectUrl();
+          return;
+        }
+        if (svgSource) {
+          try {
+            const aspect = (bitmap.naturalWidth || 1) / Math.max(1, bitmap.naturalHeight || 1);
+            const longestSide = 1024;
+            const canvas = document.createElement("canvas");
+            canvas.width = aspect >= 1 ? longestSide : Math.max(1, Math.round(longestSide * aspect));
+            canvas.height = aspect >= 1 ? Math.max(1, Math.round(longestSide / aspect)) : longestSide;
+            const context = canvas.getContext("2d");
+            if (!context) throw new Error("Canvas 2D is unavailable");
+            context.clearRect(0, 0, canvas.width, canvas.height);
+            context.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+            material.map.image = canvas;
+          } catch (error) {
+            reportWarning?.({ code: "SVG_RASTERIZE_FAILED", geometry: definition.id, entityId: entity.id, image, error });
+          }
+        }
+        releaseObjectUrl();
         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;
@@ -29679,16 +29707,49 @@ function createGeometryContent(definition, entity, modelPalette, invalidate) {
       };
       const onError = () => {
         removeListeners();
-        if (!cancelled) invalidate?.();
+        releaseObjectUrl();
+        if (!cancelled) {
+          reportWarning?.({ code: "IMAGE_LOAD_FAILED", geometry: definition.id, entityId: entity.id, image });
+          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);
+          svgSource = svgSource || looksLikeSvg;
+          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 !== "") {
@@ -30376,7 +30437,7 @@ var LiquidCarsAtlas = class extends HTMLElement {
       node.ports = { ...definition?.anchors || {}, ...entity.ports || {} };
       if (isCustom) {
         try {
-          const content = createGeometryContent(definition, entity, this.modelData.palette, () => this.invalidate());
+          const content = createGeometryContent(definition, entity, this.modelData.palette, () => this.invalidate(), (detail) => this.dispatchEvent(new CustomEvent("lc-warning", { detail })));
           content.root.scale.multiply(new Vector3().fromArray(entity.s));
           node.appearanceMaterials = [];
           content.root.traverse((object) => {

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