@liquidcars/atlas 0.1.20 → 0.1.22

package/README.md

@@ -50,6 +50,7 @@ También se puede cargar el modelo desde JavaScript:
 const atlas = document.querySelector('liquidcars-atlas');
 atlas.model = model;
 atlas.select('distribution-agreement');
+atlas.selectRelation(0); // también acepta el id de una relación
 atlas.setRelationMode('all'); // 'all' | 'selected' | 'none'
 atlas.setToolbarVisible(true); // también se puede usar toolbar="on" | "off"
 atlas.zoomIn();
@@ -76,7 +77,11 @@ atlas.removeRelation(0);
 atlas.removeEntity('service');
 
 atlas.addEventListener('lc-select', event => {
-  console.log('Entidad seleccionada:', event.detail.id, event.detail.entity);
+  if (event.detail.kind === 'entity') {
+    console.log('Entidad seleccionada:', event.detail.id, event.detail.entity);
+  } else if (event.detail.kind === 'relation') {
+    console.log('Relación seleccionada:', event.detail.index, event.detail.relation);
+  }
 });
 atlas.addEventListener('lc-model-change', event => {
   console.log('Modelo actualizado:', event.detail.kind);
@@ -90,9 +95,11 @@ por lo que una aplicación puede adaptar la apariencia sin modificar el bundle.
 Las propiedades `atlas.theme` y `atlas.styles` son alias prácticos de esta configuración.
 
 Eventos disponibles: `lc-ready`, `lc-error`, `lc-select`, `lc-model-change`,
-`lc-relation-mode` y `lc-disconnect`. `lc-select` incluye `{ id, entity,
-source }` en `event.detail`; cuando se vuelve a la vista general emite `id:
-null`. Los eventos de selección y cambios de modelo son `bubbles` y
+`lc-relation-mode` y `lc-disconnect`. `lc-select` usa un detalle discriminado:
+las entidades incluyen `{ kind: 'entity', id, entity, source }` y las relaciones
+`{ kind: 'relation', id, index, relation, source }`. Los campos históricos `id`
+y `entity` se conservan para las selecciones de entidad. Al volver a la vista
+general, `kind`, `id`, `entity` y `relation` son `null`. Los eventos de selección y cambios de modelo son `bubbles` y
 `composed`, por lo que funcionan también al integrar el componente en otras
 capas de Web Components.
 
@@ -113,7 +120,8 @@ como `setClickBehavior()`).
   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 los dos tramos
-  aparecen en rojo, con una X y un anillo detenido en el punto de interrupción.
+  se sustituyen por un único tubo rojo con tres anillos que vibran localmente,
+  distribuidos a lo largo del recorrido.
 
 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 +149,16 @@ 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.20.tgz
+npm install ./liquidcars-atlas-0.1.22.tgz
 ```
 
 ## Estado
 
-`0.1.20` 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`; las relaciones rotas se representan con un único tubo rojo y tres anillos oscilantes distribuidos a lo largo del recorrido.
+`0.1.22` amplía la selección contextual a las relaciones. El usuario puede
+seleccionar un tubo directamente, el componente lo realza, muestra sus extremos
+y modo en el panel y emite el mismo evento `lc-select` con `kind: 'relation'`.
+La API pública añade `selectRelation()`, `selectedRelation` y `selection`, y la
+selección se conserva durante las mutaciones del modelo siempre que el elemento
+siga existiendo. Se mantienen las correcciones de geometría, toolbar, etiquetas,
+paleta externa, edición en caliente y los modos `directed`, `bidirectional` y
+`broken` introducidos en las versiones anteriores.

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.20"></script>
+  <script type="module" src="../dist/liquidcars-atlas.js?v=0.1.21"></script>
 </head>
 <body>
   <header>
     <h1>LiquidCars Atlas</h1>
-    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.20</p>
+    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.21</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.20 | MIT */
+/*! LiquidCars Atlas 0.1.22 | MIT */
 
 // src/three.core.js
 /**
@@ -29595,6 +29595,7 @@ var LiquidCarsAtlas = class extends HTMLElement {
     this.nodes = /* @__PURE__ */ new Map();
     this.open = /* @__PURE__ */ new Set();
     this.selected = null;
+    this.selectedRelationIndex = null;
     this.modelData = null;
     this.theme = normalizeTheme();
     this.relationMode = this.getAttribute("relation-mode") || "selected";
@@ -29651,6 +29652,14 @@ var LiquidCarsAtlas = class extends HTMLElement {
   get selectedId() {
     return this.selected?.id || null;
   }
+  get selectedRelation() {
+    return this._publicRelation(this.selectedRelationIndex);
+  }
+  get selection() {
+    if (this.selected) return { kind: "entity", id: this.selected.id, entity: this._publicEntity(this.selected.id) };
+    const relation = this.selectedRelation;
+    return relation ? { kind: "relation", id: relation.id || null, index: relation.index, relation } : null;
+  }
   get clickBehavior() {
     return this.selectionMode;
   }
@@ -29673,10 +29682,17 @@ var LiquidCarsAtlas = class extends HTMLElement {
       s: Array.isArray(entity.s) ? [...entity.s] : [1, 1, 1]
     } : null;
   }
+  _publicRelation(reference) {
+    const index = this._relationIndex(reference);
+    const relation = this.modelData?.relations?.[index];
+    return relation ? { ...relation, index } : null;
+  }
   _commitModelChange(kind, detail = {}, options = {}) {
     const selectedId = options.preserveSelection === false ? null : this.selected?.id;
+    const selectedRelation = options.preserveSelection === false ? null : this._publicRelation(this.selectedRelationIndex);
+    const selectedRelationReference = selectedRelation?.id ?? selectedRelation?.index ?? null;
     this.modelData = normalizeModel(this.modelData);
-    this._build({ preserveSelection: selectedId });
+    this._build({ preserveSelection: selectedId, preserveRelation: selectedRelationReference });
     this._emit("lc-model-change", {
       kind,
       model: this.modelData,
@@ -29735,8 +29751,11 @@ var LiquidCarsAtlas = class extends HTMLElement {
       }
     }
     if (!this.modelData.entities.some((item) => item.id === id)) throw new Error(`No existe una entidad con id "${id}".`);
+    const selectedRelation = this.modelData.relations[this.selectedRelationIndex];
     this.modelData.entities = this.modelData.entities.filter((item) => !removed.has(item.id));
     this.modelData.relations = this.modelData.relations.filter((relation) => !removed.has(relation.from) && !removed.has(relation.to));
+    const nextSelectedRelationIndex = selectedRelation ? this.modelData.relations.indexOf(selectedRelation) : -1;
+    this.selectedRelationIndex = nextSelectedRelationIndex >= 0 ? nextSelectedRelationIndex : null;
     for (const removedId of removed) this.open.delete(removedId);
     if (this.selected && removed.has(this.selected.id)) this.selected = null;
     return this._commitModelChange("entity-remove", { id, removed: [...removed] });
@@ -29770,6 +29789,8 @@ var LiquidCarsAtlas = class extends HTMLElement {
     const index = this._relationIndex(reference);
     if (index < 0 || index >= this.modelData.relations.length) throw new Error("No existe la relaci\xF3n indicada.");
     const [relation] = this.modelData.relations.splice(index, 1);
+    if (this.selectedRelationIndex === index) this.selectedRelationIndex = null;
+    else if (this.selectedRelationIndex > index) this.selectedRelationIndex -= 1;
     return this._commitModelChange("relation-remove", { index, relation: { ...relation } }, options);
   }
   get palette() {
@@ -29858,6 +29879,7 @@ var LiquidCarsAtlas = class extends HTMLElement {
   closeAllContainers() {
     this.open.clear();
     this.selected = null;
+    this.selectedRelationIndex = null;
     this._renderPanel();
     this._rebuildRelations();
     this.invalidate();
@@ -30027,6 +30049,7 @@ var LiquidCarsAtlas = class extends HTMLElement {
   _build(options = {}) {
     if (!this._ensureRenderer()) return;
     const selectedId = options.preserveSelection || null;
+    const selectedRelationReference = options.preserveRelation ?? null;
     this._clearObjects();
     for (const entity of this.modelData.entities) this.nodes.set(entity.id, { ...entity });
     this.open = new Set([...this.open].filter((id) => this.nodes.has(id)));
@@ -30061,8 +30084,10 @@ var LiquidCarsAtlas = class extends HTMLElement {
       node.group.add(node.label);
       this.scene.add(node.group);
     }
-    this.selected = selectedId && this.nodes.has(selectedId) ? this.nodes.get(selectedId) : null;
     this.relations = this.modelData.relations;
+    this.selected = selectedId && this.nodes.has(selectedId) ? this.nodes.get(selectedId) : null;
+    const selectedRelationIndex = this._relationIndex(selectedRelationReference);
+    this.selectedRelationIndex = !this.selected && selectedRelationIndex >= 0 && selectedRelationIndex < this.relations.length ? selectedRelationIndex : null;
     this._renderPanel();
     this._rebuildRelations();
     this.ready = true;
@@ -30097,7 +30122,9 @@ var LiquidCarsAtlas = class extends HTMLElement {
   }
   _activeRelationIndexes() {
     if (this.relationMode === "all") return this.relations.map((_, index) => index);
-    if (this.relationMode !== "selected" || !this.selected) return [];
+    if (this.relationMode !== "selected") return [];
+    if (this.selectedRelationIndex !== null) return [this.selectedRelationIndex];
+    if (!this.selected) return [];
     return this.relations.map((relation, index) => relation.from === this.selected.id || relation.to === this.selected.id ? index : -1).filter((index) => index >= 0);
   }
   _rebuildRelations() {
@@ -30114,8 +30141,14 @@ var LiquidCarsAtlas = class extends HTMLElement {
       const delta = end.clone().sub(start);
       if (delta.lengthSq() < 0.01) continue;
       const visualMode = relationVisualMode(relation);
+      const isSelected = index === this.selectedRelationIndex;
+      const pickTube = new Mesh(new TubeGeometry(new LineCurve3(start, end), 10, 0.16, 6, false), new MeshBasicMaterial({ transparent: true, opacity: 0, depthWrite: false }));
+      pickTube.userData.relationIndex = index;
+      pickTube.userData.relationPick = true;
+      this.relationGroup.add(pickTube);
       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 }));
+        const displayColor = isSelected ? tubeColor.clone().lerp(new Color(16777215), 0.28) : tubeColor;
+        const tube = new Mesh(new TubeGeometry(new LineCurve3(from2, to2), 10, isSelected ? tubeRadius * 1.45 : tubeRadius, 6, false), new MeshBasicMaterial({ color: displayColor, transparent: true, opacity: isSelected ? 1 : opacity }));
         tube.userData.relationIndex = index;
         this.relationGroup.add(tube);
       };
@@ -30125,11 +30158,15 @@ var LiquidCarsAtlas = class extends HTMLElement {
         // A broken communication remains a continuous red tube.  Its rings
         // oscillate locally around their positions instead of travelling
         // along the connection, conveying a failed/retrying signal.
-        makeTube(start, end, 0.88, brokenColor, 0.055);
+        const displayBrokenColor = isSelected ? brokenColor.clone().lerp(new Color(16777215), 0.22) : brokenColor;
+        const brokenTube = new Mesh(new TubeGeometry(new LineCurve3(start, end), 10, isSelected ? 0.08 : 0.055, 6, false), new MeshBasicMaterial({ color: displayBrokenColor, transparent: true, opacity: isSelected ? 1 : 0.88 }));
+        brokenTube.userData.relationIndex = index;
+        this.relationGroup.add(brokenTube);
         const amplitude = Math.min(0.18, Math.max(0.07, delta.length() * 0.018));
         for (let ringIndex = 0; ringIndex < 3; ringIndex++) {
           const position = start.clone().lerp(end, (ringIndex + 1) / 4);
-          const ring = new Mesh(new TorusGeometry(0.085, 0.024, 8, 20), new MeshBasicMaterial({ color: brokenColor, transparent: true, opacity: 1 }));
+          const ring = new Mesh(new TorusGeometry(isSelected ? 0.105 : 0.085, isSelected ? 0.03 : 0.024, 8, 20), new MeshBasicMaterial({ color: displayBrokenColor, transparent: true, opacity: 1 }));
+          ring.userData.relationIndex = index;
           ring.userData.phase = ringIndex / 3;
           ring.userData.oscillate = true;
           ring.userData.start = position.clone().addScaledVector(direction, -amplitude);
@@ -30141,7 +30178,9 @@ var LiquidCarsAtlas = class extends HTMLElement {
       }
       makeTube(start, end);
       for (let ringIndex = 0; ringIndex < 4; ringIndex++) {
-        const ring = new Mesh(new TorusGeometry(0.068, 0.018, 8, 20), new MeshBasicMaterial({ color, transparent: true, opacity: 0.9 }));
+        const displayColor = isSelected ? color.clone().lerp(new Color(16777215), 0.28) : color;
+        const ring = new Mesh(new TorusGeometry(isSelected ? 0.088 : 0.068, isSelected ? 0.024 : 0.018, 8, 20), new MeshBasicMaterial({ color: displayColor, transparent: true, opacity: isSelected ? 1 : 0.9 }));
+        ring.userData.relationIndex = index;
         ring.userData.phase = ringIndex / 4;
         ring.userData.direction = visualMode === "bidirectional" && ringIndex % 2 ? -1 : 1;
         ring.userData.start = start.clone();
@@ -30154,6 +30193,16 @@ var LiquidCarsAtlas = class extends HTMLElement {
   _renderPanel() {
     if (!this.modelData) return;
     const node = this.selected;
+    const selectedRelation = this._publicRelation(this.selectedRelationIndex);
+    if (selectedRelation) {
+      const mode = relationVisualMode(selectedRelation);
+      const title = selectedRelation.label || `${selectedRelation.from} \u2192 ${selectedRelation.to}`;
+      this.panel.innerHTML = '<button class="back" data-action="overview">\u2190 Vista de conjunto</button><div class="eyebrow">RELACI\xD3N</div><h2>' + escapeHtml(title) + '</h2><div class="sub">' + escapeHtml(mode) + '</div><h3>ORIGEN</h3><button data-action="relation-endpoint" data-id="' + escapeHtml(selectedRelation.from) + '">' + escapeHtml(selectedRelation.from) + '</button><h3>DESTINO</h3><button data-action="relation-endpoint" data-id="' + escapeHtml(selectedRelation.to) + '">' + escapeHtml(selectedRelation.to) + '</button>';
+      this.panel.querySelector('[data-action="overview"]')?.addEventListener("click", () => this.reset());
+      this.panel.querySelectorAll('[data-action="relation-endpoint"]').forEach((button) => button.addEventListener("click", () => this.select(button.dataset.id)));
+      this._applyTheme();
+      return;
+    }
     if (!node) {
       this.panel.innerHTML = '<div class="eyebrow">LIQUIDCARS ATLAS</div><h2>Explora el modelo.</h2><p>Selecciona un volumen para consultar su funci\xF3n y sus relaciones.</p><p class="note">El componente acepta un objeto JSON con palette, entities y relations.</p>';
       this._applyTheme();
@@ -30203,13 +30252,38 @@ var LiquidCarsAtlas = class extends HTMLElement {
       parent = parent.parent ? this.nodes.get(parent.parent) : null;
     }
     this.selected = node;
+    this.selectedRelationIndex = null;
     if (node.type === "shell") this.open.add(node.id);
     this.targetFocus.copy(this._worldPosition(node));
     this.targetZoom = node.parent ? 1.35 : 1.1;
     this._renderPanel();
     this._rebuildRelations();
     this.invalidate();
-    this._emit("lc-select", { id, entity: this._publicEntity(id), source: options.source || "api" });
+    if (options.emit !== false) this._emit("lc-select", { kind: "entity", id, index: null, entity: this._publicEntity(id), relation: null, source: options.source || "api" });
+    return this;
+  }
+  selectRelation(reference, options = {}) {
+    const index = this._relationIndex(reference);
+    const relation = this._publicRelation(index);
+    if (!relation) return;
+    for (const endpoint of [relation.from, relation.to]) {
+      let node = this.nodes.get(endpoint);
+      while (node?.parent) {
+        this.open.add(node.parent);
+        node = this.nodes.get(node.parent);
+      }
+    }
+    this.selected = null;
+    this.selectedRelationIndex = index;
+    const from = this.nodes.get(relation.from);
+    const to = this.nodes.get(relation.to);
+    if (from && to) this.targetFocus.copy(this._worldPosition(from).add(this._worldPosition(to)).multiplyScalar(0.5));
+    this.targetZoom = 1.22;
+    this._renderPanel();
+    this._rebuildRelations();
+    this.invalidate();
+    if (options.emit !== false) this._emit("lc-select", { kind: "relation", id: relation.id || null, index, entity: null, relation, source: options.source || "api" });
+    return this;
   }
   setRelationMode(mode) {
     this.relationMode = ["all", "selected", "none"].includes(mode) ? mode : "selected";
@@ -30228,7 +30302,9 @@ var LiquidCarsAtlas = class extends HTMLElement {
   }
   reset() {
     const previousId = this.selected?.id || null;
+    const previousRelation = this._publicRelation(this.selectedRelationIndex);
     this.selected = null;
+    this.selectedRelationIndex = null;
     this.open.clear();
     this.relationMode = "selected";
     this.setAttribute("relation-mode", "selected");
@@ -30250,7 +30326,8 @@ var LiquidCarsAtlas = class extends HTMLElement {
     this._renderPanel();
     this._rebuildRelations();
     this.invalidate();
-    if (previousId) this._emit("lc-select", { id: null, entity: null, previousId, source: "reset" });
+    if (previousId || previousRelation) this._emit("lc-select", { kind: null, id: null, index: null, entity: null, relation: null, previousId, previousRelation, source: "reset" });
+    return this;
   }
   resize() {
     if (!this.renderer) return;
@@ -30366,7 +30443,12 @@ var LiquidCarsAtlas = class extends HTMLElement {
       if (!(node.type === "shell" && this.open.has(node.id))) meshes.push(node.mesh);
       if (node.label?.visible) meshes.push(...node.label.children.filter((face) => face.visible));
     }
-    return this.raycaster.intersectObjects(meshes, false)[0]?.object.userData.node || null;
+    const nodeHit = this.raycaster.intersectObjects(meshes, false)[0] || null;
+    const relationTargets = this.relationGroup.children.filter((object) => object.userData.relationPick);
+    const relationHit = this.raycaster.intersectObjects(relationTargets, false)[0] || null;
+    if (nodeHit && (!relationHit || nodeHit.distance <= relationHit.distance + 0.12)) return { kind: "entity", node: nodeHit.object.userData.node };
+    if (relationHit) return { kind: "relation", index: relationHit.object.userData.relationIndex };
+    return nodeHit ? { kind: "entity", node: nodeHit.object.userData.node } : null;
   }
   _bindControls() {
     this.shadowRoot.addEventListener("click", (event) => {
@@ -30403,11 +30485,17 @@ var LiquidCarsAtlas = class extends HTMLElement {
       this.drag = null;
       this.canvas.style.cursor = "grab";
       if (drag && !drag.moved) {
-        const node = this._pick(event);
-        if (node) {
-          if (this.selectionMode === "event") this._emit("lc-select", { id: node.id, entity: this._publicEntity(node.id), source: "pointer" });
+        const picked = this._pick(event);
+        if (picked?.kind === "entity") {
+          const node = picked.node;
+          if (this.selectionMode === "event") this._emit("lc-select", { kind: "entity", id: node.id, index: null, entity: this._publicEntity(node.id), relation: null, source: "pointer" });
           else this.select(node.id, { source: "pointer" });
         }
+        if (picked?.kind === "relation") {
+          const relation = this._publicRelation(picked.index);
+          if (this.selectionMode === "event") this._emit("lc-select", { kind: "relation", id: relation?.id || null, index: picked.index, entity: null, relation, source: "pointer" });
+          else this.selectRelation(picked.index, { source: "pointer" });
+        }
       }
       this.invalidate();
     });

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