@liquidcars/atlas 0.1.21 → 0.1.23

package/README.md

@@ -50,10 +50,13 @@ 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();
 atlas.zoomOut();
+atlas.panBy(-1.5, 0); // desplazamiento horizontal/vertical en el plano de cámara
+atlas.panTo(0, 0, 0); // centra la cámara en un punto del mundo
 atlas.fit();
 atlas.frontView();
 atlas.setShellLabels(true);
@@ -76,7 +79,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 +97,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,13 +122,14 @@ 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.
 
 La paleta puede cambiarse después de cargar el modelo mediante `atlas.setPalette({ nombre: color })` o asignando `atlas.palette = { ... }`. El cambio actualiza las piezas, aristas y relaciones sin reconstruir el modelo.
 
-Las acciones de navegación y exploración de la toolbar también están disponibles para la página anfitriona: `zoomIn()`, `zoomOut()`, `fit()`, `frontView()`, `setShellLabels()`, `toggleShellLabels()`, `openAllContainers()` y `closeAllContainers()`. Así se puede construir una barra de controles propia sin depender de la toolbar interna.
+Las acciones de navegación y exploración también están disponibles para la página anfitriona: `zoomIn()`, `zoomOut()`, `panBy()`, `panTo()`, `fit()`, `frontView()`, `setShellLabels()`, `toggleShellLabels()`, `openAllContainers()` y `closeAllContainers()`. El usuario puede desplazar la vista con el botón derecho, con `Shift` + arrastre o mediante dos dedos en una pantalla táctil. Así se puede construir una barra de controles propia sin depender de la toolbar interna.
 
 La escena también se puede editar en caliente. `updateModel(patch)` reemplaza
 las secciones indicadas; `addEntity`, `updateEntity` y `removeEntity` gestionan
