@liquidcars/atlas 0.1.17 → 0.1.18

package/README.md

@@ -112,8 +112,8 @@ como `setClickBehavior()`).
 - `relations` acepta objetos `{from, to, label}` o la forma corta `[from, to, label]`.
   El campo visual opcional `mode` admite `directed` (por defecto),
   `bidirectional` y `broken`. En modo bidireccional los indicadores animados
-  circulan en ambos sentidos por el mismo tubo; en modo broken el tubo aparece
-  interrumpido en su punto medio.
+  circulan en ambos sentidos por el mismo tubo; en modo broken los dos tramos
+  aparecen en rojo, con una X y un anillo detenido en el punto de interrupción.
 
 Geometrías incluidas en esta primera versión: `box`, `cylinder`, `sphere`, `cone`, `frustum-cone`, `frustum-pyramid`, `frustum-triangle`, `prism`, `pyramid-square`, `pyramid-triangle`, `octahedron`, `dodecahedron` e `icosahedron`. Las variantes `frustum-*` son sólidos truncados con dos caras finitas paralelas; las dimensiones `s` se aplican sobre su caja final normalizada.
 
@@ -141,9 +141,9 @@ 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.17.tgz
+npm install ./liquidcars-atlas-0.1.18.tgz
 ```
 
 ## Estado
 
-`0.1.17` mantiene la corrección del desplazamiento interno del texto y ancla las etiquetas a las dimensiones reales de las geometrías redondeadas. Además fija un margen superior absoluto para las etiquetas secundarias de contenedores abiertos, situado dentro del frontal del contenedor y sin depender de sus dimensiones. También corrige los sólidos truncados, normaliza sus dimensiones finales, refuerza la visibilidad de la toolbar con el atributo `toolbar="on"`/`"off"` y `setToolbarVisible()`, desacopla la paleta por defecto de nombres de dominio, añade actualización programática de la paleta con `setPalette`, expone las acciones de navegación para controles externos y mantiene siempre visibles las ayudas de interacción dentro del viewport. Esta versión añade edición en caliente de entidades y relaciones, eventos compuestos de selección y los modos de relación `directed`, `bidirectional` y `broken`.
+`0.1.18` mantiene la corrección del desplazamiento interno del texto y ancla las etiquetas a las dimensiones reales de las geometrías redondeadas. Además fija un margen superior absoluto para las etiquetas secundarias de contenedores abiertos, situado dentro del frontal del contenedor y sin depender de sus dimensiones. También corrige los sólidos truncados, normaliza sus dimensiones finales, refuerza la visibilidad de la toolbar con el atributo `toolbar="on"`/`"off"` y `setToolbarVisible()`, desacopla la paleta por defecto de nombres de dominio, añade actualización programática de la paleta con `setPalette`, expone las acciones de navegación para controles externos y mantiene siempre visibles las ayudas de interacción dentro del viewport. Esta versión añade edición en caliente de entidades y relaciones, eventos compuestos de selección y los modos de relación `directed`, `bidirectional` y `broken`.

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.17"></script>
+  <script type="module" src="../dist/liquidcars-atlas.js?v=0.1.18"></script>
 </head>
 <body>
   <header>
     <h1>LiquidCars Atlas</h1>
-    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.17</p>
+    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.18</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.17 | MIT */
+/*! LiquidCars Atlas 0.1.18 | MIT */
 
 // src/three.core.js
 /**
@@ -30114,17 +30114,32 @@ var LiquidCarsAtlas = class extends HTMLElement {
       const delta = end.clone().sub(start);
       if (delta.lengthSq() < 0.01) continue;
       const visualMode = relationVisualMode(relation);
-      const makeTube = (from2, to2, opacity = 0.82) => {
-        const tube = new Mesh(new TubeGeometry(new LineCurve3(from2, to2), 10, 0.045, 6, false), new MeshBasicMaterial({ color, transparent: true, opacity }));
+      const makeTube = (from2, to2, opacity = 0.82, tubeColor = color, tubeRadius = 0.045) => {
+        const tube = new Mesh(new TubeGeometry(new LineCurve3(from2, to2), 10, tubeRadius, 6, false), new MeshBasicMaterial({ color: tubeColor, transparent: true, opacity }));
         tube.userData.relationIndex = index;
         this.relationGroup.add(tube);
       };
       if (visualMode === "broken") {
+        const brokenColor = new Color(0xe45b63);
         const direction = delta.clone().normalize();
         const midpoint = start.clone().lerp(end, 0.5);
         const gap = Math.min(delta.length() * 0.16, 0.72);
-        makeTube(start, midpoint.clone().sub(direction.clone().multiplyScalar(gap / 2)), 0.55);
-        makeTube(midpoint.clone().add(direction.clone().multiplyScalar(gap / 2)), end, 0.55);
+        makeTube(start, midpoint.clone().sub(direction.clone().multiplyScalar(gap / 2)), 0.86, brokenColor, 0.055);
+        makeTube(midpoint.clone().add(direction.clone().multiplyScalar(gap / 2)), end, 0.86, brokenColor, 0.055);
+        // Mark the interruption with a red X in a plane perpendicular to
+        // the communication line.  The two arms are fixed at the midpoint,
+        // making the broken state visible from every camera angle.
+        const reference = Math.abs(direction.y) < 0.9 ? new Vector3(0, 1, 0) : new Vector3(1, 0, 0);
+        const axisA = new Vector3().crossVectors(direction, reference).normalize();
+        const axisB = new Vector3().crossVectors(direction, axisA).normalize();
+        const arm = Math.min(0.52, Math.max(0.28, delta.length() * 0.07));
+        makeTube(midpoint.clone().addScaledVector(axisA, -arm), midpoint.clone().addScaledVector(axisA, arm), 1, brokenColor, 0.065);
+        makeTube(midpoint.clone().addScaledVector(axisB, -arm), midpoint.clone().addScaledVector(axisB, arm), 1, brokenColor, 0.065);
+        const stoppedRing = new Mesh(new TorusGeometry(0.09, 0.025, 8, 20), new MeshBasicMaterial({ color: brokenColor, transparent: true, opacity: 1 }));
+        stoppedRing.userData.start = midpoint.clone();
+        stoppedRing.userData.end = midpoint.clone();
+        stoppedRing.quaternion.setFromUnitVectors(new Vector3(0, 0, 1), direction);
+        this.relationGroup.add(stoppedRing);
         continue;
       }
       makeTube(start, end);

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