Interacción

GraphoJS incluye herramientas de interacción: seleccionar con clic, mover arrastrando y editar texto con doble clic.

Edita el código y pulsa Run▶ Run↺ Reset

Eventos

diagram.addDiagramListener('SelectionChanged', handler) te deja reaccionar a cambios de selección, movimiento, redimensionado y más.

Edición de texto

Un TextBlock con editable: true permite editar la etiqueta con doble clic. Los cambios se aplican al modelo de forma transaccional.

Flags de interacción

El diagrama respeta isReadOnly, allowMove, allowCopy, allowDelete, allowZoom, allowTextEdit, allowLink y allowRelink (igual que GoJS).

Guías de alineación al arrastrar

Al estilo de la extensión GuidedDraggingTool de GoJS, DraggingTool puede mostrar líneas de guía discontinuas y encajar (snap) el nodo arrastrado en los bordes/centros de los nodos cercanos:

diagram.toolManager.draggingTool.isGuidedDraggingEnabled = true;
diagram.toolManager.draggingTool.guidelineSnapDistance = 6; // px, por defecto

Está desactivado por defecto (igual que en GoJS, donde es una herramienta de extensión aparte) y se ignora mientras diagram.isSnapToGridEnabled() esté activo — solo tiene sentido un tipo de snapping a la vez.

Accesibilidad

Un <canvas> no tiene hijos de DOM que un lector de pantalla pueda recorrer, así que GraphoJS añade por defecto — sin configuración — lo mínimo necesario para que el propio canvas sea un widget accesible:

• El canvas es enfocable (tabindex="0") con role="application" y aria-roledescription="diagram"; su aria-label se recalcula solo con el número de nodos/grupos/enlaces y cuántos hay seleccionados.
• Una región aria-live="polite" (oculta visualmente, junto al canvas) anuncia cambios de estado — por defecto en inglés: cambios de selección (Node "X" selected, 3 items selected, Selection cleared), deshacer/ rehacer (Undone: ..., Redone: ...), borrado (3 items deleted), y colapsar/expandir un árbol (Node "X" collapsed/expanded) — sin que tengas que cablear nada tú mismo. diagram.announce(mensaje) es público si una tool o integración propia quiere anunciar algo más.
• Con el canvas enfocado y sin nada seleccionado, las flechas mueven un cursor de foco (un recuadro discontinuo) entre nodos, grupos y enlaces — Intro/Espacio seleccionan el elemento con el foco, y Esc limpia el foco y la selección. En cuanto hay una selección, las flechas vuelven a su comportamiento normal de mover los nodos seleccionados (nudgeSelection) — nunca compiten entre sí.

Traducir los anuncios (accessibilityMessages)

Los textos de arriba están en inglés por defecto (igual que el resto de la API). Para traducirlos o cambiar la redacción, sobrescribe cualquier subconjunto de AccessibilityMessages — al construir el diagrama o después:

diagram.accessibilityMessages = {
  ...diagram.accessibilityMessages, // conserva los formateadores que no toques
  selectionCleared: () => 'Selección vacía',
  singleSelected: (description) => `${description} seleccionado`,
  multipleSelected: (count) => `${count} elementos seleccionados`,
  focusMoved: (description) => `Foco en ${description}`,
  describePart: (part) => `Nodo "${part.label ?? part.key}"`,
};

O pásalo directamente al constructor con new go.Diagram(div, { accessibilityMessages: { ... } }). Solo hace falta definir los campos que quieras cambiar — el resto sigue usando el valor por defecto en inglés.

prefers-reduced-motion

Si el sistema operativo del usuario tiene activado “reducir movimiento”, GraphoJS desactiva las animaciones por defecto — diagram.animationManager.isEnabled empieza en false y cualquier animación (animate(), tween(), …) salta directamente a sus valores finales en vez de interpolar frame a frame. Esto es solo el valor inicial: asignar diagram.animationManager.isEnabled = true después de construir el diagrama siempre lo sobrescribe, tanto si el usuario quiere forzar animaciones como si quiere desactivarlas explícitamente.

Alto contraste (selectionStyle)

De forma similar, si el sistema pide más contraste (prefers-contrast: more o el modo de alto contraste de Windows, forced-colors: active), los colores de selección/foco cambian automáticamente a una paleta de mayor contraste (highContrastSelectionStyle, exportado también por si quieres reutilizarla) en vez del azul/púrpura por defecto (defaultSelectionStyle). Se puede sobrescribir con diagram.selectionStyle = { ...diagram.selectionStyle, selectionColor: '#ff0000' } o vía DiagramOptions.selectionStyle al construir el diagrama — igual que accessibilityMessages, cualquier campo que no toques mantiene su valor detectado automáticamente.

Esto cubre la navegación básica sin ratón y el anuncio de estado a un lector de pantalla; no pretende ser una edición completamente no visual del diagrama (GoJS tampoco ofrece nada de esto — el canvas es, por naturaleza, un medio visual).