@liquidcars/atlas 0.1.31 → 0.1.33

package/README.md

@@ -37,7 +37,12 @@ Después abre <http://localhost:4173/> (o <http://localhost:4173/demo/>). La dem
       }
     ],
     "relations": [
-      { "from": "dealer", "to": "base-offer", "label": "mantiene" }
+      {
+        "from": "dealer",
+        "to": "base-offer",
+        "label": "mantiene",
+        "text": "Mantiene sincronizada la oferta base del concesionario."
+      }
     ]
   }
   </script>
@@ -53,6 +58,7 @@ 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.setPanelVisible(true);   // también se puede usar panel="on" | "off"
 atlas.zoomIn();
 atlas.zoomOut();
 atlas.panBy(-1.5, 0); // desplazamiento horizontal/vertical en el plano de cámara
@@ -76,7 +82,7 @@ atlas.setSelectionMode('event'); // el clic emite lc-select sin navegar internam
 // 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] });
 atlas.updateEntity('service', { text: 'Servicio actualizado', c: '#ed8f98' });
-atlas.addRelation({ from: 'service', to: 'offers', label: 'publica', mode: 'bidirectional' });
+atlas.addRelation({ from: 'service', to: 'offers', label: 'publica', text: 'Publica ofertas validadas.', mode: 'bidirectional' });
 atlas.updateRelation(0, { mode: 'broken' });
 atlas.removeRelation(0);
 atlas.removeEntity('service');
@@ -100,7 +106,8 @@ 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-warning`, `lc-select`, `lc-model-change`,
-`lc-relation-mode`, `lc-focus-change` y `lc-disconnect`. `lc-select` usa un detalle discriminado:
+`lc-relation-mode`, `lc-focus-change`, `lc-print-ready`, `lc-print-error`,
+`lc-print-restored` 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
@@ -114,16 +121,37 @@ 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()`).
 
+## Impresión
+
+Atlas prepara automáticamente una representación WYSIWYG al entrar en el modo
+de impresión del navegador. La captura conserva el ángulo, el zoom, el foco y
+los objetos visibles, pero omite la toolbar, el panel de información y las
+indicaciones de interacción. Al terminar se restaura el canvas WebGL.
+
+La misma funcionalidad puede controlarse explícitamente:
+
+```js
+const atlas = document.querySelector("liquidcars-atlas");
+const frame = atlas.captureFrame(); // canvas 2D con el framebuffer actual
+atlas.prepareForPrint();
+atlas.restoreAfterPrint();
+```
+
+`captureFrame()` usa `WebGLRenderingContext.readPixels()` para funcionar también
+en navegadores que no permiten copiar directamente un canvas WebGL sin
+`preserveDrawingBuffer`. Para evitar que un bloque se divida entre páginas, el
+componente aplica `break-inside: avoid` durante la impresión.
+
 ## Contrato de datos
 
 - `palette`: mapa de nombres de color a valores CSS/hex.
 - `theme` (opcional): configuración de `background`, `lighting`, `panel`, `toolbar`, `breadcrumbs`, `hint` y `ui`. `ui` permite mostrar u ocultar `panel`, `toolbar`, `breadcrumbs` y `hint`.
 - `render.camera` (opcional): vista inicial con `position`, `target` y `zoom`. Las coordenadas pertenecen al espacio del modelo; `zoom` conserva el encuadre relativo entre tamaños de visor.
 - `render.focus` (opcional): filtrado visual por selección. `mode` acepta `all` o `connected`, `effect` acepta `dim` o `hide`, y `layout` distingue posiciones estables (`preserve`) de una proyección recompilada (`reflow`).
-- `entities`: objetos con `id`, `name`, `p`, `s`, `c`, `type`, `text` y opcionalmente `parent`, `geometry`, `radius`, `segments`, `frontLabel`, `anchor` y `ports`.
+- `entities`: objetos con `id`, `name`, `p`, `s`, `c`, `type`, `text`, `url` y opcionalmente `parent`, `geometry`, `radius`, `segments`, `frontLabel`, `anchor` y `ports`. Las URL HTTP(S) se abren en una pestaña nueva desde el panel de información.
 - `p` es la posición local respecto a `parent`; una entidad sin `parent` usa coordenadas de escena.
 - `s` son dimensiones absolutas locales `[x, y, z]`.
-- `relations` acepta objetos `{from, to, label}` o la forma corta `[from, to, label]`.
+- `relations` acepta objetos `{from, to, label, text, url}` o la forma corta `[from, to, label]`. `label` es el título corto de la conexión, `text` su descripción y `url` su documentación externa en el panel de información.
   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
@@ -201,7 +229,7 @@ una caja roja de fallback y emite `lc-warning` con el código
 
 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 también están disponibles para la página anfitriona: `zoomIn()`, `zoomOut()`, `panBy()`, `panTo()`, `fit()`, `frontView()`, `getCameraView()`, `setCameraView()`, `restoreInitialCamera()`, `setShellLabels()`, `toggleShellLabels()`, `setFocusFilter()`, `clearFocusFilter()`, `getFocusedIds()`, `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.
+Las acciones de navegación y exploración también están disponibles para la página anfitriona: `zoomIn()`, `zoomOut()`, `panBy()`, `panTo()`, `fit()`, `frontView()`, `getCameraView()`, `setCameraView()`, `restoreInitialCamera()`, `setShellLabels()`, `toggleShellLabels()`, `setPanelVisible()`, `setFocusFilter()`, `clearFocusFilter()`, `getFocusedIds()`, `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.
 
 Una vista inicial portable puede declararse dentro del modelo: