vanie
Version:
Vanie es una librería diseñada para el desarrollo de interfaces de usuario interactivas en el front-end. Con un enfoque en la creación de ventanas arrastrables, Vanie ofrece una experiencia de usuario familiar, inspirada en los sistemas operativos más emb
1,162 lines (822 loc) • 128 kB
Markdown
<h1 align="center">💻 Vanie 💻<h1/>
<p align="center"><a href="#"><img src="https://i.ibb.co/StFCMCP/vanie-hd.png" alt="imagen representativa de Vanie"></a></p>
## **Vanie**
Vanie es una librería diseñada para el desarrollo de interfaces de usuario interactivas en el front-end. Con un enfoque en la creación de ventanas arrastrables, Vanie ofrece una experiencia de usuario familiar, inspirada en los sistemas operativos más emblemáticos: Windows, macOS y Linux.
</br>
Versión | Novedades
--- | ---
0.0.4 | <ul><li>Mejoras en la optimización en el evento cerrar</li><li>Propiedades nuevas como: [hayArrastre](#parametros) y [ventanaArrastrada](#parametros)</li><li>Nuevo [Evento arrastre](#evento-arrastre)</li></ul>
##### instalacion:
``` bash
npm i vanie
```
### Contenido:
+ [Demo](#demo)
+ [Constructor e inicio](#constructor)
+ [Conexión con el DOM y arranque.](#conexión-con-el-dom-y-arranque)
+ [Estructura.](#estructura)
+ [Persistencia](#persistencia)
+ [Coordenadas y posición.](#coordenadas-y-posición)
+ [Dimensión.](#dimensión)
+ [Botones y Eventos.](#botones-y-eventos)
+ [Gestos.](#gestos)
+ [Modificar estilos.](#modificar-estilos)
+ [Configuraciones.](#configuraciones)
+ [Validadores.](#validadores)
+ [globalVenie.](#globalvenie)
+ [Recomendaciones finales.](#recomendaciones-finales)
---
### Demo
<p align="center"><a href="#"><img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExNmp1bzBlOGI3ZzE4cDhwMWt2YjBqOG1rajRrcGIycnJrOWducDY5bCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/U5AwzVnUJPawo1bmDQ/source.gif" alt="gif del demo de Vanie"></a></p>
Para correr esta demostración y probar su funcionamiento, solo instale las dependencias y ejecute:
``` bash
npm run demo
```
---
<br/>
### Constructor
_`Opcional`_ : En caso de usar **[globalVanie](#globalvenie)** para asignar el estilo.
``` JavaScript
import Vanie from 'vanie';
// Crear una nueva instancia de Vanie con un estilo predefinido y un identificador
const ventana1 = new Vanie('windows-claro','ventana 1');
const estilos = {
/* Ver la sección de como -- Modificar estilos -- para más detalles */
};
// Crear una nueva instancia de Vanie con un conjunto de estilos personalizado.
const ventana2 = new Vanie(estilos);
// Crear una nueva instancia de Vanie usando el compilador CSS de otra instancia existente.
const ventana3 = new Vanie(ventana2.compiladorCss);
```
**Parámetros del estilo**:
+ **String** : El nombre del estilo almacenado en el sistema global.
Estilos predefinidos disponibles: `windows-claro`, `windows-oscuro` , `mac-claro` , `mac-oscuro` , `linux-claro` , `linux-oscuro`
+ **object** : Un objeto que contiene las características del estilo a asignar. Una vez asignado, estará disponible globalmente para su uso posterior, lo que significa que solo necesitarás especificar el nombre del estilo en futuras instancias sin necesidad de reutilizar el objeto.
*Para obtener más detalles, consulta la sección sobre cómo [Modificar estilos](#modificar-estilos).*
+ **CompiladorCssVanie** : El compilador de estilos de una instancia existente de Vanie.
**Parámetros del identificador** : *(-opcional-)* Acepta un string o un número para más detalle, vaya a la sección [identificador](#identificador) para saber más.
---
<br/>
### Conexión con el DOM y arranque.
_`Opcional`_ : En caso de usar **[globalVanie](#globalvenie)** para conectarse al **DOM**.
``` JavaScript
import Vanie from 'vanie';
const ventana1 = new Vanie('windows-claro');
const ventana2 = new Vanie('linux-oscuro');
// Asignar el elemento del DOM como contenedor principal para la ventana.
ventana1.asignarPadre(document.body);
ventana1.removerPadre(); // Desconectar la ventana del elemento del DOM
ventana2.padre = document.body; // También se puede asignar usando la propiedad padre
ventana2.abrir(); // Construye la Ventana y la muestra en pantalla.
```
**Métodos y Propiedades**:
+ `asignarPadre( HTMLElement )` : Esta función asigna un elemento del DOM como el contenedor principal donde se alojará la ventana.
+ `[get/set] padre` : Esta propiedad asigna y retorna el contenedor padre que aloja la ventana.
+ `removerPadre()` : Este método desconecta la ventana del elemento del DOM.
+ `abrir()` : Esta función construye y muestra la ventana en pantalla.
<p align="center"><a href="#"><img src="https://i.ibb.co/z4pysfs/ventana-vacia-1.webp" alt="imagen que muestra el resultado del codigo usado en el ejemplo: Conexión con el DOM y arranque "></a></p>
> Se recomienda usar el mismo **padre** para todas las instancias que cree o usar **[globalVanie](#globalvenie)** para conectarse al DOM; de lo contrario, las funciones de posicionamiento y bloqueo se verán afectadas. Si se ve en la necesidad de usar diferentes padres, puede ir a [Configuradores](#configuraciones)->[desconectarseDelGestor](#desconectarseDelGestor) para más información.
---
<br/>
### Estructura
Demostración gráfica de los elementos `div` que conforman las ventanas creadas con Vanie:
<p align="center"><a href="#"><img src="https://i.ibb.co/k1bRtHP/estructura.jpg" alt="imagen que representa la estructura de una ventana creada con Vanie"></a></p>
#### ventana:
``` JavaScript
import Vanie from 'vanie';
const raiz = document.getElementById('raiz');
const instanciaVanie = new Vanie('mac-claro');
instanciaVanie.padre = raiz;
instanciaVanie.abrir();
console.log(instanciaVanie.ventana);// retorna el div asociado al elemento ventana.
```
**get** - _**ventana**_ Si se ha construido satisfactoriamente la instancia Vanie retornara el `HTMLElement` que pertenece a la ventana de lo contrario retornara `undefined`.
#### cabecera:
Esta propiedad te permite personalizar el contenido de la cabecera de la ventana.
``` JavaScript
import Vanie from 'vanie';
const raiz = document.getElementById('raiz');
const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('linux-oscuro');
const ventana3 = new Vanie('windows-claro');
ventana1.padre = ventana2.padre = ventana3.padre = raiz;
// Cambiando el contenido de la cabecera usando innerHtml.
ventana1.cabecera = '<h2> ventana1 <h2>';
const boton = document.createElement('button');
boton.innerText = 'accion';
boton.style.width = '100px';
boton.style.height = '70%';
boton.style.backgroundColor = '#dd4814';
// Cambiando el contenido de la cabercera con un objeto HTMLElement.
ventana2.cabecera = boton;
const listaDeDiv = ()=>{
const list = [];
for(let i = 0; i < 5; i++){
const div = document.createElement('div');
div.style.height = div.style.width = '20px';
div.style.backgroundColor = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
list.push(div);
}
return list;
}
// Cambiando el contenido de la cabercera con una lista de objetos HTMLElement.
ventana3.cabecera = listaDeDiv();
ventana1.abrir();
ventana2.abrir();
ventana3.abrir();
```
**get** - _**cabecera**_ Si se ha construido satisfactoriamente la instancia Vanie retornara el `HTMLElement` que pertenece a la cabecera de la ventana de lo contrario retornara `undefined`.
**set** - _**cabecera**_ Acepta tres tipos de parámetros:
+ `string` : Incorpora el contenido del string en el innerHTML del div de la cabecera. ⚠ Su grado de prioridad es máximo, por lo que cualquier modificación a objetos relacionados con la cabecera puede no aplicarse.
+ `HTMLElement` : Incorpora el objeto HTMLElement como un nodo hijo a la cabecera.
+ `Array HTMLElement` : Incorpora cada objeto HTMLElement del Array como un nodo hijo a la cabecera.
<p align="center"><a href="#"><img src="https://i.ibb.co/c24rBTL/cabacera.jpg" alt="imagen que muestra el resultado del codigo usado en el ejemplo de la propiedad cabecera"></a></p>
Si por alguna razón decide eliminar el contenido de la cabecera, puede hacerlo con el método `limpiarCabecera()` o asignarle un string vacío `''` a la propiedad `cabecera` directamente.
``` JavaScript
ventana1.cabecera = '';
ventana2.cabecera = '';
ventana3.limpiarCabecera();
```
<p align="center"><a href="#"><img src="https://i.ibb.co/vXtWSy1/cabecera-limpia.jpg" alt="imagen que muestra el resultado del codigo usado en el ejemplo del metodo limpiarCabecera()"></a></p>
#### titulo:
Esta propiedad te permite asignar un titulo a la ventana.
``` JavaScript
import Vanie from 'vanie';
const raiz = document.getElementById('raiz');
const ventana1 = new Vanie('mac-claro');
const ventana2 = new Vanie('linux-oscuro');
ventana2.padre = ventana1.padre = raiz;
// Usando innerHtml para establecer un título en la cabecera.
ventana1.cabecera = '<h2> ventana 1 <h2>';
// Asignando un string como título a la ventana2.
ventana2.titulo = 'ventana 2';
ventana1.abrir();
ventana2.abrir();
```
`[get/set] titulo` : Esta propiedad asigna y retorna el string del titulo.
<p align="center"><a href="#"><img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExM2E4cnptYXhiMXplbmVycHVxZDZzdzFiamxjdTdqY2ZxandtODl3MyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/ovIuIfEgL54IYJi6zJ/giphy.gif" alt="gif animado que muestra el resultado del codigo usado en el ejemplo de la propiedad titulo"></a></p>
**¿Por qué usar título?**
Aunque inicialmente el resultado de las propiedades `cabecera` y `titulo` pueda parecer similar, la diferencia radica en que el contenido asignado a la **cabecera** impide el arrastre de la ventana, mientras que **título** no interfiere con esta funcionalidad.
Si tu intención es darle un título a cada ventana sin afectar su capacidad de ser arrastrada, utiliza la propiedad `titulo`. Esto proporciona una manera clara de distinguir entre el contenido de la **cabecera** y el **título** de la ventana, asegurando una mejor experiencia al mantener la funcionalidad de arrastre intacta.
#### justificarCabecera:
Esta propiedad te permite controlar cómo se justifica el contenido dentro de la cabecera de la ventana. Puedes usar valores como 'space-evenly', 'center', entre otros, para ajustar la disposición del contenido de la cabecera según tus necesidades de diseño.
``` JavaScript
import Vanie from 'vanie';
const raiz = document.getElementById('raiz');
const ventana1 = new Vanie('mac-claro');
const ventana2 = new Vanie('linux-oscuro');
ventana2.padre = ventana1.padre = raiz;
const boton = document.createElement('button');
boton.innerText = '➕';
boton.style.height = '100%';
boton.style.aspectRedio = 1;
boton.style.backgroundColor = 'transpatern';
ventana1.cabecera = boton;
ventana1.titulo = 'ventana 1'
ventana2.titulo = 'ventana 2'
ventana1.justificarCabecera = 'space-evenly'; // justificado uniforme
ventana2.justificarCabecera = 'center'; // justificado en el centro
ventana1.abrir();
ventana2.abrir();
```
`[get/set] justificarCabecera` : Esta propiedad asigna y retorna el string con la justificación del contenido de la [cabecera](#cabecera).
<p align="center"><a href="#"><img src="https://i.ibb.co/HNpBZN5/justificado.jpg" alt="imagen que muestra el resultado del codigo usado en el ejemplo de la propiedad justificarCabecera"></a></p>
> Si por alguna razón decide eliminar el justificado de la cabecera, puede hacerlo asignando un string vacío `''`.
#### ico:
Esta propiedad te permite asignar un icono a la ventana, que se mostrará junto al título en la cabecera. Puedes usar elementos HTML, como imágenes (\<img\>) o cualquier otro contenido HTML, para personalizar el icono de acuerdo a tus necesidades de diseño. Esto puede ayudar a identificar visualmente las ventanas.
``` JavaScript
import Vanie from 'vanie';
const raiz = document.getElementById('raiz');
const ventana1 = new Vanie('mac-claro');
const ventana2 = new Vanie('linux-oscuro');
ventana2.padre = ventana1.padre = raiz;
ventana1.titulo = 'ventana 1'
ventana2.titulo = 'ventana 2'
const img = new Image;
img.style.height = '100%';
img.style.aspectRatio = 1;
img.setAttribute('src','https://cdn.icon-icons.com/icons2/643/PNG/512/mac-apple-osx-desktop-software-hardware_icon-icons.com_59289.png');
// Asignando un HTMLElement como nodo hijo de ico.
ventana1.ico = img;
// Usando innerHtml para establecer el contenido de ico.
ventana2.ico = '<div style ="font-size:30px;">💬</div>';
ventana1.justificarCabecera = ventana2.justificarCabecera = 'center';
ventana1.abrir();
ventana2.abrir();
```
**get** - _**ico**_ Si se ha construido satisfactoriamente la instancia Vanie retornara el `HTMLElement` que pertenece al ico de la ventana de lo contrario retornara `undefined`.
**set** - _**ico**_ Acepta tres tipos de parámetros:
+ `string` : Incorpora el contenido del string en el innerHTML del div ico.
+ `HTMLElement` : Incorpora el objeto HTMLElement como un nodo hijo del ico.
+ `Array HTMLElement` : Incorpora cada objeto HTMLElement del Array como un nodo hijo del ico.
<p align="center"><a href="#"><img src="https://i.ibb.co/m80Zq6Y/ico.jpg" alt="imagen que muestra el resultado del codigo usado en el ejemplo de la propiedad ico"></a></p>
> Si por alguna razón decide eliminar el icono de la cabecera, puede hacerlo asignando un string vacío `''`.
#### lienzo:
La propiedad lienzo te permite proporcionar contenido dinámico y personalizado a las ventanas **Vanie**, lo que es fundamental para crear interfaces de usuario interactivas y atractivas. Puedes utilizar una variedad de elementos HTML, esto proporciona una manera flexible de mostrar información y funcionalidades dentro de las ventanas.
``` JavaScript
import Vanie from 'vanie';
const raiz = document.getElementById('raiz');
const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('linux-oscuro');
const ventana3 = new Vanie('windows-claro');
ventana3.padre = ventana2.padre = ventana1.padre = raiz;
ventana1.titulo = 'ventana 1';
ventana2.titulo = 'ventana 2';
ventana3.titulo = 'ventana 3';
ventana3.justificarCabecera = ventana2.justificarCabecera = ventana1.justificarCabecera = 'center';
const listaDiv = ()=>{
const list = [];
for(let i = 0; i < 5; i++){
const div = document.createElement('div');
div.style.height = div.style.width = '80px';
div.style.backgroundColor = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
list.push(div);}
return list;
}
// asigna cada HTMLElement contenida en el Array como un nodo hijo al lienzo;
ventana3.lienzo = listaDiv();
const img = new Image;
img.style.width = img.style.height = '100%';
img.setAttribute('src','https://get.wallhere.com/photo/sky-digital-art-nature-clouds-anime-2304638.jpg');
// asigna el HTMLElement como nodo hijo al contenedor HTMLElement del lienzo.
ventana2.lienzo = img;
// asigna el string al innerHTML al contenedor HTMLElement del lienzo.
ventana1.lienzo =
`<div style="width:100%; height:100%; background-color:#252850; color:white; font-size:24px;">
contenido del lienzo
</div>`;
ventana1.abrir();
ventana2.abrir();
ventana3.abrir();
// retorna la referencia del contenedor HTMLElement del lienzo.
console.log(ventana1.lienzo, ventana2.lienzo, ventana3.lienzo);
```
**get** - _**lienzo**_ Si se ha construido satisfactoriamente la instancia **Vanie**, retornará el `HTMLElement` que pertenece al lienzo de la ventana de lo contrario, retornará `undefined`.
**set** - _**lienzo**_ Acepta tres tipos de parámetros:
+ `string` : Incorpora el contenido del string en el innerHTML del div lienzo. ⚠ Su grado de prioridad es máximo, por lo que cualquier modificación puede no aplicarse.
+ `HTMLElement` : Incorpora el objeto HTMLElement como un nodo hijo del lienzo.
+ `Array HTMLElement` : Incorpora cada objeto HTMLElement del Array como un nodo hijo del lienzo.
<p align="center"><a href="#"><img src="https://i.ibb.co/82PNPhC/lienzo.jpg" alt="imagen que muestra el resultado del codigo usado en el ejemplo de la propiedad lienzo"></a></p>
> Si por alguna razón decide eliminar el contenido del lienzo, puede hacerlo asignando un string vacío `''`.
#### lienzoAgrega:
La función `lienzoAgrega` te permite añadir elementos adicionales al lienzo sin eliminar los elementos que ya están presentes. A diferencia de la asignación directa que reemplaza los elementos almacenados previamente por los nuevos elementos.
``` JavaScript
import Vanie from 'vanie';
const raiz = document.getElementById('raiz');
const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('linux-oscuro');
ventana2.padre = ventana1.padre = raiz;
ventana1.titulo = 'ventana 1';
ventana2.titulo = 'ventana 2';
ventana2.justificarCabecera = ventana1.justificarCabecera = 'center';
const listaDiv = ()=>{
const list = [];
for(let i = 0; i < 5; i++){
const div = document.createElement('div');
div.style.height = div.style.width = '50px';
div.style.backgroundColor = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
list.push(div);}
return list;
}
ventana1.lienzo = listaDiv();
// Borra los elementos anteriores para asignar los nuevos elementos al lienzo
ventana1.lienzo = listaDiv();
ventana2.lienzo = listaDiv();
// Agrega los elementos adicionales al lienzo
ventana2.lienzoAgrega(...listaDiv());
ventana1.abrir();
ventana2.abrir();
//asignar el display una vez construido
ventana2.lienzo.style.display = ventana1.lienzo.style.display = 'flex';
```
`lienzoAgrega(...HTMLElement)`: La funcion solo acepta objetos **HTMLElement** como argumentos. Si el lienzo previamente posee nodos hijos estos no seran eliminados como con la asignacion directa del lienzo.
<p align="center"><a href="#"><img src="https://i.ibb.co/hMY9WQd/lienzo-agrega.jpg" alt="imagen que muestra el resultado del codigo usado en el ejemplo de la funcion lienzoAgrega"></a></p>
#### lienzoRemueve:
La función `lienzoRemueve` te permite remover los elementos del lienzo especificados.
``` JavaScript
import Vanie from 'vanie';
const raiz = document.getElementById('raiz');
const ventana1 = new Vanie('mac-oscuro');
ventana1.padre = raiz;
ventana1.titulo = 'ventana 1';
ventana1.justificarCabecera = 'center';
const listaDiv = ()=>{
const list = [];
for(let i = 0; i < 10; i++){
const div = document.createElement('div');
div.style.height = div.style.width = '50px';
div.style.display = 'grid';
div.style.placeContent = 'center';
div.style.fontSize = '20px';
div.style.backgroundColor = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
div.innerText = i;
list.push(div);}
return list;
}
const lista = listaDiv()
ventana1.lienzo = lista;
ventana1.lienzoRemueve(lista[2],lista[5]); // elimina los elementos del lienzo
ventana1.abrir();
ventana1.lienzo.style.display = 'flex';
```
`lienzoRemove(...HTMLElement)`: La función solo acepta objetos **HTMLElement** como argumentos para poder removerlos del lienzo.
<p align="center"><a href="#"><img src="https://i.ibb.co/K5GKZFy/lienzo-Remueve.png" alt="imagen que muestra el resultado del codigo usado en el ejemplo de la funcion lienzoRemueve"></a></p>
#### cargarURL:
La función `cargarURL` te permite integrar sitios web como contenido de un lienzo.
``` JavaScript
import Vanie from 'vanie';
const raiz = document.getElementById('raiz');
const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('windows-claro');
ventana2.padre = ventana1.padre = raiz;
ventana2.justificarCabecera = ventana1.justificarCabecera = 'center';
ventana1.titulo = 'ventana 1';
ventana2.titulo = 'ventana 2';
// Agregando el sitio con un iframe
ventana1.lienzo = `
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/GrG2-oX5z24?si=UPiNV_e5HOBdC7lE"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen></iframe>`;
// Carga el sitio usando solo la URL
ventana2.cargarURL('https://www.youtube.com/embed/GrG2-oX5z24?si=UPiNV_e5HOBdC7lE');
ventana1.abrir();
ventana2.abrir();
```
`cargarURL(string)`: Esta función aceptará una cadena con la **URL** del sitio web como parámetro para poder asignarlo al lienzo.
<p align="center"><a href="#"><img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExYnY0MjVkNW85bnY2OTZsejZ6d3BucXIydm40d3Q5a2s3ZzAwMXpiOSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/hLSj1K2obKcrDcxvJx/source.gif" alt="imagen que muestra el resultado del codigo usado en el ejemplo de la funcion cargarURL"></a></p>
#### ¿Por que usar cargarURL?
Deberías usar la función `cargarURL` en lugar de asignar directamente un iframe con la dirección del sitio web, ya que esto último puede impedir toda la interactividad de la ventana, lo que podría causar problemas. `cargarURL` resuelve este problema utilizando un bloqueador interno que impide que los eventos del mouse se desactiven.
#### bloquearLienzo y bloquearIframe:
Como su nombre indica, `bloquearLienzo` y `bloquearIframe` desactivan la interactividad del mouse para estos elementos.
``` JavaScript
ventana1.bloquearLienzo(true); // Bloquea la interactividad del lienzo.
ventana2.bloquearIframe(true); // Bloquea la interactividad del iframe creado al usar la función cargarURL.
```
`bloquearLienzo(booleano)` : Si el valor del parámetro es `true`, bloqueará la interactividad del mouse en el lienzo. Si es `false`, activará los eventos en el lienzo.
`bloquearIframe(booleano)` : Si el valor del parámetro es `true`, bloqueará la interactividad del mouse en el iframe si se ha cargado una **URL** con la función `cargarURL` de lo contrario, no surtirá efecto. Si es `false`, activará los eventos en el **iframe**. Es importante tener en cuenta que los objetos **Vanie** poseen un bloqueador automático, por lo que esta función no tendrá un efecto tan significativo a menos que se utilice dentro de los [eventos](#botones-y-eventos) de los objetos **Vanie**.
---
<br/>
### Persistencia
Las ventanas creadas con **Vanie**, los elementos `HTMLElement` devueltos por las propiedades relacionadas a la [estructura](#estructura) pueden ser estilizados y recibir nodos hijos mediante sus propias funciones miembro.
Sin embargo, es importante tener en cuenta dos problemas:
1. Acceder a las funciones miembro de estos elementos antes de que la ventana se abra generará un error.
2. **Vanie** está diseñado para optimizar el uso de recursos, por lo que asignar directamente parámetros a estas propiedades mediante sus funciones miembro puede resultar en la pérdida de estas configuraciones al [cerrar](#cerrar) la ventana.
Para garantizar que las configuraciones se conserven, se recomienda utilizar los métodos y asignaciones mostrados anteriormente o realizar los cambios dentro del evento de [apertura](#evento-abrir) para asegurar la persistencia de su diseño.
``` JavaScript
const raiz = document.getElementById('raiz');
const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('windows-claro');
const ventana3 = new Vanie('linux-oscuro');
ventana3.padre = ventana2.padre = ventana1.padre = raiz;
ventana3.justificarCabecera = ventana2.justificarCabecera = ventana1.justificarCabecera = 'center';
ventana1.titulo = 'ventana 1';
ventana2.titulo = 'ventana 2';
ventana3.titulo = 'ventana 3';
const iframe = `
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/GrG2-oX5z24?si=UPiNV_e5HOBdC7lE"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen></iframe>`;
// Si bien esto no es lo ideal, para efectos prácticos sirve como ejemplo.
ventana1.lienzo = iframe; // Aseguramos la persistencia del diseño
// Vaya a la sección de botones y eventos para conocer más detalles de esta función.
ventana2.addEventListener('abrir',()=>{
/* Una forma de falsear la persistencia.
Cada vez que el objeto sea construido y mostrado,
las configuraciones hechas también serán ingresadas.*/
ventana2.lienzo.innerHTML = iframe;
});
ventana1.abrir();
ventana2.abrir();
ventana3.abrir();
/* Una vez construido, se mostrará el diseño,
pero al cerrar la ventana, el elemento no conservará las configuraciones previas.*/
ventana3.lienzo.innerHTML = iframe;
// Reabrimos las ventanas al hacer doble click
document.addEventListener('dblclick',()=>{
ventana1.abrir();
ventana2.abrir();
ventana3.abrir();
});
```
<p align="center"><a href="#"><img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExd3FzN2ljaGtwdTB6ZWtwc2x4dnRkcXd2M2VsMXVnN3Ntc2pxeDZyaCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/im6QQ7InUKWdZ4c4Tf/source.gif" alt="imagen que muestra el resultado del codigo usado en el ejemplo de persistencia"></a></p>
---
<br/>
### Coordenadas y posición
Son un conjunto de propiedades y funciones que lo ayudaran a gestionar de una forma facil el posicionamiento de las ventanas creadas por **Vanie**.
#### posicion:
La propiedad posicion le permite tanto modificar como obtener la posición de la ventana **Vanie**.
**get** - **posicion** : Retorna un objeto `Punto` que contiene la posición actual del objeto **Vanie**.
**set** - **posicion** : Permite cambiar la posición actual del objeto **Vanie**. Puede hacerse de dos formas:
+ Mediante un objeto **Punto**
+ A través de un objeto con los parámetros **x** e **y**.
> Se aceptan tanto `números` como `strings`. Los strings permitidos son los utilizados para el posicionamiento de los elementos en **CSS**, tales como:
> + **x**: `'right'` `'end'` `'left'` `'start'` `'center'`.
> + **y**: `'top'` `'end'` `'bottom'` `'start'` `'center'`.
``` JavaScript
import Vanie from 'vanie';
import {Punto} from 'nauty'; // npm i nauty
const raiz = document.getElementById('raiz');
const ventana1 = new Vanie('mac-oscuro');
ventana1.padre = raiz;
ventana1.justificarCabecera = 'center';
ventana1.titulo = 'ventana 1';
ventana1.abrir();
// Retorna el punto donde se encuentra la ventana.
console.log(ventana1.posicion);
// Modifica la posición de la ventana mediante un objeto Punto.
venatan1.posicion = new Punto(0,0);
// Modifica la posición de la ventana mediante un objeto con los parámetros {x,y}.
ventana1.posicion = {x:0, y:0}
/* Modificando la posición de la ventana mediante parámetros de posicionamiento de CSS.
Es especialmente útil cuando se desconoce la dimensión del contenedor padre o cuando este es dinámico.*/
const pos = new Punto;
pos.bNuevo('end','start');
ventana1.posicion = pos;
ventana1.posicion = {x:'center',y:'bottom'}
```
> Si quiere saber más sobre el objeto `Punto`, revise la documentación de [nauty](https://www.npmjs.com/package/nauty).
#### coordenadas x, y:
Estas propiedades permiten tanto modificar como obtener las coordenadas **x** e **y** de la ventana.
+ **x** : Retorna y modifica la coordenada en el eje x.
+ **y** : Retorna y modifica la coordenada en el eje y.
> Se aceptan tanto `números` como `strings`. Los strings permitidos son los utilizados para el posicionamiento de los elementos en **CSS**:
> + **x**: `'right'` `'end'` `'left'` `'start'` `'center'`.
> + **y**: `'top'` `'end'` `'bottom'` `'start'` `'center'`.
``` JavaScript
import Vanie from 'vanie';
const raiz = document.getElementById('raiz');
const ventana1 = new Vanie('mac-oscuro');
ventana1.padre = raiz;
ventana1.justificarCabecera = 'center';
ventana1.titulo = 'ventana 1';
ventana1.abrir();
// Retorna las coordenadas en X, Y.
console.log(ventana1.x, ventana1.y);
// Modifica la posición de la ventana.
venatan1.x = 0;
ventana1.y = 0;
// Modificando la posición de la ventana mediante parámetros de posicionamiento de CSS.
ventana1.x = 'center';
ventana1.y = 'center';
```
#### verificarPosicion:
La función `verificarPosicion` permite asegurar que la ventana se mantenga dentro del alcance del usuario, evitando que quede fuera de la pantalla y sea inaccesible.
> Esta función se aplica automáticamente, pero está disponible en caso de requerirla explícitamente.
``` JavaScript
import Vanie from 'vanie';
const raiz = document.getElementById('raiz');
const ventana1 = new Vanie('mac-oscuro');
ventana1.padre = raiz;
ventana1.justificarCabecera = 'center';
ventana1.titulo = 'ventana 1';
ventana1.abrir();
/* Se aplica automáticamente.
No es necesario aplicarla, pero está disponible si la necesita.*/
ventana1.verificarPosicion();
```
#### posicionPadre:
La propiedad `posicionPadre` retorna un objeto `Punto` con las coordenadas globales del contenedor principal.
``` JavaScript
import Vanie from 'vanie';
const raiz = document.getElementById('raiz');
const ventana1 = new Vanie('mac-oscuro');
ventana1.padre = raiz;
// Retorna un objeto Punto con las coordenadas globales del contenedor padre.
console.log(ventana1.posicionPadre);
ventana1.abrir();
```
#### cambiarPuntoDeApertura y pApertura:
La función `cambiarPuntoDeApertura` y la propiedad `pApertura` permiten definir la posición de apertura de la ventana. Se pueden especificar las coordenadas en los ejes x e y utilizando números o strings que representan posiciones en **CSS**, como:
+ **x**: `'right'` `'end'` `'left'` `'start'` `'center'`.
+ **y**: `'top'` `'end'` `'bottom'` `'start'` `'center'`.
`pApertura` ofrece una forma alternativa de realizar esta tarea, aceptando un objeto `Punto` o un objeto con las propiedades `{x, y}` para definir la posición de apertura.
``` JavaScript
import Vanie from 'vanie';
import { Punto } from "nauty"; // npm i nauty
const raiz = document.getElementById('raiz');
const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('windows-claro');
const ventana3 = new Vanie('linux-oscuro');
ventana3.padre = ventana2.padre = ventana1.padre = raiz;
// Cambia la posición de apertura.
ventana1.cambiarPuntoDeApertura(0,0);
// Utiliza un objeto {x, y} para definir la posición de apertura.
ventana2.pApertura = {x:'right',y:'bottom'};
const posicion = new Punto;
posicion.bNuevo('center','center');
// Cambia la posición de apertura apartir de un objeto Punto.
ventana3.pApertura = posicion;
ventana1.abrir();
ventana2.abrir();
ventana3.abrir();
ventana1.lienzo.style.backgroundColor =
ventana2.lienzo.style.backgroundColor =
ventana3.lienzo.style.backgroundColor = '#00000077';
```
> Si quiere saber más sobre el objeto `Punto`, revise la documentación de [nauty](https://www.npmjs.com/package/nauty).
<p align="center"><a href="#"><img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExOWJ0cWF3YTIyZmY3eDhpbXk3MG1jY25wdmVheW44a2ZkYm1oNGFyZiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/L06TMJBTfVMT6tN1py/source.gif" alt="gif animado que muestra el resultado del codigo usado en el ejemplo de CambiarPuntoDeApertura"></a></p>
#### cambiarPuntoDeRetorno y pRetorno:
La función `cambiarPuntoDeRetorno` y la propiedad `pRetorno` permiten definir la posición a la cual regresará la ventana cuando se [minimice](#minimizar). Se pueden especificar las coordenadas en los ejes x e y utilizando números o strings que representan posiciones en **CSS**, como:
+ **x**: `'right'` `'end'` `'left'` `'start'` `'center'`.
+ **y**: `'top'` `'end'` `'bottom'` `'start'` `'center'`.
`pRetorno` ofrece una forma alternativa de realizar esta tarea, aceptando un objeto `Punto` o un objeto con las propiedades `{x, y}` para definir la posición de retorno.
``` JavaScript
import Vanie from 'vanie';
import { Punto } from "nauty"; //npm i nauty
const raiz = document.getElementById('raiz');
const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('windows-claro');
const ventana3 = new Vanie('linux-oscuro');
ventana3.padre = ventana2.padre = ventana1.padre = raiz;
// Cambia la posición de retorno de la ventana 1.
ventana1.cambiarPuntoDeRetorno(0,0);
// Utiliza un objeto {x, y} para definir la posición de retorno de la ventana 2.
ventana2.pRetorno = {x:'right',y:0};
const posicion = new Punto;
posicion.bNuevo(0,'bottom');
// Cambia la posición de retorno de la ventana 3 utilizando un objeto Punto.
ventana3.pRetorno = posicion;
ventana1.abrir();
ventana2.abrir();
ventana3.abrir();
ventana1.lienzo.style.backgroundColor =
ventana2.lienzo.style.backgroundColor =
ventana3.lienzo.style.backgroundColor = '#00000077';
```
> Si quiere saber más sobre el objeto `Punto`, revise la documentación de [nauty](https://www.npmjs.com/package/nauty).
<p align="center"><a href="#"><img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExYWs3ZmRjeDJsZ3Z3NGxycW9ldzRmMnRpeXVzaHV3cTZqd3UwY3NwcSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/EeWuJJCY1hbhn5OcY4/source.gif" alt="gif animado que muestra el resultado del codigo usado en el ejemplo de CambiarPuntoDeRetorno"></a></p>
#### desplazar y desplazo:
La función `desplazar` modifica el desplazamiento de la ventana en los ejes **x** e **y**. Mientras que la propiedad `desplazo` retorna un objeto `Desplazo` con los valores de desplazamiento.
``` JavaScript
import Vanie from 'vanie';
const raiz = document.getElementById('raiz');
const ventana1 = new Vanie('mac-oscuro');
ventana1.padre = raiz;
ventana1.abrir();
ventana1.lienzo.style.backgroundColor = '#00000077';
let desplazamiento = 0;
document.addEventListener('wheel',e=>{
desplazamiento += e.deltaY <0? 1 : -1;
// Modifica el desplazamiento en los ejes x e y.
ventana1.desplazar(desplazamiento,desplazamiento);
});
// Retorna el objeto `Desplazo` con los parámetros de desplazamiento en dx y dy
console.log(ventana1.desplazo);
```
<p align="center"><a href="#"><img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExa2U5bWI2NTNxbnk5MWcybTRxc2dwcDcwanFiaXQyaGQ1NnB0d2tsNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/GYz05NAdwGv7oUTkLN/source.gif" alt="gif animado que muestra el resultado del codigo usado en el ejemplo de desplazar"></a></p>
> ⚠ Tener en cuenta que el desplazamiento afecta a otras transformaciones, por lo que si desea que el desplazamiento se convierta en las coordenadas finales de la ventana, necesita hacer los cálculos necesarios y asignarlo a la [posicion](#posicion) de la ventana.
---
</br>
### Dimensión
Son un conjunto de propiedades y funciones que lo ayudaran a gestionar de una forma facil la dimensión de las ventanas creadas con **Vanie**.
#### dimension:
**get** - **dimension** : Retorna un objeto `Dimension` que contiene la dimensión actual del objeto **Vanie**.
**set** - **dimension** : Permite cambiar la dimensión actual del objeto **Vanie**. Puede hacerse de dos formas:
+ Mediante un objeto **Dimension**
+ A través de un objeto con los parámetros **w** y **h**.
> Se aceptan tanto `números` como `strings`. Los strings permitidos son porcentajes.
``` JavaScript
import Vanie from 'vanie';
import {Dimension} from 'nauty';//npm i nauty
const raiz = document.getElementById('raiz');
const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('windows-claro');
ventana2.padre = ventana1.padre = raiz;
ventana1.abrir();
ventana2.abrir();
// asignando la dimension a la ventana 1 usando un objeto con los parametros {w,h}.
ventana1.dimension = {w:'80%', h:500}
const dimension = new Dimension;
dimension.bNuevo(180,'20%');
// asignando la dimension a la venatan 2 usando un objeto Dimension.
ventana2.dimension = dimension;
ventana1.lienzo.style.backgroundColor =
ventana2.lienzo.style.backgroundColor = '#00000077';
```
> Si quiere saber más sobre el objeto `Dimension`, revise la documentación de [nauty](https://www.npmjs.com/package/nauty).
#### alto y ancho:
Retornan y modifican la altura y el ancho actuales de la ventana, respectivamente. Aceptan tanto `números` como `strings`, donde los strings pueden representar porcentajes.
`alto`: retorna y modifica la altura actual de la ventana.
`ancho`: retorna y modifica el ancho actual de la ventana.
``` JavaScript
import Vanie from 'vanie';
const raiz = document.getElementById('raiz');
const ventana1 = new Vanie('mac-oscuro');
ventana1.padre = raiz;
ventana1.abrir();
ventana1.alto = '50%';// asignando la altura.
ventana1.ancho = 200; // asignando el ancho.
console.log(ventana1.alto, ventana1.ancho); // retorna el alto y ancho.
ventana1.lienzo.style.backgroundColor = '#00000077';
```
#### dimensionPadre:
La propiedad `dimensionPadre` devuelve un objeto `Dimension` que representa las dimensiones del contenedor principal de la ventana.
``` JavaScript
import Vanie from 'vanie';
const raiz = document.getElementById('raiz');
const ventana1 = new Vanie('mac-oscuro');
ventana1.padre = raiz;
ventana1.abrir();
// Retorna un objeto Dimension con las dimensiones del contenedor padre.
console.log(ventana1.dimensionPadre);
```
#### cambiarDimensionInicial y dApertura:
La función `cambiarDimensionInicial` y la propiedad `dApertura` permiten establecer las dimensiones con las que se abrirá inicialmente la ventana. Se pueden especificar tanto `números` como `porcentajes`.
`dApertura` Proporciona una alternativa para realizar esta tarea, aceptando un objeto `Dimension` o un objeto con las propiedades `{w, h}` para definir las dimensiones de apertura, ademas de retorna la un objeto `Dimension` con las dimension inicial.
``` JavaScript
import Vanie from 'vanie';
import { Dimension } from "nauty";
const raiz = document.getElementById('raiz');
const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('windows-claro');
const ventana3 = new Vanie('linux-oscuro');
ventana3.padre = ventana2.padre = ventana1.padre = raiz;
// Cambia la dimension de apertura de la ventana 1.
ventana1.cambiarDimensionInicial(200,200);
// Utiliza un objeto {w, h} para definir la dimensión de apertura de la ventana 2.
ventana2.dApertura = {w:'100%',h:'20%'};
const dimension = new Dimension;
dimension.bNuevo(500,'100%');
// Cambia la dimensión de apertura de la ventana 3 utilizando un objeto Dimension.
ventana3.dApertura = dimension;
ventana1.abrir();
ventana2.abrir();
ventana3.abrir();
ventana1.lienzo.style.backgroundColor =
ventana2.lienzo.style.backgroundColor =
ventana3.lienzo.style.backgroundColor = '#00000077';
```
<p align="center"><a href="#"><img src="https://i.ibb.co/bKKvt9Y/Screenshot-2024-05-12-at-00-54-55-Screenshot.png" alt="imagen que muestra el resultado del codigo usado en el ejemplo de cambiarDimensionInicial"></a></p>
#### cambiarDimensionMinima y dMinima:
La función `cambiarDimensionMinima` y la propiedad `dMinima` permiten establecer las dimensiones mínimas con las que la ventana estará limitada. Solo se pueden utilizar `números` como parámetros.
`dMinima` proporciona una alternativa para realizar esta tarea, aceptando un objeto `Dimension` o un objeto con las propiedades `{w, h}` para definir las dimensiones mínimas. Además, retorna un objeto `Dimension` con las dimensiones mínimas.
``` JavaScript
import Vanie from 'vanie';
import { Dimension } from "nauty";//npm i nauty
const raiz = document.getElementById('raiz');
const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('windows-claro');
const ventana3 = new Vanie('linux-oscuro');
ventana3.padre = ventana2.padre = ventana1.padre = raiz;
// Cambia la dimension minima de la ventana 1.
ventana1.cambiarDimensionMinima(200,200);
// Utiliza un objeto {w, h} para definir la dimensión minima de la ventana 2.
ventana2.dMinima = {w:200,h:200};
// Cambia la dimensión minima de la ventana 3 utilizando un objeto Dimension.
ventana3.dMinima = new Dimension(200,200);
ventana1.abrir();
ventana2.abrir();
ventana3.abrir();
ventana1.lienzo.style.backgroundColor =
ventana2.lienzo.style.backgroundColor =
ventana3.lienzo.style.backgroundColor = '#00000077';
```
> Si quiere saber más sobre el objeto `Dimension`, revise la documentación de [nauty](https://www.npmjs.com/package/nauty).
<p align="center"><a href="#"><img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExNms1bWYxenZnenRvamIwaGQ1M2p4OXAweGgzNXVob2M5MzF2bzlvZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/po45vKoGM9y762Vk3t/source.gif" alt="gif animado que muestra el resultado del codigo usado en el ejemplo de cambiarDimensionMinima"></a></p>
#### cambiarDimensionFija y dFija:
La función `cambiarDimensionFija` y la propiedad `dFija` permiten establecer una dimensión inmutable con la que la ventana estará limitada, además de desactivar el botón y el evento [maximizar](#maximizar). Solo se pueden utilizar `números` como parámetros.
`dFija` ofrece una alternativa para realizar esta tarea, aceptando un objeto `Dimension` o un objeto con las propiedades `{w, h}` para definir la dimensión. Además, retorna un objeto `Dimension` con la dimensión fija.
``` JavaScript
import Vanie from 'vanie';
import { Dimension } from "nauty";//npm i nauty
const raiz = document.getElementById('raiz');
const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('windows-claro');
const ventana3 = new Vanie('linux-oscuro');
ventana3.padre = ventana2.padre = ventana1.padre = raiz;
// Establece la dimensión fija de la ventana 1.
ventana1.cambiarDimensionFija(200,200);
// Utiliza un objeto {w, h} para definir la dimensión fija de la ventana 2.
ventana2.dFija = {w:200,h:200};
// Establece la dimensión fija de la ventana 3 utilizando un objeto Dimension.
ventana3.dFija = new Dimension(200,200);
ventana1.abrir();
ventana2.abrir();
ventana3.abrir();
ventana1.lienzo.style.backgroundColor =
ventana2.lienzo.style.backgroundColor =
ventana3.lienzo.style.backgroundColor = '#00000077';
```
> Si quiere saber más sobre el objeto `Dimension`, revise la documentación de [nauty](https://www.npmjs.com/package/nauty).
<p align="center"><a href="#"><img src="https://i.ibb.co/5nnnVGk/fija.jpg" alt="imagen que muestra el resultado del codigo usado en el ejemplo de cambiarDimensionFija"></a></p>
#### eliminarDimensionFija:
Esta función elimina la inmutabilidad de la dimensión de la ventana para permitir su redimensionamiento nuevamente.
``` JavaScript
ventana1.eliminarDimensionFija();
ventana2.eliminarDimensionFija();
ventana3.eliminarDimensionFija();
```
#### cambiarDimensionDelLienzo y dLienzo:
La función `cambiarDimensionDelLienzo` permite ajustar la dimensión de la ventana con respecto al tamaño del lienzo, con la opción adicional de hacerla inmutable. Los dos primeros parámetros solo admiten `números`, mientras que el último parámetro es opcional. Si se desea hacer la dimensión inmutable, se asigna `true`.
La propiedad`dLienzo` ofrece una alternativa para realizar esta tarea, aceptando un objeto `Dimension` o un objeto con las propiedades `{w, h}` para definir el tamaño del liezo. Además, retorna un objeto `Dimension` con el ancho y la altura del lienzo.
> ⚠ La opción de inmutabilidad de esta función tiene MÁXIMA prioridad sobre otras funciones de redimensionamiento.
``` JavaScript
import Vanie from 'vanie';
const raiz = document.getElementById('raiz');
const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('windows-claro');
ventana2.padre = ventana1.padre = raiz;
ventana1.cargarURL('https://www.youtube.com/embed/GrG2-oX5z24?si=UPiNV_e5HOBdC7lE');
ventana2.cargarURL('https://www.youtube.com/embed/GrG2-oX5z24?si=UPiNV_e5HOBdC7lE');
const r16_9 = {w:720,h:(720 * 9)/16}; // Relación de aspecto 16:9.
ventana1.dLienzo = r16_9; // Cambiando la dimensión del lienzo.
// Cambiando la dimensión del lienzo y haciéndola inmutable.
ventana2.cambiarDimensionDelLienzo(r16_9.w, r16_9.h,true);
ventana1.abrir();
ventana2.abrir();
```
`cambiarDimensionDelLienzo(w, h, fijar)` : **w** modifica el ancho, **h** modifica la altura, **fijar** al aignarle `true` la vuelve inmutable además de desactivar el botón y el evento [maximizar](#maximizar).
<p align="center"><a href="#"><img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExM3NkZTV2Z251ZmUxYWxmN2FnajAzOXF2eXo2dWNldTNnMTByYXJlcCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/y2hIlE2w3akjFvJdGR/source.gif"alt="gif animado que muestra el resultado del codigo usado en el ejemplo de cambiarDimensionDelLienzo"></a></p>
#### fijarDimensionDelLienzo:
`fijarDimensionDelLienzo(boolean)` permite tomar la dimensión actual del lienzo y hacerla inmutable en caso de asignar `true` como parámetro. Si se asigna `false`, el lienzo se vuelve mutable nuevamente.
``` JavaScript
import Vanie from 'vanie';
const raiz = document.getElementById('raiz');
const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('windows-claro');
ventana2.padre = ventana1.padre = raiz;
ventana1.cargarURL('https://www.youtube.com/embed/GrG2-oX5z24?si=UPiNV_e5HOBdC7lE');
ventana2.cargarURL('https://www.youtube.com/embed/GrG2-oX5z24?si=UPiNV_e5HOBdC7lE');
const r16_9 = {w:720,h:(720 * 9)/16};
// Cambiando la dimensión del lienzo.
ventana1.cambiarDimensionDelLienzo(r16_9.w, r16_9.h);
// Cambiando la dimensión del lienzo y haciéndola inmutable.
ventana2.cambiarDimensionDelLienzo(r16_9.w, r16_9.h,true);
// Vuelve inmutable el lienzo.
ventana1.fijarDimensionDelLienzo(true)
ventana1.abrir();
ventana2.abrir();
// Remueve la inmutabilidad del lienzo.
ventana2.fijarDimensionDelLienzo(false)
```
<p align="center"><a href="#"><img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZDBudWNiM3JjbjZrNTU5ZnhsMjMzY2E2Y25rOHFmbHBoN214c3AwaSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/sc5Pw2ZxTpPdte2sbd/source.gif"alt="gif animado que muestra el resultado del codigo usado en el ejemplo de fijaDimensionDelLienzo"></a></p>
#### redimensionar:
Redimensionar impide que se redimensione la ventana por parte del usuario asignado `false`, o vuelva a redimensionarse al asignar `true`.
``` JavaScript
import Vanie from 'vanie';
const ventana = new Vanie('linux-oscuro');
ventana.padre = document.body;
ventana.redimensionar(false);// bloquea la redimension.
vantana.redimensionar(true); // desbloquea la redimension.
ventana.abrir();
```
---
</br>
### Botones y Eventos
#### abrir:
Cumple varias tareas críticas como:
1. Permite la creación y visualización en pantalla de las ventanas.
2. Si la ventana está minimizada al ejecutar la función **abrir**, se restaurará a su estado anterior.
3. Si la ventana está visible en pantalla junto a otras ventanas al ejecutar **abrir**, tendrá el mismo efecto que la función [`subir`](#subir) colocándola por encima de las demás ventanas.
``` JavaScript
import Vanie from 'vanie';
const raiz = document.getElementById('raiz');
const boton = document.getElementById('btn');
const ventana1 = new Vanie('linux-oscuro');
const ventana2 = new Vanie('windows-claro');
ventana2.padre = ventana1.padre = raiz;
ventana1.cargarURL('https://www.youtube.com/embed/GrG2-oX5z24?si=UPiNV_e5HOBdC7lE');
//Establece la posición de retorno al lugar donde se posiciona el botón cuando se minimiza.
ventana1.pRetorno = {
x: boton.getBoundingClientRect().left + boton.offsetWidth/2,
y: boton.getBoundingClientRect().top
}
const r16_9 = {w:720,h:(720 * 9)/16};
ventana1.cambiarDimensionDelLienzo(r16_9.w, r16_9.h);
ventana2.abrir(); // Abre una ventana de apoyo.
ventana2.lienzo.style.backgroundColor = '#00000077';
// Al hacer clic en el botón, se construirá y mostrará en pantalla.
// Si está minimizado, se desminimizará.
// Si ya está en pantalla, se posicionará por encima de otras ventanas.
boton.addEventListener('click',ventana1.abrir);
```
<p align="center"><a href="#"><img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExbmx3YnFhdmU0YjZoNXp3OXVtcTh0dmhvanY1M2tma2hidGVobHhmYSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/pzgZr1jOaJjL4ZDmTv/source.gif"alt="gif animado que muestra el resultado del codigo usado en el ejemplo de la función abrir"></a></p>
#### Evento abrir:
El evento abrir ejecutará una función que tú asignes únicamente en el momento en que la ventana se construya y se muestre en pantalla. No pasa ningún parámetro a la función otorgada.
Este evento es útil para ejecutar acciones específicas tan pronto como una ventana se muestre en pantalla.
``` JavaScript
import Vanie from 'vanie';
const raiz = document.getElementById('raiz');
const boton = document.getElementById('btn');
const ventana1 = new Vanie('windows-claro');
ventana1.padre = raiz;
ventana1.pRetorno = {
x: boton.getBoundingClientRect().left + boton.offsetWidth/2,
y: boton.getBoundingClientRect().top
}
let numDeVecesAbierta = 0;
// Ejecurara la funcion unicamente cuando la ventana sea construida y se muestre en pantalla.
ventana1.addEventListener('abrir',()=>{
const color = { r: Math.random()*255, g: Math.random()*255, b: Math.random()*255}
ventana1.lienzo.innerText = ++numDeVecesAbierta;
ventana1.lienzo.style.color = `rgb(${255-color.r},${255-color.g},${255-color.b})`;
ventana1.lienzo.style.fontSize = '120px';
ventana1.lienzo.style.display = 'grid';
ventana1.lienzo.style.placeContent = 'center';
ventana1.lienzo.style.backgroundColor = `rgb(${color.r},${color.g},${color.b})`;
});
boton.addEventListener('click',ventana1.abrir);
```
<p align="center"><a href="#"><img src="https://media.giphy.com/medi