Diagram class

A Diagram is associated with an HTML DIV element. Constructing a Diagram creates an HTML Canvas element which it places inside of the given DIV element, in addition to several helper DIVs. GoJS will manage the contents of this DIV -- you should not modify the contents of the DIV, although you may style the given DIV (background, border, etc) and position and size it as needed.

Minimal Diagram construction looks like this. HTML:

<div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px"></div>

JavaScript:

myDiagram = new go.Diagram("myDiagramDiv",  // create a Diagram for the DIV HTML element
              {
                "undoManager.isEnabled": true  // enable undo & redo
              });

The diagram will draw onto an HTML Canvas element, created inside the Diagram DIV.

Each Diagram holds a set of Layers each of which holds some number of Parts such as Nodes and Links. Each Part consists of GraphObjects such as TextBlocks and Shapes and Panels holding yet more GraphObjects.

A Diagram and its Parts provide the visual representation of a Model that holds JavaScript data objects for the nodes and the links. The model provides the way to recognize the relationships between the data.

Two Diagrams can display and manipulate the same Model. (Example)

A diagram will automatically create Nodes and Links corresponding to the model data. The diagram has a number of named templates it uses to create the actual parts: #nodeTemplateMap, #groupTemplateMap, and #linkTemplateMap. Each template may have some data Bindings that set the part's GraphObjects' properties based on the value of properties of the data.

A simple Node template and Model data (both nodes and links) may look like this:

var $ = go.GraphObject.make;  // for conciseness

// define a simple Node template
myDiagram.nodeTemplate =
  $(go.Node, "Auto",  // the Shape will go around the TextBlock
    $(go.Shape, "RoundedRectangle",
      // Shape.fill is bound to Node.data.color
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 3 },  // some room around the text
      // TextBlock.text is bound to Node.data.key
      new go.Binding("text", "key"))
  );

// create the model data that will be represented by Nodes and Links
myDiagram.model = new go.GraphLinksModel(
[
  { key: "Alpha", color: "lightblue" },
  { key: "Beta", color: "orange" },
  { key: "Gamma", color: "lightgreen" },
  { key: "Delta", color: "pink" }
],
[
  { from: "Alpha", to: "Beta" },
  { from: "Alpha", to: "Gamma" },
  { from: "Beta", to: "Beta" },
  { from: "Gamma", to: "Delta" },
  { from: "Delta", to: "Alpha" }
]);

The above code is used to make the Minimal sample, a simple example of creating a Diagram and setting its model.

