Canvas

Um canvas é a ferramenta de design do dono: um quadro branco de páginas, nas convenções que o FigJam e o Whimsical compartilham, onde um nó é um esboço (uma ideia que ainda não é um Blueprint, o plano) ou um Blueprint, desenhado ao vivo a partir do seu arquivo. O canvas contém só o que um Blueprint não pode: os fluxos entre nós, as molduras em volta de regiões, uma posição colocada à mão. Nada nele é uma segunda cópia do que um Blueprint diz. Ligado por padrão.

No navegador

O Canvas é uma atividade própria na barra de atividades: cada canvas com as suas páginas embaixo, um + para New canvas no cabeçalho e as definições do Canvas no pé. Um canvas responde em /p/canvas/<id>[/<page>], e abre na primeira página quando nenhuma é nomeada; New canvas também é um comando, que mostra a atividade e pergunta ali. Um canvas é partilhado (o padrão: na área de trabalho do plugin, commitado com a raiz) ou privado (sob o seu local/, de uma pessoa, nunca commitado); o formulário de novo canvas pergunta qual, e o menu ao lado do título do canvas alterna, movendo o arquivo. Um canvas privado usa um olho riscado ao lado desse menu, na atividade e na lista. Um esboço é promovido a Blueprint a partir dos seus detalhes, pelo mesmo esqueleto que eidos new, e mantém o seu lugar; daí em diante o nó é aquele Blueprint. Os nós tomam a aparência padrão das propriedades do próprio Framework (a estrutura): os controles On node e Default style em uma linha de propriedade sob Framework Settings → Properties são do plugin, editando só a sua chave na linha. Uma página é exportada como PNG, SVG ou JSON Canvas para o Obsidian.

Threads de comentários em uma página são do Comments: o canvas desenha um pino onde cada thread está ancorada (um pino em um nó viaja com ele) e abre a thread no popover do pino.

Em disco

