Árboles

Para estructuras jerárquicas, usa un campo parent en los datos y TreeLayout para ordenar el árbol.

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

Jerarquía con parent

Los datos usan parent para indicar el nodo padre:

{ key: 4, parent: 2, label: 'Nivel 3a' }

TreeLayout ordena automáticamente según la profundidad.

Navegación de árbol

• diagram.findTreeRoots() — nodos sin padre.
• node.findTreeParentNode() — el padre.
• node.findTreeChildrenNodes() — los hijos.
• node.isTreeLeaf() — sin hijos.

Expandir / colapsar

Para colapsar un subárbol (ocultar todos sus descendientes) sin necesidad de que los nodos sean un Group, usa node.isTreeExpanded junto con diagram.collapseTree/expandTree:

node.isTreeExpanded; // true por defecto
diagram.collapseTree(node); // oculta todos los descendientes de node
diagram.expandTree(node); // los vuelve a mostrar (respetando los que
// a su vez estén colapsados en un nivel inferior)

Estas operaciones disparan los eventos TreeCollapsed/TreeExpanded del diagrama.

Esto es independiente de Group.isSubGraphExpanded + collapseGroup/expandGroup (ver Grupos), que colapsa la pertenencia a un grupo en vez de la jerarquía de árbol.

TreeExpanderButton

TreeExpanderButton() construye un botón (“−”/“+”) listo para añadir al template de un nodo; al pulsarlo llama a collapseTree/expandTree sobre el nodo que lo contiene:

import * as go from 'graphojs/go';
import { TreeExpanderButton } from 'graphojs';

const $ = go.GraphObject.make;

diagram.nodeTemplate = $(
  go.Panel,
  'Horizontal',
  $(go.Panel, 'Auto', $(go.Shape, 'RoundedRectangle'), $(go.TextBlock, new go.Binding('text', 'label'))),
  TreeExpanderButton(), // { size, background, stroke } opcionales
);

TreeExpanderButton/PanelExpanderButton no forman parte del namespace go.* (tampoco en GoJS real, donde viven en el módulo de extensiones): se importan directamente desde graphojs.