# Herramientas y lienzo > Coloca, selecciona, mueve, redimensiona y ordena controles en Pyzed Design: snap, guías inteligentes, alineación, orden z y la estructura del formulario. Source: https://albakore.github.io/pyzed/es/editor/toolbox-and-canvas/ El panel **Herramientas** (dock izquierdo) tiene los componentes arriba y la **Estructura** abajo; arrastra la barra entre ellas para dar más sitio a una. El **lienzo** del centro muestra el documento exactamente como se ejecutará, pero inerte: los botones no hacen clic y los campos de texto no escriben, así el ratón queda libre para editar. ## La caja de herramientas Todos los componentes que puedes colocar, por categoría: **Comunes**, **Formularios** (todo lo que el usuario escribe o elige), **Fecha y hora**, **Presentación**, **Contenedores**, **Disposición**, **Navegación**, **Sistema** (lo que habla con el sistema operativo), **Componentes** (los demás [no visuales](https://albakore.github.io/pyzed/es/editor/non-visual-components/), que van a la bandeja bajo el formulario) y una categoría por cada grupo de [componentes diseñados](https://albakore.github.io/pyzed/es/editor/component-designer/) de tu proyecto. Pasa el ratón por una fila para ver la descripción del componente. | Categoría | Componentes | | --- | --- | | **Comunes** | Etiqueta de texto, Título, Botón, Enlace, Botón con menú | | **Formularios** | Cuadro de texto, Área de texto, Casilla, Interruptor, Opciones, Desplegable, Deslizador, Número, Lista, Buscador, Segmentado, Grupo de botones, Selector de color, Selector de iconos | | **Fecha y hora** | [Selector de fecha](https://albakore.github.io/pyzed/es/library/date-picker/), [Rango de fechas](https://albakore.github.io/pyzed/es/library/date-range-picker/), [Selector de hora](https://albakore.github.io/pyzed/es/library/time-picker/), [Calendario](https://albakore.github.io/pyzed/es/library/calendar/) | | **Presentación** | Barra de progreso, Insignia, Imagen, Imagen SVG, Visor de imágenes, Shader, Icono, Markdown, Indicador de carga, Etiqueta (chip), Aviso, Avatar, Grupo de avatares, Contador, Punto de estado, Atajo, Métrica, Gráfico, Tabla, Resumen de cambios, Estado vacío, Código QR, Salida de terminal | | **Navegación** | Pestañas, Árbol, Ruta de navegación | | **Contenedores** y **Disposición** | Panel, Marco, Tarjeta, Separador, Fila flexible, Columna flexible, Cuadrícula, Dock, Panel del dock, Espaciador | | **Sistema** | [Selector de archivos](https://albakore.github.io/pyzed/es/library/file-input/), [Zona para soltar](https://albakore.github.io/pyzed/es/library/drop-zone/) y, en la bandeja: Atajo, Vigilante de archivos, Proceso, Portapapeles, Diálogo de archivos, Notificación, Información del sistema, Lanzador, Monitor de red, Monitor de batería | | **Componentes** | Temporizador, Tarea en segundo plano, Petición web, Ajustes | | **Multimedia** y **Audio** | Webcam y los [controles de audio](https://albakore.github.io/pyzed/es/audio/): perillas, faders, pads, piano, medidores, formas de onda, espectro... | El ejemplo [Explorador de proyecto](https://albakore.github.io/pyzed/es/editor/examples/) pone casi todos en un formulario, con un manejador para cada uno de sus eventos. - **Buscar componentes…** filtra la lista por nombre (en inglés o en el idioma del editor) o por tipo. - **Puntero** (la primera fila) es la herramienta normal de selección. Está resaltada cuando no hay componente elegido. ### Colores de los iconos Cada componente tiene un **rol**, y su icono lleva el color de ese rol en todas partes: la caja de herramientas, la estructura, la bandeja de componentes no visuales, la cabecera de los paneles **Propiedades** y **Eventos** y la ficha que sigue al puntero mientras arrastras. Así la estructura de un formulario se entiende de un vistazo: las cajas azules contienen al resto, los campos verdes recogen lo que escribe el usuario y los botones amarillos ejecutan tu código. El icono de la paleta junto al buscador muestra la misma leyenda. | Color | Rol | Qué es | | --- | --- | --- | | Azul | **Disposición** | Contiene y ordena otros controles: paneles, tarjetas, marcos, filas, columnas, cuadrículas, docks, separadores, espaciadores. | | Verde | **Entrada** | Recoge un valor del usuario: cuadros de texto, casillas, interruptores, desplegables, deslizadores, números, selectores. | | Amarillo | **Acción** | Ejecuta algo al pulsarlo: botones y botones con menú. | | Cian | **Navegación** | Lleva de una vista a otra: pestañas, árboles, rutas de navegación, enlaces. | | Neutro | **Presentación** | Muestra contenido: etiquetas, títulos, imágenes, tablas, gráficos, insignias. | | Rojo | **Multimedia** | Sonido y vídeo: los controles de audio y la webcam. | | Naranja | **Sistema** | Componentes no visuales: temporizadores, procesos, vigilantes de archivos, peticiones web, el portapapeles. | | Morado | **Propio** | Tus propios componentes, hechos con el [diseñador de componentes](https://albakore.github.io/pyzed/es/editor/component-designer/) o con `pz.Component`. | Los colores salen de la paleta de terminal del tema, así que cambian con el tema y se leen bien en temas claros y oscuros. El rol se deduce del componente (si contiene controles, su categoría y sus eventos); un componente registrado desde Python puede indicar el suyo con `Component(..., role="input")`. ### Colocar un control Hay cuatro formas; usa la que te venga mejor: | Gesto | Resultado | | --- | --- | | **Arrastrar** una fila de herramientas al formulario | El control cae donde lo sueltas, con su tamaño por defecto, dentro del contenedor que hay bajo el puntero (se ilumina mientras arrastras). | | **Clic** en una fila y luego **clic** en el formulario | Lo mismo, en el punto donde hiciste clic. | | **Clic** en una fila y luego **arrastrar un rectángulo** en el formulario | El control toma el tamaño del rectángulo (al menos 6×6 px); sus esquinas se ajustan a la cuadrícula. | | Ctrl+Shift+A (**Añadir control…**) | Una lista con buscador; Enter añade el componente resaltado centrado en el formulario. | (Image: Colocar un botón: arrastra un rectángulo con la herramienta elegida) Mientras hay un componente elegido, el puntero es una cruz y la barra de estado dice `Placing Button: click or drag on the form`. Esc (o clic en **Puntero**, o en la misma fila otra vez) suelta la herramienta. Los controles nuevos reciben un nombre libre según su tipo (`button1`, `button2`...) y quedan seleccionados, con el panel Propiedades al frente. (Image: Añadir control: una lista de componentes con búsqueda difusa) :::tip El **+** de la fila de un contenedor en la estructura, y **Add inside…** en su menú contextual, abren la misma lista pero añaden el control nuevo *dentro* de ese contenedor. ::: ## Seleccionar | Gesto | Selecciona | | --- | --- | | Clic en un control | Ese control (los demás se deseleccionan). | | Clic en un control ya seleccionado | Mantiene la selección y convierte ese control en el **principal**: la referencia para alinear e igualar tamaños, dibujado con un borde más grueso. | | Arrastrar en un hueco | Un rectángulo de selección: todos los controles que toca. Un contenedor y lo que tiene dentro cuentan una vez (el contenedor). | | Ctrl+A | Todos los controles. | | Clic en un hueco | Nada: el panel Propiedades muestra entonces el propio formulario. | | Una fila de la estructura | Ese control, aunque esté tapado por otros. | Con varios controles seleccionados, el panel Propiedades muestra las herramientas de alineación y espaciado en lugar de propiedades, y el panel Eventos pide que elijas un solo control. ## Mover y redimensionar - **Arrastra** un control seleccionado para mover toda la selección. Las posiciones se ajustan a la cuadrícula (con el snap activo) y el grupo no sale del formulario. - **Suéltalo** sobre un contenedor para meterlo dentro, o sobre el formulario vacío para sacarlo de su contenedor. El destino se ilumina con un marco de color de acento mientras arrastras. - Las **ocho asas** de un único control seleccionado lo redimensionan desde ese borde o esquina; el borde opuesto no se mueve. Los controles nunca son más pequeños que el tamaño mínimo y no salen de su contenedor. - El **tirador** bajo la esquina inferior derecha del formulario lo redimensiona (al menos 120×80, ajustado a la cuadrícula). - Esc durante cualquier arrastre lo cancela y deja todo como estaba. - Las **flechas** mueven la selección 1 px; Shift+flechas la mueven un paso de cuadrícula (1 px con el snap apagado). Varios empujones seguidos son un solo paso de deshacer. Los controles bloqueados no se mueven ni se redimensionan (muestran un candadito sobre su esquina), y las herramientas de alineación los saltan. ### Los contenedores y su pestaña Los hijos de un contenedor lo cubren casi entero, así que un clic ahí elige un hijo. Para elegir o arrastrar el propio contenedor, usa la **pestaña** con su nombre sobre su esquina superior izquierda: aparece mientras el puntero está sobre el contenedor y mientras el contenedor, o un control suyo, está seleccionado. Clic derecho en la pestaña abre el menú contextual del contenedor. Ver [Disposición y contenedores](https://albakore.github.io/pyzed/es/editor/layouts/). ## Snap, cuadrícula y guías inteligentes | Herramienta | Dónde | Qué hace | | --- | --- | --- | | **Mostrar la cuadrícula** | Barra de herramientas, barra de estado, **Ver → Cuadrícula**, G | Muestra u oculta los puntos de la cuadrícula. | | **Ajustar a la cuadrícula** | Barra de herramientas (imán), barra de estado, **Ver** | Redondea posiciones y tamaños al paso de la cuadrícula al arrastrar, colocar y redimensionar. | | **Guías inteligentes** | Barra de herramientas (regla), **Ver** | Ajusta el control que mueves a los bordes y centros de los demás controles y del formulario, y dibuja una línea roja mientras coinciden. | | **Redimensionar el contenido con sus anclajes** | Barra de herramientas (ancla) | Al redimensionar el formulario, un componente o un contenedor libre, lo que hay dentro se mueve y se estira según sus anclajes, como en la ventana en ejecución. Activado por defecto. | | **Ajustar la selección a la cuadrícula** | Barra de herramientas | Mueve y redimensiona los controles seleccionados (todos si no hay selección) sobre la cuadrícula. | | **Tamaño de cuadrícula** | Propiedades del formulario (sección **Diseñador**) | El paso de cuadrícula de este formulario (2 a 64 px, 8 por defecto). Los formularios nuevos toman el valor de [Ajustes](https://albakore.github.io/pyzed/es/editor/settings/). | (Image: Una guía inteligente: la casilla se alinea con los centros de los demás controles) Las guías ajustan a menos de 4 px de un objetivo, en los dos ejes a la vez, así que un control puede alinearse con el borde izquierdo de uno y el centro de otro en el mismo arrastre. ## Alinear, distribuir e igualar tamaños La barra de herramientas actúa sobre la selección: | Botón | Efecto | | --- | --- | | **Alinear a la izquierda / los centros / a la derecha** | Alinea los bordes izquierdos, los centros horizontales o los bordes derechos. | | **Alinear arriba / al medio / abajo** | Alinea los bordes superiores, los centros verticales o los bordes inferiores. | | **Distribuir horizontalmente / verticalmente** | Reparte tres o más controles a la misma distancia entre el primero y el último. | | **Mismo ancho / alto** | Da a todos los seleccionados el ancho o el alto del control principal. | | **Centrar horizontalmente / verticalmente en el formulario** | Centra la selección en el formulario. | | **Traer al frente / Enviar al fondo** | Cambia el orden de dibujo (qué queda encima). | | **Eliminar** | Borra la selección (Supr o Retroceso). | Con varios controles, la alineación usa los límites de la selección; con uno solo, alinea con el formulario. El panel Propiedades muestra las mismas herramientas cuando hay varios controles seleccionados. (Image: Tres controles seleccionados, listos para alinear) ## Portapapeles e historial - Ctrl+C, Ctrl+X, Ctrl+V: copiar, cortar y pegar. Los controles pegados se desplazan un poco para que se vean; un contenedor se copia con todo lo que tiene dentro. Los controles pegados **no** están conectados: sus eventos empiezan vacíos, así no comparten manejadores con los originales. - Lo copiado va al **portapapeles del sistema**, así que puedes pegar controles en **otro formulario**: otra pestaña, otra ventana de Pyzed Design o el mismo formulario tras reiniciar. En otro formulario, un control pegado conserva su nombre si allí está libre (si no, recibe uno nuevo), junto con sus propiedades, estilo, [enlace y reglas](https://albakore.github.io/pyzed/es/editor/data-binding/). Pegar un texto que no son controles de Pyzed pega lo último que se copió en esta ventana. - Ctrl+D duplica la selección sin tocar el portapapeles. - Ctrl+Z deshace, Ctrl+Shift+Z (o Ctrl+Y) rehace. Cada documento tiene su propio historial; las ediciones repetidas de un campo (escribir un título, empujar con las flechas) se juntan en un paso. ## El menú contextual Clic derecho en un control del lienzo, en su fila de la estructura o en la pestaña de un contenedor: (Image: El menú contextual de un botón) | Entrada | Hace | | --- | --- | | **View code** | Abre el manejador del evento principal del control (o abre un componente diseñado en su pestaña). | | **Help** | Abre la página del control en la [referencia](https://albakore.github.io/pyzed/es/editor/reference/) (Shift+F1). | | **Add inside…** | Solo contenedores: la lista Añadir control, añadiendo dentro de este contenedor. | | **Group in a row / column / grid / panel** | Envuelve la selección en una fila flex, una columna flex, una grilla o un panel nuevos. | | **Move out of *contenedor*** | Saca el control de su contenedor, al padre del contenedor. | | **Cut, Copy, Paste, Duplicate** | Como los atajos. | | **Bring to front, Send to back** | Orden de dibujo. | | **Lock / Unlock** | Bloquea el control en su sitio. | | **Delete** | Borra la selección. | El menú se abre en el puntero y no sale de la ventana. Esc o un clic fuera lo cierran. ## La estructura La **Estructura** lista todos los controles del documento en árbol. La primera fila es el propio formulario (o componente): clic para seleccionarlo, **+** le añade un control. (Image: La estructura: un control bloqueado y otro oculto) - **Orden**: el de más arriba primero, como las capas de un programa de dibujo. Los hijos de una fila flex, una columna flex o una grilla aparecen en su orden de disposición. - **Flecha**: pliega o despliega los hijos de un contenedor. En un componente diseñado colocado, lista sus propiedades y métodos públicos; haz clic en uno para insertar `form.ada.rate()` (o `self.stars.pick()` en un componente) en el cursor del editor de código, o para copiarlo si no hay código abierto. - **Ojo**: oculta el control. Los controles ocultos no se ven al ejecutar el formulario y su nombre sale en gris en la estructura. Mira [Diálogos, cajones y otros controles ocultos](#diálogos-cajones-y-otros-controles-ocultos). - **Candado**: bloquea el control para no moverlo ni redimensionarlo sin querer. - **+** (contenedores): añade un control dentro. - **Arrastra una fila** para reordenarla: una línea muestra dónde va (antes o después de una fila), y un marco cuando iría *dentro* de un contenedor. Suéltala en el lienzo para meterla en el contenedor bajo el puntero, o en el formulario. - **Clic derecho** en una fila abre el menú contextual. :::tip La estructura es la forma más fácil de elegir un control tapado por otros, o un [componente no visual](https://albakore.github.io/pyzed/es/editor/non-visual-components/) como un temporizador, y de mover controles entre contenedores con precisión. ::: ## Diálogos, cajones y otros controles ocultos Un diálogo, un cajón o una página que solo aparece al pulsar un botón es un contenedor con **Visible** apagado, que el código muestra con `form.status_dialog.show()` (y `.hide()` para cerrarlo). El lienzo no dibuja los controles ocultos, así un formulario con muchos no se convierte en un montón de paneles superpuestos: 1. **Selecciónalo en la estructura** (o algo de dentro). Aparece delante del formulario, que queda oscurecido detrás, tal como se verá al ejecutarlo. Un aviso arriba muestra su nombre. 2. **Edítalo como siempre**: muévelo, cámbiale el tamaño, suelta controles nuevos dentro desde las herramientas o cambia sus propiedades. 3. **Vuelve** con Esc, la **×** del aviso o un clic en el formulario oscurecido. Para ver todos los controles ocultos a la vez, atenuados en su sitio, activa **Ver → Mostrar todos los controles ocultos**. ### Ocultar un control solo en el editor Si prefieres tener todos los controles en el lienzo y ocultar algunos solo mientras trabajas, como las capas de un programa de dibujo, pon **Ajustes → Lienzo del formulario → Ojo de la estructura** en **Oculto solo en el editor**. Así el ojo oculta el control (y lo que tiene dentro) solo en el lienzo: sigue oculto aunque lo selecciones, al ejecutar el formulario se ve, y **Visible** se cambia en el panel Propiedades. En este modo los controles con Visible apagado se dibujan normal. Lo que oculta el ojo se guarda con el formulario. ## La barra de estado De izquierda a derecha: la posición del puntero en el formulario, lo seleccionado (`sign_in 344×32 at 48, 304`, `3 selected`, o el formulario y su tamaño) y, con un componente elegido, la pista para colocarlo. A la derecha: el marco de ventana que se muestra alrededor del formulario (**GNOME**, **macOS**...: clic para ver el de otra plataforma), el número de controles, **Grid 8px** (clic para mostrar u ocultar la cuadrícula) y **Snap** (clic para activar o desactivar el ajuste). Con el editor de código abierto muestra además la línea y columna del cursor y el estado de los servidores de lenguaje. Ocúltala con **Ver → Barra de estado**.