@liquidcars/atlas 0.1.22 → 0.1.23

package/README.md

@@ -55,6 +55,8 @@ 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);
@@ -127,7 +129,7 @@ Geometrías incluidas en esta primera versión: `box`, `cylinder`, `sphere`, `co
 
 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
@@ -154,7 +156,9 @@ npm install ./liquidcars-atlas-0.1.22.tgz
 
 ## Estado
 
-`0.1.22` amplía la selección contextual a las relaciones. El usuario puede
+`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

package/dist/liquidcars-atlas.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]);
 }
@@ -29608,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 = [];
@@ -29830,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()) {
@@ -30463,28 +30485,60 @@ 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) {
+      if (!cancelled && drag && !drag.moved && drag.button === 0) {
         const picked = this._pick(event);
         if (picked?.kind === "entity") {
           const node = picked.node;
@@ -30498,7 +30552,9 @@ var LiquidCarsAtlas = class extends HTMLElement {
         }
       }
       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.22",
+  "version": "0.1.23",
   "description": "Reusable 3D conceptual atlas Web Component for LiquidCars-style models",
   "type": "module",
   "main": "./dist/liquidcars-atlas.js",