@liquidcars/atlas 0.1.27 → 0.1.28

package/README.md

@@ -222,12 +222,13 @@ 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.27.tgz
+npm install ./liquidcars-atlas-0.1.28.tgz
 ```
 
 ## Estado
 
-`0.1.27` añade carga automática de imágenes SVG remotas, SVG mediante data URI
+`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.

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.27"></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.27</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.27 | 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,
@@ -29651,6 +29651,7 @@ function createGeometryContent(definition, entity, modelPalette, invalidate) {
       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;
@@ -29663,8 +29664,27 @@ function createGeometryContent(definition, entity, modelPalette, invalidate) {
       };
       const onLoad = () => {
         removeListeners();
+        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();
-        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;
@@ -29688,7 +29708,10 @@ function createGeometryContent(definition, entity, modelPalette, invalidate) {
       const onError = () => {
         removeListeners();
         releaseObjectUrl();
-        if (!cancelled) invalidate?.();
+        if (!cancelled) {
+          reportWarning?.({ code: "IMAGE_LOAD_FAILED", geometry: definition.id, entityId: entity.id, image });
+          invalidate?.();
+        }
       };
       material.userData.atlasImageCleanup = () => {
         cancelled = true;
@@ -29716,6 +29739,7 @@ function createGeometryContent(definition, entity, modelPalette, invalidate) {
           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);
@@ -30413,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.27"></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.27</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.27",
+  "version": "0.1.28",
   "description": "Reusable 3D conceptual atlas Web Component for LiquidCars-style models",
   "type": "module",
   "main": "./dist/liquidcars-atlas.js",