This sample demonstrates how a "Person" node can be dropped onto a "Table" node, causing the person to be assigned a position at the closest empty seat at that table. When a person is dropped into the background of the diagram, that person is no longer assigned a seat. People dragged between diagrams are automatically removed from the diagram they came from.

"Table" nodes are defined by separate templates, to permit maximum customization of the shapes and sizes and positions of the tables and chairs.

"Person" nodes in the myGuests diagram can also represent a group of people, for example a named person plus one whose name might not be known. When such a person is dropped onto a table, additional nodes are created in myDiagram. Those people are seated at the table if there is room.

Tables can be moved or rotated. Moving or rotating a table automatically repositions the people seated at that table.

The UndoManager is shared between the two Diagrams, so that one can undo/redo in either diagram and have it automatically handle drags between diagrams, as well as the usual changes within the diagram.

Diagram Model saved in JSON format, automatically updated after each transaction:


GoJS Features in this sample


Tools handle all input events, such as mouse and keyboard interactions, in a Diagram. There are many kinds of predefined Tool classes that implement all of the common operations that users do.

For flexibility and simplicity, all input events are canonicalized as InputEvents and redirected by the diagram to go to the Diagram.currentTool. By default the Diagram.currentTool is an instance of ToolManager held as the Diagram.toolManager. The ToolManager implements support for all mode-less tools. The ToolManager is responsible for finding another tool that is ready to run and then making it the new current tool. This causes the new tool to process all of the input events (mouse, keyboard, and touch) until the tool decides that it is finished, at which time the diagram's current tool reverts back to the Diagram.defaultTool, which is normally the ToolManager, again.

More information can be found in the GoJS Intro.

Related samples


A Palette is a subclass of Diagram that is used to display a number of Parts that can be dragged into the diagram that is being modified by the user. The initialization of a Palette is just like the initialization of any Diagram. Like Diagrams, you can have more than one Palette on the page at the same time.

More information can be found in the GoJS Intro.

Related samples