Canvas

Un lienzo es la herramienta de diseño del dueño: una pizarra de páginas, con las convenciones que comparten FigJam y Whimsical, donde un nodo es un boceto (una idea que todavía no es un Blueprint, el plano) o un Blueprint, dibujado en vivo desde su archivo. El lienzo contiene solo lo que un Blueprint no puede: los flujos entre nodos, los marcos alrededor de regiones, una posición colocada a mano. Nada en él es una segunda copia de lo que dice un Blueprint. Activo por defecto.

En el navegador

Canvas es una actividad propia en la barra de actividad: cada lienzo con sus páginas debajo, un + para New canvas en su cabecera y los ajustes de Canvas al pie. Un lienzo responde en /p/canvas/<id>[/<page>], y abre en su primera página cuando no se nombra ninguna; New canvas también es un comando, que muestra la actividad y pregunta allí. Un lienzo es compartido (por defecto: en el espacio de trabajo del plugin, en commit con la raíz) o privado (bajo su local/, de una persona, nunca en commit); el formulario de nuevo lienzo pregunta cuál, y el menú junto al título del lienzo lo cambia, moviendo el archivo. Un lienzo privado lleva un ojo tachado junto a ese menú, en la actividad y en la lista. Un boceto se promueve a Blueprint desde sus detalles, por el mismo andamiaje que eidos new, y conserva su sitio; desde entonces el nodo es ese Blueprint. Los nodos toman su aspecto por defecto de las propiedades del propio Framework (el marco): los controles On node y Default style en una fila de propiedad bajo Framework Settings → Properties son del plugin, y editan solo su clave en la fila. Una página se exporta como PNG, SVG o JSON Canvas para Obsidian.

Los hilos de comentarios en una página son de Comments: el lienzo dibuja una chincheta donde está anclado cada hilo (una chincheta sobre un nodo viaja con él) y abre el hilo en el popover de la chincheta.

En disco

