Drag & drop

Hay dos formas de añadir nodos al diagrama: arrastrarlos desde una palette o usar el botón. En ambos casos, una vez en el lienzo, los nodos se mueven con el ratón.

Arrastrar desde una palette

La barra superior es una Palette: cada elemento es un template arrastrable. Suéltalo sobre el lienzo y se creará un nodo en el punto de soltado, con los datos del template (forma, color y etiqueta).

import { getAllTemplates } from 'graphojs/templates';

new go.Palette(paletteEl, diagram, getAllTemplates(), { showCategories: false });

Internamente el núcleo usa HTML5 drag & drop nativo: el elemento arrastrado escribe application/x-graphojs-template en el dataTransfer y el diagrama lo escucha en su manejador drop, creando el nodo donde sueltas.

Añadir nodos con el botón

El panel bajo el diagrama tiene un botón + Añadir nodo. Cada clic crea un nodo con una key única y lo coloca en una posición de grid (sin superponerse).

model.addNodeData({ key: 2, label: 'Nuevo', x: 40, y: 40 });

Keys únicas

Es importante generar keys que no colisionen:

const keys = model.getNodeDataArray().map((d) => d.key ?? 0);
const next = Math.max(0, ...keys) + 1;

Arrastrar nodos en el lienzo

Una vez añadidos, los nodos se mueven con el ratón (DraggingTool) y la posición se guarda en el modelo de forma undoable (Ctrl/Cmd+Z lo deshace).