List Node Demo

This demo shows how to display a node with sections arranged in rows. The sections can be re-arranged interactively. When a section is moved, its edges are moved as well.

Things to Try

  • Add new rows with the context menu (right click). Note that rows which support outgoing edges have a port on the right side of the node. Rows which support incoming edges have a port that is placed at the left.
  • Connect edges to the ports at the rows by dragging from a port. Edges will always go from the right side to the left side of a node, no matter on which side the edge creation was started.
  • Move rows up and down by dragging with the mouse.
  • Move an entire node by dragging with the mouse at its header.
  • Rename nodes and rows by clicking on a node or row label and pressing F2.
  • Remove rows with the context menu by right-clicking on them.