.eidos/plugins/canvas/<id>.yaml: un lienzo, el id es su nombre de archivo. El archivo →
.eidos/plugins/canvas/local/<id>.yaml: un lienzo privado, el mismo archivo, fuera de git por la línea plugins/*/local/.
.eidos/plugins/canvas/local.yaml: las preferencias de una persona (zoom con la rueda, el botón derecho, control-clic, Enter, el menú contextual, redimensionar), editadas desde el engranaje del lienzo o la página del plugin, nunca en commit.
En una fila de propiedad de Framework.yaml, canvas: { show, styles } es la clave del plugin: show imprime el valor en un nodo, styles da a cada valor un aspecto (forma, color, relleno, color de relleno, tamaño). Las propiedades se leen en el orden del bloque personalizado y la primera que estiliza un valor gana. Propiedades →

Desde la terminal

eidos canvas list                   # every canvas, with its pages
eidos canvas new "Product Map"      # .eidos/plugins/canvas/product-map.yaml; --private for local/product-map.yaml
eidos canvas move product-map private   # or shared: the file moved between the two
eidos canvas show product-map       # one canvas; --page <id> for one page; --json
eidos canvas schema                 # the JSON Schema a canvas must satisfy

Un agente edita el archivo directamente contra el esquema y el navegador lo refleja. Lee un lienzo antes de cambiarlo, mantén estables los ids de los nodos (los flujos y los hilos los nombran) y nunca promuevas un boceto por el dueño: en qué colección va un Blueprint se pregunta cada vez, en la página. Las propiedades de un Blueprint se editan en el Blueprint, no en el nodo.

Qué informa la comprobación

canvas/invalid (un archivo que el esquema rechaza; basta una clave extraña), canvas/node-missing (un nodo de Blueprint cuyo Blueprint desapareció), canvas/link-missing, canvas/edge-missing, canvas/frame-missing, canvas/annotation-unpointed y canvas/comments-legacy (hilos todavía guardados en el archivo del lienzo de antes de que Comments fuera un plugin; eidos migrate los mueve). Un hilo cuya página o nodo desapareció es el anchor-missing de Comments.

El resto de esta página es el manual: cada herramienta, gesto y atajo.

Herramientas

Una barra flotante al pie tiene las herramientas. Cada una tiene una tecla.

Herramienta	Tecla	Qué hace
Select	`V`	Clic para seleccionar, arrastrar en espacio vacío para un recuadro, `⇧` o `⌘` clic para añadir, arrastrar para mover, flechas para desplazar
Hand	`H`	Arrastrar para desplazar la vista. El botón derecho, el botón central y `Space` desplazan en cualquier herramienta
Sketch	`R`	Coloca un boceto: un nodo que todavía no es un Blueprint
Sticky	`S`	Coloca una nota adhesiva
Text	`T`	Coloca texto libre: un encabezado sobre una región, una nota al margen
Annotation	`A`	Coloca una nota y después haz clic en aquello a lo que apunta; vive solo mientras apunte a algo
Blueprint	`B`	Clic donde va, después elige el Blueprint
Frame	`F`	Arrastra para dibujar un marco alrededor de una región; con una selección, `F` la envuelve
Connect	`X`	Clic en un nodo, después en el nodo al que fluye, o arrastra desde un punto en el lado de un nodo
Comment	`C`	Clic en cualquier sitio, o sobre un objeto, para empezar un hilo

Una herramienta devuelve el control a Select tras colocar una cosa. Mantén ⌥ al colocar, o haz doble clic en la herramienta, para conservarla hasta Esc.

Trabajar la página

Seleccionar y mover. Clic, recuadro, ⌘A. Arrastra para mover (un marco mueve lo que tiene adjunto). ⌘D duplica, ⌫ borra (un nodo de Blueprint sale del lienzo; el archivo se queda). ⌘C y ⌘V copian y pegan bajo el puntero, flujos incluidos. ⌘Z y ⇧⌘Z deshacen y rehacen cualquier cosa.

Editar en sitio. Haz clic en el título o la descripción de un nodo seleccionado para editarlo donde está. ⏎ abre sus detalles: la etiqueta, descripción y propiedades de un boceto; el título, resumen y las propiedades mostradas en el nodo de un Blueprint, escritos directamente en el archivo; el título de un marco y lo que tiene adjunto. Cada campo escribe al perder el foco. Los detalles de un Blueprint ofrecen Open blueprint, que abre el lector sobre el lienzo.

Estilizar. ⇧⏎ abre el popover de estilo: forma, relleno, colores, tamaño. Aquí se encuentran dos capas. El Framework da a un nodo su aspecto por defecto a partir del valor de una propiedad (fijado bajo Framework Settings → Properties, con una prioridad cuando dos propiedades fijan el mismo campo). Un nodo estilizado a mano conserva su propio aspecto; Reset devuelve el mando a las propiedades. ⌥⌘C y ⌥⌘V copian y pegan un estilo.

Flujos. Dibujados con codos a lo largo de la cuadrícula, nunca curvas, llegando a un nodo por uno de ocho anclajes. Arrastra el punto del segmento central de un flujo para mover el codo; arrastra cualquiera de los extremos a otro anclaje. Doble clic en un flujo para etiquetarlo. El popover de estilo fija el color, continuo o discontinuo, y las puntas de cada extremo.

Marcos. Mover un marco mueve lo que tiene adjunto; cualquier cosa arrastrada dentro se une a él. Un flujo soltado dentro de un marco adjunta el nodo a él. Borrar uno ofrece conservar o borrar su contenido.

Comentarios. Una chincheta sobre un objeto viaja con él; una chincheta en espacio vacío se queda quieta. Los hilos tienen respuestas y Resolve. Un mensaje se firma con el usuario como quien actúa esta máquina; @alias menciona a un usuario listado. ⇧C abre la barra lateral de comentarios.

Páginas y exportación. Las páginas viven en un panel arriba a la izquierda: renombrar, añadir, borrar. Export arriba a la derecha guarda la página o la selección como PNG o SVG, o la página como JSON Canvas para Obsidian. El engranaje abajo a la derecha tiene las preferencias del lienzo (zoom con la rueda, desplazar con arrastre derecho, si Enter termina una edición).

Atajos

Teclas	Qué
`V` `H` `R` `S` `T` `A` `B` `F` `X` `C`	Las herramientas
`Space` arrastrar · arrastre derecho · arrastre central	Desplazar la vista en cualquier herramienta
Scroll · `⌘` scroll · pellizco	Desplazar · zoom
`⇧1` · `⇧2` · `⇧0`	Ajustar la página · zoom a la selección · 100%
Flechas · `⇧` flechas	Mover la selección al siguiente nodo en esa dirección · seguir un flujo
`⌥` flechas · `⌥⇧` flechas	Desplazar uno · diez
`⌘A` · `⌘D` · `⌫`	Seleccionar todo · duplicar · borrar
`⌘C` · `⌘V` · `⌥⌘C` · `⌥⌘V`	Copiar · pegar · copiar estilo · pegar estilo
`⌘Z` · `⇧⌘Z`	Deshacer · rehacer
`L` · `⇧⌘L`	Bloquear o desbloquear
`⏎` · `⇧⏎`	Detalles · estilo
`⇧C`	Barra lateral de comentarios
`Esc`	Cierra lo que esté abierto; vuelve a Select
`?`	Lo esencial

Los atajos están escritos con teclas de Mac y se leen como Ctrl, Alt y Shift en otros sistemas.

El archivo

Un lienzo es un archivo YAML, .eidos/plugins/canvas/<id>.yaml, y el archivo es toda su verdad. El navegador lo dibuja y lo escribe de vuelta; un cambio hecho a mano se recoge. Un agente edita el archivo directamente y deja el navegador a una persona.

title: Product Map
pages:
  - id: overview
    title: Overview
    frames:
      - { id: frame-1, title: Onboarding, x: -320, y: -288, w: 1032, h: 544, color: sand }
    nodes:
      - id: n1
        blueprint: sign-up            # a blueprint by id; title and summary come from the file
        frame: frame-1                # attached: moves with the frame
      - id: n2
        sketch: { label: Invite a teammate, note: Not a spec yet }
        style: { shape: pill, color: "#5f80cf", fill: tint }
        styled: true                  # styled by hand; the property default no longer applies
      - id: n3
        sticky: { text: Ask sales about the trial, color: yellow }
    edges:
      - { from: n1, to: n2, label: then, end: triangle }
    layout:
      n1: { x: 40, y: 40 }
      n2: { x: 320, y: 40 }

Un nodo es exactamente uno de blueprint, sketch, sticky, text o annotation, puede estar adjunto a un frame, locked, tener un box y estar estilizado. Una arista une dos nodos (o un nodo con frame:<id>), con etiqueta, codo, anclajes, color, discontinuidad y puntas opcionales. El esquema no permite nada más, así que una clave extraña es un hallazgo, no un descarte silencioso. Los hilos de una página no están en el archivo; son de Comments, anclados por { page, x, y, node? }.