• .eidos/plugins/canvas/<id>.yaml: um canvas, o id é o seu nome de arquivo. O arquivo →
• .eidos/plugins/canvas/local/<id>.yaml: um canvas privado, o mesmo arquivo, fora do git pela linha plugins/*/local/.
• .eidos/plugins/canvas/local.yaml: as preferências de uma pessoa (zoom pela roda, o botão direito, control-clique, Enter, o menu de contexto, redimensionar), editadas pela engrenagem do canvas ou pela página do plugin, nunca commitadas.
• Em uma linha de propriedade do Framework.yaml, canvas: { show, styles } é a chave do plugin: show imprime o valor em um nó, styles dá a cada valor uma aparência (forma, cor, preenchimento, cor de preenchimento, tamanho). As propriedades são lidas na ordem do bloco personalizado e a primeira que estiliza um valor vence. Propriedades →

A partir do shell

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

Um agente edita o arquivo diretamente contra o schema e o navegador reflete. Leia um canvas antes de mudá-lo, mantenha os ids dos nós estáveis (fluxos e threads os nomeiam) e nunca promova um esboço pelo dono: em qual coleção um Blueprint vai é perguntado toda vez, na página. As propriedades de um Blueprint são editadas no Blueprint, não no nó.

O que a verificação relata

canvas/invalid (um arquivo que o schema recusa; uma chave estranha basta), canvas/node-missing (um nó de Blueprint cujo Blueprint sumiu), canvas/link-missing, canvas/edge-missing, canvas/frame-missing, canvas/annotation-unpointed e canvas/comments-legacy (threads ainda guardadas no arquivo do canvas de antes de o Comments ser um plugin; eidos migrate as move). Uma thread cuja página ou nó sumiu é o anchor-missing do Comments.

O resto desta página é o manual: cada ferramenta, gesto e atalho.

Ferramentas

Uma barra flutuante no pé tem as ferramentas. Cada uma tem uma tecla.

Ferramenta	Tecla	O que faz
Select	V	Clique para selecionar, arraste no espaço vazio para uma seleção em caixa, ⇧ ou ⌘ clique para adicionar, arraste para mover, setas para deslocar
Hand	H	Arraste para mover a vista. O botão direito, o botão do meio e Space movem a vista em qualquer ferramenta
Sketch	R	Coloca um esboço: um nó que ainda não é um Blueprint
Sticky	S	Coloca um adesivo
Text	T	Coloca texto livre: um título sobre uma região, uma nota na margem
Annotation	A	Coloca uma nota, depois clique no que ela aponta; ela vive só enquanto apontar para algo
Blueprint	B	Clique onde ele vai, depois escolha o Blueprint
Frame	F	Arraste para desenhar uma moldura em volta de uma região; com uma seleção, F a envolve
Connect	X	Clique em um nó, depois no nó para o qual ele flui, ou arraste a partir de um ponto no lado de um nó
Comment	C	Clique em qualquer lugar, ou em um objeto, para começar uma thread

Uma ferramenta devolve ao Select depois de colocar uma coisa. Segure ⌥ ao colocar, ou dê um clique duplo na ferramenta, para mantê-la até Esc.

Trabalhando a página

Selecionar e mover. Clique, seleção em caixa, ⌘A. Arraste para mover (uma moldura move o que está anexado a ela). ⌘D duplica, ⌫ exclui (um nó de Blueprint sai do canvas; o arquivo fica). ⌘C e ⌘V copiam e colam sob o ponteiro, fluxos incluídos. ⌘Z e ⇧⌘Z desfazem e refazem qualquer coisa.

Editar no lugar. Clique no título ou na descrição de um nó selecionado para editá-lo onde está. ⏎ abre os seus detalhes: o rótulo, a descrição e as propriedades de um esboço; o título, o resumo e as propriedades mostradas no nó de um Blueprint, escritos direto no arquivo; o título de uma moldura e o que está anexado. Todo campo escreve ao perder o foco. Os detalhes de um Blueprint oferecem Open blueprint, que abre o leitor sobre o canvas.

Estilizar. ⇧⏎ abre o popover de estilo: forma, preenchimento, cores, tamanho. Duas camadas se encontram aqui. O Framework dá a um nó a sua aparência padrão a partir do valor de uma propriedade (definida sob Framework Settings → Properties, com uma prioridade quando duas propriedades definem o mesmo campo). Um nó estilizado à mão mantém a própria aparência; Reset devolve o comando às propriedades. ⌥⌘C e ⌥⌘V copiam e colam um estilo.

Fluxos. Desenhados com cotovelos ao longo da grade, nunca curvas, encontrando um nó em uma de oito âncoras. Arraste o ponto no segmento do meio de um fluxo para mover a dobra; arraste qualquer extremidade para outra âncora. Clique duplo em um fluxo para rotulá-lo. O popover de estilo define cor, contínuo ou tracejado, e as pontas em cada extremidade.

Molduras. Mover uma moldura move o que está anexado; qualquer coisa arrastada para dentro se junta a ela. Um fluxo solto dentro de uma moldura anexa o nó a ela. Excluir uma oferece manter ou excluir o seu conteúdo.

Comentários. Um pino em um objeto viaja com ele; um pino no espaço vazio fica parado. As threads têm respostas e Resolve. Uma mensagem é assinada pelo usuário como quem esta máquina age; @alias menciona um usuário listado. ⇧C abre a barra lateral de comentários.

Páginas e exportação. As páginas vivem em um painel no canto superior esquerdo: renomear, adicionar, excluir. Export no canto superior direito salva a página ou a seleção como PNG ou SVG, ou a página como JSON Canvas para o Obsidian. A engrenagem no canto inferior direito tem as preferências do canvas (zoom pela roda, mover a vista com arraste direito, se Enter termina uma edição).

Atalhos

Teclas	O quê
V H R S T A B F X C	As ferramentas
Space arrastar · arraste direito · arraste do meio	Mover a vista em qualquer ferramenta
Scroll · ⌘ scroll · pinça	Mover a vista · zoom
⇧1 · ⇧2 · ⇧0	Ajustar a página · zoom na seleção · 100%
Setas · ⇧ setas	Mover a seleção para o próximo nó naquela direção · seguir um fluxo
⌥ setas · ⌥⇧ setas	Deslocar por um · por dez
⌘A · ⌘D · ⌫	Selecionar tudo · duplicar · excluir
⌘C · ⌘V · ⌥⌘C · ⌥⌘V	Copiar · colar · copiar estilo · colar estilo
⌘Z · ⇧⌘Z	Desfazer · refazer
L · ⇧⌘L	Travar ou destravar
⏎ · ⇧⏎	Detalhes · estilo
⇧C	Barra lateral de comentários
Esc	Fecha o que está aberto; volta ao Select
?	O essencial

Os atalhos são escritos com teclas de Mac e se leem como Ctrl, Alt e Shift em outros sistemas.

O arquivo

Um canvas é um arquivo YAML, .eidos/plugins/canvas/<id>.yaml, e o arquivo é toda a sua verdade. O navegador o desenha e o escreve de volta; uma mudança feita à mão é captada. Um agente edita o arquivo diretamente e deixa o navegador para uma pessoa.

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 }

Um nó é exatamente um de blueprint, sketch, sticky, text ou annotation, pode estar anexado a um frame, locked, receber um box e ser estilizado. Uma aresta une dois nós (ou um nó a frame:<id>), com rótulo, dobra, âncoras, cor, tracejado e pontas opcionais. O schema não permite mais nada, então uma chave estranha é um achado, não um descarte silencioso. As threads de uma página não estão no arquivo; são do Comments, ancoradas por { page, x, y, node? }.