@liquidcars/atlas 0.1.16 → 0.1.17

package/README.md

@@ -65,6 +65,7 @@ atlas.setTheme({
   ui: { breadcrumbs: true, panel: true, toolbar: true, hint: false }
 });
 atlas.setPalette({ channels: '#58b6ec', offers: '#48c8b0', connection: '#f4edba' });
+atlas.setSelectionMode('event'); // el clic emite lc-select sin navegar internamente
 
 // El componente se puede modificar sin volver a crearlo.
 atlas.addEntity({ id: 'service', name: 'Service', geometry: 'cone', p: [4, 0, 0], s: [2, 2, 2] });
@@ -95,6 +96,12 @@ 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.
 
+El comportamiento del clic se puede elegir con `selection-mode="internal"`
+(por defecto) o `selection-mode="event"`. En el segundo caso el componente
+emite `lc-select` con `source: "pointer"`, pero deja la decisión a la página
+anfitriona. La API equivalente es `setSelectionMode()` (también disponible
+como `setClickBehavior()`).
+
 ## Contrato de datos
 
 - `palette`: mapa de nombres de color a valores CSS/hex.
@@ -134,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.15.tgz
+npm install ./liquidcars-atlas-0.1.17.tgz
 ```
 
 ## Estado
 
-`0.1.16` 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.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`.

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.15"></script>
+  <script type="module" src="../dist/liquidcars-atlas.js?v=0.1.17"></script>
 </head>
 <body>
   <header>
     <h1>LiquidCars Atlas</h1>
-    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.15</p>
+    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.17</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.16 | MIT */
+/*! LiquidCars Atlas 0.1.17 | MIT */
 
 // src/three.core.js
 /**
@@ -29578,7 +29578,7 @@ function makeLabel(text, color, dimensions, type = "") {
 }
 var LiquidCarsAtlas = class extends HTMLElement {
   static get observedAttributes() {
-    return ["height", "relation-mode", "shell-labels", "toolbar"];
+    return ["height", "relation-mode", "shell-labels", "toolbar", "selection-mode"];
   }
   constructor() {
     super();
@@ -29598,6 +29598,7 @@ var LiquidCarsAtlas = class extends HTMLElement {
     this.modelData = null;
     this.theme = normalizeTheme();
     this.relationMode = this.getAttribute("relation-mode") || "selected";
+    this.selectionMode = this.getAttribute("selection-mode") || "internal";
     this.showShellLabels = this.getAttribute("shell-labels") !== "false";
     this.yaw = 0.37;
     this.pitch = 0.22;
@@ -29639,6 +29640,7 @@ var LiquidCarsAtlas = class extends HTMLElement {
       this._toolbarVisible = value !== "off";
       if (this.ready) this._applyTheme();
     }
+    if (name === "selection-mode") this.selectionMode = ["internal", "event"].includes(value) ? value : "internal";
   }
   get model() {
     return this.modelData;
@@ -29649,6 +29651,17 @@ var LiquidCarsAtlas = class extends HTMLElement {
   get selectedId() {
     return this.selected?.id || null;
   }
+  get clickBehavior() {
+    return this.selectionMode;
+  }
+  setClickBehavior(value) {
+    return this.setSelectionMode(value);
+  }
+  setSelectionMode(mode = "internal") {
+    this.selectionMode = mode === "event" || mode === "external" ? "event" : "internal";
+    this.setAttribute("selection-mode", this.selectionMode);
+    return this;
+  }
   _emit(type, detail = {}) {
     this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
   }
@@ -30377,7 +30390,10 @@ var LiquidCarsAtlas = class extends HTMLElement {
       this.canvas.style.cursor = "grab";
       if (drag && !drag.moved) {
         const node = this._pick(event);
-        if (node) this.select(node.id, { source: "pointer" });
+        if (node) {
+          if (this.selectionMode === "event") this._emit("lc-select", { id: node.id, entity: this._publicEntity(node.id), source: "pointer" });
+          else this.select(node.id, { 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.15"></script>
+  <script type="module" src="./dist/liquidcars-atlas.js?v=0.1.17"></script>
 </head>
 <body>
   <header>
     <h1>LiquidCars Atlas</h1>
-    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.15</p>
+    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.17</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.16",
+  "version": "0.1.17",
   "description": "Reusable 3D conceptual atlas Web Component for LiquidCars-style models",
   "type": "module",
   "main": "./dist/liquidcars-atlas.js",