Read about models on the Using Models page in the introduction. A diagram is responsible for scrolling (#position) and zooming (#scale) all of the parts that it shows. Each Part occupies some area given by its GraphObject#actualBounds.

The union of all of the parts' bounds constitutes the #documentBounds. The document bounds determines the area that the diagram can be scrolled to. There are several properties that you can set, such as #initialContentAlignment, that control the initial size and position of the diagram contents.

At any later time you can also explicitly set the #position and/or #scale to get the appearance that you want. But you may find it easier to call methods to get the desired effect. For example, if you want to make a particular Node be centered in the viewport, call either #centerRect or #scrollToRect with the Node's GraphObject#actualBounds, depending on whether or not you want the view to be scrolled if the node is already in view.

Read in the Introduction about Viewports and the Initial Viewport. You can have the diagram perform automatic layouts of its nodes and links by setting #layout to an instance of the Layout subclass of your choice. The default #layout is an instance of the Layout base class that ignores links and only positions Nodes that do not have a location. This default layout will allow you to programmatically position nodes (including by loading from a database) and will also allow the user to manually position nodes using the DraggingTool.

If you do supply a particular layout as the #layout, you can control which Parts it operates on by setting Part#isLayoutPositioned. Normally, of course, it works on all top-level nodes and links. The layout is performed both after the model is first loaded as well as after any part is added or removed or changes visibility or size. You can disable the initial layout by setting Layout#isInitial to false. You can disable later automatic layouts by setting Layout#isOngoing to false.

See the Layouts page in the Introduction for a summary of layout behavior.

A diagram maintains a collection of selected parts, the Diagram#selection. To select a Part you set its Part#isSelected property to true.

There are many properties, named "allow...", that control what operations the user may perform on the parts in the diagram. These correspond to the same named properties on Layer that govern the behavior for those parts in a particular layer. Furthermore for some of these properties there are corresponding properties on Part, named "...able", that govern the behavior for that individual part. For example, the #allowCopy property corresponds to Layer#allowCopy and to the property Part#copyable. The Part#canCopy predicate is false if any of these properties is false.

See the Permissions page for a more thorough discussion.

The #commandHandler implements various standard commands, such as the CommandHandler#deleteSelection method and the CommandHandler#canDeleteSelection predicate.

See the Commands page for a listing of keyboard commands and the use of commands in general.

The diagram supports modular behavior for mouse events by implementing "tools". All mouse and keyboard events are represented by InputEvents and redirected to the #currentTool. The default tool is an instance of ToolManager which keeps three lists of mode-less tools: ToolManager#mouseDownTools, ToolManager#mouseMoveTools, and ToolManager#mouseUpTools. The ToolManager searches these lists when a mouse event happens to find the first tool that can run. It then makes that tool the new #currentTool, where it can continue to process input events. When the tool is done, it stops itself, causing the #defaultTool to be the new #currentTool.

Mouse-down tools include:

• ToolManager#actionTool, to support objects like "buttons"
• ToolManager#relinkingTool, to reconnect an existing link
• ToolManager#linkReshapingTool, to modify the route of an existing link
• ToolManager#rotatingTool, to change the angle of an object
• ToolManager#resizingTool, to change the size of an object

Mouse-move tools include:

• ToolManager#linkingTool, to draw a new link
• ToolManager#draggingTool, to move or copy the selection
• ToolManager#dragSelectingTool, to select parts within a rectangular area
• ToolManager#panningTool, to pan the diagram

Mouse-up tools include:

• ToolManager#contextMenuTool, to manage context menus
• ToolManager#textEditingTool, to support in-place text editing
• ToolManager#clickCreatingTool, to create new parts where the user clicks
• ToolManager#clickSelectingTool, to select parts

You can also run a tool in a modal fashion by explicitly setting #currentTool. That tool will keep running until some code replaces the #currentTool. This normally happens when the current tool calls Tool#stopTool, such as on a mouse-up event.

See the Tools page for a listing of predefined tools and how they operate.

A diagram raises various DiagramEvents when interesting things happen that may have affected the whole diagram. See the documentation for DiagramEvent for a complete listing.

When you need to display multiple Models, but not at the same time, you can do so by using only one Diagram and setting the #model to a different one. You can also have two Diagrams share a DIV by swapping the #div to null on one Diagram and setting it on the other. When permanently removing a Diagram,t o clear any memory used, set the #div to null and remove all references to the Diagram. These scenarios are discussed more on the Replacing Diagrams and Models intro page.

Implementers

• Overview
• Palette

Available Extensions

• Diagram$Typings

Annotations

• @JS()
• @staticInterop

Constructors

Diagram.$1()

factory

Diagram.$2([dynamic init])

factory

Diagram.$3([Object? div, dynamic init])

factory

Properties

hashCode → int

The hash code for this object.

no setter, inherited

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

Methods

noSuchMethod(Invocation invocation) → dynamic

Invoked when a nonexistent method or property is accessed.

inherited

toString() → String

A string representation of this object.

inherited

Operators

operator ==(Object other) → bool

The equality operator.

inherited

Static Properties

cycleAll ↔ EnumValue

This value for Diagram#validCycle states that there are no restrictions on making cycles of links.

getter/setter pair

cycleDestinationTree ↔ EnumValue

This value for Diagram#validCycle states that any number of destination links may go out of a node, but at most one source link may come into a node, and there are no directed cycles.

getter/setter pair

cycleNotDirected ↔ EnumValue

This value for Diagram#validCycle states that a valid link from a node will not produce a directed cycle in the graph.

getter/setter pair

cycleNotUndirected ↔ EnumValue

This value for Diagram#validCycle states that a valid link from a node will not produce an undirected cycle in the graph.

getter/setter pair

cycleSourceTree ↔ EnumValue

This value for Diagram#validCycle states that any number of source links may come into a node, but at most one destination link may go out of a node, and there are no directed cycles.

getter/setter pair

documentScroll ↔ EnumValue

This value for Diagram#scrollMode states that the viewport constrains scrolling to the Diagram document bounds.

getter/setter pair

infiniteScroll ↔ EnumValue

This value for Diagram#scrollMode states that the viewport does not constrain scrolling to the Diagram document bounds.

getter/setter pair

licenseKey ↔ String

Gets or sets the license key.

getter/setter pair

none ↔ EnumValue

The default autoScale type, used as the value of Diagram#autoScale: The Diagram does not attempt to scale so that its documentBounds would fit the view.

getter/setter pair

uniform ↔ EnumValue

Diagrams with this autoScale type, used as the value of Diagram#autoScale, are scaled uniformly until the whole documentBounds fits in the view.

getter/setter pair

uniformToFill ↔ EnumValue

Diagrams with this autoScale type, used as the value of Diagram#autoScale, are scaled until the documentBounds fits in the view in one direction while a scrollbar is still needed in the other direction.

getter/setter pair

version ↔ String

Gets the current GoJS version.

getter/setter pair

Static Methods

fromDiv(Object div) → Diagram?

This static function gets the Diagram that is attached to an HTML DIV element.

inherit(Function derivedclass, Function baseclass) → void

This static function declares that a class (constructor function) derives from another class -- but please note that most classes do not support inheritance. Do not call this function when your class is defined using an ES2015 or TypeScript "class" declaration.

isUsingDOM() → bool

This static function returns true if GoJS detects a DOM. In browser environments this is expected to be true, in Node-like environments, false. Specifically, this will be false if there is no root document in the JavaScript context, or if the DOM was disabled explicitly by calling Diagram.useDOM.

useDOM(bool value) → void

This static function sets whether or not GoJS should use a DOM, if one exists. This can be set to false to simulate a DOM-less environment. It is uncommon to set this, but may be required in some testing environments.