Skip to main content
  1. Index

Collections

GoJS provides its own collection classes: List, Set, and Map. The latter two are very similar to the JavaScript Set and Map classes. By default, iteration is different, using an Iterator instead of the JavaScript Iterable protocol. As of GoJS 3.0, List, Set, and Map also implement the JavaScript Iterable protocol with the [iterable] property, allowing the use of for (let item of list/set/map) ... and spread syntax.

While GoJS methods return these proprietary collection types, most methods will also accept the built in JavaScript versions, which may often be preferable for consistency with modern standards. Like the JavaScript collections, they are generic in TypeScript, and thus can enforce type checking at compile time. One potential advantage of the GoJS collections is that they can be made read-only to avoid unwanted modifications at runtime.

In GoJS most of the properties and methods that return collections describing the structure of the diagram return an Iterator. That is because the implementation of the collections are internal — you only need to know how to iterate over the result collection. Other methods or properties will allow you to modify the diagram. An example is Diagram.nodes, which returns the current collection of Nodes and Groups in the diagram as an Iterator. The collection is automatically modified as the programmer adds or removes node data in the model or by direct calls to Diagram.add or Diagram.remove.

However, there are a few properties that return collections that are allowed to be modified. Examples include collections on classes that are mutable when constructed but usually frozen after initialization: Geometry.figures, PathFigure.segments, and Brush.colorStops. Other examples include collections that are modified very infrequently, usually only upon diagram initialization: ToolManager.mouseDownTools (and the other lists of tools) and Diagram.nodeTemplateMap (and other template maps).

See samples that make use of collections in the samples index.

List

A List is an ordered collection of values that are indexed by integers from zero to one less than the List.count.

js

However, if you are writing in TypeScript, GoJS collections classes (List, Map, Set) are now generic, and will help you enforce types:

ts

To iterate over a List, get its List.iterator and call Iterator.next on it to advance its position in the list. Its Iterator.value will be a list item; its Iterator.key will be the corresponding index in the list. Or, more commonly, just call List.each.

js

Set

A Set is an unordered collection of values that does not allow duplicate values. This class is similar to the Set object that is built into JavaScript.

js

When writing TypeScript, it is a generic class so that the compiler can enforce types:

ts

Iterating over the items in a Set is just like iterating over a List, except that the order of the items may vary.

js

Furthermore, as of version 3, Set implements the JavaScript Iterable protocol, by defining the [Symbol.iterator] property. This allows using the for (let item of set) ... statement.

js

Thus Sets can be used with spread syntax. For example:

js

Map

A Map is an unordered collection of key-value pairs that are indexed by the keys. This class is similar to the Map object that is built into JavaScript.

js

When writing TypeScript, it is a generic class so that the compiler can enforce types:

ts

Iterating over the items in a Map is just like iterating over a List, but offering access to both the keys and the values. As with Sets the order of the items may vary.

js

Typically one uses Map.iteratorKeys or Map.iteratorValues when needing to pass a collection on to other methods that take an Iterator.

As of version 3, Map implements the JavaScript Iterable protocol, by defining the [Symbol.iterator] property. This allows using the for (let item of map) ... statement.

js

More iteration examples

It is commonplace to iterate over the selected Parts of a Diagram:

js

Alternatively:

js

Sometimes one needs to iterate over the Nodes in a Diagram:

js

You can also iterate over the port elements in a Node, or the Links connected to a port element:

js

Or perhaps you need to iterate over the elements of a Panel:

js

If you want to find Nodes that are immediate members of a Group:

js