@@ -141,9 +151,18 @@ 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.21.tgz
+npm install ./liquidcars-atlas-0.1.22.tgz
 ```
 
 ## Estado
 
-`0.1.21` 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 una única malla de tubo rojo y tres anillos oscilantes distribuidos a lo largo del recorrido.
+`0.1.23` añade desplazamiento lateral de cámara mediante ratón, teclado
+modificador y gestos táctiles, además de la API pública `panBy()` y `panTo()`.
+Se conserva la selección contextual de relaciones introducida en `0.1.22`: 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/dist/liquidcars-atlas.js

@@ -1,4 +1,4 @@
-/*! LiquidCars Atlas 0.1.21 | MIT */
+/*! LiquidCars Atlas 0.1.22 | MIT */
 
 // src/three.core.js
 /**
@@ -29371,7 +29371,7 @@ var CSS = [
   ":host{display:block;position:relative;height:var(--lc-height,680px);min-height:420px;color:var(--lc-panel-title,#e9f0f5);font:14px Inter,system-ui,-apple-system,sans-serif;background:var(--lc-bg,#0a111a);border:1px solid #294252;border-radius:12px;overflow:hidden;contain:content}",
   "*{box-sizing:border-box}.atlas{display:grid;grid-template-columns:minmax(0,1fr) 300px;height:100%}.atlas[data-panel=hidden]{grid-template-columns:1fr}.viewport{position:relative;min-width:0;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,var(--lc-bg-glow,#1c2b39),var(--lc-bg-fade,#0a111a) 82%)}canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}.toolbar{position:absolute;z-index:10;bottom:28px;left:50%;transform:translateX(-50%);display:flex;gap:3px;padding:6px;background:var(--lc-toolbar-bg,#15232fe8);border:1px solid var(--lc-toolbar-border,#3a5062);border-radius:8px;white-space:nowrap}.toolbar[data-hidden=true],.toolbar[hidden],.panel[data-hidden=true],.panel[hidden],.crumbs[data-hidden=true],.crumbs[hidden],.hint[data-hidden=true],.hint[hidden]{display:none!important}.toolbar button{height:30px;padding:0 9px;border:0;border-radius:5px;background:none;color:var(--lc-toolbar-text,#dbe7ec);cursor:pointer}.toolbar button:hover,.toolbar button.active{background:var(--lc-toolbar-active,#1f3d4b);color:var(--lc-toolbar-active-text,#c5f2e9)}.toolbar i{display:block;width:1px;margin:2px 3px;background:#38515f}.hint{position:absolute;z-index:9;top:8px;bottom:auto;left:0;right:0;text-align:center;padding:2px 8px;font-size:11px;line-height:16px;color:var(--lc-hint,#8da6b8);pointer-events:none}.panel{overflow:auto;padding:24px 20px;background:var(--lc-panel-bg,linear-gradient(140deg,#182633,#0e1925 65%));border-left:1px solid var(--lc-panel-border,#2a3a48)}.panel h2{font-size:26px;line-height:1.12;font-weight:470;margin:12px 0;color:var(--lc-panel-title,#e9f0f5)}.panel h3{font-size:11px;letter-spacing:1.4px;color:#91aabd;margin:24px 0 10px}.panel p{font-size:14px;line-height:1.55;color:var(--lc-panel-text,#b5c6d2)}.panel .eyebrow{font-size:11px;letter-spacing:1.7px;color:#6ad7c0}.panel .sub{font-size:13px;color:#8fa8bd;margin-bottom:16px}.panel button{display:block;width:100%;padding:10px 0;text-align:left;background:none;border:0;border-bottom:1px solid var(--lc-panel-border,#2a3a48);color:#d9e7eb;cursor:pointer}.panel button:hover{color:#6ad7c0}.panel .relation{padding:10px 0;border-bottom:1px solid var(--lc-panel-border,#2a3a48)}.panel .relation strong{display:block;font-weight:550}.panel .relation small{display:block;color:#86a6b9;font-size:12px;margin-top:4px}.panel .back{color:#9db7c8;font-size:13px}.panel .crumbs{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:0 0 12px}.panel .crumbs button{display:inline;width:auto;padding:3px 7px;border:0;border-radius:4px;background:var(--lc-crumb-bg,#142733);color:var(--lc-crumb-text,#91b6c7);font-size:12px}.panel .crumbs button.current{background:var(--lc-crumb-active,#1c4a4d);color:var(--lc-crumb-active-text,#c5f2e9)}.panel .note{border-top:1px solid var(--lc-panel-border,#2a3a48);padding-top:16px;margin-top:22px;font-size:12px;color:#7692a6}.error{position:absolute;inset:20%;padding:18px;background:#172b3b;border:1px solid #7896a9;line-height:1.5;z-index:4}@media(max-width:900px){.toolbar{gap:0}.toolbar button{padding:0 6px;font-size:12px}}@media(max-width:760px){:host{height:680px}.atlas{grid-template-columns:1fr;grid-template-rows:minmax(420px,1fr) auto}.panel{max-height:250px;border-left:0;border-top:1px solid var(--lc-panel-border,#2a3a48);padding:18px}.toolbar{bottom:24px}.hint{top:8px;bottom:auto;display:block}}"
 ].join("");
-var TEMPLATE = '<div class="atlas"><section class="viewport"><canvas tabindex="0" aria-label="Modelo 3D interactivo"></canvas><div class="toolbar"><button data-action="minus" aria-label="Alejar">\u2212</button><button data-action="plus" aria-label="Acercar">+</button><i></i><button data-action="fit">\u2316 Encuadrar</button><button data-action="front">\u25B1 Frontal</button><button data-action="labels" class="active" aria-pressed="true">\u25A7 Etiquetas</button><i></i><button data-action="relations-all" aria-pressed="false">Todas</button><button data-action="relations-selected" class="active" aria-pressed="true">Selecci\xF3n</button><button data-action="relations-none" aria-pressed="false">Ocultar</button></div><div class="hint">Arrastra para girar \xB7 rueda para zoom \xB7 clic para seleccionar</div></section><aside class="panel" aria-live="polite"></aside></div>';
+var TEMPLATE = '<div class="atlas"><section class="viewport"><canvas tabindex="0" aria-label="Modelo 3D interactivo"></canvas><div class="toolbar"><button data-action="minus" aria-label="Alejar">\u2212</button><button data-action="plus" aria-label="Acercar">+</button><i></i><button data-action="fit">\u2316 Encuadrar</button><button data-action="front">\u25B1 Frontal</button><button data-action="labels" class="active" aria-pressed="true">\u25A7 Etiquetas</button><i></i><button data-action="relations-all" aria-pressed="false">Todas</button><button data-action="relations-selected" class="active" aria-pressed="true">Selecci\xF3n</button><button data-action="relations-none" aria-pressed="false">Ocultar</button></div><div class="hint">Gira: arrastra \xB7 Pan: \u21E7+arrastra / 2 dedos \xB7 Zoom: rueda o pellizco \xB7 Selecciona: clic</div></section><aside class="panel" aria-live="polite"></aside></div>';
 function escapeHtml(value) {
   return String(value ?? "").replace(/[&<>"']/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[char]);
 }
@@ -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";
@@ -29607,6 +29608,7 @@ var LiquidCarsAtlas = class extends HTMLElement {
     this.focus = new Vector3();
     this.targetFocus = new Vector3();
     this.drag = null;
+    this.pointers = /* @__PURE__ */ new Map();
     this.relationGroup = new Group();
     this.scene.add(this.relationGroup);
     this.relations = [];
@@ -29651,6 +29653,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 +29683,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 +29752,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 +29790,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() {
@@ -29809,6 +29831,27 @@ var LiquidCarsAtlas = class extends HTMLElement {
     this.invalidate();
     return this;
   }
+  panBy(horizontal = 0, vertical = 0) {
+    const direction = this.camera.getWorldDirection(new Vector3());
+    const right = new Vector3().crossVectors(direction, this.camera.up).normalize();
+    const up = new Vector3().crossVectors(right, direction).normalize();
+    this.targetFocus.addScaledVector(right, Number(horizontal) || 0);
+    this.targetFocus.addScaledVector(up, Number(vertical) || 0);
+    this.invalidate();
+    return this;
+  }
+  panTo(x = 0, y = 0, z = 0) {
+    const value = Array.isArray(x) ? x : x && typeof x === "object" ? [x.x, x.y, x.z] : [x, y, z];
+    this.targetFocus.set(Number(value[0]) || 0, Number(value[1]) || 0, Number(value[2]) || 0);
+    this.invalidate();
+    return this;
+  }
+  _panByPixels(dx, dy) {
+    const rect = this.canvas.getBoundingClientRect();
+    const distance = Math.max(1, this.camera.position.distanceTo(this.focus));
+    const worldPerPixel = 2 * distance * Math.tan(MathUtils.degToRad(this.camera.fov) / 2) / Math.max(1, rect.height);
+    return this.panBy(-dx * worldPerPixel, dy * worldPerPixel);
+  }
   fit() {
     const bounds = new Box3();
     for (const node of this.nodes.values()) {
@@ -29858,6 +29901,7 @@ var LiquidCarsAtlas = class extends HTMLElement {
   closeAllContainers() {
     this.open.clear();
     this.selected = null;
+    this.selectedRelationIndex = null;
     this._renderPanel();
     this._rebuildRelations();
     this.invalidate();
@@ -30027,6 +30071,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 +30106,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 +30144,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 +30163,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,13 +30180,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.
-        const brokenTube = new Mesh(new TubeGeometry(new LineCurve3(start, end), 10, 0.055, 6, false), new MeshBasicMaterial({ color: brokenColor, transparent: true, opacity: 0.88 }));
+        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);
@@ -30143,7 +30200,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();
@@ -30156,6 +30215,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();
@@ -30205,13 +30274,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";
@@ -30230,7 +30324,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");
@@ -30252,7 +30348,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;
@@ -30368,7 +30465,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) => {
@@ -30383,36 +30485,76 @@ var LiquidCarsAtlas = class extends HTMLElement {
       if (action === "relations-none") this.setRelationMode("none");
       if (action) this.invalidate();
     });
+    this.canvas.addEventListener("contextmenu", (event) => event.preventDefault());
     this.canvas.addEventListener("pointerdown", (event) => {
-      if (event.button !== 0) return;
-      this.drag = { x: event.clientX, y: event.clientY, moved: false };
+      if (event.pointerType !== "touch" && ![0, 1, 2].includes(event.button)) return;
+      this.pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+      const mode = event.pointerType === "touch" ? "rotate" : event.shiftKey || event.button !== 0 ? "pan" : "rotate";
+      this.drag = { pointerId: event.pointerId, pointerType: event.pointerType, button: event.button, mode, x: event.clientX, y: event.clientY, moved: false };
+      if (event.pointerType === "touch" && this.pointers.size === 2) {
+        const [a, b] = [...this.pointers.values()];
+        this.drag = { mode: "touch-pan", x: (a.x + b.x) / 2, y: (a.y + b.y) / 2, distance: Math.hypot(a.x - b.x, a.y - b.y), moved: true };
+      }
       this.canvas.setPointerCapture(event.pointerId);
       this.canvas.style.cursor = "grabbing";
     });
     this.canvas.addEventListener("pointermove", (event) => {
-      if (!this.drag) return;
+      if (!this.drag || !this.pointers.has(event.pointerId)) return;
+      this.pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+      if (event.pointerType === "touch" && this.pointers.size >= 2) {
+        const [a, b] = [...this.pointers.values()];
+        const x = (a.x + b.x) / 2;
+        const y = (a.y + b.y) / 2;
+        const distance = Math.max(1, Math.hypot(a.x - b.x, a.y - b.y));
+        if (this.drag.mode !== "touch-pan") this.drag = { mode: "touch-pan", x, y, distance, moved: true };
+        else {
+          this._panByPixels(x - this.drag.x, y - this.drag.y);
+          this.targetZoom = Math.min(2.8, Math.max(0.55, this.targetZoom * distance / Math.max(1, this.drag.distance)));
+          Object.assign(this.drag, { x, y, distance, moved: true });
+        }
+        this.invalidate();
+        return;
+      }
+      if (this.drag.pointerId !== event.pointerId) return;
       const dx = event.clientX - this.drag.x;
       const dy = event.clientY - this.drag.y;
       if (Math.abs(dx) + Math.abs(dy) > 3) this.drag.moved = true;
       this.drag.x = event.clientX;
       this.drag.y = event.clientY;
-      this.yaw -= dx * 5e-3;
-      this.pitch = Math.max(-1.56, Math.min(1.56, this.pitch + dy * 5e-3));
+      if (this.drag.mode === "pan" || event.shiftKey) this._panByPixels(dx, dy);
+      else {
+        this.yaw -= dx * 5e-3;
+        this.pitch = Math.max(-1.56, Math.min(1.56, this.pitch + dy * 5e-3));
+      }
       this.invalidate();
     });
-    this.canvas.addEventListener("pointerup", (event) => {
+    const endPointer = (event, cancelled = false) => {
       const drag = this.drag;
+      this.pointers.delete(event.pointerId);
+      if (this.pointers.size) {
+        const [pointerId, point] = this.pointers.entries().next().value;
+        this.drag = { pointerId, pointerType: "touch", button: 0, mode: "rotate", x: point.x, y: point.y, moved: true };
+        return;
+      }
       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" });
+      if (!cancelled && drag && !drag.moved && drag.button === 0) {
+        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();
-    });
+    };
+    this.canvas.addEventListener("pointerup", (event) => endPointer(event));
+    this.canvas.addEventListener("pointercancel", (event) => endPointer(event, true));
     this.canvas.addEventListener("wheel", (event) => {
       event.preventDefault();
       this.targetZoom = Math.min(2.8, Math.max(0.55, this.targetZoom * Math.exp(-event.deltaY * 1e-3)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liquidcars/atlas",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "description": "Reusable 3D conceptual atlas Web Component for LiquidCars-style models",
   "type": "module",
   "main": "./dist/liquidcars-atlas.js",