gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
1,216 lines (1,128 loc) • 84.5 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
<meta name="description" content="GoJS Change Log"/><link rel="stylesheet" href="./assets/css/style.css"/>
<!-- Copyright 1998-2022 by Northwoods Software Corporation. --> <title>GoJS Change Log</title>
<link rel="stylesheet" href="./assets/css/prism.css" />
</head>
<body>
<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
<div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
<div class="md:pl-4">
<a class="text-white hover:text-white no-underline hover:no-underline
font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href=".">
<h1 class="mb-0 p-1 ">GoJS</h1>
</a>
</div>
<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
<path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
<path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
<li class="p-1 sm:p-0"><a class="topnav-link" href="./learn/">Learn</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="./samples/">Samples</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="./intro/">Intro</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="./api/">API</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="./download.html">Download</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
</ul>
</div>
</div>
<hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
</nav>
<div class="container max-w-5xl mx-auto mb-8">
<div class="pt-4 px-2 lg:px-4 pb-16 w-full overflow-hidden">
<h1>GoJS Change Log</h1>
<p id="ver"></p>
<p>
We maintain a <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub Repository</a>,
which you can star to follow version updates.
We also notify of changes on <a href="https://twitter.com/NorthwoodsGo">Twitter</a>.
</p>
<hr>
<h2 id="2.2">GoJS 2.2</h2>
<p>
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 <a href="intro/typings.html">TypeScript
typings support</a>.
</p>
<p>
GoJS 2.2 also includes several performance enhancements when drawing large graphs, reduced memory usage,
and more efficient replacing or merging of item Arrays.
</p>
<p>
Some of the samples and written documentation have been upgraded to use more modern JavaScript: <code>class</code>es,
arrow functions, <code>const</code> and <code>let</code>, 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.
</p>
<h3>Method Chaining and New Ways to Build Objects</h3>
<p>
In GoJS 2.2 many methods that previously returned <code>void</code> 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.
</p>
Several existing methods now return their instance:
<ul>
<li><a>GraphObject.setProperties</a> and <a>Diagram.setProperties</a> - and their new synonyms
<a>GraphObject.attach</a> and <a>Diagram.attach</a>
</li>
<li><a>Panel.add</a></li>
<li><a>GraphObject.bind</a>, which also has new functionality via method overloads.</li>
<li><a>GraphObject.trigger</a> - to add <a>AnimationTrigger</a>s to a GraphObject</li>
<li><a>Diagram.addEventListener</a>, <a>Diagram.addChangedListener</a>, <a>Diagram.addModelChangedListener</a>,
<a>Model.addChangedListener</a>
</li>
<li><a>Diagram.addLayer</a>, <a>Diagram.addLayerBefore</a>, <a>Diagram.addLayerAfter</a></li>
<li><a>Animation.add</a>, and <a>Animation.addTemporaryPart</a></li>
</ul>
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:
<ul>
<li><code>new go.TextBlock("Some Text", { margin: 5 })</code></li>
<li><code>new go.Picture("sourceURI.png", { width: 30, height: 30 })</code></li>
<li><code>new go.Shape("RoundedRectangle", { fill: "blue", stroke: "yellow" })</code></li>
<li><code>new go.Panel("Auto", { padding: 10, background: "green" })</code></li>
</ul>
<p>This means that one can now write code like:</p>
<pre class="lang-js"><code>// 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
</code></pre>
<p>
New methods <a>GraphObject.set</a> and <a>Diagram.set</a> return their instance.
When using TypeScript definitions, the compiler checks these calls for GraphObject and Diagram property existence and
value types.
</p>
<p>
New method <a>GraphObject.apply</a> 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 <a>GraphObject.apply</a>
with that function.
</p>
<p>
Together, these changes remove the need to use <a>GraphObject,make</a> when concisely defining Diagrams and templates.
For a complete example, this code:
</p>
<pre class="lang-js"><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"))
);
</code></pre>
<p>Can now be written as:</p>
<pre class="lang-js"><code>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"));
</code></pre>
<p>
For more information and examples, see the <a href="intro/buildingObjects.html">intro page on Building Objects</a>.
</p>
<h3>General New Features in GoJS 2.2</h3>
<ul>
<li>
Spot Panels now support <a>Panel.alignmentFocusName</a> on the main element.
This can be useful for creating Spot panels with multiple item arrays that align to the same main element.
There is an example of this property in the
<a href="intro/panels.html#AligningSubElementsSpotPanels">Spot Panel section of the Panel intro page</a>.
</li>
<li>
The <a>Diagram.autoScrollInterval</a> property controls the milliseconds between autoscroll events.
</li>
<li>
The <a>Diagram.delayInitialization</a>'s argument function is now a passed a reference to the Diagram.
</li>
<li>
The <a>Overview.drawsGrid</a> and <a>Overview.updateDelay</a> properties control drawing by an Overview.
</li>
<li>
The <a>CommandHandler.isZoomToFitRestoreEnabled</a> property controls whether the <a>CommandHandler.zoomToFit</a>
command ever restores the previous Diagram scale and position.
</li>
<li>
The <a>DraggingTool.copyCursor</a>, <a>DraggingTool.moveCursor</a>, and <a>DraggingTool.nodropCursor</a> properties
modify the cursors during a drag.
</li>
<li>
The <a>LinkingBaseTool.linkingCursor</a> property modifies the cursor during linking.
</li>
<li>
The <a>GraphObject.findBindingPanel</a> method walks up the visual tree to return the first Panel whose
<a>Panel.data</a> is bound to data.
Used in the <a href="extensions/Hyperlink.html" target="_blank">Hyperlink</a> sample.
</li>
<li>
The <a>Panel.copyTemplate</a> method makes a deep copy of a Panel, including its Bindings, to allow use of the
result in templates.
This is used in <a href="/extras/linkLabelsInFront.html" target="_blank">LinkLabels In Front</a> sample.
</li>
<li>
The <a>TextBlock.formatting</a> property controls the policy of trimming whitespace on TextBlock text.
This can be useful when text strings are preformatted.
</li>
<li>
The <a>TextBlock.lineHeight</a> read-only property provides better information about how the text is being measured
and rendered.
</li>
<li>
The <a>TextBlock.spacingAbove</a> and <a>TextBlock.spacingBelow</a> properties
better control the measuring and rendering in addition to the <a>TextBlock.lineHeight</a>.
</li>
<li>
The <a>Node.findExternalTreeLinksConnected</a> method returns a collection of Links that connect with this Node
or any in its subtree, excluding any isTreeLink Links.
This is the tree-equivalent of <a>Group.findExternalLinksConnected</a> for Groups/subgraphs.
</li>
<li>
The <a>Node.findVisibleNode</a> method walks up the chain of <a>Node.containingGroup</a>s to find the first node
that is visible.
This can be overridden to change behavior, as it is in <a href="samples/treeMapper.html" target="_blank">Tree
Mapper</a> sample.
</li>
<li>
The <a>PanelLayout.remeasureObject</a> method forces a specific GraphObject (but none of its containing panels) to
remeasure.
This can be useful implementing custom layouts.
</li>
<li>
The <a>DraggingTool</a> now optimizes transactions to reduce memory usage by only saving the first and last drag
changes.
This can be changed by overriding <a>DraggingTool.stopTransaction</a>.
</li>
<li>
The <a>Binding</a> constructor now accepts a back-converter as an argument.
A null or function argument value as the fourth argument will automatically call <a>Binding.makeTwoWay</a>> for you.
Not supplying the fourth argument or passing it undefined will leave the Binding OneWay, as it has in the past.
</li>
<li>
The <a>RadialLayout</a> extension by default spreads the children better.
</li>
<li>
The <a>TextEditingTool</a> now stops any default animation when the tool is activated.
</li>
<li>
The <a>TextEditingTool</a> now respects the vertical alignment when a TextBlock is taller than its text.
</li>
<li>
<a>InputEvent.bubbles</a> allows events to bubble beyond the Diagram div.
This can be useful in <a>CommandHandler</a> and <a>Tool</a> method overrides.
</li>
<li>
<em>For some testing environments:</em> <a>Diagram,isUsingDOM</a> and <a>Diagram,useDOM</a>
can query and control the GoJS library's expectation of a DOM existing.
</li>
<li>
Fixed a regression from 2.1.29 where some links may update their geometries outside of a transaction.
</li>
<li>
<em>Potentially incompatible:</em> Touch and Mouse events have been replaced internally with Pointer events.
The GoJS API has not changed, nor has its behavior, as long as the browser is not so old that it does not implement
pointer events.
</li>
</ul>
<h3>Easier Manipulation and Customization of Geometries</h3>
<p>
GoJS 2.2 contains new methods to simplify geometric calculations and more easily customize geometries.
</p>
<ul>
<li>
<a>Point,intersectingLineSegments</a> is a static function that returns true if two finite straight line segments
intersect each other.
</li>
<li>
<a>Rect,intersectsLineSegment</a> is a static function that returns true if a rectangular area is intersected by a
finite straight line segment.
</li>
<li>
<a>Point,compareWithLineSegment</a> is a static function that compares a point with a finite straight line segment,
given x,y numbers.
<a>Point.compareWithLineSegmentPoint</a> is a method that performs the same comparison, but on Points.
</li>
<li>
<a>Geometry.containsPoint</a> is a method that returns true if the Geometry contains a given point.
</li>
<li>
The <a>Link.routeBounds</a> read-only property returns the bounds of the Link geometry in document coordinates.
Used in the <a href="extensions/BalloonLink.html" target="_blank">BalloonLink</a> sample.
</li>
<li>
The <a>Node.getAvoidableRect</a> method returns the area to be avoided for this node,
by default equal to the node's <a>GraphObject.actualBounds</a> plus the <a>Node.avoidableMargin</a>.
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.
</li>
<li>
Groups now implement <a>Panel.isClipping</a>.
If set to true on a Group and if the group has a <a>Group.placeholder</a>,
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.
</li>
<li>
The <a>Layer.isInDocumentBounds</a> property allows finer control of which layers are part of the
<a>Diagram.documentBounds</a>.
Before 2.2, only layers with <a>Layer.isTemporary</a> set to true were excluded from the document bounds (and could
not be explicitly included).
</li>
<li>
The <a>ResizingTool.oppositePoint</a> property returns the Point opposite to the chosen, dragged handle of the
"Resizing" Adornment.
This allows customizations like the
<a href="/extras/groupResizingLimited.html" target="_blank">LimitedGroupResizingTool</a> 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.
</li>
<li>
The <code>RoundedRectangles</code> 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".
</li>
</ul>
<hr />
<h4 id="2.2.22">Changes for 2.2.22</h4>
<ul>
<li>
Disallow browser wheel events on the Diagram canvas from bubbling if the wheel has a horizontal component.
This bubble prevention also prevents the browser in some systems from
</li>
<li>
Fixed a bug where resetting <a>Picture.source</a> to the empty string may cause a property set error.
</li>
</ul>
<h4 id="2.2.21">Changes for 2.2.21</h4>
<ul>
<li>
Improved <a>Link.makeGeometry</a> so that overrides do not need to test for situations where a Link has fewer than
two points.
</li>
<li>
Improved shadows when Diagram and Part are scaled.
</li>
</ul>
<h4 id="2.2.20">Changes for 2.2.20</h4>
<ul>
<li>
Improved <a>LinkingTool.doActivate</a> to assign the location of the <a>LinkingBaseTool.temporaryToNode</a>
(or the <a>LinkingBaseTool.temporaryFromNode</a>, if drawing a link in the reverse direction)
so as to avoid momentarily seeing where the temporary node had been the last time the user tried to draw a new link.
</li>
<li>
Corrected functionality when a browser cancels a Pointer event (for instance when the browser is minimized during
ongoing Pointer events).
</li>
<li>
Corrected <a>GraphObject.mouseLeave</a> sometimes not getting called when the user's pointer leaves the Diagram.
</li>
<li>
Fixed iOS Safari text highlighting when dragging Pointer events out of a Diagram.
</li>
<li>
Fixed a regression from 2.2.18 where link JumpOvers might cause "Change not within a transaction" warnings on model
load.
</li>
</ul>
<h4 id="2.2.19">Changes for 2.2.19</h4>
<ul>
<li>
Event fix for some platforms that reimplement DOM functionality (Polymer and Salesforce Aura components).
</li>
<li>
Graduated panels no longer display shadows on Shape and TextBlock elements when those elements explicitly disable
shadows with <a>GraphObject.shadowVisible</a>.
</li>
</ul>
<h4 id="2.2.18">Changes for 2.2.18</h4>
<ul>
<li>
Fix for some initialization animations which could set <a>Part.location</a> incorrectly.
</li>
<li>
Fixed operation of the <a>LinkShiftingTool</a> extension when the mouse is inside the connected node.
</li>
<li>
The TypeScript extensions are now compiled with options
<code>"noImplicitOverride": true, "noUnusedLocals": true</code>.
</li>
<li>
Fix since 2.2.0: Link bounds now always contain all JumpOvers.
</li>
<li>
Fix since 2.2.0: When a <a>Diagram.autoScale</a> is applied, dragging Parts outside of the viewport now reliably
triggers a redraw.
</li>
</ul>
<h4 id="2.2.17">Changes for 2.2.17</h4>
<ul>
<li>
Internal performance optimizations.
</li>
<li>
<a>LinkLabelDraggingTool</a> extension now supports labels with <a>GraphObject.segmentIndex</a> of NaN.
</li>
<li>
Static Brush functions will no longer trigger Chrome's warning about <code>willReadOnly</code>.
</li>
</ul>
<h4 id="2.2.16">Changes for 2.2.16</h4>
<ul>
<li>
Fixed a regression from 2.2.13 that caused chained animations (calls to an <a>Animation.start</a> inside annother
Animation's <a>Animation.finished</a>) to fail.
</li>
<li>
Fixed <a>Picture.successFunction</a>/<a>Picture.errorFunction</a> not firing when a Part with a Picture is copied,
and that Picture's <a>Picture.source</a> is not data-bound.
</li>
<li>
Fixed a regression from 2.1.50 where setting a <a>Picture.source</a> binding and a default value would fail to use
the default value, if there was no data to bind.
</li>
</ul>
<h4 id="2.2.15">Changes for 2.2.15</h4>
<ul>
<li>
Fixed non-Path <a>Geometry</a> copies not to have a null value for <a>Geometry.figures</a>.
</li>
<li>
Improved the calculation of the midpoint of Bezier curve Links that have exactly three points in their route.
</li>
<li>
Fixed some empty Table panels causing an exception.
</li>
<li>
Loading the GoJS library twice is now a console warning, instead of an error.
</li>
</ul>
<h4 id="2.2.14">Changes for 2.2.14</h4>
<ul>
<li>
Diagram Layouts with <a>Layout.isRealtime</a> set to <code>true</code> will no longer attempt real-time layouts
during the <a>DraggingTool</a> operation.
</li>
<li>
Graduated Panels now deal with highly precise floating point numbers more accurately.
</li>
</ul>
<h4 id="2.2.13">Changes for 2.2.13</h4>
<ul>
<li>
Fixed asynchronous model loading which might intermittently fail to perform AvoidsNodes routing.
</li>
<li>
Enhanced the <a>ArrangingLayout</a> extension to support placing the side nodes about the middle of the side,
by supporting values such as <code>go.Spot.Bottom</code> for the <a>ArrangingLayout.side</a> property.
</li>
<li>
Improved the "HyperlinkText" builder extension so that it works by default in <a>Adornment</a>s and
other Parts that are in temporary layers, by setting <a>GraphObject.isActionable</a> to true.
</li>
<li>
Table panel separator strokes no longer draw if a row or column is empty of visual elements,
and will not draw a separator above the first-rendered row/col.
</li>
</ul>
<h4 id="2.2.12">Changes for 2.2.12</h4>
<ul>
<li>
We have been optimizing the space used by GraphObjects.
The heap used by typical large diagrams now occupies about 10% less space.
Creating copies of a lot of nodes and links may be a bit faster now too.
</li>
<li>
Fixed the new <a>PanelLayoutFlow</a> extension so that multiple "Flow" panels can coexist in the same panel</a>.
</li>
<li>
Improved GenogramLayout in the <a href="samples/genogram.html" target="_blank">Genogram</a> sample
to support a horizontal direction as well as the standard vertical direction.
</li>
<li>
Improved the <a href="samples/selectableFields.html" target="_blank">Selectable Fields</a>
and <a href="samples/selectablePorts.html" target="_blank">Selectable Ports</a>
samples so that clicking on fields or ports within a node respects the Control and Shift modifiers
to toggle or add to the collection of selected fields or ports.
</li>
<li>
Fixed object picking (<a>Diagram.findObject</a>, <a>GraphObject.containsPoint</a>, etc) for Shapes with a
<a>GraphObject.background</a>.
</li>
<li>
The <a>Group.layout</a> property setter now checks to make sure that the new layout is not also the value of
<a>Diagram.layout</a>.
</li>
</ul>
<h4 id="2.2.11">Changes for 2.2.11</h4>
<ul>
<li>
Like the <a>DraggingTool</a> in v2.2.0, <a>LinkReshapingTool</a>, <a>ResizingTool</a>, and <a>RotatingTool</a> now
optimize transactions
to reduce memory usage by only saving the first and last changes for each property of each object in the
transaction.
This can be changed by overriding <b>stopTransaction</b> on the respective tool.
</li>
<li>
<a>Shape.graduatedSkip</a>, <a>TextBlock.graduatedSkip</a>, and <a>TextBlock.graduatedFunction</a>
now take a second argument, the Shape or TextBlock that the function is being called for.
</li>
<li>
Graduated Panels now correctly draw ticks/labels at very large <a>Panel.graduatedMax</a> values.
</li>
<li>
The AMD <code>define</code> statement has been removed from the module version of the library
(<code>go-module.js</code>, <code>go.mjs</code>, <code>go-debug-module.js</code>)
</li>
<li>
The <a>DraggingTool</a>, when dragging a Link (<a>DraggingTool.draggedLink</a>), now passes that link as the
<a>RelinkingTool.originalLink</a>
so that link validation predicates are passed that link.
</li>
<li>
Disconnected links now support setting <a>Part.locationSpot</a>.
</li>
</ul>
<h4 id="2.2.10">Changes for 2.2.10</h4>
<ul>
<li>
Graduated panels now draw all tick marks specifying a <a>Shape.graduatedSkip</a>/<a>TextBlock.graduatedSkip</a>
function,
even when they could be very close together.
</li>
<li>
Fixed drawing on very zoomed-out graphs.
</li>
<li>
Multiple orthogonal links between identical nodes side-by-side are now drawn without crossings. This fixes a
regression from 2.1.51.
</li>
</ul>
<h4 id="2.2.9">Changes for 2.2.9</h4>
<ul>
<li>
Fixed a regression from 2.2.8 with Table Panel when tables are empty (including tables in Node templates).
</li>
</ul>
<h4 id="2.2.8">Changes for 2.2.8</h4>
<ul>
<li>
Improved Table Panel measuring when using TableRows and TableColumns in sparsely populated tables.
</li>
<li>
Improved Table Panel arranging of items that span several rows or columns, when those rows or columns do not all
exist.
</li>
<li>
Animation fixes when <a>AnimationTrigger</a>s execute during a drag.
</li>
<li>
Improved accuracy of tick angles along curves in Graduated panels.
</li>
<li>
Fix for two-way bindings on <a>Part.location</a> when undoing.
</li>
<li>
Calls to <a>Diagram.makeImage</a> and <a>Diagram.makeImageData</a> no longer throw exceptions when attempting to
render "broken" images.
</li>
</ul>
<h4 id="2.2.7">Changes for 2.2.7</h4>
<ul>
<li>
Nested or space-constrained Table Panels apportion space more correctly when some Table elements are stretched
and other rows/columns have their width or height set.
</li>
<li>
Improved the ScrollingTable extension to include a scrollbar "thumb".
</li>
</ul>
<h4 id="2.2.6">Changes for 2.2.6</h4>
<ul>
<li>
Made improvements in gesture handling for iPad + keyboard combinations.
</li>
<li>
Made improvements and added features to the <a href="samples/gantt.html" target="_blank">Gantt</a>
and <a href="samples/donutCharts.html" target="_blank">Donut Charts</a> samples.
</li>
<li>
Drag and drop from a Diagram into empty page space no longer throws an error (regression in 2.2.4).
</li>
<li>
Data <a>Inspector</a>, when <code>multipleSelection</code> option is true,
now clears the properties fields when the <a>Diagram.selection</a> is empty.
</li>
</ul>
<h4 id="2.2.5">Changes for 2.2.5</h4>
<ul>
<li>
Drag and drop across Diagrams fixed on touch devices (regression in 2.2.4 for non Shadow DOM environments).
</li>
<li>
Module versions of the library <code>release/go.mjs</code> and <code>release/go-module.js</code> now export
<code>go</code> as the default export.
</li>
</ul>
<h4 id="2.2.4">Changes for 2.2.4</h4>
<ul>
<li>
Allow <a>AnimationTrigger</a>s to run during Tool operation.
Previously, Animation Triggers would not run if a Tool was active,
which prevented some tools such as <a>LinkingTool</a> from starting animations during their events.
</li>
<li>
Fixed a regression since 2.2.0: Drag and drop in Shadow DOM environments such as Angular
now correctly identify the target Diagram (for dropping from Palettes, for instance).
</li>
<li>
<a>Diagram,useDOM</a> and <a>Diagram,isUsingDOM</a> were incorrectly minified, and now have their names properly
exposed.
</li>
</ul>
<h4 id="2.2.3">Changes for 2.2.3</h4>
<ul>
<li>
Fixed Spot Panels erroneously giving incorrect sizing information to its elements if a previous element had a
stretch.
</li>
<li>
Improved <a>LayeredDigraphLayout</a> routing of Bezier curve links to reduce crossing over nodes.
</li>
<li>
Fixed optimization (in 2.0.0) of <a>Panel.rebuildItemElements</a> when item template(s) may have changed.
</li>
<li>
The <code>package.json</code> now specifies <code>"module": "release/go-module.js"</code>
</li>
</ul>
<h4 id="2.2.2">Changes for 2.2.2</h4>
<ul>
<li>
Added <code>init</code> optional argument to <a>Brush</a> constructor.
</li>
<li>
Stopped tap-hold on some versions of iOS Safari from selecting text.
</li>
<li>
Improvements for licensing Electron apps.
</li>
</ul>
<h4 id="2.2.1">Changes for 2.2.1</h4>
<ul>
<li>
Added rounded corners to the <a>BalloonLink</a> extension, controlled by the new property <a>BalloonLink.corner</a>.
Improved <a>BalloonLink</a>'s implementation of <a>BalloonLink.base</a>.
</li>
<li>
Fixed licensing issues when using Windows high contrast mode, due to changes in Chrome and Edge.
</li>
<li>
Added <code>init</code> optional argument to <a>Layer</a> and <a>Animation</a> constructors. <a>Animation.start</a>
and <a>Animation.stop</a> now return <code>this</code>.
</li>
</ul>
<hr />
<h2 id="2.1">GoJS 2.1</h2>
<h3>New Animation Capabilities</h3>
<p>GoJS 2.1 contains a number of new features to animate different components of your Diagram.</p>
<p>
See the <a href="intro/animation.html" target="_blank">Intro page on Animation</a>
and the <a href="samples/customAnimations.html" target="_blank">Custom Animation sample</a> for more details and
examples.
</p>
<ul>
<li>
New default GoJS animation "fades up", instead of animating Node locations. Added
<a>AnimationManager.initialAnimationStyle</a>
to control this behavior.
Here is an example of:
<ul>
<li>
(top) The new initial animation, the Diagram position animating upwards and Diagram opacity animating
from 0 to 1.
<li>
(middle) A custom "zoom in" animation, animating Diagram scale, which is demonstrated in
the new <a href="samples/stateChart.html" target="_blank">State Chart</a> sample,
<li>
(bottom) <a>AnimationManager.initialAnimationStyle</a> set to <a>AnimationManager.AnimateLocations</a> to
perform the GoJS 2.0 and previous style of animation.
The <a href="samples/dataVisualization.html" target="_blank">Data Visualization</a> sample uses this
option.
</ul>
</li>
<li>
Added <code>"InitialAnimationStarting"</code> <a>DiagramEvent</a> to more easily customize initial animations.
See <a>AnimationManager.initialAnimationStyle</a> for details.
</li>
<li>
New class: <a>AnimationTrigger</a>. These describe how to automatically animate a property on a GraphObject
when it changes value.
</li>
<li>
New class: <a>Animation</a>. This class lets you declaratively setup custom animations, with options for
indefinite animations.
</li>
<li>
New <a>AnimationManager</a> options, including the ability to define custom animation effects to animate with
<a>AnimationManager,defineAnimationEffect</a>
</li>
<li>
New Animation samples and samples modified to use new Animation features:
<ul>
<li>
<a href="samples/customAnimations.html" target="_blank">Custom Animation</a> - <strong>New Sample:</strong>
Demonstrating a number of Node creation/deletion animations, linking animations, and more.
</li>
<li>
<a href="samples/treeLoadAnimation.html" target="_blank">Tree Load Animation</a> - <strong>New Sample:</strong>
recursive animation upon model load.
</li>
<li>
<a href="samples/flowchart.html" target="_blank">Flowchart</a> - In the Palette only, initial animation
is disabled in favor of a custom fade-in animation.
</li>
<li>
<a href="samples/stateChart.html" target="_blank">State Chart</a> - Initial animation is disabled in
favor of a custom zoom fade-in animation.
</li>
<li>
<a href="samples/dataVisualization.html" target="_blank">Data Visualization</a> - Nodes now move using an
<a>AnimationTrigger</a>.
</li>
<li><a href="samples/kittenMonitor.html" target="_blank">Kitten Monitor</a> - Kittens now move using an
<a>AnimationTrigger</a>.
</li>
<li>
<a href="samples/processFlow.html" target="_blank">Process Flow</a> - An indefinite Animation of the
Links' strokeDashArray.
</li>
<li>
<a href="samples/shopFloorMonitor.html" target="_blank">Shop Floor Monitor</a> - Link color changes now
use an <a>AnimationTrigger</a>.
</li>
</ul>
</li>
</ul>
<h3>Improved Support For Data Synchronization</h3>
<p>
GoJS 2.1 contains some new methods to ease integration of GoJS diagrams in applications that maintain their own
data, particularly React apps.
</p>
<p>
See the <a href="intro/react.html" target="_blank">Intro page on using GoJS with React</a> and
the <a href="https://github.com/NorthwoodsSoftware/gojs-react-basic" target="_blank">gojs-react example project</a>
for details and examples.
Also see <a href="https://github.com/NorthwoodsSoftware/gojs-react" target="_blank">gojs-react</a>, a package
containing React Components for GoJS Diagrams, Palettes, and Overviews.
</p>
<ul>
<li>
New method: <a>Model.toIncrementalData</a>. This method outputs an <a>IncrementalData</a> object containing
changes that occurred within a <a>Transaction</a>,
similar to the existing method, <a>Model.toIncrementalJson</a>. It can be used to keep outside data
synchronized with the GoJS model.
</li>
<li>
New methods: <a>Model.mergeNodeDataArray</a> and <a>GraphLinksModel.mergeLinkDataArray</a>. These methods are
used to merge outside data changes into the GoJS model.
</li>
<li>
New method: <a>Model.cloneDeep</a>. This method can be used to make a deep copy of an object, which may be
useful to ensure GoJS doesn't share references with outside state.
It is also used within <a>Model.toIncrementalData</a> to ensure <a>IncrementalData</a>'s list of modified
objects won't contain references to the model's data objects, if the external data is required to be immutable.
</li>
</ul>
<h3 id="2.1.0">Other Changes for 2.1.0</h3>
<ul>
<li>
Added <a>DoubleTreeLayout</a> to the extensions and extensionsJSM directories. This is now used by the
<a href="samples/doubleTree.html">Double Tree</a> sample.
</li>
<li>
Updated the sequencing of "ChangingSelection" and "ChangedSelection" <a>DiagramEvent</a>s to be outside of
transactions for commands and tools.
Exceptions include "ChangingSelection" being called during "Drag" and "Linking" operations when drag-copying or
inserting a link.
With "ChangedSelection" occuring after a transaction completes, any changes will be complete and can be used in
the listener.
</li>
<li>
<a>CommandHandler.zoomToFit</a> now animates by default.
</li>
<li>
Improved the <a>ContextMenuTool.defaultTouchContextMenu</a>'s "Paste" command to use the
<a>ContextMenuTool.mouseDownPoint</a>
rather than the <a>Diagram.lastInput</a>'s <a>InputEvent.documentPoint</a>.
</li>
<li>
Added new property, <a>Diagram.opacity</a>. This may be useful for fade-in/out animations, or visual indication
of a disabled Diagram.
</li>
<li>
Added new method, <a>Diagram.findLinkForKey</a>, which will look for a link corresponding to a model's link
data object's unique key.
This will only return a link when using a <a>GraphLinksModel</a> with <a>GraphLinksModel.linkKeyProperty</a>
set to a non-empty string.
</li>
<li>
<a>Model.applyIncrementalJson</a> now throws an error if model properties (eg. nodeKeyProperty) included in the
JSON don't match the existing model.
This check only includes properties included in the output from <a>Model.toIncrementalJson</a>.
</li>
<li>
Added new methods, <a>Picture.reloadSource</a>, which reloads a Picture source in case the file on the server has
changed,
and <a>Picture.redraw</a> which redraws the picture, and can be useful to update the Picture if the source is
backed by an HTML Canvas or HTML Video Element.
</li>
<li>
Added new sample: <a href="samples/svgDataUrl.html" target="_blank">SVG Data URL</a> - Export SVG with Base64 hrefs
instead
of the <a>Picture.source</a> URL.
</li>
</ul>
<hr />
<h4 id="2.1.56">Changes for 2.1.56</h4>
<ul>
<li>
Updated the root object for systems that define <code>window</code> but do not attach all global variables to it.
GoJS now prefers <code>globalThis</code> if it exists, then <code>global</code>.
</li>
</ul>
<h4 id="2.1.55">Changes for 2.1.55</h4>
<ul>
<li>
Fixed some improper shadows in the SVG output of <a>Diagram.makeSVG</a>.
</li>
</ul>
<h4 id="2.1.54">Changes for 2.1.54</h4>
<ul>
<li>
Fixed <a>Diagram.viewSize</a> when setting it to a real value and then later setting it back to a NaN value.
</li>
<li>
As with 2.1.52, fixed more scenarios with custom animations improperly adding state to the
<a>AnimationManager.defaultAnimation</a>.
</li>
<li>
Fixed rare cases of <a>LayeredDigraphLayout</a> trying to get the "centerX" property of a null vertex.
</li>
<li>
Fixed the <a>RelinkingTool</a> not to automatically select the link that was reconnected.
</li>
</ul>
<h4 id="2.1.53">Changes for 2.1.53</h4>
<ul>
<li>
Fixed <a>Binding.ofModel</a> binding when there is no <a>Diagram</a> and thus no <a>Model</a> to just ignore the
binding.
</li>
<li>
Fixed a regression in <a>Diagram.makeSVG</a> from 2.1.49 when using a <a>Panel,Spot</a> with <a>Panel.isClipping</a>
set to <code>true</code>,
where some elements would get grouped and positioned incorrectly.
</li>
<li>
Fixed <a>Model.toJson</a> output when object keys contained unescaped double-quote characters.
</li>
<li>
Fixed some Shape Geometry intersections (such as with Link connections) when the Shape's Geometry contained small
and flat beziers.
</li>
<li>
Fixed collapsed Parts incorrectly causing their Groups to remeasure, which may have caused Group's connected Links
to re-route.
</li>
</ul>
<h4 id="2.1.52">Changes for 2.1.52</h4>
<ul>
<li>
Fixed animations incorrectly resetting some link routes.
</li>
<li>
Fixed custom animations improperly adding state to the <a>AnimationManager.defaultAnimation</a>.
</li>
<li>
Fixed a regression in 2.1.51 where un-modeled parts containing Images, that are added before a model is set, may
fail to load.
</li>
<li>
Fixed a regression from 2.1.50 when <a>Picture.errorFunction</a> was used to modify the <a>Picture.source</a> or
<a>Picture.element</a>, which would cause a "Collection was modified during iteration" error.
</li>
</ul>
<h4 id="2.1.51">Changes for 2.1.51</h4>
<ul>
<li>
The <a>TextEditingTool</a>, when the user has entered an invalid text string, has always called any
<a>TextBlock.errorFunction</a> and then continued showing the text editor so that the user could fix their text
entry.
The <a>TextEditingTool.doError</a> method now calls any <a>TextBlock.errorFunction</a> and
also calls <a>HTMLInfo.show</a> on the <a>TextEditingTool.currentTextEditor</a>.
This will allow an override of <a>TextEditingTool.doError</a> not to continue showing the editor.
If you have not overridden that method, which was new in 2.1, this change will not affect you.
</li>
<li>
Fixed <a>Model,fromJson</a> not to substitute instances of classes such as <a>Point</a> and <a>Size</a> when the
Object's
"class" property had a value that is "Point" or "Size".
The property value must be what is produced by <a>Model.toJson</a>, which uses values such as "go.Point" or
"go.Size".
The documentation lists all of the substitution cases that <a>Model,fromJson</a> handles.
</li>
<li>
Fixed a regression from 2.1.43 which caused some links to animate routes incorrectly upon dragging.
</li>
<li>
Fixed loading Images used as a <a>Picture.element</a>.
</li>
<li>
Improved some AvoidsNodes routing of Links when connecting Nodes in different Groups and the Groups are not
<a>Group.avoidable</a>.
</li>
<li>
Fixed using multiple license keys.
</li>
</ul>
<h4 id="2.1.50">Changes for 2.1.50</h4>
<ul>
<li>
Enhanced the <a>LinkShiftingTool</a> extension to support links that are only connected at one end.
</li>
<li>
Fixed <a>CommandHandler.doKeyDown</a> to support <a>Robot.keyDown</a> use of "F2" and "ContextMenu" keys.
</li>
<li>
Improved routing of AvoidsNodes links that have a "to" end segment with a direction that is a multiple of 45 (but
not 90) degrees.
</li>
<li>
Fixed diagram not redrawing after images load in frameworks that use a shadow DOM, such as Angular.
</li>
<li>
If you call <a>TextBlock,setBaseline</a> or <a>TextBlock,setUnderline</a> outside of your diagram initialization,
you should also call <a>Diagram.redraw</a> on all Diagrams.
</li>
</ul>
<h4 id="2.1.49">Changes for 2.1.49</h4>
<ul>
<li>
Added the <a href="extensions/PanelLayoutFlow.js" target="_blank">Flow PanelLayout</a> extension,
demonstrated in the <a href="extensions/PanelLayoutFlow.html" target="_blank">Flow PanelLayout</a> sample.
This panel layout (not a diagram layout!) arranges panel elements into rows or columns.
As time goes by we may add more properties to control the behavior of this custom panel layout.
</li>
<li>
Fixed undo/redo bug involving setting <a>RowColumnDefinition</a> properties and calls to
<a>Panel.removeColumnDefinition</a>.
</li>
<li>
Fixed <a>Picture.successFunction</a> erroneously being called twice in some situations, such as when a node was
copy-pasted.
</li>
<li>Fixed <a>Diagram.makeSVG</a> not rendering shadows on some GraphObjects.</li>
<li>Fixed <a>Diagram.makeSVG</a> not clipping when using a <a>Panel,Spot</a> with <a>Panel.isClipping</a> set to
<code>true</code>.
</li>
<li>Improved visual consistency of shadows in SVG output from <a>Diagram.makeSVG</a>.</li>
</ul>
<h4 id="2.1.48">Changes for 2.1.48</h4>
<ul>
<li>
Fixed <a>Panel.removeRowDefinition</a> and <a>Panel.removeColumnDefinition</a>
to decrease the <a>Panel.rowCount</a> and <a>Panel.columnCount</a>
when the highest index <a>RowColumnDefinition</a> is removed.
</li>
<li>
Fixed <a>Picture.successFunction</a>, which was called for only the first Picture with a given unique
<a>Picture.source</a>.
It is now called for every Picture that has a <code>successFunction</code> defined with the same (successfully
loaded) source.
</li>
</ul>
<h4 id="2.1.47">Changes for 2.1.47</h4>
<ul>
<li>
Fixed <a>Diagram.layoutDiagram</a> not performing a layout immediately if called within an ongoing Diagram update
(such as during a <a>DiagramEvent</a> like <code>"InitialLayoutCompleted"</code>).
</li>
<li>
Fixed <a>Panel.itemTemplate</a> so that it is used, not the default item template, when the panel cannot find any
template with the given category name in the item data.
</li>
<li>
<a>Diagram.viewSize</a>, if set, now takes precedence over the size of the <a>Diagram.div</a>.
It is not typical to set both a DIV and the <code>viewSize</code>, but in environments where a DIV is set
automatically
it may be useful for testing purposes to set an explicit <code>viewSize</code> as well.
</li>
</ul>
<h4 id="2.1.46">Changes for 2.1.46</h4>
<ul>
<li>
Fixed indefinite animations causing some transactions to skip the <a>UndoManager</a>.
</li>
<li>
Fixed <a>Diagram.makeImageData</a> to draw any other Parts in the "Grid" Layer besides the Part holding the
<a>Diagram.grid</a>
when the <code>showGrid</code> option is true but the <code>showTemporary</code> option is false.
</li>
</ul>
<h4 id="2.1.45">Changes for 2.1.45</h4>
<ul>
<li>
Fixed a bounds calculation bug with <a>PathSegment,SvgArc</a>s, when the arc has a zero X or Y radius value.
</li>
<li>
Link route calculations now avoid an effectively infinite loop due to floating point errors when the two ports
almost exactly overlap each other.
</li>
<li>
Fixed an occasional exception when dragging a disconnected link when the link had no points in its route.
</li>
<li>
The <a>GraphObject.naturalBounds</a> of a <a>Shape</a> now always prefers <a>GraphObject.desiredSize</a> if it
exists, over the Shape's <a>Geometry.bounds</a>.
These are usually the same, but a Geometry with beziers can be slightly off from the desiredSize used to create it.
</li>
</ul>
<h4 id="2.1.44">Changes for 2.1.44</h4>
<ul>
<li>
Fixed a regression from 2.1.28 with some <a>Shape.geometryString</a> paths.
If a path contained an arc command that was closed, a relative move command afterwards would be at
the wrong coordinates.
</li>
</ul>
<h4 id="2.1.43">Changes for 2.1.43</h4>
<ul>
<li>
Improved performance of <a>LayeredDigraphLayout</a> for large graphs when <a>LayeredDigraphLayout.packOption</a>
is set to <a>LayeredDigraphLayout,PackAll</a>.
Setting <a>LayeredDigraphLayout.packOption</a> to a subset of the possible flags has always helped performance at
the expense of improved layout.
Also, it has always helped to set <a>LayeredDigraphLayout.aggressiveOption</a> to
<a>LayeredDigraphLayout,AggressiveNone</a>.
</li>
<li>
Fixed non-default indefinite animations preventing the default animation from starting. Fixed some other non-default
animation bugs, such as indefinite animations preventing Overviews from updating.
</li>
<li>
Enhanced <a>LinkingTool.findLinkablePort</a>, when <a>LinkingTool.startObject</a> is a Node and the whole node is
not a port,
to return the node's default port <a>Node.port</a> instead of null, if the port is a valid port for linking from or
to.
</li>
</ul>
<h4 id="2.1.42">Changes for 2.1.42</h4>
<ul>
<li>
Fixed an animation bug with <a>ResizingTool</a> where it would disable all animations on resizing.
</li>
<li>
Setting <a>AnimationManager.isEnabled</a> to false and then true again will resume any indefinite animations
(animations with <a>Animation.runCount</a> set to <code>Infinity</code>).
</li>
<li>
Fixed RadialLayout not properly resetting its network. This was most often seen when using with
<a>Diagram.delayInitialization</a> (including gojs-react and gojs-angular).
</li>
</ul>
<h4 id="2.1.41">Changes for 2.1.41</h4>
<ul>
<li>
Improved the animation of colors in <a>Animation</a>s.
</li>
<li>
Added the <a href="extensions/SpotRotatingTool.js" target="_blank">Spot Rotating Tool</a> extension,
demonstrated in the <a href="extensions/SpotRotating.html" target="_blank">Spot Rotating</a> sample.
This is basically the <a>RotatingTool</a> extended to support an additional Adornment and handle for
letting the user interactively move the <a>RotatingTool.rotationPoint</a> by setting
<a>Part.rotationSpot</a>.
</li>
<li>Added an Introduction page about <a href="intro/platforms.html">Using GoJS on Different Platforms</a>, summarizing
existing resources for them.</li>
</ul>
<h4 id="2.1.40">Changes for 2.1.40</h4>
<ul>
<li>
Fixed some styling and missing files in the web site as a result of the reorganization in 2.1.39.
</li>
<li>
Simplified the Storage and FloorplannerTS projects.
</li>
</ul>
<h4 id="2.1.39">Changes for 2.1.39</h4>
<ul>
<li>
Reorganized GoJS kit and site. <code>gojs</code> package no longer contains jQuery, and samples that reference
jQuery use a CDN.
</li>
<li>
Fixed animating the position of GraphObjects inside a Position Panel.
</li>
</ul>
<h4 id="2.1.38">Changes for 2.1.38</h4>
<ul>
<li>
Table panel fixes with stretch elements, this includes a regression fix from 2.1.35.
</li>
<li>
Fixed a regression (for IE11 only) from 2.1.37, which broke mouse events.
</li>
</ul>
<h4 id="2.1.37">Changes for 2.1.37</h4>
<ul>
<li>
Added an Introduction page about <a href="intro/testing.html">Testing</a> with Jest and with Cypress.
</li>
<li>
Fixed some scenarios with Table Panels not apportioning space correctly when elements stretched
and rows/columns had minimums or maximums set.
</li>
<li>
Fixed touch-dragging between Diagrams in frameworks that use a shadow DOM (like Angular).
</li>
<li>
Fixed routing invalidation of links to nodes in collapsed groups that have "...Sides" Spots.
</li>
<li>
Fixed shadows on unfilled <a>PathFigures</a> when a <a>GraphObject.fill</a> was set. This mostly presented itself
when shadowing bezier or orthogonal Link paths.
This fix may cause Links with a Link Label to draw a shadow on the Link path where none was previously. If you do
n