This sample supports the normal kind of drag-and-drop from a Palette to a Diagram. The Data Inspector allows you to edit the properties of a selected node in the diagram.

This sample also supports dynamically adding a copy of a selected node in the diagram to the palette by the "Add To Palette" button. See the current state of the palette's model in the top textarea. The palette is Diagram.isReadOnly, so the user cannot delete selected nodes from the palette. But the "Delete From Palette" button removes any selected nodes from the palette.

Palette model:
Diagram model:

GoJS Features in this sample

Palette

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


Overview Diagrams

An Overview is a subclass of Diagram that is used to display all of the Parts of another diagram and to show where that diagram's viewport is relative to all of those parts. The user can also scroll the overviewed diagram by clicking or dragging within the overview.

The initialization of an Overview is just a matter of setting Overview.observed to refer to the Diagram that you want it to show. So there needs to be a DIV for your main diagram, for which you create a Diagram in the normal manner, and a separate DIV for your overview, for which you create the Overview in a very simple manner.

More information can be found in the GoJS Intro.

Related samples