GoJS 2.2 released

GoJS
1

GoJS 2.2

GoJS 2.2 introduces a number of properties and methods for convenience and to improve customization. GoJS 2.2 also includes new methods for constructing objects, and enhances TypeScript typings support.

GoJS 2.2 also includes several performance enhancements when drawing large graphs, reduced memory usage, and more efficient replacing or merging of item Arrays.

Some of the samples and written documentation have been upgraded to use more modern JavaScript: classes, arrow functions, const and let, so the samples and documentation might no longer be viewable using old browsers such as Internet Explorer 11 or some old Android browsers. The library and the extensions continue to target ES5 (ES2012), so that apps using the library can still work on IE11.

Remember to get a new license key at: Product Activation

Method Chaining and New Ways to Build Objects

In GoJS 2.2 many methods that previously returned void now return the method’s instance, to promote method chaining. GoJS 2.2 also introduces several new methods or arguments to allow type-checking of settings by compilers and in text editors.

Several existing methods now return their instance:

GraphObject constructors now accept one or two optional arguments. The first is the value for a common property, and the second is a JavaScript Object detailing properties to initialize. For example, one can now write:

  • new go.TextBlock("Some Text", { margin: 5 })
  • new go.Picture("sourceURI.png", { width: 30, height: 30 })
  • new go.Shape("RoundedRectangle", { fill: "blue", stroke: "yellow" })
  • new go.Panel("Auto", { padding: 10, background: "green" })

This means that one can now write code like:

// Create a Node and add a Shape and a TextBlock to it:
myDiagram.nodeTemplate =
  new go.Node("Vertical")
    .add(new go.Shape({ width: 40, height: 40, fill: "white" })  // default width & height & fill
          .bind("width") // binds data.width to Shape.width
          .bind("height")
          .bind("fill", "color") // binds data.color to Shape.fill
          .bind("figure", "fig")) // data.fig should be the registered name of a geometry figure generator
    .add(new go.TextBlock("(no name)",  // default string to display
                          { isMultiline: false, editable: true })
          .bind("text", "name", null, null));  // TwoWay Binding of TextBlock.text with data.name without converters

New methods GraphObject.set and Diagram.set return their instance. When using TypeScript definitions, the compiler checks these calls for GraphObject and Diagram property existence and value types.

New method GraphObject.apply can be used to define common functions that provide settings and bindings. Such customizations can then be applied to a GraphObject that you are initializing by calling GraphObject.apply with that function.

Together, these changes remove the need to use GraphObject.make when concisely defining Diagrams and templates. For a complete example, this code:

const $ = go.GraphObject.make;

const myDiagram = $(go.Diagram, "myDiagramDiv",
  {
    "undoManager.isEnabled": true
  });

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "RoundedRectangle",
      { strokeWidth: 0, fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 8, font: "bold 14px sans-serif", stroke: '#333' },
      new go.Binding("text", "key"))
  );

Can now be written as:

const myDiagram = new go.Diagram("myDiagramDiv",
  {
    "undoManager.isEnabled": true
  });

myDiagram.nodeTemplate =
  new go.Node("Auto")
    .add(new go.Shape("RoundedRectangle", { strokeWidth: 0, fill: "white" })
          .bind("fill", "color"))
    .add(new go.TextBlock({ margin: 8, font: "bold 14px sans-serif", stroke: '#333' })
          .bind("text", "key"));

For more information and examples, see the intro page on Building Objects.

General New Features in GoJS 2.2

Easier Manipulation and Customization of Geometries

GoJS 2.2 contains new methods to simplify geometric calculations and more easily customize geometries.

  • Point.intersectingLineSegments is a static function that returns true if two finite straight line segments intersect each other.
  • Rect.intersectsLineSegment is a static function that returns true if a rectangular area is intersected by a finite straight line segment.
  • Point.compareWithLineSegment is a static function that compares a point with a finite straight line segment, given x,y numbers. Point.compareWithLineSegmentPoint is a method that performs the same comparison, but on Points.
  • Geometry.containsPoint is a method that returns true if the Geometry contains a given point.
  • The Link.routeBounds read-only property returns the bounds of the Link geometry in document coordinates. Used in the BalloonLink sample.
  • The Node.getAvoidableRect method returns the area to be avoided for this node, equal to the node’s GraphObject.actualBounds plus the Node.avoidableMargin. This method can be overridden to customize AvoidsNodes routing behavior near a node to account for the visual area occupied by the node being smaller than the full rectangular bounds of the node.
  • Groups now implement Panel.isClipping. If set to true on a Group and if the group has a Group.placeholder, the group will visually clip its member nodes and links. This does not change how those parts are measured, nor does it affect how those parts may be positioned.
  • The Layer.isInDocumentBounds property allows finer control of which layers are part of the Diagram.documentBounds. Before 2.2, only layers with Layer.isTemporary set to true were excluded from the document bounds (and could not be explicitly included).
  • The ResizingTool.oppositePoint property returns the Point opposite to the chosen, dragged handle of the “Resizing” Adornment. This allows customizations like the LimitedGroupResizingTool sample, which demonstrates a custom tool to allow resizing groups while disallowing the group to resize smaller than its members, and also disallowing the group to expand to cover any non-member nodes.
  • The RoundedRectangles extension code now includes definitions for the “RoundedLeftRectangle” and “RoundedRightRectangle” figures. The definitions for all four “Rounded…Rectangle” figures has been modified slightly to better match the curves of a full “RoundedRectangle”.