Infinite Canvas — Manual Rápido

Un espacio visual libre para organizar ideas, flujos, estructuras o prototipos.
Basado en nodos, aristas, zoom infinito y persistencia automática.

🎮 Gestos del Mouse

  1. Doble clic en vacío → crea nueva tarjeta.
  2. Doble clic en el título → editar (Enter confirma · Esc cancela · blur confirma).
  3. Arrastre en vacío → panning.
  4. Shift + arrastre → marquee selection (caja de selección).
  5. Rueda del mouse → zoom centrado en el cursor.

🔀 Selección y Movimiento

  1. Clic en vacío → limpia la selección.
  2. Ctrl/⌘ + clic en tarjeta → (de)selecciona sin afectar las demás.
  3. Arrastrar con varias seleccionadas → mueve el grupo.
  4. Al soltar un arrastre → snap a la grilla.
  5. Mantén Ctrl/⌘ para SNAP OFF.
  6. Shift + clic entre dos tarjetas → crea una arista (link).
  7. Mantén Alt dentro del canvas → modo borrar (clic para eliminar, con confirmación).

🗑️ Borrado

  1. Delete/Backspace → borra tarjetas seleccionadas y sus aristas.
  2. Alt + clic en tarjeta o arista → borrar con confirmación.

🧭 Controles del HUD

  1. Zoom + / Zoom − / Reset / Fit → control de cámara.
  2. Export → descarga JSON del grafo.
  3. Import → carga un archivo JSON.
  4. Clear → elimina el grafo guardado en esta ruta y recarga.

📁 Drag & Drop

  1. Arrastra un archivo .json al canvas → importa el grafo.

⌨️ Atajos del Teclado

  • + o = → Zoom in
  • - → Zoom out
  • 0 → Reset de cámara
  • F → Fit to screen
  • Esc → cancela linking o limpia selección
  • Ctrl/⌘ (mantenido) → SNAP OFF

💾 Persistencia y Grilla

  • Nodos, aristas y cámara se guardan en localStorage según la ruta.
  • La grilla se basa en :root --grid-size y realinea automáticamente mediante ResizeObserver.
  • El HUD muestra nivel de Zoom + estado de SNAP.

🔌 Origen del Grafo al Iniciar (prioridad)

  1. data-prefer-storage="true" → si existe guardado, lo carga.
  2. window.INIT_GRAPH
  3. data-graph-url
  4. LocalStorage
  5. <script id="graphData">
  6. Grafo por defecto (demo)

📝 Notas Técnicas

  • Aristas con trazo no escalable y zona de clic amplia.
  • Con Alt, el SVG de aristas vuelve a aceptar eventos (borrado fino).
  • Import/Export y drag-&-drop validan y sanitizan el JSON.